diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..971f0af1
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,3 @@
+# Force LF line endings for shell scripts regardless of the developer's OS.
+# Shell scripts with CRLF endings will fail with "exec format error" in Linux containers.
+*.sh text eol=lf
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c6f8e3a8..cbf6eaa4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -7,7 +7,7 @@ on:
     branches: [ develop ]
 
 jobs:
-  build-and-test:
+  backend:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
@@ -18,22 +18,265 @@ jobs:
         with:
           node-version: '20'
           cache: 'npm'
-          cache-dependency-path: |
-            backend/package-lock.json
-            frontend/package-lock.json
+          cache-dependency-path: backend/package-lock.json
 
-      - name: Install Backend Dependencies
+      - name: Install Dependencies
         working-directory: ./backend
         run: npm ci
 
-      - name: Build Backend (TypeScript)
+      - name: Build (TypeScript)
         working-directory: ./backend
         run: npm run build
 
-      - name: Install Frontend Dependencies
+      - name: Unit Tests (Vitest)
+        working-directory: ./backend
+        run: npm test
+
+      - name: Lint (ESLint)
+        working-directory: ./backend
+        run: npm run lint
+
+      - name: Audit Dependencies
+        working-directory: ./backend
+        run: npm audit --audit-level=high
+
+  frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install Dependencies
         working-directory: ./frontend
         run: npm ci
 
-      - name: Build Frontend (Vite/React)
+      - name: Build (Vite/React)
         working-directory: ./frontend
         run: npm run build
+
+      - name: Lint (ESLint)
+        working-directory: ./frontend
+        run: npm run lint
+
+      - name: Audit Dependencies
+        working-directory: ./frontend
+        run: npm audit --audit-level=high
+
+  docker-validate:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build Docker image (validation only)
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: false
+          load: true
+          tags: sencho:pr-test
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Scan image for vulnerabilities (Trivy)
+        uses: aquasecurity/trivy-action@master
+        with:
+          image-ref: sencho:pr-test
+          exit-code: '0'
+          severity: 'CRITICAL,HIGH'
+          format: 'table'
+        continue-on-error: true
+
+  e2e:
+    runs-on: ubuntu-latest
+    needs: [ backend, frontend ]
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install root dependencies (Playwright)
+        run: npm ci
+
+      - name: Install backend dependencies
+        working-directory: ./backend
+        run: npm ci
+
+      - name: Build backend
+        working-directory: ./backend
+        run: npm run build
+
+      - name: Install frontend dependencies
+        working-directory: ./frontend
+        run: npm ci
+
+      - name: Create compose directory
+        run: mkdir -p /tmp/compose
+
+      - name: Start backend
+        working-directory: ./backend
+        run: node dist/index.js &
+        env:
+          JWT_SECRET: ci-test-secret-key-not-for-production
+          COMPOSE_DIR: /tmp/compose
+          PORT: 3000
+          NODE_ENV: test
+
+      - name: Start frontend dev server
+        working-directory: ./frontend
+        run: npm run dev &
+
+      - name: Wait for services to be ready
+        run: npx wait-on http://localhost:3000/api/health http://localhost:5173 --timeout 30000
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run E2E tests
+        run: npx playwright test
+        env:
+          E2E_USERNAME: admin
+          E2E_PASSWORD: password123
+
+      - name: Upload E2E report
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: |
+            e2e/report/
+            test-results/
+          retention-days: 7
+
+  update-screenshots:
+    runs-on: ubuntu-latest
+    # Only on develop pushes; skip bot commits to avoid an infinite loop
+    if: "github.event_name == 'push' && github.ref == 'refs/heads/develop' && !contains(github.event.head_commit.message, 'docs: refresh screenshots')"
+    needs: [ backend, frontend ]
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          # PAT required — GITHUB_TOKEN cannot create PRs against a protected
+          # branch. DOCS_REPO_TOKEN is a classic PAT with repo scope.
+          token: ${{ secrets.DOCS_REPO_TOKEN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install root dependencies (Playwright)
+        run: npm ci
+
+      - name: Install backend dependencies
+        working-directory: ./backend
+        run: npm ci
+
+      - name: Build backend
+        working-directory: ./backend
+        run: npm run build
+
+      - name: Install frontend dependencies
+        working-directory: ./frontend
+        run: npm ci
+
+      - name: Create compose directory
+        run: mkdir -p /tmp/compose
+
+      - name: Start backend
+        working-directory: ./backend
+        run: node dist/index.js &
+        env:
+          JWT_SECRET: ci-test-secret-key-not-for-production
+          COMPOSE_DIR: /tmp/compose
+          PORT: 3000
+          NODE_ENV: test
+
+      - name: Start frontend dev server
+        working-directory: ./frontend
+        run: npm run dev &
+
+      - name: Wait for services to be ready
+        run: npx wait-on http://localhost:3000/api/health http://localhost:5173 --timeout 30000
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Capture screenshots
+        run: npx playwright test e2e/screenshots.spec.ts --project=chromium
+        env:
+          E2E_USERNAME: admin
+          E2E_PASSWORD: password123
+
+      - name: Open / update screenshots PR
+        uses: peter-evans/create-pull-request@v6
+        with:
+          token: ${{ secrets.DOCS_REPO_TOKEN }}
+          branch: chore/refresh-screenshots
+          commit-message: "docs: refresh screenshots"
+          title: "docs: refresh screenshots"
+          body: "Automated screenshot refresh — generated by the `update-screenshots` CI job on every push to `develop`."
+          add-paths: docs/images/
+          delete-branch: true
+
+  sync-docs:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' && github.ref == 'refs/heads/develop'
+    steps:
+      - name: Checkout Sencho repo
+        uses: actions/checkout@v4
+        with:
+          path: sencho
+
+      - name: Clone or init sencho-docs
+        env:
+          DOCS_TOKEN: ${{ secrets.DOCS_REPO_TOKEN }}
+        run: |
+          # Always start clean so a previous partial/broken checkout can't cause
+          # "not in a git directory" on subsequent steps.
+          rm -rf sencho-docs
+
+          REMOTE="https://x-access-token:${DOCS_TOKEN}@github.com/AnsoCode/sencho-docs.git"
+
+          if git clone "${REMOTE}" sencho-docs 2>/dev/null; then
+            echo "Cloned existing sencho-docs."
+          else
+            echo "Clone failed (repo is empty or has no default branch) — initializing."
+            mkdir -p sencho-docs
+            cd sencho-docs
+            git init
+            git checkout -b main
+            git remote add origin "${REMOTE}"
+          fi
+
+      - name: Copy /docs into sencho-docs root
+        # --exclude='.git' prevents rsync --delete from wiping the .git
+        # directory that was just cloned/initialized in the previous step.
+        run: rsync -av --delete --exclude='.git' sencho/docs/ sencho-docs/
+
+      - name: Commit and push to sencho-docs
+        working-directory: sencho-docs
+        run: |
+          git config user.email "docs-bot@sencho.io"
+          git config user.name "Sencho Docs Bot"
+          git add -A
+          git commit -m "docs: sync from develop@${{ github.sha }}" || echo "No changes to commit"
+          git push origin HEAD:main
diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index 9222df74..4a2165d3 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -16,6 +16,11 @@ jobs:
       - name: Check out the repo
         uses: actions/checkout@v4
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: arm64
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
@@ -42,6 +47,7 @@ jobs:
         with:
           context: .
           push: true
+          platforms: linux/amd64,linux/arm64
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=registry,ref=saelix/sencho:buildcache
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3cc12407..62b3dd33 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,116 +5,159 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
-- **Fixed:** LogViewer (container SSE log stream) returning 404 on remote nodes — the `?nodeId=` query param was forwarded by `remoteNodeProxy` to the remote server, where `nodeContextMiddleware` rejected it with `Node X not found` because the gateway's node IDs don't exist on the remote instance. Fixed by stripping `nodeId` from `proxyReq.path` in `onProxyReq`, mirroring the existing `x-node-id` header removal.
-- **Fixed:** Terminal logs and container stats WebSockets failing with "HTTP Authentication failed" on remote nodes — the WebSocket upgrade proxy was forwarding the browser's `cookie` header to the remote Sencho instance. The remote's `authMiddleware` picks `cookieToken` before `bearerToken`, and the cookie (signed with the local JWT secret) fails verification on the remote, returning 401. Fixed by deleting the `cookie` header before `wsProxyServer.ws()`, mirroring the `proxyReq.removeHeader('cookie')` already present in the HTTP proxy. Also strips the gateway's `nodeId` query param from the forwarded URL so the remote defaults cleanly to its own local node.
-- **Fixed:** Container stats (CPU/RAM/NET), bash exec terminal, and "Open App" button all broken for remote nodes — stats and exec WebSockets connected to the bare root (`ws://host`) with no `?nodeId=` query param, so the upgrade handler couldn't detect the remote node and skipped the WS proxy. Moved all generic WebSockets to `/ws?nodeId=` path; upgrade handler now correctly proxies them to the remote Sencho instance.
-- **Fixed:** Bash exec and stats WebSockets not reaching the backend in `npm run dev` — Vite proxy config now includes `ws: true` on `/api` and a new `/ws` proxy entry so all WebSocket upgrades are forwarded to `localhost:3000`.
-- **Fixed:** Backend WS message handler crashing when a proxied WebSocket arrives from a gateway and the forwarded `nodeId` doesn't exist in the remote instance's DB — now falls back to the default local node instead of throwing.
-- **Fixed:** "Open App" button opening `http://localhost:{port}` for remote node containers — now resolves the hostname from the remote node's `api_url` so the correct remote host is used.
-- **Fixed:** Remote node system stats, container stats, logs, and exec returning errors — `remoteNodeProxy` middleware was already positioned before API route definitions, but `/api/system/stats` contained a dead remote branch that called `NodeRegistry.getDocker()` for remote nodes, which throws since remote nodes have no direct Docker socket access. Removed the broken branch; remote requests are correctly intercepted by the proxy middleware before reaching any route handler.
-- **Added:** Background image update checker — `ImageUpdateService` polls OCI-compliant registries (Docker Hub, GHCR, LSCR, etc.) every 6 hours using manifest digest comparison against local `RepoDigests`. Results cached in a new `stack_update_status` SQLite table. A pulsing blue dot badge appears in the stack list sidebar for stacks with available updates. Manual refresh available via `POST /api/image-updates/refresh` (rate-limited to once per 10 minutes).
-- **Fixed:** `AppStoreView` and `GlobalObservabilityView` using raw `fetch()` instead of `apiFetch()` — all calls now inject the `x-node-id` header so templates, deploys, stacks, and logs are correctly proxied to the active remote node.
-- **Fixed:** `HostConsole` WebSocket URL missing `?nodeId=` query parameter — the upgrade handler now receives the active node ID and routes the PTY session to the correct node.
-- **Added:** Two-tier Option A scoped navigation UX — a context pill in the top header bar always shows the active node name (pulsing blue for remote, green for local).
-- **Added:** Remote-aware headers in `HostConsole` ("Host Console — [Node Name]"), `ResourcesView` ("Resources Hub — [Node Name]"), `GlobalObservabilityView` (floating node badge), and `AppStoreView` deploy sheet ("Deploying to: [Node Name]").
-- **Added:** `SettingsModal` now scopes its sidebar to the active node type — when a remote node is selected, global-only tabs (Account, Appearance, Notifications, Nodes) are hidden, and the header subtitle shows the remote node name.
-- **Fixed:** A massive memory leak (browser Out of Memory crash) by throttling historical metrics polling down to 60s and downsampling SQLite metrics payload sizes by 12x.
-- **Fixed:** A bug where the active node UI dropdown would desync from the actual API requests on initial page load by properly hydrating state from localStorage.
-- **Fixed:** Remote node proxy forwarding the browser's `sencho_token` cookie to the remote Sencho instance — the remote's `authMiddleware` evaluates `cookieToken || bearerToken` and the cookie (signed with the local JWT secret) was validated before the valid Bearer token, causing 401 on all proxied API calls. Fixed by stripping the `cookie` header in `proxyReq` so only the Bearer token is used for remote authentication.
-- **Fixed:** `nodeContextMiddleware` blocking `/api/nodes` when `x-node-id` references a deleted/non-existent node — the nodes list endpoint must always succeed so the frontend can re-sync a stale node ID in localStorage; exempted alongside `/api/auth/`.
-- **Fixed:** Remote node proxy stripping the `/api` path prefix — `remoteNodeProxy` is mounted at `app.use('/api/', ...)` so Express strips that prefix from `req.url` before `http-proxy-middleware` sees it; added `pathRewrite: (path) => '/api' + path` to restore the full path when forwarding to the remote Sencho instance (e.g. `/stats` → `/api/stats`). This was the root cause of all remote API calls returning the remote's SPA HTML instead of JSON.
-- **Fixed:** Dashboard cards (Active Containers, Host CPU, Host RAM, Docker Network) showing stale local-node data after switching to a remote node — `HomeDashboard` polling effects now depend on `activeNode?.id` and clear state immediately on node change.
-- **Fixed:** `refreshStacks` crashing with `SyntaxError` or `TypeError` when the remote proxy returns a non-JSON response (e.g., connection refused to unreachable remote node) — now checks `res.ok` before calling `res.json()` and iterates a typed `fileList` instead of the raw parsed value.
-- **Fixed:** Restored Local/Remote type selector and fixed state resets in the Add Node modal — form now resets to defaults every time the dialog opens, and the title reflects the chosen type dynamically.
-- **Fixed:** Remote node connection details failing to display Containers, Images, and CPU metrics — `testRemoteConnection` now fires parallel requests to `/api/stats`, `/api/system/stats`, and `/api/system/images` after auth succeeds, mapping real values into the info panel.
-- **Fixed:** Suppressed `[DEP0060] DeprecationWarning: util._extend` from `http-proxy@1.18.1` — override is applied to `process.emitWarning` before the proxy instances are created, cleanly intercepting the warning at its call site without suppressing other warnings.
-- **Fixed:** Backend memory leak caused by improper proxy middleware instantiation - `createProxyMiddleware` was called inside the request handler on every API call, spawning a new `http-proxy` instance (and registering new server listeners) per request. Refactored to a single globally-instantiated proxy using the `router` option for dynamic per-request target resolution.
-- **Fixed:** `[DEP0060] DeprecationWarning: util._extend` deprecation eliminated as a side-effect of the above fix (deprecation was triggered on every new `http-proxy` initialisation).
-- **Fixed:** Remote node authentication failures - `authMiddleware` and WebSocket upgrade handler both accept `Authorization: Bearer` tokens (Sencho-to-Sencho proxy auth).
-- **Fixed:** Node connection testing logic updated to perform authenticated HTTP pings to `/api/auth/check` on the remote instance.
-- **Fixed:** Node switcher dropdown failing to trigger data refreshes - `EditorLayout` now reacts to `activeNode` changes, re-fetching stacks and clearing stale editor/container state when the user switches nodes.
-- **Fixed:** API Token copy button failing silently on HTTP / non-localhost deployments where `navigator.clipboard` is unavailable - added `try/catch` with `document.execCommand('copy')` fallback.
-- **Fixed:** Remote node authentication failures by updating middleware to support Bearer tokens in WebSocket upgrade handler (node-to-node WS proxy now authenticates correctly on the receiving instance).
-- **Fixed:** Node connection testing logic updated to normalize `api_url` trailing slashes before constructing the authenticated HTTP ping URL.
-- **Fixed:** Memory leak in `GlobalObservabilityView` SSE mode - log array now capped at 10,000 entries (`.slice(-10000)`) to prevent unbounded accumulation across long sessions.
-- **Fixed:** Infinite re-fetch loop in `NodeContext` - `refreshNodes` useCallback no longer depends on `activeNode` state; replaced with a `useRef` to read current node inside the callback without being a reactive dependency.
-- **Fixed:** Infinite page reload loop - `apiFetch` was calling `window.location.href = '/'` on every 401, causing a full browser reload before auth could complete. Replaced with a `sencho-unauthorized` custom event that `AuthContext` handles by setting `appStatus` to `notAuthenticated`.
-- **Fixed:** `NodeProvider` was mounted outside the auth gate in `App.tsx`, causing `refreshNodes` to fire before authentication was established (hitting 401 immediately on boot). Moved `NodeProvider` inside the authenticated branch so it only mounts after login.
-- **Removed:** SSH/SFTP file adapters and remote Docker TCP connections (net negative ~500 lines of code).
-- **Added:** Distributed API proxying using http-proxy-middleware for HTTP and WebSockets.
-- **Added:** Long-lived JWT generation for Sencho-to-Sencho API authentication (`POST /api/auth/generate-node-token`).
-- **Changed:** Node Manager UI vastly simplified - remote nodes now only require an API URL and Token.
-- **Fixed:** Critical port routing conflict - separated Docker API port (`port`) from SSH/SFTP port (`ssh_port`) in the `nodes` schema. Previously, a single `port` field served both protocols, causing ECONNREFUSED.
-- **Fixed:** `FileSystemService` now reads the node's `compose_dir` from the database for remote nodes instead of always using the `COMPOSE_DIR` env var.
-- **Fixed:** SSH/SFTP connections in `SSHFileAdapter`, `ComposeService.executeRemote()`, and `ComposeService.streamLogs()` now use `ssh_port` (default 22) instead of Docker API `port`.
-- **Added:** Full SSH credential fields (SSH Port, Username, Password, Private Key) to the Node Manager Add/Edit forms.
-- **Added:** `ssh_port` column to the `nodes` database table with migration support (default: 22).
-- **Changed:** Global `FileSystemService` and `ComposeService` singletons refactored into node-aware instances.
-- **Added:** `IFileAdapter`, `LocalFileAdapter`, and `SSHFileAdapter` to abstract all filesystem interactions for remote node support.
-- **Changed:** `MonitorService` now evaluates limits, fetches metrics, and detects container crashes across all registered nodes concurrently.
-- **Added:** Node Context Middleware in Express API to dynamically extract `x-node-id` headers and parse WebSocket query parameters.
-- **Added:** Remote Nodes Foundation - `nodes` table in SQLite with auto-seeded default local node.
-- **Added:** `NodeRegistry` service for managing multiple Docker daemon connections (local socket + TCP).
-- **Added:** Node management API endpoints: list, get, create, update, delete, and test connection.
-- **Added:** Settings Hub → Nodes tab with full CRUD UI, connection testing, and Docker info display.
-- **Added:** Node switcher dropdown in sidebar (auto-visible when multiple nodes are configured).
-- **Added:** `NodeContext` for frontend-wide active node state management.
-- **Fixed:** Global logs false-positive error misclassifications caused by Docker containers writing INFO logs to STDERR. Replaced naive regex with a robust 3-tier classification engine supporting `level=info`, `[INFO]`, and ` INFO ` format standards.
-- **Added:** Developer Mode setting to enable true Real-Time (SSE) global log streaming and infinite scroll.
-- **Added:** Configurable polling rates for standard global logs monitoring.
-- **Added:** React Throttle Buffer to prevent UI freezing during heavy real-time log ingestion.
-- **Fixed:** Global Logs aggressive auto-scrolling preventing users from reading log history.
-- **Fixed:** Quiet stacks missing from the Global Logs filter dropdown by fetching the definitive stack list independently.
-- **Fixed:** Global logs misclassifying INFO messages as errors due to naive string matching.
-- **Changed:** Global logs now display chronologically (newest at bottom) with smooth auto-scrolling.
-- **Changed:** Renamed Observability navigation tab to Logs.
-- **Fixed:** TTY container log streams failing to parse globally.
-- **Fixed:** Global logs displaying in UTC instead of local browser timezone.
-- **Changed:** Global Logs UI revamped to use a floating, hover-based action bar to maximize terminal space.
-- **Fixed:** Docker raw byte multiplex headers leaking into global logs stream.
-- **Changed:** Relocated historical CPU/RAM charts to the Home Dashboard and normalized data values (CPU relative to host cores, RAM to GB).
-- **Added:** Dozzle-style Action Bar to Global Logs with multi-select stack filtering, search, and STDOUT/STDERR toggles.
-- **Added:** Centralized observability dashboard tracking 24-hour historical metrics and aggregating global tail logs across all running containers.
-- **Added:** Live Container Logs viewer using Server-Sent Events (SSE) for real-time terminal output.
-- **Added:** Pre-deploy folder collision check to prevent silent configuration overwrites in the App Store.
-- **Added:** UI subtitle during deployment to reassure users during long image downloads.
-- **Changed:** Standardized manual stack deletion to use the Two-Stage Teardown (Compose Down -> File Wipe) to prevent ghost networks.
-- **Fixed:** Atomic Rollback failure where non-empty directories caused silent file system errors.
-- **Added:** Two-Stage Teardown mechanism to ensure `docker compose down` sweeps up ghost networks before deployment files are deleted.
-### Deprecated
-- **(Planned)** Port 2375 (TCP) fallback support; future releases may require SSH-only for Node config.
+
+---
+
+## [0.1.0] - 2026-03-24
+
+### Security
+
+- **Fixed:** Missing `authMiddleware` on `GET /api/notifications`, `POST /api/notifications/read`, `DELETE /api/notifications/:id`, `DELETE /api/notifications`, `POST /api/notifications/test`, and `POST /api/system/console-token` — any unauthenticated client could reach these endpoints.
+- **Fixed:** Remote node `api_url` accepted without validation — an attacker could set it to `http://localhost:6379` to SSRF into internal services. Now validates: must be a well-formed `http://` or `https://` URL and the hostname may not be `localhost`, `127.x.x.x`, `[::1]`, or `0.0.0.0`.
+- **Fixed:** `env_file` paths in `compose.yaml` were accepted without boundary checking — absolute paths like `/etc/passwd` could be read or written. All resolved env file paths are now validated to stay within the stack directory.
+- **Fixed:** Stack name validated in write routes but not GET routes — path-traversal names now return 400 on all routes.
+- **Fixed:** `stackParam` query parameter on `/api/system/host-console` now validated against `path.resolve` + `startsWith(baseDir)` to prevent directory traversal when setting the PTY working directory.
+- **Fixed:** `HostTerminalService` no longer forwards full `process.env` to spawned PTY shells — `JWT_SECRET`, `AUTH_PASSWORD`, `AUTH_PASSWORD_HASH`, and `DATABASE_URL` are stripped before the shell is spawned.
+- **Fixed:** Host Console and container exec WebSocket endpoints now reject `node_proxy` scoped JWT tokens with HTTP 403.
+- **Fixed:** `GET /api/settings` no longer leaks `auth_username`, `auth_password_hash`, or `auth_jwt_secret` to the frontend.
+- **Fixed:** `POST /api/settings` enforces a strict allowlist of writable keys — auth credential keys and unknown keys are rejected with a 400 error.
+- **Added:** Rate limiting on `/api/auth/login` and `/api/auth/setup` — 5 attempts per 15-minute window per IP, using `express-rate-limit`.
+- **Added:** `helmet` middleware for security response headers (X-Frame-Options, X-Content-Type-Options, Referrer-Policy, etc.).
+- **Changed:** CORS is now restricted to `FRONTEND_URL` env var in production; development continues to allow any origin.
+
+### Added
+
+#### Infrastructure & CI
+- `linux/arm64` platform support in the Docker Hub publish workflow (Raspberry Pi 4/5, Oracle ARM VMs) — native modules (`bcrypt`, `better-sqlite3`, `node-pty`) cross-compiled via `tonistiigi/xx` to eliminate the `SIGILL` crash caused by Node.js v20 using ARMv8.1 LSE atomic instructions unsupported by GitHub Actions QEMU.
+- `docker/setup-qemu-action@v3` step to `docker-publish.yml` — without it multi-platform builds hung indefinitely.
+- Automated Docker Hub CI/CD pipeline publishing `dev` and `latest` tags.
+- Automated documentation pipeline with Mintlify sync and screenshot refresh CI job.
+- `HEALTHCHECK` directive in `Dockerfile` — Docker polls `/api/health` every 30 s and restarts an unhealthy container.
+- `GET /api/health` public endpoint returning `{ status: "ok", uptime }`.
+- `docker-entrypoint.sh` — runs as root, fixes `$DATA_DIR` volume ownership, then drops to the non-root `sencho` user via `su-exec` before starting Node. Eliminates `SQLITE_READONLY` crashes on host-mounted volumes.
+- Non-root `sencho` system user in `Dockerfile`; process no longer runs as root.
+- Graceful shutdown — backend listens for `SIGTERM`/`SIGINT`, drains HTTP connections, stops `MonitorService` and `ImageUpdateService`, and closes the SQLite connection before exiting.
+- Vitest backend test suite — 38 tests covering validation utilities, health endpoint, authentication flows, auth middleware enforcement, console-token security, and SSRF validation. Run with `cd backend && npm test`.
+- Playwright E2E test scaffolding (`e2e/`) — auth, stack management, and node management specs with shared login helper. Run with `npm run test:e2e`.
+- CI workflow runs Vitest unit tests and ESLint on every PR.
+- `isValidStackName`, `isValidRemoteUrl`, `isPathWithinBase` extracted to `backend/src/utils/validation.ts` for reuse and testability.
+
+#### Multi-Node & Distributed API
+- Distributed API proxying using `http-proxy-middleware` for HTTP and WebSockets — replaces the SSH/SFTP architecture entirely (~500 lines removed).
+- Long-lived JWT generation for Sencho-to-Sencho API authentication (`POST /api/auth/generate-node-token`).
+- `nodeContextMiddleware` in Express to dynamically extract `x-node-id` headers and `?nodeId=` query parameters for WebSocket upgrades.
+- `NodeRegistry` service managing multiple Docker daemon connections.
+- Node management API endpoints: list, get, create, update, delete, and test connection.
+- Two-tier scoped navigation UX — context pill in the top header always shows the active node name (pulsing blue for remote, green for local).
+- Remote-aware headers in `HostConsole`, `ResourcesView`, `GlobalObservabilityView`, and `AppStoreView`.
+- `SettingsModal` scopes its sidebar to the active node type — global-only tabs hidden when a remote node is active.
+- Cross-node notification aggregation — notification bell surfaces alerts from all connected remote nodes with dedicated real-time WebSocket connections per remote node.
+- Remote node host console and container exec WebSocket proxy — gateway exchanges `node_proxy` token for a short-lived `console_session` JWT (60 s TTL) before forwarding.
+- `localOnly` option on `apiFetch` — omits `x-node-id` so requests always route to the local node.
+
+#### Application Features
+- **App Store** — LinuxServer.io API integration as default template registry with rich metadata (architectures, docs links, GitHub links), category filter, one-click deployment, atomic rollback on failure, custom Portainer v2 registry URL support, editable ports/volumes/environment variables, post-deploy health probe.
+- **Resources Hub** — Images, Volumes, and Networks tabs with Managed/External/Unused classification, Docker Disk Footprint stacked-bar widget, scoped prune operations (Sencho-only vs All Docker), managed/external filter toggles, and classification badges.
+- **Global Observability** — centralized dashboard tracking 24-hour historical metrics and aggregating global tail logs across all containers. Dozzle-style Action Bar with multi-select stack filtering, search, STDOUT/STDERR toggles, and Developer Mode SSE real-time streaming.
+- **Background image update checker** — polls OCI-compliant registries every 6 hours using manifest digest comparison; results cached in `stack_update_status` table; pulsing blue dot badge on stacks with available updates.
+- **Real-time WebSocket notifications** — replaces 5-second polling; `NotificationService.setBroadcaster()` pushes each new alert to all authenticated subscribers the moment it fires.
+- **Live Container Logs** viewer using SSE for real-time terminal output.
+- **Animated design system** — `motion` package and `animate-ui` library; new brand cyan token; spring-based dialog/tooltip/tab animations; `prefers-reduced-motion` respected globally; Geist font via Google Fonts CDN.
+- Theme-aware sidebar logo — dark and light variants auto-switch based on active theme.
+- Auto theme option (light/dark/auto) with `window.matchMedia` listener.
+- `PATCH /api/settings` bulk-update endpoint — validates all values via Zod schema, persists atomically in a single SQLite transaction.
+- `system_state` SQLite table — separates runtime operational state from user-defined config in `global_settings`.
+- Configurable `metrics_retention_hours` (default: 24 h) and `log_retention_days` (default: 30 d) — `MonitorService` reads these dynamically each cycle.
+- Managed/unmanaged container count split in `GET /api/stats` — Home Dashboard "Active Containers" card shows "N managed · N external".
+- Two-Stage Teardown for stack deletion — `docker compose down` sweeps ghost networks before deployment files are deleted.
+- Custom Environment Variable injection tool in deployment UI.
+- `ErrorBoundary` component now wraps root `<App />` in `main.tsx`.
+- Git Flow branching strategy and branch protection.
 
 ### Fixed
-- Fixed backend MonitorService crash (`Cannot read properties of undefined (reading 'cpu_usage')`) occurring when Docker containers lacked CPU telemetry during transition states.
-- Handled UI deleted nodes ghost API calls by intercepting 404 errors globally in API and forcing the UI to resync to the default Node context.
-- Hardened `nodeContextMiddleware` in Express to intercept queries to invalid or deleted Node IDs gracefully instead of bubbling to Docker API 500 crashes.
-- Hardened Remote Node connection testing (`docker.info()`) to explicitly validate expected Docker API daemon properties instead of merely checking string length.
-- Caught Unhandled SFTP Promise Rejections in Node registry gracefully returning empty arrays to prevent frontend loading UI stalls.
-- Fixed horizontal UI overflowing in Node Manager settings on smaller resolutions.
-- **Fixed:** Docker API parsing bug where HTML string responses from misconfigured ports were counted as containers.
-- **Fixed:** Stack list crashing when SFTP connections fail by gracefully catching SSH errors and returning empty arrays.
+
+#### Authentication & Proxy
+- Login loop caused by remote node auth failure — `apiFetch` now only fires `sencho-unauthorized` when the `x-sencho-proxy: 1` header is absent (i.e., a genuine local session failure, not a remote node auth error).
+- `authMiddleware` and WS upgrade handler now evaluate `bearerToken || cookieToken` (Bearer first) — cookie no longer shadows a valid Bearer token on node-to-node proxy calls.
+- Remote node proxy stripping the `/api` path prefix — added `pathRewrite: (path) => '/api' + path` to restore the full path when forwarding to remote instances.
+- Remote node HTTP proxy body forwarding — replaced `proxyReq.write(JSON.stringify(req.body))` (raced against `http-proxy`'s `process.nextTick(proxyReq.end)`) with a conditional JSON body parser that skips `express.json()` for remote-targeted requests; the raw `IncomingMessage` stream is left unconsumed so `http-proxy`'s `req.pipe(proxyReq)` forwards it intact.
+- Remote node proxy forwarding the browser's `sencho_token` cookie to the remote instance — stripped in `proxyReq` so only the Bearer token is used.
+- Remote WebSocket upgrades forwarding the browser `cookie` header — stripped before `wsProxyServer.ws()` so the remote's `authMiddleware` uses the Bearer token exclusively.
+- `nodeContextMiddleware` blocking `/api/nodes` when `x-node-id` references a deleted node — exempted alongside `/api/auth/` so the frontend can re-sync a stale node ID.
+- Backend memory leak from `createProxyMiddleware` called inside the request handler on every API call — refactored to a single globally-instantiated proxy using the `router` option.
+- `remoteNodeProxy` error handler unsafely cast `proxyRes` to `Response` on WebSocket/TCP-level errors — type-narrowed before sending 502.
+
+#### WebSocket & Streaming
+- Container stats WebSocket flooding React with up to 20+ `setState` calls per second — replaced with a ref-buffer + 1.5 s flush interval pattern.
+- `streamStats` Docker stats stream leaking after WebSocket client disconnect — `ws.on('close')` handler calls `stats.destroy()`; all `ws.send()` calls guarded with `readyState === OPEN`.
+- `streamStats` and `execContainer` called unawaited — unhandled promise rejections now chain `.catch()`, log the error, and close the WebSocket cleanly.
+- Per-connection `WebSocket.Server` instances for stack logs and host console never closed after upgrade — `wss.close()` called immediately after `handleUpgrade`.
+- WebSocket notification reconnect upgraded to exponential backoff (1 s → 30 s max) instead of flat 5-second retry; `ws.onerror` logs the event; cleanup guards against closing an already-closing socket.
+- Terminal logs and container stats WebSockets failing with "HTTP Authentication failed" on remote nodes — gateway's `cookie` header stripped before forwarding to remote; `nodeId` query param stripped from forwarded URL.
+- LogViewer returning 404 on remote nodes — `nodeId` query param stripped from `proxyReq.path` in `onProxyReq`.
+
+#### UI & Frontend
+- Blank page on HTTP deployments (root cause — Helmet 8 default CSP `upgrade-insecure-requests` and HSTS) — `upgradeInsecureRequests: null` and `strictTransportSecurity: false` set explicitly.
+- COOP header console warning on HTTP deployments — `crossOriginOpenerPolicy: false`.
+- Inline script CSP violation from Vite module-preload polyfill — disabled via `build.modulePreload.polyfill: false`.
+- CSP `workerSrc` missing (Monaco editor workers) — added `worker-src 'self' blob:`.
+- CSP `connectSrc` implicit — added explicit `connect-src 'self' ws: wss:`.
+- Docker socket `EACCES` root:root edge case — entrypoint handles GID 0 in addition to the standard root:docker case.
+- Managed container count wrong when stacks launched from COMPOSE_DIR root — classification now uses `com.docker.compose.project.working_dir`.
+- Browser Out of Memory crash in `GlobalObservabilityView` — capped DOM rendering to last 300 entries, reduced SSE log cap to 2,000 entries, replaced `key={idx}` with monotonic `_id` counter.
+- `HomeDashboard` create-stack error handling — reads JSON error body before throwing; uses defensive toast pattern.
+- `AlertDialogContent` using `asChild` with `motion.div` wrapper crashing on delete-stack confirmation — replaced with CSS keyframe animations.
+- animate-ui `auto-height.tsx` importing `WithAsChild` without `type` keyword — crashed browser module loader.
+- animate-ui `switch.tsx` double-spreading Radix props onto `motion.button` DOM element.
+- "Always Local" badge tooltip crashing (`getStrictContext`) — replaced animate-ui tooltip with pure Radix primitives.
+- Cancel/Add Node buttons in NodeManager dialogs stuck together.
+- Resources/App Store/Logs menu buttons not toggling off on second click.
+- Monaco container height accumulation on tab switching — reset to 0×0 and force synchronous reflow before re-measuring.
+- `AppStoreView` and `GlobalObservabilityView` using raw `fetch()` instead of `apiFetch()` — all calls now inject `x-node-id`.
+- `HostConsole` WebSocket URL missing `?nodeId=` query parameter.
+- "Open App" button opening `http://localhost:{port}` for remote node containers — resolves hostname from remote node's `api_url`.
+- Dashboard cards showing stale local-node data after switching to a remote node — polling effects now depend on `activeNode?.id` and clear state immediately on node change.
+- `refreshStacks` crashing with `SyntaxError` or `TypeError` when the remote proxy returns a non-JSON response — checks `res.ok` before calling `res.json()`.
+- Four empty `catch {}` blocks in `EditorLayout` — now surface errors via `toast.error()`.
+- `StackAlertSheet` not fetching notification agent status from the active node on open.
+- `SettingsModal` Notifications tab hidden when a remote node is active — now visible and configurable on remote nodes.
+- `POST /api/alerts` now validates the request body with a Zod schema — rejects unknown metric/operator values, negative thresholds, and missing fields with a structured 400.
+- `WebSocket.Server` replaced with named import `WebSocketServer` from `ws` to fix ESM/CJS interop.
+- `NodeProvider` mounted outside the auth gate — moved inside the authenticated branch so `refreshNodes` no longer fires before authentication.
+- Infinite re-fetch loop in `NodeContext` — `refreshNodes` useCallback no longer depends on `activeNode` state; replaced with `useRef`.
+- Infinite page reload loop — `apiFetch` replaced `window.location.href = '/'` with a `sencho-unauthorized` custom event.
+- API Token copy button failing silently on HTTP/non-localhost — added `execCommand('copy')` fallback.
+- E2E nodes tests permanently timing out because the Add Node submit button requires `api_token` to be non-empty.
+- ESLint CI step — replaced all `any` annotations with proper types, fixed unused catch variables.
+- `[DEP0060] DeprecationWarning: util._extend` from `http-proxy@1.18.1` — suppressed at call site.
+- Global Logs false-positive error misclassifications — replaced naive regex with a robust 3-tier classification engine.
+- Memory leak in `GlobalObservabilityView` SSE mode — log array capped at 2,000 entries.
+- Historical metrics memory leak — polling throttled to 60 s; SQLite payload downsampled by 12×.
+- Active node UI dropdown desyncing from API requests on initial page load — state hydrated from localStorage.
+- `MonitorService` crash (`Cannot read properties of undefined (reading 'cpu_usage')`) during Docker container transition states.
+- Deleted node ghost API calls — 404 errors intercepted globally, forcing UI to resync to default node.
+- Horizontal UI overflow in Node Manager settings on smaller resolutions.
+- Docker API parsing bug where HTML string responses from misconfigured ports were counted as containers.
 
 ### Changed
-- **Changed:** Expanded Node Manager UI width and added horizontal scrollbars for better data visibility.
-- **Added:** Smart Error Parser with telemetry-ready rule IDs to translate cryptic Docker output.
-- **Added:** Post-Deploy Health Probe to catch immediate container crashes that slip past Compose.
-- **Changed:** Rollback engine respects a `canSilentlyRollback` flag to protect user-authored configurations.
-- **Changed:** Removed rigid volume sanitization, allowing full user control over bind paths.
-- **Added:** Editable Host Volumes in the deployment UI.
-- **Added:** Custom Environment Variable injection tool.
-- **Fixed:** ScrollArea UI height rendering and dynamic browser timezone detection.
-- **Changed:** Rebranded "Templates" to "App Store" across the UI.
-- **Added:** Advanced deployment configuration panel (Editable Ports and Environment Variables) with smart defaults.
-- **Fixed:** Implemented smart image fallbacks for broken registry logos and added expandable descriptions.
-- **Added:** Atomic Deployments: Failed App Store deployments now automatically roll back and delete their orphaned folders.
-- **Fixed:** Global dark mode scrollbar styling to eliminate blinding white native scrollbars.
-- **Fixed:** Input overlap UI bug in the App Store deployment panel.
-### Added
-- **Added:** Official LinuxServer.io API integration as the default Template Registry.
-- **Added:** Rich metadata display in the App Store (Architectures, Documentation links, GitHub repository links).
-- **Added:** Dynamic Template Registry URL support via global settings, defaulting to LinuxServer.io templates.
-- **Fixed:** Smart Volume Sanitizer to automatically rewrite messy Portainer bind mounts into clean, relative paths (Sencho 1:1 path rule).
-- Git Flow branching strategy and branch protection.
-- GitHub Actions CI pipeline for automated TypeScript build verification.
-- **Added:** Automated Docker Hub CI/CD pipeline for the `dev` and `latest` tags.
-- **Added:** App Templates (App Store) with One-Click deployment, utilizing Portainer v2 JSON registries and auto-generating compose files.
+
+- **Architecture:** Replaced SSH/SFTP remote node model with Distributed API proxy (HTTP/WebSocket) — remote nodes now only require an API URL and Bearer token. Node Manager UI vastly simplified.
+- **Docs:** Migrated Mintlify config from deprecated `mint.json` to `docs.json` v2 format; bootstrapped full user-facing documentation (configuration, stack management, editor, multi-node, alerts, dashboard, resources, app store, observability, settings reference, troubleshooting, backup & restore).
+- **Design system:** Animated UI overhaul — new brand cyan token, spring-based animations on dialogs/tooltips/switches/tabs, dark mode shadow strengthening, Geist font now actually loaded.
+- Notification delivery replaced polling with WebSocket push — no more `setInterval` in `EditorLayout`.
+- `DatabaseService.addNotificationHistory` returns the full inserted record for real-time broadcasting.
+- `SettingsModal` overhauled — per-operation loading states, skeleton loader, unsaved-changes indicator, all saves use `PATCH /api/settings`.
+- `MonitorService` evaluates limits and detects container crashes across all registered nodes concurrently.
+- `MonitorService` reads retention settings dynamically each cycle.
+- Developer settings scoped to the local node — reads/writes always target local via `localOnly` regardless of active node.
+- Dark mode scrollbar styling — no more white native scrollbars.
+- Rebranded "Templates" → "App Store", "Ghost Containers" → "Unmanaged Containers", "Observability" → "Logs".
+- Global logs display chronologically (newest at bottom) with smooth auto-scrolling; UTC → local browser timezone.
+- Historical CPU/RAM charts relocated to the Home Dashboard; data normalized (CPU relative to host cores, RAM to GB).
+- `EditorLayout` main workspace container keyed to `activeView` — every view switch triggers a fade-up entrance animation.
+
+### Removed
+
+- SSH/SFTP remote node adapters (`IFileAdapter`, `LocalFileAdapter`, `SSHFileAdapter`, `SSHFileAdapter`, `ComposeService.executeRemote`, `ComposeService.streamLogs` SSH path) — ~500 lines.
+
+[0.1.0]: https://github.com/AnsoCode/Sencho/releases/tag/v0.1.0
diff --git a/Dockerfile b/Dockerfile
index 25538c6f..9d5ba3bb 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,65 +1,143 @@
+# Cross-compilation helper — provides xx-clang, xx-apk, etc.
+# Runs on the BUILD platform; its binaries are copied into build stages below.
+FROM --platform=$BUILDPLATFORM tonistiigi/xx AS xx
+
 # Stage 1: Build Frontend
-FROM node:20-alpine AS frontend-builder
+# Runs on the BUILD platform (amd64) — frontend has no native modules so the
+# compiled output (JS/CSS/HTML) is entirely platform-agnostic.
+FROM --platform=$BUILDPLATFORM node:20-alpine AS frontend-builder
 
 WORKDIR /app/frontend
 
-# Copy frontend package files
 COPY frontend/package*.json ./
-
-# Install dependencies
 RUN npm config set fetch-retry-maxtimeout 120000 && \
     npm config set fetch-retries 5 && \
     npm install
 
-# Copy frontend source
 COPY frontend/ ./
-
-# Build frontend
 RUN npm run build
 
-# Stage 2: Build Backend
-FROM node:20-alpine AS backend-builder
+# Stage 2: Compile TypeScript
+# Runs on the BUILD platform (amd64) — tsc output is platform-agnostic JS.
+FROM --platform=$BUILDPLATFORM node:20-alpine AS backend-builder
 
 WORKDIR /app/backend
 
-# Install build dependencies for node-pty native modules
 RUN apk add --no-cache python3 make g++
 
-# Copy backend package files
 COPY backend/package*.json ./
-
-# Install dependencies
 RUN npm config set fetch-retry-maxtimeout 120000 && \
     npm config set fetch-retries 5 && \
     npm install
 
-# Copy backend source
 COPY backend/ ./
-
-# Build backend
 RUN npm run build
 
-# Stage 3: Production
-FROM node:20-alpine
+# Stage 3: Production dependencies (cross-compiled — NO QEMU execution)
+# Runs on the BUILD platform (amd64) but compiles native modules
+# (bcrypt, better-sqlite3, node-pty) for the TARGET platform using
+# tonistiigi/xx + clang as the cross-compiler.
+# This avoids the Node.js v20 SIGILL crash that occurs when npm runs
+# under QEMU because QEMU lacks ARMv8.1 LSE atomic instruction support.
+FROM --platform=$BUILDPLATFORM node:20-alpine AS prod-deps
 
-# Install Docker CLI, Docker Compose CLI, and Bash for Host Console
-RUN apk add --no-cache docker-cli docker-cli-compose bash
+# Copy xx cross-compilation tools into this stage
+COPY --from=xx / /
+
+ARG TARGETARCH
+ARG BUILDARCH
 
 WORKDIR /app
 
-# Copy built backend and node_modules from backend-builder
-COPY --from=backend-builder /app/backend/dist ./dist
-COPY --from=backend-builder /app/backend/node_modules ./node_modules
-COPY --from=backend-builder /app/backend/package.json ./
+# Two paths depending on whether we are cross-compiling:
+#
+# Native (TARGETARCH == BUILDARCH, e.g. amd64 → amd64):
+#   Standard g++ is used. xx-clang introduces sysroot flags that conflict with
+#   node-gyp's header resolution on Alpine for same-platform builds, so we
+#   bypass it entirely and let npm ci use the host compiler directly.
+#
+# Cross (TARGETARCH != BUILDARCH, e.g. amd64 → arm64):
+#   xx-clang targets the foreign architecture without QEMU. The target sysroot
+#   is populated via xx-apk:
+#     g++           — libstdc++ headers/libs (all three native modules use C++)
+#     musl-dev      — musl libc headers for the target arch
+#     linux-headers — <pty.h> / <termios.h> required by node-pty
+RUN if [ "$TARGETARCH" = "$BUILDARCH" ]; then \
+      apk add --no-cache python3 make g++; \
+    else \
+      apk add --no-cache clang lld python3 make g++ && \
+      xx-apk add --no-cache g++ musl-dev linux-headers; \
+    fi
 
-# Copy built frontend from frontend-builder to public folder
+COPY backend/package*.json ./
+
+# Native: plain npm ci — g++ compiles native modules for the host arch.
+# Cross:  npm_config_arch tells prebuild-install/node-pre-gyp which pre-built
+#         binary to attempt; CC/CXX/AR route compilation through xx-clang so
+#         the output targets the foreign arch without any QEMU emulation.
+RUN if [ "$TARGETARCH" = "$BUILDARCH" ]; then \
+      npm ci --omit=dev; \
+    else \
+      npm_config_arch=$TARGETARCH \
+        CC=xx-clang \
+        CXX=xx-clang++ \
+        AR=xx-ar \
+        npm ci --omit=dev; \
+    fi
+
+# Stage 4: Production runtime
+# Runs on the TARGET platform — no compilation happens here.
+FROM node:20-alpine
+
+# Install Docker CLI, Docker Compose CLI, and Bash for Host Console
+RUN apk add --no-cache docker-cli docker-cli-compose bash su-exec
+
+WORKDIR /app
+
+# Copy cross-compiled production node_modules from the prod-deps stage
+COPY --from=prod-deps /app/node_modules ./node_modules
+COPY --from=prod-deps /app/package.json ./
+
+# Copy compiled TypeScript output (platform-agnostic JS)
+COPY --from=backend-builder /app/backend/dist ./dist
+
+# Copy built frontend
 COPY --from=frontend-builder /app/frontend/dist ./public
 
 # Set environment to production
 ENV NODE_ENV=production
 
+# Create a non-root user and ensure the data/compose directories are writable.
+# The actual volume paths are mounted at runtime, so we only pre-create the
+# default data dir here; the compose dir is user-supplied via COMPOSE_DIR.
+RUN addgroup -S sencho && adduser -S -G sencho sencho \
+  && mkdir -p /app/data \
+  && chown -R sencho:sencho /app
+
+# Copy the entrypoint script that fixes data-volume ownership at startup and
+# then drops privileges to the sencho user via su-exec (the idiomatic Alpine
+# equivalent of gosu). This mirrors the pattern used by official Docker images
+# such as PostgreSQL, Redis, and MariaDB.
+#
+# NOTE: USER directive is intentionally absent here. The entrypoint starts as
+# root so it can chown the mounted data volume, then exec's as sencho. Static
+# security scanners (Trivy, Clair) may flag "running as root" — this is a known
+# and accepted trade-off for self-hosted apps with user-supplied volume mounts.
+COPY docker-entrypoint.sh /usr/local/bin/docker-entrypoint.sh
+# Strip Windows CRLF line endings that can sneak in on Windows dev machines
+# even with .gitattributes eol=lf, then make executable. A shell script with
+# \r in tokens like "fi\r" will fail with "unexpected end of file" in Alpine.
+RUN sed -i 's/\r//' /usr/local/bin/docker-entrypoint.sh \
+  && chmod +x /usr/local/bin/docker-entrypoint.sh
+
 # Expose port
 EXPOSE 3000
 
-# Start the server
+# Health check — polls the public /api/health endpoint every 30s
+HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
+  CMD node -e "const h=require('http');h.get('http://localhost:3000/api/health',r=>{process.exit(r.statusCode===200?0:1)}).on('error',()=>process.exit(1))"
+
+# Entrypoint fixes volume ownership as root then drops to sencho via su-exec.
+# CMD provides the default arguments passed through to the entrypoint.
+ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"]
 CMD ["node", "dist/index.js"]
diff --git a/backend/eslint.config.mjs b/backend/eslint.config.mjs
new file mode 100644
index 00000000..869f8ac9
--- /dev/null
+++ b/backend/eslint.config.mjs
@@ -0,0 +1,27 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    files: ['src/**/*.ts'],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    languageOptions: { ecmaVersion: 2022 },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'warn',
+      // Allow unused catch-clause vars (catch (error) { ... }) and _-prefixed intentional ignores
+      '@typescript-eslint/no-unused-vars': ['error', {
+        caughtErrors: 'none',
+        varsIgnorePattern: '^_',
+        argsIgnorePattern: '^_',
+      }],
+      // Pre-existing patterns — warn rather than error until addressed
+      '@typescript-eslint/ban-ts-comment': 'warn',
+      '@typescript-eslint/no-namespace': 'warn',
+      'no-empty': 'warn',
+      // Terminal output processing intentionally uses control characters in regexes
+      'no-control-regex': 'off',
+      'no-console': 'off',
+    },
+  },
+)
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 458df2a9..1850dae0 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -22,25 +22,34 @@
         "cors": "^2.8.6",
         "dockerode": "^4.0.9",
         "express": "^5.2.1",
+        "express-rate-limit": "^8.3.1",
+        "helmet": "^8.1.0",
         "http-proxy": "^1.18.1",
         "http-proxy-middleware": "^3.0.5",
         "jsonwebtoken": "^9.0.3",
         "node-pty": "^1.1.0",
         "systeminformation": "^5.31.1",
         "ws": "^8.19.0",
-        "yaml": "^2.8.2"
+        "yaml": "^2.8.2",
+        "zod": "^4.3.6"
       },
       "devDependencies": {
+        "@eslint/js": "^9.0.0",
         "@types/bcrypt": "^6.0.0",
         "@types/better-sqlite3": "^7.6.13",
         "@types/cookie-parser": "^1.4.10",
         "@types/http-proxy-middleware": "^0.19.3",
         "@types/jsonwebtoken": "^9.0.10",
         "@types/node": "^25.3.0",
+        "@types/supertest": "^7.2.0",
         "@types/yaml": "^1.9.6",
+        "eslint": "^9.0.0",
         "nodemon": "^3.1.13",
+        "supertest": "^7.2.2",
         "ts-node": "^10.9.2",
-        "typescript": "^5.9.3"
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.0.0",
+        "vitest": "^4.1.0"
       }
     },
     "node_modules/@balena/dockerignore": {
@@ -62,6 +71,283 @@
         "node": ">=12"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",
+      "integrity": "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz",
+      "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.0.tgz",
+      "integrity": "sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.5"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+      "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.14.0",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.5",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.14.3",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.14.3.tgz",
@@ -111,6 +397,58 @@
         "node": ">=6"
       }
     },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -149,6 +487,56 @@
         "url": "https://opencollective.com/js-sdsl"
       }
     },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz",
+      "integrity": "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@noble/hashes": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.120.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.120.0.tgz",
+      "integrity": "sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@paralleldrive/cuid2": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@paralleldrive/cuid2/-/cuid2-2.3.1.tgz",
+      "integrity": "sha512-XO7cAxhnTZl0Yggq6jOgjiOHhbgcO4NqFqwSmQpjK3b6TEE6Uj/jfSk6wzYyemh3+I0sHirKSetjQwn5cZktFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@noble/hashes": "^1.1.5"
+      }
+    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -213,6 +601,275 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.10.tgz",
+      "integrity": "sha512-jOHxwXhxmFKuXztiu1ORieJeTbx5vrTkcOkkkn2d35726+iwhrY1w/+nYY/AGgF12thg33qC3R1LMBF5tHTZHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.10.tgz",
+      "integrity": "sha512-gED05Teg/vtTZbIJBc4VNMAxAFDUPkuO/rAIyyxZjTj1a1/s6z5TII/5yMGZ0uLRCifEtwUQn8OlYzuYc0m70w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.10.tgz",
+      "integrity": "sha512-rI15NcM1mA48lqrIxVkHfAqcyFLcQwyXWThy+BQ5+mkKKPvSO26ir+ZDp36AgYoYVkqvMcdS8zOE6SeBsR9e8A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.10.tgz",
+      "integrity": "sha512-XZRXHdTa+4ME1MuDVp021+doQ+z6Ei4CCFmNc5/sKbqb8YmkiJdj8QKlV3rCI0AJtAeSB5n0WGPuJWNL9p/L2w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.10.tgz",
+      "integrity": "sha512-R0SQMRluISSLzFE20sPWYHVmJdDQnRyc/FzSCN72BqQmh2SOZUFG+N3/vBZpR4C6WpEUVYJLrYUXaj43sJsNLA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.10.tgz",
+      "integrity": "sha512-Y1reMrV/o+cwpduYhJuOE3OMKx32RMYCidf14y+HssARRmhDuWXJ4yVguDg2R/8SyyGNo+auzz64LnPK9Hq6jg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.10.tgz",
+      "integrity": "sha512-vELN+HNb2IzuzSBUOD4NHmP9yrGwl1DVM29wlQvx1OLSclL0NgVWnVDKl/8tEks79EFek/kebQKnNJkIAA4W2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.10.tgz",
+      "integrity": "sha512-ZqrufYTgzxbHwpqOjzSsb0UV/aV2TFIY5rP8HdsiPTv/CuAgCRjM6s9cYFwQ4CNH+hf9Y4erHW1GjZuZ7WoI7w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.10.tgz",
+      "integrity": "sha512-gSlmVS1FZJSRicA6IyjoRoKAFK7IIHBs7xJuHRSmjImqk3mPPWbR7RhbnfH2G6bcmMEllCt2vQ/7u9e6bBnByg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.10.tgz",
+      "integrity": "sha512-eOCKUpluKgfObT2pHjztnaWEIbUabWzk3qPZ5PuacuPmr4+JtQG4k2vGTY0H15edaTnicgU428XW/IH6AimcQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.10.tgz",
+      "integrity": "sha512-Xdf2jQbfQowJnLcgYfD/m0Uu0Qj5OdxKallD78/IPPfzaiaI4KRAwZzHcKQ4ig1gtg1SuzC7jovNiM2TzQsBXA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.10.tgz",
+      "integrity": "sha512-o1hYe8hLi1EY6jgPFyxQgQ1wcycX+qz8eEbVmot2hFkgUzPxy9+kF0u0NIQBeDq+Mko47AkaFFaChcvZa9UX9Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.10.tgz",
+      "integrity": "sha512-Ugv9o7qYJudqQO5Y5y2N2SOo6S4WiqiNOpuQyoPInnhVzCY+wi/GHltcLHypG9DEUYMB0iTB/huJrpadiAcNcA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.10.tgz",
+      "integrity": "sha512-7UODQb4fQUNT/vmgDZBl3XOBAIOutP5R3O/rkxg0aLfEGQ4opbCgU5vOw/scPe4xOqBwL9fw7/RP1vAMZ6QlAQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.10.tgz",
+      "integrity": "sha512-PYxKHMVHOb5NJuDL53vBUl1VwUjymDcYI6rzpIni0C9+9mTiJedvUxSk7/RPp7OOAm3v+EjgMu9bIy3N6b408w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.10.tgz",
+      "integrity": "sha512-UkVDEFk1w3mveXeKgaTuYfKWtPbvgck1dT8TUG3bnccrH0XtLTuAyfCoks4Q/M5ZGToSVJTIQYCzy2g/atAOeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.12.tgz",
@@ -241,6 +898,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/bcrypt": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-6.0.0.tgz",
@@ -271,6 +939,17 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
     "node_modules/@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -290,6 +969,13 @@
         "@types/express": "*"
       }
     },
+    "node_modules/@types/cookiejar": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@types/cookiejar/-/cookiejar-2.1.5.tgz",
+      "integrity": "sha512-he+DHOWReW0nghN24E1WUqM0efK4kI9oTqDm6XmK8ZPe2djZ90BSNdGnIyCLzCPw7/pogPlGbzI2wHGGmi4O/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/cors": {
       "version": "2.8.19",
       "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
@@ -299,6 +985,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/docker-modem": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/@types/docker-modem/-/docker-modem-3.0.6.tgz",
@@ -320,6 +1013,13 @@
         "@types/ssh2": "*"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/express": {
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-5.0.6.tgz",
@@ -371,6 +1071,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/jsonwebtoken": {
       "version": "9.0.10",
       "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.10.tgz",
@@ -382,6 +1089,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/methods": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@types/methods/-/methods-1.1.4.tgz",
+      "integrity": "sha512-ymXWVrDiCxTBE3+RIrrP533E70eA+9qu7zdWoHuOmGujkYtzf4HQF96b8nwHLqhuf4ykX61IGRIB38CC6/sImQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -454,6 +1168,30 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "license": "MIT"
     },
+    "node_modules/@types/superagent": {
+      "version": "8.1.9",
+      "resolved": "https://registry.npmjs.org/@types/superagent/-/superagent-8.1.9.tgz",
+      "integrity": "sha512-pTVjI73witn+9ILmoJdajHGW2jkSaOzhiFYF1Rd3EQ94kymLqB9PjD9ISg7WaALC7+dCHT0FGe9T2LktLq/3GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookiejar": "^2.1.5",
+        "@types/methods": "^1.1.4",
+        "@types/node": "*",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/@types/supertest": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@types/supertest/-/supertest-7.2.0.tgz",
+      "integrity": "sha512-uh2Lv57xvggst6lCqNdFAmDSvoMG7M/HDtX4iUCquxQ5EGPtaPM5PL5Hmi7LCvOG8db7YaCPNJEeoI8s/WzIQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/methods": "^1.1.4",
+        "@types/superagent": "^8.1.0"
+      }
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -473,6 +1211,363 @@
         "yaml": "*"
       }
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.57.1.tgz",
+      "integrity": "sha512-Gn3aqnvNl4NGc6x3/Bqk1AOn0thyTU9bqDRhiRnUWezgvr2OnhYCWCgC8zXXRVqBsIL1pSDt7T9nJUe0oM0kDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.57.1",
+        "@typescript-eslint/type-utils": "8.57.1",
+        "@typescript-eslint/utils": "8.57.1",
+        "@typescript-eslint/visitor-keys": "8.57.1",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.57.1",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.57.1.tgz",
+      "integrity": "sha512-k4eNDan0EIMTT/dUKc/g+rsJ6wcHYhNPdY19VoX/EOtaAG8DLtKCykhrUnuHPYvinn5jhAPgD2Qw9hXBwrahsw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.57.1",
+        "@typescript-eslint/types": "8.57.1",
+        "@typescript-eslint/typescript-estree": "8.57.1",
+        "@typescript-eslint/visitor-keys": "8.57.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.57.1.tgz",
+      "integrity": "sha512-vx1F37BRO1OftsYlmG9xay1TqnjNVlqALymwWVuYTdo18XuKxtBpCj1QlzNIEHlvlB27osvXFWptYiEWsVdYsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.57.1",
+        "@typescript-eslint/types": "^8.57.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.57.1.tgz",
+      "integrity": "sha512-hs/QcpCwlwT2L5S+3fT6gp0PabyGk4Q0Rv2doJXA0435/OpnSR3VRgvrp8Xdoc3UAYSg9cyUjTeFXZEPg/3OKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.57.1",
+        "@typescript-eslint/visitor-keys": "8.57.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.57.1.tgz",
+      "integrity": "sha512-0lgOZB8cl19fHO4eI46YUx2EceQqhgkPSuCGLlGi79L2jwYY1cxeYc1Nae8Aw1xjgW3PKVDLlr3YJ6Bxx8HkWg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.57.1.tgz",
+      "integrity": "sha512-+Bwwm0ScukFdyoJsh2u6pp4S9ktegF98pYUU0hkphOOqdMB+1sNQhIz8y5E9+4pOioZijrkfNO/HUJVAFFfPKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.57.1",
+        "@typescript-eslint/typescript-estree": "8.57.1",
+        "@typescript-eslint/utils": "8.57.1",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.57.1.tgz",
+      "integrity": "sha512-S29BOBPJSFUiblEl6RzPPjJt6w25A6XsBqRVDt53tA/tlL8q7ceQNZHTjPeONt/3S7KRI4quk+yP9jK2WjBiPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.57.1.tgz",
+      "integrity": "sha512-ybe2hS9G6pXpqGtPli9Gx9quNV0TWLOmh58ADlmZe9DguLq0tiAKVjirSbtM1szG6+QH6rVXyU6GTLQbWnMY+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.57.1",
+        "@typescript-eslint/tsconfig-utils": "8.57.1",
+        "@typescript-eslint/types": "8.57.1",
+        "@typescript-eslint/visitor-keys": "8.57.1",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.57.1.tgz",
+      "integrity": "sha512-XUNSJ/lEVFttPMMoDVA2r2bwrl8/oPx8cURtczkSEswY5T3AeLmCy+EKWQNdL4u0MmAHOjcWrqJp2cdvgjn8dQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.57.1",
+        "@typescript-eslint/types": "8.57.1",
+        "@typescript-eslint/typescript-estree": "8.57.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.57.1.tgz",
+      "integrity": "sha512-YWnmJkXbofiz9KbnbbwuA2rpGkFPLbAIetcCNO6mJ8gdhdZ/v7WDXsoGFAJuM6ikUFKTlSQnjWnVO4ux+UzS6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.57.1",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.0.tgz",
+      "integrity": "sha512-EIxG7k4wlWweuCLG9Y5InKFwpMEOyrMb6ZJ1ihYu02LVj/bzUwn2VMU+13PinsjRW75XnITeFrQBMH5+dLvCDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.0",
+        "@vitest/utils": "4.1.0",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.0.tgz",
+      "integrity": "sha512-evxREh+Hork43+Y4IOhTo+h5lGmVRyjqI739Rz4RlUPqwrkFFDF6EMvOOYjTx4E8Tl6gyCLRL8Mu7Ry12a13Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.0",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.0.tgz",
+      "integrity": "sha512-3RZLZlh88Ib0J7NQTRATfc/3ZPOnSUn2uDBUoGNn5T36+bALixmzphN26OUD3LRXWkJu4H0s5vvUeqBiw+kS0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.0.tgz",
+      "integrity": "sha512-Duvx2OzQ7d6OjchL+trw+aSrb9idh7pnNfxrklo14p3zmNL4qPCDeIJAK+eBKYjkIwG96Bc6vYuxhqDXQOWpoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.0",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.0.tgz",
+      "integrity": "sha512-0Vy9euT1kgsnj1CHttwi9i9o+4rRLEaPRSOJ5gyv579GJkNpgJK+B4HSv/rAWixx2wdAFci1X4CEPjiu2bXIMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.0",
+        "@vitest/utils": "4.1.0",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.0.tgz",
+      "integrity": "sha512-pz77k+PgNpyMDv2FV6qmk5ZVau6c3R8HC8v342T2xlFxQKTrSeYw9waIJG8KgV9fFwAtTu4ceRzMivPTH6wSxw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.0.tgz",
+      "integrity": "sha512-XfPXT6a8TZY3dcGY8EdwsBulFCIw+BeeX0RZn2x/BtiY/75YGh8FeWGG8QISN/WhaqSrE2OrlDgtF8q5uhOTmw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.0",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/accepts": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
@@ -492,6 +1587,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -499,6 +1595,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/acorn-walk": {
       "version": "8.3.5",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz",
@@ -583,6 +1689,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/asn1": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
@@ -592,6 +1712,16 @@
         "safer-buffer": "~2.1.0"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -835,6 +1965,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -844,6 +1984,56 @@
         "node": ">=6"
       }
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -919,6 +2109,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/component-emitter": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz",
+      "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/composerize": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/composerize/-/composerize-1.7.5.tgz",
@@ -957,6 +2157,13 @@
         "yaml": "^2.x"
       }
     },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/content-disposition": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
@@ -979,6 +2186,13 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cookie": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
@@ -1016,6 +2230,13 @@
         "node": ">=6.6.0"
       }
     },
+    "node_modules/cookiejar": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.4.tgz",
+      "integrity": "sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/core-js": {
       "version": "2.6.12",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
@@ -1062,6 +2283,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1112,6 +2348,13 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deepmerge": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
@@ -1148,6 +2391,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/dezalgo": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
+      "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "asap": "^2.0.0",
+        "wrappy": "1"
+      }
+    },
     "node_modules/diff": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
@@ -1262,6 +2516,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -1304,6 +2565,252 @@
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
       "license": "MIT"
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
+      "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.2",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "9.39.4",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.5",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/eslint/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -1328,11 +2835,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/express": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -1371,12 +2889,51 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/express-rate-limit": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.3.1.tgz",
+      "integrity": "sha512-D1dKN+cmyPWuvB+G2SREQDzPY1agpBIcTa9sJxOPMCNeH3gwzhqJRDWCXW3gg0y//+LQ/8j52JbMROWyrKdMdw==",
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "10.1.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-safe-stringify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
+      "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
@@ -1393,6 +2950,19 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -1432,6 +3002,44 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.11",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
@@ -1489,6 +3097,24 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/formidable": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.4.tgz",
+      "integrity": "sha512-YikH+7CUTOtP44ZTnUhR7Ic2UASBPOqmaRkRKxRbywPTe5VxF7RRCck4af9wutiZ/QKM5nME9Bie2fFaPz5Gug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@paralleldrive/cuid2": "^2.2.2",
+        "dezalgo": "^1.0.4",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/tunnckoCore/commissions"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -1602,6 +3228,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -1663,6 +3302,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/helmet": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
+      "integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -1750,6 +3398,16 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/ignore-by-default": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
@@ -1757,6 +3415,33 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -1778,6 +3463,15 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/ip-address": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
+      "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -1854,18 +3548,52 @@
       "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
       "license": "MIT"
     },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "license": "MIT"
     },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/jsonwebtoken": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
@@ -1909,6 +3637,307 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -1951,6 +3980,13 @@
       "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
       "license": "MIT"
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
@@ -1975,6 +4011,16 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -2012,6 +4058,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -2025,6 +4081,19 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.54.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
@@ -2063,9 +4132,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.2.tgz",
-      "integrity": "sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==",
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
@@ -2106,12 +4175,38 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/napi-build-utils": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
       "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
       "license": "MIT"
     },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/negotiator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
@@ -2229,6 +4324,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -2250,6 +4356,69 @@
         "wrappy": "1"
       }
     },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -2259,6 +4428,26 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-to-regexp": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
@@ -2269,6 +4458,20 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "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,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -2281,6 +4484,35 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/prebuild-install": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
@@ -2308,6 +4540,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/protobufjs": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
@@ -2368,6 +4610,16 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
@@ -2473,6 +4725,50 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.10.tgz",
+      "integrity": "sha512-q7j6vvarRFmKpgJUT8HCAUljkgzEp4LAhPlJUvQhA5LA1SUL36s5QCysMutErzL3EbNOZOkoziSx9iZC4FddKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.120.0",
+        "@rolldown/pluginutils": "1.0.0-rc.10"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.10",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.10",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.10",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.10",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.10",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.10",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.10",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.10",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.10",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.10",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.10",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.10",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.10",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.10",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.10"
+      }
+    },
     "node_modules/router": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
@@ -2578,6 +4874,29 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -2650,6 +4969,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/simple-concat": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
@@ -2708,6 +5034,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/split-ca": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/split-ca/-/split-ca-1.0.1.tgz",
@@ -2731,6 +5067,13 @@
         "nan": "^2.23.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -2740,6 +5083,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/std-env": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.0.0.tgz",
+      "integrity": "sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -2784,6 +5134,42 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/superagent": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/superagent/-/superagent-10.3.0.tgz",
+      "integrity": "sha512-B+4Ik7ROgVKrQsXTV0Jwp2u+PXYLSlqtDAhYnkkD+zn3yg8s/zjA2MeGayPoY/KICrbitwneDHrjSotxKL+0XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "component-emitter": "^1.3.1",
+        "cookiejar": "^2.1.4",
+        "debug": "^4.3.7",
+        "fast-safe-stringify": "^2.1.1",
+        "form-data": "^4.0.5",
+        "formidable": "^3.5.4",
+        "methods": "^1.1.2",
+        "mime": "2.6.0",
+        "qs": "^6.14.1"
+      },
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
+    "node_modules/supertest": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/supertest/-/supertest-7.2.2.tgz",
+      "integrity": "sha512-oK8WG9diS3DlhdUkcFn4tkNIiIbBx9lI2ClF8K+b2/m8Eyv47LSawxUzZQSNKUrVb2KsqeTDCcjAAVPYaSLVTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cookie-signature": "^1.2.2",
+        "methods": "^1.1.2",
+        "superagent": "^10.3.0"
+      },
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -2851,6 +5237,82 @@
         "node": ">=6"
       }
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.4.tgz",
+      "integrity": "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2882,6 +5344,19 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/ts-node": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
@@ -2926,6 +5401,14 @@
         }
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -2944,6 +5427,19 @@
       "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
       "license": "Unlicense"
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/type-is": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
@@ -2973,6 +5469,30 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.57.1.tgz",
+      "integrity": "sha512-fLvZWf+cAGw3tqMCYzGIU6yR8K+Y9NT2z23RwOjlNFF2HwSB3KhdEFI5lSBv8tNmFkkBShSjsCjzx1vahZfISA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.57.1",
+        "@typescript-eslint/parser": "8.57.1",
+        "@typescript-eslint/typescript-estree": "8.57.1",
+        "@typescript-eslint/utils": "8.57.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
     "node_modules/undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -2995,6 +5515,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3030,6 +5560,236 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vite": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.1.tgz",
+      "integrity": "sha512-wt+Z2qIhfFt85uiyRt5LPU4oVEJBXj8hZNWKeqFG4gRG/0RaRGJ7njQCwzFVjO+v4+Ipmf5CY7VdmZRAYYBPHw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.8",
+        "rolldown": "1.0.0-rc.10",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.0",
+        "esbuild": "^0.27.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.0.tgz",
+      "integrity": "sha512-YbDrMF9jM2Lqc++2530UourxZHmkKLxrs4+mYhEwqWS97WJ7wOYEkcr+QfRgJ3PW9wz3odRijLZjHEaRLTNbqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.0",
+        "@vitest/mocker": "4.1.0",
+        "@vitest/pretty-format": "4.1.0",
+        "@vitest/runner": "4.1.0",
+        "@vitest/snapshot": "4.1.0",
+        "@vitest/spy": "4.1.0",
+        "@vitest/utils": "4.1.0",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0-0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.0",
+        "@vitest/browser-preview": "4.1.0",
+        "@vitest/browser-webdriverio": "4.1.0",
+        "@vitest/ui": "4.1.0",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -3134,6 +5894,28 @@
       "engines": {
         "node": ">=6"
       }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/backend/package.json b/backend/package.json
index 1f7a0ffc..09920b91 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -7,7 +7,8 @@
     "build": "tsc",
     "start": "node dist/index.js",
     "dev": "nodemon --watch src --ext ts,json --exec ts-node src/index.ts",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "vitest run",
+    "lint": "eslint src"
   },
   "keywords": [],
   "author": "",
@@ -20,10 +21,16 @@
     "@types/http-proxy-middleware": "^0.19.3",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^25.3.0",
+    "@types/supertest": "^7.2.0",
     "@types/yaml": "^1.9.6",
     "nodemon": "^3.1.13",
+    "supertest": "^7.2.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.0",
+    "@eslint/js": "^9.0.0",
+    "eslint": "^9.0.0",
+    "typescript-eslint": "^8.0.0"
   },
   "dependencies": {
     "@types/cors": "^2.8.19",
@@ -39,12 +46,15 @@
     "cors": "^2.8.6",
     "dockerode": "^4.0.9",
     "express": "^5.2.1",
+    "express-rate-limit": "^8.3.1",
+    "helmet": "^8.1.0",
     "http-proxy": "^1.18.1",
     "http-proxy-middleware": "^3.0.5",
     "jsonwebtoken": "^9.0.3",
     "node-pty": "^1.1.0",
     "systeminformation": "^5.31.1",
     "ws": "^8.19.0",
-    "yaml": "^2.8.2"
+    "yaml": "^2.8.2",
+    "zod": "^4.3.6"
   }
 }
diff --git a/backend/src/__tests__/auth.test.ts b/backend/src/__tests__/auth.test.ts
new file mode 100644
index 00000000..22535376
--- /dev/null
+++ b/backend/src/__tests__/auth.test.ts
@@ -0,0 +1,112 @@
+/**
+ * Tests for authentication: login, rate limiting, and auth middleware.
+ */
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import request from 'supertest';
+import jwt from 'jsonwebtoken';
+import { setupTestDb, cleanupTestDb, TEST_USERNAME, TEST_PASSWORD, TEST_JWT_SECRET } from './helpers/setupTestDb';
+
+let tmpDir: string;
+let app: import('express').Express;
+
+beforeAll(async () => {
+  tmpDir = await setupTestDb();
+  ({ app } = await import('../index'));
+});
+
+afterAll(() => {
+  cleanupTestDb(tmpDir);
+});
+
+// ─── Login ───────────────────────────────────────────────────────────────────
+
+describe('POST /api/auth/login', () => {
+  it('returns 200 and sets a cookie on valid credentials', async () => {
+    const res = await request(app)
+      .post('/api/auth/login')
+      .send({ username: TEST_USERNAME, password: TEST_PASSWORD });
+
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+    expect(res.headers['set-cookie']).toBeDefined();
+  });
+
+  it('returns 401 on wrong password', async () => {
+    const res = await request(app)
+      .post('/api/auth/login')
+      .send({ username: TEST_USERNAME, password: 'wrong-password' });
+
+    expect(res.status).toBe(401);
+  });
+
+  it('returns 401 on unknown username', async () => {
+    const res = await request(app)
+      .post('/api/auth/login')
+      .send({ username: 'nobody', password: 'anything' });
+
+    expect(res.status).toBe(401);
+  });
+
+  it('returns 400 when credentials are missing', async () => {
+    const res = await request(app).post('/api/auth/login').send({});
+    expect(res.status).toBe(400);
+  });
+});
+
+// ─── Auth middleware ──────────────────────────────────────────────────────────
+
+describe('authMiddleware', () => {
+  it('rejects requests with no token (401)', async () => {
+    const res = await request(app).get('/api/stacks');
+    expect(res.status).toBe(401);
+  });
+
+  it('rejects requests with an invalid token (401)', async () => {
+    const res = await request(app)
+      .get('/api/stacks')
+      .set('Authorization', 'Bearer this.is.not.valid');
+    expect(res.status).toBe(401);
+  });
+
+  it('accepts a valid Bearer token', async () => {
+    // Issue a real token using the known test secret
+    const token = jwt.sign({ username: TEST_USERNAME }, TEST_JWT_SECRET, { expiresIn: '1m' });
+    const res = await request(app)
+      .get('/api/stacks')
+      .set('Authorization', `Bearer ${token}`);
+    // Will succeed (200) or fail with a docker/fs error (500) — but NOT 401
+    expect(res.status).not.toBe(401);
+  });
+
+  it('accepts a valid cookie token', async () => {
+    // First login to get the cookie
+    const loginRes = await request(app)
+      .post('/api/auth/login')
+      .send({ username: TEST_USERNAME, password: TEST_PASSWORD });
+    const cookies = loginRes.headers['set-cookie'] as string | string[];
+    const cookieHeader = Array.isArray(cookies) ? cookies[0] : cookies;
+
+    const res = await request(app)
+      .get('/api/stacks')
+      .set('Cookie', cookieHeader);
+    expect(res.status).not.toBe(401);
+  });
+});
+
+// ─── Protected endpoint: console-token ───────────────────────────────────────
+
+describe('POST /api/system/console-token', () => {
+  it('returns 401 without authentication (was a security bug — C1 fix)', async () => {
+    const res = await request(app).post('/api/system/console-token');
+    expect(res.status).toBe(401);
+  });
+
+  it('returns a token when authenticated', async () => {
+    const token = jwt.sign({ username: TEST_USERNAME }, TEST_JWT_SECRET, { expiresIn: '1m' });
+    const res = await request(app)
+      .post('/api/system/console-token')
+      .set('Authorization', `Bearer ${token}`);
+    expect(res.status).toBe(200);
+    expect(typeof res.body.token).toBe('string');
+  });
+});
diff --git a/backend/src/__tests__/health.test.ts b/backend/src/__tests__/health.test.ts
new file mode 100644
index 00000000..571ca1a1
--- /dev/null
+++ b/backend/src/__tests__/health.test.ts
@@ -0,0 +1,41 @@
+/**
+ * Tests for the public /api/health endpoint.
+ * This endpoint must be reachable without authentication.
+ */
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import request from 'supertest';
+import { setupTestDb, cleanupTestDb } from './helpers/setupTestDb';
+
+let tmpDir: string;
+let app: import('express').Express;
+
+beforeAll(async () => {
+  // setupTestDb must run before any app import so DATA_DIR is set first
+  tmpDir = await setupTestDb();
+  ({ app } = await import('../index'));
+});
+
+afterAll(() => {
+  cleanupTestDb(tmpDir);
+});
+
+describe('GET /api/health', () => {
+  it('returns 200 with status ok', async () => {
+    const res = await request(app).get('/api/health');
+    expect(res.status).toBe(200);
+    expect(res.body.status).toBe('ok');
+  });
+
+  it('returns uptime as a number', async () => {
+    const res = await request(app).get('/api/health');
+    expect(typeof res.body.uptime).toBe('number');
+    expect(res.body.uptime).toBeGreaterThanOrEqual(0);
+  });
+
+  it('does not require an auth token', async () => {
+    // No cookie, no Authorization header — must still return 200
+    const res = await request(app).get('/api/health');
+    expect(res.status).not.toBe(401);
+    expect(res.status).not.toBe(403);
+  });
+});
diff --git a/backend/src/__tests__/helpers/setupTestDb.ts b/backend/src/__tests__/helpers/setupTestDb.ts
new file mode 100644
index 00000000..3e491c92
--- /dev/null
+++ b/backend/src/__tests__/helpers/setupTestDb.ts
@@ -0,0 +1,46 @@
+/**
+ * Test DB helper — creates a temporary SQLite database, seeds it with a known
+ * admin credential, and sets process.env so DatabaseService uses it.
+ *
+ * Call this at the top of every test file *before* importing the app,
+ * because DatabaseService initialises its path on first getInstance() call.
+ */
+import os from 'os';
+import path from 'path';
+import fs from 'fs';
+import bcrypt from 'bcrypt';
+import crypto from 'crypto';
+
+export const TEST_USERNAME = 'testadmin';
+export const TEST_PASSWORD = 'testpassword123';
+export let TEST_JWT_SECRET = '';
+
+export async function setupTestDb(): Promise<string> {
+  const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'sencho-test-'));
+  process.env.DATA_DIR = tmpDir;
+  // Also point COMPOSE_DIR to a temp dir so FileSystemService doesn't fail on missing dir
+  const composeDir = path.join(tmpDir, 'compose');
+  fs.mkdirSync(composeDir, { recursive: true });
+  process.env.COMPOSE_DIR = composeDir;
+
+  // Initialise the DB (singleton will use DATA_DIR we just set)
+  const { DatabaseService } = await import('../../services/DatabaseService');
+  const db = DatabaseService.getInstance();
+
+  // Seed admin credentials
+  const passwordHash = await bcrypt.hash(TEST_PASSWORD, 1); // cost=1 for speed in tests
+  TEST_JWT_SECRET = crypto.randomBytes(32).toString('hex');
+  db.updateGlobalSetting('auth_username', TEST_USERNAME);
+  db.updateGlobalSetting('auth_password_hash', passwordHash);
+  db.updateGlobalSetting('auth_jwt_secret', TEST_JWT_SECRET);
+
+  return tmpDir;
+}
+
+export function cleanupTestDb(tmpDir: string): void {
+  try {
+    fs.rmSync(tmpDir, { recursive: true, force: true });
+  } catch {
+    // best-effort cleanup
+  }
+}
diff --git a/backend/src/__tests__/nodes.test.ts b/backend/src/__tests__/nodes.test.ts
new file mode 100644
index 00000000..9d1cc41f
--- /dev/null
+++ b/backend/src/__tests__/nodes.test.ts
@@ -0,0 +1,96 @@
+/**
+ * Tests for node management API — focusing on api_url validation (SSRF fix C2).
+ */
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import request from 'supertest';
+import jwt from 'jsonwebtoken';
+import { setupTestDb, cleanupTestDb, TEST_USERNAME, TEST_JWT_SECRET } from './helpers/setupTestDb';
+
+let tmpDir: string;
+let app: import('express').Express;
+let authHeader: string;
+
+beforeAll(async () => {
+  tmpDir = await setupTestDb();
+  ({ app } = await import('../index'));
+  const token = jwt.sign({ username: TEST_USERNAME }, TEST_JWT_SECRET, { expiresIn: '1m' });
+  authHeader = `Bearer ${token}`;
+});
+
+afterAll(() => {
+  cleanupTestDb(tmpDir);
+});
+
+describe('POST /api/nodes — api_url SSRF validation (C2 fix)', () => {
+  it('rejects localhost api_url', async () => {
+    const res = await request(app)
+      .post('/api/nodes')
+      .set('Authorization', authHeader)
+      .send({ name: 'bad-node', type: 'remote', api_url: 'http://localhost:6379' });
+    expect(res.status).toBe(400);
+    expect(res.body.error).toMatch(/loopback/i);
+  });
+
+  it('rejects 127.0.0.1 api_url', async () => {
+    const res = await request(app)
+      .post('/api/nodes')
+      .set('Authorization', authHeader)
+      .send({ name: 'bad-node-2', type: 'remote', api_url: 'http://127.0.0.1:5432' });
+    expect(res.status).toBe(400);
+  });
+
+  it('rejects non-http scheme', async () => {
+    const res = await request(app)
+      .post('/api/nodes')
+      .set('Authorization', authHeader)
+      .send({ name: 'bad-node-3', type: 'remote', api_url: 'ftp://example.com' });
+    expect(res.status).toBe(400);
+    expect(res.body.error).toMatch(/http/i);
+  });
+
+  it('rejects malformed URL', async () => {
+    const res = await request(app)
+      .post('/api/nodes')
+      .set('Authorization', authHeader)
+      .send({ name: 'bad-node-4', type: 'remote', api_url: 'not-a-url' });
+    expect(res.status).toBe(400);
+  });
+
+  it('accepts valid LAN IP', async () => {
+    const res = await request(app)
+      .post('/api/nodes')
+      .set('Authorization', authHeader)
+      .send({
+        name: 'lan-node',
+        type: 'remote',
+        api_url: 'http://192.168.1.50:3000',
+        api_token: 'sometoken',
+      });
+    // Should succeed (201 or 200) — not a validation error
+    expect(res.status).not.toBe(400);
+  });
+
+  it('requires api_url for remote nodes', async () => {
+    const res = await request(app)
+      .post('/api/nodes')
+      .set('Authorization', authHeader)
+      .send({ name: 'missing-url', type: 'remote' });
+    expect(res.status).toBe(400);
+  });
+});
+
+describe('Stack name validation on GET routes (H3 fix)', () => {
+  it('rejects path traversal in GET /api/stacks/:stackName', async () => {
+    const res = await request(app)
+      .get('/api/stacks/..%2F..%2Fetc%2Fpasswd')
+      .set('Authorization', authHeader);
+    expect(res.status).toBe(400);
+  });
+
+  it('rejects dots in stack name', async () => {
+    const res = await request(app)
+      .get('/api/stacks/.hidden')
+      .set('Authorization', authHeader);
+    expect(res.status).toBe(400);
+  });
+});
diff --git a/backend/src/__tests__/validation.test.ts b/backend/src/__tests__/validation.test.ts
new file mode 100644
index 00000000..cb905408
--- /dev/null
+++ b/backend/src/__tests__/validation.test.ts
@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest';
+import { isValidStackName, isValidRemoteUrl, isPathWithinBase } from '../utils/validation';
+
+// ─── isValidStackName ────────────────────────────────────────────────────────
+
+describe('isValidStackName', () => {
+  it('accepts alphanumeric names', () => {
+    expect(isValidStackName('mystack')).toBe(true);
+    expect(isValidStackName('MyStack123')).toBe(true);
+  });
+
+  it('accepts hyphens and underscores', () => {
+    expect(isValidStackName('my-stack')).toBe(true);
+    expect(isValidStackName('my_stack')).toBe(true);
+  });
+
+  it('rejects path separators', () => {
+    expect(isValidStackName('../etc')).toBe(false);
+    expect(isValidStackName('foo/bar')).toBe(false);
+    expect(isValidStackName('foo\\bar')).toBe(false);
+  });
+
+  it('rejects dots', () => {
+    expect(isValidStackName('.hidden')).toBe(false);
+    expect(isValidStackName('foo.bar')).toBe(false);
+  });
+
+  it('rejects spaces and special characters', () => {
+    expect(isValidStackName('my stack')).toBe(false);
+    expect(isValidStackName('foo;rm -rf /')).toBe(false);
+    expect(isValidStackName('')).toBe(false);
+  });
+});
+
+// ─── isValidRemoteUrl ────────────────────────────────────────────────────────
+
+describe('isValidRemoteUrl', () => {
+  it('accepts valid http URLs', () => {
+    const result = isValidRemoteUrl('http://192.168.1.10:3000');
+    expect(result.valid).toBe(true);
+  });
+
+  it('accepts valid https URLs', () => {
+    const result = isValidRemoteUrl('https://sencho.example.com');
+    expect(result.valid).toBe(true);
+  });
+
+  it('rejects malformed URLs', () => {
+    const result = isValidRemoteUrl('not-a-url');
+    expect(result.valid).toBe(false);
+  });
+
+  it('rejects non-http schemes', () => {
+    expect(isValidRemoteUrl('ftp://example.com').valid).toBe(false);
+    expect(isValidRemoteUrl('file:///etc/passwd').valid).toBe(false);
+    expect(isValidRemoteUrl('javascript:alert(1)').valid).toBe(false);
+  });
+
+  it('rejects localhost', () => {
+    expect(isValidRemoteUrl('http://localhost:3000').valid).toBe(false);
+    expect(isValidRemoteUrl('http://LOCALHOST:3000').valid).toBe(false);
+  });
+
+  it('rejects loopback IPs', () => {
+    expect(isValidRemoteUrl('http://127.0.0.1:3000').valid).toBe(false);
+    expect(isValidRemoteUrl('http://127.1.2.3').valid).toBe(false);
+    // Node.js URL.hostname preserves brackets: new URL('http://[::1]').hostname === '[::1]'
+    expect(isValidRemoteUrl('http://[::1]:3000').valid).toBe(false);
+  });
+
+  it('rejects 0.0.0.0', () => {
+    expect(isValidRemoteUrl('http://0.0.0.0:3000').valid).toBe(false);
+  });
+
+  it('allows LAN/private IPs (users need these for local network nodes)', () => {
+    // Users legitimately run Sencho nodes on their LAN
+    expect(isValidRemoteUrl('http://192.168.1.100:3000').valid).toBe(true);
+    expect(isValidRemoteUrl('http://10.0.0.5:3000').valid).toBe(true);
+  });
+});
+
+// ─── isPathWithinBase ────────────────────────────────────────────────────────
+
+describe('isPathWithinBase', () => {
+  it('accepts paths within the base directory', () => {
+    expect(isPathWithinBase('/app/compose/mystack/.env', '/app/compose/mystack')).toBe(true);
+  });
+
+  it('accepts the base directory itself', () => {
+    expect(isPathWithinBase('/app/compose/mystack', '/app/compose/mystack')).toBe(true);
+  });
+
+  it('rejects paths that escape via ..', () => {
+    expect(isPathWithinBase('/app/compose/mystack/../../../etc/passwd', '/app/compose/mystack')).toBe(false);
+  });
+
+  it('rejects sibling directories', () => {
+    expect(isPathWithinBase('/app/compose/other-stack/.env', '/app/compose/mystack')).toBe(false);
+  });
+});
diff --git a/backend/src/index.ts b/backend/src/index.ts
index c79ad906..41dbb6dd 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -1,7 +1,9 @@
 import express, { Request, Response, NextFunction } from 'express';
 import cors from 'cors';
 import cookieParser from 'cookie-parser';
-import WebSocket from 'ws';
+import rateLimit from 'express-rate-limit';
+import helmet from 'helmet';
+import WebSocket, { WebSocketServer } from 'ws';
 import jwt from 'jsonwebtoken';
 import DockerController, { globalDockerNetwork } from './services/DockerController';
 import { FileSystemService } from './services/FileSystemService';
@@ -14,8 +16,6 @@ import si from 'systeminformation';
 import http from 'http';
 import httpProxy from 'http-proxy';
 import { createProxyMiddleware } from 'http-proxy-middleware';
-import { spawn, exec } from 'child_process';
-import { promisify } from 'util';
 import path from 'path';
 import { HostTerminalService } from './services/HostTerminalService';
 import { DatabaseService } from './services/DatabaseService';
@@ -25,15 +25,14 @@ import { ImageUpdateService } from './services/ImageUpdateService';
 import { templateService } from './services/TemplateService';
 import { ErrorParser } from './utils/ErrorParser';
 import { NodeRegistry } from './services/NodeRegistry';
+import { isValidStackName, isValidRemoteUrl } from './utils/validation';
 import YAML from 'yaml';
 import fs, { promises as fsPromises } from 'fs';
 
-const execAsync = promisify(exec);
-
 // Suppress [DEP0060] DeprecationWarning emitted by http-proxy@1.18.1 which calls
 // util._extend internally. The warning fires at runtime when createProxyServer() is
-// first invoked (NOT at import time), so intercepting process.emitWarning here —
-// before the proxy instances are created below — fully prevents it.
+// first invoked (NOT at import time), so intercepting process.emitWarning here -
+// before the proxy instances are created below - fully prevents it.
 // http-proxy has no compatible update; this suppression is intentional and safe.
 const _origEmitWarning = process.emitWarning.bind(process);
 (process as any).emitWarning = (warning: any, ...args: any[]) => {
@@ -64,11 +63,86 @@ const getCookieOptions = (req: Request) => ({
 });
 
 // Middleware
+
+// Security headers (X-Frame-Options, X-Content-Type-Options, etc.)
+// crossOriginEmbedderPolicy: disabled — Monaco editor workers lack COEP headers.
+// hsts: disabled — HSTS must only be set when the app is served over HTTPS.
+//   Enabling it over HTTP permanently breaks browser access for 1 year.
+// contentSecurityPolicy.upgradeInsecureRequests: explicitly set to null.
+//   Helmet 8 merges custom directives with its defaults, which include this
+//   directive. It tells browsers to silently upgrade all HTTP sub-resource fetches
+//   to HTTPS. On a plain-HTTP self-hosted deployment (the common case) this causes
+//   every JS/CSS asset to fail with ERR_SSL_PROTOCOL_ERROR, producing a blank page.
+//   Setting null is the Helmet 8 API to remove a default directive.
+app.use(helmet({
+  crossOriginEmbedderPolicy: false,
+  // COOP is only meaningful over HTTPS. Over HTTP the browser logs a warning
+  // and ignores it, creating noise in the console with no security benefit.
+  crossOriginOpenerPolicy: false,
+  hsts: false,
+  contentSecurityPolicy: {
+    directives: {
+      defaultSrc: ["'self'"],
+      baseUri: ["'self'"],
+      fontSrc: ["'self'", 'https:', 'data:'],
+      formAction: ["'self'"],
+      frameAncestors: ["'self'"],
+      imgSrc: ["'self'", 'data:'],
+      objectSrc: ["'none'"],
+      scriptSrc: ["'self'"],
+      scriptSrcAttr: ["'none'"],
+      styleSrc: ["'self'", 'https:', "'unsafe-inline'"],
+      // connect-src: explicit 'self' covers same-origin fetch/XHR/WebSocket.
+      // ws: and wss: are included for WebSocket connections in any scheme context.
+      connectSrc: ["'self'", 'ws:', 'wss:'],
+      // worker-src: Monaco editor creates Web Workers via blob: URLs for language
+      // services (syntax highlighting, intellisense). Without blob: they silently fail.
+      workerSrc: ["'self'", 'blob:'],
+      // Helmet 8 merges custom directives with its defaults, which include
+      // upgrade-insecure-requests. Setting it to null explicitly removes it.
+      // On plain-HTTP self-hosted deployments (the common case) this directive
+      // causes every JS/CSS asset to fail with ERR_SSL_PROTOCOL_ERROR → blank page.
+      upgradeInsecureRequests: null,
+    },
+  },
+}));
+
+// CORS — in production restrict to the configured frontend origin.
+// In development, mirror the request origin so Vite's dev server works.
+const corsOrigin = process.env.NODE_ENV === 'production' && process.env.FRONTEND_URL
+  ? process.env.FRONTEND_URL
+  : true;
+
 app.use(cors({
-  origin: true,
+  origin: corsOrigin,
   credentials: true,
 }));
-app.use(express.json());
+// Conditionally parse JSON bodies. Remote proxy requests must NOT have their body
+// consumed here: express.json() drains the IncomingMessage stream into req.body
+// and http-proxy then pipes an already-ended stream to the remote server.
+// When Node.js pipes an ended readable it calls process.nextTick(dest.end()),
+// which fires *before* the proxyReq socket event, so any attempt to write the
+// body inside the proxyReq handler results in "write after end" and the request
+// hangs. Solution: skip JSON parsing for remote-targeted /api/ requests so the
+// raw stream flows through the proxy intact.
+app.use((req: Request, res: Response, next: NextFunction): void => {
+  const nodeIdHeader = req.headers['x-node-id'];
+  if (nodeIdHeader) {
+    const nodeId = parseInt(nodeIdHeader as string, 10);
+    const node = NodeRegistry.getInstance().getNode(nodeId);
+    if (
+      node?.type === 'remote' &&
+      req.path.startsWith('/api/') &&
+      !req.path.startsWith('/api/auth/') &&
+      !req.path.startsWith('/api/nodes')
+    ) {
+      // Preserve body stream for proxy piping
+      next();
+      return;
+    }
+  }
+  express.json()(req, res, next);
+});
 app.use(cookieParser());
 
 // Node Context Middleware
@@ -122,13 +196,15 @@ wsProxyServer.on('error', (err, _req, socket: any) => {
 });
 
 // Authentication Middleware
-// Accepts both cookie auth (browser sessions) and Bearer token auth (Sencho-to-Sencho proxy)
+// Accepts both cookie auth (browser sessions) and Bearer token auth (Sencho-to-Sencho proxy).
+// Bearer token is evaluated first: node-to-node proxy calls always carry a Bearer token and
+// should never be shadowed by a stale or cross-instance cookie.
 const authMiddleware = async (req: Request, res: Response, next: NextFunction): Promise<void> => {
   const cookieToken = req.cookies[COOKIE_NAME];
   const bearerToken = req.headers.authorization?.startsWith('Bearer ')
     ? req.headers.authorization.slice(7)
     : null;
-  const token = cookieToken || bearerToken;
+  const token = bearerToken || cookieToken;
 
   if (!token) {
     res.status(401).json({ error: 'Authentication required' });
@@ -150,6 +226,22 @@ const authMiddleware = async (req: Request, res: Response, next: NextFunction):
   }
 };
 
+// Rate limiter for auth endpoints — prevents brute-force attacks.
+// Production: 5 attempts per 15-minute window per IP.
+// Development: 100 attempts (so E2E tests and local tooling are not blocked).
+const authRateLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000,
+  max: process.env.NODE_ENV === 'production' ? 5 : 100,
+  standardHeaders: true,
+  legacyHeaders: false,
+  message: { error: 'Too many attempts. Please try again in 15 minutes.' },
+});
+
+// Public health endpoint - no auth required (used by Docker HEALTHCHECK and uptime monitors)
+app.get('/api/health', (_req: Request, res: Response): void => {
+  res.json({ status: 'ok', uptime: process.uptime() });
+});
+
 // Auth Routes (no authentication required)
 
 // Check if setup is needed
@@ -165,7 +257,7 @@ app.get('/api/auth/status', async (req: Request, res: Response): Promise<void> =
 });
 
 // Initial setup endpoint
-app.post('/api/auth/setup', async (req: Request, res: Response): Promise<void> => {
+app.post('/api/auth/setup', authRateLimiter, async (req: Request, res: Response): Promise<void> => {
   try {
     const dbSvc = DatabaseService.getInstance();
     const settings = dbSvc.getGlobalSettings();
@@ -216,7 +308,7 @@ app.post('/api/auth/setup', async (req: Request, res: Response): Promise<void> =
 });
 
 // Login endpoint
-app.post('/api/auth/login', async (req: Request, res: Response): Promise<void> => {
+app.post('/api/auth/login', authRateLimiter, async (req: Request, res: Response): Promise<void> => {
   const { username, password } = req.body;
 
   if (!username || !password) {
@@ -357,7 +449,7 @@ const remoteNodeProxy = createProxyMiddleware<Request, Response>({
         proxyReq.setHeader('Authorization', `Bearer ${node.api_token}`);
       }
       // Strip the ?nodeId= query param so the remote's nodeContextMiddleware
-      // doesn't reject the request with 404 ("Node X not found") — the remote
+      // doesn't reject the request with 404 ("Node X not found") - the remote
       // has no record of the gateway's node IDs and should treat the request
       // as local. This affects endpoints like EventSource /api/containers/:id/logs
       // that pass nodeId as a query param rather than the x-node-id header.
@@ -368,11 +460,28 @@ const remoteNodeProxy = createProxyMiddleware<Request, Response>({
         const newQs = params.toString();
         proxyReq.path = pathname + (newQs ? `?${newQs}` : '');
       }
+      // Body forwarding: the conditional json parser (see top of file) skips
+      // parsing for remote requests, so req's raw stream is intact and
+      // http-proxy's req.pipe(proxyReq) forwards the body automatically.
+      // No manual body rewriting needed here.
+    },
+    proxyRes: (proxyRes) => {
+      // Mark every response forwarded from a remote node with a sentinel header.
+      // The frontend (apiFetch / fetchForNode) checks this before firing the
+      // global 'sencho-unauthorized' event: a 401 from a remote means the stored
+      // api_token for that node is invalid — not that the user's own session
+      // expired. Without this distinction, any node with a bad token causes an
+      // immediate logout loop.
+      proxyRes.headers['x-sencho-proxy'] = '1';
     },
     error: (err, _req, proxyRes) => {
       console.error('[Proxy] Remote node error:', (err as Error).message);
-      if (!(proxyRes as Response).headersSent) {
-        (proxyRes as Response).status(502).json({
+      // proxyRes can be either a ServerResponse (HTTP) or a raw Socket (WS/TCP errors).
+      // Only attempt to send an HTTP 502 if it is a proper ServerResponse with a
+      // headersSent flag - otherwise silently drop (the socket will be destroyed).
+      const res = proxyRes as any;
+      if (typeof res?.headersSent === 'boolean' && !res.headersSent && typeof res.status === 'function') {
+        res.status(502).json({
           error: 'Remote node is unreachable. Check the API URL and ensure Sencho is running on that host.'
         });
       }
@@ -408,10 +517,22 @@ app.use('/api/', (req: Request, res: Response, next: NextFunction): void => {
 const server = http.createServer(app);
 
 // WebSocket server with authentication
-const wss = new WebSocket.Server({ noServer: true });
+const wss = new WebSocketServer({ noServer: true });
 
 let terminalWs: WebSocket | null = null;
 
+// Notification push - set of authenticated browser clients subscribed to real-time alerts
+const notificationSubscribers = new Set<WebSocket>();
+NotificationService.getInstance().setBroadcaster((notification) => {
+  if (notificationSubscribers.size === 0) return;
+  const msg = JSON.stringify({ type: 'notification', payload: notification });
+  for (const ws of notificationSubscribers) {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(msg);
+    }
+  }
+});
+
 // Handle WebSocket upgrade with JWT authentication
 server.on('upgrade', async (req, socket, head) => {
   // Parse cookies from the upgrade request
@@ -424,7 +545,9 @@ server.on('upgrade', async (req, socket, head) => {
   const cookieToken = cookies[COOKIE_NAME];
   const authHeader = req.headers['authorization'] as string | undefined;
   const bearerToken = authHeader?.startsWith('Bearer ') ? authHeader.slice(7) : null;
-  const token = cookieToken || bearerToken;
+  // Prefer Bearer over cookie: node-to-node proxy upgrades carry a Bearer token and must
+  // not be shadowed by a browser cookie signed with a different instance's JWT secret.
+  const token = bearerToken || cookieToken;
 
   if (!token) {
     socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
@@ -436,7 +559,11 @@ server.on('upgrade', async (req, socket, head) => {
     const settings = DatabaseService.getInstance().getGlobalSettings();
     const jwtSecret = settings.auth_jwt_secret;
     if (!jwtSecret) throw new Error('No JWT secret');
-    jwt.verify(token, jwtSecret);
+    const decoded = jwt.verify(token, jwtSecret) as { username?: string; scope?: string };
+
+    // Node proxy tokens are machine-to-machine credentials and must never be granted
+    // interactive terminal access (host console or container exec).
+    const isProxyToken = decoded.scope === 'node_proxy';
 
     const url = req.url || '';
     const parsedUrl = new URL(url, `http://${req.headers.host || 'localhost'}`);
@@ -447,12 +574,56 @@ server.on('upgrade', async (req, socket, head) => {
     const nodeId = nodeIdParam ? parseInt(nodeIdParam, 10) : NodeRegistry.getInstance().getDefaultNodeId();
     const node = NodeRegistry.getInstance().getNode(nodeId);
 
+    // Notification push channel - local only when no remote nodeId is specified.
+    // When a nodeId pointing to a remote node is provided, fall through to the
+    // proxy block below so the browser subscribes to that remote node's push stream.
+    if (pathname === '/ws/notifications' && (!node || node.type !== 'remote')) {
+      const notifWss = new WebSocketServer({ noServer: true });
+      notifWss.handleUpgrade(req, socket, head, (ws) => {
+        notifWss.close();
+        notificationSubscribers.add(ws);
+        ws.on('close', () => notificationSubscribers.delete(ws));
+        ws.on('error', () => { notificationSubscribers.delete(ws); ws.terminate(); });
+      });
+      return;
+    }
+
     // Remote Node WebSocket Proxy - forward the entire WS connection to the remote Sencho instance
     if (node && node.type === 'remote' && node.api_url && node.api_token) {
       const wsTarget = node.api_url.replace(/\/$/, '').replace(/^https?/, (m) => m === 'https' ? 'wss' : 'ws');
-      req.headers['authorization'] = `Bearer ${node.api_token}`;
+
+      // Interactive console paths (host console / container exec) are guarded on the remote by
+      // an isProxyToken check that rejects the long-lived api_token (scope: 'node_proxy').
+      // Exchange it for a short-lived console_session token before forwarding so the remote
+      // allows the connection while keeping the guard intact for direct api_token access.
+      const isInteractiveConsolePath = pathname === '/api/system/host-console' || pathname === '/ws';
+      let bearerTokenForProxy = node.api_token;
+      if (isInteractiveConsolePath) {
+        try {
+          const tokenRes = await fetch(`${node.api_url.replace(/\/$/, '')}/api/system/console-token`, {
+            method: 'POST',
+            headers: { 'Authorization': `Bearer ${node.api_token}` },
+          });
+          if (tokenRes.ok) {
+            const data = await tokenRes.json() as { token?: string };
+            if (typeof data.token === 'string') bearerTokenForProxy = data.token;
+          } else {
+            console.error(`[WS Proxy] Remote console-token request failed: ${tokenRes.status}`);
+            socket.write('HTTP/1.1 502 Bad Gateway\r\n\r\n');
+            socket.destroy();
+            return;
+          }
+        } catch (e) {
+          console.error('[WS Proxy] Failed to fetch remote console token:', (e as Error).message);
+          socket.write('HTTP/1.1 502 Bad Gateway\r\n\r\n');
+          socket.destroy();
+          return;
+        }
+      }
+
+      req.headers['authorization'] = `Bearer ${bearerTokenForProxy}`;
       delete req.headers['x-node-id'];
-      // Strip the browser's session cookie — it is signed by this instance's JWT secret and
+      // Strip the browser's session cookie - it is signed by this instance's JWT secret and
       // would fail verification on the remote. Auth is handled exclusively via the Bearer token.
       delete req.headers['cookie'];
       // Strip nodeId from the forwarded URL so the remote treats the request as a local one.
@@ -471,8 +642,12 @@ server.on('upgrade', async (req, socket, head) => {
 
     if (logsMatch) {
       // Dedicated stack logs WebSocket - uses Supervisor loop for persistent logs
-      const logsWss = new WebSocket.Server({ noServer: true });
+      const logsWss = new WebSocketServer({ noServer: true });
       logsWss.handleUpgrade(req, socket, head, (ws) => {
+        // Close the per-connection server immediately after the upgrade is complete.
+        // The wss instance is only needed to negotiate the handshake; keeping it open
+        // would accumulate listeners and allocate memory for every connection.
+        logsWss.close();
         const stackName = decodeURIComponent(logsMatch[1]);
         try {
           ComposeService.getInstance(nodeId).streamLogs(stackName, ws);
@@ -484,14 +659,29 @@ server.on('upgrade', async (req, socket, head) => {
         }
       });
     } else if (hostConsoleMatch) {
-      const hostConsoleWss = new WebSocket.Server({ noServer: true });
+      // Node proxy tokens must not access interactive host terminals
+      if (isProxyToken) {
+        socket.write('HTTP/1.1 403 Forbidden\r\n\r\n');
+        socket.destroy();
+        return;
+      }
+      const hostConsoleWss = new WebSocketServer({ noServer: true });
       hostConsoleWss.handleUpgrade(req, socket, head, (ws) => {
+        hostConsoleWss.close();
         let targetDirectory = '';
         try {
-          targetDirectory = FileSystemService.getInstance(nodeId).getBaseDir();
+          const baseDir = FileSystemService.getInstance(nodeId).getBaseDir();
           const stackParam = parsedUrl.searchParams.get('stack');
           if (stackParam) {
-            targetDirectory = path.join(targetDirectory, stackParam);
+            const resolved = path.resolve(baseDir, stackParam);
+            if (!resolved.startsWith(path.resolve(baseDir))) {
+              ws.send('Error: Invalid stack path\r\n');
+              ws.close();
+              return;
+            }
+            targetDirectory = resolved;
+          } else {
+            targetDirectory = baseDir;
           }
         } catch (e) {
           targetDirectory = FileSystemService.getInstance(NodeRegistry.getInstance().getDefaultNodeId()).getBaseDir();
@@ -507,7 +697,13 @@ server.on('upgrade', async (req, socket, head) => {
         }
       });
     } else {
-      // Generic terminal WebSocket
+      // Generic terminal WebSocket (container exec)
+      // Node proxy tokens must not access interactive container terminals
+      if (isProxyToken) {
+        socket.write('HTTP/1.1 403 Forbidden\r\n\r\n');
+        socket.destroy();
+        return;
+      }
       wss.handleUpgrade(req, socket, head, (ws) => {
         wss.emit('connection', ws, req);
       });
@@ -539,14 +735,20 @@ wss.on('connection', (ws) => {
         // message belongs to the gateway's DB and won't resolve locally. Fall back to local.
         let nodeId = requestedId;
         try { NodeRegistry.getInstance().getDocker(requestedId); } catch { nodeId = NodeRegistry.getInstance().getDefaultNodeId(); }
-        DockerController.getInstance(nodeId).streamStats(data.containerId, ws);
+        DockerController.getInstance(nodeId).streamStats(data.containerId, ws).catch((err: Error) => {
+          console.error('[WS] streamStats error:', err.message);
+          if (ws.readyState === WebSocket.OPEN) ws.close();
+        });
       } else if (data.action === 'execContainer') {
         // Handle container exec for bash access
         // Input, resize, and cleanup are handled inside execContainer's closure
         const requestedId = data.nodeId ? parseInt(data.nodeId, 10) : NodeRegistry.getInstance().getDefaultNodeId();
         let nodeId = requestedId;
         try { NodeRegistry.getInstance().getDocker(requestedId); } catch { nodeId = NodeRegistry.getInstance().getDefaultNodeId(); }
-        DockerController.getInstance(nodeId).execContainer(data.containerId, ws);
+        DockerController.getInstance(nodeId).execContainer(data.containerId, ws).catch((err: Error) => {
+          console.error('[WS] execContainer error:', err.message);
+          if (ws.readyState === WebSocket.OPEN) ws.close();
+        });
       }
     } catch (error) {
       // Malformed JSON - ignore silently
@@ -580,6 +782,9 @@ app.get('/api/stacks', async (req: Request, res: Response) => {
 app.get('/api/stacks/:stackName', async (req: Request, res: Response) => {
   try {
     const stackName = req.params.stackName as string;
+    if (!isValidStackName(stackName)) {
+      return res.status(400).json({ error: 'Invalid stack name' });
+    }
     const content = await FileSystemService.getInstance(req.nodeId).getStackContent(stackName);
     res.send(content);
   } catch (error) {
@@ -640,20 +845,22 @@ async function resolveAllEnvFilePaths(nodeId: number, stackName: string): Promis
       const service = parsed.services[serviceName];
       if (!service?.env_file) continue;
 
+      const addEnvPath = (rawPath: string) => {
+        const resolved = path.resolve(stackDir, rawPath);
+        // Reject paths that escape the stack directory
+        if (!resolved.startsWith(path.resolve(stackDir) + path.sep) && resolved !== path.resolve(stackDir)) {
+          console.warn(`[Security] env_file path "${rawPath}" escapes stack directory — skipping`);
+          return;
+        }
+        envFiles.add(resolved);
+      };
+
       if (typeof service.env_file === 'string') {
-        const resolvedPath = path.isAbsolute(service.env_file)
-          ? service.env_file
-          : path.resolve(stackDir, service.env_file);
-        envFiles.add(resolvedPath);
+        addEnvPath(service.env_file);
       } else if (Array.isArray(service.env_file)) {
         for (const entry of service.env_file) {
           const entryPath = typeof entry === 'string' ? entry : (entry?.path || '');
-          if (entryPath) {
-            const resolvedPath = path.isAbsolute(entryPath)
-              ? entryPath
-              : path.resolve(stackDir, entryPath);
-            envFiles.add(resolvedPath);
-          }
+          if (entryPath) addEnvPath(entryPath);
         }
       }
     }
@@ -673,6 +880,9 @@ async function resolveAllEnvFilePaths(nodeId: number, stackName: string): Promis
 app.get('/api/stacks/:stackName/envs', async (req: Request, res: Response) => {
   try {
     const stackName = req.params.stackName as string;
+    if (!isValidStackName(stackName)) {
+      return res.status(400).json({ error: 'Invalid stack name' });
+    }
     const envPaths = await resolveAllEnvFilePaths(req.nodeId, stackName);
     res.json({ envFiles: envPaths });
   } catch (error) {
@@ -683,6 +893,9 @@ app.get('/api/stacks/:stackName/envs', async (req: Request, res: Response) => {
 app.get('/api/stacks/:stackName/env', async (req: Request, res: Response) => {
   try {
     const stackName = req.params.stackName as string;
+    if (!isValidStackName(stackName)) {
+      return res.status(400).json({ error: 'Invalid stack name' });
+    }
     const requestedFile = req.query.file as string | undefined;
     const envPaths = await resolveAllEnvFilePaths(req.nodeId, stackName);
 
@@ -946,15 +1159,27 @@ app.post('/api/convert', async (req: Request, res: Response) => {
 // Get all containers stats for dashboard
 app.get('/api/stats', async (req: Request, res: Response) => {
   try {
-    const dockerController = DockerController.getInstance(req.nodeId);
-    const containers = await dockerController.getRunningContainers();
-    const allContainers = await dockerController.getAllContainers();
+    const composeDir = path.resolve(NodeRegistry.getInstance().getComposeDir(req.nodeId));
+    const allContainers = await DockerController.getInstance(req.nodeId).getAllContainers();
 
-    const active = containers.length;
-    const exited = allContainers.filter((c: { State: string }) => c.State === 'exited').length;
+    // A container is "managed" if Docker started it from within COMPOSE_DIR.
+    // We use com.docker.compose.project.working_dir rather than project name because
+    // stacks launched from the COMPOSE_DIR root (not a subdirectory) all share the
+    // project name of the root folder — causing false "external" classification.
+    const isManagedByComposeDir = (c: any): boolean => {
+      const workingDir: string | undefined = c.Labels?.['com.docker.compose.project.working_dir'];
+      if (!workingDir) return false;
+      const resolved = path.resolve(workingDir);
+      return resolved === composeDir || resolved.startsWith(composeDir + path.sep);
+    };
+
+    const active = allContainers.filter((c: any) => c.State === 'running').length;
+    const exited = allContainers.filter((c: any) => c.State === 'exited').length;
     const total = allContainers.length;
+    const managed = allContainers.filter((c: any) => c.State === 'running' && isManagedByComposeDir(c)).length;
+    const unmanaged = allContainers.filter((c: any) => c.State === 'running' && !isManagedByComposeDir(c)).length;
 
-    res.json({ active, exited, total, inactive: total - active - exited });
+    res.json({ active, managed, unmanaged, exited, total });
   } catch (error) {
     res.status(500).json({ error: 'Failed to fetch stats' });
   }
@@ -977,7 +1202,7 @@ app.get('/api/logs/global', async (req: Request, res: Response) => {
 
     await Promise.all(containers.map(async (c) => {
       const stackName = c.Labels?.['com.docker.compose.project'] || 'system';
-      let rawName = c.Names?.[0]?.replace(/^\//, '') || c.Id.substring(0, 12);
+      const rawName = c.Names?.[0]?.replace(/^\//, '') || c.Id.substring(0, 12);
 
       // Standardize naming: Strip stack name prefix if it exists
       let containerName = rawName;
@@ -1053,9 +1278,11 @@ app.get('/api/logs/global', async (req: Request, res: Response) => {
       }
     }));
 
-    // Sort globally by timestamp ascending (newest bottom) and limit to 2000 lines
+    // Sort globally by timestamp ascending (newest bottom).
+    // Limit to 500 lines - the client renders at most 300 rows at once, so
+    // sending 2000 lines was wasting bandwidth and inflating JSON parse time.
     allLogs.sort((a, b) => a.timestampMs - b.timestampMs);
-    res.json(allLogs.slice(-2000));
+    res.json(allLogs.slice(-500));
   } catch (error) {
     res.status(500).json({ error: 'Failed to fetch global logs' });
   }
@@ -1075,7 +1302,7 @@ app.get('/api/logs/global/stream', async (req: Request, res: Response) => {
 
     await Promise.all(containers.map(async (c) => {
       const stackName = c.Labels?.['com.docker.compose.project'] || 'system';
-      let rawName = c.Names?.[0]?.replace(/^\//, '') || c.Id.substring(0, 12);
+      const rawName = c.Names?.[0]?.replace(/^\//, '') || c.Id.substring(0, 12);
       let containerName = rawName;
       if (rawName.startsWith(`${stackName}-`)) containerName = rawName.replace(`${stackName}-`, '').replace(/-1$/, '');
       else if (rawName.startsWith(`${stackName}_`)) containerName = rawName.replace(`${stackName}_`, '').replace(/_1$/, '');
@@ -1225,11 +1452,48 @@ app.post('/api/agents', async (req: Request, res: Response) => {
   }
 });
 
+// Keys that contain auth credentials - never exposed to the frontend or writable via settings API
+const PRIVATE_SETTINGS_KEYS = new Set(['auth_username', 'auth_password_hash', 'auth_jwt_secret']);
+
+// Strict allowlist of keys writable via the settings API (prevents overwriting auth credentials)
+const ALLOWED_SETTING_KEYS = new Set([
+  'host_cpu_limit',
+  'host_ram_limit',
+  'host_disk_limit',
+  'docker_janitor_gb',
+  'global_crash',
+  'global_logs_refresh',
+  'developer_mode',
+  'template_registry_url',
+  'metrics_retention_hours',
+  'log_retention_days',
+]);
+
+// Zod schema for bulk PATCH - all keys optional, present keys fully validated
+import { z } from 'zod';
+const SettingsPatchSchema = z.object({
+  host_cpu_limit:          z.coerce.number().int().min(1).max(100).transform(String),
+  host_ram_limit:          z.coerce.number().int().min(1).max(100).transform(String),
+  host_disk_limit:         z.coerce.number().int().min(1).max(100).transform(String),
+  docker_janitor_gb:       z.coerce.number().min(0).transform(String),
+  global_crash:            z.enum(['0', '1']),
+  global_logs_refresh:     z.enum(['1', '3', '5', '10']),
+  developer_mode:          z.enum(['0', '1']),
+  template_registry_url:   z.string().max(2048).refine(v => v === '' || /^https?:\/\/.+/.test(v), { message: 'Must be a valid URL or empty' }),
+  metrics_retention_hours: z.coerce.number().int().min(1).max(8760).transform(String),
+  log_retention_days:      z.coerce.number().int().min(1).max(365).transform(String),
+}).partial();
+
 app.get('/api/settings', async (req: Request, res: Response) => {
   try {
     const settings = DatabaseService.getInstance().getGlobalSettings();
+    // Strip auth credentials - these are managed exclusively by /api/auth/* endpoints
+    for (const key of PRIVATE_SETTINGS_KEYS) {
+      delete settings[key];
+    }
     res.json(settings);
   } catch (error) {
+    console.error('Failed to fetch settings:', error);
     res.status(500).json({ error: 'Failed to fetch settings' });
   }
 });
@@ -1237,13 +1501,43 @@ app.get('/api/settings', async (req: Request, res: Response) => {
 app.post('/api/settings', async (req: Request, res: Response) => {
   try {
     const { key, value } = req.body;
-    DatabaseService.getInstance().updateGlobalSetting(key, value);
+    if (!key || typeof key !== 'string' || !ALLOWED_SETTING_KEYS.has(key)) {
+      res.status(400).json({ error: `Invalid or disallowed setting key: ${key}` });
+      return;
+    }
+    if (value === undefined || value === null) {
+      res.status(400).json({ error: 'Setting value is required' });
+      return;
+    }
+    DatabaseService.getInstance().updateGlobalSetting(key, String(value));
     res.json({ success: true });
   } catch (error) {
+    console.error('Failed to update setting:', error);
     res.status(500).json({ error: 'Failed to update setting' });
   }
 });
 
+app.patch('/api/settings', async (req: Request, res: Response) => {
+  try {
+    const parsed = SettingsPatchSchema.safeParse(req.body);
+    if (!parsed.success) {
+      res.status(400).json({ error: 'Validation failed', details: parsed.error.flatten().fieldErrors });
+      return;
+    }
+    const db = DatabaseService.getInstance();
+    const updateMany = db.getDb().transaction((entries: [string, string][]) => {
+      for (const [k, v] of entries) {
+        db.updateGlobalSetting(k, v);
+      }
+    });
+    updateMany(Object.entries(parsed.data) as [string, string][]);
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Failed to bulk update settings:', error);
+    res.status(500).json({ error: 'Failed to update settings' });
+  }
+});
+
 app.get('/api/alerts', async (req: Request, res: Response) => {
   try {
     let stackName = req.query.stackName as string | undefined;
@@ -1256,12 +1550,26 @@ app.get('/api/alerts', async (req: Request, res: Response) => {
   }
 });
 
+const AlertCreateSchema = z.object({
+  stack_name: z.string().min(1).max(255),
+  metric: z.enum(['cpu_percent', 'memory_percent', 'memory_mb', 'net_rx', 'net_tx', 'restart_count']),
+  operator: z.enum(['>', '>=', '<', '<=', '==']),
+  threshold: z.number().min(0),
+  duration_mins: z.coerce.number().int().min(0).max(1440),
+  cooldown_mins: z.coerce.number().int().min(0).max(10080),
+});
+
 app.post('/api/alerts', async (req: Request, res: Response) => {
+  const parsed = AlertCreateSchema.safeParse(req.body);
+  if (!parsed.success) {
+    res.status(400).json({ error: 'Invalid alert data', details: parsed.error.flatten().fieldErrors });
+    return;
+  }
   try {
-    const alert = req.body;
-    DatabaseService.getInstance().addStackAlert(alert);
+    DatabaseService.getInstance().addStackAlert(parsed.data);
     res.json({ success: true });
   } catch (error) {
+    console.error('Failed to add alert:', error);
     res.status(500).json({ error: 'Failed to add alert' });
   }
 });
@@ -1276,7 +1584,7 @@ app.delete('/api/alerts/:id', async (req: Request, res: Response) => {
   }
 });
 
-app.get('/api/notifications', async (req: Request, res: Response) => {
+app.get('/api/notifications', authMiddleware, async (req: Request, res: Response) => {
   try {
     const history = DatabaseService.getInstance().getNotificationHistory();
     res.json(history);
@@ -1285,7 +1593,7 @@ app.get('/api/notifications', async (req: Request, res: Response) => {
   }
 });
 
-app.post('/api/notifications/read', async (req: Request, res: Response) => {
+app.post('/api/notifications/read', authMiddleware, async (req: Request, res: Response) => {
   try {
     DatabaseService.getInstance().markAllNotificationsRead();
     res.json({ success: true });
@@ -1294,7 +1602,7 @@ app.post('/api/notifications/read', async (req: Request, res: Response) => {
   }
 });
 
-app.delete('/api/notifications/:id', async (req: Request, res: Response) => {
+app.delete('/api/notifications/:id', authMiddleware, async (req: Request, res: Response) => {
   try {
     const id = parseInt(req.params.id as string, 10);
     DatabaseService.getInstance().deleteNotification(id);
@@ -1304,7 +1612,7 @@ app.delete('/api/notifications/:id', async (req: Request, res: Response) => {
   }
 });
 
-app.delete('/api/notifications', async (req: Request, res: Response) => {
+app.delete('/api/notifications', authMiddleware, async (req: Request, res: Response) => {
   try {
     DatabaseService.getInstance().deleteAllNotifications();
     res.json({ success: true });
@@ -1313,7 +1621,7 @@ app.delete('/api/notifications', async (req: Request, res: Response) => {
   }
 });
 
-app.post('/api/notifications/test', async (req: Request, res: Response) => {
+app.post('/api/notifications/test', authMiddleware, async (req: Request, res: Response) => {
   try {
     const { type, url } = req.body;
     await NotificationService.getInstance().testDispatch(type, url);
@@ -1323,6 +1631,27 @@ app.post('/api/notifications/test', async (req: Request, res: Response) => {
   }
 });
 
+// Issue a short-lived console session token for WebSocket proxy delegation.
+// When the gateway needs to proxy an interactive terminal (host console or container exec)
+// to a remote node, it calls this endpoint (authenticated with the long-lived api_token)
+// to receive a short-lived token. The remote's WS upgrade handler allows 'console_session'
+// tokens through its isProxyToken guard, keeping the long-lived api_token off interactive paths.
+app.post('/api/system/console-token', authMiddleware, (req: Request, res: Response): void => {
+  try {
+    const settings = DatabaseService.getInstance().getGlobalSettings();
+    const jwtSecret = settings.auth_jwt_secret;
+    if (!jwtSecret) {
+      res.status(500).json({ error: 'No JWT secret configured' });
+      return;
+    }
+    const consoleToken = jwt.sign({ scope: 'console_session' }, jwtSecret, { expiresIn: '60s' });
+    res.json({ token: consoleToken });
+  } catch (error) {
+    console.error('Failed to issue console token:', error);
+    res.status(500).json({ error: 'Failed to issue console token' });
+  }
+});
+
 // --- System Maintenance Routes (The System Janitor) ---
 
 app.get('/api/system/orphans', async (req: Request, res: Response) => {
@@ -1354,13 +1683,24 @@ app.post('/api/system/prune/orphans', async (req: Request, res: Response) => {
 
 app.post('/api/system/prune/system', async (req: Request, res: Response) => {
   try {
-    const { target } = req.body; // 'containers', 'images', 'networks', 'volumes'
+    const { target, scope } = req.body as { target: string; scope?: string };
     if (!['containers', 'images', 'networks', 'volumes'].includes(target)) {
       return res.status(400).json({ error: 'Invalid prune target' });
     }
 
     const dockerController = DockerController.getInstance(req.nodeId);
-    const result = await dockerController.pruneSystem(target);
+    const pruneScope = scope === 'managed' ? 'managed' : 'all';
+
+    let result: { success: boolean; reclaimedBytes: number };
+    if (pruneScope === 'managed' && target !== 'containers') {
+      const knownStacks = await FileSystemService.getInstance(req.nodeId).getStacks();
+      result = await dockerController.pruneManagedOnly(
+        target as 'images' | 'volumes' | 'networks',
+        knownStacks
+      );
+    } else {
+      result = await dockerController.pruneSystem(target as 'containers' | 'images' | 'networks' | 'volumes');
+    }
 
     res.json({ message: 'Prune completed', ...result });
   } catch (error: any) {
@@ -1371,8 +1711,8 @@ app.post('/api/system/prune/system', async (req: Request, res: Response) => {
 
 app.get('/api/system/docker-df', async (req: Request, res: Response) => {
   try {
-    const dockerController = DockerController.getInstance(req.nodeId);
-    const df = await dockerController.getDiskUsage();
+    const knownStacks = await FileSystemService.getInstance(req.nodeId).getStacks();
+    const df = await DockerController.getInstance(req.nodeId).getDiskUsageClassified(knownStacks);
     res.json(df);
   } catch (error) {
     console.error('Failed to fetch docker disk usage:', error);
@@ -1380,10 +1720,23 @@ app.get('/api/system/docker-df', async (req: Request, res: Response) => {
   }
 });
 
+// Single endpoint returning classified images, volumes, and networks in one call
+app.get('/api/system/resources', async (req: Request, res: Response) => {
+  try {
+    const knownStacks = await FileSystemService.getInstance(req.nodeId).getStacks();
+    const result = await DockerController.getInstance(req.nodeId).getClassifiedResources(knownStacks);
+    res.json(result);
+  } catch (error) {
+    console.error('Failed to fetch classified resources:', error);
+    res.status(500).json({ error: 'Failed to fetch resources' });
+  }
+});
+
+// Keep legacy endpoints for backward compat with remote proxy routing
 app.get('/api/system/images', async (req: Request, res: Response) => {
   try {
-    const dockerController = DockerController.getInstance(req.nodeId);
-    const images = await dockerController.getImages();
+    const knownStacks = await FileSystemService.getInstance(req.nodeId).getStacks();
+    const { images } = await DockerController.getInstance(req.nodeId).getClassifiedResources(knownStacks);
     res.json(images);
   } catch (error) {
     console.error('Failed to fetch images:', error);
@@ -1393,8 +1746,8 @@ app.get('/api/system/images', async (req: Request, res: Response) => {
 
 app.get('/api/system/volumes', async (req: Request, res: Response) => {
   try {
-    const dockerController = DockerController.getInstance(req.nodeId);
-    const volumes = await dockerController.getVolumes();
+    const knownStacks = await FileSystemService.getInstance(req.nodeId).getStacks();
+    const { volumes } = await DockerController.getInstance(req.nodeId).getClassifiedResources(knownStacks);
     res.json(volumes);
   } catch (error) {
     console.error('Failed to fetch volumes:', error);
@@ -1404,8 +1757,8 @@ app.get('/api/system/volumes', async (req: Request, res: Response) => {
 
 app.get('/api/system/networks', async (req: Request, res: Response) => {
   try {
-    const dockerController = DockerController.getInstance(req.nodeId);
-    const networks = await dockerController.getNetworks();
+    const knownStacks = await FileSystemService.getInstance(req.nodeId).getStacks();
+    const { networks } = await DockerController.getInstance(req.nodeId).getClassifiedResources(knownStacks);
     res.json(networks);
   } catch (error) {
     console.error('Failed to fetch networks:', error);
@@ -1463,6 +1816,11 @@ app.get('/api/templates', async (req: Request, res: Response) => {
   }
 });
 
+app.post('/api/templates/refresh-cache', authMiddleware, (req: Request, res: Response) => {
+  templateService.clearCache();
+  res.json({ success: true });
+});
+
 app.post('/api/templates/deploy', async (req: Request, res: Response) => {
   try {
     const { stackName, template, envVars } = req.body;
@@ -1564,6 +1922,7 @@ app.post('/api/image-updates/refresh', authMiddleware, (_req: Request, res: Resp
 // Node Management API
 // =========================
 
+
 // List all nodes
 app.get('/api/nodes', async (req: Request, res: Response) => {
   try {
@@ -1599,8 +1958,14 @@ app.post('/api/nodes', async (req: Request, res: Response) => {
     if (!type || !['local', 'remote'].includes(type)) {
       return res.status(400).json({ error: 'Node type must be "local" or "remote"' });
     }
-    if (type === 'remote' && (!api_url || typeof api_url !== 'string')) {
-      return res.status(400).json({ error: 'API URL is required for remote nodes' });
+    if (type === 'remote') {
+      if (!api_url || typeof api_url !== 'string') {
+        return res.status(400).json({ error: 'API URL is required for remote nodes' });
+      }
+      const urlCheck = isValidRemoteUrl(api_url);
+      if (!urlCheck.valid) {
+        return res.status(400).json({ error: urlCheck.reason });
+      }
     }
 
     const id = DatabaseService.getInstance().addNode({
@@ -1628,6 +1993,13 @@ app.put('/api/nodes/:id', async (req: Request, res: Response) => {
     const id = parseInt(req.params.id as string);
     const updates = req.body;
 
+    if (updates.api_url !== undefined && updates.api_url !== '') {
+      const urlCheck = isValidRemoteUrl(updates.api_url);
+      if (!urlCheck.valid) {
+        return res.status(400).json({ error: urlCheck.reason });
+      }
+    }
+
     DatabaseService.getInstance().updateNode(id, updates);
 
     // Evict cached Docker connection so it reconnects with new config
@@ -1711,4 +2083,35 @@ async function startServer() {
   });
 }
 
-startServer();
+// Only start the server when this file is the entry point (not when imported by tests).
+if (require.main === module) {
+  startServer();
+}
+
+// Exports used by tests (supertest requires the http.Server instance).
+export { app, server };
+
+// Graceful shutdown — allows in-flight requests to finish, then cleanly stops
+// background services and closes the SQLite connection before the process exits.
+// Docker sends SIGTERM when the container stops; Ctrl-C sends SIGINT in dev.
+const gracefulShutdown = (signal: string) => {
+  console.log(`[Shutdown] ${signal} received — shutting down gracefully…`);
+
+  server.close(() => {
+    console.log('[Shutdown] HTTP server closed');
+    try { MonitorService.getInstance().stop(); } catch { /* already stopped */ }
+    try { ImageUpdateService.getInstance().stop(); } catch { /* already stopped */ }
+    try { DatabaseService.getInstance().getDb().close(); } catch { /* already closed */ }
+    console.log('[Shutdown] Done — exiting');
+    process.exit(0);
+  });
+
+  // Force-exit after 10 s if connections refuse to drain
+  setTimeout(() => {
+    console.error('[Shutdown] Timed out waiting for connections — forcing exit');
+    process.exit(1);
+  }, 10_000).unref();
+};
+
+process.on('SIGTERM', () => gracefulShutdown('SIGTERM'));
+process.on('SIGINT', () => gracefulShutdown('SIGINT'));
diff --git a/backend/src/services/ComposeService.ts b/backend/src/services/ComposeService.ts
index 7cbb2855..76f07ea8 100644
--- a/backend/src/services/ComposeService.ts
+++ b/backend/src/services/ComposeService.ts
@@ -110,7 +110,7 @@ export class ComposeService {
 
         if (exitCode !== 0) {
           const logs = await container.logs({ stdout: true, stderr: true, tail: 50 });
-          let logStr = logs.toString('utf-8');
+          const logStr = logs.toString('utf-8');
           throw new Error(`CONTAINER_CRASHED\nExit Code: ${exitCode}\n${logStr}`);
         }
       }
@@ -157,7 +157,7 @@ export class ComposeService {
 
         let activeProcesses = 0;
         let streamEndedHandled = false;
-        let localProcesses: ReturnType<typeof spawn>[] = [];
+        const localProcesses: ReturnType<typeof spawn>[] = [];
 
         const onWsClose = () => {
           localProcesses.forEach(cp => { try { cp.kill(); } catch { } });
diff --git a/backend/src/services/DatabaseService.ts b/backend/src/services/DatabaseService.ts
index 7125931f..f88c9959 100644
--- a/backend/src/services/DatabaseService.ts
+++ b/backend/src/services/DatabaseService.ts
@@ -136,6 +136,11 @@ export class DatabaseService {
         status TEXT NOT NULL DEFAULT 'unknown',
         created_at INTEGER NOT NULL
       );
+
+      CREATE TABLE IF NOT EXISTS system_state (
+        key TEXT PRIMARY KEY,
+        value TEXT NOT NULL
+      );
     `);
 
         // Apply migrations safely (ignore if columns already exist)
@@ -167,6 +172,8 @@ export class DatabaseService {
         stmt.run('docker_janitor_gb', '5');
         stmt.run('global_logs_refresh', '5');
         stmt.run('developer_mode', '0');
+        stmt.run('metrics_retention_hours', '24');
+        stmt.run('log_retention_days', '30');
 
         // Seed the default local node if none exists
         const nodeCount = (this.db.prepare('SELECT COUNT(*) as count FROM nodes').get() as any)?.count || 0;
@@ -244,6 +251,17 @@ export class DatabaseService {
         stmt.run(key, value);
     }
 
+    // --- System State (operational/runtime values - not user-defined config) ---
+
+    public getSystemState(key: string): string | null {
+        const row = this.db.prepare('SELECT value FROM system_state WHERE key = ?').get(key) as { value: string } | undefined;
+        return row?.value ?? null;
+    }
+
+    public setSystemState(key: string, value: string): void {
+        this.db.prepare('INSERT OR REPLACE INTO system_state (key, value) VALUES (?, ?)').run(key, value);
+    }
+
     // --- Stack Alerts ---
 
     public getStackAlerts(stackName?: string): StackAlert[] {
@@ -292,9 +310,9 @@ export class DatabaseService {
         }));
     }
 
-    public addNotificationHistory(notification: Omit<NotificationHistory, 'id' | 'is_read'>): void {
+    public addNotificationHistory(notification: Omit<NotificationHistory, 'id' | 'is_read'>): NotificationHistory {
         const stmt = this.db.prepare('INSERT INTO notification_history (level, message, timestamp, is_read) VALUES (?, ?, ?, 0)');
-        stmt.run(notification.level, notification.message, notification.timestamp);
+        const result = stmt.run(notification.level, notification.message, notification.timestamp);
 
         this.db.exec(`
       DELETE FROM notification_history
@@ -302,6 +320,14 @@ export class DatabaseService {
         SELECT id FROM notification_history ORDER BY timestamp DESC LIMIT 100
       )
     `);
+
+        return {
+            id: result.lastInsertRowid as number,
+            level: notification.level,
+            message: notification.message,
+            timestamp: notification.timestamp,
+            is_read: false,
+        };
     }
 
     public markAllNotificationsRead(): void {
@@ -353,6 +379,11 @@ export class DatabaseService {
         stmt.run(cutoff);
     }
 
+    public cleanupOldNotifications(daysToKeep = 30): void {
+        const cutoff = Date.now() - (daysToKeep * 24 * 60 * 60 * 1000);
+        this.db.prepare('DELETE FROM notification_history WHERE timestamp < ?').run(cutoff);
+    }
+
     // --- Nodes ---
 
     public getNodes(): Node[] {
diff --git a/backend/src/services/DockerController.ts b/backend/src/services/DockerController.ts
index 6d9467e6..71a0ba94 100644
--- a/backend/src/services/DockerController.ts
+++ b/backend/src/services/DockerController.ts
@@ -11,6 +11,32 @@ import { NodeRegistry } from './NodeRegistry';
 const execAsync = promisify(exec);
 const COMPOSE_DIR = process.env.COMPOSE_DIR || '/app/compose';
 
+export interface ClassifiedImage {
+  Id: string;
+  RepoTags: string[];
+  Size: number;
+  Containers: number;
+  managedBy: string | null;
+  managedStatus: 'managed' | 'unmanaged' | 'unused';
+}
+
+export interface ClassifiedVolume {
+  Name: string;
+  Driver: string;
+  Mountpoint: string;
+  managedBy: string | null;
+  managedStatus: 'managed' | 'unmanaged';
+}
+
+export interface ClassifiedNetwork {
+  Id: string;
+  Name: string;
+  Driver: string;
+  Scope: string;
+  managedBy: string | null;
+  managedStatus: 'managed' | 'unmanaged' | 'system';
+}
+
 class DockerController {
   private docker: Docker;
   private nodeId: number;
@@ -65,7 +91,7 @@ class DockerController {
     const calculateReclaimableVolumes = (items: any[]) => {
       if (!items || !Array.isArray(items)) return 0;
       return items.filter(i => i.UsageData?.RefCount === 0).reduce((acc, item) => {
-        let size = item.UsageData?.Size || 0;
+        const size = item.UsageData?.Size || 0;
         return acc + size;
       }, 0);
     };
@@ -112,6 +138,172 @@ class DockerController {
     return this.validateApiData<any[]>(data);
   }
 
+  public async getClassifiedResources(knownStackNames: string[]): Promise<{
+    images: ClassifiedImage[];
+    volumes: ClassifiedVolume[];
+    networks: ClassifiedNetwork[];
+  }> {
+    const SYSTEM_NETWORKS = new Set(['bridge', 'host', 'none']);
+    const knownSet = new Set(knownStackNames);
+
+    const [rawImages, rawVolumeData, rawNetworks, allContainers] = await Promise.all([
+      this.docker.listImages({ all: false }),
+      this.docker.listVolumes(),
+      this.docker.listNetworks(),
+      this.docker.listContainers({ all: true }),
+    ]);
+
+    const rawVolumes: any[] = (this.validateApiData<any>(rawVolumeData)).Volumes || [];
+
+    // Build imageId → project mapping from container labels
+    const imageToProject = new Map<string, string>();
+    for (const c of allContainers as any[]) {
+      const project: string | undefined = c.Labels?.['com.docker.compose.project'];
+      if (project && c.ImageID) imageToProject.set(c.ImageID, project);
+    }
+
+    const images: ClassifiedImage[] = this.validateApiData<any[]>(rawImages).map((img: any) => {
+      const project = imageToProject.get(img.Id) ?? null;
+      const managedStatus: ClassifiedImage['managedStatus'] =
+        img.Containers === 0 ? 'unused' :
+        project && knownSet.has(project) ? 'managed' : 'unmanaged';
+      return {
+        Id: img.Id,
+        RepoTags: img.RepoTags ?? [],
+        Size: img.Size ?? 0,
+        Containers: img.Containers ?? 0,
+        managedBy: managedStatus === 'managed' ? project : null,
+        managedStatus,
+      };
+    });
+
+    const volumes: ClassifiedVolume[] = rawVolumes.map((vol: any) => {
+      const project: string | undefined = vol.Labels?.['com.docker.compose.project'];
+      const managedStatus: ClassifiedVolume['managedStatus'] =
+        project && knownSet.has(project) ? 'managed' : 'unmanaged';
+      return {
+        Name: vol.Name,
+        Driver: vol.Driver,
+        Mountpoint: vol.Mountpoint,
+        managedBy: managedStatus === 'managed' ? project! : null,
+        managedStatus,
+      };
+    });
+
+    const networks: ClassifiedNetwork[] = this.validateApiData<any[]>(rawNetworks).map((net: any) => {
+      if (SYSTEM_NETWORKS.has(net.Name)) {
+        return { Id: net.Id, Name: net.Name, Driver: net.Driver, Scope: net.Scope, managedBy: null, managedStatus: 'system' as const };
+      }
+      const project: string | undefined = net.Labels?.['com.docker.compose.project'];
+      const managedStatus: ClassifiedNetwork['managedStatus'] =
+        project && knownSet.has(project) ? 'managed' : 'unmanaged';
+      return {
+        Id: net.Id,
+        Name: net.Name,
+        Driver: net.Driver,
+        Scope: net.Scope,
+        managedBy: managedStatus === 'managed' ? project! : null,
+        managedStatus,
+      };
+    });
+
+    return { images, volumes, networks };
+  }
+
+  public async pruneManagedOnly(
+    target: 'images' | 'volumes' | 'networks',
+    knownStackNames: string[]
+  ): Promise<{ success: boolean; reclaimedBytes: number }> {
+    const knownSet = new Set(knownStackNames);
+    let reclaimedBytes = 0;
+
+    if (target === 'volumes') {
+      const rawVolumeData = await this.docker.listVolumes();
+      const rawVolumes: any[] = (this.validateApiData<any>(rawVolumeData)).Volumes || [];
+      const prunable = rawVolumes.filter((v: any) => {
+        const project: string | undefined = v.Labels?.['com.docker.compose.project'];
+        return project && knownSet.has(project) && (v.UsageData?.RefCount ?? 1) === 0;
+      });
+      for (const vol of prunable) {
+        try {
+          await this.docker.getVolume(vol.Name).remove({ force: true });
+          reclaimedBytes += vol.UsageData?.Size ?? 0;
+        } catch (e) {
+          console.error(`[pruneManagedOnly] Failed to remove volume ${vol.Name}:`, e);
+        }
+      }
+    } else if (target === 'networks') {
+      const rawNetworks = await this.docker.listNetworks();
+      const prunable = (rawNetworks as any[]).filter((n: any) => {
+        const project: string | undefined = n.Labels?.['com.docker.compose.project'];
+        return project && knownSet.has(project);
+      });
+      for (const net of prunable) {
+        try {
+          await this.docker.getNetwork(net.Id).remove({ force: true });
+        } catch (e) {
+          console.error(`[pruneManagedOnly] Failed to remove network ${net.Name}:`, e);
+        }
+      }
+    } else if (target === 'images') {
+      const allContainers = await this.docker.listContainers({ all: true });
+      const unmanagedImageIds = new Set<string>();
+      for (const c of allContainers as any[]) {
+        const project: string | undefined = c.Labels?.['com.docker.compose.project'];
+        if (!project || !knownSet.has(project)) unmanagedImageIds.add(c.ImageID);
+      }
+      const rawImages = await this.docker.listImages({ all: false });
+      const prunable = (rawImages as any[]).filter((img: any) =>
+        img.Containers === 0 && !unmanagedImageIds.has(img.Id)
+      );
+      for (const img of prunable) {
+        try {
+          await this.docker.getImage(img.Id).remove({ force: true });
+          reclaimedBytes += img.Size ?? 0;
+        } catch (e) {
+          console.error(`[pruneManagedOnly] Failed to remove image ${img.Id}:`, e);
+        }
+      }
+    }
+
+    return { success: true, reclaimedBytes };
+  }
+
+  public async getDiskUsageClassified(knownStackNames: string[]): Promise<{
+    reclaimableImages: number;
+    reclaimableContainers: number;
+    reclaimableVolumes: number;
+    managedImageBytes: number;
+    unmanagedImageBytes: number;
+    managedVolumeBytes: number;
+    unmanagedVolumeBytes: number;
+  }> {
+    const [base, classified] = await Promise.all([
+      this.getDiskUsage(),
+      this.getClassifiedResources(knownStackNames),
+    ]);
+
+    const managedImageBytes = classified.images
+      .filter(i => i.managedStatus === 'managed')
+      .reduce((acc, i) => acc + i.Size, 0);
+    const unmanagedImageBytes = classified.images
+      .filter(i => i.managedStatus === 'unmanaged')
+      .reduce((acc, i) => acc + i.Size, 0);
+
+    const rawVolumeData = await this.docker.listVolumes();
+    const rawVolumes: any[] = (this.validateApiData<any>(rawVolumeData)).Volumes || [];
+    const knownSet = new Set(knownStackNames);
+
+    const managedVolumeBytes = rawVolumes
+      .filter((v: any) => knownSet.has(v.Labels?.['com.docker.compose.project'] ?? ''))
+      .reduce((acc: number, v: any) => acc + (v.UsageData?.Size ?? 0), 0);
+    const unmanagedVolumeBytes = rawVolumes
+      .filter((v: any) => !knownSet.has(v.Labels?.['com.docker.compose.project'] ?? ''))
+      .reduce((acc: number, v: any) => acc + (v.UsageData?.Size ?? 0), 0);
+
+    return { ...base, managedImageBytes, unmanagedImageBytes, managedVolumeBytes, unmanagedVolumeBytes };
+  }
+
   public async removeImage(id: string) {
     const image = this.docker.getImage(id);
     await image.remove({ force: true });
@@ -425,15 +617,27 @@ class DockerController {
     const stats = await container.stats({ stream: true });
 
     stats.on('data', (chunk: Buffer) => {
-      ws.send(chunk.toString());
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(chunk.toString());
+      }
     });
 
     stats.on('error', (err: Error) => {
-      ws.send(JSON.stringify({ error: err.message }));
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ error: err.message }));
+      }
     });
 
     stats.on('end', () => {
-      ws.send(JSON.stringify({ end: true }));
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ end: true }));
+      }
+    });
+
+    // Destroy the Docker stats stream when the WebSocket closes to prevent
+    // orphaned streams polling the daemon after client disconnect.
+    ws.on('close', () => {
+      try { (stats as any).destroy(); } catch { /* stream already ended */ }
     });
   }
 
@@ -539,7 +743,7 @@ class DockerController {
   }
 }
 
-export let globalDockerNetwork = { rxSec: 0, txSec: 0 };
+export const globalDockerNetwork = { rxSec: 0, txSec: 0 };
 let lastNetSum = { rx: 0, tx: 0, timestamp: Date.now() };
 
 export const updateGlobalDockerNetwork = async () => {
diff --git a/backend/src/services/FileSystemService.ts b/backend/src/services/FileSystemService.ts
index 91e06bca..54889602 100644
--- a/backend/src/services/FileSystemService.ts
+++ b/backend/src/services/FileSystemService.ts
@@ -1,5 +1,4 @@
 import path from 'path';
-import fs from 'fs';
 import { promises as fsPromises } from 'fs';
 import { NodeRegistry } from './NodeRegistry';
 
diff --git a/backend/src/services/HostTerminalService.ts b/backend/src/services/HostTerminalService.ts
index ce38cbfe..98436682 100644
--- a/backend/src/services/HostTerminalService.ts
+++ b/backend/src/services/HostTerminalService.ts
@@ -16,12 +16,19 @@ export class HostTerminalService {
     static spawnTerminal(ws: WebSocket, targetDirectory: string) {
         const shell = os.platform() === 'win32' ? 'powershell.exe' : getUnixShell();
 
+        // Strip sensitive backend secrets from the PTY environment so they are not
+        // visible to the console user via `env` / `printenv`.
+        const SENSITIVE_KEYS = ['JWT_SECRET', 'AUTH_PASSWORD', 'AUTH_PASSWORD_HASH', 'DATABASE_URL'];
+        const safeEnv = Object.fromEntries(
+            Object.entries(process.env as Record<string, string>).filter(([k]) => !SENSITIVE_KEYS.includes(k))
+        );
+
         const ptyProcess = pty.spawn(shell, [], {
             name: 'xterm-color',
             cols: 80,
             rows: 30,
             cwd: targetDirectory,
-            env: process.env as Record<string, string>,
+            env: safeEnv,
         });
 
         ptyProcess.onData((data) => {
diff --git a/backend/src/services/ImageUpdateService.ts b/backend/src/services/ImageUpdateService.ts
index 06df6d33..8c663f74 100644
--- a/backend/src/services/ImageUpdateService.ts
+++ b/backend/src/services/ImageUpdateService.ts
@@ -109,7 +109,7 @@ async function getAuthToken(registry: string, repo: string): Promise<string | nu
 // ─── Remote digest lookup ─────────────────────────────────────────────────────
 
 // Include manifest list types so we get the fat-manifest digest for multi-arch
-// images — this matches what Docker stores in local RepoDigests.
+// images - this matches what Docker stores in local RepoDigests.
 const MANIFEST_ACCEPT = [
     'application/vnd.docker.distribution.manifest.list.v2+json',
     'application/vnd.docker.distribution.manifest.v2+json',
@@ -145,7 +145,7 @@ export class ImageUpdateService {
     private static readonly MANUAL_COOLDOWN_MS = 10 * 60 * 1000; // 10 min between manual triggers
     private static readonly INTER_IMAGE_DELAY_MS = 300;           // be polite to registries
 
-    private constructor() {}
+    private constructor() { }
 
     public static getInstance(): ImageUpdateService {
         if (!ImageUpdateService.instance) {
@@ -195,7 +195,7 @@ export class ImageUpdateService {
 
         try {
             const db = DatabaseService.getInstance();
-            // Only check local nodes — remote nodes run their own instance
+            // Only check local nodes - remote nodes run their own instance
             for (const node of db.getNodes()) {
                 if (node.type !== 'local' || !node.id) continue;
                 try {
@@ -282,7 +282,7 @@ export class ImageUpdateService {
         if (!localDigest) return false; // Locally built or never pulled with a digest
 
         const remoteDigest = await getRemoteDigest(parsed.registry, parsed.repo, parsed.tag);
-        if (!remoteDigest) return false; // Registry unreachable — no false positives
+        if (!remoteDigest) return false; // Registry unreachable - no false positives
 
         const hasUpdate = localDigest !== remoteDigest;
         console.log(
diff --git a/backend/src/services/LogFormatter.ts b/backend/src/services/LogFormatter.ts
index c582b304..dd78464a 100644
--- a/backend/src/services/LogFormatter.ts
+++ b/backend/src/services/LogFormatter.ts
@@ -51,7 +51,7 @@ export class LogFormatter {
         // Fast JSON Check (Starts with { and ends with })
         if (trimmedLine.startsWith('{') && trimmedLine.endsWith('}')) {
             try {
-                const parsed = JSON.parse(trimmedLine);
+                JSON.parse(trimmedLine);
                 // If valid, lightly highlight it (e.g., colorize string representation slightly)
                 // We re-stringify it to ensure it's on one line, but maybe just highlight properties
                 processedLine = LogFormatter.highlightJson(trimmedLine);
diff --git a/backend/src/services/MonitorService.ts b/backend/src/services/MonitorService.ts
index 3881a2c5..81865318 100644
--- a/backend/src/services/MonitorService.ts
+++ b/backend/src/services/MonitorService.ts
@@ -164,7 +164,7 @@ export class MonitorService {
                     try {
                         const parsed = JSON.parse(line);
                         // RECLAIMABLE might be something like "1.2GB" or "400MB" Let's parse it manually or just use raw sizes from docker api. Actually docker system df JSON format gives Reclaimable field as string e.g. "1.196GB" (or "0B").
-                        let reclaimStr = parsed.Reclaimable;
+                        const reclaimStr = parsed.Reclaimable;
                         if (reclaimStr) {
                             // Extract the number and the unit. e.g "1.196GB" (92%) -> 1.196
                             const match = reclaimStr.match(/^([0-9.]+)([a-zA-Z]+)/);
@@ -187,13 +187,14 @@ export class MonitorService {
                 // Only trigger once every while? To avoid spamming, we just check if it's over limit
                 // Let's ensure we only spam once per limit breach. We can use a local static variable.
                 const LAST_JANITOR_ALERT_KEY = 'last_janitor_alert_timestamp';
-                const lastAlert = parseInt(settings[LAST_JANITOR_ALERT_KEY] || '0', 10);
+                const lastAlertRaw = DatabaseService.getInstance().getSystemState(LAST_JANITOR_ALERT_KEY);
+                const lastAlert = parseInt(lastAlertRaw || '0', 10);
                 const janitorCooldown = 24 * 60 * 60 * 1000; // 24 hours cooldown for janitor
 
                 if (reclaimGb >= janitorLimitGb) {
                     if (Date.now() - lastAlert > janitorCooldown) {
                         await notifier.dispatchAlert('info', `Your system has accumulated ${reclaimGb.toFixed(1)} GB of unused Docker data. Consider using the Janitor tool.`);
-                        DatabaseService.getInstance().updateGlobalSetting(LAST_JANITOR_ALERT_KEY, Date.now().toString());
+                        DatabaseService.getInstance().setSystemState(LAST_JANITOR_ALERT_KEY, Date.now().toString());
                     }
                 }
             }
@@ -298,8 +299,14 @@ export class MonitorService {
         }
 
         try {
-            db.cleanupOldMetrics(24);
-        } catch (e) { }
+            const settings = db.getGlobalSettings();
+            const retentionHours = parseInt(settings['metrics_retention_hours'] || '24', 10);
+            db.cleanupOldMetrics(isNaN(retentionHours) ? 24 : retentionHours);
+            const retentionDays = parseInt(settings['log_retention_days'] || '30', 10);
+            db.cleanupOldNotifications(isNaN(retentionDays) ? 30 : retentionDays);
+        } catch (e) {
+            console.error('MonitorService: failed to cleanup old data', e);
+        }
     }
 
     private evaluateCondition(actual: number, operator: string, threshold: number): boolean {
diff --git a/backend/src/services/NodeRegistry.ts b/backend/src/services/NodeRegistry.ts
index 940f3714..bb72ae71 100644
--- a/backend/src/services/NodeRegistry.ts
+++ b/backend/src/services/NodeRegistry.ts
@@ -157,14 +157,14 @@ export class NodeRegistry {
         const headers = { Authorization: `Bearer ${node.api_token}` };
 
         try {
-            // Step 1: Verify auth. A 401 here means wrong token — surface that clearly.
+            // Step 1: Verify auth. A 401 here means wrong token - surface that clearly.
             const authRes = await axios.get(`${baseUrl}/api/auth/check`, { headers, timeout: 8000 });
             if (authRes.status !== 200) throw new Error(`Unexpected status ${authRes.status}`);
 
             db.updateNodeStatus(node.id, 'online');
 
             // Step 2: Fetch Docker stats in parallel. Use allSettled so a slow or missing
-            // endpoint doesn't fail the whole test — each field falls back to '-' gracefully.
+            // endpoint doesn't fail the whole test - each field falls back to '-' gracefully.
             const [statsResult, sysResult, imagesResult] = await Promise.allSettled([
                 axios.get(`${baseUrl}/api/stats`, { headers, timeout: 8000 }),
                 axios.get(`${baseUrl}/api/system/stats`, { headers, timeout: 8000 }),
diff --git a/backend/src/services/NotificationService.ts b/backend/src/services/NotificationService.ts
index ebcf0033..47b64d74 100644
--- a/backend/src/services/NotificationService.ts
+++ b/backend/src/services/NotificationService.ts
@@ -1,8 +1,9 @@
-import { DatabaseService } from './DatabaseService';
+import { DatabaseService, NotificationHistory } from './DatabaseService';
 
 export class NotificationService {
     private static instance: NotificationService;
     private dbService: DatabaseService;
+    private broadcaster: ((notification: NotificationHistory) => void) | null = null;
 
     private constructor() {
         this.dbService = DatabaseService.getInstance();
@@ -15,15 +16,25 @@ export class NotificationService {
         return NotificationService.instance;
     }
 
+    /** Wire up the WebSocket push function after the WS server is initialised. */
+    public setBroadcaster(fn: (notification: NotificationHistory) => void): void {
+        this.broadcaster = fn;
+    }
+
     public async dispatchAlert(level: 'info' | 'warning' | 'error', message: string) {
-        // 1. Log to history
-        this.dbService.addNotificationHistory({
+        // 1. Log to history and get the full inserted record (with id)
+        const notification = this.dbService.addNotificationHistory({
             level,
             message,
             timestamp: Date.now()
         });
 
-        // 2. Fetch enabled agents
+        // 2. Push to connected browser clients via WebSocket
+        if (this.broadcaster) {
+            this.broadcaster(notification);
+        }
+
+        // 3. Fetch enabled agents
         const agents = this.dbService.getEnabledAgents();
         if (agents.length === 0) {
             console.log('No active notification agents found. Skipping external dispatch.');
diff --git a/backend/src/services/TemplateService.ts b/backend/src/services/TemplateService.ts
index fd23c86c..5ad947ea 100644
--- a/backend/src/services/TemplateService.ts
+++ b/backend/src/services/TemplateService.ts
@@ -29,6 +29,7 @@ export interface Template {
     docs_url?: string;
     architectures?: string[];
     stars?: number;
+    source?: string;
     repository?: {
         url: string;
         stackfile: string;
@@ -40,11 +41,165 @@ export interface TemplatesResponse {
     templates: Template[];
 }
 
+// Static category map for LSIO apps (the LSIO API does not expose category metadata).
+// Apps can belong to multiple categories. Unmapped apps fall back to ['Other'].
+const LSIO_CATEGORY_MAP: Record<string, string[]> = {
+    // Media Servers
+    'plex': ['Media'],
+    'jellyfin': ['Media'],
+    'emby': ['Media'],
+    'navidrome': ['Media'],
+    'airsonic-advanced': ['Media'],
+    'airsonic': ['Media'],
+    'beets': ['Media'],
+    'calibre': ['Media', 'Books'],
+    'calibre-web': ['Media', 'Books'],
+    'kavita': ['Media', 'Books'],
+    'komga': ['Media', 'Books'],
+    'mylar3': ['Media', 'Books'],
+    'ubooquity': ['Media', 'Books'],
+    'lazylibrarian': ['Media', 'Books'],
+    'cops': ['Media', 'Books'],
+    'photoprism': ['Media', 'Productivity'],
+    'immich': ['Media', 'Productivity'],
+    'piwigo': ['Media'],
+    'lychee': ['Media'],
+    'davos': ['Media'],
+    'mstream': ['Media'],
+    'koel': ['Media'],
+    'grocy': ['Productivity'],
+    // *arr Automation suite
+    'sonarr': ['Automation', 'Media'],
+    'radarr': ['Automation', 'Media'],
+    'lidarr': ['Automation', 'Media'],
+    'readarr': ['Automation', 'Media'],
+    'bazarr': ['Automation', 'Media'],
+    'whisparr': ['Automation', 'Media'],
+    'prowlarr': ['Automation'],
+    'jackett': ['Automation'],
+    'nzbhydra2': ['Automation'],
+    'overseerr': ['Automation', 'Media'],
+    'ombi': ['Automation', 'Media'],
+    'requestrr': ['Automation'],
+    'tautulli': ['Monitoring', 'Media'],
+    'organizr': ['Automation'],
+    'recyclarr': ['Automation'],
+    'notifiarr': ['Automation'],
+    'unpackerr': ['Automation'],
+    // Dashboards / Homepages
+    'heimdall': ['Utilities'],
+    'homer': ['Utilities'],
+    'dasherr': ['Utilities'],
+    'flame': ['Utilities'],
+    'homarr': ['Utilities'],
+    'dashdot': ['Monitoring'],
+    // Downloaders
+    'qbittorrent': ['Downloaders'],
+    'transmission': ['Downloaders'],
+    'deluge': ['Downloaders'],
+    'sabnzbd': ['Downloaders'],
+    'nzbget': ['Downloaders'],
+    'aria2': ['Downloaders'],
+    'jdownloader-2': ['Downloaders'],
+    'pyload-ng': ['Downloaders'],
+    'rutorrent': ['Downloaders'],
+    'flood': ['Downloaders'],
+    'medusa': ['Automation', 'Downloaders'],
+    'sickchill': ['Automation', 'Downloaders'],
+    // Monitoring
+    'grafana': ['Monitoring'],
+    'netdata': ['Monitoring'],
+    'uptime-kuma': ['Monitoring'],
+    'statping-ng': ['Monitoring'],
+    'healthchecks': ['Monitoring'],
+    'smokeping': ['Monitoring'],
+    'librespeed': ['Monitoring'],
+    'speedtest-tracker': ['Monitoring'],
+    'scrutiny': ['Monitoring'],
+    'prometheus': ['Monitoring'],
+    'loki': ['Monitoring'],
+    'influxdb': ['Monitoring'],
+    // Networking / Reverse Proxy
+    'nginx': ['Networking'],
+    'swag': ['Networking'],
+    'letsencrypt': ['Networking'],
+    'ddclient': ['Networking'],
+    'duckdns': ['Networking'],
+    'wireguard': ['Networking', 'Security'],
+    'openvpn-as': ['Networking', 'Security'],
+    'netbootxyz': ['Networking'],
+    'pihole': ['Networking'],
+    'unbound': ['Networking'],
+    'adguardhome': ['Networking'],
+    'cloudflared': ['Networking'],
+    'haproxy': ['Networking'],
+    'traefik': ['Networking'],
+    'nginx-proxy-manager': ['Networking'],
+    'fail2ban': ['Networking', 'Security'],
+    // Security / Auth
+    'vaultwarden': ['Security'],
+    'authelia': ['Security'],
+    'lldap': ['Security'],
+    'endlessh': ['Security'],
+    'sshwifty': ['Security'],
+    // Development / CI
+    'gitea': ['Development'],
+    'code-server': ['Development'],
+    'drone': ['Development'],
+    'drone-runner-docker': ['Development'],
+    'registry': ['Development'],
+    'jenkins': ['Development'],
+    'gogs': ['Development'],
+    'woodpecker-ci': ['Development'],
+    'gitlab': ['Development'],
+    'fleet': ['Development'],
+    // Productivity / Self-hosted SaaS
+    'nextcloud': ['Productivity'],
+    'bookstack': ['Productivity', 'Documentation'],
+    'dokuwiki': ['Productivity', 'Documentation'],
+    'wikijs': ['Productivity', 'Documentation'],
+    'paperless-ngx': ['Productivity'],
+    'mealie': ['Productivity'],
+    'freshrss': ['Productivity'],
+    'miniflux': ['Productivity'],
+    'wallabag': ['Productivity'],
+    'trilium': ['Productivity'],
+    'hedgedoc': ['Productivity'],
+    'etherpad': ['Productivity'],
+    'monica': ['Productivity'],
+    'firefly-iii': ['Productivity'],
+    'shlink': ['Productivity'],
+    'yourls': ['Productivity'],
+    'stirling-pdf': ['Productivity'],
+    'syncthing': ['Productivity'],
+    'tandoor': ['Productivity'],
+    'linkwarden': ['Productivity'],
+    'vikunja': ['Productivity'],
+    // Utilities / Backup
+    'duplicati': ['Utilities'],
+    'restic': ['Utilities'],
+    'rsnapshot': ['Utilities'],
+    'mysql-workbench': ['Utilities'],
+    'sqlitebrowser': ['Utilities'],
+    'filezilla': ['Utilities'],
+    'rdesktop': ['Utilities'],
+    'webtop': ['Utilities'],
+};
+
+function getCategoriesForApp(name: string): string[] {
+    return LSIO_CATEGORY_MAP[name.toLowerCase()] ?? ['Other'];
+}
+
 export class TemplateService {
     private cachedTemplates: Template[] = [];
     private lastFetchTime: number = 0;
     private readonly CACHE_DURATION_MS = 24 * 60 * 60 * 1000; // 24 hours
 
+    public clearCache(): void {
+        this.cachedTemplates = [];
+        this.lastFetchTime = 0;
+    }
+
     public async getTemplates(): Promise<Template[]> {
         const now = Date.now();
         if (this.cachedTemplates.length > 0 && now - this.lastFetchTime < this.CACHE_DURATION_MS) {
@@ -73,6 +228,8 @@ export class TemplateService {
                         docs_url: app.readme,
                         architectures: app.arch,
                         stars: app.stars,
+                        categories: getCategoriesForApp(app.name),
+                        source: 'linuxserver',
                         // Map configs if available, otherwise default to empty arrays
                         ports: (app.config?.ports || []).map((p: any) => `${p.external || p.internal}:${p.internal}/${p.protocol || 'tcp'}`),
                         volumes: (app.config?.volumes || []).map((v: any) => {
@@ -91,7 +248,10 @@ export class TemplateService {
                 });
             } else {
                 // Legacy Portainer v2 Format (Fallback for custom registries)
-                this.cachedTemplates = (response.data.templates || []).filter((t: Template) => !!t.image && t.type === 1);
+                // The Portainer v2 spec includes a native `categories` field - pass it through.
+                this.cachedTemplates = (response.data.templates || [])
+                    .filter((t: Template) => !!t.image && t.type === 1)
+                    .map((t: Template) => ({ ...t, source: 'custom' }));
             }
 
             this.lastFetchTime = now;
diff --git a/backend/src/utils/validation.ts b/backend/src/utils/validation.ts
new file mode 100644
index 00000000..c8974ff4
--- /dev/null
+++ b/backend/src/utils/validation.ts
@@ -0,0 +1,52 @@
+import path from 'path';
+
+/**
+ * Stack name must only contain URL-safe characters with no path separators.
+ * Prevents path-traversal attacks when the name is used to build filesystem paths.
+ */
+export const isValidStackName = (name: string): boolean =>
+  /^[a-zA-Z0-9_-]+$/.test(name);
+
+/**
+ * Validates that a remote node API URL is a safe, well-formed HTTP/HTTPS URL.
+ * Rejects loopback addresses to prevent SSRF against local services.
+ * Private/LAN IPs are allowed — users legitimately point Sencho at nodes on their LAN.
+ */
+export function isValidRemoteUrl(
+  raw: string,
+): { valid: true; url: URL } | { valid: false; reason: string } {
+  let url: URL;
+  try {
+    url = new URL(raw);
+  } catch {
+    return {
+      valid: false,
+      reason: 'API URL must be a valid URL (e.g. https://my-server.example.com:3000)',
+    };
+  }
+  if (!['http:', 'https:'].includes(url.protocol)) {
+    return { valid: false, reason: 'API URL must use http:// or https://' };
+  }
+  // Node.js URL API preserves brackets for IPv6: new URL('http://[::1]').hostname === '[::1]'
+  const loopback = /^(localhost|127(\.\d+){3}|\[::1\]|0\.0\.0\.0)$/i;
+  if (loopback.test(url.hostname)) {
+    return {
+      valid: false,
+      reason: 'API URL cannot point to localhost or loopback — use the actual host address',
+    };
+  }
+  return { valid: true, url };
+}
+
+/**
+ * Asserts that a resolved file path stays within a given base directory.
+ * Returns true if the path is safe, false if it escapes the base.
+ */
+export function isPathWithinBase(resolvedPath: string, baseDir: string): boolean {
+  const normalizedBase = path.resolve(baseDir);
+  const normalizedPath = path.resolve(resolvedPath);
+  return (
+    normalizedPath === normalizedBase ||
+    normalizedPath.startsWith(normalizedBase + path.sep)
+  );
+}
diff --git a/backend/vitest.config.ts b/backend/vitest.config.ts
new file mode 100644
index 00000000..a782440b
--- /dev/null
+++ b/backend/vitest.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    // Only run TypeScript sources — exclude the compiled dist/ output.
+    include: ['src/__tests__/**/*.test.ts'],
+    exclude: ['dist/**', 'node_modules/**'],
+    // Each test file gets its own worker so singletons are fresh between files.
+    pool: 'forks',
+    // Timeout generous for DB init and HTTP calls.
+    testTimeout: 15_000,
+    // Sequential within each file (DB state is shared per file).
+    sequence: { concurrent: false },
+  },
+});
diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh
new file mode 100644
index 00000000..5026a8bd
--- /dev/null
+++ b/docker-entrypoint.sh
@@ -0,0 +1,63 @@
+#!/bin/sh
+set -e
+
+# Resolve the data directory, mirroring DatabaseService.ts logic.
+DATA_DIR="${DATA_DIR:-/app/data}"
+
+# If running as root (the default Docker container start), fix volume ownership,
+# fix Docker socket group access, then drop privileges before executing the app.
+#
+# This is the industry-standard pattern used by the official PostgreSQL, Redis,
+# and MariaDB Docker images, and by Docker management tools like Portainer and
+# Dockge that also require access to /var/run/docker.sock as a non-root user.
+#
+# The UID guard also ensures compatibility with strict environments like
+# Kubernetes (runAsNonRoot: true) or OpenShift, where the container is forced to
+# run as a random high UID. In that case both blocks are skipped and the app
+# exec's directly without crashing.
+if [ "$(id -u)" = '0' ]; then
+
+    # 1. Fix data volume ownership.
+    # Handles host volumes previously created by root or a different UID, which
+    # would cause SQLITE_READONLY errors when the non-root sencho user starts.
+    # Only touches files with wrong user OR group (efficient on large dirs).
+    mkdir -p "$DATA_DIR"
+    find "$DATA_DIR" \( \! -user sencho -o \! -group sencho \) \
+        -exec chown sencho:sencho '{}' +
+    echo "[entrypoint] Data directory ownership ensured: $DATA_DIR"
+
+    # 2. Fix Docker socket group access.
+    # The Docker socket on the host is owned by the host's docker group, whose
+    # GID varies by Linux distribution and does not match any group inside the
+    # container by default.
+    if [ -S /var/run/docker.sock ]; then
+        DOCKER_SOCK_GID=$(stat -c '%g' /var/run/docker.sock)
+        DOCKER_SOCK_MODE=$(stat -c '%a' /var/run/docker.sock)
+        echo "[entrypoint] Docker socket found: GID=$DOCKER_SOCK_GID mode=$DOCKER_SOCK_MODE"
+
+        if [ "$DOCKER_SOCK_GID" = "0" ]; then
+            echo "[entrypoint] WARNING: Docker socket is root:root -- adding sencho to root group"
+            addgroup sencho root 2>/dev/null || true
+        else
+            if ! getent group "$DOCKER_SOCK_GID" > /dev/null 2>&1; then
+                addgroup -S -g "$DOCKER_SOCK_GID" docker-host
+                echo "[entrypoint] Created group docker-host with GID $DOCKER_SOCK_GID"
+            fi
+            DOCKER_GROUP=$(getent group "$DOCKER_SOCK_GID" | cut -d: -f1)
+            addgroup sencho "$DOCKER_GROUP" 2>/dev/null || true
+            echo "[entrypoint] Added sencho to group '$DOCKER_GROUP' (GID $DOCKER_SOCK_GID)"
+        fi
+    else
+        echo "[entrypoint] WARNING: /var/run/docker.sock not found -- Docker features unavailable"
+    fi
+
+    echo "[entrypoint] Dropping privileges to sencho (uid=$(id -u sencho))"
+
+    # 3. Drop privileges.
+    # Replace this shell with su-exec so Node becomes PID 1 and receives
+    # SIGTERM/SIGINT directly. su-exec calls getgrouplist() for named users,
+    # so all supplementary groups added above are inherited by the process.
+    exec su-exec sencho "$@"
+fi
+
+exec "$@"
diff --git a/docs/docs.json b/docs/docs.json
new file mode 100644
index 00000000..230e9e4e
--- /dev/null
+++ b/docs/docs.json
@@ -0,0 +1,56 @@
+{
+  "$schema": "https://mintlify.com/docs.json",
+  "theme": "mint",
+  "name": "Sencho",
+  "colors": {
+    "primary": "#0F172A",
+    "light": "#3B82F6",
+    "dark": "#0F172A"
+  },
+  "logo": {
+    "light": "/images/logo/logo-light.svg",
+    "dark": "/images/logo/logo-dark.svg",
+    "href": "/"
+  },
+  "favicon": "/images/logo/favicon.ico",
+  "navigation": {
+    "groups": [
+      {
+        "group": "Getting Started",
+        "pages": [
+          "getting-started/introduction",
+          "getting-started/quickstart",
+          "getting-started/configuration"
+        ]
+      },
+      {
+        "group": "Features",
+        "pages": [
+          "features/overview",
+          "features/dashboard",
+          "features/stack-management",
+          "features/editor",
+          "features/resources",
+          "features/app-store",
+          "features/global-observability",
+          "features/host-console",
+          "features/multi-node",
+          "features/alerts-notifications"
+        ]
+      },
+      {
+        "group": "Reference",
+        "pages": [
+          "reference/settings"
+        ]
+      },
+      {
+        "group": "Operations",
+        "pages": [
+          "operations/troubleshooting",
+          "operations/backup"
+        ]
+      }
+    ]
+  }
+}
diff --git a/docs/features/alerts-notifications.mdx b/docs/features/alerts-notifications.mdx
new file mode 100644
index 00000000..b1900516
--- /dev/null
+++ b/docs/features/alerts-notifications.mdx
@@ -0,0 +1,95 @@
+---
+title: Alerts & Notifications
+description: Set threshold-based alerts on container metrics and route them to Discord, Slack, or any webhook.
+---
+
+Sencho can watch your containers for resource anomalies and notify you when thresholds are breached. Alerts are defined per stack, and notifications are delivered through external agents you configure.
+
+<Frame>
+  <img src="/images/alerts-notifications/notifications-settings.png" alt="Notifications & Alerts settings showing Discord, Slack, and Webhook tabs" />
+</Frame>
+
+## How alerts work
+
+Sencho's monitoring service samples container metrics every minute and evaluates all defined alert rules. When a rule's condition holds true for the configured duration, a notification is dispatched. A cooldown period prevents the same alert from firing repeatedly.
+
+## Setting up a notification agent
+
+At least one agent must be enabled before alerts can be delivered. Go to **Settings → Notifications**.
+
+### Discord
+
+1. In Discord, go to your server's **Settings → Integrations → Webhooks**
+2. Click **New Webhook**, choose a channel, and copy the webhook URL
+3. In Sencho, open **Settings → Notifications → Discord**, paste the URL, enable the toggle, and click **Save**
+4. Click **Test** to send a test message
+
+### Slack
+
+1. In Slack, go to **api.slack.com/apps**, create an app, and add the **Incoming Webhooks** feature
+2. Activate it and copy the generated webhook URL for your chosen channel
+3. In Sencho, open **Settings → Notifications → Slack**, paste the URL, enable the toggle, and click **Save**
+
+### Generic Webhook
+
+Any HTTP endpoint that accepts a POST with a JSON body can receive Sencho alerts. Go to **Settings → Notifications → Webhook**, enter the URL, and click **Save**.
+
+The payload format is:
+```json
+{
+  "level": "warning",
+  "message": "cpu_percent exceeded 90% for 5 minutes on stack my-app",
+  "timestamp": "2026-03-22T10:00:00.000Z"
+}
+```
+
+## Creating stack alerts
+
+Stack alerts are configured per-stack. Right-click a stack in the sidebar (or click the **⋮** button) and select **Alerts**.
+
+<Frame>
+  <img src="/images/stack-management/stack-context-menu.png" alt="Stack context menu showing the Alerts option" />
+</Frame>
+
+The alerts sheet shows existing rules for the stack and a form to create new ones.
+
+### Alert fields
+
+| Field | Description |
+|-------|-------------|
+| **Metric** | The container metric to watch |
+| **Operator** | Comparison operator: `>`, `>=`, `<`, `<=`, `==` |
+| **Threshold** | The value to compare against |
+| **Duration (minutes)** | How long the condition must hold before firing |
+| **Cooldown (minutes)** | Minimum time between repeated notifications for this rule |
+
+### Available metrics
+
+| Metric | Unit | Description |
+|--------|------|-------------|
+| `cpu_percent` | % | CPU usage relative to total host cores |
+| `memory_mb` | MB | RSS memory used by the container |
+| `memory_percent` | % | Memory used as a fraction of the host total |
+| `net_rx` | bytes/s | Inbound network rate |
+| `net_tx` | bytes/s | Outbound network rate |
+| `restart_count` | count | Number of times the container has restarted |
+
+### Example: alert on high CPU
+
+To alert when any container in a stack uses more than 80% CPU for over 5 consecutive minutes, with a 30-minute cooldown:
+
+| Field | Value |
+|-------|-------|
+| Metric | `cpu_percent` |
+| Operator | `>` |
+| Threshold | `80` |
+| Duration | `5` |
+| Cooldown | `30` |
+
+## Notification history
+
+All dispatched notifications appear in the **notification bell** (top-right of the nav bar). Click it to see recent alerts with their level, message, and timestamp. Mark all as read or clear individual entries from there.
+
+<Note>
+  Notifications only reach external agents (Discord, Slack, Webhook) if at least one agent is enabled. Dashboard notifications appear regardless.
+</Note>
diff --git a/docs/features/app-store.mdx b/docs/features/app-store.mdx
new file mode 100644
index 00000000..ebb90546
--- /dev/null
+++ b/docs/features/app-store.mdx
@@ -0,0 +1,71 @@
+---
+title: App Store
+description: Browse and deploy pre-configured application templates in one click.
+---
+
+The **App Store** tab lets you browse a curated catalogue of Docker Compose templates and deploy any of them as a new stack with environment-specific configuration — no YAML required.
+
+<Frame>
+  <img src="/images/app-store/app-store-overview.png" alt="App Store showing a grid of application templates with category filters" />
+</Frame>
+
+## Browsing templates
+
+Templates are loaded from a remote registry (configurable in **Settings → App Store**). The default registry provides 190+ self-hosted application templates.
+
+**Search:** Type in the search bar to filter templates by name or description in real-time.
+
+**Categories:** Click any category pill to narrow the list:
+`Automation` · `Books` · `Development` · `Documentation` · `Downloaders` · `Media` · `Monitoring` · `Networking` · `Other` · `Product`
+
+Each template card shows:
+- Application logo
+- Name and short description
+- Category tags
+- Links to the GitHub repo and documentation (where available)
+
+## Deploying a template
+
+Click any template card to open the **deployment sheet** on the right side of the screen. Fill in the fields and click **Deploy**.
+
+### Stack name
+
+Pre-filled with the template name in lowercase. You can change it — the same [naming rules](/features/stack-management#creating-a-stack) apply (lowercase, hyphens, no spaces).
+
+### Environment variables
+
+Each template declares the variables it needs. Sencho pre-fills sensible defaults where available (e.g. `PUID=1000`, `PGID=1000`, `TZ` from your browser locale).
+
+Edit any value before deploying. You can also click **Custom Env** to add arbitrary key-value pairs not defined by the template.
+
+### Volumes
+
+For each container mount point, enter the **host path** where that data should be stored. Suggested defaults (e.g. `./config`, `./data`) are shown as placeholders.
+
+<Note>
+  Relative paths like `./config` are resolved relative to the stack directory inside your `COMPOSE_DIR`. Absolute paths map directly to the host filesystem.
+</Note>
+
+### Ports
+
+For each exposed port, edit the **host port** (left side). The container port (right side) is fixed by the template and cannot be changed here — edit the compose file after deployment if needed.
+
+### What happens on Deploy
+
+1. Sencho creates a new stack directory in `COMPOSE_DIR`
+2. Writes the generated `compose.yaml` and `.env` file
+3. Runs `docker compose up -d`
+4. On success: switches you to the Editor view for that stack
+5. On failure: rolls back by running `docker compose down` and deleting the stack directory
+
+A toast notification confirms success or shows the error message.
+
+## Custom template registry
+
+By default Sencho uses the LinuxServer.io template registry. To use your own:
+
+1. Open **Settings → App Store**
+2. Enter your registry URL (must serve a JSON array of template objects in Portainer v2 format)
+3. Click **Save**
+
+To force a refresh of the cached templates, click **Refresh Cache** in the same settings panel.
diff --git a/docs/features/dashboard.mdx b/docs/features/dashboard.mdx
new file mode 100644
index 00000000..2869e351
--- /dev/null
+++ b/docs/features/dashboard.mdx
@@ -0,0 +1,60 @@
+---
+title: Dashboard
+description: Real-time system stats, historical metrics, and a quick-start converter for your host machine.
+---
+
+The **Home** tab is the first thing you see after logging in. It shows a live snapshot of your host's health alongside container activity across all stacks.
+
+<Frame>
+  <img src="/images/dashboard/dashboard-overview.png" alt="Sencho dashboard showing container stats, system stats, and historical charts" />
+</Frame>
+
+## Container stats
+
+The top row summarises container state at a glance:
+
+| Card | What it shows |
+|------|---------------|
+| **Active Containers** | Running containers — broken down as `N managed · N external` |
+| **Exited Containers** | Stopped or crashed containers |
+| **Docker Network** | Current inbound/outbound network throughput across all containers |
+
+**Managed** means the container belongs to a stack in your `COMPOSE_DIR`. **External** means it exists on the Docker host but was started outside Sencho (e.g. by another Compose project or `docker run`).
+
+## System stats
+
+The second row shows host-level resource usage, polled every few seconds:
+
+| Card | What it shows |
+|------|---------------|
+| **Host CPU** | Current CPU usage percentage and core count |
+| **Host RAM** | Used / total memory in GB and percentage |
+| **Host Disk** | Used / total disk space for the primary mount point |
+
+When any value exceeds configured thresholds (set in **Settings → System Limits**), the card changes colour as a visual warning.
+
+## Historical metrics charts
+
+Two area charts display time-series data sampled at one-minute intervals, retained for up to 24 hours (configurable in **Settings → Developer**):
+
+- **Normalized CPU Usage** — total CPU percentage across all managed containers, normalised over all host cores
+- **Normalized RAM Usage** — total memory allocated by managed containers, in GB
+
+The x-axis shows time labels. Hover over a data point to see the exact value at that moment.
+
+<Note>
+  Charts only show data from the moment Sencho started. If you just installed Sencho, they will be mostly empty until metrics accumulate.
+</Note>
+
+## Convert `docker run` to Compose
+
+The bottom panel provides a quick converter: paste any `docker run` command and Sencho transforms it into a valid `docker-compose.yaml` snippet.
+
+```bash
+# Example input
+docker run -d --name myapp -p 8080:80 -e TZ=UTC -v /data:/app/data nginx:latest
+```
+
+Click **Convert** and the output YAML appears ready to copy. You can then create a new stack and paste it into the editor.
+
+This is useful when migrating existing containers to managed Compose stacks without having to write YAML by hand.
diff --git a/docs/features/editor.mdx b/docs/features/editor.mdx
new file mode 100644
index 00000000..4ebfbd4e
--- /dev/null
+++ b/docs/features/editor.mdx
@@ -0,0 +1,64 @@
+---
+title: Editor
+description: Edit compose files and environment variables, and manage containers directly from the dashboard.
+---
+
+Selecting a stack opens the editor view — a split-pane layout with container management on the left and a full Monaco code editor on the right.
+
+<Frame>
+  <img src="/images/editor/editor-overview.png" alt="Editor view showing container panel and Monaco editor" />
+</Frame>
+
+## Compose file editor
+
+The right panel shows your `compose.yaml` with full syntax highlighting. By default the editor is **read-only** to prevent accidental changes.
+
+Click **Edit** to enter edit mode. Your changes are unsaved until you explicitly save them.
+
+### Save options
+
+| Button | What it does |
+|--------|--------------|
+| **Save** | Writes the file to disk. Does not restart any containers. |
+| **Save & Deploy** | Writes the file, then immediately runs `docker compose up -d`. Use this to apply compose changes in one step. |
+| **Discard** | Reverts the editor to the last saved version. Unsaved changes are lost. |
+
+## Environment file editor
+
+Click the **.env** tab to switch to the environment file editor. If your `compose.yaml` references multiple env files (via `env_file:`), a dropdown lets you select which file to edit.
+
+The `.env` editor has the same save/discard controls as the compose editor. Changes take effect the next time the stack is deployed.
+
+<Note>
+  Sencho reads the `env_file:` paths from your `compose.yaml` to discover available env files. If no `env_file:` is declared, a default `.env` in the stack directory is used.
+</Note>
+
+## Container panel
+
+The left panel lists all containers that belong to the selected stack. Each container shows:
+
+- **Status badge** — `running`, `exited`, `starting`, or `unhealthy`
+- **Live stats** — CPU %, RAM usage, and network I/O updated every 1–2 seconds
+- **Port mappings** — host:container port pairs (if any)
+
+### Container actions
+
+Each container row has three action buttons:
+
+| Button | What it does |
+|--------|--------------|
+| **Logs** (external link icon) | Opens a live log stream modal for that container |
+| **Terminal** (terminal icon) | Opens an interactive bash session inside the container |
+| **Copy ID** | Copies the container ID to the clipboard |
+
+### Log viewer
+
+The log viewer streams output from a single container in real-time using Server-Sent Events. Logs auto-scroll to the bottom as new lines arrive. Close the modal to stop the stream.
+
+### Container terminal (exec)
+
+The terminal modal gives you an interactive bash shell inside the running container — equivalent to `docker exec -it <id> bash`. It uses a full xterm.js emulator with color support and tab completion.
+
+<Warning>
+  The container terminal requires the container to have `bash` (or `sh`) installed. Minimal images (e.g. Alpine-based) may need `sh` instead.
+</Warning>
diff --git a/docs/features/global-observability.mdx b/docs/features/global-observability.mdx
new file mode 100644
index 00000000..4e396666
--- /dev/null
+++ b/docs/features/global-observability.mdx
@@ -0,0 +1,58 @@
+---
+title: Global Observability
+description: A unified, searchable log stream from every container across all your stacks.
+---
+
+The **Logs** tab aggregates output from all running containers into a single scrollable view. Instead of tailing logs one container at a time, you see everything in one place — with filtering to focus on what matters.
+
+<Frame>
+  <img src="/images/global-observability/global-observability-overview.png" alt="Global Observability view showing real-time log lines from multiple containers" />
+</Frame>
+
+## Log format
+
+Each line shows:
+
+- **Timestamp** — when the log line was emitted
+- **Stack name** — the Compose stack the container belongs to (colour-coded)
+- **Container name** — the specific container
+- **Level** — `INFO`, `WARN`, or `ERROR` (where detectable)
+- **Message** — the raw log output
+
+## Streaming modes
+
+Sencho supports two modes for fetching logs, switchable via the **Developer mode** toggle:
+
+| Mode | How it works | Best for |
+|------|-------------|----------|
+| **Standard** (default) | Polls all containers every N seconds (configurable in Settings → Developer) | General use; lower overhead |
+| **Developer mode** | Server-Sent Events stream; logs arrive as they are emitted | Debugging; watching a specific event in real-time |
+
+The default polling interval is 5 seconds. You can change it to 1, 3, 5, or 10 seconds in **Settings → Developer → Global Logs Refresh Rate**.
+
+## Filtering logs
+
+Use the controls above the log panel to narrow what you see:
+
+| Control | What it does |
+|---------|-------------|
+| **Stack filter** | Multi-select dropdown — show only logs from chosen stacks |
+| **Stream** | `ALL` / `STDOUT` / `STDERR` — filter by output stream |
+| **Search** | Full-text filter on the message field (case-insensitive) |
+
+Filters combine — you can show only `STDERR` from a specific stack while searching for a keyword.
+
+## Controls
+
+| Button | What it does |
+|--------|-------------|
+| **Clear** | Clears the current log buffer in the UI (does not delete logs from Docker) |
+| **Auto-scroll** toggle | When enabled, the view scrolls to the bottom as new lines arrive |
+
+## Capacity limits
+
+To avoid browser memory issues, the log view keeps a maximum of **2,000 entries** in memory at a time. Older entries are dropped as new ones arrive. For deeper investigation, use the [per-container log viewer](/features/editor#log-viewer) in the Editor tab, or `docker compose logs` directly from the [Host Console](/features/host-console).
+
+<Note>
+  Log retention on the backend is controlled by **Settings → Developer → Log Retention Days** (default: 30 days). This affects historical logs stored in Sencho's database, not the live stream.
+</Note>
diff --git a/docs/features/host-console.mdx b/docs/features/host-console.mdx
new file mode 100644
index 00000000..6108b2e3
--- /dev/null
+++ b/docs/features/host-console.mdx
@@ -0,0 +1,54 @@
+---
+title: Host Console
+description: An interactive terminal on your host OS, directly in the browser — no SSH required.
+---
+
+The **Console** tab opens a full interactive terminal session on the machine running Sencho. It behaves exactly like an SSH session, but without needing an SSH server, client, or key management.
+
+<Frame>
+  <img src="/images/host-console/host-console-overview.png" alt="Host Console showing a PowerShell prompt inside the Sencho container working directory" />
+</Frame>
+
+## What it is
+
+The host console spawns a real PTY (pseudo-terminal) process on the Sencho host using `node-pty`. Your keystrokes are sent over a WebSocket and the terminal output is streamed back in real-time. The terminal emulator is [xterm.js](https://xtermjs.org/), the same engine used by VS Code's built-in terminal.
+
+Features:
+- Full colour and cursor support
+- Tab completion (via the host shell)
+- Scrollback buffer (10,000 lines)
+- Automatic terminal resizing when you resize the browser window
+- Copy and paste
+
+## Opening the console
+
+Click **Console** in the top navigation bar. The session starts immediately in the stack's working directory if a stack is selected, otherwise in the `COMPOSE_DIR` root.
+
+The header shows the connection status (**Connected** in green) and which node the console is attached to.
+
+Click **Close Console** to end the session and terminate the shell process on the host.
+
+## Shell type
+
+The shell depends on the host OS:
+- **Linux/macOS hosts:** `bash` or `sh`
+- **Windows hosts (Docker Desktop):** PowerShell (as shown in the screenshot — the console opens inside the Sencho container's Windows environment)
+
+## Security model
+
+The host console has a stricter authentication requirement than other features:
+
+- Requires a valid **browser session** (httpOnly cookie). Node-proxy tokens used for multi-node communication are explicitly blocked.
+- Each session is issued a short-lived **console token** (60-second TTL) before the WebSocket is established.
+- Because the console gives full shell access to the host, you should secure your Sencho instance with HTTPS and a strong password if it is exposed to a network.
+
+<Warning>
+  The host console provides unrestricted shell access to the machine running Sencho. Do not expose Sencho on a public network without HTTPS and strong authentication.
+</Warning>
+
+## Common uses
+
+- Inspecting files in your `COMPOSE_DIR` without leaving the browser
+- Running `docker compose logs --follow` or `docker ps` directly
+- Editing files with `nano` or `vim` for quick fixes
+- Running maintenance scripts or one-off commands on the host
diff --git a/docs/features/multi-node.mdx b/docs/features/multi-node.mdx
new file mode 100644
index 00000000..17d44373
--- /dev/null
+++ b/docs/features/multi-node.mdx
@@ -0,0 +1,80 @@
+---
+title: Multi-Node Management
+description: Connect multiple Sencho instances and manage all your servers from a single dashboard.
+---
+
+Sencho's multi-node feature lets you manage Docker Compose stacks on multiple servers — all from the same browser tab. Each server runs its own Sencho instance, and your primary instance acts as a transparent proxy to the others.
+
+<Frame>
+  <img src="/images/multi-node/node-manager.png" alt="Node Manager showing a local and a remote node, both Online" />
+</Frame>
+
+## How it works
+
+There is no central server. Each Sencho instance manages its own host independently. When you select a remote node, your browser's API calls are proxied through your local Sencho instance to the remote one, authenticated by a long-lived Bearer token. No SSH. No shared Docker sockets.
+
+## The local node
+
+Your primary Sencho installation is always listed as **Local**. It is the default node, marked with a star, and cannot be deleted. All operations on the local node run directly against the host's Docker socket.
+
+## Adding a remote node
+
+### Step 1: Generate a token on the remote machine
+
+On the **remote** Sencho instance (the server you want to add), open **Settings → Nodes** and click **Generate Token**. Copy the generated token — you'll only see it once.
+
+<Note>
+  The token is a long-lived JWT scoped to `node_proxy`. Anyone with this token can fully control that Sencho instance, so treat it like a password.
+</Note>
+
+### Step 2: Add the node on your primary instance
+
+On your **primary** Sencho instance, open **Settings → Nodes** and click **+ Add Node**. Fill in:
+
+| Field | Description |
+|-------|-------------|
+| **Name** | A display name (e.g. `prod-server`, `media-box`) |
+| **Type** | Select **Remote** |
+| **Sencho API URL** | The full HTTP/HTTPS URL of the remote instance (e.g. `http://192.168.1.20:3001`) |
+| **API Token** | The token you generated in Step 1 |
+
+Click **Create**. Sencho immediately tests the connection and shows the result.
+
+### Step 3: Verify connectivity
+
+A successful connection shows the remote node as **Online** with a green badge. If it shows **Offline** or **Unknown**, check:
+- The remote Sencho instance is running and reachable from your primary host
+- The API URL is correct (include the port if non-standard)
+- The token was copied correctly without extra whitespace
+
+Click the **wifi icon** (test connection) on any node row at any time to re-check status.
+
+## The 1:1 path rule for remote nodes
+
+The Compose directory path matters on remote nodes too. When you register a remote node, its `COMPOSE_DIR` is whatever that remote instance was configured with. Make sure the remote Sencho's `COMPOSE_DIR` follows the [1:1 path rule](/getting-started/configuration#compose-directory-the-11-path-rule) on that remote host.
+
+## Switching between nodes
+
+The **node switcher** dropdown in the top-left of the sidebar shows the currently active node. Click it to switch to any registered node. All views — dashboard stats, stack list, editor, resources, logs — immediately reflect the selected node.
+
+<Frame>
+  <img src="/images/multi-node/node-manager.png" alt="Node switcher dropdown and node list" />
+</Frame>
+
+Node status indicators:
+
+| Indicator | Meaning |
+|-----------|---------|
+| Green dot | Node is reachable and responding |
+| Red dot | Node is unreachable |
+| Gray dot | Status not yet checked |
+
+## Editing and deleting nodes
+
+Click the **pencil icon** on any remote node row to edit its name, URL, or token. Click the **trash icon** to remove it. The local node cannot be edited or deleted.
+
+## Security considerations
+
+- Node tokens grant full control over the remote Sencho instance. Rotate them if compromised via Settings → Nodes → Generate Token (the old token is invalidated).
+- Use HTTPS between instances in production to prevent token interception.
+- The host console and container exec terminals are blocked for node-proxy tokens — interactive shell access always requires a real browser session on that instance.
diff --git a/docs/features/overview.mdx b/docs/features/overview.mdx
new file mode 100644
index 00000000..04fc698d
--- /dev/null
+++ b/docs/features/overview.mdx
@@ -0,0 +1,48 @@
+---
+title: Features Overview
+description: A high-level tour of everything Sencho can do.
+---
+
+## Stack management
+
+Deploy, start, stop, restart, and remove Docker Compose stacks through a point-and-click interface. Edit `compose.yaml` and `.env` files directly in the built-in Monaco editor with syntax highlighting. [Learn more →](/features/stack-management)
+
+## Editor
+
+Full in-browser code editor for your Compose and environment files. Toggle edit mode, save to disk, or save and deploy in one step. Per-container live stats and an interactive bash exec terminal live alongside the editor. [Learn more →](/features/editor)
+
+## Multi-node support
+
+Add remote Sencho instances as nodes. All dashboard operations — stack management, logs, stats — work identically whether you're targeting your local machine or a server on the other side of the world. Uses a transparent HTTP proxy model; no SSH or shared Docker sockets required. [Learn more →](/features/multi-node)
+
+## Real-time logs & stats
+
+Stream container logs and resource metrics (CPU, memory, network I/O) live in the browser via WebSocket and Server-Sent Events connections. The Home dashboard shows historical CPU and RAM charts over the last 24 hours.
+
+## Global observability
+
+The **Logs** view aggregates output from all containers across all stacks into a single scrollable stream. Filter by stack, log level (stdout/stderr), or search for keywords. Switch to developer mode for real-time SSE streaming.
+
+## Resources hub
+
+View and manage all Docker images, volumes, and networks. Resources are classified as:
+
+| Label | Meaning |
+|-------|---------|
+| **Managed** | Owned by a Sencho stack |
+| **External** | Part of another Compose project |
+| **Unused / Reclaimable** | Safe to prune |
+
+Run scoped prune operations to clean up Sencho-managed resources only, or target all Docker resources when needed.
+
+## App Store
+
+Browse 190+ pre-configured application templates. Filter by category (Media, Automation, Development, etc.), configure environment variables, volumes, and ports, and deploy with a single click.
+
+## Host console
+
+Open an interactive terminal on the host OS directly in the browser — full xterm.js emulation with color support. No SSH client required.
+
+## Alerts & notifications
+
+Configure threshold-based alerts (CPU, memory, network, restart count) per stack. Route notifications to Discord, Slack, or any generic webhook endpoint. [Learn more →](/features/alerts-notifications)
diff --git a/docs/features/resources.mdx b/docs/features/resources.mdx
new file mode 100644
index 00000000..96c305c0
--- /dev/null
+++ b/docs/features/resources.mdx
@@ -0,0 +1,75 @@
+---
+title: Resources Hub
+description: Browse, filter, and clean up Docker images, volumes, networks, and unmanaged containers.
+---
+
+The **Resources** tab gives you a full view of everything Docker is storing on your host, broken down by type and ownership.
+
+<Frame>
+  <img src="/images/resources/resources-overview.png" alt="Resources Hub showing disk footprint, quick clean panel, and images table" />
+</Frame>
+
+## Docker disk footprint
+
+The stacked bar at the top visualises how your Docker disk usage is distributed:
+
+| Segment | Meaning |
+|---------|---------|
+| **Sencho Managed** (green) | Images used by stacks in your `COMPOSE_DIR` |
+| **External Projects** (orange) | Images used by Docker projects outside Sencho |
+| **Reclaimable** (gray) | Unused images and dangling layers safe to delete |
+
+Click any segment to automatically filter the tabs below to that category.
+
+## Quick Clean panel
+
+Four prune buttons let you reclaim disk space immediately. By default they operate on **Sencho-managed resources only** — they will not touch external Docker projects.
+
+| Button | What it removes |
+|--------|----------------|
+| **Prune Unused Images** | Images with no running containers in Sencho stacks |
+| **Prune Unused Volumes** | Volumes not attached to any Sencho container |
+| **Prune Dead Networks** | Networks not connected to any Sencho container |
+| **Purge Unmanaged Containers** | Containers Sencho doesn't recognise (started outside it) |
+
+Each button has a **⋮ More options** menu that lets you target **all Docker resources** instead of Sencho-only. Use this carefully — it can affect other Compose projects running on the same host.
+
+A confirmation dialog appears before any destructive operation, showing a summary of what will be removed.
+
+## Resource tabs
+
+### Images
+
+Lists all Docker images on the host with their ID, repository tag, size, and status.
+
+**Filter buttons:** `All` · `Managed` · `External`
+
+**Status badges:**
+- `In Use` + stack name — image is actively used by a running container
+- `Unused` — image has no running containers; safe to delete
+
+Click the trash icon on any row to delete an individual image. Sencho will warn you if the image is in use.
+
+### Volumes
+
+Lists all Docker volumes. Columns: name, driver, mount point, size, and managed status.
+
+**Filter buttons:** `All` · `Managed` · `External`
+
+<Warning>
+  Deleting a volume is permanent. Any data stored in it will be lost. Always back up important volume data before pruning.
+</Warning>
+
+### Networks
+
+Lists all Docker networks. Columns: name, driver, scope (`local`, `global`, `swarm`), and managed status.
+
+**Filter buttons:** `All` · `Managed` · `External` · `System`
+
+System networks (like `bridge`, `host`, `none`) are shown but cannot be deleted.
+
+### Unmanaged
+
+Lists containers running on the host that are not part of any Sencho-managed stack. This includes containers started with `docker run`, or Compose projects outside your `COMPOSE_DIR`.
+
+This view is useful for identifying orphaned containers after a failed deployment or after moving stacks in and out of `COMPOSE_DIR`.
diff --git a/docs/features/stack-management.mdx b/docs/features/stack-management.mdx
new file mode 100644
index 00000000..c91c5661
--- /dev/null
+++ b/docs/features/stack-management.mdx
@@ -0,0 +1,71 @@
+---
+title: Stack Management
+description: Create, deploy, control, and remove Docker Compose stacks.
+---
+
+A **stack** in Sencho is a Docker Compose project: a directory inside your `COMPOSE_DIR` that contains at least a `compose.yaml` (or `docker-compose.yml`) file. Sencho automatically discovers every subdirectory as a stack.
+
+<Frame>
+  <img src="/images/stack-management/create-stack-dialog.png" alt="Create New Stack dialog" />
+</Frame>
+
+## Creating a stack
+
+Click **Create Stack** in the left sidebar. Enter a name and click **Create**.
+
+**Naming rules:**
+- Lowercase letters, numbers, and hyphens only (e.g. `my-app`, `nextcloud`)
+- No spaces or special characters
+- Must be unique — duplicates are rejected
+
+Sencho creates a new directory inside `COMPOSE_DIR` with a blank `compose.yaml` file. You'll land in the editor automatically.
+
+## The stack list
+
+All discovered stacks appear in the left sidebar. Each shows a color-coded status dot:
+
+| Color | Meaning |
+|-------|---------|
+| Green | All containers running |
+| Red | One or more containers exited |
+| Gray | No containers / status unknown |
+
+Use the **search box** above the list to filter stacks by name.
+
+## Deploying a stack
+
+Select a stack and click **Deploy** in the stack header. This runs `docker compose up -d` — pulling images if needed and creating or recreating containers.
+
+<Frame>
+  <img src="/images/editor/editor-overview.png" alt="Stack editor with control buttons" />
+</Frame>
+
+## Controlling a running stack
+
+The stack header exposes four actions:
+
+| Button | Command | What it does |
+|--------|---------|--------------|
+| **Stop** | `docker compose stop` | Stops containers without removing them. State is preserved. |
+| **Restart** | `docker compose restart` | Restarts all containers in the stack. |
+| **Update** | `docker compose pull` + `up -d` | Pulls the latest image tags and recreates containers. |
+| **Delete** | `down` + removes files | Stops and removes containers, then deletes the stack directory. |
+
+<Warning>
+  **Delete** is irreversible. It removes the stack directory — including `compose.yaml`, `.env`, and any bind-mounted files stored there. Back up important files before deleting.
+</Warning>
+
+## Stack context menu
+
+Right-click or use the **⋮** button on any stack in the sidebar to access:
+
+<Frame>
+  <img src="/images/stack-management/stack-context-menu.png" alt="Stack context menu showing Alerts option" />
+</Frame>
+
+- **Alerts** — configure metric-based alerting rules for this stack
+- **Check for updates** — manually trigger an image update check
+
+## Converting a `docker run` command
+
+If you have an existing `docker run` command and want to turn it into a Compose stack, go to the **Home** tab and paste it into the "Convert Docker Run to Compose" field. Sencho converts it to YAML that you can save as a new stack.
diff --git a/docs/getting-started/configuration.mdx b/docs/getting-started/configuration.mdx
new file mode 100644
index 00000000..751e4ffc
--- /dev/null
+++ b/docs/getting-started/configuration.mdx
@@ -0,0 +1,161 @@
+---
+title: Configuration
+description: Environment variables, volume mounts, and the 1:1 path rule.
+---
+
+Sencho is configured entirely through environment variables and Docker volume mounts. There is no config file to edit inside the container.
+
+## Required environment variables
+
+| Variable | Description |
+|----------|-------------|
+| `JWT_SECRET` | Secret key used to sign session tokens. Use a long, random string (32+ characters). Changing this invalidates all active sessions. |
+| `COMPOSE_DIR` | Absolute path to the directory that contains your Compose stacks. Every subdirectory inside becomes a stack in Sencho. |
+
+## Optional environment variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `PORT` | `3000` | Port the Sencho HTTP server listens on. |
+| `DATA_DIR` | `/app/data` | Directory where Sencho stores its SQLite database, node registry, and cached metrics. |
+| `NODE_ENV` | `production` | Set automatically in the Docker image. Only change this for local development. |
+
+## Required volume mounts
+
+### Docker socket
+
+Sencho needs access to the Docker daemon to manage containers:
+
+```yaml
+volumes:
+  - /var/run/docker.sock:/var/run/docker.sock
+```
+
+### Data directory
+
+Sencho's database persists all your settings, nodes, alerts, and metrics history. Mount a named volume or host path so it survives container restarts:
+
+```yaml
+volumes:
+  - ./sencho-data:/app/data
+```
+
+<Warning>
+  Without a persistent data mount, Sencho will lose all configuration — including registered nodes, alerts, and settings — every time the container restarts.
+</Warning>
+
+### Compose directory — the 1:1 path rule
+
+<Warning>
+  This is the most common source of deployment problems. Read carefully.
+</Warning>
+
+When Sencho runs `docker compose up`, it does so on your **host machine**. Docker resolves relative volume paths in your Compose files relative to the **host** path of the stack directory — not the path inside the Sencho container.
+
+**The rule:** Mount your Compose directory at the **exact same path** inside the container as it exists on your host.
+
+```yaml
+# ✅ Correct — host path matches container path
+volumes:
+  - /home/boris/docker:/home/boris/docker
+environment:
+  - COMPOSE_DIR=/home/boris/docker
+```
+
+```yaml
+# ❌ Wrong — paths differ, relative volumes will break
+volumes:
+  - /home/boris/docker:/app/compose
+environment:
+  - COMPOSE_DIR=/app/compose
+```
+
+If you use a simple path like `/opt/compose` on your host, mount it at `/opt/compose` in the container:
+
+```yaml
+volumes:
+  - /opt/compose:/opt/compose
+environment:
+  - COMPOSE_DIR=/opt/compose
+```
+
+## Full docker-compose.yml example
+
+```yaml
+services:
+  sencho:
+    image: saelix/sencho:latest
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - ./sencho-data:/app/data
+      - /opt/compose:/opt/compose          # 1:1 path rule
+    environment:
+      - JWT_SECRET=your-long-random-secret-here
+      - COMPOSE_DIR=/opt/compose
+      - DATA_DIR=/app/data
+```
+
+## Optional: global environment file
+
+If your Compose stacks share common variables (e.g. `PUID`, `PGID`, `TZ`), you can pass an `env_file` to the Sencho container so those variables are available in the host environment when `docker compose` runs:
+
+```yaml
+services:
+  sencho:
+    image: saelix/sencho:latest
+    env_file:
+      - /opt/compose/globals.env          # shared vars for all stacks
+    environment:
+      - JWT_SECRET=your-secret
+      - COMPOSE_DIR=/opt/compose
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - /opt/compose:/opt/compose
+      - ./sencho-data:/app/data
+```
+
+## Reverse proxy setup
+
+Sencho works behind any reverse proxy. The only requirement is that WebSocket connections are forwarded correctly (used for live logs, container terminals, and the host console).
+
+### Nginx
+
+```nginx
+server {
+    listen 80;
+    server_name sencho.yourdomain.com;
+
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+
+        # WebSocket support
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_read_timeout 3600s;
+    }
+}
+```
+
+### Traefik (Docker labels)
+
+```yaml
+labels:
+  - "traefik.enable=true"
+  - "traefik.http.routers.sencho.rule=Host(`sencho.yourdomain.com`)"
+  - "traefik.http.services.sencho.loadbalancer.server.port=3000"
+```
+
+<Note>
+  Traefik handles WebSocket upgrades automatically for HTTP/1.1 backends. No extra configuration needed.
+</Note>
+
+## First boot
+
+After starting Sencho, open it in your browser. If no admin account exists yet, you'll be taken to a setup screen to create one. This only appears once — subsequent visits go directly to the login page.
diff --git a/docs/getting-started/introduction.mdx b/docs/getting-started/introduction.mdx
new file mode 100644
index 00000000..8e719c6d
--- /dev/null
+++ b/docs/getting-started/introduction.mdx
@@ -0,0 +1,32 @@
+---
+title: Introduction
+description: What Sencho is and why you might want it.
+---
+
+Sencho is a self-hosted Docker Compose management dashboard. It gives you a clean web UI to deploy, manage, and monitor your Docker Compose stacks — locally or across multiple remote servers — without touching a terminal.
+
+<Frame>
+  <img src="/images/dashboard/dashboard-overview.png" alt="Sencho dashboard showing system stats and container metrics" />
+</Frame>
+
+## Key concepts
+
+- **Stacks** — a Docker Compose project living in your `COMPOSE_DIR`. Sencho treats each subdirectory as a stack.
+- **Nodes** — a Sencho instance. Your local machine is always the default node. Add remote nodes by pointing Sencho at another Sencho instance's API URL.
+- **Resources** — images, volumes, and networks that belong to your stacks (managed) or exist outside them (external/unused).
+
+<Note>
+  Sencho never accesses remote servers directly via SSH or Docker TCP. Remote management works by proxying API requests to another running Sencho instance.
+</Note>
+
+## What you can do
+
+- **Deploy and control stacks** — create, start, stop, restart, and delete Compose stacks with one click
+- **Edit files in-browser** — full Monaco editor for `compose.yaml` and `.env` files
+- **Monitor in real-time** — live CPU, RAM, disk, and network stats with historical charts
+- **Stream logs** — tail container logs individually or aggregate all stacks in one view
+- **Manage resources** — browse, filter, and prune Docker images, volumes, and networks
+- **Deploy from the App Store** — one-click deployment from a curated template registry
+- **Run a host console** — interactive terminal on the host OS directly in the browser
+- **Set alerts** — threshold-based notifications via Discord, Slack, or any webhook
+- **Manage multiple servers** — add remote Sencho instances as nodes and switch between them seamlessly
diff --git a/docs/getting-started/quickstart.mdx b/docs/getting-started/quickstart.mdx
new file mode 100644
index 00000000..a498cdaf
--- /dev/null
+++ b/docs/getting-started/quickstart.mdx
@@ -0,0 +1,38 @@
+---
+title: Quickstart
+description: Get Sencho running in under five minutes.
+---
+
+## Prerequisites
+
+- Docker and Docker Compose installed on the host
+- A directory where your Compose projects live (e.g. `/opt/compose`)
+
+## Run with Docker
+
+```bash
+docker run -d \
+  --name sencho \
+  -p 3000:3000 \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  -v /opt/compose:/app/compose \
+  -v sencho_data:/app/data \
+  -e JWT_SECRET=change-me \
+  ghcr.io/ansоcode/sencho:latest
+```
+
+Open `http://localhost:3000` in your browser. On first boot you'll be prompted to create an admin account.
+
+<Note>
+  Replace `/opt/compose` with the path to your Compose projects directory. Every subdirectory inside it becomes a stack in Sencho.
+</Note>
+
+## Important: the 1:1 path rule
+
+The `-v /opt/compose:/app/compose` mount above uses a simplified path for illustration. In practice, you must mount your compose directory at the **same path** inside and outside the container. See the [Configuration guide](/getting-started/configuration#compose-directory-the-11-path-rule) for details — this is the most common setup mistake.
+
+## Next steps
+
+- [Configuration](/getting-started/configuration) — full environment variable reference, reverse proxy setup
+- [Stack Management](/features/stack-management) — create and deploy your first stack
+- [Multi-Node](/features/multi-node) — add a remote server to manage from this dashboard
diff --git a/docs/images/alerts-notifications/notifications-settings.png b/docs/images/alerts-notifications/notifications-settings.png
new file mode 100644
index 00000000..776d9315
Binary files /dev/null and b/docs/images/alerts-notifications/notifications-settings.png differ
diff --git a/docs/images/app-store/app-store-overview.png b/docs/images/app-store/app-store-overview.png
new file mode 100644
index 00000000..9cfb6cdf
Binary files /dev/null and b/docs/images/app-store/app-store-overview.png differ
diff --git a/docs/images/dashboard.png b/docs/images/dashboard.png
new file mode 100644
index 00000000..2aea2d0f
Binary files /dev/null and b/docs/images/dashboard.png differ
diff --git a/docs/images/dashboard/dashboard-overview.png b/docs/images/dashboard/dashboard-overview.png
new file mode 100644
index 00000000..bd3d2121
Binary files /dev/null and b/docs/images/dashboard/dashboard-overview.png differ
diff --git a/docs/images/editor/editor-overview.png b/docs/images/editor/editor-overview.png
new file mode 100644
index 00000000..cc1a2105
Binary files /dev/null and b/docs/images/editor/editor-overview.png differ
diff --git a/docs/images/global-observability/global-observability-overview.png b/docs/images/global-observability/global-observability-overview.png
new file mode 100644
index 00000000..82e6ca2f
Binary files /dev/null and b/docs/images/global-observability/global-observability-overview.png differ
diff --git a/docs/images/host-console/host-console-overview.png b/docs/images/host-console/host-console-overview.png
new file mode 100644
index 00000000..5d776562
Binary files /dev/null and b/docs/images/host-console/host-console-overview.png differ
diff --git a/docs/images/login.png b/docs/images/login.png
new file mode 100644
index 00000000..e03872ab
Binary files /dev/null and b/docs/images/login.png differ
diff --git a/docs/images/multi-node/node-manager.png b/docs/images/multi-node/node-manager.png
new file mode 100644
index 00000000..e8dbb496
Binary files /dev/null and b/docs/images/multi-node/node-manager.png differ
diff --git a/docs/images/resources.png b/docs/images/resources.png
new file mode 100644
index 00000000..6c3ea589
Binary files /dev/null and b/docs/images/resources.png differ
diff --git a/docs/images/resources/resources-overview.png b/docs/images/resources/resources-overview.png
new file mode 100644
index 00000000..77189b2d
Binary files /dev/null and b/docs/images/resources/resources-overview.png differ
diff --git a/docs/images/settings/settings-overview.png b/docs/images/settings/settings-overview.png
new file mode 100644
index 00000000..898686dc
Binary files /dev/null and b/docs/images/settings/settings-overview.png differ
diff --git a/docs/images/stack-management/create-stack-dialog.png b/docs/images/stack-management/create-stack-dialog.png
new file mode 100644
index 00000000..029b246e
Binary files /dev/null and b/docs/images/stack-management/create-stack-dialog.png differ
diff --git a/docs/images/stack-management/stack-context-menu.png b/docs/images/stack-management/stack-context-menu.png
new file mode 100644
index 00000000..4464e345
Binary files /dev/null and b/docs/images/stack-management/stack-context-menu.png differ
diff --git a/docs/images/stacks.png b/docs/images/stacks.png
new file mode 100644
index 00000000..8e37be80
Binary files /dev/null and b/docs/images/stacks.png differ
diff --git a/docs/operations/backup.mdx b/docs/operations/backup.mdx
new file mode 100644
index 00000000..a42041cf
--- /dev/null
+++ b/docs/operations/backup.mdx
@@ -0,0 +1,139 @@
+---
+title: Backup & Restore
+description: What to back up, how to restore it, and how to migrate Sencho to a new host.
+---
+
+Sencho stores all its state in two places: the **data directory** (SQLite database) and your **compose directory** (your actual stack files). Both need to be backed up for a complete recovery.
+
+---
+
+## What to back up
+
+### 1. Data directory (`DATA_DIR`)
+
+Default path: `/app/data` inside the container, mapped to wherever you mounted it on the host (e.g. `./sencho-data`).
+
+Contains:
+- `sencho.db` — SQLite database with all settings, nodes, alerts, metrics history, and notification history
+
+This single file is everything Sencho knows about itself. Back it up and you can fully restore any Sencho installation.
+
+### 2. Compose directory (`COMPOSE_DIR`)
+
+The directory containing your stack subdirectories — your `compose.yaml` files, `.env` files, and any bind-mounted config files stored there.
+
+This is your actual application data. It lives entirely outside Sencho and you almost certainly already have it on a schedule, but include it in any Sencho backup plan.
+
+---
+
+## Backing up
+
+### Simple file copy
+
+```bash
+# Stop Sencho to ensure the SQLite WAL is flushed (recommended but not strictly required)
+docker stop sencho
+
+# Copy the data directory
+cp -r /path/to/sencho-data /path/to/backup/sencho-data-$(date +%Y%m%d)
+
+# Copy compose stacks
+cp -r /opt/compose /path/to/backup/compose-$(date +%Y%m%d)
+
+# Restart
+docker start sencho
+```
+
+### SQLite online backup (without stopping)
+
+SQLite supports hot backups via its `.backup` command. This is safe to run while Sencho is running:
+
+```bash
+sqlite3 /path/to/sencho-data/sencho.db ".backup '/path/to/backup/sencho.db'"
+```
+
+### Automated daily backup (cron example)
+
+```cron
+0 3 * * * sqlite3 /path/to/sencho-data/sencho.db ".backup '/backups/sencho-$(date +\%Y\%m\%d).db'" && find /backups -name "sencho-*.db" -mtime +30 -delete
+```
+
+This backs up the database at 3 AM daily and deletes backups older than 30 days.
+
+---
+
+## Restoring
+
+### Restore from backup
+
+1. Stop Sencho:
+   ```bash
+   docker stop sencho
+   ```
+
+2. Replace the data directory with your backup:
+   ```bash
+   rm -rf /path/to/sencho-data/*
+   cp /path/to/backup/sencho.db /path/to/sencho-data/sencho.db
+   ```
+
+3. Restore your compose directory if needed:
+   ```bash
+   cp -r /path/to/backup/compose /opt/compose
+   ```
+
+4. Start Sencho:
+   ```bash
+   docker start sencho
+   ```
+
+Sencho will read the restored database and resume with all your previous settings, nodes, and alert rules intact.
+
+---
+
+## Migrating to a new host
+
+### Step 1: Prepare the new host
+
+Install Docker and Docker Compose on the new machine. Create the same directory structure you use for your compose files, following the [1:1 path rule](/getting-started/configuration#compose-directory-the-11-path-rule).
+
+### Step 2: Copy data
+
+Transfer your backup files to the new host:
+
+```bash
+scp -r /path/to/sencho-data newhost:/path/to/sencho-data
+scp -r /opt/compose newhost:/opt/compose
+```
+
+### Step 3: Deploy Sencho on the new host
+
+Use the same `docker-compose.yml` you used on the old host (with the same `COMPOSE_DIR` and `DATA_DIR` paths):
+
+```bash
+docker compose up -d
+```
+
+### Step 4: Update remote node references
+
+If other Sencho instances were pointing to your old host as a remote node, update their node config to use the new host's IP or hostname. Generate a new API token on the restored instance and distribute it.
+
+### Step 5: Verify
+
+- Log in and confirm your stacks, nodes, and alerts are all present
+- Check that at least one stack deploys correctly
+- Verify the node switcher shows the expected nodes with green status
+
+---
+
+## What is NOT backed up by this process
+
+| Item | Location | Notes |
+|------|----------|-------|
+| Container data volumes | Wherever each stack's volumes are mounted on the host | Back these up separately per-application |
+| Actual container images | Docker image cache | These are re-pulled on next deploy — no backup needed |
+| Sencho logs (docker logs) | Container stdout | Not persisted beyond container lifetime |
+
+<Note>
+  Sencho does not currently have a built-in backup scheduler or export function. The approaches above use standard OS tools and SQLite's own backup mechanism.
+</Note>
diff --git a/docs/operations/troubleshooting.mdx b/docs/operations/troubleshooting.mdx
new file mode 100644
index 00000000..8a1feb1d
--- /dev/null
+++ b/docs/operations/troubleshooting.mdx
@@ -0,0 +1,163 @@
+---
+title: Troubleshooting
+description: Solutions to the most common Sencho setup and runtime problems.
+---
+
+## Containers won't start after deploy
+
+**Symptom:** You click Deploy and containers immediately exit or never appear.
+
+**Check:** Open the [Host Console](/features/host-console) and run:
+
+```bash
+docker compose -f /path/to/your/stack/compose.yaml logs
+```
+
+The most common causes:
+
+- **Missing environment variable** — a required variable in your `.env` file is empty or has the wrong name.
+- **Port already in use** — another container or host process is bound to the same port. Change the host port in the compose file.
+- **Volume path does not exist** — a bind-mount path on the host doesn't exist yet. Create the directory manually.
+
+---
+
+## The 1:1 path rule — volumes resolve to wrong paths
+
+**Symptom:** Stacks deploy but relative volume paths (e.g. `./config:/config`) point to the wrong location inside the container, or `docker compose` exits with a path error.
+
+**Cause:** Your `COMPOSE_DIR` is mounted at a different path inside the Sencho container than it has on the host.
+
+**Fix:** Your compose volume mount and `COMPOSE_DIR` environment variable must use the **same absolute path** on both sides:
+
+```yaml
+# docker-compose.yml for Sencho itself
+volumes:
+  - /opt/docker:/opt/docker        # same path inside and outside
+environment:
+  - COMPOSE_DIR=/opt/docker
+```
+
+See [Configuration — the 1:1 path rule](/getting-started/configuration#compose-directory-the-11-path-rule) for a full explanation.
+
+---
+
+## "Permission denied" on the Docker socket
+
+**Symptom:** Sencho starts but shows errors accessing Docker, or the stack list is empty even though containers exist.
+
+**Cause:** The Sencho container cannot read `/var/run/docker.sock`.
+
+**Fix:** Ensure the socket is mounted:
+
+```yaml
+volumes:
+  - /var/run/docker.sock:/var/run/docker.sock
+```
+
+On Linux, the Docker socket is owned by the `docker` group. The Sencho entrypoint detects the socket's GID automatically and adds the internal `sencho` user to the matching group. If you see permission errors despite a correct mount, check that the socket file is readable:
+
+```bash
+ls -la /var/run/docker.sock
+# Expected: srw-rw---- 1 root docker ...
+```
+
+If the group is not `docker`, the auto-detection still works — Sencho reads the GID from the socket file at startup.
+
+---
+
+## Login page shows "Something went wrong"
+
+**Symptom:** You enter credentials and get a generic error instead of being logged in.
+
+**Possible causes and fixes:**
+
+| Cause | Fix |
+|-------|-----|
+| `JWT_SECRET` is not set or is empty | Set a non-empty value for `JWT_SECRET` in your environment |
+| Container restarted and session cookie is stale | Clear browser cookies for the Sencho domain and try again |
+| Rate limit triggered (5 failed attempts in 15 min) | Wait 15 minutes, or restart the container to reset the limiter |
+
+---
+
+## WebSocket connections fail (logs/console not streaming)
+
+**Symptom:** The log viewer or host console shows a spinner that never resolves, or you see "Disconnected" immediately after connecting.
+
+**Cause:** A reverse proxy is not forwarding WebSocket upgrade headers.
+
+**Fix:** Add WebSocket support to your proxy config:
+
+```nginx
+# Nginx
+proxy_http_version 1.1;
+proxy_set_header Upgrade $http_upgrade;
+proxy_set_header Connection "upgrade";
+proxy_read_timeout 3600s;
+```
+
+Traefik handles WebSocket upgrades automatically for HTTP/1.1 backends — no extra config needed.
+
+---
+
+## Remote node shows "Offline" or "Unknown"
+
+**Symptom:** A node you added shows a red or gray status dot.
+
+**Checks in order:**
+
+1. **Is the remote Sencho instance running?** SSH to that machine and verify.
+2. **Is the API URL correct?** It must include the protocol and port (e.g. `http://192.168.1.20:3001`). Open it in a browser — you should see a JSON response from `/api/health`.
+3. **Is the token correct?** Tokens are long JWT strings. Even one missing character will cause auth to fail. Regenerate the token on the remote instance and update the node config.
+4. **Is there a firewall blocking the port?** The primary Sencho host must be able to reach the remote host's Sencho port.
+
+Click the **wifi icon** on the node row to re-test connectivity after making changes.
+
+---
+
+## Forgotten admin password
+
+Sencho has no password recovery flow. To reset the password:
+
+1. Stop the Sencho container
+2. Connect to the SQLite database directly:
+
+```bash
+sqlite3 /path/to/data/sencho.db
+```
+
+3. Delete the existing credentials so Sencho re-enters first-boot setup mode:
+
+```sql
+DELETE FROM global_settings WHERE key IN ('auth_username', 'auth_password_hash', 'auth_jwt_secret');
+```
+
+4. Restart the container — the setup screen will appear on next visit.
+
+<Warning>
+  This resets authentication entirely. All active sessions become invalid. Your stacks, nodes, and alert rules are not affected.
+</Warning>
+
+---
+
+## Checking the health endpoint
+
+Sencho exposes a health endpoint for monitoring and container health checks:
+
+```bash
+curl http://localhost:3000/api/health
+# {"status":"ok","uptime":12345.67}
+```
+
+A `200` response confirms the backend is running. Use this endpoint in your uptime monitor or load balancer health check.
+
+---
+
+## Getting logs from the Sencho container itself
+
+```bash
+docker logs sencho
+# or, to follow:
+docker logs -f sencho
+```
+
+The backend logs all route errors and service failures to stdout. This is the first place to look when the UI shows an error with no useful message.
diff --git a/docs/reference/settings.mdx b/docs/reference/settings.mdx
new file mode 100644
index 00000000..9ca2c9b7
--- /dev/null
+++ b/docs/reference/settings.mdx
@@ -0,0 +1,126 @@
+---
+title: Settings Reference
+description: Complete reference for every option in the Sencho Settings Hub.
+---
+
+Open the Settings Hub by clicking **Settings** in the top navigation bar. The left sidebar lists all available sections.
+
+<Frame>
+  <img src="/images/settings/settings-overview.png" alt="Settings Hub showing the Account tab and the full section sidebar" />
+</Frame>
+
+---
+
+## Account
+
+**Scope:** Global (applies to this Sencho instance, not per-node)
+
+Change the admin account password. All three fields are required.
+
+| Field | Description |
+|-------|-------------|
+| **Current Password** | Your existing password for verification |
+| **New Password** | Must be at least 6 characters |
+| **Confirm New Password** | Must match New Password |
+
+Click **Update Password** to apply. The change takes effect immediately; existing sessions remain valid.
+
+---
+
+## System Limits
+
+**Scope:** Per-node (applies to the currently selected node)
+
+Configure resource thresholds that trigger visual warnings on the dashboard stat cards. These are display thresholds only — Sencho does not throttle or kill containers when limits are reached.
+
+| Setting | Range | Description |
+|---------|-------|-------------|
+| **Host CPU Limit** | 1–100% | CPU percentage above which the CPU card turns orange/red |
+| **Host RAM Limit** | 1–100% | RAM percentage above which the RAM card turns orange/red |
+| **Host Disk Limit** | 1–100% | Disk percentage above which the Disk card turns orange/red |
+| **Docker Janitor Threshold** | ≥ 0 GB | Minimum free disk space to maintain. When free space falls below this value, a warning is shown. Set to `0` to disable. |
+| **Global Crash Alerts** | On / Off | When enabled, Sencho sends a notification whenever any managed container exits unexpectedly |
+
+Click **Save** to apply. An unsaved-changes indicator appears when you have edits pending.
+
+---
+
+## Notifications
+
+**Scope:** Global
+
+Configure external destinations for alert notifications. Three agent types are supported, each on its own sub-tab: **Discord**, **Slack**, and **Webhook**.
+
+For each agent:
+
+| Field | Description |
+|-------|-------------|
+| **Enable toggle** | Activates or deactivates this agent. Disabled agents receive no messages even if a URL is saved. |
+| **Webhook URL** | The endpoint Sencho will POST to when an alert fires |
+
+Click **Save** to persist changes. Click **Test** to send a test payload immediately and verify delivery.
+
+At least one agent must be enabled for stack alerts to deliver notifications. See [Alerts & Notifications](/features/alerts-notifications) for how to create alert rules.
+
+---
+
+## Appearance
+
+**Scope:** Global (stored in the browser, not the server)
+
+| Setting | Options | Description |
+|---------|---------|-------------|
+| **Theme** | Light / Dark / Auto | `Auto` follows the OS system preference. Changes apply immediately without a page reload. |
+
+---
+
+## Developer
+
+**Scope:** Per-node (applies to the currently selected node)
+
+Advanced settings for log streaming behaviour and data retention. Most users can leave these at their defaults.
+
+| Setting | Default | Description |
+|---------|---------|-------------|
+| **Developer Mode** | Off | When on, the [Global Observability](/features/global-observability) view switches from polling to real-time Server-Sent Events streaming |
+| **Global Logs Refresh Rate** | 5s | Polling interval in standard mode. Options: `1s`, `3s`, `5s`, `10s` |
+| **Metrics Retention Hours** | 24 | How many hours of CPU/RAM history to keep for dashboard charts. Max: 8,760 (1 year) |
+| **Log Retention Days** | 30 | How many days of notification history to keep in the database. Max: 365 |
+
+Click **Save** to apply.
+
+<Note>
+  Lower refresh rates (1s) increase backend CPU usage as Sencho polls Docker more frequently. Use only when actively debugging.
+</Note>
+
+---
+
+## Nodes
+
+**Scope:** Global
+
+Manage connections to local and remote Sencho instances. This is the same interface as the [Multi-Node](/features/multi-node) feature — see that page for the full walkthrough.
+
+Quick reference:
+
+| Action | How |
+|--------|-----|
+| Add a remote node | Click **+ Add Node** |
+| Generate a token for this instance | Click **Generate Token** |
+| Test an existing node's connectivity | Click the wifi icon on any row |
+| Edit a node | Click the pencil icon |
+| Delete a node | Click the trash icon (remote nodes only) |
+
+---
+
+## App Store
+
+**Scope:** Global
+
+| Setting | Default | Description |
+|---------|---------|-------------|
+| **Template Registry URL** | LinuxServer.io registry | The URL Sencho fetches templates from. Must return a JSON array in Portainer v2 template format. Leave blank to restore the default. |
+
+Click **Save** to update the URL. Click **Refresh Cache** to clear the cached template list and fetch fresh data from the registry immediately.
+
+See [App Store](/features/app-store#custom-template-registry) for more on custom registries.
diff --git a/e2e/auth.spec.ts b/e2e/auth.spec.ts
new file mode 100644
index 00000000..b2863720
--- /dev/null
+++ b/e2e/auth.spec.ts
@@ -0,0 +1,58 @@
+/**
+ * Authentication E2E tests.
+ * Tests login, logout, and unauthenticated redirect.
+ */
+import { test, expect } from '@playwright/test';
+import { loginAs, isDashboard, TEST_USERNAME, TEST_PASSWORD } from './helpers';
+
+test.describe('Authentication', () => {
+  test('login with valid credentials shows the dashboard', async ({ page }) => {
+    await loginAs(page, TEST_USERNAME, TEST_PASSWORD);
+    expect(await isDashboard(page)).toBe(true);
+    // URL should not be on a login page
+    expect(page.url()).not.toMatch(/login/i);
+  });
+
+  test('login with wrong password shows an error', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForTimeout(500);
+
+    // Skip if already logged in
+    if (await isDashboard(page)) {
+      await page.context().clearCookies();
+      await page.reload();
+      await page.waitForTimeout(500);
+    }
+
+    await page.locator('#username').fill(TEST_USERNAME);
+    await page.locator('#password').fill('definitely-wrong-password-xyz');
+    await page.locator('button:has-text("Login"), button:has-text("Sign in")').first().click();
+
+    // Should show error message, not navigate to dashboard
+    await expect(page.locator('text=/invalid|incorrect|wrong|failed/i')).toBeVisible({ timeout: 5_000 });
+    expect(await isDashboard(page)).toBe(false);
+  });
+
+  test('visiting the app without auth redirects to login', async ({ page }) => {
+    await page.context().clearCookies();
+    await page.goto('/');
+    await page.waitForTimeout(1_000);
+
+    // Should be on login or setup, not dashboard
+    expect(await isDashboard(page)).toBe(false);
+    // Login button or setup form should be visible
+    const loginOrSetup = await page.locator(
+      'button:has-text("Login"), button:has-text("Sign in"), button[type="submit"]'
+    ).first().isVisible();
+    expect(loginOrSetup).toBe(true);
+  });
+
+  test('logout returns to the login screen', async ({ page }) => {
+    await loginAs(page);
+    // The logout button renders a Lucide LogOut icon — Lucide adds a CSS class matching the icon name
+    const logoutBtn = page.locator('button:has(.lucide-log-out)');
+    await logoutBtn.click();
+    await page.waitForTimeout(1_000);
+    expect(await isDashboard(page)).toBe(false);
+  });
+});
diff --git a/e2e/helpers.ts b/e2e/helpers.ts
new file mode 100644
index 00000000..a2fcfb4c
--- /dev/null
+++ b/e2e/helpers.ts
@@ -0,0 +1,73 @@
+/**
+ * Shared helpers for Sencho E2E tests.
+ *
+ * CREDENTIALS: Set E2E_USERNAME and E2E_PASSWORD env vars to match
+ * your dev instance's admin account. Defaults assume the initial setup
+ * was completed with username "admin" and password "password123".
+ *
+ *   E2E_USERNAME=admin E2E_PASSWORD=mypassword npx playwright test
+ */
+import { Page, expect } from '@playwright/test';
+
+export const TEST_USERNAME = process.env.E2E_USERNAME ?? 'admin';
+export const TEST_PASSWORD = process.env.E2E_PASSWORD ?? 'password123';
+
+/** Selector for the dashboard — only present in EditorLayout, not on login/setup pages */
+const DASHBOARD_INDICATOR = 'img[alt="Sencho Logo"]';
+
+/** Returns true if the current page is the first-run setup screen */
+async function isSetupPage(page: Page): Promise<boolean> {
+  return page.locator('#confirmPassword, input[placeholder*="Confirm"]').isVisible().catch(() => false);
+}
+
+/** Returns true if the current page is the login screen */
+async function isLoginPage(page: Page): Promise<boolean> {
+  return page.locator('button:has-text("Login"), button:has-text("Sign in")').isVisible().catch(() => false);
+}
+
+/** Returns true if the dashboard (EditorLayout) is loaded */
+export async function isDashboard(page: Page): Promise<boolean> {
+  return page.locator(DASHBOARD_INDICATOR).isVisible().catch(() => false);
+}
+
+/**
+ * Navigate to the app root, complete first-run setup if needed, then log in.
+ * After this call the dashboard is guaranteed to be visible.
+ */
+export async function loginAs(page: Page, username = TEST_USERNAME, password = TEST_PASSWORD) {
+  await page.goto('/');
+
+  // Wait for the app to finish its auth check (loading spinner disappears)
+  await page.waitForTimeout(500);
+
+  // ── First-run setup ───────────────────────────────────────────────────────
+  if (await isSetupPage(page)) {
+    await page.locator('#username').fill(username);
+    await page.locator('#password').fill(password);
+    const confirmInput = page.locator('#confirmPassword');
+    if (await confirmInput.isVisible()) await confirmInput.fill(password);
+    await page.locator('button[type="submit"]').click();
+    // After setup, the app logs in automatically and shows the dashboard
+    await expect(page.locator(DASHBOARD_INDICATOR)).toBeVisible({ timeout: 10_000 });
+    return;
+  }
+
+  // ── Login screen ─────────────────────────────────────────────────────────
+  if (await isLoginPage(page)) {
+    await page.locator('#username').fill(username);
+    await page.locator('#password').fill(password);
+    await page.locator('button:has-text("Login"), button:has-text("Sign in")').first().click();
+    await expect(page.locator(DASHBOARD_INDICATOR)).toBeVisible({ timeout: 10_000 });
+    return;
+  }
+
+  // ── Already on the dashboard ──────────────────────────────────────────────
+  if (await isDashboard(page)) {
+    return;
+  }
+
+  throw new Error(
+    'loginAs: could not determine page state — expected setup, login, or dashboard. ' +
+    'Check that E2E_USERNAME and E2E_PASSWORD are set correctly.',
+  );
+}
diff --git a/e2e/nodes.spec.ts b/e2e/nodes.spec.ts
new file mode 100644
index 00000000..a2251501
--- /dev/null
+++ b/e2e/nodes.spec.ts
@@ -0,0 +1,62 @@
+/**
+ * Node management E2E tests.
+ * Tests the SSRF validation we added (C2 fix) is surfaced in the UI.
+ */
+import { test, expect } from '@playwright/test';
+import { loginAs } from './helpers';
+
+test.describe('Node management', () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAs(page);
+    // Open Settings modal then navigate to the Nodes section
+    await page.getByRole('button', { name: /settings/i }).click();
+    await page.getByRole('button', { name: /^nodes$/i }).click();
+  });
+
+  /**
+   * Open the Add Node dialog and switch the type to Remote so the API URL
+   * field becomes visible. Returns false (and skips) if the button isn't found.
+   */
+  async function openAddNodeAsRemote(page: import('@playwright/test').Page): Promise<boolean> {
+    const addBtn = page.getByRole('button', { name: /add node/i }).first();
+    if (!await addBtn.isVisible()) {
+      test.skip();
+      return false;
+    }
+    await addBtn.click();
+    // Wait for the dialog form to be ready
+    await expect(page.locator('#node-name')).toBeVisible({ timeout: 5_000 });
+    // The API URL field only renders when type === 'remote'.
+    // #node-type is a Radix UI combobox — click to open, then pick the option.
+    await page.locator('#node-type').click();
+    await page.getByRole('option', { name: /remote/i }).click();
+    // Confirm the API URL field is now visible before proceeding
+    await expect(page.locator('#node-api-url')).toBeVisible({ timeout: 3_000 });
+    return true;
+  }
+
+  test('adding a node with localhost api_url shows a validation error', async ({ page }) => {
+    if (!await openAddNodeAsRemote(page)) return;
+
+    await page.locator('#node-name').fill('bad-node');
+    await page.locator('#node-api-url').fill('http://localhost:6379');
+    // api_token is required to enable the submit button; use a dummy value since we're testing URL validation
+    await page.locator('#node-api-token').fill('dummy-token');
+    // Use .last() to target the dialog submit button, not the trigger
+    await page.getByRole('button', { name: /add node/i }).last().click();
+
+    await expect(page.getByText(/loopback|localhost/i)).toBeVisible({ timeout: 5_000 });
+  });
+
+  test('adding a node with an invalid URL shows an error', async ({ page }) => {
+    if (!await openAddNodeAsRemote(page)) return;
+
+    await page.locator('#node-name').fill('bad-url-node');
+    await page.locator('#node-api-url').fill('not-a-url-at-all');
+    // api_token is required to enable the submit button; use a dummy value since we're testing URL validation
+    await page.locator('#node-api-token').fill('dummy-token');
+    await page.getByRole('button', { name: /add node/i }).last().click();
+
+    await expect(page.getByText(/valid url|invalid url/i)).toBeVisible({ timeout: 5_000 });
+  });
+});
diff --git a/e2e/screenshots.spec.ts b/e2e/screenshots.spec.ts
new file mode 100644
index 00000000..de54dcaf
--- /dev/null
+++ b/e2e/screenshots.spec.ts
@@ -0,0 +1,52 @@
+/**
+ * Docs screenshot capture.
+ *
+ * Takes canonical screenshots of key UI views and writes them to docs/images/.
+ * Run via: npx playwright test e2e/screenshots.spec.ts
+ *
+ * The CI `update-screenshots` job runs this on every push to develop and
+ * commits any changed images back to the repo so sync-docs picks them up.
+ */
+import * as fs from 'fs';
+import * as path from 'path';
+import { test } from '@playwright/test';
+import { loginAs } from './helpers';
+
+const DOCS_IMAGES = path.resolve(__dirname, '../docs/images');
+
+test.use({
+  viewport: { width: 1280, height: 800 },
+  // Always capture — this spec exists solely to produce screenshots
+  screenshot: 'on',
+});
+
+test.beforeAll(() => {
+  fs.mkdirSync(DOCS_IMAGES, { recursive: true });
+});
+
+test('login page', async ({ page }) => {
+  await page.context().clearCookies();
+  await page.goto('/');
+  await page.waitForTimeout(600);
+  await page.screenshot({ path: path.join(DOCS_IMAGES, 'login.png'), fullPage: true });
+});
+
+test('dashboard', async ({ page }) => {
+  await loginAs(page);
+  // Wait for stats widgets to settle
+  await page.waitForTimeout(1_000);
+  await page.screenshot({ path: path.join(DOCS_IMAGES, 'dashboard.png'), fullPage: true });
+});
+
+test('stacks', async ({ page }) => {
+  await loginAs(page);
+  await page.getByRole('button', { name: 'Create Stack' }).waitFor({ timeout: 10_000 });
+  await page.screenshot({ path: path.join(DOCS_IMAGES, 'stacks.png'), fullPage: true });
+});
+
+test('resources', async ({ page }) => {
+  await loginAs(page);
+  await page.getByRole('button', { name: /resources/i }).click();
+  await page.waitForTimeout(800);
+  await page.screenshot({ path: path.join(DOCS_IMAGES, 'resources.png'), fullPage: true });
+});
diff --git a/e2e/stacks.spec.ts b/e2e/stacks.spec.ts
new file mode 100644
index 00000000..c9a55fc6
--- /dev/null
+++ b/e2e/stacks.spec.ts
@@ -0,0 +1,79 @@
+/**
+ * Stack management E2E tests — happy path CRUD.
+ */
+import { test, expect } from '@playwright/test';
+import { loginAs } from './helpers';
+
+const TEST_STACK = 'e2e-test-stack';
+
+/** Wait for the stacks sidebar to be ready (Create Stack button is always rendered). */
+async function waitForStacksLoaded(page: import('@playwright/test').Page) {
+  await expect(page.getByRole('button', { name: 'Create Stack' })).toBeVisible({ timeout: 15_000 });
+}
+
+/** Delete the test stack via the browser's authenticated fetch (so cookies are included). */
+async function deleteTestStackViaApi(page: import('@playwright/test').Page) {
+  await page.evaluate(async (name) => {
+    await fetch(`/api/stacks/${name}`, { method: 'DELETE', credentials: 'include' }).catch(() => {});
+  }, TEST_STACK);
+}
+
+test.describe('Stack management', () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAs(page);
+    await waitForStacksLoaded(page);
+  });
+
+  test('create a new stack', async ({ page }) => {
+    // Remove leftover from prior runs (using browser context auth)
+    await deleteTestStackViaApi(page);
+    await page.waitForTimeout(500);
+
+    // Reload to get a fresh sidebar without the deleted stack
+    await page.reload();
+    await loginAs(page); // may re-login if cookie expired, otherwise skips to dashboard
+    await waitForStacksLoaded(page);
+
+    await page.getByRole('button', { name: 'Create Stack' }).click();
+    await expect(page.getByRole('dialog')).toBeVisible({ timeout: 5_000 });
+
+    await page.locator('#create-stack-name').fill(TEST_STACK);
+    await page.locator('[role="dialog"]').getByRole('button', { name: 'Create' }).click();
+
+    // Wait for dialog to close (success) or error message to appear (failure)
+    await Promise.race([
+      page.getByRole('dialog').waitFor({ state: 'hidden', timeout: 8_000 }),
+      page.getByText(/already exists/i).waitFor({ state: 'visible', timeout: 8_000 }),
+    ]).catch(() => {});
+
+    // The stack should now exist — refresh and verify via the sidebar
+    await page.reload();
+    await loginAs(page);
+    await waitForStacksLoaded(page);
+
+    await expect(page.getByText(TEST_STACK).first()).toBeVisible({ timeout: 5_000 });
+  });
+
+  test('delete the test stack', async ({ page }) => {
+    // Confirm the stack exists in the sidebar
+    await expect(page.getByText(TEST_STACK).first()).toBeVisible({ timeout: 5_000 });
+
+    // Click on the stack to open the editor
+    await page.getByText(TEST_STACK).first().click();
+
+    // The toolbar Delete button has the Lucide Trash2 icon
+    const deleteBtn = page.locator('button:has(.lucide-trash-2)');
+    await expect(deleteBtn).toBeVisible({ timeout: 10_000 });
+    await deleteBtn.click();
+
+    // AlertDialog confirmation
+    await expect(page.getByRole('alertdialog')).toBeVisible({ timeout: 5_000 });
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Delete' }).click();
+
+    // Stack should no longer appear in the sidebar (exact match to avoid false positives from
+    // similarly-named stacks; scoped to the CommandList)
+    await expect(
+      page.locator('[role="listbox"]').getByText(TEST_STACK, { exact: true })
+    ).not.toBeVisible({ timeout: 8_000 });
+  });
+});
diff --git a/frontend/components.json b/frontend/components.json
index abd3aa3e..6770ae83 100644
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -19,5 +19,7 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "registries": {}
+  "registries": {
+    "@animate-ui": "https://animate-ui.com/r/{name}.json"
+  }
 }
diff --git a/frontend/index.html b/frontend/index.html
index 6296104f..42884c56 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,6 +6,9 @@
   <link rel="icon" type="image/png" href="/sencho-logo.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Sencho</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=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap" rel="stylesheet" />
   <script>
     (function () {
       try {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1b755fe0..3f712d39 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -31,10 +31,14 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
+        "geist": "^1.7.0",
         "lucide-react": "^0.575.0",
+        "motion": "^12.38.0",
         "next-themes": "^0.4.6",
+        "radix-ui": "^1.4.3",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-use-measure": "^2.1.7",
         "recharts": "^2.15.4",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
@@ -351,6 +355,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz",
+      "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
@@ -1040,6 +1054,472 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1113,6 +1593,140 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@next/env": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.1.tgz",
+      "integrity": "sha512-n8P/HCkIWW+gVal2Z8XqXJ6aB3J0tuM29OcHpCsobWlChH/SITBs1DFBk/HajgrwDkqqBXPbuUuzgDvUekREPg==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.1.tgz",
+      "integrity": "sha512-BwZ8w8YTaSEr2HIuXLMLxIdElNMPvY9fLqb20LX9A9OMGtJilhHLbCL3ggyd0TwjmMcTxi0XXt+ur1vWUoxj2Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.1.tgz",
+      "integrity": "sha512-/vrcE6iQSJq3uL3VGVHiXeaKbn8Es10DGTGRJnRZlkNQQk3kaNtAJg8Y6xuAlrx/6INKVjkfi5rY0iEXorZ6uA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.1.tgz",
+      "integrity": "sha512-uLn+0BK+C31LTVbQ/QU+UaVrV0rRSJQ8RfniQAHPghDdgE+SlroYqcmFnO5iNjNfVWCyKZHYrs3Nl0mUzWxbBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.1.tgz",
+      "integrity": "sha512-ssKq6iMRnHdnycGp9hCuGnXJZ0YPr4/wNwrfE5DbmvEcgl9+yv97/Kq3TPVDfYome1SW5geciLB9aiEqKXQjlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.1.tgz",
+      "integrity": "sha512-HQm7SrHRELJ30T1TSmT706IWovFFSRGxfgUkyWJZF/RKBMdbdRWJuFrcpDdE5vy9UXjFOx6L3mRdqH04Mmx0hg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.1.tgz",
+      "integrity": "sha512-aV2iUaC/5HGEpbBkE+4B8aHIudoOy5DYekAKOMSHoIYQ66y/wIVeaRx8MS2ZMdxe/HIXlMho4ubdZs/J8441Tg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.1.tgz",
+      "integrity": "sha512-IXdNgiDHaSk0ZUJ+xp0OQTdTgnpx1RCfRTalhn3cjOP+IddTMINwA7DXZrwTmGDO8SUr5q2hdP/du4DcrB1GxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.1.tgz",
+      "integrity": "sha512-qvU+3a39Hay+ieIztkGSbF7+mccbbg1Tk25hc4JDylf8IHjYmY/Zm64Qq1602yPyQqvie+vf5T/uPwNxDNIoeg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@@ -1125,6 +1739,60 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-alert-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
@@ -1194,6 +1862,56 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
+      "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-checkbox": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
@@ -1224,6 +1942,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -1298,6 +2046,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+      "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
@@ -1463,6 +2239,57 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz",
+      "integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-hover-card": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
@@ -1616,6 +2443,138 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
+      "integrity": "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
+      "integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz",
+      "integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz",
+      "integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
@@ -1792,6 +2751,62 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+      "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -2071,6 +3086,146 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz",
+      "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
+      "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz",
+      "integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz",
+      "integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-toggle-group": "1.1.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
@@ -2193,6 +3348,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -2296,9 +3469,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.58.0.tgz",
-      "integrity": "sha512-mr0tmS/4FoVk1cnaeN244A/wjvGDNItZKR8hRhnmCzygyRXYtKF5jVDSIILR1U97CTzAYmbgIj/Dukg62ggG5w==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.1.tgz",
+      "integrity": "sha512-xB0b51TB7IfDEzAojXahmr+gfA00uYVInJGgNNkeQG6RPnCPGr7udsylFLTubuIUSRE6FkcI1NElyRt83PP5oQ==",
       "cpu": [
         "arm"
       ],
@@ -2310,9 +3483,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.58.0.tgz",
-      "integrity": "sha512-+s++dbp+/RTte62mQD9wLSbiMTV+xr/PeRJEc/sFZFSBRlHPNPVaf5FXlzAL77Mr8FtSfQqCN+I598M8U41ccQ==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.1.tgz",
+      "integrity": "sha512-XOjPId0qwSDKHaIsdzHJtKCxX0+nH8MhBwvrNsT7tVyKmdTx1jJ4XzN5RZXCdTzMpufLb+B8llTC0D8uCrLhcw==",
       "cpu": [
         "arm64"
       ],
@@ -2324,9 +3497,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.58.0.tgz",
-      "integrity": "sha512-MFWBwTcYs0jZbINQBXHfSrpSQJq3IUOakcKPzfeSznONop14Pxuqa0Kg19GD0rNBMPQI2tFtu3UzapZpH0Uc1Q==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.1.tgz",
+      "integrity": "sha512-vQuRd28p0gQpPrS6kppd8IrWmFo42U8Pz1XLRjSZXq5zCqyMDYFABT7/sywL11mO1EL10Qhh7MVPEwkG8GiBeg==",
       "cpu": [
         "arm64"
       ],
@@ -2338,9 +3511,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.58.0.tgz",
-      "integrity": "sha512-yiKJY7pj9c9JwzuKYLFaDZw5gma3fI9bkPEIyofvVfsPqjCWPglSHdpdwXpKGvDeYDms3Qal8qGMEHZ1M/4Udg==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.1.tgz",
+      "integrity": "sha512-x6VG6U29+Ivlnajrg1IHdzXeAwSoEHBFVO+CtC9Brugx6de712CUJobRUxsIA0KYrQvCmzNrMPFTT1A4CCqNTg==",
       "cpu": [
         "x64"
       ],
@@ -2352,9 +3525,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.58.0.tgz",
-      "integrity": "sha512-x97kCoBh5MOevpn/CNK9W1x8BEzO238541BGWBc315uOlN0AD/ifZ1msg+ZQB05Ux+VF6EcYqpiagfLJ8U3LvQ==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.1.tgz",
+      "integrity": "sha512-Sgi0Uo6t1YCHJMNO3Y8+bm+SvOanUGkoZKn/VJPwYUe2kp31X5KnXmzKd/NjW8iA3gFcfNZ64zh14uOGrIllCQ==",
       "cpu": [
         "arm64"
       ],
@@ -2366,9 +3539,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.58.0.tgz",
-      "integrity": "sha512-Aa8jPoZ6IQAG2eIrcXPpjRcMjROMFxCt1UYPZZtCxRV68WkuSigYtQ/7Zwrcr2IvtNJo7T2JfDXyMLxq5L4Jlg==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.1.tgz",
+      "integrity": "sha512-AM4xnwEZwukdhk7laMWfzWu9JGSVnJd+Fowt6Fd7QW1nrf3h0Hp7Qx5881M4aqrUlKBCybOxz0jofvIIfl7C5g==",
       "cpu": [
         "x64"
       ],
@@ -2380,9 +3553,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.58.0.tgz",
-      "integrity": "sha512-Ob8YgT5kD/lSIYW2Rcngs5kNB/44Q2RzBSPz9brf2WEtcGR7/f/E9HeHn1wYaAwKBni+bdXEwgHvUd0x12lQSA==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.1.tgz",
+      "integrity": "sha512-KUizqxpwaR2AZdAUsMWfL/C94pUu7TKpoPd88c8yFVixJ+l9hejkrwoK5Zj3wiNh65UeyryKnJyxL1b7yNqFQA==",
       "cpu": [
         "arm"
       ],
@@ -2394,9 +3567,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.58.0.tgz",
-      "integrity": "sha512-K+RI5oP1ceqoadvNt1FecL17Qtw/n9BgRSzxif3rTL2QlIu88ccvY+Y9nnHe/cmT5zbH9+bpiJuG1mGHRVwF4Q==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.1.tgz",
+      "integrity": "sha512-MZoQ/am77ckJtZGFAtPucgUuJWiop3m2R3lw7tC0QCcbfl4DRhQUBUkHWCkcrT3pqy5Mzv5QQgY6Dmlba6iTWg==",
       "cpu": [
         "arm"
       ],
@@ -2408,9 +3581,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.58.0.tgz",
-      "integrity": "sha512-T+17JAsCKUjmbopcKepJjHWHXSjeW7O5PL7lEFaeQmiVyw4kkc5/lyYKzrv6ElWRX/MrEWfPiJWqbTvfIvjM1Q==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.1.tgz",
+      "integrity": "sha512-Sez95TP6xGjkWB1608EfhCX1gdGrO5wzyN99VqzRtC17x/1bhw5VU1V0GfKUwbW/Xr1J8mSasoFoJa6Y7aGGSA==",
       "cpu": [
         "arm64"
       ],
@@ -2422,9 +3595,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.58.0.tgz",
-      "integrity": "sha512-cCePktb9+6R9itIJdeCFF9txPU7pQeEHB5AbHu/MKsfH/k70ZtOeq1k4YAtBv9Z7mmKI5/wOLYjQ+B9QdxR6LA==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.1.tgz",
+      "integrity": "sha512-9Cs2Seq98LWNOJzR89EGTZoiP8EkZ9UbQhBlDgfAkM6asVna1xJ04W2CLYWDN/RpUgOjtQvcv8wQVi1t5oQazA==",
       "cpu": [
         "arm64"
       ],
@@ -2436,9 +3609,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.58.0.tgz",
-      "integrity": "sha512-iekUaLkfliAsDl4/xSdoCJ1gnnIXvoNz85C8U8+ZxknM5pBStfZjeXgB8lXobDQvvPRCN8FPmmuTtH+z95HTmg==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.1.tgz",
+      "integrity": "sha512-n9yqttftgFy7IrNEnHy1bOp6B4OSe8mJDiPkT7EqlM9FnKOwUMnCK62ixW0Kd9Clw0/wgvh8+SqaDXMFvw3KqQ==",
       "cpu": [
         "loong64"
       ],
@@ -2450,9 +3623,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.58.0.tgz",
-      "integrity": "sha512-68ofRgJNl/jYJbxFjCKE7IwhbfxOl1muPN4KbIqAIe32lm22KmU7E8OPvyy68HTNkI2iV/c8y2kSPSm2mW/Q9Q==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.1.tgz",
+      "integrity": "sha512-SfpNXDzVTqs/riak4xXcLpq5gIQWsqGWMhN1AGRQKB4qGSs4r0sEs3ervXPcE1O9RsQ5bm8Muz6zmQpQnPss1g==",
       "cpu": [
         "loong64"
       ],
@@ -2464,9 +3637,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.58.0.tgz",
-      "integrity": "sha512-dpz8vT0i+JqUKuSNPCP5SYyIV2Lh0sNL1+FhM7eLC457d5B9/BC3kDPp5BBftMmTNsBarcPcoz5UGSsnCiw4XQ==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.1.tgz",
+      "integrity": "sha512-LjaChED0wQnjKZU+tsmGbN+9nN1XhaWUkAlSbTdhpEseCS4a15f/Q8xC2BN4GDKRzhhLZpYtJBZr2NZhR0jvNw==",
       "cpu": [
         "ppc64"
       ],
@@ -2478,9 +3651,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.58.0.tgz",
-      "integrity": "sha512-4gdkkf9UJ7tafnweBCR/mk4jf3Jfl0cKX9Np80t5i78kjIH0ZdezUv/JDI2VtruE5lunfACqftJ8dIMGN4oHew==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.1.tgz",
+      "integrity": "sha512-ojW7iTJSIs4pwB2xV6QXGwNyDctvXOivYllttuPbXguuKDX5vwpqYJsHc6D2LZzjDGHML414Tuj3LvVPe1CT1A==",
       "cpu": [
         "ppc64"
       ],
@@ -2492,9 +3665,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.58.0.tgz",
-      "integrity": "sha512-YFS4vPnOkDTD/JriUeeZurFYoJhPf9GQQEF/v4lltp3mVcBmnsAdjEWhr2cjUCZzZNzxCG0HZOvJU44UGHSdzw==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.1.tgz",
+      "integrity": "sha512-FP+Q6WTcxxvsr0wQczhSE+tOZvFPV8A/mUE6mhZYFW9/eea/y/XqAgRoLLMuE9Cz0hfX5bi7p116IWoB+P237A==",
       "cpu": [
         "riscv64"
       ],
@@ -2506,9 +3679,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.58.0.tgz",
-      "integrity": "sha512-x2xgZlFne+QVNKV8b4wwaCS8pwq3y14zedZ5DqLzjdRITvreBk//4Knbcvm7+lWmms9V9qFp60MtUd0/t/PXPw==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.1.tgz",
+      "integrity": "sha512-L1uD9b/Ig8Z+rn1KttCJjwhN1FgjRMBKsPaBsDKkfUl7GfFq71pU4vWCnpOsGljycFEbkHWARZLf4lMYg3WOLw==",
       "cpu": [
         "riscv64"
       ],
@@ -2520,9 +3693,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.58.0.tgz",
-      "integrity": "sha512-jIhrujyn4UnWF8S+DHSkAkDEO3hLX0cjzxJZPLF80xFyzyUIYgSMRcYQ3+uqEoyDD2beGq7Dj7edi8OnJcS/hg==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.1.tgz",
+      "integrity": "sha512-EZc9NGTk/oSUzzOD4nYY4gIjteo2M3CiozX6t1IXGCOdgxJTlVu/7EdPeiqeHPSIrxkLhavqpBAUCfvC6vBOug==",
       "cpu": [
         "s390x"
       ],
@@ -2534,9 +3707,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.58.0.tgz",
-      "integrity": "sha512-+410Srdoh78MKSJxTQ+hZ/Mx+ajd6RjjPwBPNd0R3J9FtL6ZA0GqiiyNjCO9In0IzZkCNrpGymSfn+kgyPQocg==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.1.tgz",
+      "integrity": "sha512-NQ9KyU1Anuy59L8+HHOKM++CoUxrQWrZWXRik4BJFm+7i5NP6q/SW43xIBr80zzt+PDBJ7LeNmloQGfa0JGk0w==",
       "cpu": [
         "x64"
       ],
@@ -2548,9 +3721,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.58.0.tgz",
-      "integrity": "sha512-ZjMyby5SICi227y1MTR3VYBpFTdZs823Rs/hpakufleBoufoOIB6jtm9FEoxn/cgO7l6PM2rCEl5Kre5vX0QrQ==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.1.tgz",
+      "integrity": "sha512-GZkLk2t6naywsveSFBsEb0PLU+JC9ggVjbndsbG20VPhar6D1gkMfCx4NfP9owpovBXTN+eRdqGSkDGIxPHhmQ==",
       "cpu": [
         "x64"
       ],
@@ -2562,9 +3735,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.58.0.tgz",
-      "integrity": "sha512-ds4iwfYkSQ0k1nb8LTcyXw//ToHOnNTJtceySpL3fa7tc/AsE+UpUFphW126A6fKBGJD5dhRvg8zw1rvoGFxmw==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.1.tgz",
+      "integrity": "sha512-1hjG9Jpl2KDOetr64iQd8AZAEjkDUUK5RbDkYWsViYLC1op1oNzdjMJeFiofcGhqbNTaY2kfgqowE7DILifsrA==",
       "cpu": [
         "x64"
       ],
@@ -2576,9 +3749,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.58.0.tgz",
-      "integrity": "sha512-fd/zpJniln4ICdPkjWFhZYeY/bpnaN9pGa6ko+5WD38I0tTqk9lXMgXZg09MNdhpARngmxiCg0B0XUamNw/5BQ==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.1.tgz",
+      "integrity": "sha512-ARoKfflk0SiiYm3r1fmF73K/yB+PThmOwfWCk1sr7x/k9dc3uGLWuEE9if+Pw21el8MSpp3TMnG5vLNsJ/MMGQ==",
       "cpu": [
         "arm64"
       ],
@@ -2590,9 +3763,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.58.0.tgz",
-      "integrity": "sha512-YpG8dUOip7DCz3nr/JUfPbIUo+2d/dy++5bFzgi4ugOGBIox+qMbbqt/JoORwvI/C9Kn2tz6+Bieoqd5+B1CjA==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.1.tgz",
+      "integrity": "sha512-oOST61G6VM45Mz2vdzWMr1s2slI7y9LqxEV5fCoWi2MDONmMvgsJVHSXxce/I2xOSZPTZ47nDPOl1tkwKWSHcw==",
       "cpu": [
         "arm64"
       ],
@@ -2604,9 +3777,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.58.0.tgz",
-      "integrity": "sha512-b9DI8jpFQVh4hIXFr0/+N/TzLdpBIoPzjt0Rt4xJbW3mzguV3mduR9cNgiuFcuL/TeORejJhCWiAXe3E/6PxWA==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.1.tgz",
+      "integrity": "sha512-x5WgLi5dWpRz7WclKBGEF15LcWTh0ewrHM6Cq4A+WUbkysUMZNeqt05bwPonOQ3ihPS/WMhAZV5zB1DfnI4Sxg==",
       "cpu": [
         "ia32"
       ],
@@ -2618,9 +3791,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.58.0.tgz",
-      "integrity": "sha512-CSrVpmoRJFN06LL9xhkitkwUcTZtIotYAF5p6XOR2zW0Zz5mzb3IPpcoPhB02frzMHFNo1reQ9xSF5fFm3hUsQ==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.1.tgz",
+      "integrity": "sha512-wS+zHAJRVP5zOL0e+a3V3E/NTEwM2HEvvNKoDy5Xcfs0o8lljxn+EAFPkUsxihBdmDq1JWzXmmB9cbssCPdxxw==",
       "cpu": [
         "x64"
       ],
@@ -2632,9 +3805,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.58.0.tgz",
-      "integrity": "sha512-QFsBgQNTnh5K0t/sBsjJLq24YVqEIVkGpfN2VHsnN90soZyhaiA9UUHufcctVNL4ypJY0wrwad0wslx2KJQ1/w==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.1.tgz",
+      "integrity": "sha512-rhHyrMeLpErT/C7BxcEsU4COHQUzHyrPYW5tOZUeUhziNtRuYxmDWvqQqzpuUt8xpOgmbKa1btGXfnA/ANVO+g==",
       "cpu": [
         "x64"
       ],
@@ -2645,6 +3818,15 @@
         "win32"
       ]
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.1.tgz",
@@ -3279,13 +4461,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^2.0.2"
       },
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -3435,9 +4617,9 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3497,7 +4679,6 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
       "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
-      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.cjs"
@@ -3566,7 +4747,6 @@
       "version": "1.0.30001770",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001770.tgz",
       "integrity": "sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3612,6 +4792,12 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -3848,7 +5034,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -4249,12 +5435,39 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/framer-motion": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
+      "integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.38.0",
+        "motion-utils": "^12.36.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4270,6 +5483,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/geist": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/geist/-/geist-1.7.0.tgz",
+      "integrity": "sha512-ZaoiZwkSf0DwwB1ncdLKp+ggAldqxl5L1+SXaNIBGkPAqcu+xjVJLxlf3/S8vLt9UHx1xu5fz3lbzKCj5iOVdQ==",
+      "license": "SIL OPEN FONT LICENSE",
+      "peerDependencies": {
+        "next": ">=13.2.0"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -4869,9 +6091,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -4892,6 +6114,47 @@
         "marked": "14.0.0"
       }
     },
+    "node_modules/motion": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.38.0.tgz",
+      "integrity": "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.38.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz",
+      "integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.36.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.36.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz",
+      "integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4903,7 +6166,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4925,6 +6187,59 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/next": {
+      "version": "16.2.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.2.1.tgz",
+      "integrity": "sha512-VaChzNL7o9rbfdt60HUj8tev4m6d7iC1igAy157526+cJlXOQu5LzsBXNT+xaJnTP/k+utSX5vMv7m0G+zKH+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "16.2.1",
+        "@swc/helpers": "0.5.15",
+        "baseline-browser-mapping": "^2.9.19",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "16.2.1",
+        "@next/swc-darwin-x64": "16.2.1",
+        "@next/swc-linux-arm64-gnu": "16.2.1",
+        "@next/swc-linux-arm64-musl": "16.2.1",
+        "@next/swc-linux-x64-gnu": "16.2.1",
+        "@next/swc-linux-x64-musl": "16.2.1",
+        "@next/swc-win32-arm64-msvc": "16.2.1",
+        "@next/swc-win32-x64-msvc": "16.2.1",
+        "sharp": "^0.34.5"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/next-themes": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
@@ -4935,6 +6250,34 @@
         "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -5038,7 +6381,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -5121,6 +6463,147 @@
         "node": ">=6"
       }
     },
+    "node_modules/radix-ui": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
+      "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-accessible-icon": "1.1.7",
+        "@radix-ui/react-accordion": "1.2.12",
+        "@radix-ui/react-alert-dialog": "1.1.15",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-aspect-ratio": "1.1.7",
+        "@radix-ui/react-avatar": "1.1.10",
+        "@radix-ui/react-checkbox": "1.3.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-context-menu": "2.2.16",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-form": "0.1.8",
+        "@radix-ui/react-hover-card": "1.1.15",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-menubar": "1.1.16",
+        "@radix-ui/react-navigation-menu": "1.2.14",
+        "@radix-ui/react-one-time-password-field": "0.1.8",
+        "@radix-ui/react-password-toggle-field": "0.1.3",
+        "@radix-ui/react-popover": "1.1.15",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-progress": "1.1.7",
+        "@radix-ui/react-radio-group": "1.3.8",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-scroll-area": "1.2.10",
+        "@radix-ui/react-select": "2.2.6",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-slider": "1.3.6",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-switch": "1.2.6",
+        "@radix-ui/react-tabs": "1.1.13",
+        "@radix-ui/react-toast": "1.2.15",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-toggle-group": "1.1.11",
+        "@radix-ui/react-toolbar": "1.1.11",
+        "@radix-ui/react-tooltip": "1.2.8",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-escape-keydown": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react": {
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
@@ -5260,6 +6743,21 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/recharts": {
       "version": "2.15.4",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
@@ -5303,9 +6801,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.58.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.58.0.tgz",
-      "integrity": "sha512-wbT0mBmWbIvvq8NeEYWWvevvxnOyhKChir47S66WCxw1SXqhw7ssIYejnQEVt7XYQpsj2y8F9PM+Cr3SNEa0gw==",
+      "version": "4.59.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.1.tgz",
+      "integrity": "sha512-iZKH8BeoCwTCBTZBZWQQMreekd4mdomwdjIQ40GC1oZm6o+8PnNMIxFOiCsGMWeS8iDJ7KZcl7KwmKk/0HOQpA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5319,31 +6817,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.58.0",
-        "@rollup/rollup-android-arm64": "4.58.0",
-        "@rollup/rollup-darwin-arm64": "4.58.0",
-        "@rollup/rollup-darwin-x64": "4.58.0",
-        "@rollup/rollup-freebsd-arm64": "4.58.0",
-        "@rollup/rollup-freebsd-x64": "4.58.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.58.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.58.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.58.0",
-        "@rollup/rollup-linux-arm64-musl": "4.58.0",
-        "@rollup/rollup-linux-loong64-gnu": "4.58.0",
-        "@rollup/rollup-linux-loong64-musl": "4.58.0",
-        "@rollup/rollup-linux-ppc64-gnu": "4.58.0",
-        "@rollup/rollup-linux-ppc64-musl": "4.58.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.58.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.58.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.58.0",
-        "@rollup/rollup-linux-x64-gnu": "4.58.0",
-        "@rollup/rollup-linux-x64-musl": "4.58.0",
-        "@rollup/rollup-openbsd-x64": "4.58.0",
-        "@rollup/rollup-openharmony-arm64": "4.58.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.58.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.58.0",
-        "@rollup/rollup-win32-x64-gnu": "4.58.0",
-        "@rollup/rollup-win32-x64-msvc": "4.58.0",
+        "@rollup/rollup-android-arm-eabi": "4.59.1",
+        "@rollup/rollup-android-arm64": "4.59.1",
+        "@rollup/rollup-darwin-arm64": "4.59.1",
+        "@rollup/rollup-darwin-x64": "4.59.1",
+        "@rollup/rollup-freebsd-arm64": "4.59.1",
+        "@rollup/rollup-freebsd-x64": "4.59.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.59.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.59.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.59.1",
+        "@rollup/rollup-linux-arm64-musl": "4.59.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.59.1",
+        "@rollup/rollup-linux-loong64-musl": "4.59.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.59.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.59.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.59.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.59.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.59.1",
+        "@rollup/rollup-linux-x64-gnu": "4.59.1",
+        "@rollup/rollup-linux-x64-musl": "4.59.1",
+        "@rollup/rollup-openbsd-x64": "4.59.1",
+        "@rollup/rollup-openharmony-arm64": "4.59.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.59.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.59.1",
+        "@rollup/rollup-win32-x64-gnu": "4.59.1",
+        "@rollup/rollup-win32-x64-msvc": "4.59.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -5363,6 +6861,64 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/sharp/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5400,7 +6956,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -5425,6 +6980,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -5663,6 +7241,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/victory-vendor": {
       "version": "36.9.2",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f27a6570..e592b70a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,10 +33,14 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "geist": "^1.7.0",
     "lucide-react": "^0.575.0",
+    "motion": "^12.38.0",
     "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-use-measure": "^2.1.7",
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
diff --git a/frontend/public/sencho-logo-dark.png b/frontend/public/sencho-logo-dark.png
new file mode 100644
index 00000000..525771ee
Binary files /dev/null and b/frontend/public/sencho-logo-dark.png differ
diff --git a/frontend/public/sencho-logo-light.png b/frontend/public/sencho-logo-light.png
new file mode 100644
index 00000000..9ada4de0
Binary files /dev/null and b/frontend/public/sencho-logo-light.png differ
diff --git a/frontend/public/sencho-logo.png b/frontend/public/sencho-logo.png
deleted file mode 100644
index 9871cdc8..00000000
Binary files a/frontend/public/sencho-logo.png and /dev/null differ
diff --git a/frontend/src/components/AppStoreView.tsx b/frontend/src/components/AppStoreView.tsx
index 0fc6e1b9..61401dbe 100644
--- a/frontend/src/components/AppStoreView.tsx
+++ b/frontend/src/components/AppStoreView.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
@@ -17,6 +17,11 @@ export interface TemplateEnv {
     default?: string;
 }
 
+interface TemplateVolume {
+    container?: string;
+    bind?: string;
+}
+
 export interface Template {
     type?: number;
     title: string;
@@ -24,13 +29,14 @@ export interface Template {
     logo?: string;
     image?: string;
     ports?: string[];
-    volumes?: any[];
+    volumes?: TemplateVolume[];
     env?: TemplateEnv[];
     categories?: string[];
     github_url?: string;
     docs_url?: string;
     architectures?: string[];
     stars?: number;
+    source?: string;
 }
 
 interface AppStoreViewProps {
@@ -48,6 +54,7 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
     const [isDeploying, setIsDeploying] = useState(false);
     const [loading, setLoading] = useState(true);
 
+    const [selectedCategory, setSelectedCategory] = useState<string>('All');
     const [imgErrors, setImgErrors] = useState<Record<string, boolean>>({});
     const [portVars, setPortVars] = useState<Record<string, string>>({});
     const [isDescExpanded, setIsDescExpanded] = useState(false);
@@ -66,8 +73,8 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
             if (!res.ok) throw new Error('Failed to fetch templates');
             const data = await res.json();
             setTemplates(data || []);
-        } catch (err: any) {
-            toast.error(err.message || "Failed to load App Shop");
+        } catch (err) {
+            toast.error((err as Error).message || "Failed to load App Shop");
         } finally {
             setLoading(false);
         }
@@ -93,7 +100,7 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
 
         // Initialize Volumes
         const initVols: Record<string, string> = {};
-        t.volumes?.forEach((v: any) => {
+        t.volumes?.forEach((v) => {
             if (v.container) {
                 initVols[v.container] = v.bind || `./${v.container.split('/').filter(Boolean).pop() || 'data'}`;
             }
@@ -144,7 +151,7 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
 
         // Process Volumes
         if (modifiedTemplate.volumes) {
-            modifiedTemplate.volumes = modifiedTemplate.volumes.map((v: any) => {
+            modifiedTemplate.volumes = modifiedTemplate.volumes.map((v) => {
                 if (v.container && volVars[v.container] !== undefined) {
                     return { ...v, bind: volVars[v.container] };
                 }
@@ -173,18 +180,28 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
             toast.success(`${selectedTemplate?.title} deployed successfully!`);
             setIsSheetOpen(false);
             onDeploySuccess(stackName.trim());
-        } catch (err: any) {
-            toast.error(err.message || 'Deployment failed');
+        } catch (err) {
+            toast.error((err as Error).message || 'Deployment failed');
         } finally {
             setIsDeploying(false);
         }
     };
 
-    const filtered = templates.filter(t =>
-        t.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        t.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (t.categories && t.categories.join(' ').toLowerCase().includes(searchQuery.toLowerCase()))
-    );
+    const categories = useMemo(() => {
+        const cats = new Set<string>();
+        templates.forEach(t => t.categories?.forEach(c => cats.add(c)));
+        return ['All', ...Array.from(cats).sort()];
+    }, [templates]);
+
+    const filtered = useMemo(() => templates.filter(t => {
+        const matchesCategory = selectedCategory === 'All' || t.categories?.includes(selectedCategory);
+        const q = searchQuery.toLowerCase();
+        const matchesSearch = !q ||
+            t.title.toLowerCase().includes(q) ||
+            t.description?.toLowerCase().includes(q) ||
+            (t.categories && t.categories.join(' ').toLowerCase().includes(q));
+        return matchesCategory && matchesSearch;
+    }), [templates, selectedCategory, searchQuery]);
 
     return (
         <div className="flex flex-col h-full space-y-6">
@@ -196,11 +213,32 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
                         placeholder="Search App Store..."
                         className="pl-8"
                         value={searchQuery}
-                        onChange={(e) => setSearchQuery(e.target.value)}
+                        onChange={(e) => { setSearchQuery(e.target.value); }}
                     />
                 </div>
             </div>
 
+            {!loading && categories.length > 1 && (
+                <div className="flex items-center gap-2">
+                    <div className="flex gap-1.5 overflow-x-auto pb-1 flex-1 scrollbar-none">
+                        {categories.map(cat => (
+                            <Button
+                                key={cat}
+                                variant={selectedCategory === cat ? 'default' : 'outline'}
+                                size="sm"
+                                className="shrink-0 h-7 text-xs px-3 rounded-full"
+                                onClick={() => setSelectedCategory(cat)}
+                            >
+                                {cat}
+                            </Button>
+                        ))}
+                    </div>
+                    <span className="text-xs text-muted-foreground shrink-0 tabular-nums">
+                        {filtered.length} app{filtered.length !== 1 ? 's' : ''}
+                    </span>
+                </div>
+            )}
+
             <div className="flex-1 overflow-auto">
                 {loading ? (
                     <div className="flex items-center justify-center h-48">
@@ -233,7 +271,12 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
                                     <CardContent className="pt-0 mt-auto">
                                         <div className="flex flex-wrap gap-1 mt-2">
                                             {t.categories.slice(0, 3).map(c => (
-                                                <Badge variant="secondary" key={c} className="text-[10px] px-1.5 py-0 pb-0.5">
+                                                <Badge
+                                                    variant={selectedCategory === c ? 'default' : 'secondary'}
+                                                    key={c}
+                                                    className="text-[10px] px-1.5 py-0 pb-0.5 cursor-pointer"
+                                                    onClick={(e) => { e.stopPropagation(); setSelectedCategory(c); }}
+                                                >
                                                     {c}
                                                 </Badge>
                                             ))}
@@ -361,14 +404,15 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
                                     {selectedTemplate.volumes && selectedTemplate.volumes.length > 0 && (
                                         <div className="space-y-4 pt-4 border-t">
                                             <h4 className="font-semibold">Volumes (Host : Container)</h4>
-                                            {selectedTemplate.volumes.map((v: any, idx: number) => {
-                                                if (!v.container) return null;
+                                            {selectedTemplate.volumes.map((v, idx: number) => {
+                                                const containerPath = v.container;
+                                                if (!containerPath) return null;
                                                 return (
                                                     <div key={idx} className="space-y-1.5">
-                                                        <Label className="text-xs text-muted-foreground font-mono">Container: {v.container}</Label>
+                                                        <Label className="text-xs text-muted-foreground font-mono">Container: {containerPath}</Label>
                                                         <Input
-                                                            value={volVars[v.container] !== undefined ? volVars[v.container] : ''}
-                                                            onChange={(e) => setVolVars(prev => ({ ...prev, [v.container]: e.target.value }))}
+                                                            value={volVars[containerPath] !== undefined ? volVars[containerPath] : ''}
+                                                            onChange={(e) => setVolVars(prev => ({ ...prev, [containerPath]: e.target.value }))}
                                                             placeholder={`/path/to/host/dir`}
                                                         />
                                                     </div>
diff --git a/frontend/src/components/BashExecModal.tsx b/frontend/src/components/BashExecModal.tsx
index fa172c85..f72fcd27 100644
--- a/frontend/src/components/BashExecModal.tsx
+++ b/frontend/src/components/BashExecModal.tsx
@@ -5,6 +5,8 @@ import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import '@xterm/xterm/css/xterm.css';
 
+type TerminalContainer = HTMLDivElement & { __resizeObserver?: ResizeObserver };
+
 interface BashExecModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -191,14 +193,15 @@ export default function BashExecModal({ isOpen, onClose, containerId, containerN
       resizeObserver.observe(containerEl);
 
       // Store observer cleanup on the container element for later
-      (containerEl as any).__resizeObserver = resizeObserver;
+      (containerEl as TerminalContainer).__resizeObserver = resizeObserver;
     }
 
     return () => {
       // Clean up ResizeObserver
-      if (terminalRef.current && (terminalRef.current as any).__resizeObserver) {
-        (terminalRef.current as any).__resizeObserver.disconnect();
-        delete (terminalRef.current as any).__resizeObserver;
+      const el = terminalRef.current as TerminalContainer | null;
+      if (el?.__resizeObserver) {
+        el.__resizeObserver.disconnect();
+        delete el.__resizeObserver;
       }
     };
   }, [isOpen, containerId, cleanup]);
diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx
index 7138c711..a065ff77 100644
--- a/frontend/src/components/EditorLayout.tsx
+++ b/frontend/src/components/EditorLayout.tsx
@@ -1,4 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
+import { motion } from 'motion/react';
+
+type Theme = 'light' | 'dark' | 'auto';
 import Editor from '@monaco-editor/react';
 import TerminalComponent from './Terminal';
 import ErrorBoundary from './ErrorBoundary';
@@ -15,7 +18,7 @@ import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Badge } from './ui/badge';
 import { Plus, Trash2, Play, Square, Save, Terminal, RotateCw, CloudDownload, Pencil, X, Home, LogOut, ExternalLink, Bell, Settings, MoreVertical, BellRing, Rocket, HardDrive, ScrollText, Activity, Server } from 'lucide-react';
 import { useAuth } from '@/context/AuthContext';
-import { apiFetch } from '@/lib/api';
+import { apiFetch, fetchForNode } from '@/lib/api';
 import { toast } from 'sonner';
 import { Label } from './ui/label';
 import { Command, CommandInput, CommandList, CommandItem } from './ui/command';
@@ -32,6 +35,7 @@ import { AppStoreView } from './AppStoreView';
 import { LogViewer } from './LogViewer';
 import { GlobalObservabilityView } from './GlobalObservabilityView';
 import { useNodes } from '@/context/NodeContext';
+import type { Node } from '@/context/NodeContext';
 
 interface ContainerInfo {
   Id: string;
@@ -45,6 +49,16 @@ interface StackStatus {
   [key: string]: 'running' | 'exited' | 'unknown';
 }
 
+interface Notification {
+  id: number;
+  level: 'info' | 'warning' | 'error';
+  message: string;
+  timestamp: number;
+  is_read: number; // 0 | 1 (SQLite boolean)
+  nodeId: number;
+  nodeName: string;
+}
+
 const formatBytes = (bytes: number) => {
   if (bytes === 0) return '0 B';
   const k = 1024;
@@ -56,6 +70,12 @@ const formatBytes = (bytes: number) => {
 export default function EditorLayout() {
   const { logout } = useAuth();
   const { nodes, activeNode, setActiveNode } = useNodes();
+  // Stable ref so notification callbacks always read the latest nodes list
+  // without needing nodes in their dependency arrays (which would cause loops).
+  const nodesRef = useRef<Node[]>([]);
+  nodesRef.current = nodes;
+  // Tracks cleanup functions for per-remote-node notification WebSocket connections.
+  const remoteNotifWsRef = useRef<Map<number, () => void>>(new Map());
   const [files, setFiles] = useState<string[]>([]);
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [content, setContent] = useState<string>('');
@@ -67,7 +87,15 @@ export default function EditorLayout() {
   const [selectedEnvFile, setSelectedEnvFile] = useState<string>('');
   const [containers, setContainers] = useState<ContainerInfo[]>([]);
   const [containerStats, setContainerStats] = useState<Record<string, { cpu: string, ram: string, net: string, lastRx?: number, lastTx?: number }>>({});
+  // Incoming WebSocket stats are written here first (no re-render), then flushed
+  // to React state in one batched update every 1.5 s.
+  const pendingStatsRef = useRef<Record<string, { cpu: string; ram: string; net: string; lastRx: number; lastTx: number }>>({});
+  // Raw rx/tx byte totals used for rate calculation. Never cleared on flush so
+  // the delta is always computed against the most recent known value, avoiding
+  // the stale-closure bug that occurs when reading containerStats directly.
+  const rawBytesRef = useRef<Record<string, { lastRx: number; lastTx: number }>>({});
   const [activeTab, setActiveTab] = useState<'compose' | 'env'>('compose');
+  const monacoEditorRef = useRef<import('monaco-editor').editor.IStandaloneCodeEditor | null>(null);
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [newStackName, setNewStackName] = useState('');
@@ -75,13 +103,15 @@ export default function EditorLayout() {
   const [isLoading, setIsLoading] = useState(false);
   const [loadingAction, setLoadingAction] = useState<string | null>(null);
   const [isFileLoading, setIsFileLoading] = useState(false);
-  const [isDarkMode, setIsDarkMode] = useState(() => {
-    const saved = localStorage.getItem('sencho-theme');
-    if (saved !== null) {
-      return saved === 'dark';
-    }
-    return true; // Default to dark mode
+  const [theme, setTheme] = useState<Theme>(() => {
+    const saved = localStorage.getItem('sencho-theme') as Theme | null;
+    if (saved === 'light' || saved === 'dark' || saved === 'auto') return saved;
+    return 'dark'; // Default to dark mode
   });
+  const [systemDark, setSystemDark] = useState(() =>
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  );
+  const isDarkMode = theme === 'dark' || (theme === 'auto' && systemDark);
   const [activeView, setActiveView] = useState<'dashboard' | 'editor' | 'host-console' | 'resources' | 'templates' | 'global-observability'>('dashboard');
   const [isEditing, setIsEditing] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -100,7 +130,7 @@ export default function EditorLayout() {
   const [stackUpdates, setStackUpdates] = useState<Record<string, boolean>>({});
 
   // Notifications & Settings state
-  const [notifications, setNotifications] = useState<any[]>([]);
+  const [notifications, setNotifications] = useState<Notification[]>([]);
   const [settingsModalOpen, setSettingsModalOpen] = useState(false);
   const [alertSheetOpen, setAlertSheetOpen] = useState(false);
   const [alertSheetStack, setAlertSheetStack] = useState('');
@@ -110,17 +140,34 @@ export default function EditorLayout() {
     setAlertSheetOpen(true);
   };
 
-  // Theme toggle effect
+  // Listen for system dark mode changes (for 'auto' theme)
   useEffect(() => {
-    const html = document.documentElement;
-    if (isDarkMode) {
-      html.classList.add('dark');
-      localStorage.setItem('sencho-theme', 'dark');
-    } else {
-      html.classList.remove('dark');
-      localStorage.setItem('sencho-theme', 'light');
-    }
-  }, [isDarkMode]);
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => setSystemDark(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  // Apply dark class and persist theme preference
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDarkMode);
+    localStorage.setItem('sencho-theme', theme);
+  }, [isDarkMode, theme]);
+
+  // Force Monaco to re-measure its container after the tab switch DOM settles.
+  // Monaco's internal child is position:static with an explicit pixel height that
+  // creates a circular CSS dependency (Monaco drives card height → grid height → Monaco).
+  // Fix: reset Monaco to 0×0 first (breaks the cycle), then trigger a forced synchronous
+  // reflow so the container has its CSS-correct size before Monaco re-measures.
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      const editor = monacoEditorRef.current;
+      if (!editor) return;
+      editor.layout({ width: 0, height: 0 }); // collapse → breaks CSS circular dependency
+      editor.layout();                          // forced reflow → measures correct container size
+    });
+    return () => cancelAnimationFrame(id);
+  }, [activeTab]);
 
   const refreshStacks = async (background = false) => {
     if (!background) setIsLoading(true);
@@ -155,12 +202,156 @@ export default function EditorLayout() {
     }
   };
 
-  // Notification polling - independent of active node, runs once on mount
+  // Notification WS push - subscribe to local real-time alerts.
+  // Initial history load is handled by the [nodes] effect below.
+  useEffect(() => {
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsBase = `${wsProtocol}//${window.location.host}`;
+    let ws: WebSocket | null = null;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let isMounted = true;
+    let retryCount = 0;
+    const MAX_RETRY_DELAY_MS = 30000;
+
+    const connect = () => {
+      if (!isMounted) return;
+      ws = new WebSocket(`${wsBase}/ws/notifications`);
+
+      ws.onopen = () => {
+        if (!isMounted) {
+          // Component unmounted while the handshake was in-flight (React StrictMode double-mount)
+          ws?.close();
+          return;
+        }
+        retryCount = 0; // Reset backoff on successful connect
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data as string);
+          if (msg.type === 'notification' && msg.payload) {
+            const localNode = nodesRef.current.find(n => n.type === 'local');
+            const tagged: Notification = {
+              ...(msg.payload as Omit<Notification, 'nodeId' | 'nodeName'>),
+              nodeId: localNode?.id ?? -1,
+              nodeName: localNode?.name ?? 'Local',
+            };
+            setNotifications(prev => [tagged, ...prev].sort((a, b) => b.timestamp - a.timestamp));
+          }
+        } catch (e) {
+          console.error('[WS notifications] parse error', e);
+        }
+      };
+
+      ws.onclose = (event) => {
+        if (!isMounted) return;
+        // Exponential backoff: 1s, 2s, 4s, 8s, 16s, 30s max
+        const delay = Math.min(1000 * Math.pow(2, retryCount), MAX_RETRY_DELAY_MS);
+        retryCount++;
+        console.debug(`[WS notifications] closed (code=${event.code}), reconnecting in ${delay}ms (attempt ${retryCount})`);
+        reconnectTimer = setTimeout(connect, delay);
+      };
+
+      ws.onerror = (event) => {
+        // onerror always fires before onclose - log it and let onclose handle reconnect
+        console.warn('[WS notifications] error event', event);
+      };
+    };
+
+    connect();
+
+    return () => {
+      isMounted = false;
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      // Only close an already-open connection. If still CONNECTING, let onopen
+      // detect isMounted=false and close then — avoids the browser warning
+      // "WebSocket is closed before the connection is established".
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      }
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Re-fetch all notifications when the nodes list changes (e.g. remote node added/removed).
+  // nodesRef ensures fetchNotifications always reads the latest nodes at call time.
   useEffect(() => {
     fetchNotifications();
-    const notificationInterval = setInterval(fetchNotifications, 5000);
-    return () => clearInterval(notificationInterval);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [nodes]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Open / close per-remote-node notification WebSocket connections as the nodes list changes.
+  // Uses remoteNotifWsRef to avoid tearing down existing connections on unrelated node updates.
+  useEffect(() => {
+    const remoteNodes = nodes.filter(n => n.type === 'remote');
+    const currentIds = new Set(remoteNotifWsRef.current.keys());
+    const newIds = new Set(remoteNodes.map(n => n.id));
+
+    // Close connections for nodes that are no longer registered as remote
+    for (const id of currentIds) {
+      if (!newIds.has(id)) {
+        remoteNotifWsRef.current.get(id)?.();
+        remoteNotifWsRef.current.delete(id);
+      }
+    }
+
+    // Open connections for newly-added remote nodes
+    for (const rn of remoteNodes) {
+      if (remoteNotifWsRef.current.has(rn.id)) continue;
+
+      let ws: WebSocket | null = null;
+      let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+      let active = true;
+      let retryCount = 0;
+
+      const connect = () => {
+        if (!active) return;
+        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(`${wsProtocol}//${window.location.host}/ws/notifications?nodeId=${rn.id}`);
+
+        ws.onopen = () => { if (!active) { ws?.close(); } else { retryCount = 0; } };
+
+        ws.onmessage = (event) => {
+          try {
+            const msg = JSON.parse(event.data as string);
+            if (msg.type === 'notification' && msg.payload) {
+              // Read node name from ref so it stays fresh even if the node was renamed
+              const current = nodesRef.current.find(n => n.id === rn.id);
+              setNotifications(prev =>
+                [{ ...msg.payload as Omit<Notification, 'nodeId' | 'nodeName'>, nodeId: rn.id, nodeName: current?.name ?? rn.name }, ...prev]
+                  .sort((a, b) => b.timestamp - a.timestamp)
+              );
+            }
+          } catch (e) {
+            console.error(`[WS notifications:${rn.name}] parse error`, e);
+          }
+        };
+
+        ws.onclose = () => {
+          if (!active) return;
+          const delay = Math.min(1000 * Math.pow(2, retryCount), 30000);
+          retryCount++;
+          reconnectTimer = setTimeout(connect, delay);
+        };
+
+        ws.onerror = (e) => console.warn(`[WS notifications:${rn.name}] error`, e);
+      };
+
+      connect();
+
+      remoteNotifWsRef.current.set(rn.id, () => {
+        active = false;
+        if (reconnectTimer) clearTimeout(reconnectTimer);
+        if (ws && ws.readyState === WebSocket.OPEN) ws.close();
+      });
+    }
+  }, [nodes]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Cleanup all remote notification WebSocket connections on unmount
+  useEffect(() => {
+    return () => {
+      for (const cleanup of remoteNotifWsRef.current.values()) cleanup();
+      remoteNotifWsRef.current.clear();
+    };
+  }, []);
 
   // Re-fetch stacks whenever the active node changes (or becomes available on mount).
   // Also clears any stale editor/container state that belonged to the previous node.
@@ -180,12 +371,36 @@ export default function EditorLayout() {
 
   const fetchNotifications = async () => {
     try {
-      const res = await apiFetch('/notifications');
-      if (res.ok) {
-        const data = await res.json();
-        setNotifications(data);
+      const currentNodes = nodesRef.current;
+      const localNode = currentNodes.find(n => n.type === 'local');
+      const remoteNodes = currentNodes.filter(n => n.type === 'remote');
+
+      const [localResult, ...remoteResults] = await Promise.allSettled([
+        apiFetch('/notifications', { localOnly: true }),
+        ...remoteNodes.map(n => fetchForNode('/notifications', n.id)),
+      ]);
+
+      const all: Notification[] = [];
+
+      if (localResult.status === 'fulfilled' && localResult.value.ok) {
+        const data = await localResult.value.json() as Omit<Notification, 'nodeId' | 'nodeName'>[];
+        data.forEach(n => all.push({ ...n, nodeId: localNode?.id ?? -1, nodeName: localNode?.name ?? 'Local' }));
       }
-    } catch (e) { }
+
+      for (let i = 0; i < remoteNodes.length; i++) {
+        const result = remoteResults[i];
+        if (result?.status === 'fulfilled' && result.value.ok) {
+          const data = await result.value.json() as Omit<Notification, 'nodeId' | 'nodeName'>[];
+          const rn = remoteNodes[i];
+          data.forEach(n => all.push({ ...n, nodeId: rn.id, nodeName: rn.name }));
+        }
+      }
+
+      all.sort((a, b) => b.timestamp - a.timestamp);
+      setNotifications(all);
+    } catch (e) {
+      console.error('[Notifications] fetch error:', e);
+    }
   };
 
   const fetchImageUpdates = async () => {
@@ -195,32 +410,61 @@ export default function EditorLayout() {
         const data = await res.json();
         setStackUpdates(data);
       }
-    } catch (e) { }
+    } catch (e: unknown) {
+      console.error('[ImageUpdates] fetch failed:', e);
+    }
   };
 
   const markAllRead = async () => {
     try {
-      await apiFetch('/notifications/read', { method: 'POST' });
-      fetchNotifications();
-    } catch (e) { }
+      const localNode = nodesRef.current.find(n => n.type === 'local');
+      const unreadNodeIds = [...new Set(notifications.filter(n => !n.is_read).map(n => n.nodeId))];
+      await Promise.allSettled(unreadNodeIds.map(nodeId =>
+        nodeId === localNode?.id
+          ? apiFetch('/notifications/read', { method: 'POST', localOnly: true })
+          : fetchForNode('/notifications/read', nodeId, { method: 'POST' })
+      ));
+      setNotifications(prev => prev.map(n => ({ ...n, is_read: 1 })));
+    } catch (e: unknown) {
+      const err = e as { message?: string; error?: string };
+      toast.error(err?.message || err?.error || 'Failed to mark notifications as read');
+    }
   };
 
-  const deleteNotification = async (id: number) => {
+  const deleteNotification = async (notif: Notification) => {
     try {
-      await apiFetch(`/notifications/${id}`, { method: 'DELETE' });
-      fetchNotifications();
-    } catch (e) { }
+      const localNode = nodesRef.current.find(n => n.type === 'local');
+      if (notif.nodeId === localNode?.id) {
+        await apiFetch(`/notifications/${notif.id}`, { method: 'DELETE', localOnly: true });
+      } else {
+        await fetchForNode(`/notifications/${notif.id}`, notif.nodeId, { method: 'DELETE' });
+      }
+      setNotifications(prev => prev.filter(n => !(n.id === notif.id && n.nodeId === notif.nodeId)));
+    } catch (e: unknown) {
+      const err = e as { message?: string; error?: string };
+      toast.error(err?.message || err?.error || 'Failed to delete notification');
+    }
   };
 
   const clearAllNotifications = async () => {
     try {
-      await apiFetch('/notifications', { method: 'DELETE' });
-      fetchNotifications();
-    } catch (e) { }
+      const localNode = nodesRef.current.find(n => n.type === 'local');
+      const uniqueNodeIds = [...new Set(notifications.map(n => n.nodeId))];
+      await Promise.allSettled(uniqueNodeIds.map(nodeId =>
+        nodeId === localNode?.id
+          ? apiFetch('/notifications', { method: 'DELETE', localOnly: true })
+          : fetchForNode('/notifications', nodeId, { method: 'DELETE' })
+      ));
+      setNotifications([]);
+    } catch (e: unknown) {
+      const err = e as { message?: string; error?: string };
+      toast.error(err?.message || err?.error || 'Failed to clear notifications');
+    }
   };
 
   useEffect(() => {
     const wsMap: Record<string, WebSocket> = {};
+
     (containers || []).forEach(container => {
       if (!container?.Id) return;
       try {
@@ -238,6 +482,7 @@ export default function EditorLayout() {
             const data = JSON.parse(event.data);
             // Skip initial empty chunks where stats fields are missing
             if (!data.cpu_stats?.cpu_usage || !data.precpu_stats?.cpu_usage || !data.memory_stats?.usage) return;
+
             const cpuDelta = data.cpu_stats.cpu_usage.total_usage - data.precpu_stats.cpu_usage.total_usage;
             const systemDelta = (data.cpu_stats.system_cpu_usage || 0) - (data.precpu_stats.system_cpu_usage || 0);
             const onlineCpus = data.cpu_stats.online_cpus || 1;
@@ -247,37 +492,29 @@ export default function EditorLayout() {
             let currentRx = 0;
             let currentTx = 0;
             if (data.networks) {
-              Object.values(data.networks).forEach((net: any) => {
+              Object.values(data.networks as Record<string, { rx_bytes?: number; tx_bytes?: number }>).forEach((net) => {
                 currentRx += net.rx_bytes || 0;
                 currentTx += net.tx_bytes || 0;
               });
             }
 
-            setContainerStats(prev => {
-              const prevStat = prev[container.Id];
-              // Calculate rate if we have a previous value
-              const rxRate = prevStat?.lastRx !== undefined ? Math.max(0, currentRx - prevStat.lastRx) : 0;
-              const txRate = prevStat?.lastTx !== undefined ? Math.max(0, currentTx - prevStat.lastTx) : 0;
+            // Rate is derived from rawBytesRef which is never cleared on flush,
+            // so the delta is always accurate - no stale-closure risk.
+            const prevRaw = rawBytesRef.current[container.Id];
+            const rxRate = prevRaw ? Math.max(0, currentRx - prevRaw.lastRx) : 0;
+            const txRate = prevRaw ? Math.max(0, currentTx - prevRaw.lastTx) : 0;
+            rawBytesRef.current[container.Id] = { lastRx: currentRx, lastTx: currentTx };
 
-              const netIO = `${formatBytes(rxRate)}/s ↓ / ${formatBytes(txRate)}/s ↑`;
+            const netIO = `${formatBytes(rxRate)}/s ↓ / ${formatBytes(txRate)}/s ↑`;
 
-              // Check if values actually changed to prevent infinite re-renders
-              const newCpu = cpuPercent + '%';
-              if (prevStat && prevStat.cpu === newCpu && prevStat.ram === ramUsage && prevStat.lastRx === currentRx && prevStat.lastTx === currentTx) {
-                return prev;
-              }
-
-              return {
-                ...prev,
-                [container.Id]: {
-                  cpu: newCpu,
-                  ram: ramUsage,
-                  net: netIO,
-                  lastRx: currentRx,
-                  lastTx: currentTx
-                }
-              };
-            });
+            // Write into the buffer ref only - zero re-render cost.
+            pendingStatsRef.current[container.Id] = {
+              cpu: cpuPercent + '%',
+              ram: ramUsage,
+              net: netIO,
+              lastRx: currentRx,
+              lastTx: currentTx,
+            };
           } catch {
             // Ignore parse errors
           }
@@ -286,16 +523,39 @@ export default function EditorLayout() {
         // Ignore WebSocket errors
       }
     });
-    return () => {
-      Object.values(wsMap).forEach(ws => {
-        try {
-          ws.close();
-        } catch {
-          // Ignore close errors
+
+    // Flush buffered stats into React state once every 1.5 s.
+    // Snapshot + clear the buffer BEFORE calling setState so the updater
+    // function remains pure (no side-effects inside it).
+    const flushInterval = setInterval(() => {
+      const pending = pendingStatsRef.current;
+      if (Object.keys(pending).length === 0) return;
+      pendingStatsRef.current = {};
+
+      setContainerStats(prev => {
+        let hasChanges = false;
+        const next = { ...prev };
+        for (const [id, newStats] of Object.entries(pending)) {
+          const old = prev[id];
+          if (!old || old.cpu !== newStats.cpu || old.ram !== newStats.ram || old.net !== newStats.net) {
+            next[id] = newStats;
+            hasChanges = true;
+          }
         }
+        return hasChanges ? next : prev;
+      });
+    }, 1500);
+
+    return () => {
+      clearInterval(flushInterval);
+      // Discard buffered stats for the old stack so stale entries don't
+      // briefly appear when a new stack is selected.
+      pendingStatsRef.current = {};
+      Object.values(wsMap).forEach(ws => {
+        try { ws.close(); } catch { /* ignore */ }
       });
     };
-  }, [containers]);
+  }, [containers]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const loadFile = async (filename: string) => {
     if (!filename) return;
@@ -453,9 +713,9 @@ export default function EditorLayout() {
       const conts = await containersRes.json();
       setContainers(Array.isArray(conts) ? conts : []);
       await refreshStacks(true);
-    } catch (error: any) {
+    } catch (error) {
       console.error('Failed to deploy:', error);
-      toast.error(error.message || 'Failed to deploy stack');
+      toast.error((error as Error).message || 'Failed to deploy stack');
     } finally {
       setLoadingAction(null);
     }
@@ -481,9 +741,9 @@ export default function EditorLayout() {
       const conts = await containersRes.json();
       setContainers(Array.isArray(conts) ? conts : []);
       await refreshStacks(true);
-    } catch (error: any) {
+    } catch (error) {
       console.error('Failed to stop:', error);
-      toast.error(error.message || 'Failed to stop stack');
+      toast.error((error as Error).message || 'Failed to stop stack');
     } finally {
       setLoadingAction(null);
     }
@@ -509,9 +769,9 @@ export default function EditorLayout() {
       const conts = await containersRes.json();
       setContainers(Array.isArray(conts) ? conts : []);
       await refreshStacks(true);
-    } catch (error: any) {
+    } catch (error) {
       console.error('Failed to restart:', error);
-      toast.error(error.message || 'Failed to restart stack');
+      toast.error((error as Error).message || 'Failed to restart stack');
     } finally {
       setLoadingAction(null);
     }
@@ -537,9 +797,9 @@ export default function EditorLayout() {
       const conts = await containersRes.json();
       setContainers(Array.isArray(conts) ? conts : []);
       await refreshStacks(true);
-    } catch (error: any) {
+    } catch (error) {
       console.error('Failed to update:', error);
-      toast.error(error.message || 'Failed to update stack');
+      toast.error((error as Error).message || 'Failed to update stack');
     } finally {
       setLoadingAction(null);
     }
@@ -570,9 +830,9 @@ export default function EditorLayout() {
         setIsEditing(false);
       }
       await refreshStacks();
-    } catch (error: any) {
+    } catch (error) {
       console.error('Failed to delete stack:', error);
-      toast.error(error.message || 'Failed to delete stack');
+      toast.error((error as Error).message || 'Failed to delete stack');
     } finally {
       setLoadingAction(null);
     }
@@ -600,9 +860,9 @@ export default function EditorLayout() {
       await refreshStacks();
       // Auto-load the new stack in the editor pane
       await loadFile(stackName);
-    } catch (error: any) {
+    } catch (error) {
       console.error('Failed to create stack:', error);
-      toast.error(error.message || 'Failed to create stack');
+      toast.error((error as Error).message || 'Failed to create stack');
     }
   };
 
@@ -668,7 +928,7 @@ export default function EditorLayout() {
         {/* Branding Header */}
         <div className="h-16 flex items-center justify-between px-4 border-b border-border">
           <div className="flex items-center gap-2">
-            <img src="/sencho-logo.png" alt="Sencho Logo" className="w-12 h-12" />
+            <img src={isDarkMode ? '/sencho-logo-dark.png' : '/sencho-logo-light.png'} alt="Sencho Logo" className="w-12 h-12" />
             <h1 className="text-2xl font-bold tracking-tight">Sencho</h1>
           </div>
           <TooltipProvider>
@@ -709,7 +969,7 @@ export default function EditorLayout() {
                   <SelectItem key={node.id} value={node.id.toString()}>
                     <div className="flex items-center gap-2">
                       <div className={`w-2 h-2 rounded-full shrink-0 ${node.status === 'online' ? 'bg-green-500' :
-                          node.status === 'offline' ? 'bg-red-500' : 'bg-gray-400'
+                        node.status === 'offline' ? 'bg-red-500' : 'bg-gray-400'
                         }`} />
                       {node.name}
                     </div>
@@ -819,7 +1079,7 @@ export default function EditorLayout() {
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Top Header Bar */}
         <div className="h-16 flex items-center justify-between px-6 border-b border-border gap-4">
-          {/* Node Context Pill — visible only when a remote node is active */}
+          {/* Node Context Pill - visible only when a remote node is active */}
           <div className="flex-shrink-0">
             {activeNode?.type === 'remote' ? (
               <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm font-medium">
@@ -834,156 +1094,161 @@ export default function EditorLayout() {
             )}
           </div>
           <div className="flex items-center gap-4">
-          {/* Home Button */}
-          <Button
-            variant="outline"
-            size="sm"
-            className="rounded-lg"
-            onClick={() => {
-              setSelectedFile(null);
-              setContent('');
-              setOriginalContent('');
-              setEnvContent('');
-              setOriginalEnvContent('');
-              setEnvFiles([]);
-              setSelectedEnvFile('');
-              setEnvExists(false);
-              setContainers([]);
-              setIsEditing(false);
-              setActiveView('dashboard');
-            }}
-            title="Go to Home Dashboard"
-          >
-            <Home className="w-4 h-4 mr-2" />
-            Home
-          </Button>
-          {/* Console Toggle */}
-          <Button
-            variant={activeView === 'host-console' ? 'default' : 'outline'}
-            size="sm"
-            className="rounded-lg"
-            onClick={() => setActiveView(activeView === 'host-console' ? (selectedFile ? 'editor' : 'dashboard') : 'host-console')}
-          >
-            <Terminal className="w-4 h-4 mr-2" />
-            Console
-          </Button>
-          {/* Resources Toggle */}
-          <Button
-            variant="outline"
-            size="sm"
-            className="rounded-lg"
-            onClick={() => setActiveView('resources')}
-            title="System Resources"
-          >
-            <HardDrive className="w-4 h-4 mr-2" />
-            Resources
-          </Button>
-          {/* App Store Toggle */}
-          <Button
-            variant="outline"
-            size="sm"
-            className="rounded-lg"
-            onClick={() => setActiveView('templates')}
-            title="App Store"
-          >
-            <CloudDownload className="w-4 h-4 mr-2" />
-            App Store
-          </Button>
-          {/* Global Observability Toggle */}
-          <Button
-            variant="outline"
-            size="sm"
-            className="rounded-lg"
-            onClick={() => setActiveView('global-observability')}
-            title="Global Logs"
-          >
-            <Activity className="w-4 h-4 mr-2" />
-            Logs
-          </Button>
+            {/* Home Button */}
+            <Button
+              variant="outline"
+              size="sm"
+              className="rounded-lg"
+              onClick={() => {
+                setSelectedFile(null);
+                setContent('');
+                setOriginalContent('');
+                setEnvContent('');
+                setOriginalEnvContent('');
+                setEnvFiles([]);
+                setSelectedEnvFile('');
+                setEnvExists(false);
+                setContainers([]);
+                setIsEditing(false);
+                setActiveView('dashboard');
+              }}
+              title="Go to Home Dashboard"
+            >
+              <Home className="w-4 h-4 mr-2" />
+              Home
+            </Button>
+            {/* Console Toggle */}
+            <Button
+              variant={activeView === 'host-console' ? 'default' : 'outline'}
+              size="sm"
+              className="rounded-lg"
+              onClick={() => setActiveView(activeView === 'host-console' ? (selectedFile ? 'editor' : 'dashboard') : 'host-console')}
+            >
+              <Terminal className="w-4 h-4 mr-2" />
+              Console
+            </Button>
+            {/* Resources Toggle */}
+            <Button
+              variant={activeView === 'resources' ? 'default' : 'outline'}
+              size="sm"
+              className="rounded-lg"
+              onClick={() => setActiveView(activeView === 'resources' ? (selectedFile ? 'editor' : 'dashboard') : 'resources')}
+              title="System Resources"
+            >
+              <HardDrive className="w-4 h-4 mr-2" />
+              Resources
+            </Button>
+            {/* App Store Toggle */}
+            <Button
+              variant={activeView === 'templates' ? 'default' : 'outline'}
+              size="sm"
+              className="rounded-lg"
+              onClick={() => setActiveView(activeView === 'templates' ? (selectedFile ? 'editor' : 'dashboard') : 'templates')}
+              title="App Store"
+            >
+              <CloudDownload className="w-4 h-4 mr-2" />
+              App Store
+            </Button>
+            {/* Global Observability Toggle */}
+            <Button
+              variant={activeView === 'global-observability' ? 'default' : 'outline'}
+              size="sm"
+              className="rounded-lg"
+              onClick={() => setActiveView(activeView === 'global-observability' ? (selectedFile ? 'editor' : 'dashboard') : 'global-observability')}
+              title="Global Logs"
+            >
+              <Activity className="w-4 h-4 mr-2" />
+              Logs
+            </Button>
 
-          {/* Settings Modal Toggle */}
-          <Button
-            variant="outline"
-            size="sm"
-            className="rounded-lg"
-            onClick={() => setSettingsModalOpen(true)}
-            title="Notification Settings"
-          >
-            <Settings className="w-4 h-4 mr-2" />
-            Settings
-          </Button>
+            {/* Settings Modal Toggle */}
+            <Button
+              variant="outline"
+              size="sm"
+              className="rounded-lg"
+              onClick={() => setSettingsModalOpen(true)}
+              title="Notification Settings"
+            >
+              <Settings className="w-4 h-4 mr-2" />
+              Settings
+            </Button>
 
-          {/* Notifications Popover */}
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline" size="sm" className="rounded-lg relative" title="Notifications">
-                <Bell className="w-4 h-4" />
-                {notifications.filter(n => !n.is_read).length > 0 && (
-                  <span className="absolute -top-1 -right-1 flex h-3 w-3">
-                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
-                    <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
-                  </span>
-                )}
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-80 p-0" align="end">
-              <div className="flex items-center justify-between p-4 border-b">
-                <h4 className="font-semibold">Notifications</h4>
-                <div className="flex gap-2">
+            {/* Notifications Popover */}
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" className="rounded-lg relative" title="Notifications">
+                  <Bell className="w-4 h-4" />
                   {notifications.filter(n => !n.is_read).length > 0 && (
-                    <Button variant="ghost" size="sm" onClick={markAllRead} className="h-auto p-0 text-xs">
-                      Mark all as read
-                    </Button>
+                    <span className="absolute -top-1 -right-1 flex h-3 w-3">
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                      <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+                    </span>
                   )}
-                  {notifications.length > 0 && (
-                    <Button variant="ghost" size="sm" onClick={clearAllNotifications} className="h-auto p-0 text-xs text-muted-foreground hover:text-destructive transition-colors">
-                      <Trash2 className="w-3 h-3 mr-1" />
-                      Clear all
-                    </Button>
-                  )}
-                </div>
-              </div>
-              <ScrollArea className="h-80">
-                {notifications.length === 0 ? (
-                  <div className="p-4 text-sm text-muted-foreground text-center">No notifications</div>
-                ) : (
-                  <div className="flex flex-col">
-                    {notifications.map((notif: any) => (
-                      <div key={notif.id} className={`p-4 border-b text-sm ${notif.is_read ? 'opacity-70' : 'bg-muted/50'} relative group`}>
-                        <div className="flex items-center gap-2 mb-1 pr-6">
-                          <Badge variant={notif.level === 'error' ? 'destructive' : notif.level === 'warning' ? 'secondary' : 'default'} className="text-[10px] uppercase">
-                            {notif.level}
-                          </Badge>
-                          <span className="text-xs text-muted-foreground ml-auto">
-                            {new Date(notif.timestamp).toLocaleString()}
-                          </span>
-                        </div>
-                        <p className="font-medium pr-6">{notif.message}</p>
-
-                        {/* Delete individual notification button */}
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="absolute top-2 right-2 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            deleteNotification(notif.id);
-                          }}
-                        >
-                          <X className="w-3 h-3" />
-                        </Button>
-                      </div>
-                    ))}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-80 p-0" align="end">
+                <div className="flex items-center justify-between p-4 border-b">
+                  <h4 className="font-semibold">Notifications</h4>
+                  <div className="flex gap-2">
+                    {notifications.filter(n => !n.is_read).length > 0 && (
+                      <Button variant="ghost" size="sm" onClick={markAllRead} className="h-auto p-0 text-xs">
+                        Mark all as read
+                      </Button>
+                    )}
+                    {notifications.length > 0 && (
+                      <Button variant="ghost" size="sm" onClick={clearAllNotifications} className="h-auto p-0 text-xs text-muted-foreground hover:text-destructive transition-colors">
+                        <Trash2 className="w-3 h-3 mr-1" />
+                        Clear all
+                      </Button>
+                    )}
                   </div>
-                )}
-              </ScrollArea>
-            </PopoverContent>
-          </Popover>
+                </div>
+                <ScrollArea className="h-80">
+                  {notifications.length === 0 ? (
+                    <div className="p-4 text-sm text-muted-foreground text-center">No notifications</div>
+                  ) : (
+                    <div className="flex flex-col">
+                      {notifications.map((notif) => (
+                        <div key={`${notif.nodeId}-${notif.id}`} className={`p-4 border-b text-sm ${notif.is_read ? 'opacity-70' : 'bg-muted/50'} relative group`}>
+                          <div className="flex items-center gap-2 mb-1 pr-6">
+                            <Badge variant={notif.level === 'error' ? 'destructive' : notif.level === 'warning' ? 'secondary' : 'default'} className="text-[10px] uppercase">
+                              {notif.level}
+                            </Badge>
+                            {nodesRef.current.find(n => n.id === notif.nodeId)?.type === 'remote' && (
+                              <Badge variant="outline" className="text-[10px] font-normal">
+                                {notif.nodeName}
+                              </Badge>
+                            )}
+                            <span className="text-xs text-muted-foreground ml-auto">
+                              {new Date(notif.timestamp).toLocaleString()}
+                            </span>
+                          </div>
+                          <p className="font-medium pr-6">{notif.message}</p>
+
+                          {/* Delete individual notification button */}
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute top-2 right-2 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              deleteNotification(notif);
+                            }}
+                          >
+                            <X className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </ScrollArea>
+              </PopoverContent>
+            </Popover>
           </div>{/* end right-side buttons */}
         </div>
 
         {/* Main Workspace */}
-        <div className="flex-1 overflow-y-auto p-6">
+        <div key={activeView} className="flex-1 overflow-y-auto p-6 animate-fade-up">
           {activeView === 'templates' ? (
             <AppStoreView onDeploySuccess={(stackName) => { refreshStacks(); loadFile(stackName); }} />
           ) : activeView === 'resources' ? (
@@ -1173,8 +1438,18 @@ export default function EditorLayout() {
                     <div className="flex items-center gap-4">
                       <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as 'compose' | 'env')}>
                         <TabsList className="bg-muted">
-                          <TabsTrigger value="compose" className="rounded-lg">compose.yaml</TabsTrigger>
-                          <TabsTrigger value="env" disabled={!envExists} className="rounded-lg">.env</TabsTrigger>
+                          <TabsTrigger value="compose" className="relative rounded-lg data-[state=active]:bg-transparent data-[state=active]:shadow-none">
+                            {activeTab === 'compose' && (
+                              <motion.div layoutId="editor-tab-indicator" className="absolute inset-0 rounded-md bg-background shadow-sm" transition={{ type: 'spring', stiffness: 400, damping: 30 }} />
+                            )}
+                            <span className="relative z-10">compose.yaml</span>
+                          </TabsTrigger>
+                          <TabsTrigger value="env" disabled={!envExists} className="relative rounded-lg data-[state=active]:bg-transparent data-[state=active]:shadow-none">
+                            {activeTab === 'env' && (
+                              <motion.div layoutId="editor-tab-indicator" className="absolute inset-0 rounded-md bg-background shadow-sm" transition={{ type: 'spring', stiffness: 400, damping: 30 }} />
+                            )}
+                            <span className="relative z-10">.env</span>
+                          </TabsTrigger>
                         </TabsList>
                       </Tabs>
 
@@ -1225,13 +1500,14 @@ export default function EditorLayout() {
                         </span>
                       </div>
                     )}
-                    <div className="flex-1 min-h-0">
+                    <div className="flex-1 min-h-0 overflow-hidden">
                       {!isFileLoading && (
                         <Editor
                           height="100%"
                           language={activeTab === 'compose' ? 'yaml' : 'plaintext'}
                           theme={isDarkMode ? 'vs-dark' : 'vs'}
                           value={activeTab === 'compose' ? safeContent : safeEnvContent}
+                          onMount={(editor) => { monacoEditorRef.current = editor; }}
                           onChange={(value) => {
                             if (!isEditing) return; // Prevent changes in view mode
                             if (activeTab === 'compose') {
@@ -1308,8 +1584,8 @@ export default function EditorLayout() {
       <SettingsModal
         isOpen={settingsModalOpen}
         onClose={() => setSettingsModalOpen(false)}
-        isDarkMode={isDarkMode}
-        setIsDarkMode={setIsDarkMode}
+        theme={theme}
+        setTheme={setTheme}
       />
 
       {/* Stack Alert Sheet */}
diff --git a/frontend/src/components/GlobalObservabilityView.tsx b/frontend/src/components/GlobalObservabilityView.tsx
index 3ceafc2b..a4d16d62 100644
--- a/frontend/src/components/GlobalObservabilityView.tsx
+++ b/frontend/src/components/GlobalObservabilityView.tsx
@@ -7,6 +7,12 @@ import { RefreshCw, Download, Trash2, Search, Filter } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
 import { useNodes } from '@/context/NodeContext';
 
+// Max entries held in React state. Bounds SSE-mode memory growth.
+const MAX_LOG_ENTRIES = 2000;
+// Max rows rendered as DOM nodes at once. Prevents the renderer from
+// creating thousands of DOM nodes that OOM the browser on RAM-constrained hosts.
+const MAX_DISPLAY_ROWS = 300;
+
 
 interface LogEntry {
     stackName: string;
@@ -15,6 +21,9 @@ interface LogEntry {
     level: string;
     message: string;
     timestampMs: number;
+    // Assigned client-side at ingestion. Gives React a stable, collision-free
+    // key so the slice window can shift without touching existing DOM nodes.
+    _id: number;
 }
 
 export function GlobalObservabilityView() {
@@ -37,6 +46,9 @@ export function GlobalObservabilityView() {
 
     // SSE throttle buffer
     const bufferRef = useRef<LogEntry[]>([]);
+    // Monotonic counter for stable React keys. Incremented once per log entry
+    // at ingestion so duplicate-content lines never share a key.
+    const logIdRef = useRef(0);
 
     // Fetch settings on mount
     useEffect(() => {
@@ -81,8 +93,9 @@ export function GlobalObservabilityView() {
             eventSource.onmessage = (event) => {
                 try {
                     const entry: LogEntry = JSON.parse(event.data);
+                    entry._id = ++logIdRef.current;
                     bufferRef.current.push(entry);
-                } catch (e) { /* ignore parse errors */ }
+                } catch { /* ignore parse errors */ }
             };
 
             eventSource.onerror = () => {
@@ -96,7 +109,7 @@ export function GlobalObservabilityView() {
                     setLogs(prev => {
                         const merged = [...prev, ...batch];
                         merged.sort((a, b) => a.timestampMs - b.timestampMs);
-                        return merged.slice(-10000);
+                        return merged.slice(-MAX_LOG_ENTRIES);
                     });
                 }
             }, 500);
@@ -115,7 +128,11 @@ export function GlobalObservabilityView() {
                 try {
                     const logsRes = await apiFetch('/logs/global');
                     if (logsRes.ok) {
-                        setLogs(await logsRes.json());
+                        const data: LogEntry[] = await logsRes.json();
+                        // Stamp each entry with a monotonic _id at ingestion so React
+                        // has a stable, collision-free key for every log line.
+                        data.forEach(entry => { entry._id = ++logIdRef.current; });
+                        setLogs(data);
                     }
                 } catch (error) {
                     console.error('Failed to fetch global logs:', error);
@@ -156,8 +173,10 @@ export function GlobalObservabilityView() {
     }, [logs, selectedStacks, streamFilter, searchQuery, clearedAt]);
 
     useEffect(() => {
-        if (isAutoScrollEnabled) {
-            bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+        if (isAutoScrollEnabled && bottomRef.current) {
+            // Use instant scroll to avoid stacking smooth-scroll animations on every
+            // 5-second poll cycle, which wastes layout work and renderer memory.
+            bottomRef.current.scrollIntoView({ behavior: 'instant' });
         }
     }, [filteredLogs, isAutoScrollEnabled]);
 
@@ -224,7 +243,7 @@ export function GlobalObservabilityView() {
                     </DropdownMenuContent>
                 </DropdownMenu>
 
-                <Select value={streamFilter} onValueChange={(val: any) => setStreamFilter(val)}>
+                <Select value={streamFilter} onValueChange={(val) => setStreamFilter(val as 'ALL' | 'STDOUT' | 'STDERR')}>
                     <SelectTrigger className="w-[110px] h-8 text-sm">
                         <SelectValue placeholder="Stream" />
                     </SelectTrigger>
@@ -258,8 +277,13 @@ export function GlobalObservabilityView() {
             <div className="flex-1 overflow-auto p-4 scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-transparent" onScroll={handleScroll}>
                 {filteredLogs.length > 0 ? (
                     <>
-                        {filteredLogs.map((log, idx) => (
-                            <div key={idx} className="mb-1 leading-relaxed whitespace-pre-wrap break-all hover:bg-white/5 px-2 py-0.5 rounded -mx-2 font-mono text-xs">
+                        {filteredLogs.length > MAX_DISPLAY_ROWS && (
+                            <div className="text-gray-600 italic text-xs text-center mb-3 py-1 border-b border-gray-800">
+                                Showing last {MAX_DISPLAY_ROWS} of {filteredLogs.length} matching entries. Use filters or clear logs to see earlier entries.
+                            </div>
+                        )}
+                        {filteredLogs.slice(-MAX_DISPLAY_ROWS).map((log) => (
+                            <div key={log._id} className="mb-1 leading-relaxed whitespace-pre-wrap break-all hover:bg-white/5 px-2 py-0.5 rounded -mx-2 font-mono text-xs">
                                 <span className="text-gray-500 mr-2">[{new Date(log.timestampMs).toLocaleTimeString([], { hour12: true })}]</span>
                                 <span className="text-blue-400 font-semibold mr-2">[{log.containerName}]</span>
                                 <span className={`mr-2 font-bold ${log.level === 'ERROR' ? 'text-red-500' : log.level === 'WARN' ? 'text-yellow-500' : 'text-green-500'}`}>{log.level}:</span>
diff --git a/frontend/src/components/HomeDashboard.tsx b/frontend/src/components/HomeDashboard.tsx
index 355eae46..fc1d4927 100644
--- a/frontend/src/components/HomeDashboard.tsx
+++ b/frontend/src/components/HomeDashboard.tsx
@@ -13,9 +13,16 @@ import { Label } from './ui/label';
 
 interface Stats {
   active: number;
+  managed: number;
+  unmanaged: number;
   exited: number;
   total: number;
-  inactive: number;
+}
+
+interface MetricPoint {
+  timestamp: number;
+  cpu_percent: number;
+  memory_mb: number;
 }
 
 interface SystemStats {
@@ -60,13 +67,13 @@ export default function HomeDashboard() {
   const [convertedYaml, setConvertedYaml] = useState('');
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [newStackName, setNewStackName] = useState('');
-  const [stats, setStats] = useState<Stats>({ active: 0, exited: 0, total: 0, inactive: 0 });
+  const [stats, setStats] = useState<Stats>({ active: 0, managed: 0, unmanaged: 0, exited: 0, total: 0 });
   const [systemStats, setSystemStats] = useState<SystemStats | null>(null);
-  const [metrics, setMetrics] = useState<any[]>([]);
+  const [metrics, setMetrics] = useState<MetricPoint[]>([]);
 
   // Fetch container stats - re-runs when active node changes so stale data is cleared immediately
   useEffect(() => {
-    setStats({ active: 0, exited: 0, total: 0, inactive: 0 });
+    setStats({ active: 0, managed: 0, unmanaged: 0, exited: 0, total: 0 });
     const fetchStats = async () => {
       try {
         const res = await apiFetch('/stats');
@@ -174,14 +181,20 @@ export default function HomeDashboard() {
         method: 'POST',
         body: JSON.stringify({ stackName }),
       });
-      if (!createResponse.ok) throw new Error('Failed to create stack');
+      if (!createResponse.ok) {
+        const err = await createResponse.json().catch(() => ({}));
+        throw new Error(err.error || 'Failed to create stack');
+      }
 
       // Save the converted YAML content
       const saveResponse = await apiFetch(`/stacks/${stackName}`, {
         method: 'PUT',
         body: JSON.stringify({ content: convertedYaml }),
       });
-      if (!saveResponse.ok) throw new Error('Failed to save stack content');
+      if (!saveResponse.ok) {
+        const err = await saveResponse.json().catch(() => ({}));
+        throw new Error(err.error || 'Failed to save stack content');
+      }
 
       setCreateDialogOpen(false);
       setNewStackName('');
@@ -190,7 +203,7 @@ export default function HomeDashboard() {
       window.location.reload(); // Refresh to show new stack
     } catch (error) {
       console.error('Failed to create stack:', error);
-      toast.error('Failed to create stack');
+      toast.error((error as Error).message || 'Failed to create stack');
     }
   };
 
@@ -209,7 +222,9 @@ export default function HomeDashboard() {
           </CardHeader>
           <CardContent>
             <div className="text-3xl font-bold text-green-500">{stats.active}</div>
-            <p className="text-xs text-muted-foreground mt-1">Currently running</p>
+            <p className="text-xs text-muted-foreground mt-1">
+              {stats.managed} managed · {stats.unmanaged} external
+            </p>
           </CardContent>
         </Card>
 
diff --git a/frontend/src/components/HostConsole.tsx b/frontend/src/components/HostConsole.tsx
index f21ee2a0..86c14e7c 100644
--- a/frontend/src/components/HostConsole.tsx
+++ b/frontend/src/components/HostConsole.tsx
@@ -161,7 +161,7 @@ export default function HostConsole({ stackName, onClose }: HostConsoleProps) {
                     <span>Host Console</span>
                     {activeNode && (
                         <span className="text-muted-foreground font-normal text-sm">
-                            — {activeNode.name}
+                            - {activeNode.name}
                         </span>
                     )}
                     {stackName && (
diff --git a/frontend/src/components/LogViewer.tsx b/frontend/src/components/LogViewer.tsx
index 13125f7e..fd5f43f0 100644
--- a/frontend/src/components/LogViewer.tsx
+++ b/frontend/src/components/LogViewer.tsx
@@ -24,6 +24,7 @@ export function LogViewer({ containerId, containerName, isOpen, onClose }: LogVi
     useEffect(() => {
         if (!isOpen || !containerId) return;
 
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setLogs([]);
         setIsConnected(false);
 
diff --git a/frontend/src/components/NodeManager.tsx b/frontend/src/components/NodeManager.tsx
index 9f24a07e..87e864a2 100644
--- a/frontend/src/components/NodeManager.tsx
+++ b/frontend/src/components/NodeManager.tsx
@@ -42,7 +42,7 @@ export function NodeManager() {
   const [editingNodeId, setEditingNodeId] = useState<number | null>(null);
   const [deletingNode, setDeletingNode] = useState<Node | null>(null);
   const [testing, setTesting] = useState<number | null>(null);
-  const [testResult, setTestResult] = useState<{ nodeId: number; info: any } | null>(null);
+  const [testResult, setTestResult] = useState<{ nodeId: number; info: { serverVersion?: string; os?: string; architecture?: string; containers?: number; images?: number; cpus?: number } } | null>(null);
 
   // Node token generation state
   const [generatedToken, setGeneratedToken] = useState<string | null>(null);
@@ -84,8 +84,8 @@ export function NodeManager() {
       }
 
       await refreshNodes();
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to create node');
+    } catch (error) {
+      toast.error((error as Error).message || 'Failed to create node');
     }
   };
 
@@ -105,8 +105,8 @@ export function NodeManager() {
       setEditingNodeId(null);
       setFormData(defaultFormData);
       await refreshNodes();
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to update node');
+    } catch (error) {
+      toast.error((error as Error).message || 'Failed to update node');
     }
   };
 
@@ -135,8 +135,8 @@ export function NodeManager() {
       setDeleteOpen(false);
       setDeletingNode(null);
       await refreshNodes();
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to delete node');
+    } catch (error) {
+      toast.error((error as Error).message || 'Failed to delete node');
     }
   };
 
@@ -153,8 +153,8 @@ export function NodeManager() {
         toast.error(`Failed to connect: ${result.error}`);
       }
       await refreshNodes();
-    } catch (error: any) {
-      toast.error(error.message || 'Connection test failed');
+    } catch (error) {
+      toast.error((error as Error).message || 'Connection test failed');
     } finally {
       setTesting(null);
     }
@@ -169,8 +169,8 @@ export function NodeManager() {
       const { token } = await res.json();
       setGeneratedToken(token);
       toast.success('Node token generated');
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to generate token');
+    } catch (error) {
+      toast.error((error as Error).message || 'Failed to generate token');
     } finally {
       setGeneratingToken(false);
     }
@@ -247,13 +247,13 @@ export function NodeManager() {
             <SelectItem value="local">
               <div className="flex items-center gap-2">
                 <Monitor className="w-4 h-4" />
-                Local — Docker socket on this machine
+                Local - Docker socket on this machine
               </div>
             </SelectItem>
             <SelectItem value="remote">
               <div className="flex items-center gap-2">
                 <Globe className="w-4 h-4" />
-                Remote — another Sencho instance
+                Remote - another Sencho instance
               </div>
             </SelectItem>
           </SelectContent>
diff --git a/frontend/src/components/ResourcesView.tsx b/frontend/src/components/ResourcesView.tsx
index 3ef48bcc..5e654665 100644
--- a/frontend/src/components/ResourcesView.tsx
+++ b/frontend/src/components/ResourcesView.tsx
@@ -1,40 +1,58 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { apiFetch } from '@/lib/api';
 import { toast } from 'sonner';
-import { Trash2, HardDrive, Network, PackageMinus, MonitorX, PieChart as ChartIcon } from 'lucide-react';
+import { Trash2, HardDrive, Network, PackageMinus, MonitorX, MoreVertical, AlertTriangle, ShieldCheck } from 'lucide-react';
 import { useNodes } from '@/context/NodeContext';
-import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
 import { formatBytes } from '@/lib/utils';
+import { cn } from '@/lib/utils';
+
+// ── Interfaces ─────────────────────────────────────────────────────────────────
 
 interface UsageData {
     reclaimableImages: number;
     reclaimableContainers: number;
     reclaimableVolumes: number;
+    managedImageBytes: number;
+    unmanagedImageBytes: number;
+    managedVolumeBytes: number;
+    unmanagedVolumeBytes: number;
 }
+
 interface DockerImage {
     Id: string;
     RepoTags: string[];
     Size: number;
     Containers: number;
+    managedBy: string | null;
+    managedStatus: 'managed' | 'unmanaged' | 'unused';
 }
+
 interface DockerVolume {
     Name: string;
     Driver: string;
     Mountpoint: string;
+    managedBy: string | null;
+    managedStatus: 'managed' | 'unmanaged';
 }
+
 interface DockerNetwork {
     Id: string;
     Name: string;
     Driver: string;
     Scope: string;
+    managedBy: string | null;
+    managedStatus: 'managed' | 'unmanaged' | 'system';
 }
-interface OrphanContainer {
+
+interface UnmanagedContainer {
     Id: string;
     Names: string[];
     State: string;
@@ -42,74 +60,321 @@ interface OrphanContainer {
     Image: string;
 }
 
+type ResourceFilter = 'all' | 'managed' | 'unmanaged';
+type PruneTarget = 'containers' | 'images' | 'networks' | 'volumes';
+type PruneScope = 'managed' | 'all';
+
+// ── Disk Footprint Widget ──────────────────────────────────────────────────────
+
+interface FootprintWidgetProps {
+    usage: UsageData;
+    onFilter: (filter: ResourceFilter) => void;
+}
+
+function FootprintWidget({ usage, onFilter }: FootprintWidgetProps) {
+    const [animated, setAnimated] = useState(false);
+    const ref = useRef<HTMLDivElement>(null);
+
+    const managedBytes = usage.managedImageBytes + usage.managedVolumeBytes;
+    const unmanagedBytes = usage.unmanagedImageBytes + usage.unmanagedVolumeBytes;
+    const reclaimable = usage.reclaimableImages;
+    const total = managedBytes + unmanagedBytes + reclaimable;
+
+    useEffect(() => {
+        // Trigger bar animation on mount
+        const t = setTimeout(() => setAnimated(true), 60);
+        return () => clearTimeout(t);
+    }, []);
+
+    if (total === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center h-28 text-muted-foreground text-sm gap-2 animate-in fade-in-0 duration-300">
+                <ShieldCheck className="w-8 h-8 opacity-40" />
+                <span>No disk usage data available.</span>
+            </div>
+        );
+    }
+
+    const pct = (n: number) => `${Math.max(0, (n / total) * 100).toFixed(1)}%`;
+
+    const segments: { bytes: number; color: string; label: string; filter: ResourceFilter | null; hoverClass: string }[] = [
+        { bytes: managedBytes, color: 'bg-emerald-500', label: 'Sencho Managed', filter: 'managed', hoverClass: 'hover:bg-emerald-400' },
+        { bytes: unmanagedBytes, color: 'bg-orange-500', label: 'External Projects', filter: 'unmanaged', hoverClass: 'hover:bg-orange-400' },
+        { bytes: reclaimable, color: 'bg-muted-foreground/20', label: 'Reclaimable', filter: null, hoverClass: '' },
+    ];
+
+    return (
+        <div ref={ref} className="space-y-4 animate-in fade-in-0 duration-300">
+            {/* Stacked bar */}
+            <div className="relative flex h-4 w-full rounded-full overflow-hidden bg-muted gap-px">
+                {segments.map((seg, i) =>
+                    seg.bytes > 0 ? (
+                        <div
+                            key={i}
+                            title={`${seg.label}: ${formatBytes(seg.bytes)}`}
+                            className={cn(
+                                seg.color, seg.hoverClass,
+                                'transition-all duration-700 ease-out',
+                                seg.filter ? 'cursor-pointer' : 'cursor-default',
+                            )}
+                            style={{
+                                width: animated ? pct(seg.bytes) : '0%',
+                                transitionDelay: `${i * 80}ms`,
+                            }}
+                            onClick={() => seg.filter && onFilter(seg.filter)}
+                        />
+                    ) : null
+                )}
+            </div>
+
+            {/* Legend */}
+            <div className="space-y-2.5">
+                {segments.map((seg, i) =>
+                    seg.bytes > 0 ? (
+                        <button
+                            key={i}
+                            disabled={!seg.filter}
+                            onClick={() => seg.filter && onFilter(seg.filter)}
+                            className={cn(
+                                'flex items-center justify-between w-full text-sm group rounded-md px-1 py-0.5 -mx-1 transition-colors duration-150',
+                                seg.filter ? 'cursor-pointer hover:bg-muted/60' : 'cursor-default',
+                            )}
+                        >
+                            <div className="flex items-center gap-2.5 text-muted-foreground group-hover:text-foreground transition-colors">
+                                <span className={cn('w-2.5 h-2.5 rounded-sm shrink-0', seg.color)} />
+                                <span className="font-medium text-xs tracking-wide">{seg.label}</span>
+                            </div>
+                            <span className="font-mono text-xs text-muted-foreground tabular-nums">
+                                {formatBytes(seg.bytes)}
+                            </span>
+                        </button>
+                    ) : null
+                )}
+            </div>
+        </div>
+    );
+}
+
+// ── Filter Toggle — Segmented Control ─────────────────────────────────────────
+
+interface FilterToggleProps {
+    value: ResourceFilter;
+    onChange: (v: ResourceFilter) => void;
+    counts: { all: number; managed: number; unmanaged: number };
+}
+
+function FilterToggle({ value, onChange, counts }: FilterToggleProps) {
+    const options: { key: ResourceFilter; label: string; count: number }[] = [
+        { key: 'all', label: 'All', count: counts.all },
+        { key: 'managed', label: 'Managed', count: counts.managed },
+        { key: 'unmanaged', label: 'External', count: counts.unmanaged },
+    ];
+
+    return (
+        <div className="flex items-center gap-1 px-3 py-2.5 border-b bg-muted/10">
+            <div className="flex items-center gap-0.5 bg-muted/50 rounded-lg p-0.5">
+                {options.map(({ key, label, count }) => (
+                    <button
+                        key={key}
+                        onClick={() => onChange(key)}
+                        className={cn(
+                            'flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-medium transition-all duration-200',
+                            value === key
+                                ? 'bg-background text-foreground shadow-sm'
+                                : 'text-muted-foreground hover:text-foreground',
+                        )}
+                    >
+                        {label}
+                        <span className={cn(
+                            'inline-flex items-center justify-center h-4 min-w-4 px-1 rounded-sm text-[10px] font-mono transition-colors duration-200',
+                            value === key ? 'bg-muted text-foreground' : 'text-muted-foreground/70',
+                        )}>
+                            {count}
+                        </span>
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+// ── Managed Status Badge ───────────────────────────────────────────────────────
+
+function ManagedBadge({ status, managedBy }: {
+    status: 'managed' | 'unmanaged' | 'unused' | 'system';
+    managedBy: string | null;
+}) {
+    if (status === 'managed') {
+        return (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded border border-emerald-500/25 bg-emerald-500/8 text-emerald-500 text-[10px] font-medium">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shrink-0" />
+                {managedBy}
+            </span>
+        );
+    }
+    if (status === 'unmanaged') {
+        return (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded border border-orange-500/25 bg-orange-500/8 text-orange-500 text-[10px] font-medium">
+                <span className="w-1.5 h-1.5 rounded-full bg-orange-500 shrink-0" />
+                External
+            </span>
+        );
+    }
+    if (status === 'system') {
+        return (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded border border-border bg-muted/40 text-muted-foreground text-[10px] font-medium">
+                <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40 shrink-0" />
+                System
+            </span>
+        );
+    }
+    return null;
+}
+
+// ── Quick Clean Prune Button ───────────────────────────────────────────────────
+
+interface PruneButtonProps {
+    target: PruneTarget;
+    icon: React.ReactNode;
+    label: string;
+    accentClass: string;
+    onManaged: () => void;
+    onAll: () => void;
+}
+
+function PruneButton({ target, icon, label, accentClass, onManaged, onAll }: PruneButtonProps) {
+    return (
+        <div className={cn(
+            'group flex flex-col rounded-lg border bg-card overflow-hidden',
+            'transition-shadow duration-200 hover:shadow-md',
+        )}>
+            <button
+                onClick={onManaged}
+                className="flex-1 flex flex-col items-center justify-center gap-2 p-3 pt-4 hover:bg-muted/40 transition-colors duration-150"
+            >
+                <span className={cn('transition-transform duration-200 group-hover:scale-110', accentClass)}>
+                    {icon}
+                </span>
+                <span className="text-xs font-semibold text-center leading-tight text-foreground">{label}</span>
+                <span className="text-[10px] text-brand font-mono tracking-wide">Sencho only</span>
+            </button>
+            {target !== 'containers' && (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <button className={cn(
+                            'flex items-center justify-center gap-1 border-t h-7 w-full text-[10px] text-muted-foreground',
+                            'hover:bg-muted/40 hover:text-foreground transition-colors duration-150',
+                        )}>
+                            <MoreVertical className="w-3 h-3" />
+                            <span>More options</span>
+                        </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="w-52">
+                        <DropdownMenuItem
+                            className="text-destructive focus:text-destructive focus:bg-destructive/10 gap-2 text-xs"
+                            onClick={onAll}
+                        >
+                            <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
+                            <span>All Docker <span className="text-muted-foreground">(includes external)</span></span>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            )}
+        </div>
+    );
+}
+
+// ── Table Skeleton ─────────────────────────────────────────────────────────────
+
+function TableSkeleton({ cols, rows = 5 }: { cols: number; rows?: number }) {
+    return (
+        <TableBody>
+            {Array.from({ length: rows }).map((_, r) => (
+                <TableRow key={r} className="animate-in fade-in-0" style={{ animationDelay: `${r * 40}ms` }}>
+                    {Array.from({ length: cols }).map((_, c) => (
+                        <TableCell key={c}>
+                            <Skeleton className={cn('h-4', c === 0 ? 'w-24' : c === 1 ? 'w-48' : 'w-16')} />
+                        </TableCell>
+                    ))}
+                </TableRow>
+            ))}
+        </TableBody>
+    );
+}
+
+// ── Main Component ─────────────────────────────────────────────────────────────
+
 export default function ResourcesView() {
     const { activeNode } = useNodes();
     const [usage, setUsage] = useState<UsageData | null>(null);
     const [images, setImages] = useState<DockerImage[]>([]);
     const [volumes, setVolumes] = useState<DockerVolume[]>([]);
     const [networks, setNetworks] = useState<DockerNetwork[]>([]);
-    const [orphans, setOrphans] = useState<Record<string, OrphanContainer[]>>({});
+    const [orphans, setOrphans] = useState<Record<string, UnmanagedContainer[]>>({});
 
     const [isLoading, setIsLoading] = useState(true);
     const [isActioning, setIsActioning] = useState(false);
 
-    // Modal states
-    const [confirmPruneType, setConfirmPruneType] = useState<'containers' | 'images' | 'networks' | 'volumes' | null>(null);
-    const [confirmDelete, setConfirmDelete] = useState<{ type: 'images' | 'volumes' | 'networks', id: string, name?: string } | null>(null);
+    // Filter state
+    const [imageFilter, setImageFilter] = useState<ResourceFilter>('all');
+    const [volumeFilter, setVolumeFilter] = useState<ResourceFilter>('all');
+    const [networkFilter, setNetworkFilter] = useState<ResourceFilter>('all');
 
-    // Ghost hunting state
+    // Modal states
+    const [confirmPrune, setConfirmPrune] = useState<{ target: PruneTarget; scope: PruneScope } | null>(null);
+    const [confirmDelete, setConfirmDelete] = useState<{ type: 'images' | 'volumes' | 'networks'; id: string; name?: string } | null>(null);
+
+    // Unmanaged container state
     const [selectedOrphans, setSelectedOrphans] = useState<string[]>([]);
     const [bulkPurgeConfirm, setBulkPurgeConfirm] = useState(false);
 
     const fetchAllData = async () => {
         setIsLoading(true);
         try {
-            const [usageRes, imagesRes, volumesRes, networksRes, orphansRes] = await Promise.all([
+            const [usageRes, resourcesRes, orphansRes] = await Promise.all([
                 apiFetch('/system/docker-df'),
-                apiFetch('/system/images'),
-                apiFetch('/system/volumes'),
-                apiFetch('/system/networks'),
+                apiFetch('/system/resources'),
                 apiFetch('/system/orphans'),
             ]);
 
             setUsage(await usageRes.json());
-            setImages(await imagesRes.json());
-            setVolumes(await volumesRes.json());
-            setNetworks(await networksRes.json());
+            const resources = await resourcesRes.json();
+            setImages(resources.images ?? []);
+            setVolumes(resources.volumes ?? []);
+            setNetworks(resources.networks ?? []);
             setOrphans(await orphansRes.json());
             setSelectedOrphans([]);
-        } catch (error) {
-            console.error('Failed to fetch data', error);
+        } catch (err) {
+            console.error('Failed to fetch data', err);
             toast.error('Failed to load resources data');
         } finally {
             setIsLoading(false);
         }
     };
 
-    useEffect(() => {
-        fetchAllData();
-    }, []);
+    useEffect(() => { fetchAllData(); }, [activeNode]);
 
     const handlePrune = async () => {
-        if (!confirmPruneType) return;
+        if (!confirmPrune) return;
         setIsActioning(true);
         try {
             const res = await apiFetch('/system/prune/system', {
                 method: 'POST',
-                body: JSON.stringify({ target: confirmPruneType })
+                body: JSON.stringify({ target: confirmPrune.target, scope: confirmPrune.scope })
             });
             const data = await res.json();
-            if (data.reclaimedBytes !== undefined) {
-                toast.success(`Pruned ${confirmPruneType}. Reclaimed ${formatBytes(data.reclaimedBytes)}.`);
-            } else {
-                toast.success(`Pruned ${confirmPruneType}.`);
-            }
+            const scopeLabel = confirmPrune.scope === 'managed' ? 'Sencho-managed' : 'all';
+            toast.success(
+                data.reclaimedBytes !== undefined
+                    ? `Pruned ${scopeLabel} ${confirmPrune.target}. Reclaimed ${formatBytes(data.reclaimedBytes)}.`
+                    : `Pruned ${scopeLabel} ${confirmPrune.target}.`
+            );
             await fetchAllData();
-        } catch (error) {
-            toast.error(`Failed to prune ${confirmPruneType}`);
+        } catch {
+            toast.error(confirmPrune ? `Failed to prune ${confirmPrune.target}` : 'Prune failed');
         } finally {
             setIsActioning(false);
-            setConfirmPruneType(null);
+            setConfirmPrune(null);
         }
     };
 
@@ -124,7 +389,7 @@ export default function ResourcesView() {
             if (!res.ok) throw new Error();
             toast.success(`Deleted ${confirmDelete.type.slice(0, -1)}`);
             await fetchAllData();
-        } catch (error) {
+        } catch {
             toast.error(`Failed to delete ${confirmDelete.type.slice(0, -1)}`);
         } finally {
             setIsActioning(false);
@@ -132,15 +397,13 @@ export default function ResourcesView() {
         }
     };
 
-    const toggleOrphanSelection = (containerId: string) => {
-        setSelectedOrphans(prev => prev.includes(containerId) ? prev.filter(id => id !== containerId) : [...prev, containerId]);
-    };
+    const toggleOrphan = (id: string) =>
+        setSelectedOrphans(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
 
     const totalOrphansCount = Object.values(orphans).flat().length;
     const selectAllOrphans = () => {
         const allIds = Object.values(orphans).flat().map(c => c.Id);
-        if (selectedOrphans.length === allIds.length) setSelectedOrphans([]);
-        else setSelectedOrphans(allIds);
+        setSelectedOrphans(selectedOrphans.length === allIds.length ? [] : allIds);
     };
 
     const handlePurgeOrphans = async () => {
@@ -151,130 +414,149 @@ export default function ResourcesView() {
                 body: JSON.stringify({ containerIds: selectedOrphans })
             });
             if (!res.ok) throw new Error();
-            toast.success(`Purged ${selectedOrphans.length} ghost container(s)`);
+            toast.success(`Purged ${selectedOrphans.length} unmanaged container(s)`);
             setBulkPurgeConfirm(false);
             await fetchAllData();
-        } catch (error) {
+        } catch {
             toast.error('Failed to purge selected containers.');
         } finally {
             setIsActioning(false);
         }
     };
 
-    const chartData = [
-        { name: 'Unused Images', value: usage?.reclaimableImages || 0, color: '#3b82f6' },
-        { name: 'Unused Volumes', value: usage?.reclaimableVolumes || 0, color: '#a855f7' },
-        { name: 'Stopped Containers', value: usage?.reclaimableContainers || 0, color: '#f97316' },
-    ];
+    // Derived filtered lists
+    const filteredImages = images.filter(img =>
+        imageFilter === 'managed' ? img.managedStatus === 'managed' :
+        imageFilter === 'unmanaged' ? img.managedStatus !== 'managed' : true
+    );
+    const filteredVolumes = volumes.filter(vol =>
+        volumeFilter === 'managed' ? vol.managedStatus === 'managed' :
+        volumeFilter === 'unmanaged' ? vol.managedStatus !== 'managed' : true
+    );
+    const filteredNetworks = networks.filter(net =>
+        networkFilter === 'managed' ? net.managedStatus === 'managed' :
+        networkFilter === 'unmanaged' ? net.managedStatus !== 'managed' : true
+    );
 
-    const totalReclaimable = chartData.reduce((acc, curr) => acc + curr.value, 0);
-
-    const CustomTooltip = ({ active, payload }: any) => {
-        if (active && payload && payload.length) {
-            return (
-                <div className="bg-popover text-popover-foreground border rounded-lg shadow-md p-3 text-sm">
-                    <p className="font-semibold">{payload[0].name}</p>
-                    <p>{formatBytes(payload[0].value)}</p>
-                </div>
-            );
-        }
-        return null;
+    const handleFootprintFilter = (filter: ResourceFilter) => {
+        setImageFilter(filter);
+        setVolumeFilter(filter);
     };
 
-    if (isLoading && !usage) {
-        return <div className="p-6 flex justify-center items-center h-full text-muted-foreground animate-pulse">Loading resources...</div>;
-    }
-
     return (
-        <div className="p-6 h-full overflow-auto text-foreground flex flex-col gap-6">
-            <div className="flex items-center gap-2">
-                <HardDrive className="w-6 h-6" />
-                <h1 className="text-2xl font-bold">Resources Hub</h1>
+        <div className="p-6 h-full overflow-auto text-foreground flex flex-col gap-6 animate-in fade-in-0 duration-300">
+
+            {/* Header */}
+            <div className="flex items-center gap-3">
+                <HardDrive className="w-5 h-5 text-muted-foreground" />
+                <h1 className="text-xl font-semibold tracking-tight">Resources Hub</h1>
                 {activeNode?.type === 'remote' && (
-                    <span className="text-sm font-normal text-muted-foreground">— {activeNode.name}</span>
+                    <span className="text-sm text-muted-foreground">— {activeNode.name}</span>
                 )}
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <Card className="col-span-1 border-border shadow-sm">
-                    <CardHeader className="pb-2">
-                        <CardTitle className="flex items-center gap-2 text-lg">
-                            <ChartIcon className="w-5 h-5 text-muted-foreground" /> Reclaimable Space
+            {/* Top row: Footprint + Quick Clean */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+
+                {/* Disk Footprint */}
+                <Card className="col-span-1 border-border shadow-sm animate-in fade-in-0 slide-in-from-bottom-2 duration-300">
+                    <CardHeader className="pb-3">
+                        <CardTitle className="text-sm font-medium text-muted-foreground tracking-wide uppercase">
+                            Docker Disk Footprint
                         </CardTitle>
+                        <CardDescription className="text-xs">
+                            Click a segment to filter the tabs below
+                        </CardDescription>
                     </CardHeader>
-                    <CardContent className="h-48 flex flex-col items-center justify-center">
-                        {totalReclaimable > 0 ? (
-                            <ResponsiveContainer width="100%" height="80%">
-                                <PieChart>
-                                    <Pie
-                                        data={chartData}
-                                        cx="50%"
-                                        cy="50%"
-                                        outerRadius={50}
-                                        stroke="none"
-                                        dataKey="value"
-                                    >
-                                        {chartData.map((entry, index) => (
-                                            <Cell key={`cell-${index}`} fill={entry.color} />
-                                        ))}
-                                    </Pie>
-                                    <Tooltip content={<CustomTooltip />} />
-                                </PieChart>
-                            </ResponsiveContainer>
+                    <CardContent>
+                        {usage ? (
+                            <FootprintWidget usage={usage} onFilter={handleFootprintFilter} />
                         ) : (
-                            <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
-                                <span className="text-sm font-medium">Your system is clean</span>
+                            <div className="space-y-3">
+                                <Skeleton className="h-4 w-full rounded-full" />
+                                <div className="space-y-2">
+                                    <Skeleton className="h-4 w-full" />
+                                    <Skeleton className="h-4 w-3/4" />
+                                    <Skeleton className="h-4 w-1/2" />
+                                </div>
                             </div>
                         )}
-                        <div className="flex gap-4 text-xs font-semibold justify-center mt-2 flex-wrap">
-                            {chartData.filter(d => d.value > 0).map((entry, index) => (
-                                <div key={index} className="flex items-center gap-1">
-                                    <span className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
-                                    {entry.name}
-                                </div>
-                            ))}
-                        </div>
                     </CardContent>
                 </Card>
 
-                <Card className="col-span-1 md:col-span-2 border-border shadow-sm flex flex-col">
-                    <CardHeader className="pb-2">
-                        <CardTitle className="text-lg">Quick Clean</CardTitle>
-                        <CardDescription>Free up disk space with bulk prune operations</CardDescription>
+                {/* Quick Clean */}
+                <Card className="col-span-1 md:col-span-2 border-border shadow-sm flex flex-col animate-in fade-in-0 slide-in-from-bottom-2 duration-300 delay-75">
+                    <CardHeader className="pb-3">
+                        <CardTitle className="text-sm font-medium text-muted-foreground tracking-wide uppercase">
+                            Quick Clean
+                        </CardTitle>
+                        <CardDescription className="text-xs">
+                            Primary actions target <span className="text-foreground font-medium">Sencho-managed</span> resources only.
+                            Use <MoreVertical className="inline w-3 h-3" /> for all-Docker operations.
+                        </CardDescription>
                     </CardHeader>
                     <CardContent className="flex-1 flex flex-col justify-center">
-                        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                            <Button variant="outline" className="h-24 flex flex-col gap-2 hover:bg-muted/50 transition-colors" onClick={() => setConfirmPruneType('images')}>
-                                <PackageMinus className="w-8 h-8 text-blue-500" />
-                                <span className="text-xs font-semibold">Prune Unused Images</span>
-                            </Button>
-                            <Button variant="outline" className="h-24 flex flex-col gap-2 hover:bg-muted/50 transition-colors" onClick={() => setConfirmPruneType('volumes')}>
-                                <HardDrive className="w-8 h-8 text-purple-500" />
-                                <span className="text-xs font-semibold">Prune Unused Volumes</span>
-                            </Button>
-                            <Button variant="outline" className="h-24 flex flex-col gap-2 hover:bg-muted/50 transition-colors" onClick={() => setConfirmPruneType('networks')}>
-                                <Network className="w-8 h-8 text-green-500" />
-                                <span className="text-xs font-semibold">Prune Dead Networks</span>
-                            </Button>
-                            <Button variant="outline" className="h-24 flex flex-col gap-2 hover:bg-muted/50 transition-colors" onClick={() => setConfirmPruneType('containers')}>
-                                <MonitorX className="w-8 h-8 text-orange-500" />
-                                <span className="text-xs font-semibold">Purge Ghost Containers</span>
-                            </Button>
+                        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                            <PruneButton
+                                target="images"
+                                icon={<PackageMinus className="w-6 h-6" />}
+                                label="Prune Unused Images"
+                                accentClass="text-blue-500"
+                                onManaged={() => setConfirmPrune({ target: 'images', scope: 'managed' })}
+                                onAll={() => setConfirmPrune({ target: 'images', scope: 'all' })}
+                            />
+                            <PruneButton
+                                target="volumes"
+                                icon={<HardDrive className="w-6 h-6" />}
+                                label="Prune Unused Volumes"
+                                accentClass="text-purple-500"
+                                onManaged={() => setConfirmPrune({ target: 'volumes', scope: 'managed' })}
+                                onAll={() => setConfirmPrune({ target: 'volumes', scope: 'all' })}
+                            />
+                            <PruneButton
+                                target="networks"
+                                icon={<Network className="w-6 h-6" />}
+                                label="Prune Dead Networks"
+                                accentClass="text-emerald-500"
+                                onManaged={() => setConfirmPrune({ target: 'networks', scope: 'managed' })}
+                                onAll={() => setConfirmPrune({ target: 'networks', scope: 'all' })}
+                            />
+                            <PruneButton
+                                target="containers"
+                                icon={<MonitorX className="w-6 h-6" />}
+                                label="Purge Unmanaged Containers"
+                                accentClass="text-orange-500"
+                                onManaged={() => setConfirmPrune({ target: 'containers', scope: 'managed' })}
+                                onAll={() => setConfirmPrune({ target: 'containers', scope: 'all' })}
+                            />
                         </div>
                     </CardContent>
                 </Card>
             </div>
 
-            <Tabs defaultValue="images" className="flex-1 flex flex-col w-full rounded-lg border bg-card shadow-sm overflow-hidden min-h-[400px]">
-                <div className="p-4 border-b bg-muted/20">
-                    <TabsList className="grid grid-cols-4 w-full md:w-[600px]">
-                        <TabsTrigger value="images">Images</TabsTrigger>
-                        <TabsTrigger value="volumes">Volumes</TabsTrigger>
-                        <TabsTrigger value="networks">Networks</TabsTrigger>
-                        <TabsTrigger value="ghosts" className="relative">
-                            Ghost Containers
+            {/* Resource Tabs */}
+            <Tabs
+                defaultValue="images"
+                className="flex-1 flex flex-col w-full rounded-lg border bg-card shadow-sm overflow-hidden min-h-[400px] animate-in fade-in-0 slide-in-from-bottom-2 duration-300 delay-150"
+            >
+                <div className="px-4 pt-3 pb-0 border-b bg-muted/10">
+                    <TabsList className="grid grid-cols-4 w-full md:w-[680px] h-9 bg-transparent gap-1 p-0">
+                        {(['images', 'volumes', 'networks'] as const).map(tab => (
+                            <TabsTrigger
+                                key={tab}
+                                value={tab}
+                                className="capitalize text-xs data-[state=active]:bg-background data-[state=active]:shadow-sm rounded-t-md rounded-b-none border-b-2 border-transparent data-[state=active]:border-foreground transition-all duration-200"
+                            >
+                                {tab}
+                            </TabsTrigger>
+                        ))}
+                        <TabsTrigger
+                            value="unmanaged"
+                            className="relative text-xs data-[state=active]:bg-background data-[state=active]:shadow-sm rounded-t-md rounded-b-none border-b-2 border-transparent data-[state=active]:border-foreground transition-all duration-200"
+                        >
+                            Unmanaged
                             {totalOrphansCount > 0 && (
-                                <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white font-bold">
+                                <span className="absolute -top-1.5 -right-1 flex h-4 min-w-4 px-1 items-center justify-center rounded-full bg-orange-500 text-[9px] text-white font-bold animate-in zoom-in-75 duration-200">
                                     {totalOrphansCount}
                                 </span>
                             )}
@@ -282,158 +564,237 @@ export default function ResourcesView() {
                     </TabsList>
                 </div>
 
-                <div className="flex-1 overflow-auto bg-background m-4 border rounded-md relative text-sm">
-                    <TabsContent value="images" className="m-0 border-0 p-0">
+                <div className="flex-1 overflow-auto bg-background relative text-sm">
+
+                    {/* Images */}
+                    <TabsContent value="images" className="m-0 border-0 p-0 animate-in fade-in-0 duration-200">
+                        <FilterToggle
+                            value={imageFilter}
+                            onChange={setImageFilter}
+                            counts={{
+                                all: images.length,
+                                managed: images.filter(i => i.managedStatus === 'managed').length,
+                                unmanaged: images.filter(i => i.managedStatus !== 'managed').length,
+                            }}
+                        />
                         <Table>
                             <TableHeader>
-                                <TableRow>
-                                    <TableHead className="w-[120px]">ID</TableHead>
-                                    <TableHead>Repository:Tag</TableHead>
-                                    <TableHead>Size</TableHead>
-                                    <TableHead>Status</TableHead>
-                                    <TableHead className="text-right">Action</TableHead>
+                                <TableRow className="hover:bg-transparent">
+                                    <TableHead className="w-[120px] text-[11px]">ID</TableHead>
+                                    <TableHead className="text-[11px]">Repository:Tag</TableHead>
+                                    <TableHead className="text-[11px]">Size</TableHead>
+                                    <TableHead className="text-[11px]">Status</TableHead>
+                                    <TableHead className="text-right text-[11px]">Action</TableHead>
                                 </TableRow>
                             </TableHeader>
-                            <TableBody>
-                                {images.length === 0 ? (
-                                    <TableRow><TableCell colSpan={5} className="text-center py-6 text-muted-foreground">No images found.</TableCell></TableRow>
-                                ) : images.map((img) => (
-                                    <TableRow key={img.Id}>
-                                        <TableCell className="font-mono text-xs">{img.Id.split(':')[1]?.substring(0, 12)}</TableCell>
-                                        <TableCell className="font-medium">{img.RepoTags?.[0] || '<none>:<none>'}</TableCell>
-                                        <TableCell>{formatBytes(img.Size)}</TableCell>
-                                        <TableCell>
-                                            <Badge variant={img.Containers > 0 ? "default" : "secondary"}>
-                                                {img.Containers > 0 ? "In Use" : "Unused"}
-                                            </Badge>
-                                        </TableCell>
-                                        <TableCell className="text-right">
-                                            <Button variant="ghost" size="icon" className="hover:text-red-500 hover:bg-red-500/10" onClick={() => setConfirmDelete({ type: 'images', id: img.Id, name: img.RepoTags?.[0] })}>
-                                                <Trash2 className="w-4 h-4" />
-                                            </Button>
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </TableBody>
+                            {isLoading ? <TableSkeleton cols={5} /> : (
+                                <TableBody>
+                                    {filteredImages.length === 0 ? (
+                                        <TableRow><TableCell colSpan={5} className="text-center py-8 text-muted-foreground text-sm">No images found.</TableCell></TableRow>
+                                    ) : filteredImages.map((img, i) => (
+                                        <TableRow
+                                            key={img.Id}
+                                            className="animate-in fade-in-0 duration-200 hover:bg-muted/30 transition-colors"
+                                            style={{ animationDelay: `${Math.min(i * 20, 200)}ms` }}
+                                        >
+                                            <TableCell className="font-mono text-xs text-muted-foreground">{img.Id.split(':')[1]?.substring(0, 12)}</TableCell>
+                                            <TableCell className="font-medium">{img.RepoTags?.[0] || '<none>:<none>'}</TableCell>
+                                            <TableCell className="font-mono text-xs tabular-nums">{formatBytes(img.Size)}</TableCell>
+                                            <TableCell>
+                                                <div className="flex items-center gap-1.5 flex-wrap">
+                                                    <Badge variant={img.Containers > 0 ? "default" : "secondary"} className="text-[10px] h-5">
+                                                        {img.Containers > 0 ? "In Use" : "Unused"}
+                                                    </Badge>
+                                                    <ManagedBadge status={img.managedStatus} managedBy={img.managedBy} />
+                                                </div>
+                                            </TableCell>
+                                            <TableCell className="text-right">
+                                                <Button variant="ghost" size="icon" className="h-7 w-7 hover:text-red-500 hover:bg-red-500/10 transition-colors" onClick={() => setConfirmDelete({ type: 'images', id: img.Id, name: img.RepoTags?.[0] })}>
+                                                    <Trash2 className="w-3.5 h-3.5" />
+                                                </Button>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            )}
                         </Table>
                     </TabsContent>
 
-                    <TabsContent value="volumes" className="m-0 border-0 p-0">
+                    {/* Volumes */}
+                    <TabsContent value="volumes" className="m-0 border-0 p-0 animate-in fade-in-0 duration-200">
+                        <FilterToggle
+                            value={volumeFilter}
+                            onChange={setVolumeFilter}
+                            counts={{
+                                all: volumes.length,
+                                managed: volumes.filter(v => v.managedStatus === 'managed').length,
+                                unmanaged: volumes.filter(v => v.managedStatus !== 'managed').length,
+                            }}
+                        />
                         <Table>
                             <TableHeader>
-                                <TableRow>
-                                    <TableHead>Name</TableHead>
-                                    <TableHead>Driver</TableHead>
-                                    <TableHead className="hidden md:table-cell">Mountpoint</TableHead>
-                                    <TableHead className="text-right">Action</TableHead>
+                                <TableRow className="hover:bg-transparent">
+                                    <TableHead className="text-[11px]">Name</TableHead>
+                                    <TableHead className="text-[11px]">Driver</TableHead>
+                                    <TableHead className="hidden md:table-cell text-[11px]">Mountpoint</TableHead>
+                                    <TableHead className="text-[11px]">Status</TableHead>
+                                    <TableHead className="text-right text-[11px]">Action</TableHead>
                                 </TableRow>
                             </TableHeader>
-                            <TableBody>
-                                {volumes.length === 0 ? (
-                                    <TableRow><TableCell colSpan={4} className="text-center py-6 text-muted-foreground">No volumes found.</TableCell></TableRow>
-                                ) : volumes.map((vol) => (
-                                    <TableRow key={vol.Name}>
-                                        <TableCell className="font-mono text-xs max-w-[200px] truncate">{vol.Name}</TableCell>
-                                        <TableCell><Badge variant="outline">{vol.Driver}</Badge></TableCell>
-                                        <TableCell className="hidden md:table-cell text-xs text-muted-foreground truncate max-w-[300px]">{vol.Mountpoint}</TableCell>
-                                        <TableCell className="text-right">
-                                            <Button variant="ghost" size="icon" className="hover:text-red-500 hover:bg-red-500/10" onClick={() => setConfirmDelete({ type: 'volumes', id: vol.Name, name: vol.Name })}>
-                                                <Trash2 className="w-4 h-4" />
-                                            </Button>
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </TableBody>
+                            {isLoading ? <TableSkeleton cols={5} /> : (
+                                <TableBody>
+                                    {filteredVolumes.length === 0 ? (
+                                        <TableRow><TableCell colSpan={5} className="text-center py-8 text-muted-foreground text-sm">No volumes found.</TableCell></TableRow>
+                                    ) : filteredVolumes.map((vol, i) => (
+                                        <TableRow
+                                            key={vol.Name}
+                                            className="animate-in fade-in-0 duration-200 hover:bg-muted/30 transition-colors"
+                                            style={{ animationDelay: `${Math.min(i * 20, 200)}ms` }}
+                                        >
+                                            <TableCell className="font-mono text-xs max-w-[200px] truncate">{vol.Name}</TableCell>
+                                            <TableCell><Badge variant="outline" className="text-[10px] h-5">{vol.Driver}</Badge></TableCell>
+                                            <TableCell className="hidden md:table-cell text-xs text-muted-foreground truncate max-w-[300px]">{vol.Mountpoint}</TableCell>
+                                            <TableCell><ManagedBadge status={vol.managedStatus} managedBy={vol.managedBy} /></TableCell>
+                                            <TableCell className="text-right">
+                                                <Button variant="ghost" size="icon" className="h-7 w-7 hover:text-red-500 hover:bg-red-500/10 transition-colors" onClick={() => setConfirmDelete({ type: 'volumes', id: vol.Name, name: vol.Name })}>
+                                                    <Trash2 className="w-3.5 h-3.5" />
+                                                </Button>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            )}
                         </Table>
                     </TabsContent>
 
-                    <TabsContent value="networks" className="m-0 border-0 p-0">
+                    {/* Networks */}
+                    <TabsContent value="networks" className="m-0 border-0 p-0 animate-in fade-in-0 duration-200">
+                        <FilterToggle
+                            value={networkFilter}
+                            onChange={setNetworkFilter}
+                            counts={{
+                                all: networks.length,
+                                managed: networks.filter(n => n.managedStatus === 'managed').length,
+                                unmanaged: networks.filter(n => n.managedStatus !== 'managed').length,
+                            }}
+                        />
                         <Table>
                             <TableHeader>
-                                <TableRow>
-                                    <TableHead className="w-[120px]">ID</TableHead>
-                                    <TableHead>Name</TableHead>
-                                    <TableHead>Driver</TableHead>
-                                    <TableHead>Scope</TableHead>
-                                    <TableHead className="text-right">Action</TableHead>
+                                <TableRow className="hover:bg-transparent">
+                                    <TableHead className="w-[120px] text-[11px]">ID</TableHead>
+                                    <TableHead className="text-[11px]">Name</TableHead>
+                                    <TableHead className="text-[11px]">Driver</TableHead>
+                                    <TableHead className="text-[11px]">Scope</TableHead>
+                                    <TableHead className="text-[11px]">Status</TableHead>
+                                    <TableHead className="text-right text-[11px]">Action</TableHead>
                                 </TableRow>
                             </TableHeader>
-                            <TableBody>
-                                {networks.length === 0 ? (
-                                    <TableRow><TableCell colSpan={5} className="text-center py-6 text-muted-foreground">No networks found.</TableCell></TableRow>
-                                ) : networks.map((net) => (
-                                    <TableRow key={net.Id}>
-                                        <TableCell className="font-mono text-xs">{net.Id.substring(0, 12)}</TableCell>
-                                        <TableCell className="font-medium max-w-[200px] truncate">{net.Name}</TableCell>
-                                        <TableCell>{net.Driver}</TableCell>
-                                        <TableCell><Badge variant="outline">{net.Scope}</Badge></TableCell>
-                                        <TableCell className="text-right">
-                                            <Button variant="ghost" size="icon" className="hover:text-red-500 hover:bg-red-500/10" onClick={() => setConfirmDelete({ type: 'networks', id: net.Id, name: net.Name })}>
-                                                <Trash2 className="w-4 h-4" />
-                                            </Button>
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </TableBody>
+                            {isLoading ? <TableSkeleton cols={6} /> : (
+                                <TableBody>
+                                    {filteredNetworks.length === 0 ? (
+                                        <TableRow><TableCell colSpan={6} className="text-center py-8 text-muted-foreground text-sm">No networks found.</TableCell></TableRow>
+                                    ) : filteredNetworks.map((net, i) => (
+                                        <TableRow
+                                            key={net.Id}
+                                            className="animate-in fade-in-0 duration-200 hover:bg-muted/30 transition-colors"
+                                            style={{ animationDelay: `${Math.min(i * 20, 200)}ms` }}
+                                        >
+                                            <TableCell className="font-mono text-xs text-muted-foreground">{net.Id.substring(0, 12)}</TableCell>
+                                            <TableCell className="font-medium max-w-[200px] truncate">{net.Name}</TableCell>
+                                            <TableCell className="text-xs">{net.Driver}</TableCell>
+                                            <TableCell><Badge variant="outline" className="text-[10px] h-5">{net.Scope}</Badge></TableCell>
+                                            <TableCell><ManagedBadge status={net.managedStatus} managedBy={net.managedBy} /></TableCell>
+                                            <TableCell className="text-right">
+                                                <Button
+                                                    variant="ghost"
+                                                    size="icon"
+                                                    className="h-7 w-7 hover:text-red-500 hover:bg-red-500/10 transition-colors disabled:opacity-30"
+                                                    disabled={net.managedStatus === 'system'}
+                                                    onClick={() => setConfirmDelete({ type: 'networks', id: net.Id, name: net.Name })}
+                                                >
+                                                    <Trash2 className="w-3.5 h-3.5" />
+                                                </Button>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            )}
                         </Table>
                     </TabsContent>
 
-                    <TabsContent value="ghosts" className="m-0 border-0 p-0 h-full flex flex-col">
-                        <div className="flex justify-between items-center p-3 border-b bg-muted/10 sticky top-0 z-10">
-                            <div className="flex items-center gap-2">
+                    {/* Unmanaged Containers */}
+                    <TabsContent value="unmanaged" className="m-0 border-0 p-0 h-full flex flex-col animate-in fade-in-0 duration-200">
+                        <div className="flex justify-between items-center px-4 py-2.5 border-b bg-muted/10 sticky top-0 z-10 backdrop-blur-sm">
+                            <div className="flex items-center gap-2.5">
                                 <input
                                     type="checkbox"
                                     onChange={selectAllOrphans}
                                     checked={selectedOrphans.length === totalOrphansCount && totalOrphansCount > 0}
-                                    className="rounded border-gray-300 focus:ring-primary h-4 w-4 ml-2"
+                                    className="rounded border-border focus:ring-ring h-4 w-4 accent-foreground"
                                 />
-                                <span className="text-sm font-medium">Select All</span>
+                                <span className="text-xs font-medium text-muted-foreground">Select all</span>
                             </div>
                             <Button
                                 variant="destructive"
                                 size="sm"
+                                className="h-7 text-xs gap-1.5"
                                 onClick={() => setBulkPurgeConfirm(true)}
                                 disabled={selectedOrphans.length === 0 || isActioning}
                             >
-                                <Trash2 className="w-4 h-4 mr-2" />
+                                <Trash2 className="w-3.5 h-3.5" />
                                 {isActioning ? 'Purging...' : `Purge Selected (${selectedOrphans.length})`}
                             </Button>
                         </div>
 
                         {totalOrphansCount === 0 ? (
-                            <div className="flex-1 flex flex-col items-center justify-center p-12 text-muted-foreground">
-                                <MonitorX className="w-12 h-12 mb-2 opacity-50 text-green-500" />
-                                <p>No orphaned containers detected.</p>
-                                <p className="text-xs mt-1">Your system is clean!</p>
+                            <div className="flex-1 flex flex-col items-center justify-center p-12 text-muted-foreground animate-in fade-in-0 duration-300">
+                                <div className="w-12 h-12 rounded-full bg-emerald-500/10 flex items-center justify-center mb-3">
+                                    <ShieldCheck className="w-6 h-6 text-emerald-500" />
+                                </div>
+                                <p className="font-medium text-sm">No unmanaged containers</p>
+                                <p className="text-xs mt-1 opacity-70">All running containers are managed by Sencho.</p>
                             </div>
                         ) : (
-                            <div className="p-4 space-y-4 pb-12">
-                                {Object.entries(orphans).map(([project, containers]) => (
-                                    <div key={project} className="bg-card rounded-lg border shadow-sm overflow-hidden text-sm">
-                                        <div className="bg-muted px-4 py-2 border-b font-medium text-xs flex items-center gap-2">
-                                            <span className="w-2 h-2 rounded-full bg-red-500/80"></span>
-                                            Project: {project}
+                            <div className="p-4 space-y-3 pb-12">
+                                {Object.entries(orphans).map(([project, containers], gi) => (
+                                    <div
+                                        key={project}
+                                        className="bg-card rounded-lg border shadow-sm overflow-hidden text-sm animate-in fade-in-0 slide-in-from-bottom-1 duration-200"
+                                        style={{ animationDelay: `${gi * 60}ms` }}
+                                    >
+                                        {/* Project header */}
+                                        <div className="bg-orange-500/8 border-b border-orange-500/15 px-4 py-2 font-medium text-xs flex items-center gap-2">
+                                            <span className="w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse shrink-0" />
+                                            <span className="text-orange-600 dark:text-orange-400">External Project:</span>
+                                            <span className="font-mono text-foreground">{project}</span>
+                                            <span className="ml-auto text-muted-foreground font-normal">{containers.length} container{containers.length !== 1 ? 's' : ''}</span>
                                         </div>
-                                        <div className="divide-y">
-                                            {containers.map((container: OrphanContainer) => (
-                                                <div key={container.Id} className="flex items-center gap-4 p-3 hover:bg-muted/50 transition-colors">
+                                        <div className="divide-y divide-border/50">
+                                            {containers.map((container: UnmanagedContainer) => (
+                                                <div
+                                                    key={container.Id}
+                                                    className="flex items-center gap-3 px-4 py-2.5 hover:bg-muted/30 transition-colors duration-150"
+                                                >
                                                     <input
                                                         type="checkbox"
                                                         checked={selectedOrphans.includes(container.Id)}
-                                                        onChange={() => toggleOrphanSelection(container.Id)}
-                                                        className="rounded border-gray-300 h-4 w-4"
+                                                        onChange={() => toggleOrphan(container.Id)}
+                                                        className="rounded border-border h-4 w-4 accent-foreground"
                                                     />
                                                     <div className="flex-1 min-w-0">
                                                         <div className="flex items-center gap-2">
-                                                            <span className="font-mono font-semibold truncate">
+                                                            <span className="font-mono text-xs font-semibold truncate">
                                                                 {container.Names[0]?.replace(/^\//, '') || container.Id.substring(0, 12)}
                                                             </span>
-                                                            <Badge variant={container.State === 'running' ? 'default' : 'secondary'} className="text-[10px] h-4">
+                                                            <Badge
+                                                                variant={container.State === 'running' ? 'default' : 'secondary'}
+                                                                className="text-[9px] h-4 px-1.5"
+                                                            >
                                                                 {container.State}
                                                             </Badge>
                                                         </div>
-                                                        <div className="text-xs text-muted-foreground truncate mt-1">
-                                                            Image: {container.Image}
+                                                        <div className="text-[11px] text-muted-foreground truncate mt-0.5 font-mono">
+                                                            {container.Image}
                                                         </div>
                                                     </div>
                                                 </div>
@@ -447,31 +808,53 @@ export default function ResourcesView() {
                 </div>
             </Tabs>
 
-            {/* Prune Bulk Action Confirm Dialog */}
-            <AlertDialog open={!!confirmPruneType} onOpenChange={(open) => !open && setConfirmPruneType(null)}>
-                <AlertDialogContent>
+            {/* ── Dialogs ── */}
+
+            {/* Prune Confirm */}
+            <AlertDialog open={!!confirmPrune} onOpenChange={(open) => !open && setConfirmPrune(null)}>
+                <AlertDialogContent className="animate-in fade-in-0 zoom-in-95 duration-200">
                     <AlertDialogHeader>
-                        <AlertDialogTitle>Prune {confirmPruneType}</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Are you sure you want to prune all unused {confirmPruneType}? This action cannot be undone and will permanently free up disk space.
-                        </AlertDialogDescription>
+                        {confirmPrune?.scope === 'all' ? (
+                            <>
+                                <AlertDialogTitle className="flex items-center gap-2 text-destructive">
+                                    <AlertTriangle className="w-4 h-4" />
+                                    Prune All Docker {confirmPrune?.target}
+                                </AlertDialogTitle>
+                                <AlertDialogDescription>
+                                    This will prune <span className="font-semibold text-foreground">all</span> unused {confirmPrune?.target} from the Docker daemon —
+                                    including those from <span className="font-semibold text-foreground">external projects not managed by Sencho</span>. This cannot be undone.
+                                </AlertDialogDescription>
+                            </>
+                        ) : (
+                            <>
+                                <AlertDialogTitle>Prune Sencho-Managed {confirmPrune?.target}</AlertDialogTitle>
+                                <AlertDialogDescription>
+                                    Only unused {confirmPrune?.target} belonging to your Sencho stacks will be removed.
+                                    External Docker resources are <span className="font-semibold text-foreground">not affected</span>.
+                                </AlertDialogDescription>
+                            </>
+                        )}
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                         <AlertDialogCancel disabled={isActioning}>Cancel</AlertDialogCancel>
-                        <AlertDialogAction disabled={isActioning} className="bg-destructive text-destructive-foreground hover:bg-destructive/90" onClick={handlePrune}>
-                            {isActioning ? 'Pruning...' : 'Prune'}
+                        <AlertDialogAction
+                            disabled={isActioning}
+                            className={confirmPrune?.scope === 'all' ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90' : ''}
+                            onClick={handlePrune}
+                        >
+                            {isActioning ? 'Pruning...' : confirmPrune?.scope === 'all' ? 'Prune All' : 'Prune'}
                         </AlertDialogAction>
                     </AlertDialogFooter>
                 </AlertDialogContent>
             </AlertDialog>
 
-            {/* Granular Delete Confirm Dialog */}
+            {/* Delete Confirm */}
             <AlertDialog open={!!confirmDelete} onOpenChange={(open) => !open && setConfirmDelete(null)}>
                 <AlertDialogContent>
                     <AlertDialogHeader>
                         <AlertDialogTitle>Delete {confirmDelete?.type.slice(0, -1)}</AlertDialogTitle>
                         <AlertDialogDescription>
-                            Are you sure you want to delete <span className="font-mono font-bold text-foreground">{confirmDelete?.name || confirmDelete?.id.substring(0, 12)}</span>? This cannot be undone.
+                            Permanently delete <span className="font-mono font-bold text-foreground">{confirmDelete?.name || confirmDelete?.id.substring(0, 12)}</span>? This cannot be undone.
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
@@ -483,13 +866,14 @@ export default function ResourcesView() {
                 </AlertDialogContent>
             </AlertDialog>
 
-            {/* Ghost Container Purge Confirm Dialog */}
+            {/* Unmanaged Container Purge Confirm */}
             <AlertDialog open={bulkPurgeConfirm} onOpenChange={setBulkPurgeConfirm}>
                 <AlertDialogContent>
                     <AlertDialogHeader>
-                        <AlertDialogTitle>Purge Selected Ghosts</AlertDialogTitle>
+                        <AlertDialogTitle>Purge Selected Unmanaged Containers</AlertDialogTitle>
                         <AlertDialogDescription>
-                            Are you sure you want to permanently remove the {selectedOrphans.length} selected orphan container(s)?
+                            Permanently remove {selectedOrphans.length} container{selectedOrphans.length !== 1 ? 's' : ''} from external projects?
+                            This will force-stop and remove them. This cannot be undone.
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index 9f0bbd1e..c300e48d 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -1,18 +1,25 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
+import { motion } from 'motion/react';
 import {
     Dialog,
     DialogContent,
+    DialogTitle,
+    DialogDescription,
 } from '@/components/ui/dialog';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Slider } from '@/components/ui/slider';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Badge } from '@/components/ui/badge';
 import { toast } from 'sonner';
 import { apiFetch } from '@/lib/api';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Shield, Activity, Bell, Palette, Moon, Sun, Code, Server } from 'lucide-react';
+import { Shield, Activity, Bell, Palette, Moon, Sun, Monitor, Code, Server, Package, RefreshCw, Database, Info } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { NodeManager } from './NodeManager';
 import { useNodes } from '@/context/NodeContext';
 
@@ -22,65 +29,115 @@ interface Agent {
     enabled: boolean;
 }
 
+// Keys that the settings PATCH endpoint accepts
+interface PatchableSettings {
+    host_cpu_limit?: string;
+    host_ram_limit?: string;
+    host_disk_limit?: string;
+    docker_janitor_gb?: string;
+    global_crash?: '0' | '1';
+    global_logs_refresh?: '1' | '3' | '5' | '10';
+    developer_mode?: '0' | '1';
+    template_registry_url?: string;
+    metrics_retention_hours?: string;
+    log_retention_days?: string;
+}
+
+type SectionId = 'account' | 'system' | 'notifications' | 'appearance' | 'developer' | 'nodes' | 'appstore';
+
+type Theme = 'light' | 'dark' | 'auto';
+
 interface SettingsModalProps {
     isOpen: boolean;
     onClose: () => void;
-    isDarkMode: boolean;
-    setIsDarkMode: (mode: boolean) => void;
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
 }
 
-export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: SettingsModalProps) {
+const DEFAULT_SETTINGS: PatchableSettings = {
+    host_cpu_limit: '90',
+    host_ram_limit: '90',
+    host_disk_limit: '90',
+    global_crash: '1',
+    docker_janitor_gb: '5',
+    global_logs_refresh: '5',
+    developer_mode: '0',
+    template_registry_url: '',
+    metrics_retention_hours: '24',
+    log_retention_days: '30',
+};
+
+export function SettingsModal({ isOpen, onClose, theme, setTheme }: SettingsModalProps) {
     const { activeNode } = useNodes();
     const isRemote = activeNode?.type === 'remote';
-    const [activeSection, setActiveSection] = useState<'account' | 'system' | 'notifications' | 'appearance' | 'developer' | 'nodes'>('account');
+    const [activeSection, setActiveSection] = useState<SectionId>('account');
 
     // When switching to a remote node, reset to a node-scoped section if on a global-only one
     useEffect(() => {
-        if (isRemote && (activeSection === 'account' || activeSection === 'notifications' || activeSection === 'appearance' || activeSection === 'nodes')) {
+        if (isRemote && (activeSection === 'account' || activeSection === 'notifications' || activeSection === 'appearance' || activeSection === 'nodes' || activeSection === 'appstore')) {
             setActiveSection('system');
         }
     }, [isRemote]); // eslint-disable-line react-hooks/exhaustive-deps
 
+    // Notification tab state (controlled for sliding indicator)
+    const [notifTab, setNotifTab] = useState<'discord' | 'slack' | 'webhook'>('discord');
+
     // Auth State
     const [authData, setAuthData] = useState({ oldPassword: '', newPassword: '', confirmPassword: '' });
 
-    // Notifications State
+    // Notification agents state
     const [agents, setAgents] = useState<Record<string, Agent>>({
         discord: { type: 'discord', url: '', enabled: false },
         slack: { type: 'slack', url: '', enabled: false },
         webhook: { type: 'webhook', url: '', enabled: false },
     });
 
-    // System Settings State
-    const [settings, setSettings] = useState<Record<string, string>>({
-        host_cpu_limit: '90',
-        host_ram_limit: '90',
-        host_disk_limit: '90',
-        global_crash: '1',
-        docker_janitor_gb: '5',
-        global_logs_refresh: '5',
-        developer_mode: '0'
-    });
+    // Settings state - all user-configurable keys (no auth keys)
+    const [settings, setSettings] = useState<PatchableSettings>({ ...DEFAULT_SETTINGS });
 
-    const [isLoading, setIsLoading] = useState(false);
+    // Track server state to detect unsaved changes without causing re-renders
+    const serverSettingsRef = useRef<PatchableSettings>({ ...DEFAULT_SETTINGS });
+
+    // Per-operation loading states
+    const [isSettingsLoading, setIsSettingsLoading] = useState(false);
+    const [isSavingSystem, setIsSavingSystem] = useState(false);
+    const [isSavingDeveloper, setIsSavingDeveloper] = useState(false);
+    const [isSavingPassword, setIsSavingPassword] = useState(false);
+    const [isSavingRegistry, setIsSavingRegistry] = useState(false);
+    const [isSavingAgent, setIsSavingAgent] = useState<Record<string, boolean>>({});
+    const [isTestingAgent, setIsTestingAgent] = useState<Record<string, boolean>>({});
+
+    // Unsaved changes indicators per section (compared against server ref)
+    const hasSystemChanges =
+        settings.host_cpu_limit !== serverSettingsRef.current.host_cpu_limit ||
+        settings.host_ram_limit !== serverSettingsRef.current.host_ram_limit ||
+        settings.host_disk_limit !== serverSettingsRef.current.host_disk_limit ||
+        settings.docker_janitor_gb !== serverSettingsRef.current.docker_janitor_gb ||
+        settings.global_crash !== serverSettingsRef.current.global_crash;
+
+    const hasDeveloperChanges =
+        settings.developer_mode !== serverSettingsRef.current.developer_mode ||
+        settings.global_logs_refresh !== serverSettingsRef.current.global_logs_refresh ||
+        settings.metrics_retention_hours !== serverSettingsRef.current.metrics_retention_hours ||
+        settings.log_retention_days !== serverSettingsRef.current.log_retention_days;
 
     useEffect(() => {
         if (isOpen) {
             fetchAgents();
             fetchSettings();
         }
-    }, [isOpen]);
+    }, [isOpen, activeNode?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const fetchAgents = async () => {
         try {
             const res = await apiFetch('/agents');
             if (res.ok) {
                 const data: Agent[] = await res.json();
-                const newAgents = { ...agents };
-                data.forEach(a => {
-                    newAgents[a.type] = a;
+                setAgents(prev => {
+                    const next = { ...prev };
+                    data.forEach(a => { next[a.type] = a; });
+                    return next;
                 });
-                setAgents(newAgents);
             }
         } catch (e) {
             console.error('Failed to fetch agents', e);
@@ -88,44 +145,137 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
     };
 
     const fetchSettings = async () => {
+        setIsSettingsLoading(true);
         try {
-            const res = await apiFetch('/settings');
-            if (res.ok) {
-                const data = await res.json();
-                setSettings(prev => ({ ...prev, ...data }));
-            }
+            // Fetch per-node settings from the active node (system limits etc.)
+            const nodeRes = await apiFetch('/settings');
+            // Always fetch developer/UI preferences from local - these control
+            // this Sencho instance's behaviour and must never be proxied to remote
+            const localRes = isRemote ? await apiFetch('/settings', { localOnly: true }) : nodeRes;
+
+            const nodeData: Record<string, string> = nodeRes.ok ? await nodeRes.json() : {};
+            const localData: Record<string, string> = (isRemote && localRes.ok)
+                ? await localRes.json()
+                : nodeData;
+
+            const safe: PatchableSettings = {
+                // Per-node: read from active node
+                host_cpu_limit: nodeData.host_cpu_limit ?? DEFAULT_SETTINGS.host_cpu_limit,
+                host_ram_limit: nodeData.host_ram_limit ?? DEFAULT_SETTINGS.host_ram_limit,
+                host_disk_limit: nodeData.host_disk_limit ?? DEFAULT_SETTINGS.host_disk_limit,
+                docker_janitor_gb: nodeData.docker_janitor_gb ?? DEFAULT_SETTINGS.docker_janitor_gb,
+                global_crash: (nodeData.global_crash as '0' | '1') ?? DEFAULT_SETTINGS.global_crash,
+                template_registry_url: nodeData.template_registry_url ?? '',
+                // Local-only: always read from local node
+                global_logs_refresh: (localData.global_logs_refresh as '1' | '3' | '5' | '10') ?? DEFAULT_SETTINGS.global_logs_refresh,
+                developer_mode: (localData.developer_mode as '0' | '1') ?? DEFAULT_SETTINGS.developer_mode,
+                metrics_retention_hours: localData.metrics_retention_hours ?? DEFAULT_SETTINGS.metrics_retention_hours,
+                log_retention_days: localData.log_retention_days ?? DEFAULT_SETTINGS.log_retention_days,
+            };
+            setSettings(safe);
+            serverSettingsRef.current = { ...safe };
         } catch (e) {
             console.error('Failed to fetch settings', e);
+        } finally {
+            setIsSettingsLoading(false);
         }
     };
 
-    const handleAgentChange = (type: string, field: keyof Agent, value: any) => {
+    const handleSettingChange = <K extends keyof PatchableSettings>(key: K, value: PatchableSettings[K]) => {
+        setSettings(prev => ({ ...prev, [key]: value }));
+    };
+
+    const patchSettings = async (payload: PatchableSettings, setLoading: (v: boolean) => void, localOnly = false): Promise<boolean> => {
+        setLoading(true);
+        try {
+            const res = await apiFetch('/settings', {
+                method: 'PATCH',
+                body: JSON.stringify(payload),
+                localOnly,
+            });
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({}));
+                toast.error(err?.error || err?.message || 'Failed to save settings.');
+                return false;
+            }
+            serverSettingsRef.current = { ...serverSettingsRef.current, ...payload };
+            return true;
+        } catch (e: unknown) {
+            toast.error((e as Error)?.message || 'Something went wrong.');
+            return false;
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const saveSystemSettings = async () => {
+        const ok = await patchSettings({
+            host_cpu_limit: settings.host_cpu_limit,
+            host_ram_limit: settings.host_ram_limit,
+            host_disk_limit: settings.host_disk_limit,
+            docker_janitor_gb: settings.docker_janitor_gb,
+            global_crash: settings.global_crash,
+        }, setIsSavingSystem);
+        if (ok) toast.success('System limits saved.');
+    };
+
+    const saveDeveloperSettings = async () => {
+        // Developer/UI preferences are local-only - never proxy to remote node
+        const ok = await patchSettings({
+            developer_mode: settings.developer_mode,
+            global_logs_refresh: settings.global_logs_refresh,
+            metrics_retention_hours: settings.metrics_retention_hours,
+            log_retention_days: settings.log_retention_days,
+        }, setIsSavingDeveloper, true);
+        if (ok) toast.success('Developer settings saved.');
+    };
+
+    const saveRegistrySettings = async () => {
+        setIsSavingRegistry(true);
+        try {
+            const res = await apiFetch('/settings', {
+                method: 'PATCH',
+                body: JSON.stringify({ template_registry_url: settings.template_registry_url ?? '' }),
+            });
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({}));
+                toast.error(err?.error || err?.message || 'Failed to save registry settings.');
+                return;
+            }
+            serverSettingsRef.current = { ...serverSettingsRef.current, template_registry_url: settings.template_registry_url };
+            await apiFetch('/templates/refresh-cache', { method: 'POST' });
+            toast.success('Registry saved. App Store will reload from the new source.');
+        } catch (e: unknown) {
+            toast.error((e as Error)?.message || 'Failed to save registry settings.');
+        } finally {
+            setIsSavingRegistry(false);
+        }
+    };
+
+    const handleAgentChange = (type: string, field: keyof Agent, value: Agent[keyof Agent]) => {
         setAgents(prev => ({
             ...prev,
             [type]: { ...prev[type], [field]: value }
         }));
     };
 
-    const handleSettingChange = (key: string, value: string) => {
-        setSettings(prev => ({ ...prev, [key]: value }));
-    };
-
     const saveAgent = async (type: string) => {
-        setIsLoading(true);
+        setIsSavingAgent(prev => ({ ...prev, [type]: true }));
         try {
             const res = await apiFetch('/agents', {
                 method: 'POST',
                 body: JSON.stringify(agents[type])
             });
             if (res.ok) {
-                toast.success(`${type.charAt(0).toUpperCase() + type.slice(1)} settings saved successfully.`);
+                toast.success(`${type.charAt(0).toUpperCase() + type.slice(1)} settings saved.`);
             } else {
-                toast.error(`Failed to save ${type} settings.`);
+                const err = await res.json().catch(() => ({}));
+                toast.error(err?.error || err?.message || 'Something went wrong.');
             }
-        } catch (e) {
-            toast.error('Network error.');
+        } catch (e: unknown) {
+            toast.error((e as Error)?.message || 'Network error.');
         } finally {
-            setIsLoading(false);
+            setIsSavingAgent(prev => ({ ...prev, [type]: false }));
         }
     };
 
@@ -134,7 +284,7 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
             toast.error('Please enter a webhook URL first.');
             return;
         }
-        setIsLoading(true);
+        setIsTestingAgent(prev => ({ ...prev, [type]: true }));
         try {
             const res = await apiFetch('/notifications/test', {
                 method: 'POST',
@@ -143,64 +293,46 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
             if (res.ok) {
                 toast.success('Test notification sent!');
             } else {
-                const err = await res.json();
-                toast.error(err.details || 'Test failed.');
+                const err = await res.json().catch(() => ({}));
+                toast.error(err?.details || err?.error || 'Test failed.');
             }
-        } catch (e) {
-            toast.error('Network error.');
+        } catch (e: unknown) {
+            toast.error((e as Error)?.message || 'Network error.');
         } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const saveSettings = async () => {
-        setIsLoading(true);
-        try {
-            for (const [key, value] of Object.entries(settings)) {
-                await apiFetch('/settings', {
-                    method: 'POST',
-                    body: JSON.stringify({ key, value })
-                });
-            }
-            toast.success('System limits & watchdog settings saved.');
-        } catch (e) {
-            toast.error('Failed to save settings.');
-        } finally {
-            setIsLoading(false);
+            setIsTestingAgent(prev => ({ ...prev, [type]: false }));
         }
     };
 
     const handlePasswordChange = async () => {
         if (!authData.oldPassword || !authData.newPassword || !authData.confirmPassword) {
-            toast.error("All fields are required");
+            toast.error('All fields are required');
             return;
         }
         if (authData.newPassword !== authData.confirmPassword) {
-            toast.error("New passwords do not match");
+            toast.error('New passwords do not match');
             return;
         }
-
-        setIsLoading(true);
+        if (authData.newPassword.length < 6) {
+            toast.error('New password must be at least 6 characters');
+            return;
+        }
+        setIsSavingPassword(true);
         try {
             const res = await apiFetch('/auth/password', {
                 method: 'PUT',
-                body: JSON.stringify({
-                    oldPassword: authData.oldPassword,
-                    newPassword: authData.newPassword
-                })
+                body: JSON.stringify({ oldPassword: authData.oldPassword, newPassword: authData.newPassword })
             });
-
             if (res.ok) {
                 toast.success('Password updated successfully');
                 setAuthData({ oldPassword: '', newPassword: '', confirmPassword: '' });
             } else {
-                const data = await res.json();
-                toast.error(data.error || 'Failed to update password');
+                const data = await res.json().catch(() => ({}));
+                toast.error(data?.error || 'Failed to update password');
             }
-        } catch (e) {
-            toast.error('Network error during password change');
+        } catch (e: unknown) {
+            toast.error((e as Error)?.message || 'Network error during password change');
         } finally {
-            setIsLoading(false);
+            setIsSavingPassword(false);
         }
     };
 
@@ -224,84 +356,87 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
                 />
             </div>
             <div className="flex space-x-2 justify-end pt-4">
-                <Button variant="outline" onClick={() => testAgent(type)} disabled={isLoading}>Test</Button>
-                <Button onClick={() => saveAgent(type)} disabled={isLoading}>Save</Button>
+                <Button variant="outline" onClick={() => testAgent(type)} disabled={isTestingAgent[type]}>
+                    {isTestingAgent[type] ? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Testing...</> : 'Test'}
+                </Button>
+                <Button onClick={() => saveAgent(type)} disabled={isSavingAgent[type]}>
+                    {isSavingAgent[type] ? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Saving...</> : 'Save'}
+                </Button>
             </div>
         </div>
     );
 
+    const SettingsSkeleton = () => (
+        <div className="space-y-6">
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-4 w-64" />
+            <div className="space-y-4 bg-muted/10 p-4 border border-border rounded-xl">
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+            </div>
+        </div>
+    );
+
+    const NavButton = ({ section, icon, label, showDot }: { section: SectionId; icon: React.ReactNode; label: string; showDot?: boolean }) => (
+        <Button
+            variant={activeSection === section ? 'secondary' : 'ghost'}
+            className="w-full justify-start font-medium relative"
+            onClick={() => setActiveSection(section)}
+        >
+            {icon}
+            {label}
+            {showDot && (
+                <span className="absolute right-2 top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-amber-400" />
+            )}
+        </Button>
+    );
+
     return (
         <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
             <DialogContent className="sm:max-w-[900px] h-[650px] flex p-0 font-sans shadow-lg bg-background border-border overflow-hidden gap-0">
+                <VisuallyHidden><DialogTitle>Settings Hub</DialogTitle></VisuallyHidden>
+                <VisuallyHidden><DialogDescription>Configure Sencho settings</DialogDescription></VisuallyHidden>
                 {/* Sidebar */}
                 <div className="w-[200px] bg-muted/20 border-r border-border flex flex-col p-4 shrink-0">
                     <div className="font-semibold text-lg mb-1 text-foreground tracking-tight">Settings Hub</div>
-                    {isRemote && (
+                    {isRemote ? (
                         <div className="text-xs text-muted-foreground mb-5 truncate">{activeNode!.name}</div>
+                    ) : (
+                        <div className="mb-5" />
                     )}
-                    {!isRemote && <div className="mb-5" />}
                     <nav className="space-y-1.5 flex flex-col">
                         {!isRemote && (
-                            <Button
-                                variant={activeSection === 'account' ? 'secondary' : 'ghost'}
-                                className="w-full justify-start font-medium"
-                                onClick={() => setActiveSection('account')}
-                            >
-                                <Shield className="w-4 h-4 mr-2" />
-                                Account
-                            </Button>
+                            <NavButton section="account" icon={<Shield className="w-4 h-4 mr-2" />} label="Account" />
                         )}
-                        <Button
-                            variant={activeSection === 'system' ? 'secondary' : 'ghost'}
-                            className="w-full justify-start font-medium"
-                            onClick={() => setActiveSection('system')}
-                        >
-                            <Activity className="w-4 h-4 mr-2" />
-                            System Limits
-                        </Button>
+                        <NavButton
+                            section="system"
+                            icon={<Activity className="w-4 h-4 mr-2" />}
+                            label="System Limits"
+                            showDot={hasSystemChanges}
+                        />
+                        <NavButton section="notifications" icon={<Bell className="w-4 h-4 mr-2" />} label="Notifications" />
                         {!isRemote && (
-                            <Button
-                                variant={activeSection === 'notifications' ? 'secondary' : 'ghost'}
-                                className="w-full justify-start font-medium"
-                                onClick={() => setActiveSection('notifications')}
-                            >
-                                <Bell className="w-4 h-4 mr-2" />
-                                Notifications
-                            </Button>
+                            <NavButton section="appearance" icon={<Palette className="w-4 h-4 mr-2" />} label="Appearance" />
+                        )}
+                        <NavButton
+                            section="developer"
+                            icon={<Code className="w-4 h-4 mr-2" />}
+                            label="Developer"
+                            showDot={hasDeveloperChanges}
+                        />
+                        {!isRemote && (
+                            <NavButton section="nodes" icon={<Server className="w-4 h-4 mr-2" />} label="Nodes" />
                         )}
                         {!isRemote && (
-                            <Button
-                                variant={activeSection === 'appearance' ? 'secondary' : 'ghost'}
-                                className="w-full justify-start font-medium"
-                                onClick={() => setActiveSection('appearance')}
-                            >
-                                <Palette className="w-4 h-4 mr-2" />
-                                Appearance
-                            </Button>
-                        )}
-                        <Button
-                            variant={activeSection === 'developer' ? 'secondary' : 'ghost'}
-                            className="w-full justify-start font-medium"
-                            onClick={() => setActiveSection('developer')}
-                        >
-                            <Code className="w-4 h-4 mr-2" />
-                            Developer
-                        </Button>
-                        {!isRemote && (
-                            <Button
-                                variant={activeSection === 'nodes' ? 'secondary' : 'ghost'}
-                                className="w-full justify-start font-medium"
-                                onClick={() => setActiveSection('nodes')}
-                            >
-                                <Server className="w-4 h-4 mr-2" />
-                                Nodes
-                            </Button>
+                            <NavButton section="appstore" icon={<Package className="w-4 h-4 mr-2" />} label="App Store" />
                         )}
                     </nav>
                 </div>
 
                 {/* Main Content Area */}
                 <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-6">
+
                     {activeSection === 'account' && (
                         <div className="space-y-6">
                             <div>
@@ -333,8 +468,11 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
                                         onChange={(e) => setAuthData(prev => ({ ...prev, confirmPassword: e.target.value }))}
                                     />
                                 </div>
-                                <Button onClick={handlePasswordChange} disabled={isLoading} className="w-full">
-                                    Update Password
+                                <Button onClick={handlePasswordChange} disabled={isSavingPassword} className="w-full">
+                                    {isSavingPassword
+                                        ? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Updating...</>
+                                        : 'Update Password'
+                                    }
                                 </Button>
                             </div>
                         </div>
@@ -342,88 +480,148 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
 
                     {activeSection === 'system' && (
                         <div className="space-y-6">
-                            <div>
-                                <h3 className="text-lg font-semibold tracking-tight">System Limits & Watchdog</h3>
-                                <p className="text-sm text-muted-foreground">Configure auto-recovery thresholds and server constraints.</p>
+                            <div className="flex items-start justify-between pr-8">
+                                <div>
+                                    <h3 className="text-lg font-semibold tracking-tight">System Limits & Watchdog</h3>
+                                    <p className="text-sm text-muted-foreground">Configure alert thresholds and crash detection.</p>
+                                </div>
+                                {isRemote && (
+                                    <Badge variant="outline" className="text-xs shrink-0 ml-2 mt-0.5">
+                                        <Info className="w-3 h-3 mr-1" />
+                                        Configuring: {activeNode!.name}
+                                    </Badge>
+                                )}
                             </div>
 
-                            <div className="space-y-6 bg-muted/10 p-4 border border-border rounded-xl">
-                                <div className="space-y-4">
-                                    <div className="flex justify-between items-center">
-                                        <Label className="text-base">Host CPU Limit</Label>
-                                        <span className="text-sm font-medium">{settings.host_cpu_limit}%</span>
+                            {isSettingsLoading ? <SettingsSkeleton /> : (
+                                <>
+                                    <div className="space-y-6 bg-muted/10 p-4 border border-border rounded-xl">
+                                        <div className="space-y-4">
+                                            <div className="flex justify-between items-center">
+                                                <Label className="text-base">Host CPU Alert Threshold</Label>
+                                                <span className="text-sm font-medium">{settings.host_cpu_limit}%</span>
+                                            </div>
+                                            <Slider
+                                                min={1} max={100} step={1}
+                                                value={[parseInt(settings.host_cpu_limit || '90')]}
+                                                onValueChange={(v) => handleSettingChange('host_cpu_limit', v[0].toString())}
+                                            />
+                                        </div>
+
+                                        <div className="space-y-4 pt-2 border-t border-border">
+                                            <div className="flex justify-between items-center">
+                                                <Label className="text-base">Host RAM Alert Threshold</Label>
+                                                <span className="text-sm font-medium">{settings.host_ram_limit}%</span>
+                                            </div>
+                                            <Slider
+                                                min={1} max={100} step={1}
+                                                value={[parseInt(settings.host_ram_limit || '90')]}
+                                                onValueChange={(v) => handleSettingChange('host_ram_limit', v[0].toString())}
+                                            />
+                                        </div>
+
+                                        <div className="space-y-4 pt-2 border-t border-border">
+                                            <div className="flex justify-between items-center">
+                                                <Label className="text-base">Host Disk Alert Threshold</Label>
+                                                <span className="text-sm font-medium">{settings.host_disk_limit}%</span>
+                                            </div>
+                                            <Slider
+                                                min={1} max={100} step={1}
+                                                value={[parseInt(settings.host_disk_limit || '90')]}
+                                                onValueChange={(v) => handleSettingChange('host_disk_limit', v[0].toString())}
+                                            />
+                                        </div>
+
+                                        <div className="space-y-2 pt-2 border-t border-border">
+                                            <Label className="text-base">Docker Janitor Storage Threshold</Label>
+                                            <div className="flex items-center gap-2">
+                                                <Input
+                                                    type="number"
+                                                    min={0}
+                                                    step={0.5}
+                                                    value={settings.docker_janitor_gb}
+                                                    onChange={(e) => handleSettingChange('docker_janitor_gb', e.target.value)}
+                                                    className="max-w-[150px]"
+                                                />
+                                                <span className="text-sm text-muted-foreground">GB reclaimable</span>
+                                            </div>
+                                            <p className="text-xs text-muted-foreground">Alert when unused Docker data exceeds this size.</p>
+                                        </div>
+
+                                        <div className="flex items-center justify-between pt-4 border-t border-border">
+                                            <div className="space-y-0.5">
+                                                <Label htmlFor="global_crash" className="text-base">Global Crash Detection</Label>
+                                                <p className="text-xs text-muted-foreground">Watch all containers for unexpected exits</p>
+                                            </div>
+                                            <Switch
+                                                id="global_crash"
+                                                checked={settings.global_crash === '1'}
+                                                onCheckedChange={(c) => handleSettingChange('global_crash', c ? '1' : '0')}
+                                            />
+                                        </div>
                                     </div>
-                                    <Slider
-                                        max={100} step={1}
-                                        value={[parseInt(settings.host_cpu_limit || '90')]}
-                                        onValueChange={(v) => handleSettingChange('host_cpu_limit', v[0].toString())}
-                                    />
-                                </div>
 
-                                <div className="space-y-4 pt-2 border-t border-border">
-                                    <div className="flex justify-between items-center">
-                                        <Label className="text-base">Host RAM Limit</Label>
-                                        <span className="text-sm font-medium">{settings.host_ram_limit}%</span>
+                                    <div className="flex justify-end">
+                                        <Button onClick={saveSystemSettings} disabled={isSavingSystem}>
+                                            {isSavingSystem
+                                                ? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Saving...</>
+                                                : 'Save Limits'
+                                            }
+                                        </Button>
                                     </div>
-                                    <Slider
-                                        max={100} step={1}
-                                        value={[parseInt(settings.host_ram_limit || '90')]}
-                                        onValueChange={(v) => handleSettingChange('host_ram_limit', v[0].toString())}
-                                    />
-                                </div>
-
-                                <div className="space-y-4 pt-2 border-t border-border">
-                                    <div className="flex justify-between items-center">
-                                        <Label className="text-base">Host Disk Limit</Label>
-                                        <span className="text-sm font-medium">{settings.host_disk_limit}%</span>
-                                    </div>
-                                    <Slider
-                                        max={100} step={1}
-                                        value={[parseInt(settings.host_disk_limit || '90')]}
-                                        onValueChange={(v) => handleSettingChange('host_disk_limit', v[0].toString())}
-                                    />
-                                </div>
-
-                                <div className="space-y-2 pt-2 border-t border-border">
-                                    <Label className="text-base">Docker Janitor Storage Threshold (GB)</Label>
-                                    <Input
-                                        type="number"
-                                        value={settings.docker_janitor_gb}
-                                        onChange={(e) => handleSettingChange('docker_janitor_gb', e.target.value)}
-                                        className="max-w-[200px]"
-                                    />
-                                </div>
-
-                                <div className="flex items-center justify-between pt-4 border-t border-border">
-                                    <div className="space-y-0.5">
-                                        <Label htmlFor="global_crash" className="text-base">Global Crash Detection</Label>
-                                        <p className="text-xs text-muted-foreground">Watch all containers indefinitely</p>
-                                    </div>
-                                    <Switch
-                                        id="global_crash"
-                                        checked={settings.global_crash === '1'}
-                                        onCheckedChange={(c) => handleSettingChange('global_crash', c ? '1' : '0')}
-                                    />
-                                </div>
-                            </div>
-
-                            <div className="flex justify-end mt-4">
-                                <Button onClick={saveSettings} disabled={isLoading}>Save Limits</Button>
-                            </div>
+                                </>
+                            )}
                         </div>
                     )}
 
                     {activeSection === 'notifications' && (
                         <div className="space-y-6">
-                            <div>
-                                <h3 className="text-lg font-semibold tracking-tight">Notifications & Alerts</h3>
-                                <p className="text-sm text-muted-foreground">Configure external integrations for crash alerts.</p>
+                            <div className="flex items-start justify-between pr-8">
+                                <div>
+                                    <h3 className="text-lg font-semibold tracking-tight">Notifications & Alerts</h3>
+                                    <p className="text-sm text-muted-foreground">
+                                        {isRemote
+                                            ? <>Configuring notification channels on <span className="font-semibold text-foreground">{activeNode!.name}</span>. Alerts from this remote node will dispatch via these channels.</>
+                                            : 'Configure external integrations for crash alerts.'
+                                        }
+                                    </p>
+                                </div>
+                                {isRemote && (
+                                    <TooltipProvider>
+                                        <Tooltip>
+                                            <TooltipTrigger asChild>
+                                                <Badge variant="secondary" className="text-xs shrink-0 ml-2 mt-0.5 cursor-help">
+                                                    <Info className="w-3 h-3 mr-1" />
+                                                    Remote
+                                                </Badge>
+                                            </TooltipTrigger>
+                                            <TooltipContent side="bottom" className="max-w-[240px] text-center">
+                                                These channels are saved on the remote Sencho instance and used when it dispatches alerts.
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    </TooltipProvider>
+                                )}
                             </div>
-                            <Tabs defaultValue="discord" className="w-full">
-                                <TabsList className="grid w-full grid-cols-3 mb-4">
-                                    <TabsTrigger value="discord">Discord</TabsTrigger>
-                                    <TabsTrigger value="slack">Slack</TabsTrigger>
-                                    <TabsTrigger value="webhook">Webhook</TabsTrigger>
+                            <Tabs value={notifTab} onValueChange={(v) => setNotifTab(v as 'discord' | 'slack' | 'webhook')} className="w-full">
+                                <TabsList className="w-full mb-4 grid grid-cols-3">
+                                    <TabsTrigger value="discord" className="relative data-[state=active]:bg-transparent data-[state=active]:shadow-none">
+                                        {notifTab === 'discord' && (
+                                            <motion.div layoutId="notif-tab-indicator" className="absolute inset-0 rounded-md bg-background shadow-sm" transition={{ type: 'spring', stiffness: 350, damping: 30 }} />
+                                        )}
+                                        <span className="relative z-10">Discord</span>
+                                    </TabsTrigger>
+                                    <TabsTrigger value="slack" className="relative data-[state=active]:bg-transparent data-[state=active]:shadow-none">
+                                        {notifTab === 'slack' && (
+                                            <motion.div layoutId="notif-tab-indicator" className="absolute inset-0 rounded-md bg-background shadow-sm" transition={{ type: 'spring', stiffness: 350, damping: 30 }} />
+                                        )}
+                                        <span className="relative z-10">Slack</span>
+                                    </TabsTrigger>
+                                    <TabsTrigger value="webhook" className="relative data-[state=active]:bg-transparent data-[state=active]:shadow-none">
+                                        {notifTab === 'webhook' && (
+                                            <motion.div layoutId="notif-tab-indicator" className="absolute inset-0 rounded-md bg-background shadow-sm" transition={{ type: 'spring', stiffness: 350, damping: 30 }} />
+                                        )}
+                                        <span className="relative z-10">Webhook</span>
+                                    </TabsTrigger>
                                 </TabsList>
                                 <TabsContent value="discord">{renderAgentTab('discord', 'Discord')}</TabsContent>
                                 <TabsContent value="slack">{renderAgentTab('slack', 'Slack')}</TabsContent>
@@ -438,74 +636,154 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
                                 <h3 className="text-lg font-semibold tracking-tight">Appearance</h3>
                                 <p className="text-sm text-muted-foreground">Customize Sencho's visual theme.</p>
                             </div>
-
-                            <div className="flex items-center space-x-4 mt-6">
+                            <div className="flex items-center gap-3 mt-6 flex-wrap">
                                 <Button
-                                    variant={!isDarkMode ? 'default' : 'outline'}
+                                    variant={theme === 'light' ? 'default' : 'outline'}
                                     className="w-32 h-20 flex flex-col gap-2 rounded-xl"
-                                    onClick={() => setIsDarkMode(false)}
+                                    onClick={() => setTheme('light')}
                                 >
                                     <Sun className="w-6 h-6" />
                                     Light
                                 </Button>
                                 <Button
-                                    variant={isDarkMode ? 'default' : 'outline'}
+                                    variant={theme === 'dark' ? 'default' : 'outline'}
                                     className="w-32 h-20 flex flex-col gap-2 rounded-xl"
-                                    onClick={() => setIsDarkMode(true)}
+                                    onClick={() => setTheme('dark')}
                                 >
                                     <Moon className="w-6 h-6" />
                                     Dark
                                 </Button>
+                                <Button
+                                    variant={theme === 'auto' ? 'default' : 'outline'}
+                                    className="w-32 h-20 flex flex-col gap-2 rounded-xl"
+                                    onClick={() => setTheme('auto')}
+                                >
+                                    <Monitor className="w-6 h-6" />
+                                    Auto
+                                </Button>
                             </div>
                         </div>
                     )}
 
                     {activeSection === 'developer' && (
                         <div className="space-y-6">
-                            <div>
-                                <h3 className="text-lg font-semibold tracking-tight">Developer</h3>
-                                <p className="text-sm text-muted-foreground">Power user settings for real-time observability and extended diagnostics.</p>
+                            <div className="flex items-start justify-between pr-8">
+                                <div>
+                                    <h3 className="text-lg font-semibold tracking-tight">Developer</h3>
+                                    <p className="text-sm text-muted-foreground">Power user settings for real-time observability and data retention.</p>
+                                </div>
+                                {isRemote && (
+                                    <TooltipProvider>
+                                        <Tooltip>
+                                            <TooltipTrigger asChild>
+                                                <Badge variant="secondary" className="text-xs shrink-0 ml-2 mt-0.5 cursor-help">
+                                                    <Info className="w-3 h-3 mr-1" />
+                                                    Always Local
+                                                </Badge>
+                                            </TooltipTrigger>
+                                            <TooltipContent side="bottom" className="max-w-[220px] text-center">
+                                                These settings control this Sencho instance's UI behaviour and are never synced to remote nodes.
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    </TooltipProvider>
+                                )}
                             </div>
 
-                            <div className="space-y-6 bg-muted/10 p-4 border border-border rounded-xl">
-                                <div className="flex items-center justify-between">
-                                    <div className="space-y-0.5">
-                                        <Label htmlFor="developer_mode" className="text-base">Developer Mode</Label>
-                                        <p className="text-xs text-muted-foreground">Enable Real-Time Metrics & Extended Logs</p>
+                            {isSettingsLoading ? <SettingsSkeleton /> : (
+                                <>
+                                    <div className="space-y-6 bg-muted/10 p-4 border border-border rounded-xl">
+                                        <div className="flex items-center justify-between">
+                                            <div className="space-y-0.5">
+                                                <Label htmlFor="developer_mode" className="text-base">Developer Mode</Label>
+                                                <p className="text-xs text-muted-foreground">Enable Real-Time Metrics & Extended Logs</p>
+                                            </div>
+                                            <Switch
+                                                id="developer_mode"
+                                                checked={settings.developer_mode === '1'}
+                                                onCheckedChange={(c) => handleSettingChange('developer_mode', c ? '1' : '0')}
+                                            />
+                                        </div>
+
+                                        <div className="space-y-2 pt-4 border-t border-border">
+                                            <Label className={`text-base ${settings.developer_mode === '1' ? 'text-muted-foreground' : ''}`}>
+                                                Standard Log Polling Rate
+                                            </Label>
+                                            <Select
+                                                value={settings.global_logs_refresh}
+                                                onValueChange={(val) => handleSettingChange('global_logs_refresh', val as '1' | '3' | '5' | '10')}
+                                                disabled={settings.developer_mode === '1'}
+                                            >
+                                                <SelectTrigger className="max-w-[200px]">
+                                                    <SelectValue placeholder="Select rate" />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    <SelectItem value="1">1 second</SelectItem>
+                                                    <SelectItem value="3">3 seconds</SelectItem>
+                                                    <SelectItem value="5">5 seconds</SelectItem>
+                                                    <SelectItem value="10">10 seconds</SelectItem>
+                                                </SelectContent>
+                                            </Select>
+                                            {settings.developer_mode === '1' && (
+                                                <p className="text-xs text-amber-500">SSE streaming is active - polling rate is overridden.</p>
+                                            )}
+                                        </div>
                                     </div>
-                                    <Switch
-                                        id="developer_mode"
-                                        checked={settings.developer_mode === '1'}
-                                        onCheckedChange={(c) => handleSettingChange('developer_mode', c ? '1' : '0')}
-                                    />
-                                </div>
 
-                                <div className="space-y-2 pt-4 border-t border-border">
-                                    <Label className={`text-base ${settings.developer_mode === '1' ? 'text-muted-foreground' : ''}`}>Standard Log Polling Rate</Label>
-                                    <Select
-                                        value={settings.global_logs_refresh}
-                                        onValueChange={(val) => handleSettingChange('global_logs_refresh', val)}
-                                        disabled={settings.developer_mode === '1'}
-                                    >
-                                        <SelectTrigger className="max-w-[200px]">
-                                            <SelectValue placeholder="Select rate" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem value="1">1 second</SelectItem>
-                                            <SelectItem value="3">3 seconds</SelectItem>
-                                            <SelectItem value="5">5 seconds</SelectItem>
-                                            <SelectItem value="10">10 seconds</SelectItem>
-                                        </SelectContent>
-                                    </Select>
-                                    {settings.developer_mode === '1' && (
-                                        <p className="text-xs text-amber-500">SSE streaming is active - polling rate is overridden by real-time streaming.</p>
-                                    )}
-                                </div>
-                            </div>
+                                    {/* Data Retention (Observability) */}
+                                    <div className="space-y-3">
+                                        <div className="flex items-center gap-2">
+                                            <Database className="w-4 h-4 text-muted-foreground" />
+                                            <span className="text-sm font-medium text-foreground">Data Retention</span>
+                                        </div>
+                                        <div className="space-y-4 bg-muted/10 p-4 border border-border rounded-xl">
+                                            <div className="flex items-center justify-between gap-4">
+                                                <div className="space-y-0.5">
+                                                    <Label className="text-base">Container Metrics Retention</Label>
+                                                    <p className="text-xs text-muted-foreground">How long to keep per-container CPU/RAM/network history.</p>
+                                                </div>
+                                                <div className="flex items-center gap-2 shrink-0">
+                                                    <Input
+                                                        type="number"
+                                                        min={1}
+                                                        max={8760}
+                                                        value={settings.metrics_retention_hours}
+                                                        onChange={(e) => handleSettingChange('metrics_retention_hours', e.target.value)}
+                                                        className="w-20"
+                                                    />
+                                                    <span className="text-sm text-muted-foreground w-8">hrs</span>
+                                                </div>
+                                            </div>
 
-                            <div className="flex justify-end mt-4">
-                                <Button onClick={saveSettings} disabled={isLoading}>Save Developer Settings</Button>
-                            </div>
+                                            <div className="flex items-center justify-between gap-4 pt-4 border-t border-border">
+                                                <div className="space-y-0.5">
+                                                    <Label className="text-base">Notification Log Retention</Label>
+                                                    <p className="text-xs text-muted-foreground">How long to keep alert and notification history.</p>
+                                                </div>
+                                                <div className="flex items-center gap-2 shrink-0">
+                                                    <Input
+                                                        type="number"
+                                                        min={1}
+                                                        max={365}
+                                                        value={settings.log_retention_days}
+                                                        onChange={(e) => handleSettingChange('log_retention_days', e.target.value)}
+                                                        className="w-20"
+                                                    />
+                                                    <span className="text-sm text-muted-foreground w-8">days</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className="flex justify-end">
+                                        <Button onClick={saveDeveloperSettings} disabled={isSavingDeveloper}>
+                                            {isSavingDeveloper
+                                                ? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Saving...</>
+                                                : 'Save Developer Settings'
+                                            }
+                                        </Button>
+                                    </div>
+                                </>
+                            )}
                         </div>
                     )}
 
@@ -513,6 +791,61 @@ export function SettingsModal({ isOpen, onClose, isDarkMode, setIsDarkMode }: Se
                         <NodeManager />
                     )}
 
+                    {activeSection === 'appstore' && (
+                        <div className="space-y-6">
+                            <div>
+                                <h3 className="text-lg font-semibold tracking-tight">App Store Registry</h3>
+                                <p className="text-sm text-muted-foreground">Configure the template source used by the App Store.</p>
+                            </div>
+
+                            {isSettingsLoading ? <SettingsSkeleton /> : (
+                                <>
+                                    <div className="space-y-6 bg-muted/10 p-4 border border-border rounded-xl">
+                                        <div className="space-y-1">
+                                            <Label className="text-base">Default Registry</Label>
+                                            <p className="text-xs text-muted-foreground">
+                                                LinuxServer.io - <span className="font-mono">https://api.linuxserver.io/api/v1/images</span>
+                                            </p>
+                                            <p className="text-xs text-muted-foreground">Used when no custom registry is set.</p>
+                                        </div>
+
+                                        <div className="space-y-3 pt-4 border-t border-border">
+                                            <div className="space-y-1">
+                                                <Label className="text-base">Custom Registry URL</Label>
+                                                <p className="text-xs text-muted-foreground">
+                                                    Provide a URL pointing to a <span className="font-medium">Portainer v2</span> compatible template JSON file. Overrides the default registry.
+                                                </p>
+                                            </div>
+                                            <Input
+                                                placeholder="https://example.com/templates.json"
+                                                value={settings.template_registry_url ?? ''}
+                                                onChange={(e) => handleSettingChange('template_registry_url', e.target.value)}
+                                            />
+                                            <p className="text-xs text-muted-foreground">Leave empty to use the default LinuxServer.io registry.</p>
+                                        </div>
+                                    </div>
+
+                                    <div className="flex items-center justify-between">
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => handleSettingChange('template_registry_url', '')}
+                                            disabled={isSavingRegistry || !settings.template_registry_url}
+                                        >
+                                            Reset to Default
+                                        </Button>
+                                        <Button onClick={saveRegistrySettings} disabled={isSavingRegistry}>
+                                            {isSavingRegistry
+                                                ? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Saving...</>
+                                                : 'Save & Refresh'
+                                            }
+                                        </Button>
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    )}
+
                 </div>
             </DialogContent>
         </Dialog>
diff --git a/frontend/src/components/StackAlertSheet.tsx b/frontend/src/components/StackAlertSheet.tsx
index 7db64ae9..0c1cb629 100644
--- a/frontend/src/components/StackAlertSheet.tsx
+++ b/frontend/src/components/StackAlertSheet.tsx
@@ -11,9 +11,10 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { Trash2, HelpCircle } from 'lucide-react';
+import { Trash2, HelpCircle, AlertTriangle, Info, CheckCircle2, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { apiFetch } from '@/lib/api';
+import { useNodes } from '@/context/NodeContext';
 
 interface StackAlert {
     id?: number;
@@ -31,9 +32,23 @@ interface StackAlertSheetProps {
     stackName: string;
 }
 
+interface AgentStatus {
+    loading: boolean;
+    hasEnabled: boolean;
+    enabledTypes: string[];
+}
+
 export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetProps) {
+    const { activeNode } = useNodes();
+    const isRemote = activeNode?.type === 'remote';
+
     const [alerts, setAlerts] = useState<StackAlert[]>([]);
     const [isLoading, setIsLoading] = useState(false);
+    const [agentStatus, setAgentStatus] = useState<AgentStatus>({
+        loading: false,
+        hasEnabled: false,
+        enabledTypes: [],
+    });
 
     // New Alert Form State
     const [metric, setMetric] = useState('cpu_percent');
@@ -45,18 +60,41 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
     useEffect(() => {
         if (isOpen && stackName) {
             fetchAlerts();
+            fetchAgentStatus();
         }
-    }, [isOpen, stackName]);
+    }, [isOpen, stackName]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const fetchAlerts = async () => {
         try {
-            const res = await apiFetch(`/alerts?stackName=${stackName}`);
+            const res = await apiFetch(`/alerts?stackName=${encodeURIComponent(stackName)}`);
             if (res.ok) {
                 const data = await res.json();
                 setAlerts(data);
             }
         } catch (e) {
-            console.error('Failed to fetch alerts', e);
+            console.error('[StackAlertSheet] Failed to fetch alerts', e);
+        }
+    };
+
+    const fetchAgentStatus = async () => {
+        setAgentStatus(prev => ({ ...prev, loading: true }));
+        try {
+            // Always fetch agents from the active node (proxied via x-node-id for remote)
+            const res = await apiFetch('/agents');
+            if (res.ok) {
+                const agents: Array<{ type: string; enabled: boolean }> = await res.json();
+                const enabled = agents.filter(a => a.enabled);
+                setAgentStatus({
+                    loading: false,
+                    hasEnabled: enabled.length > 0,
+                    enabledTypes: enabled.map(a => a.type),
+                });
+            } else {
+                setAgentStatus({ loading: false, hasEnabled: false, enabledTypes: [] });
+            }
+        } catch (e) {
+            console.error('[StackAlertSheet] Failed to fetch agent status', e);
+            setAgentStatus({ loading: false, hasEnabled: false, enabledTypes: [] });
         }
     };
 
@@ -73,23 +111,26 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
             operator,
             threshold: parseFloat(threshold),
             duration_mins: parseInt(duration, 10),
-            cooldown_mins: parseInt(cooldown, 10)
+            cooldown_mins: parseInt(cooldown, 10),
         };
 
         try {
             const res = await apiFetch('/alerts', {
                 method: 'POST',
-                body: JSON.stringify(newAlert)
+                body: JSON.stringify(newAlert),
             });
             if (res.ok) {
                 toast.success('Alert rule added.');
                 setThreshold('');
                 fetchAlerts();
             } else {
-                toast.error('Failed to add alert rule.');
+                const err = await res.json().catch(() => ({}));
+                toast.error(err?.error || err?.message || 'Failed to add alert rule.');
+                console.error('[StackAlertSheet] addAlert failed:', err);
             }
         } catch (e) {
-            toast.error('Network error.');
+            console.error('[StackAlertSheet] addAlert threw:', e);
+            toast.error('Network error. Could not reach the node.');
         } finally {
             setIsLoading(false);
         }
@@ -103,10 +144,11 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
                 toast.success('Alert rule deleted.');
                 fetchAlerts();
             } else {
-                toast.error('Failed to delete alert rule.');
+                const err = await res.json().catch(() => ({}));
+                toast.error(err?.error || 'Failed to delete alert rule.');
             }
-        } catch (e) {
-            toast.error('Network error.');
+        } catch {
+            toast.error('Network error. Could not reach the node.');
         } finally {
             setIsLoading(false);
         }
@@ -118,12 +160,81 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
         memory_mb: 'Memory Usage (MB)',
         net_rx: 'Network In (MB)',
         net_tx: 'Network Out (MB)',
-        restart_count: 'Restart Count'
+        restart_count: 'Restart Count',
+    };
+
+    const agentTypeLabels: Record<string, string> = {
+        discord: 'Discord',
+        slack: 'Slack',
+        webhook: 'Webhook',
+    };
+
+    const renderAgentStatusBanner = () => {
+        if (agentStatus.loading) {
+            return (
+                <div className="flex items-center gap-2 p-3 rounded-lg bg-muted/50 border text-sm text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin shrink-0" />
+                    <span>Checking notification channels…</span>
+                </div>
+            );
+        }
+
+        if (isRemote) {
+            return (
+                <div className="flex items-start gap-2 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20 text-sm">
+                    <Info className="h-4 w-4 text-blue-500 shrink-0 mt-0.5" />
+                    <div className="space-y-0.5">
+                        <p className="font-medium text-blue-700 dark:text-blue-400">
+                            Remote node: <span className="font-semibold">{activeNode?.name}</span>
+                        </p>
+                        <p className="text-muted-foreground">
+                            Alert rules are stored and evaluated on this remote instance. Notifications are dispatched using that node's configured channels.
+                        </p>
+                        {!agentStatus.hasEnabled && (
+                            <p className="text-amber-600 dark:text-amber-400 font-medium mt-1">
+                                No notification channels are configured on this remote node. Open Settings → Notifications to configure them.
+                            </p>
+                        )}
+                        {agentStatus.hasEnabled && (
+                            <p className="text-green-600 dark:text-green-400 font-medium mt-1">
+                                Active channels: {agentStatus.enabledTypes.map(t => agentTypeLabels[t] ?? t).join(', ')}
+                            </p>
+                        )}
+                    </div>
+                </div>
+            );
+        }
+
+        if (!agentStatus.hasEnabled) {
+            return (
+                <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20 text-sm">
+                    <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0 mt-0.5" />
+                    <div>
+                        <p className="font-medium text-amber-700 dark:text-amber-400">No notification channels configured</p>
+                        <p className="text-muted-foreground mt-0.5">
+                            Alert rules will be saved and evaluated, but no notifications will be dispatched. Configure Discord, Slack, or a webhook in{' '}
+                            <span className="font-medium">Settings → Notifications</span>.
+                        </p>
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div className="flex items-center gap-2 p-3 rounded-lg bg-green-500/10 border border-green-500/20 text-sm">
+                <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+                <div>
+                    <p className="font-medium text-green-700 dark:text-green-400">
+                        Notifications active via {agentStatus.enabledTypes.map(t => agentTypeLabels[t] ?? t).join(', ')}
+                    </p>
+                </div>
+            </div>
+        );
     };
 
     return (
         <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
-            <SheetContent className="overflow-y-auto sm:max-w-[400px]">
+            <SheetContent className="overflow-y-auto sm:max-w-[420px]">
                 <SheetHeader>
                     <SheetTitle>Stack Alerts: {stackName}</SheetTitle>
                     <SheetDescription>
@@ -132,7 +243,10 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
                 </SheetHeader>
 
                 <TooltipProvider>
-                    <div className="mt-6 space-y-6">
+                    <div className="mt-4 space-y-5">
+                        {/* Notification agent status banner */}
+                        {renderAgentStatusBanner()}
+
                         {/* List Existing Alerts */}
                         <div className="space-y-3">
                             <h4 className="text-sm font-semibold">Existing Rules</h4>
@@ -299,7 +413,11 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
                             </div>
 
                             <Button className="w-full mt-2" onClick={addAlert} disabled={isLoading}>
-                                Add Rule
+                                {isLoading ? (
+                                    <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Saving…</>
+                                ) : (
+                                    'Add Rule'
+                                )}
                             </Button>
                         </div>
                     </div>
diff --git a/frontend/src/components/animate-ui/primitives/animate/slot.tsx b/frontend/src/components/animate-ui/primitives/animate/slot.tsx
new file mode 100644
index 00000000..35b9e0c9
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/animate/slot.tsx
@@ -0,0 +1,97 @@
+/* eslint-disable */
+'use client';
+
+import * as React from 'react';
+import { motion, isMotionComponent, type HTMLMotionProps } from 'motion/react';
+import { cn } from '@/lib/utils';
+
+type AnyProps = Record<string, unknown>;
+
+type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<
+  HTMLMotionProps<keyof HTMLElementTagNameMap>,
+  'ref'
+> & { ref?: React.Ref<T> };
+
+type WithAsChild<Base extends object> =
+  | (Base & { asChild: true; children: React.ReactElement })
+  | (Base & { asChild?: false | undefined });
+
+type SlotProps<T extends HTMLElement = HTMLElement> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children?: any;
+} & DOMMotionProps<T>;
+
+function mergeRefs<T>(
+  ...refs: (React.Ref<T> | undefined)[]
+): React.RefCallback<T> {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        (ref as React.RefObject<T | null>).current = node;
+      }
+    });
+  };
+}
+
+function mergeProps<T extends HTMLElement>(
+  childProps: AnyProps,
+  slotProps: DOMMotionProps<T>,
+): AnyProps {
+  const merged: AnyProps = { ...childProps, ...slotProps };
+
+  if (childProps.className || slotProps.className) {
+    merged.className = cn(
+      childProps.className as string,
+      slotProps.className as string,
+    );
+  }
+
+  if (childProps.style || slotProps.style) {
+    merged.style = {
+      ...(childProps.style as React.CSSProperties),
+      ...(slotProps.style as React.CSSProperties),
+    };
+  }
+
+  return merged;
+}
+
+function Slot<T extends HTMLElement = HTMLElement>({
+  children,
+  ref,
+  ...props
+}: SlotProps<T>) {
+  const isAlreadyMotion =
+    typeof children.type === 'object' &&
+    children.type !== null &&
+    isMotionComponent(children.type);
+
+  const Base = React.useMemo(
+    () =>
+      isAlreadyMotion
+        ? (children.type as React.ElementType)
+        : motion.create(children.type as React.ElementType),
+    [isAlreadyMotion, children.type],
+  );
+
+  if (!React.isValidElement(children)) return null;
+
+  const { ref: childRef, ...childProps } = children.props as AnyProps;
+
+  const mergedProps = mergeProps(childProps, props);
+
+  return (
+    <Base {...mergedProps} ref={mergeRefs(childRef as React.Ref<T>, ref)} />
+  );
+}
+
+export {
+  Slot,
+  type SlotProps,
+  type WithAsChild,
+  type DOMMotionProps,
+  type AnyProps,
+};
diff --git a/frontend/src/components/animate-ui/primitives/effects/auto-height.tsx b/frontend/src/components/animate-ui/primitives/effects/auto-height.tsx
new file mode 100644
index 00000000..c38add4b
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/effects/auto-height.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import {
+  motion,
+  type HTMLMotionProps,
+  type LegacyAnimationControls,
+  type TargetAndTransition,
+  type Transition,
+} from 'motion/react';
+
+import { useAutoHeight } from '@/hooks/use-auto-height';
+import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';
+
+type AutoHeightProps = WithAsChild<
+  {
+    children: React.ReactNode;
+    deps?: React.DependencyList;
+    animate?: TargetAndTransition | LegacyAnimationControls;
+    transition?: Transition;
+  } & Omit<HTMLMotionProps<'div'>, 'animate'>
+>;
+
+function AutoHeight({
+  children,
+  deps = [],
+  transition = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+    bounce: 0,
+    restDelta: 0.01,
+  },
+  style,
+  animate,
+  asChild = false,
+  ...props
+}: AutoHeightProps) {
+  const { ref, height } = useAutoHeight<HTMLDivElement>(deps);
+
+  const Comp = asChild ? Slot : motion.div;
+
+  return (
+    <Comp
+      style={{ overflow: 'hidden', ...style }}
+      animate={{ height, ...animate }}
+      transition={transition}
+      {...props}
+    >
+      <div ref={ref}>{children}</div>
+    </Comp>
+  );
+}
+
+export { AutoHeight, type AutoHeightProps };
diff --git a/frontend/src/components/animate-ui/primitives/effects/fade.tsx b/frontend/src/components/animate-ui/primitives/effects/fade.tsx
new file mode 100644
index 00000000..8675995c
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/effects/fade.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type HTMLMotionProps } from 'motion/react';
+
+import {
+  useIsInView,
+  type UseIsInViewOptions,
+} from '@/hooks/use-is-in-view';
+import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';
+
+type FadeProps = WithAsChild<
+  {
+    children?: React.ReactNode;
+    delay?: number;
+    initialOpacity?: number;
+    opacity?: number;
+    ref?: React.Ref<HTMLElement>;
+  } & UseIsInViewOptions &
+    HTMLMotionProps<'div'>
+>;
+
+function Fade({
+  ref,
+  transition = { type: 'spring', stiffness: 200, damping: 20 },
+  delay = 0,
+  inView = false,
+  inViewMargin = '0px',
+  inViewOnce = true,
+  initialOpacity = 0,
+  opacity = 1,
+  asChild = false,
+  ...props
+}: FadeProps) {
+  const { ref: localRef, isInView } = useIsInView(
+    ref as React.Ref<HTMLElement>,
+    {
+      inView,
+      inViewOnce,
+      inViewMargin,
+    },
+  );
+
+  const Component = asChild ? Slot : motion.div;
+
+  return (
+    <Component
+      ref={localRef as React.Ref<HTMLDivElement>}
+      initial="hidden"
+      animate={isInView ? 'visible' : 'hidden'}
+      exit="hidden"
+      variants={{
+        hidden: { opacity: initialOpacity },
+        visible: { opacity },
+      }}
+      transition={{
+        ...transition,
+        delay: (transition?.delay ?? 0) + delay / 1000,
+      }}
+      {...props}
+    />
+  );
+}
+
+type FadeListProps = Omit<FadeProps, 'children'> & {
+  children: React.ReactElement | React.ReactElement[];
+  holdDelay?: number;
+};
+
+function Fades({
+  children,
+  delay = 0,
+  holdDelay = 0,
+  ...props
+}: FadeListProps) {
+  const array = React.Children.toArray(children) as React.ReactElement[];
+
+  return (
+    <>
+      {array.map((child, index) => (
+        <Fade
+          key={child.key ?? index}
+          delay={delay + index * holdDelay}
+          {...props}
+        >
+          {child}
+        </Fade>
+      ))}
+    </>
+  );
+}
+
+export { Fade, Fades, type FadeProps, type FadeListProps };
diff --git a/frontend/src/components/animate-ui/primitives/effects/highlight.tsx b/frontend/src/components/animate-ui/primitives/effects/highlight.tsx
new file mode 100644
index 00000000..f7e7058d
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/effects/highlight.tsx
@@ -0,0 +1,641 @@
+/* eslint-disable */
+'use client';
+
+import * as React from 'react';
+import { AnimatePresence, motion, type Transition } from 'motion/react';
+
+import { cn } from '@/lib/utils';
+
+type HighlightMode = 'children' | 'parent';
+
+type Bounds = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+const DEFAULT_BOUNDS_OFFSET: Bounds = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+};
+
+type HighlightContextType<T extends string> = {
+  as?: keyof HTMLElementTagNameMap;
+  mode: HighlightMode;
+  activeValue: T | null;
+  setActiveValue: (value: T | null) => void;
+  setBounds: (bounds: DOMRect) => void;
+  clearBounds: () => void;
+  id: string;
+  hover: boolean;
+  click: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  activeClassName?: string;
+  setActiveClassName: (className: string) => void;
+  transition?: Transition;
+  disabled?: boolean;
+  enabled?: boolean;
+  exitDelay?: number;
+  forceUpdateBounds?: boolean;
+};
+
+const HighlightContext = React.createContext<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  HighlightContextType<any> | undefined
+>(undefined);
+
+function useHighlight<T extends string>(): HighlightContextType<T> {
+  const context = React.useContext(HighlightContext);
+  if (!context) {
+    throw new Error('useHighlight must be used within a HighlightProvider');
+  }
+  return context as unknown as HighlightContextType<T>;
+}
+
+type BaseHighlightProps<T extends React.ElementType = 'div'> = {
+  as?: T;
+  ref?: React.Ref<HTMLDivElement>;
+  mode?: HighlightMode;
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  transition?: Transition;
+  hover?: boolean;
+  click?: boolean;
+  disabled?: boolean;
+  enabled?: boolean;
+  exitDelay?: number;
+};
+
+type ParentModeHighlightProps = {
+  boundsOffset?: Partial<Bounds>;
+  containerClassName?: string;
+  forceUpdateBounds?: boolean;
+};
+
+type ControlledParentModeHighlightProps<T extends React.ElementType = 'div'> =
+  BaseHighlightProps<T> &
+    ParentModeHighlightProps & {
+      mode: 'parent';
+      controlledItems: true;
+      children: React.ReactNode;
+    };
+
+type ControlledChildrenModeHighlightProps<T extends React.ElementType = 'div'> =
+  BaseHighlightProps<T> & {
+    mode?: 'children' | undefined;
+    controlledItems: true;
+    children: React.ReactNode;
+  };
+
+type UncontrolledParentModeHighlightProps<T extends React.ElementType = 'div'> =
+  BaseHighlightProps<T> &
+    ParentModeHighlightProps & {
+      mode: 'parent';
+      controlledItems?: false;
+      itemsClassName?: string;
+      children: React.ReactElement | React.ReactElement[];
+    };
+
+type UncontrolledChildrenModeHighlightProps<
+  T extends React.ElementType = 'div',
+> = BaseHighlightProps<T> & {
+  mode?: 'children';
+  controlledItems?: false;
+  itemsClassName?: string;
+  children: React.ReactElement | React.ReactElement[];
+};
+
+type HighlightProps<T extends React.ElementType = 'div'> =
+  | ControlledParentModeHighlightProps<T>
+  | ControlledChildrenModeHighlightProps<T>
+  | UncontrolledParentModeHighlightProps<T>
+  | UncontrolledChildrenModeHighlightProps<T>;
+
+function Highlight<T extends React.ElementType = 'div'>({
+  ref,
+  ...props
+}: HighlightProps<T>) {
+  const {
+    as: Component = 'div',
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    style,
+    transition = { type: 'spring', stiffness: 350, damping: 35 },
+    hover = false,
+    click = true,
+    enabled = true,
+    controlledItems,
+    disabled = false,
+    exitDelay = 200,
+    mode = 'children',
+  } = props;
+
+  const localRef = React.useRef<HTMLDivElement>(null);
+  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);
+
+  const propsBoundsOffset = (props as ParentModeHighlightProps)?.boundsOffset;
+  const boundsOffset = propsBoundsOffset ?? DEFAULT_BOUNDS_OFFSET;
+  const boundsOffsetTop = boundsOffset.top ?? 0;
+  const boundsOffsetLeft = boundsOffset.left ?? 0;
+  const boundsOffsetWidth = boundsOffset.width ?? 0;
+  const boundsOffsetHeight = boundsOffset.height ?? 0;
+
+  const boundsOffsetRef = React.useRef({
+    top: boundsOffsetTop,
+    left: boundsOffsetLeft,
+    width: boundsOffsetWidth,
+    height: boundsOffsetHeight,
+  });
+
+  React.useEffect(() => {
+    boundsOffsetRef.current = {
+      top: boundsOffsetTop,
+      left: boundsOffsetLeft,
+      width: boundsOffsetWidth,
+      height: boundsOffsetHeight,
+    };
+  }, [
+    boundsOffsetTop,
+    boundsOffsetLeft,
+    boundsOffsetWidth,
+    boundsOffsetHeight,
+  ]);
+
+  const [activeValue, setActiveValue] = React.useState<string | null>(
+    value ?? defaultValue ?? null,
+  );
+  const [boundsState, setBoundsState] = React.useState<Bounds | null>(null);
+  const [activeClassNameState, setActiveClassNameState] =
+    React.useState<string>('');
+
+  const safeSetActiveValue = (id: string | null) => {
+    setActiveValue((prev) => {
+      if (prev !== id) {
+        onValueChange?.(id);
+        return id;
+      }
+      return prev;
+    });
+  };
+
+  const safeSetBoundsRef = React.useRef<
+    ((bounds: DOMRect) => void) | undefined
+  >(undefined);
+
+  React.useEffect(() => {
+    safeSetBoundsRef.current = (bounds: DOMRect) => {
+      if (!localRef.current) return;
+
+      const containerRect = localRef.current.getBoundingClientRect();
+      const offset = boundsOffsetRef.current;
+      const newBounds: Bounds = {
+        top: bounds.top - containerRect.top + offset.top,
+        left: bounds.left - containerRect.left + offset.left,
+        width: bounds.width + offset.width,
+        height: bounds.height + offset.height,
+      };
+
+      setBoundsState((prev) => {
+        if (
+          prev &&
+          prev.top === newBounds.top &&
+          prev.left === newBounds.left &&
+          prev.width === newBounds.width &&
+          prev.height === newBounds.height
+        ) {
+          return prev;
+        }
+        return newBounds;
+      });
+    };
+  });
+
+  const safeSetBounds = (bounds: DOMRect) => {
+    safeSetBoundsRef.current?.(bounds);
+  };
+
+  const clearBounds = React.useCallback(() => {
+    setBoundsState((prev) => (prev === null ? prev : null));
+  }, []);
+
+  React.useEffect(() => {
+    if (value !== undefined) setActiveValue(value);
+    else if (defaultValue !== undefined) setActiveValue(defaultValue);
+  }, [value, defaultValue]);
+
+  const id = React.useId();
+
+  React.useEffect(() => {
+    if (mode !== 'parent') return;
+    const container = localRef.current;
+    if (!container) return;
+
+    const onScroll = () => {
+      if (!activeValue) return;
+      const activeEl = container.querySelector<HTMLElement>(
+        `[data-value="${activeValue}"][data-highlight="true"]`,
+      );
+      if (activeEl)
+        safeSetBoundsRef.current?.(activeEl.getBoundingClientRect());
+    };
+
+    container.addEventListener('scroll', onScroll, { passive: true });
+    return () => container.removeEventListener('scroll', onScroll);
+  }, [mode, activeValue]);
+
+  const render = (children: React.ReactNode) => {
+    if (mode === 'parent') {
+      return (
+        <Component
+          ref={localRef}
+          data-slot="motion-highlight-container"
+          style={{ position: 'relative', zIndex: 1 }}
+          className={(props as ParentModeHighlightProps)?.containerClassName}
+        >
+          <AnimatePresence initial={false} mode="wait">
+            {boundsState && (
+              <motion.div
+                data-slot="motion-highlight"
+                animate={{
+                  top: boundsState.top,
+                  left: boundsState.left,
+                  width: boundsState.width,
+                  height: boundsState.height,
+                  opacity: 1,
+                }}
+                initial={{
+                  top: boundsState.top,
+                  left: boundsState.left,
+                  width: boundsState.width,
+                  height: boundsState.height,
+                  opacity: 0,
+                }}
+                exit={{
+                  opacity: 0,
+                  transition: {
+                    ...transition,
+                    delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1000,
+                  },
+                }}
+                transition={transition}
+                style={{ position: 'absolute', zIndex: 0, ...style }}
+                className={cn(className, activeClassNameState)}
+              />
+            )}
+          </AnimatePresence>
+          {children}
+        </Component>
+      );
+    }
+
+    return children;
+  };
+
+  return (
+    <HighlightContext.Provider
+      value={{
+        mode,
+        activeValue,
+        setActiveValue: safeSetActiveValue,
+        id,
+        hover,
+        click,
+        className,
+        style,
+        transition,
+        disabled,
+        enabled,
+        exitDelay,
+        setBounds: safeSetBounds,
+        clearBounds,
+        activeClassName: activeClassNameState,
+        setActiveClassName: setActiveClassNameState,
+        forceUpdateBounds: (props as ParentModeHighlightProps)
+          ?.forceUpdateBounds,
+      }}
+    >
+      {enabled
+        ? controlledItems
+          ? render(children)
+          : render(
+              React.Children.map(children, (child, index) => (
+                <HighlightItem key={index} className={props?.itemsClassName}>
+                  {child}
+                </HighlightItem>
+              )),
+            )
+        : children}
+    </HighlightContext.Provider>
+  );
+}
+
+function getNonOverridingDataAttributes(
+  element: React.ReactElement,
+  dataAttributes: Record<string, unknown>,
+): Record<string, unknown> {
+  return Object.keys(dataAttributes).reduce<Record<string, unknown>>(
+    (acc, key) => {
+      if ((element.props as Record<string, unknown>)[key] === undefined) {
+        acc[key] = dataAttributes[key];
+      }
+      return acc;
+    },
+    {},
+  );
+}
+
+type ExtendedChildProps = React.ComponentProps<'div'> & {
+  id?: string;
+  ref?: React.Ref<HTMLElement>;
+  'data-active'?: string;
+  'data-value'?: string;
+  'data-disabled'?: boolean;
+  'data-highlight'?: boolean;
+  'data-slot'?: string;
+};
+
+type HighlightItemProps<T extends React.ElementType = 'div'> =
+  React.ComponentProps<T> & {
+    as?: T;
+    children: React.ReactElement;
+    id?: string;
+    value?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    transition?: Transition;
+    activeClassName?: string;
+    disabled?: boolean;
+    exitDelay?: number;
+    asChild?: boolean;
+    forceUpdateBounds?: boolean;
+  };
+
+function HighlightItem<T extends React.ElementType>({
+  ref,
+  as,
+  children,
+  id,
+  value,
+  className,
+  style,
+  transition,
+  disabled = false,
+  activeClassName,
+  exitDelay,
+  asChild = false,
+  forceUpdateBounds,
+  ...props
+}: HighlightItemProps<T>) {
+  const itemId = React.useId();
+  const {
+    activeValue,
+    setActiveValue,
+    mode,
+    setBounds,
+    clearBounds,
+    hover,
+    click,
+    enabled,
+    className: contextClassName,
+    style: contextStyle,
+    transition: contextTransition,
+    id: contextId,
+    disabled: contextDisabled,
+    exitDelay: contextExitDelay,
+    forceUpdateBounds: contextForceUpdateBounds,
+    setActiveClassName,
+  } = useHighlight();
+
+  const Component = as ?? 'div';
+  const element = children as React.ReactElement<ExtendedChildProps>;
+  const childValue =
+    id ?? value ?? element.props?.['data-value'] ?? element.props?.id ?? itemId;
+  const isActive = activeValue === childValue;
+  const isDisabled = disabled === undefined ? contextDisabled : disabled;
+  const itemTransition = transition ?? contextTransition;
+
+  const localRef = React.useRef<HTMLDivElement>(null);
+  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);
+
+  const refCallback = React.useCallback((node: HTMLElement | null) => {
+    localRef.current = node as HTMLDivElement;
+  }, []);
+
+  React.useEffect(() => {
+    if (mode !== 'parent') return;
+    let rafId: number;
+    let previousBounds: Bounds | null = null;
+    const shouldUpdateBounds =
+      forceUpdateBounds === true ||
+      (contextForceUpdateBounds && forceUpdateBounds !== false);
+
+    const updateBounds = () => {
+      if (!localRef.current) return;
+
+      const bounds = localRef.current.getBoundingClientRect();
+
+      if (shouldUpdateBounds) {
+        if (
+          previousBounds &&
+          previousBounds.top === bounds.top &&
+          previousBounds.left === bounds.left &&
+          previousBounds.width === bounds.width &&
+          previousBounds.height === bounds.height
+        ) {
+          rafId = requestAnimationFrame(updateBounds);
+          return;
+        }
+        previousBounds = bounds;
+        rafId = requestAnimationFrame(updateBounds);
+      }
+
+      setBounds(bounds);
+    };
+
+    if (isActive) {
+      updateBounds();
+      setActiveClassName(activeClassName ?? '');
+    } else if (!activeValue) clearBounds();
+
+    if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);
+  }, [
+    mode,
+    isActive,
+    activeValue,
+    setBounds,
+    clearBounds,
+    activeClassName,
+    setActiveClassName,
+    forceUpdateBounds,
+    contextForceUpdateBounds,
+  ]);
+
+  if (!React.isValidElement(children)) return children;
+
+  const dataAttributes = {
+    'data-active': isActive ? 'true' : 'false',
+    'aria-selected': isActive,
+    'data-disabled': isDisabled,
+    'data-value': childValue,
+    'data-highlight': true,
+  };
+
+  const commonHandlers = hover
+    ? {
+        onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {
+          setActiveValue(childValue);
+          element.props.onMouseEnter?.(e);
+        },
+        onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => {
+          setActiveValue(null);
+          element.props.onMouseLeave?.(e);
+        },
+      }
+    : click
+      ? {
+          onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+            setActiveValue(childValue);
+            element.props.onClick?.(e);
+          },
+        }
+      : {};
+
+  if (asChild) {
+    if (mode === 'children') {
+      return React.cloneElement(
+        element,
+        {
+          key: childValue,
+          ref: refCallback,
+          className: cn('relative', element.props.className),
+          ...getNonOverridingDataAttributes(element, {
+            ...dataAttributes,
+            'data-slot': 'motion-highlight-item-container',
+          }),
+          ...commonHandlers,
+          ...props,
+        },
+        <>
+          <AnimatePresence initial={false} mode="wait">
+            {isActive && !isDisabled && (
+              <motion.div
+                layoutId={`transition-background-${contextId}`}
+                data-slot="motion-highlight"
+                style={{
+                  position: 'absolute',
+                  zIndex: 0,
+                  ...contextStyle,
+                  ...style,
+                }}
+                className={cn(contextClassName, activeClassName)}
+                transition={itemTransition}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{
+                  opacity: 0,
+                  transition: {
+                    ...itemTransition,
+                    delay:
+                      (itemTransition?.delay ?? 0) +
+                      (exitDelay ?? contextExitDelay ?? 0) / 1000,
+                  },
+                }}
+                {...dataAttributes}
+              />
+            )}
+          </AnimatePresence>
+
+          <Component
+            data-slot="motion-highlight-item"
+            style={{ position: 'relative', zIndex: 1 }}
+            className={className}
+            {...dataAttributes}
+          >
+            {children}
+          </Component>
+        </>,
+      );
+    }
+
+    return React.cloneElement(element, {
+      ref: refCallback,
+      ...getNonOverridingDataAttributes(element, {
+        ...dataAttributes,
+        'data-slot': 'motion-highlight-item',
+      }),
+      ...commonHandlers,
+    });
+  }
+
+  return enabled ? (
+    <Component
+      key={childValue}
+      ref={localRef}
+      data-slot="motion-highlight-item-container"
+      className={cn(mode === 'children' && 'relative', className)}
+      {...dataAttributes}
+      {...props}
+      {...commonHandlers}
+    >
+      {mode === 'children' && (
+        <AnimatePresence initial={false} mode="wait">
+          {isActive && !isDisabled && (
+            <motion.div
+              layoutId={`transition-background-${contextId}`}
+              data-slot="motion-highlight"
+              style={{
+                position: 'absolute',
+                zIndex: 0,
+                ...contextStyle,
+                ...style,
+              }}
+              className={cn(contextClassName, activeClassName)}
+              transition={itemTransition}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{
+                opacity: 0,
+                transition: {
+                  ...itemTransition,
+                  delay:
+                    (itemTransition?.delay ?? 0) +
+                    (exitDelay ?? contextExitDelay ?? 0) / 1000,
+                },
+              }}
+              {...dataAttributes}
+            />
+          )}
+        </AnimatePresence>
+      )}
+
+      {React.cloneElement(element, {
+        style: { position: 'relative', zIndex: 1 },
+        className: element.props.className,
+        ...getNonOverridingDataAttributes(element, {
+          ...dataAttributes,
+          'data-slot': 'motion-highlight-item',
+        }),
+      })}
+    </Component>
+  ) : (
+    children
+  );
+}
+
+export {
+  Highlight,
+  HighlightItem,
+  useHighlight,
+  type HighlightProps,
+  type HighlightItemProps,
+};
diff --git a/frontend/src/components/animate-ui/primitives/radix/dialog.tsx b/frontend/src/components/animate-ui/primitives/radix/dialog.tsx
new file mode 100644
index 00000000..3730aead
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/radix/dialog.tsx
@@ -0,0 +1,208 @@
+/* eslint-disable */
+'use client';
+
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+
+import { useControlledState } from '@/hooks/use-controlled-state';
+import { getStrictContext } from '@/lib/get-strict-context';
+
+type DialogContextType = {
+  isOpen: boolean;
+  setIsOpen: DialogProps['onOpenChange'];
+};
+
+const [DialogProvider, useDialog] =
+  getStrictContext<DialogContextType>('DialogContext');
+
+type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;
+
+function Dialog(props: DialogProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+
+  return (
+    <DialogProvider value={{ isOpen, setIsOpen }}>
+      <DialogPrimitive.Root
+        data-slot="dialog"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </DialogProvider>
+  );
+}
+
+type DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;
+
+function DialogTrigger(props: DialogTriggerProps) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+type DialogPortalProps = Omit<
+  React.ComponentProps<typeof DialogPrimitive.Portal>,
+  'forceMount'
+>;
+
+function DialogPortal(props: DialogPortalProps) {
+  const { isOpen } = useDialog();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <DialogPrimitive.Portal
+          data-slot="dialog-portal"
+          forceMount
+          {...props}
+        />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type DialogOverlayProps = Omit<
+  React.ComponentProps<typeof DialogPrimitive.Overlay>,
+  'forceMount' | 'asChild'
+> &
+  HTMLMotionProps<'div'>;
+
+function DialogOverlay({
+  transition = { duration: 0.2, ease: 'easeInOut' },
+  ...props
+}: DialogOverlayProps) {
+  return (
+    <DialogPrimitive.Overlay data-slot="dialog-overlay" asChild forceMount>
+      <motion.div
+        key="dialog-overlay"
+        initial={{ opacity: 0, filter: 'blur(4px)' }}
+        animate={{ opacity: 1, filter: 'blur(0px)' }}
+        exit={{ opacity: 0, filter: 'blur(4px)' }}
+        transition={transition}
+        {...props}
+      />
+    </DialogPrimitive.Overlay>
+  );
+}
+
+type DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';
+
+type DialogContentProps = Omit<
+  React.ComponentProps<typeof DialogPrimitive.Content>,
+  'forceMount' | 'asChild'
+> &
+  HTMLMotionProps<'div'> & {
+    from?: DialogFlipDirection;
+  };
+
+function DialogContent({
+  from = 'top',
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  onInteractOutside,
+  transition = { type: 'spring', stiffness: 150, damping: 25 },
+  ...props
+}: DialogContentProps) {
+  const initialRotation =
+    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';
+  const isVertical = from === 'top' || from === 'bottom';
+  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';
+
+  return (
+    <DialogPrimitive.Content
+      asChild
+      forceMount
+      onOpenAutoFocus={onOpenAutoFocus}
+      onCloseAutoFocus={onCloseAutoFocus}
+      onEscapeKeyDown={onEscapeKeyDown}
+      onPointerDownOutside={onPointerDownOutside}
+      onInteractOutside={onInteractOutside}
+    >
+      <motion.div
+        key="dialog-content"
+        data-slot="dialog-content"
+        initial={{
+          opacity: 0,
+          filter: 'blur(4px)',
+          transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,
+        }}
+        animate={{
+          opacity: 1,
+          filter: 'blur(0px)',
+          transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`,
+        }}
+        exit={{
+          opacity: 0,
+          filter: 'blur(4px)',
+          transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,
+        }}
+        transition={transition}
+        {...props}
+      />
+    </DialogPrimitive.Content>
+  );
+}
+
+type DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;
+
+function DialogClose(props: DialogCloseProps) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+type DialogHeaderProps = React.ComponentProps<'div'>;
+
+function DialogHeader(props: DialogHeaderProps) {
+  return <div data-slot="dialog-header" {...props} />;
+}
+
+type DialogFooterProps = React.ComponentProps<'div'>;
+
+function DialogFooter(props: DialogFooterProps) {
+  return <div data-slot="dialog-footer" {...props} />;
+}
+
+type DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>;
+
+function DialogTitle(props: DialogTitleProps) {
+  return <DialogPrimitive.Title data-slot="dialog-title" {...props} />;
+}
+
+type DialogDescriptionProps = React.ComponentProps<
+  typeof DialogPrimitive.Description
+>;
+
+function DialogDescription(props: DialogDescriptionProps) {
+  return (
+    <DialogPrimitive.Description data-slot="dialog-description" {...props} />
+  );
+}
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  useDialog,
+  type DialogProps,
+  type DialogTriggerProps,
+  type DialogPortalProps,
+  type DialogCloseProps,
+  type DialogOverlayProps,
+  type DialogContentProps,
+  type DialogHeaderProps,
+  type DialogFooterProps,
+  type DialogTitleProps,
+  type DialogDescriptionProps,
+  type DialogContextType,
+  type DialogFlipDirection,
+};
\ No newline at end of file
diff --git a/frontend/src/components/animate-ui/primitives/radix/dropdown-menu.tsx b/frontend/src/components/animate-ui/primitives/radix/dropdown-menu.tsx
new file mode 100644
index 00000000..b828b906
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/radix/dropdown-menu.tsx
@@ -0,0 +1,564 @@
+/* eslint-disable */
+'use client';
+
+import * as React from 'react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+
+import {
+  Highlight,
+  HighlightItem,
+  type HighlightItemProps,
+  type HighlightProps,
+} from '@/components/animate-ui/primitives/effects/highlight';
+import { getStrictContext } from '@/lib/get-strict-context';
+import { useControlledState } from '@/hooks/use-controlled-state';
+import { useDataState } from '@/hooks/use-data-state';
+
+type DropdownMenuContextType = {
+  isOpen: boolean;
+  setIsOpen: (o: boolean) => void;
+  highlightedValue: string | null;
+  setHighlightedValue: (value: string | null) => void;
+};
+
+type DropdownMenuSubContextType = {
+  isOpen: boolean;
+  setIsOpen: (o: boolean) => void;
+};
+
+const [DropdownMenuProvider, useDropdownMenu] =
+  getStrictContext<DropdownMenuContextType>('DropdownMenuContext');
+
+const [DropdownMenuSubProvider, useDropdownMenuSub] =
+  getStrictContext<DropdownMenuSubContextType>('DropdownMenuSubContext');
+
+type DropdownMenuProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Root
+>;
+
+function DropdownMenu(props: DropdownMenuProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+  const [highlightedValue, setHighlightedValue] = React.useState<string | null>(
+    null,
+  );
+
+  return (
+    <DropdownMenuProvider
+      value={{ isOpen, setIsOpen, highlightedValue, setHighlightedValue }}
+    >
+      <DropdownMenuPrimitive.Root
+        data-slot="dropdown-menu"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </DropdownMenuProvider>
+  );
+}
+
+type DropdownMenuTriggerProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Trigger
+>;
+
+function DropdownMenuTrigger(props: DropdownMenuTriggerProps) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+type DropdownMenuPortalProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Portal
+>;
+
+function DropdownMenuPortal(props: DropdownMenuPortalProps) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+type DropdownMenuGroupProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Group
+>;
+
+function DropdownMenuGroup(props: DropdownMenuGroupProps) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+type DropdownMenuSubProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Sub
+>;
+
+function DropdownMenuSub(props: DropdownMenuSubProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+
+  return (
+    <DropdownMenuSubProvider value={{ isOpen, setIsOpen }}>
+      <DropdownMenuPrimitive.Sub
+        data-slot="dropdown-menu-sub"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </DropdownMenuSubProvider>
+  );
+}
+
+type DropdownMenuRadioGroupProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.RadioGroup
+>;
+
+function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+type DropdownMenuSubTriggerProps = Omit<
+  React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>,
+  'asChild'
+> &
+  HTMLMotionProps<'div'>;
+
+function DropdownMenuSubTrigger({
+  disabled,
+  textValue,
+  ...props
+}: DropdownMenuSubTriggerProps) {
+  const { setHighlightedValue } = useDropdownMenu();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={highlightedRef}
+      disabled={disabled}
+      textValue={textValue}
+      asChild
+    >
+      <motion.div
+        data-slot="dropdown-menu-sub-trigger"
+        data-disabled={disabled}
+        {...props}
+      />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+type DropdownMenuSubContentProps = Omit<
+  React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>,
+  'forceMount' | 'asChild'
+> &
+  Omit<
+    React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,
+    'forceMount'
+  > &
+  HTMLMotionProps<'div'>;
+
+function DropdownMenuSubContent({
+  loop,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  onFocusOutside,
+  onInteractOutside,
+  sideOffset,
+  alignOffset,
+  avoidCollisions,
+  collisionBoundary,
+  collisionPadding,
+  arrowPadding,
+  sticky,
+  hideWhenDetached,
+  transition = { duration: 0.2 },
+  style,
+  container,
+  ...props
+}: DropdownMenuSubContentProps) {
+  const { isOpen } = useDropdownMenuSub();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <DropdownMenuPortal forceMount container={container}>
+          <DropdownMenuPrimitive.SubContent
+            asChild
+            forceMount
+            loop={loop}
+            onEscapeKeyDown={onEscapeKeyDown}
+            onPointerDownOutside={onPointerDownOutside}
+            onFocusOutside={onFocusOutside}
+            onInteractOutside={onInteractOutside}
+            sideOffset={sideOffset}
+            alignOffset={alignOffset}
+            avoidCollisions={avoidCollisions}
+            collisionBoundary={collisionBoundary}
+            collisionPadding={collisionPadding}
+            arrowPadding={arrowPadding}
+            sticky={sticky}
+            hideWhenDetached={hideWhenDetached}
+          >
+            <motion.div
+              key="dropdown-menu-sub-content"
+              data-slot="dropdown-menu-sub-content"
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={transition}
+              style={{ willChange: 'opacity, transform', ...style }}
+              {...props}
+            />
+          </DropdownMenuPrimitive.SubContent>
+        </DropdownMenuPortal>
+      )}
+    </AnimatePresence>
+  );
+}
+
+type DropdownMenuHighlightProps = Omit<
+  HighlightProps,
+  'controlledItems' | 'enabled' | 'hover'
+> & {
+  animateOnHover?: boolean;
+};
+
+function DropdownMenuHighlight({
+  transition = { type: 'spring', stiffness: 350, damping: 35 },
+  ...props
+}: DropdownMenuHighlightProps) {
+  const { highlightedValue } = useDropdownMenu();
+
+  return (
+    <Highlight
+      data-slot="dropdown-menu-highlight"
+      click={false}
+      controlledItems
+      transition={transition}
+      value={highlightedValue}
+      {...props}
+    />
+  );
+}
+
+type DropdownMenuContentProps = Omit<
+  React.ComponentProps<typeof DropdownMenuPrimitive.Content>,
+  'forceMount' | 'asChild'
+> &
+  Omit<
+    React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,
+    'forceMount'
+  > &
+  HTMLMotionProps<'div'>;
+
+function DropdownMenuContent({
+  loop,
+  onCloseAutoFocus,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  onFocusOutside,
+  onInteractOutside,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  avoidCollisions,
+  collisionBoundary,
+  collisionPadding,
+  arrowPadding,
+  sticky,
+  hideWhenDetached,
+  transition = { duration: 0.2 },
+  style,
+  container,
+  ...props
+}: DropdownMenuContentProps) {
+  const { isOpen } = useDropdownMenu();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <DropdownMenuPortal forceMount container={container}>
+          <DropdownMenuPrimitive.Content
+            asChild
+            loop={loop}
+            onCloseAutoFocus={onCloseAutoFocus}
+            onEscapeKeyDown={onEscapeKeyDown}
+            onPointerDownOutside={onPointerDownOutside}
+            onFocusOutside={onFocusOutside}
+            onInteractOutside={onInteractOutside}
+            side={side}
+            sideOffset={sideOffset}
+            align={align}
+            alignOffset={alignOffset}
+            avoidCollisions={avoidCollisions}
+            collisionBoundary={collisionBoundary}
+            collisionPadding={collisionPadding}
+            arrowPadding={arrowPadding}
+            sticky={sticky}
+            hideWhenDetached={hideWhenDetached}
+          >
+            <motion.div
+              key="dropdown-menu-content"
+              data-slot="dropdown-menu-content"
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={transition}
+              style={{ willChange: 'opacity, transform', ...style }}
+              {...props}
+            />
+          </DropdownMenuPrimitive.Content>
+        </DropdownMenuPortal>
+      )}
+    </AnimatePresence>
+  );
+}
+
+type DropdownMenuHighlightItemProps = HighlightItemProps;
+
+function DropdownMenuHighlightItem(props: DropdownMenuHighlightItemProps) {
+  return <HighlightItem data-slot="dropdown-menu-highlight-item" {...props} />;
+}
+
+type DropdownMenuItemProps = Omit<
+  React.ComponentProps<typeof DropdownMenuPrimitive.Item>,
+  'asChild'
+> &
+  HTMLMotionProps<'div'>;
+
+function DropdownMenuItem({
+  disabled,
+  onSelect,
+  textValue,
+  ...props
+}: DropdownMenuItemProps) {
+  const { setHighlightedValue } = useDropdownMenu();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+
+  return (
+    <DropdownMenuPrimitive.Item
+      ref={highlightedRef}
+      disabled={disabled}
+      onSelect={onSelect}
+      textValue={textValue}
+      asChild
+    >
+      <motion.div
+        data-slot="dropdown-menu-item"
+        data-disabled={disabled}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Item>
+  );
+}
+
+type DropdownMenuCheckboxItemProps = Omit<
+  React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>,
+  'asChild'
+> &
+  HTMLMotionProps<'div'>;
+
+function DropdownMenuCheckboxItem({
+  checked,
+  onCheckedChange,
+  disabled,
+  onSelect,
+  textValue,
+  ...props
+}: DropdownMenuCheckboxItemProps) {
+  const { setHighlightedValue } = useDropdownMenu();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      ref={highlightedRef}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+      onSelect={onSelect}
+      textValue={textValue}
+      asChild
+    >
+      <motion.div
+        data-slot="dropdown-menu-checkbox-item"
+        data-disabled={disabled}
+        {...props}
+      />
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+type DropdownMenuRadioItemProps = Omit<
+  React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>,
+  'asChild'
+> &
+  HTMLMotionProps<'div'>;
+
+function DropdownMenuRadioItem({
+  value,
+  disabled,
+  onSelect,
+  textValue,
+  ...props
+}: DropdownMenuRadioItemProps) {
+  const { setHighlightedValue } = useDropdownMenu();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      ref={highlightedRef}
+      value={value}
+      disabled={disabled}
+      onSelect={onSelect}
+      textValue={textValue}
+      asChild
+    >
+      <motion.div
+        data-slot="dropdown-menu-radio-item"
+        data-disabled={disabled}
+        {...props}
+      />
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+type DropdownMenuLabelProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Label
+>;
+
+function DropdownMenuLabel(props: DropdownMenuLabelProps) {
+  return (
+    <DropdownMenuPrimitive.Label data-slot="dropdown-menu-label" {...props} />
+  );
+}
+
+type DropdownMenuSeparatorProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Separator
+>;
+
+function DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      {...props}
+    />
+  );
+}
+
+type DropdownMenuShortcutProps = React.ComponentProps<'span'>;
+
+function DropdownMenuShortcut(props: DropdownMenuShortcutProps) {
+  return <span data-slot="dropdown-menu-shortcut" {...props} />;
+}
+
+type DropdownMenuItemIndicatorProps = Omit<
+  React.ComponentProps<typeof DropdownMenuPrimitive.ItemIndicator>,
+  'asChild'
+> &
+  HTMLMotionProps<'div'>;
+
+function DropdownMenuItemIndicator(props: DropdownMenuItemIndicatorProps) {
+  return (
+    <DropdownMenuPrimitive.ItemIndicator
+      data-slot="dropdown-menu-item-indicator"
+      asChild
+    >
+      <motion.div {...props} />
+    </DropdownMenuPrimitive.ItemIndicator>
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuHighlight,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemIndicator,
+  DropdownMenuHighlightItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+  useDropdownMenu,
+  useDropdownMenuSub,
+  type DropdownMenuProps,
+  type DropdownMenuTriggerProps,
+  type DropdownMenuHighlightProps,
+  type DropdownMenuContentProps,
+  type DropdownMenuItemProps,
+  type DropdownMenuItemIndicatorProps,
+  type DropdownMenuHighlightItemProps,
+  type DropdownMenuCheckboxItemProps,
+  type DropdownMenuRadioItemProps,
+  type DropdownMenuLabelProps,
+  type DropdownMenuSeparatorProps,
+  type DropdownMenuShortcutProps,
+  type DropdownMenuGroupProps,
+  type DropdownMenuPortalProps,
+  type DropdownMenuSubProps,
+  type DropdownMenuSubContentProps,
+  type DropdownMenuSubTriggerProps,
+  type DropdownMenuRadioGroupProps,
+  type DropdownMenuContextType,
+  type DropdownMenuSubContextType,
+};
\ No newline at end of file
diff --git a/frontend/src/components/animate-ui/primitives/radix/hover-card.tsx b/frontend/src/components/animate-ui/primitives/radix/hover-card.tsx
new file mode 100644
index 00000000..b2ce5ca7
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/radix/hover-card.tsx
@@ -0,0 +1,208 @@
+/* eslint-disable */
+'use client';
+
+import * as React from 'react';
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+import {
+  AnimatePresence,
+  motion,
+  useMotionValue,
+  useSpring,
+  type MotionValue,
+  type HTMLMotionProps,
+  type SpringOptions,
+} from 'motion/react';
+
+import { getStrictContext } from '@/lib/get-strict-context';
+import { useControlledState } from '@/hooks/use-controlled-state';
+
+type HoverCardContextType = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  x: MotionValue<number>;
+  y: MotionValue<number>;
+  followCursor?: boolean | 'x' | 'y';
+  followCursorSpringOptions?: SpringOptions;
+};
+
+const [HoverCardProvider, useHoverCard] =
+  getStrictContext<HoverCardContextType>('HoverCardContext');
+
+type HoverCardProps = React.ComponentProps<typeof HoverCardPrimitive.Root> & {
+  followCursor?: boolean | 'x' | 'y';
+  followCursorSpringOptions?: SpringOptions;
+};
+
+function HoverCard({
+  followCursor = false,
+  followCursorSpringOptions = { stiffness: 200, damping: 17 },
+  ...props
+}: HoverCardProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  return (
+    <HoverCardProvider
+      value={{
+        isOpen,
+        setIsOpen,
+        x,
+        y,
+        followCursor,
+        followCursorSpringOptions,
+      }}
+    >
+      <HoverCardPrimitive.Root
+        data-slot="hover-card"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </HoverCardProvider>
+  );
+}
+
+type HoverCardTriggerProps = React.ComponentProps<
+  typeof HoverCardPrimitive.Trigger
+>;
+
+function HoverCardTrigger({ onMouseMove, ...props }: HoverCardTriggerProps) {
+  const { x, y, followCursor } = useHoverCard();
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    onMouseMove?.(event);
+
+    const target = event.currentTarget.getBoundingClientRect();
+
+    if (followCursor === 'x' || followCursor === true) {
+      const eventOffsetX = event.clientX - target.left;
+      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;
+      x.set(offsetXFromCenter);
+    }
+
+    if (followCursor === 'y' || followCursor === true) {
+      const eventOffsetY = event.clientY - target.top;
+      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;
+      y.set(offsetYFromCenter);
+    }
+  };
+
+  return (
+    <HoverCardPrimitive.Trigger
+      data-slot="hover-card-trigger"
+      onMouseMove={handleMouseMove}
+      {...props}
+    />
+  );
+}
+
+type HoverCardPortalProps = Omit<
+  React.ComponentProps<typeof HoverCardPrimitive.Portal>,
+  'forceMount'
+>;
+
+function HoverCardPortal(props: HoverCardPortalProps) {
+  const { isOpen } = useHoverCard();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <HoverCardPrimitive.Portal
+          forceMount
+          data-slot="hover-card-portal"
+          {...props}
+        />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type HoverCardContentProps = React.ComponentProps<
+  typeof HoverCardPrimitive.Content
+> &
+  HTMLMotionProps<'div'>;
+
+function HoverCardContent({
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  avoidCollisions,
+  collisionBoundary,
+  collisionPadding,
+  arrowPadding,
+  sticky,
+  hideWhenDetached,
+  style,
+  transition = { type: 'spring', stiffness: 300, damping: 25 },
+  ...props
+}: HoverCardContentProps) {
+  const { x, y, followCursor, followCursorSpringOptions } = useHoverCard();
+  const translateX = useSpring(x, followCursorSpringOptions);
+  const translateY = useSpring(y, followCursorSpringOptions);
+
+  return (
+    <HoverCardPrimitive.Content
+      asChild
+      forceMount
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      avoidCollisions={avoidCollisions}
+      collisionBoundary={collisionBoundary}
+      collisionPadding={collisionPadding}
+      arrowPadding={arrowPadding}
+      sticky={sticky}
+      hideWhenDetached={hideWhenDetached}
+    >
+      <motion.div
+        key="hover-card-content"
+        data-slot="hover-card-content"
+        initial={{ opacity: 0, scale: 0.5 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0.5 }}
+        transition={transition}
+        style={{
+          x:
+            followCursor === 'x' || followCursor === true
+              ? translateX
+              : undefined,
+          y:
+            followCursor === 'y' || followCursor === true
+              ? translateY
+              : undefined,
+          ...style,
+        }}
+        {...props}
+      />
+    </HoverCardPrimitive.Content>
+  );
+}
+
+type HoverCardArrowProps = React.ComponentProps<
+  typeof HoverCardPrimitive.Arrow
+>;
+
+function HoverCardArrow(props: HoverCardArrowProps) {
+  return <HoverCardPrimitive.Arrow data-slot="hover-card-arrow" {...props} />;
+}
+
+export {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardPortal,
+  HoverCardContent,
+  HoverCardArrow,
+  useHoverCard,
+  type HoverCardProps,
+  type HoverCardTriggerProps,
+  type HoverCardPortalProps,
+  type HoverCardContentProps,
+  type HoverCardArrowProps,
+  type HoverCardContextType,
+};
\ No newline at end of file
diff --git a/frontend/src/components/animate-ui/primitives/radix/popover.tsx b/frontend/src/components/animate-ui/primitives/radix/popover.tsx
new file mode 100644
index 00000000..c022ac4b
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/radix/popover.tsx
@@ -0,0 +1,163 @@
+/* eslint-disable */
+'use client';
+
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+
+import { getStrictContext } from '@/lib/get-strict-context';
+import { useControlledState } from '@/hooks/use-controlled-state';
+
+type PopoverContextType = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+};
+
+const [PopoverProvider, usePopover] =
+  getStrictContext<PopoverContextType>('PopoverContext');
+
+type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;
+
+function Popover(props: PopoverProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+
+  return (
+    <PopoverProvider value={{ isOpen, setIsOpen }}>
+      <PopoverPrimitive.Root
+        data-slot="popover"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </PopoverProvider>
+  );
+}
+
+type PopoverTriggerProps = React.ComponentProps<
+  typeof PopoverPrimitive.Trigger
+>;
+
+function PopoverTrigger(props: PopoverTriggerProps) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+type PopoverPortalProps = Omit<
+  React.ComponentProps<typeof PopoverPrimitive.Portal>,
+  'forceMount'
+>;
+
+function PopoverPortal(props: PopoverPortalProps) {
+  const { isOpen } = usePopover();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <PopoverPrimitive.Portal
+          forceMount
+          data-slot="popover-portal"
+          {...props}
+        />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type PopoverContentProps = Omit<
+  React.ComponentProps<typeof PopoverPrimitive.Content>,
+  'forceMount' | 'asChild'
+> &
+  HTMLMotionProps<'div'>;
+
+function PopoverContent({
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  onFocusOutside,
+  onInteractOutside,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  avoidCollisions,
+  collisionBoundary,
+  collisionPadding,
+  arrowPadding,
+  sticky,
+  hideWhenDetached,
+  transition = { type: 'spring', stiffness: 300, damping: 25 },
+  ...props
+}: PopoverContentProps) {
+  return (
+    <PopoverPrimitive.Content
+      asChild
+      forceMount
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      avoidCollisions={avoidCollisions}
+      collisionBoundary={collisionBoundary}
+      collisionPadding={collisionPadding}
+      arrowPadding={arrowPadding}
+      sticky={sticky}
+      hideWhenDetached={hideWhenDetached}
+      onOpenAutoFocus={onOpenAutoFocus}
+      onCloseAutoFocus={onCloseAutoFocus}
+      onEscapeKeyDown={onEscapeKeyDown}
+      onPointerDownOutside={onPointerDownOutside}
+      onInteractOutside={onInteractOutside}
+      onFocusOutside={onFocusOutside}
+    >
+      <motion.div
+        key="popover-content"
+        data-slot="popover-content"
+        initial={{ opacity: 0, scale: 0.5 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0.5 }}
+        transition={transition}
+        {...props}
+      />
+    </PopoverPrimitive.Content>
+  );
+}
+
+type PopoverAnchorProps = React.ComponentProps<typeof PopoverPrimitive.Anchor>;
+
+function PopoverAnchor({ ...props }: PopoverAnchorProps) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+type PopoverArrowProps = React.ComponentProps<typeof PopoverPrimitive.Arrow>;
+
+function PopoverArrow(props: PopoverArrowProps) {
+  return <PopoverPrimitive.Arrow data-slot="popover-arrow" {...props} />;
+}
+
+type PopoverCloseProps = React.ComponentProps<typeof PopoverPrimitive.Close>;
+
+function PopoverClose(props: PopoverCloseProps) {
+  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />;
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverPortal,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverArrow,
+  usePopover,
+  type PopoverProps,
+  type PopoverTriggerProps,
+  type PopoverPortalProps,
+  type PopoverContentProps,
+  type PopoverAnchorProps,
+  type PopoverCloseProps,
+  type PopoverArrowProps,
+  type PopoverContextType,
+};
\ No newline at end of file
diff --git a/frontend/src/components/animate-ui/primitives/radix/sheet.tsx b/frontend/src/components/animate-ui/primitives/radix/sheet.tsx
new file mode 100644
index 00000000..59f7a0ae
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/radix/sheet.tsx
@@ -0,0 +1,192 @@
+/* eslint-disable */
+'use client';
+
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+
+import { getStrictContext } from '@/lib/get-strict-context';
+import { useControlledState } from '@/hooks/use-controlled-state';
+
+type SheetContextType = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+};
+
+const [SheetProvider, useSheet] =
+  getStrictContext<SheetContextType>('SheetContext');
+
+type SheetProps = React.ComponentProps<typeof SheetPrimitive.Root>;
+
+function Sheet(props: SheetProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props.open,
+    defaultValue: props.defaultOpen,
+    onChange: props.onOpenChange,
+  });
+
+  return (
+    <SheetProvider value={{ isOpen, setIsOpen }}>
+      <SheetPrimitive.Root
+        data-slot="sheet"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </SheetProvider>
+  );
+}
+
+type SheetTriggerProps = React.ComponentProps<typeof SheetPrimitive.Trigger>;
+
+function SheetTrigger(props: SheetTriggerProps) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+type SheetCloseProps = React.ComponentProps<typeof SheetPrimitive.Close>;
+
+function SheetClose(props: SheetCloseProps) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+type SheetPortalProps = React.ComponentProps<typeof SheetPrimitive.Portal>;
+
+function SheetPortal(props: SheetPortalProps) {
+  const { isOpen } = useSheet();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <SheetPrimitive.Portal forceMount data-slot="sheet-portal" {...props} />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type SheetOverlayProps = Omit<
+  React.ComponentProps<typeof SheetPrimitive.Overlay>,
+  'asChild' | 'forceMount'
+> &
+  HTMLMotionProps<'div'>;
+
+function SheetOverlay({
+  transition = { duration: 0.2, ease: 'easeInOut' },
+  ...props
+}: SheetOverlayProps) {
+  return (
+    <SheetPrimitive.Overlay asChild forceMount>
+      <motion.div
+        key="sheet-overlay"
+        data-slot="sheet-overlay"
+        initial={{ opacity: 0, filter: 'blur(4px)' }}
+        animate={{ opacity: 1, filter: 'blur(0px)' }}
+        exit={{ opacity: 0, filter: 'blur(4px)' }}
+        transition={transition}
+        {...props}
+      />
+    </SheetPrimitive.Overlay>
+  );
+}
+
+type Side = 'top' | 'bottom' | 'left' | 'right';
+
+type SheetContentProps = React.ComponentProps<typeof SheetPrimitive.Content> &
+  HTMLMotionProps<'div'> & {
+    side?: Side;
+  };
+
+function SheetContent({
+  side = 'right',
+  transition = { type: 'spring', stiffness: 150, damping: 22 },
+  style,
+  children,
+  ...props
+}: SheetContentProps) {
+  const axis = side === 'left' || side === 'right' ? 'x' : 'y';
+
+  const offscreen: Record<Side, { x?: string; y?: string; opacity: number }> = {
+    right: { x: '100%', opacity: 0 },
+    left: { x: '-100%', opacity: 0 },
+    top: { y: '-100%', opacity: 0 },
+    bottom: { y: '100%', opacity: 0 },
+  };
+
+  const positionStyle: Record<Side, React.CSSProperties> = {
+    right: { insetBlock: 0, right: 0 },
+    left: { insetBlock: 0, left: 0 },
+    top: { insetInline: 0, top: 0 },
+    bottom: { insetInline: 0, bottom: 0 },
+  };
+
+  return (
+    <SheetPrimitive.Content asChild forceMount {...props}>
+      <motion.div
+        key="sheet-content"
+        data-slot="sheet-content"
+        data-side={side}
+        initial={offscreen[side]}
+        animate={{ [axis]: 0, opacity: 1 }}
+        exit={offscreen[side]}
+        style={{
+          position: 'fixed',
+          ...positionStyle[side],
+          ...style,
+        }}
+        transition={transition}
+      >
+        {children}
+      </motion.div>
+    </SheetPrimitive.Content>
+  );
+}
+
+type SheetHeaderProps = React.ComponentProps<'div'>;
+
+function SheetHeader(props: SheetHeaderProps) {
+  return <div data-slot="sheet-header" {...props} />;
+}
+
+type SheetFooterProps = React.ComponentProps<'div'>;
+
+function SheetFooter(props: SheetFooterProps) {
+  return <div data-slot="sheet-footer" {...props} />;
+}
+
+type SheetTitleProps = React.ComponentProps<typeof SheetPrimitive.Title>;
+
+function SheetTitle(props: SheetTitleProps) {
+  return <SheetPrimitive.Title data-slot="sheet-title" {...props} />;
+}
+
+type SheetDescriptionProps = React.ComponentProps<
+  typeof SheetPrimitive.Description
+>;
+
+function SheetDescription(props: SheetDescriptionProps) {
+  return (
+    <SheetPrimitive.Description data-slot="sheet-description" {...props} />
+  );
+}
+
+export {
+  useSheet,
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  type SheetProps,
+  type SheetPortalProps,
+  type SheetOverlayProps,
+  type SheetTriggerProps,
+  type SheetCloseProps,
+  type SheetContentProps,
+  type SheetHeaderProps,
+  type SheetFooterProps,
+  type SheetTitleProps,
+  type SheetDescriptionProps,
+};
\ No newline at end of file
diff --git a/frontend/src/components/animate-ui/primitives/radix/switch.tsx b/frontend/src/components/animate-ui/primitives/radix/switch.tsx
new file mode 100644
index 00000000..c414bf99
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/radix/switch.tsx
@@ -0,0 +1,156 @@
+/* eslint-disable */
+'use client';
+
+import * as React from 'react';
+import { Switch as SwitchPrimitives } from 'radix-ui';
+import {
+  motion,
+  type TargetAndTransition,
+  type VariantLabels,
+  type HTMLMotionProps,
+  type LegacyAnimationControls,
+} from 'motion/react';
+
+import { getStrictContext } from '@/lib/get-strict-context';
+import { useControlledState } from '@/hooks/use-controlled-state';
+
+type SwitchContextType = {
+  isChecked: boolean;
+  setIsChecked: (isChecked: boolean) => void;
+  isPressed: boolean;
+  setIsPressed: (isPressed: boolean) => void;
+};
+
+const [SwitchProvider, useSwitch] =
+  getStrictContext<SwitchContextType>('SwitchContext');
+
+type SwitchProps = Omit<
+  React.ComponentProps<typeof SwitchPrimitives.Root>,
+  'asChild'
+> &
+  HTMLMotionProps<'button'>;
+
+function Switch(props: SwitchProps) {
+  // Destructure Radix-only props so they don't leak onto the motion.button DOM element
+  const {
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    disabled,
+    required,
+    name,
+    value,
+    form,
+    ...motionProps
+  } = props;
+
+  const [isPressed, setIsPressed] = React.useState(false);
+  const [isChecked, setIsChecked] = useControlledState({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+
+  return (
+    <SwitchProvider
+      value={{ isChecked, setIsChecked, isPressed, setIsPressed }}
+    >
+      <SwitchPrimitives.Root
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onCheckedChange={setIsChecked}
+        disabled={disabled}
+        required={required}
+        name={name}
+        value={value}
+        form={form}
+        asChild
+      >
+        <motion.button
+          data-slot="switch"
+          whileTap="tap"
+          initial={false}
+          onTapStart={() => setIsPressed(true)}
+          onTapCancel={() => setIsPressed(false)}
+          onTap={() => setIsPressed(false)}
+          {...motionProps}
+        />
+      </SwitchPrimitives.Root>
+    </SwitchProvider>
+  );
+}
+
+type SwitchThumbProps = Omit<
+  React.ComponentProps<typeof SwitchPrimitives.Thumb>,
+  'asChild'
+> &
+  HTMLMotionProps<'div'> & {
+    pressedAnimation?:
+      | TargetAndTransition
+      | VariantLabels
+      | boolean
+      | LegacyAnimationControls;
+  };
+
+function SwitchThumb({
+  pressedAnimation,
+  transition = { type: 'spring', stiffness: 300, damping: 25 },
+  ...props
+}: SwitchThumbProps) {
+  const { isPressed } = useSwitch();
+
+  return (
+    <SwitchPrimitives.Thumb asChild>
+      <motion.div
+        data-slot="switch-thumb"
+        whileTap="tab"
+        layout
+        transition={transition}
+        animate={isPressed ? pressedAnimation : undefined}
+        {...props}
+      />
+    </SwitchPrimitives.Thumb>
+  );
+}
+
+type SwitchIconPosition = 'left' | 'right' | 'thumb';
+
+type SwitchIconProps = HTMLMotionProps<'div'> & {
+  position: SwitchIconPosition;
+};
+
+function SwitchIcon({
+  position,
+  transition = { type: 'spring', bounce: 0 },
+  ...props
+}: SwitchIconProps) {
+  const { isChecked } = useSwitch();
+
+  const isAnimated = React.useMemo(() => {
+    if (position === 'right') return !isChecked;
+    if (position === 'left') return isChecked;
+    if (position === 'thumb') return true;
+    return false;
+  }, [position, isChecked]);
+
+  return (
+    <motion.div
+      data-slot={`switch-${position}-icon`}
+      animate={isAnimated ? { scale: 1, opacity: 1 } : { scale: 0, opacity: 0 }}
+      transition={transition}
+      {...props}
+    />
+  );
+}
+
+export {
+  Switch,
+  SwitchThumb,
+  SwitchIcon,
+  useSwitch,
+  type SwitchProps,
+  type SwitchThumbProps,
+  type SwitchIconProps,
+  type SwitchIconPosition,
+  type SwitchContextType,
+};
\ No newline at end of file
diff --git a/frontend/src/components/animate-ui/primitives/radix/tabs.tsx b/frontend/src/components/animate-ui/primitives/radix/tabs.tsx
new file mode 100644
index 00000000..35777a29
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/radix/tabs.tsx
@@ -0,0 +1,189 @@
+'use client';
+
+import * as React from 'react';
+import { Tabs as TabsPrimitive } from 'radix-ui';
+import {
+  motion,
+  AnimatePresence,
+  type HTMLMotionProps,
+  type Transition,
+} from 'motion/react';
+
+import {
+  Highlight,
+  HighlightItem,
+  type HighlightProps,
+  type HighlightItemProps,
+} from '@/components/animate-ui/primitives/effects/highlight';
+import { getStrictContext } from '@/lib/get-strict-context';
+import { useControlledState } from '@/hooks/use-controlled-state';
+import {
+  AutoHeight,
+  type AutoHeightProps,
+} from '@/components/animate-ui/primitives/effects/auto-height';
+
+type TabsContextType = {
+  value: string | undefined;
+  setValue: TabsProps['onValueChange'];
+};
+
+const [TabsProvider, useTabs] =
+  getStrictContext<TabsContextType>('TabsContext');
+
+type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>;
+
+function Tabs(props: TabsProps) {
+  const [value, setValue] = useControlledState({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: props.onValueChange,
+  });
+
+  return (
+    <TabsProvider value={{ value, setValue }}>
+      <TabsPrimitive.Root
+        data-slot="tabs"
+        {...props}
+        onValueChange={setValue}
+      />
+    </TabsProvider>
+  );
+}
+
+type TabsHighlightProps = Omit<HighlightProps, 'controlledItems' | 'value'>;
+
+function TabsHighlight({
+  transition = { type: 'spring', stiffness: 200, damping: 25 },
+  ...props
+}: TabsHighlightProps) {
+  const { value } = useTabs();
+
+  return (
+    <Highlight
+      data-slot="tabs-highlight"
+      controlledItems
+      value={value}
+      transition={transition}
+      click={false}
+      {...props}
+    />
+  );
+}
+
+type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;
+
+function TabsList(props: TabsListProps) {
+  return <TabsPrimitive.List data-slot="tabs-list" {...props} />;
+}
+
+type TabsHighlightItemProps = HighlightItemProps & {
+  value: string;
+};
+
+function TabsHighlightItem(props: TabsHighlightItemProps) {
+  return <HighlightItem data-slot="tabs-highlight-item" {...props} />;
+}
+
+type TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger>;
+
+function TabsTrigger(props: TabsTriggerProps) {
+  return <TabsPrimitive.Trigger data-slot="tabs-trigger" {...props} />;
+}
+
+type TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Content> &
+  HTMLMotionProps<'div'>;
+
+function TabsContent({
+  value,
+  forceMount,
+  transition = { duration: 0.5, ease: 'easeInOut' },
+  ...props
+}: TabsContentProps) {
+  return (
+    <AnimatePresence mode="wait">
+      <TabsPrimitive.Content asChild forceMount={forceMount} value={value}>
+        <motion.div
+          data-slot="tabs-content"
+          layout
+          layoutDependency={value}
+          initial={{ opacity: 0, filter: 'blur(4px)' }}
+          animate={{ opacity: 1, filter: 'blur(0px)' }}
+          exit={{ opacity: 0, filter: 'blur(4px)' }}
+          transition={transition}
+          {...props}
+        />
+      </TabsPrimitive.Content>
+    </AnimatePresence>
+  );
+}
+
+type TabsContentsAutoProps = AutoHeightProps & {
+  mode?: 'auto-height';
+  children: React.ReactNode;
+  transition?: Transition;
+};
+
+type TabsContentsLayoutProps = Omit<HTMLMotionProps<'div'>, 'transition'> & {
+  mode: 'layout';
+  children: React.ReactNode;
+  transition?: Transition;
+};
+
+type TabsContentsProps = TabsContentsAutoProps | TabsContentsLayoutProps;
+
+const defaultTransition: Transition = {
+  type: 'spring',
+  stiffness: 200,
+  damping: 30,
+};
+
+function isAutoMode(props: TabsContentsProps): props is TabsContentsAutoProps {
+  return !('mode' in props) || props.mode === 'auto-height';
+}
+
+function TabsContents(props: TabsContentsProps) {
+  const { value } = useTabs();
+
+  if (isAutoMode(props)) {
+    const { transition = defaultTransition, ...autoProps } = props;
+
+    return (
+      <AutoHeight
+        data-slot="tabs-contents"
+        deps={[value]}
+        transition={transition}
+        {...autoProps}
+      />
+    );
+  }
+
+  const { transition = defaultTransition, style, ...layoutProps } = props;
+
+  return (
+    <motion.div
+      data-slot="tabs-contents"
+      layout="size"
+      layoutDependency={value}
+      style={{ overflow: 'hidden', ...style }}
+      transition={{ layout: transition }}
+      {...layoutProps}
+    />
+  );
+}
+
+export {
+  Tabs,
+  TabsHighlight,
+  TabsHighlightItem,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  TabsContents,
+  type TabsProps,
+  type TabsHighlightProps,
+  type TabsHighlightItemProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentProps,
+  type TabsContentsProps,
+};
diff --git a/frontend/src/components/animate-ui/primitives/radix/tooltip.tsx b/frontend/src/components/animate-ui/primitives/radix/tooltip.tsx
new file mode 100644
index 00000000..39e21586
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/radix/tooltip.tsx
@@ -0,0 +1,221 @@
+/* eslint-disable */
+'use client';
+
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import {
+  AnimatePresence,
+  motion,
+  useMotionValue,
+  useSpring,
+  type SpringOptions,
+  type HTMLMotionProps,
+  type MotionValue,
+} from 'motion/react';
+
+import { getStrictContext } from '@/lib/get-strict-context';
+import { useControlledState } from '@/hooks/use-controlled-state';
+
+type TooltipContextType = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  x: MotionValue<number>;
+  y: MotionValue<number>;
+  followCursor?: boolean | 'x' | 'y';
+  followCursorSpringOptions?: SpringOptions;
+};
+
+const [LocalTooltipProvider, useTooltip] =
+  getStrictContext<TooltipContextType>('TooltipContext');
+
+type TooltipProviderProps = React.ComponentProps<
+  typeof TooltipPrimitive.Provider
+>;
+
+function TooltipProvider(props: TooltipProviderProps) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" {...props} />;
+}
+
+type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> & {
+  followCursor?: boolean | 'x' | 'y';
+  followCursorSpringOptions?: SpringOptions;
+};
+
+function Tooltip({
+  followCursor = false,
+  followCursorSpringOptions = { stiffness: 200, damping: 17 },
+  ...props
+}: TooltipProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  return (
+    <LocalTooltipProvider
+      value={{
+        isOpen,
+        setIsOpen,
+        x,
+        y,
+        followCursor,
+        followCursorSpringOptions,
+      }}
+    >
+      <TooltipPrimitive.Root
+        data-slot="tooltip"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </LocalTooltipProvider>
+  );
+}
+
+type TooltipTriggerProps = React.ComponentProps<
+  typeof TooltipPrimitive.Trigger
+>;
+
+function TooltipTrigger({ onMouseMove, ...props }: TooltipTriggerProps) {
+  const { x, y, followCursor } = useTooltip();
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onMouseMove?.(event);
+
+    const target = event.currentTarget.getBoundingClientRect();
+
+    if (followCursor === 'x' || followCursor === true) {
+      const eventOffsetX = event.clientX - target.left;
+      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;
+      x.set(offsetXFromCenter);
+    }
+
+    if (followCursor === 'y' || followCursor === true) {
+      const eventOffsetY = event.clientY - target.top;
+      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;
+      y.set(offsetYFromCenter);
+    }
+  };
+
+  return (
+    <TooltipPrimitive.Trigger
+      data-slot="tooltip-trigger"
+      onMouseMove={handleMouseMove}
+      {...props}
+    />
+  );
+}
+
+type TooltipPortalProps = Omit<
+  React.ComponentProps<typeof TooltipPrimitive.Portal>,
+  'forceMount'
+>;
+
+function TooltipPortal(props: TooltipPortalProps) {
+  const { isOpen } = useTooltip();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <TooltipPrimitive.Portal
+          forceMount
+          data-slot="tooltip-portal"
+          {...props}
+        />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type TooltipContentProps = Omit<
+  React.ComponentProps<typeof TooltipPrimitive.Content>,
+  'forceMount' | 'asChild'
+> &
+  HTMLMotionProps<'div'>;
+
+function TooltipContent({
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  avoidCollisions,
+  collisionBoundary,
+  collisionPadding,
+  arrowPadding,
+  sticky,
+  hideWhenDetached,
+  style,
+  transition = { type: 'spring', stiffness: 300, damping: 25 },
+  ...props
+}: TooltipContentProps) {
+  const { x, y, followCursor, followCursorSpringOptions } = useTooltip();
+  const translateX = useSpring(x, followCursorSpringOptions);
+  const translateY = useSpring(y, followCursorSpringOptions);
+
+  return (
+    <TooltipPrimitive.Content
+      asChild
+      forceMount
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      avoidCollisions={avoidCollisions}
+      collisionBoundary={collisionBoundary}
+      collisionPadding={collisionPadding}
+      arrowPadding={arrowPadding}
+      sticky={sticky}
+      hideWhenDetached={hideWhenDetached}
+      onEscapeKeyDown={onEscapeKeyDown}
+      onPointerDownOutside={onPointerDownOutside}
+    >
+      <motion.div
+        key="popover-content"
+        data-slot="popover-content"
+        initial={{ opacity: 0, scale: 0.5 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0.5 }}
+        transition={transition}
+        style={{
+          x:
+            followCursor === 'x' || followCursor === true
+              ? translateX
+              : undefined,
+          y:
+            followCursor === 'y' || followCursor === true
+              ? translateY
+              : undefined,
+          ...style,
+        }}
+        {...props}
+      />
+    </TooltipPrimitive.Content>
+  );
+}
+
+type TooltipArrowProps = React.ComponentProps<typeof TooltipPrimitive.Arrow>;
+
+function TooltipArrow(props: TooltipArrowProps) {
+  return <TooltipPrimitive.Arrow data-slot="tooltip-arrow" {...props} />;
+}
+
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipPortal,
+  TooltipContent,
+  TooltipArrow,
+  useTooltip,
+  type TooltipProviderProps,
+  type TooltipProps,
+  type TooltipTriggerProps,
+  type TooltipPortalProps,
+  type TooltipContentProps,
+  type TooltipArrowProps,
+  type TooltipContextType,
+};
\ No newline at end of file
diff --git a/frontend/src/components/animate-ui/primitives/texts/counting-number.tsx b/frontend/src/components/animate-ui/primitives/texts/counting-number.tsx
new file mode 100644
index 00000000..756b626b
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/texts/counting-number.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import * as React from 'react';
+import { useMotionValue, useSpring, type SpringOptions } from 'motion/react';
+
+import {
+  useIsInView,
+  type UseIsInViewOptions,
+} from '@/hooks/use-is-in-view';
+
+type CountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
+  number: number;
+  fromNumber?: number;
+  padStart?: boolean;
+  decimalSeparator?: string;
+  decimalPlaces?: number;
+  transition?: SpringOptions;
+  delay?: number;
+  initiallyStable?: boolean;
+} & UseIsInViewOptions;
+
+function CountingNumber({
+  ref,
+  number,
+  fromNumber = 0,
+  padStart = false,
+  inView = false,
+  inViewMargin = '0px',
+  inViewOnce = true,
+  decimalSeparator = '.',
+  transition = { stiffness: 90, damping: 50 },
+  decimalPlaces = 0,
+  delay = 0,
+  initiallyStable = false,
+  ...props
+}: CountingNumberProps) {
+  const { ref: localRef, isInView } = useIsInView(
+    ref as React.Ref<HTMLElement>,
+    {
+      inView,
+      inViewOnce,
+      inViewMargin,
+    },
+  );
+
+  const numberStr = number.toString();
+  const decimals =
+    typeof decimalPlaces === 'number'
+      ? decimalPlaces
+      : numberStr.includes('.')
+        ? (numberStr.split('.')[1]?.length ?? 0)
+        : 0;
+
+  const motionVal = useMotionValue(initiallyStable ? number : fromNumber);
+  const springVal = useSpring(motionVal, transition);
+
+  React.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (isInView) motionVal.set(number);
+    }, delay);
+
+    return () => clearTimeout(timeoutId);
+  }, [isInView, number, motionVal, delay]);
+
+  React.useEffect(() => {
+    const unsubscribe = springVal.on('change', (latest) => {
+      if (localRef.current) {
+        let formatted =
+          decimals > 0
+            ? latest.toFixed(decimals)
+            : Math.round(latest).toString();
+
+        if (decimals > 0) {
+          formatted = formatted.replace('.', decimalSeparator);
+        }
+
+        if (padStart) {
+          const finalIntLength = Math.floor(Math.abs(number)).toString().length;
+          const [intPart, fracPart] = formatted.split(decimalSeparator);
+          const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';
+          formatted = fracPart
+            ? `${paddedInt}${decimalSeparator}${fracPart}`
+            : paddedInt;
+        }
+
+        localRef.current.textContent = formatted;
+      }
+    });
+    return () => unsubscribe();
+  }, [springVal, decimals, padStart, number, decimalSeparator, localRef]);
+
+  const finalIntLength = Math.floor(Math.abs(number)).toString().length;
+
+  const formatValue = (val: number) => {
+    let out = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toString();
+    if (decimals > 0) out = out.replace('.', decimalSeparator);
+    if (padStart) {
+      const [intPart, fracPart] = out.split(decimalSeparator);
+      const paddedInt = (intPart ?? '').padStart(finalIntLength, '0');
+      out = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
+    }
+    return out;
+  };
+
+  const zeroText = padStart
+    ? '0'.padStart(finalIntLength, '0') +
+      (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')
+    : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');
+
+  const initialText = initiallyStable ? formatValue(number) : zeroText;
+
+  return (
+    <span ref={localRef} data-slot="counting-number" {...props}>
+      {initialText}
+    </span>
+  );
+}
+
+export { CountingNumber, type CountingNumberProps };
diff --git a/frontend/src/components/animate-ui/primitives/texts/sliding-number.tsx b/frontend/src/components/animate-ui/primitives/texts/sliding-number.tsx
new file mode 100644
index 00000000..b4750d2f
--- /dev/null
+++ b/frontend/src/components/animate-ui/primitives/texts/sliding-number.tsx
@@ -0,0 +1,354 @@
+/* eslint-disable */
+'use client';
+
+import * as React from 'react';
+import {
+  useSpring,
+  useTransform,
+  motion,
+  useMotionValue,
+  type MotionValue,
+  type SpringOptions,
+  type HTMLMotionProps,
+} from 'motion/react';
+import useMeasure from 'react-use-measure';
+
+import {
+  useIsInView,
+  type UseIsInViewOptions,
+} from '@/hooks/use-is-in-view';
+
+type SlidingNumberRollerProps = {
+  prevValue: number;
+  value: number;
+  place: number;
+  transition: SpringOptions;
+  delay?: number;
+};
+
+function SlidingNumberRoller({
+  prevValue,
+  value,
+  place,
+  transition,
+  delay = 0,
+}: SlidingNumberRollerProps) {
+  const startNumber = Math.floor(prevValue / place) % 10;
+  const targetNumber = Math.floor(value / place) % 10;
+  const animatedValue = useSpring(startNumber, transition);
+
+  React.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      animatedValue.set(targetNumber);
+    }, delay);
+    return () => clearTimeout(timeoutId);
+  }, [targetNumber, animatedValue, delay]);
+
+  const [measureRef, { height }] = useMeasure();
+
+  return (
+    <span
+      ref={measureRef}
+      data-slot="sliding-number-roller"
+      style={{
+        position: 'relative',
+        display: 'inline-block',
+        width: '1ch',
+        overflowX: 'visible',
+        overflowY: 'clip',
+        lineHeight: 1,
+        fontVariantNumeric: 'tabular-nums',
+      }}
+    >
+      <span style={{ visibility: 'hidden' }}>0</span>
+      {Array.from({ length: 10 }, (_, i) => (
+        <SlidingNumberDisplay
+          key={i}
+          motionValue={animatedValue}
+          number={i}
+          height={height}
+          transition={transition}
+        />
+      ))}
+    </span>
+  );
+}
+
+type SlidingNumberDisplayProps = {
+  motionValue: MotionValue<number>;
+  number: number;
+  height: number;
+  transition: SpringOptions;
+};
+
+function SlidingNumberDisplay({
+  motionValue,
+  number,
+  height,
+  transition,
+}: SlidingNumberDisplayProps) {
+  const y = useTransform(motionValue, (latest) => {
+    if (!height) return 0;
+    const currentNumber = latest % 10;
+    const offset = (10 + number - currentNumber) % 10;
+    let translateY = offset * height;
+    if (offset > 5) translateY -= 10 * height;
+    return translateY;
+  });
+
+  if (!height) {
+    return (
+      <span style={{ visibility: 'hidden', position: 'absolute' }}>
+        {number}
+      </span>
+    );
+  }
+
+  return (
+    <motion.span
+      data-slot="sliding-number-display"
+      style={{
+        y,
+        position: 'absolute',
+        inset: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      transition={{ ...transition, type: 'spring' }}
+    >
+      {number}
+    </motion.span>
+  );
+}
+
+type SlidingNumberProps = Omit<HTMLMotionProps<'span'>, 'children'> & {
+  number: number;
+  fromNumber?: number;
+  onNumberChange?: (number: number) => void;
+  padStart?: boolean;
+  decimalSeparator?: string;
+  decimalPlaces?: number;
+  thousandSeparator?: string;
+  transition?: SpringOptions;
+  delay?: number;
+  initiallyStable?: boolean;
+} & UseIsInViewOptions;
+
+function SlidingNumber({
+  ref,
+  number,
+  fromNumber,
+  onNumberChange,
+  inView = false,
+  inViewMargin = '0px',
+  inViewOnce = true,
+  padStart = false,
+  decimalSeparator = '.',
+  decimalPlaces = 0,
+  thousandSeparator,
+  transition = { stiffness: 200, damping: 20, mass: 0.4 },
+  delay = 0,
+  initiallyStable = false,
+  ...props
+}: SlidingNumberProps) {
+  const { ref: localRef, isInView } = useIsInView(
+    ref as React.Ref<HTMLElement>,
+    {
+      inView,
+      inViewOnce,
+      inViewMargin,
+    },
+  );
+
+  const initialNumeric = Math.abs(Number(number));
+  const prevNumberRef = React.useRef<number>(
+    initiallyStable ? initialNumeric : 0,
+  );
+
+  const hasAnimated = fromNumber !== undefined;
+
+  const motionVal = useMotionValue(
+    initiallyStable ? initialNumeric : (fromNumber ?? 0),
+  );
+  const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 });
+
+  const skippedInitialWhenStable = React.useRef(false);
+
+  React.useEffect(() => {
+    if (!hasAnimated) return;
+    if (initiallyStable && !skippedInitialWhenStable.current) {
+      skippedInitialWhenStable.current = true;
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      if (isInView) motionVal.set(number);
+    }, delay);
+    return () => clearTimeout(timeoutId);
+  }, [hasAnimated, initiallyStable, isInView, number, motionVal, delay]);
+
+  const [effectiveNumber, setEffectiveNumber] = React.useState<number>(
+    initiallyStable ? initialNumeric : 0,
+  );
+
+  React.useEffect(() => {
+    if (hasAnimated) {
+      const inferredDecimals =
+        typeof decimalPlaces === 'number' && decimalPlaces >= 0
+          ? decimalPlaces
+          : (() => {
+              const s = String(number);
+              const idx = s.indexOf('.');
+              return idx >= 0 ? s.length - idx - 1 : 0;
+            })();
+
+      const factor = Math.pow(10, inferredDecimals);
+
+      const unsubscribe = springVal.on('change', (latest: number) => {
+        const newValue =
+          inferredDecimals > 0
+            ? Math.round(latest * factor) / factor
+            : Math.round(latest);
+
+        if (effectiveNumber !== newValue) {
+          setEffectiveNumber(newValue);
+          onNumberChange?.(newValue);
+        }
+      });
+      return () => unsubscribe();
+    } else {
+      setEffectiveNumber(
+        initiallyStable ? initialNumeric : !isInView ? 0 : initialNumeric,
+      );
+    }
+  }, [
+    hasAnimated,
+    springVal,
+    isInView,
+    number,
+    decimalPlaces,
+    onNumberChange,
+    effectiveNumber,
+    initiallyStable,
+    initialNumeric,
+  ]);
+
+  const formatNumber = React.useCallback(
+    (num: number) =>
+      decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),
+    [decimalPlaces],
+  );
+
+  const numberStr = formatNumber(effectiveNumber);
+  const [newIntStrRaw, newDecStrRaw = ''] = numberStr.split('.');
+
+  const finalIntLength = padStart
+    ? Math.max(
+        Math.floor(Math.abs(number)).toString().length,
+        newIntStrRaw.length,
+      )
+    : newIntStrRaw.length;
+
+  const newIntStr = padStart
+    ? newIntStrRaw.padStart(finalIntLength, '0')
+    : newIntStrRaw;
+
+  const prevFormatted = formatNumber(prevNumberRef.current);
+  const [prevIntStrRaw = '', prevDecStrRaw = ''] = prevFormatted.split('.');
+  const prevIntStr = padStart
+    ? prevIntStrRaw.padStart(finalIntLength, '0')
+    : prevIntStrRaw;
+
+  const adjustedPrevInt = React.useMemo(() => {
+    return prevIntStr.length > finalIntLength
+      ? prevIntStr.slice(-finalIntLength)
+      : prevIntStr.padStart(finalIntLength, '0');
+  }, [prevIntStr, finalIntLength]);
+
+  const adjustedPrevDec = React.useMemo(() => {
+    if (!newDecStrRaw) return '';
+    return prevDecStrRaw.length > newDecStrRaw.length
+      ? prevDecStrRaw.slice(0, newDecStrRaw.length)
+      : prevDecStrRaw.padEnd(newDecStrRaw.length, '0');
+  }, [prevDecStrRaw, newDecStrRaw]);
+
+  React.useEffect(() => {
+    if (isInView || initiallyStable) {
+      prevNumberRef.current = effectiveNumber;
+    }
+  }, [effectiveNumber, isInView, initiallyStable]);
+
+  const intPlaces = React.useMemo(
+    () =>
+      Array.from({ length: finalIntLength }, (_, i) =>
+        Math.pow(10, finalIntLength - i - 1),
+      ),
+    [finalIntLength],
+  );
+  const decPlaces = React.useMemo(
+    () =>
+      newDecStrRaw
+        ? Array.from({ length: newDecStrRaw.length }, (_, i) =>
+            Math.pow(10, newDecStrRaw.length - i - 1),
+          )
+        : [],
+    [newDecStrRaw],
+  );
+
+  const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;
+  const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;
+
+  return (
+    <motion.span
+      ref={localRef}
+      data-slot="sliding-number"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+      }}
+      {...props}
+    >
+      {isInView && Number(number) < 0 && (
+        <span style={{ marginRight: '0.25rem' }}>-</span>
+      )}
+
+      {intPlaces.map((place, idx) => {
+        const digitsToRight = intPlaces.length - idx - 1;
+        const isSeparatorPosition =
+          typeof thousandSeparator !== 'undefined' &&
+          digitsToRight > 0 &&
+          digitsToRight % 3 === 0;
+
+        return (
+          <React.Fragment key={`int-${place}`}>
+            <SlidingNumberRoller
+              prevValue={parseInt(adjustedPrevInt, 10)}
+              value={parseInt(newIntStr ?? '0', 10)}
+              place={place}
+              transition={transition}
+            />
+            {isSeparatorPosition && <span>{thousandSeparator}</span>}
+          </React.Fragment>
+        );
+      })}
+
+      {newDecStrRaw && (
+        <>
+          <span>{decimalSeparator}</span>
+          {decPlaces.map((place) => (
+            <SlidingNumberRoller
+              key={`dec-${place}`}
+              prevValue={prevDecValue}
+              value={newDecValue}
+              place={place}
+              transition={transition}
+              delay={delay}
+            />
+          ))}
+        </>
+      )}
+    </motion.span>
+  );
+}
+
+export { SlidingNumber, type SlidingNumberProps };
\ No newline at end of file
diff --git a/frontend/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
index fa2b4429..3a4ef9e8 100644
--- a/frontend/src/components/ui/alert-dialog.tsx
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -1,14 +1,12 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
 
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -16,60 +14,57 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
     ref={ref}
   />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
         className
       )}
       {...props}
-    />
+    >
+      {children}
+    </AlertDialogPrimitive.Content>
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn('flex flex-col space-y-2 text-center sm:text-left', className)}
     {...props}
   />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
 
 const AlertDialogFooter = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
     {...props}
   />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -77,11 +72,11 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold", className)}
+    className={cn('text-lg font-semibold', className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -89,12 +84,11 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -105,8 +99,8 @@ const AlertDialogAction = React.forwardRef<
     className={cn(buttonVariants(), className)}
     {...props}
   />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -114,15 +108,11 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
+    className={cn(buttonVariants({ variant: 'outline' }), className)}
     {...props}
   />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -136,4 +126,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
index e87d62bf..644e9dd5 100644
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -33,4 +33,5 @@ function Badge({ className, variant, ...props }: BadgeProps) {
   )
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export { Badge, badgeVariants }
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 65d4fcd9..d8f7202c 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -54,4 +54,5 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
+// eslint-disable-next-line react-refresh/only-export-components
 export { Button, buttonVariants }
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 1647513e..ad2ca8e1 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -1,112 +1,66 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
-import { cn } from "@/lib/utils"
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+import {
+  Dialog,
+  DialogPortal,
+  DialogOverlay as AnimateDialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent as AnimateDialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/animate-ui/primitives/radix/dialog';
 
+// Drop-in DialogContent that bundles portal + overlay + close button
+// while delegating animation to animate-ui's spring-based dialog
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  HTMLDivElement,
+  React.ComponentProps<typeof AnimateDialogContent>
 >(({ className, children, ...props }, ref) => (
   <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
+    <AnimateDialogOverlay className="fixed inset-0 z-50 bg-black/80" />
+    <AnimateDialogContent
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
+      </DialogClose>
+    </AnimateDialogContent>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = 'DialogContent';
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogOverlay = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof AnimateDialogOverlay>
+>((props, ref) => (
+  <AnimateDialogOverlay ref={ref} {...props} />
+));
+DialogOverlay.displayName = 'DialogOverlay';
+
+// Override DialogFooter to add proper spacing (animate-ui's version has no classes)
+const DialogFooter = ({ className, ...props }: React.ComponentProps<'div'>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
       className
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+);
+DialogFooter.displayName = 'DialogFooter';
 
 export {
   Dialog,
@@ -119,4 +73,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
index 5f4117f0..c07979e7 100644
--- a/frontend/src/components/ui/switch.tsx
+++ b/frontend/src/components/ui/switch.tsx
@@ -1,29 +1,33 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from 'react';
+import { cn } from '@/lib/utils';
 
-import { cn } from "@/lib/utils"
+import {
+  Switch as AnimateSwitch,
+  SwitchThumb,
+  type SwitchProps as AnimateSwitchProps,
+} from '@/components/animate-ui/primitives/radix/switch';
 
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
+type SwitchProps = Omit<AnimateSwitchProps, 'children'>;
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ className, ...props }, ref) => (
+    <AnimateSwitch
+      ref={ref}
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        className
       )}
-    />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+      {...props}
+    >
+      <SwitchThumb
+        className="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        pressedAnimation={{ scale: 1.15 }}
+      />
+    </AnimateSwitch>
+  )
+);
+Switch.displayName = 'Switch';
 
-export { Switch }
+export { Switch };
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index 85d83bea..35172ed6 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -1,53 +1,61 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from 'react';
+import { Tabs as RadixTabs } from 'radix-ui';
+import { cn } from '@/lib/utils';
 
-import { cn } from "@/lib/utils"
-
-const Tabs = TabsPrimitive.Root
+import {
+  Tabs,
+  TabsHighlight,
+  TabsHighlightItem,
+  TabsList as AnimateTabsList,
+  TabsTrigger as AnimateTabsTrigger,
+} from '@/components/animate-ui/primitives/radix/tabs';
 
 const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+  HTMLDivElement,
+  React.ComponentProps<typeof AnimateTabsList>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
+  <AnimateTabsList
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
       className
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = 'TabsList';
 
 const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+  HTMLButtonElement,
+  React.ComponentProps<typeof AnimateTabsTrigger>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
+  <AnimateTabsTrigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
       className
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = 'TabsTrigger';
 
+// Custom TabsContent: uses Radix directly (no Framer Motion `layout` prop)
+// to prevent unintended height expansion when switching tabs.
 const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+  HTMLDivElement,
+  React.ComponentProps<typeof RadixTabs.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
+  <RadixTabs.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:duration-200',
       className
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = 'TabsContent';
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsHighlight, TabsHighlightItem };
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
index 99ad6306..5efb0645 100644
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -1,30 +1,36 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+'use client';
 
-import { cn } from "@/lib/utils"
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '@/lib/utils';
 
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
+// Use Radix primitives directly to avoid animate-ui context dependencies
+// that can cause crashes in certain component tree configurations.
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+  HTMLDivElement,
+  React.ComponentProps<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground',
+        'origin-[--radix-tooltip-content-transform-origin]',
+        'animate-in fade-in-0 zoom-in-95 duration-150',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
     />
   </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = 'TooltipContent';
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index 55b308ea..81691514 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -108,6 +108,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   );
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export function useAuth() {
   const context = useContext(AuthContext);
   if (context === undefined) {
diff --git a/frontend/src/context/NodeContext.tsx b/frontend/src/context/NodeContext.tsx
index 2d368ca4..1a297861 100644
--- a/frontend/src/context/NodeContext.tsx
+++ b/frontend/src/context/NodeContext.tsx
@@ -98,6 +98,7 @@ export function NodeProvider({ children }: { children: React.ReactNode }) {
   );
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export function useNodes() {
   const context = useContext(NodeContext);
   if (!context) {
diff --git a/frontend/src/hooks/use-auto-height.tsx b/frontend/src/hooks/use-auto-height.tsx
new file mode 100644
index 00000000..1d7a1a08
--- /dev/null
+++ b/frontend/src/hooks/use-auto-height.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import * as React from 'react';
+
+type AutoHeightOptions = {
+  includeParentBox?: boolean;
+  includeSelfBox?: boolean;
+};
+
+export function useAutoHeight<T extends HTMLElement = HTMLDivElement>(
+  deps: React.DependencyList = [],
+  options: AutoHeightOptions = {
+    includeParentBox: true,
+    includeSelfBox: false,
+  },
+) {
+  const ref = React.useRef<T | null>(null);
+  const roRef = React.useRef<ResizeObserver | null>(null);
+  const [height, setHeight] = React.useState(0);
+
+  const measure = React.useCallback(() => {
+    const el = ref.current;
+    if (!el) return 0;
+
+    const base = el.getBoundingClientRect().height || 0;
+
+    let extra = 0;
+
+    if (options.includeParentBox && el.parentElement) {
+      const cs = getComputedStyle(el.parentElement);
+      const paddingY =
+        (parseFloat(cs.paddingTop || '0') || 0) +
+        (parseFloat(cs.paddingBottom || '0') || 0);
+      const borderY =
+        (parseFloat(cs.borderTopWidth || '0') || 0) +
+        (parseFloat(cs.borderBottomWidth || '0') || 0);
+      const isBorderBox = cs.boxSizing === 'border-box';
+      if (isBorderBox) {
+        extra += paddingY + borderY;
+      }
+    }
+
+    if (options.includeSelfBox) {
+      const cs = getComputedStyle(el);
+      const paddingY =
+        (parseFloat(cs.paddingTop || '0') || 0) +
+        (parseFloat(cs.paddingBottom || '0') || 0);
+      const borderY =
+        (parseFloat(cs.borderTopWidth || '0') || 0) +
+        (parseFloat(cs.borderBottomWidth || '0') || 0);
+      const isBorderBox = cs.boxSizing === 'border-box';
+      if (isBorderBox) {
+        extra += paddingY + borderY;
+      }
+    }
+
+    const dpr =
+      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+    const total = Math.ceil((base + extra) * dpr) / dpr;
+
+    return total;
+  }, [options.includeParentBox, options.includeSelfBox]);
+
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    setHeight(measure());
+
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+
+    const ro = new ResizeObserver(() => {
+      const next = measure();
+      requestAnimationFrame(() => setHeight(next));
+    });
+
+    ro.observe(el);
+    if (options.includeParentBox && el.parentElement) {
+      ro.observe(el.parentElement);
+    }
+
+    roRef.current = ro;
+
+    return () => {
+      ro.disconnect();
+      roRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  React.useLayoutEffect(() => {
+    if (height === 0) {
+      const next = measure();
+      if (next !== 0) setHeight(next);
+    }
+  }, [height, measure]);
+
+  return { ref, height } as const;
+}
diff --git a/frontend/src/hooks/use-controlled-state.tsx b/frontend/src/hooks/use-controlled-state.tsx
new file mode 100644
index 00000000..f806fadd
--- /dev/null
+++ b/frontend/src/hooks/use-controlled-state.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+interface CommonControlledStateProps<T> {
+  value?: T;
+  defaultValue?: T;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useControlledState<T, Rest extends any[] = []>(
+  props: CommonControlledStateProps<T> & {
+    onChange?: (value: T, ...args: Rest) => void;
+  },
+): readonly [T, (next: T, ...args: Rest) => void] {
+  const { value, defaultValue, onChange } = props;
+
+  const [state, setInternalState] = React.useState<T>(
+    value !== undefined ? value : (defaultValue as T),
+  );
+
+  React.useEffect(() => {
+    if (value !== undefined) setInternalState(value);
+  }, [value]);
+
+  const setState = React.useCallback(
+    (next: T, ...args: Rest) => {
+      setInternalState(next);
+      onChange?.(next, ...args);
+    },
+    [onChange],
+  );
+
+  return [state, setState] as const;
+}
diff --git a/frontend/src/hooks/use-data-state.tsx b/frontend/src/hooks/use-data-state.tsx
new file mode 100644
index 00000000..59decef4
--- /dev/null
+++ b/frontend/src/hooks/use-data-state.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+
+type DataStateValue = string | boolean | null;
+
+function parseDatasetValue(value: string | null): DataStateValue {
+  if (value === null) return null;
+  if (value === '' || value === 'true') return true;
+  if (value === 'false') return false;
+  return value;
+}
+
+function useDataState<T extends HTMLElement = HTMLElement>(
+  key: string,
+  forwardedRef?: React.Ref<T | null>,
+  onChange?: (value: DataStateValue) => void,
+): [DataStateValue, React.RefObject<T | null>] {
+  const localRef = React.useRef<T | null>(null);
+  React.useImperativeHandle(forwardedRef, () => localRef.current as T);
+
+  const getSnapshot = (): DataStateValue => {
+    const el = localRef.current;
+    return el ? parseDatasetValue(el.getAttribute(`data-${key}`)) : null;
+  };
+
+  const subscribe = (callback: () => void) => {
+    const el = localRef.current;
+    if (!el) return () => {};
+    const observer = new MutationObserver((records) => {
+      for (const record of records) {
+        if (record.attributeName === `data-${key}`) {
+          callback();
+          break;
+        }
+      }
+    });
+    observer.observe(el, {
+      attributes: true,
+      attributeFilter: [`data-${key}`],
+    });
+    return () => observer.disconnect();
+  };
+
+  const value = React.useSyncExternalStore(subscribe, getSnapshot);
+
+  React.useEffect(() => {
+    if (onChange) onChange(value);
+  }, [value, onChange]);
+
+  return [value, localRef];
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { useDataState, type DataStateValue };
diff --git a/frontend/src/hooks/use-is-in-view.tsx b/frontend/src/hooks/use-is-in-view.tsx
new file mode 100644
index 00000000..0648e4e5
--- /dev/null
+++ b/frontend/src/hooks/use-is-in-view.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useInView, type UseInViewOptions } from 'motion/react';
+
+interface UseIsInViewOptions {
+  inView?: boolean;
+  inViewOnce?: boolean;
+  inViewMargin?: UseInViewOptions['margin'];
+}
+
+function useIsInView<T extends HTMLElement = HTMLElement>(
+  ref: React.Ref<T>,
+  options: UseIsInViewOptions = {},
+) {
+  const { inView, inViewOnce = false, inViewMargin = '0px' } = options;
+  const localRef = React.useRef<T>(null);
+  React.useImperativeHandle(ref, () => localRef.current as T);
+  const inViewResult = useInView(localRef, {
+    once: inViewOnce,
+    margin: inViewMargin,
+  });
+  const isInView = !inView || inViewResult;
+  return { ref: localRef, isInView };
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { useIsInView, type UseIsInViewOptions };
diff --git a/frontend/src/index.css b/frontend/src/index.css
index cca26db8..f1058178 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,6 +4,9 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* ─────────────────────────────────────────────────────────────
+   LIGHT THEME
+───────────────────────────────────────────────────────────── */
 :root {
   --background: oklch(1 0 0);
   --foreground: oklch(0 0 0);
@@ -23,12 +26,21 @@
   --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.9200 0 0);
   --input: oklch(0.9400 0 0);
-  --ring: oklch(0 0 0);
+  --ring: oklch(0.50 0.14 200);
+
+  /* Brand — technical cyan, the signature accent */
+  --brand: oklch(0.50 0.14 200);
+  --brand-foreground: oklch(1 0 0);
+  --brand-muted: oklch(0.50 0.14 200 / 0.12);
+
+  /* Charts */
   --chart-1: oklch(0.8100 0.1700 75.3500);
   --chart-2: oklch(0.5500 0.2200 264.5300);
   --chart-3: oklch(0.7200 0 0);
   --chart-4: oklch(0.9200 0 0);
   --chart-5: oklch(0.5600 0 0);
+
+  /* Sidebar */
   --sidebar: oklch(0.9900 0 0);
   --sidebar-foreground: oklch(0 0 0);
   --sidebar-primary: oklch(0 0 0);
@@ -36,11 +48,17 @@
   --sidebar-accent: oklch(0.9400 0 0);
   --sidebar-accent-foreground: oklch(0 0 0);
   --sidebar-border: oklch(0.9400 0 0);
-  --sidebar-ring: oklch(0 0 0);
-  --font-sans: Geist, sans-serif;
+  --sidebar-ring: oklch(0.50 0.14 200);
+
+  /* Typography */
+  --font-sans: 'Geist', sans-serif;
   --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
+  --font-mono: 'Geist Mono', monospace;
+
+  /* Shape */
   --radius: 0.5rem;
+
+  /* Shadows */
   --shadow-x: 0px;
   --shadow-y: 1px;
   --shadow-blur: 2px;
@@ -55,14 +73,26 @@
   --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
   --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
   --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
+
+  /* Motion timing */
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --duration-fast: 150ms;
+  --duration-base: 220ms;
+  --duration-slow: 350ms;
+
   --tracking-normal: 0em;
   --spacing: 0.25rem;
 }
 
+/* ─────────────────────────────────────────────────────────────
+   DARK THEME
+───────────────────────────────────────────────────────────── */
 .dark {
   --background: oklch(0.1400 0 0);
   --foreground: oklch(1 0 0);
-  --card: oklch(0.1400 0 0);
+  --card: oklch(0.1600 0 0);
   --card-foreground: oklch(1 0 0);
   --popover: oklch(0.1800 0 0);
   --popover-foreground: oklch(1 0 0);
@@ -78,12 +108,21 @@
   --destructive-foreground: oklch(0 0 0);
   --border: oklch(0.2600 0 0);
   --input: oklch(0.3200 0 0);
-  --ring: oklch(0.7200 0 0);
+  --ring: oklch(0.72 0.14 200);
+
+  /* Brand — bright technical cyan on dark backgrounds */
+  --brand: oklch(0.72 0.14 200);
+  --brand-foreground: oklch(0.05 0 0);
+  --brand-muted: oklch(0.72 0.14 200 / 0.12);
+
+  /* Charts */
   --chart-1: oklch(0.8100 0.1700 75.3500);
   --chart-2: oklch(0.5800 0.2100 260.8400);
   --chart-3: oklch(0.5600 0 0);
   --chart-4: oklch(0.4400 0 0);
   --chart-5: oklch(0.9200 0 0);
+
+  /* Sidebar */
   --sidebar: oklch(0.1800 0 0);
   --sidebar-foreground: oklch(1 0 0);
   --sidebar-primary: oklch(1 0 0);
@@ -91,27 +130,36 @@
   --sidebar-accent: oklch(0.3200 0 0);
   --sidebar-accent-foreground: oklch(1 0 0);
   --sidebar-border: oklch(0.3200 0 0);
-  --sidebar-ring: oklch(0.7200 0 0);
-  --font-sans: Geist, sans-serif;
+  --sidebar-ring: oklch(0.72 0.14 200);
+
+  /* Typography */
+  --font-sans: 'Geist', sans-serif;
   --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
+  --font-mono: 'Geist Mono', monospace;
+
+  /* Shape */
   --radius: 0.5rem;
+
+  /* Shadows — deeper on dark backgrounds */
   --shadow-x: 0px;
   --shadow-y: 1px;
   --shadow-blur: 2px;
   --shadow-spread: 0px;
-  --shadow-opacity: 0.18;
+  --shadow-opacity: 0.35;
   --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
+  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.18);
+  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.18);
+  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.35), 0px 1px 2px -1px hsl(0 0% 0% / 0.35);
+  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.35), 0px 1px 2px -1px hsl(0 0% 0% / 0.35);
+  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.35), 0px 2px 4px -1px hsl(0 0% 0% / 0.35);
+  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.35), 0px 4px 6px -1px hsl(0 0% 0% / 0.35);
+  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.35), 0px 8px 10px -1px hsl(0 0% 0% / 0.35);
+  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.65);
 }
 
+/* ─────────────────────────────────────────────────────────────
+   TAILWIND THEME MAPPING
+───────────────────────────────────────────────────────────── */
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -132,6 +180,9 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-brand-muted: var(--brand-muted);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -165,6 +216,9 @@
   --shadow-2xl: var(--shadow-2xl);
 }
 
+/* ─────────────────────────────────────────────────────────────
+   BASE STYLES
+───────────────────────────────────────────────────────────── */
 @layer base {
   :root {
     color-scheme: dark;
@@ -179,22 +233,9 @@
   }
 }
 
-/* Custom Dark Mode Scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted) / 0.8);
-  border-radius: 4px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--muted-foreground) / 0.5);
-}
-
+/* ─────────────────────────────────────────────────────────────
+   TYPOGRAPHY & RENDERING
+───────────────────────────────────────────────────────────── */
 html,
 body,
 #root {
@@ -204,7 +245,8 @@ body,
 }
 
 body {
-  font-family: var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: var(--font-sans), system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
   line-height: 1.5;
   font-weight: 400;
   font-synthesis: none;
@@ -213,7 +255,97 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* xterm.js styles */
+/* ─────────────────────────────────────────────────────────────
+   SCROLLBAR
+───────────────────────────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: oklch(0.40 0 0 / 0.5);
+  border-radius: 4px;
+  transition: background var(--duration-fast) ease;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.55 0 0 / 0.7);
+}
+.dark ::-webkit-scrollbar-thumb {
+  background: oklch(0.35 0 0 / 0.6);
+}
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.50 0 0 / 0.8);
+}
+
+/* ─────────────────────────────────────────────────────────────
+   ANIMATION KEYFRAMES
+───────────────────────────────────────────────────────────── */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes fade-down {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes slide-in-left {
+  from { opacity: 0; transform: translateX(-12px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   ANIMATION UTILITIES
+───────────────────────────────────────────────────────────── */
+.animate-fade-in {
+  animation: fade-in var(--duration-base) var(--ease-out-expo) both;
+}
+.animate-fade-up {
+  animation: fade-up var(--duration-base) var(--ease-out-expo) both;
+}
+.animate-fade-down {
+  animation: fade-down var(--duration-base) var(--ease-out-expo) both;
+}
+.animate-slide-in-left {
+  animation: slide-in-left var(--duration-base) var(--ease-out-expo) both;
+}
+.animate-scale-in {
+  animation: scale-in var(--duration-fast) var(--ease-spring) both;
+}
+
+/* Stagger delay helpers */
+.animate-delay-50  { animation-delay: 50ms; }
+.animate-delay-100 { animation-delay: 100ms; }
+.animate-delay-150 { animation-delay: 150ms; }
+.animate-delay-200 { animation-delay: 200ms; }
+.animate-delay-300 { animation-delay: 300ms; }
+
+/* ─────────────────────────────────────────────────────────────
+   PREFERS REDUCED MOTION — zero-cost accessibility
+───────────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   XTERM.JS
+───────────────────────────────────────────────────────────── */
 .xterm {
   padding: 0;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 7059763f..c28cea5e 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,26 +1,38 @@
 const API_BASE = '/api';
 
+export interface ApiFetchOptions extends RequestInit {
+  /** When true, omits the x-node-id header so the request always targets
+   *  the local node regardless of which node is currently active in the UI. */
+  localOnly?: boolean;
+}
+
 export async function apiFetch(
   endpoint: string,
-  options: RequestInit = {}
+  options: ApiFetchOptions = {}
 ): Promise<Response> {
+  const { localOnly, ...fetchOptions } = options;
   const url = `${API_BASE}${endpoint}`;
-  const activeNodeId = localStorage.getItem('sencho-active-node');
-  
+  const activeNodeId = localOnly ? null : localStorage.getItem('sencho-active-node');
+
   const defaultOptions: RequestInit = {
     credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
       ...(activeNodeId ? { 'x-node-id': activeNodeId } : {}),
-      ...options.headers,
+      ...fetchOptions.headers,
     },
   };
 
-  const response = await fetch(url, { ...defaultOptions, ...options });
+  const response = await fetch(url, { ...defaultOptions, ...fetchOptions });
 
   if (response.status === 401) {
-    // Signal auth failure to AuthContext without a hard page reload
-    window.dispatchEvent(new Event('sencho-unauthorized'));
+    // Only fire the global logout event for local auth failures.
+    // When the response carries x-sencho-proxy, the 401 came from a remote
+    // Sencho node (expired/invalid api_token) — not from the user's own session.
+    // Logging out in that case creates an unrecoverable loop.
+    if (!response.headers.get('x-sencho-proxy')) {
+      window.dispatchEvent(new Event('sencho-unauthorized'));
+    }
     throw new Error('Unauthorized');
   }
 
@@ -32,7 +44,7 @@ export async function apiFetch(
       if (errData.error && errData.error.includes('not found') && errData.error.includes('Node')) {
         window.dispatchEvent(new Event('node-not-found'));
       }
-    } catch (e) {
+    } catch {
       // Ignore JSON parse errors, caller handles standard 404s
     }
   }
@@ -40,4 +52,33 @@ export async function apiFetch(
   return response;
 }
 
+/** Fetch against a specific node by ID without touching the localStorage active-node key.
+ *  Used by the notification panel to target individual remote nodes explicitly. */
+export async function fetchForNode(
+  endpoint: string,
+  nodeId: number,
+  options: RequestInit = {}
+): Promise<Response> {
+  const { headers: extraHeaders, ...rest } = options;
+  const response = await fetch(`${API_BASE}${endpoint}`, {
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-node-id': String(nodeId),
+      ...(extraHeaders as Record<string, string> | undefined),
+    },
+    ...rest,
+  });
+
+  if (response.status === 401) {
+    // Same logic as apiFetch: only log out for local auth failures.
+    if (!response.headers.get('x-sencho-proxy')) {
+      window.dispatchEvent(new Event('sencho-unauthorized'));
+    }
+    throw new Error('Unauthorized');
+  }
+
+  return response;
+}
+
 export { API_BASE };
diff --git a/frontend/src/lib/get-strict-context.tsx b/frontend/src/lib/get-strict-context.tsx
new file mode 100644
index 00000000..be139dcd
--- /dev/null
+++ b/frontend/src/lib/get-strict-context.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+function getStrictContext<T>(
+  name?: string,
+): readonly [
+  ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => React.JSX.Element,
+  () => T,
+] {
+  const Context = React.createContext<T | undefined>(undefined);
+
+  const Provider = ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => <Context.Provider value={value}>{children}</Context.Provider>;
+
+  const useSafeContext = () => {
+    const ctx = React.useContext(Context);
+    if (ctx === undefined) {
+      throw new Error(`useContext must be used within ${name ?? 'a Provider'}`);
+    }
+    return ctx;
+  };
+
+  return [Provider, useSafeContext] as const;
+}
+
+export { getStrictContext };
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bef5202a..a7fa8ce9 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import ErrorBoundary from './components/ErrorBoundary.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </StrictMode>,
 )
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 5ea7361d..27884d82 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -11,6 +11,13 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  build: {
+    // Disable the module-preload polyfill inline script.
+    // Vite injects a small inline <script> for module preloading that violates
+    // our CSP (script-src 'self' blocks all inline scripts). All modern browsers
+    // support <link rel="modulepreload"> natively, so the polyfill is unnecessary.
+    modulePreload: { polyfill: false },
+  },
   server: {
     proxy: {
       '/api': {
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..b83f7fa3
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,79 @@
+{
+  "name": "sencho",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "sencho",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@playwright/test": "^1.58.2"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..8647da7d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "sencho",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "cd backend && npm test",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AnsoCode/Sencho.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/AnsoCode/Sencho/issues"
+  },
+  "homepage": "https://github.com/AnsoCode/Sencho#readme",
+  "devDependencies": {
+    "@playwright/test": "^1.58.2"
+  }
+}
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 00000000..e59903a6
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright E2E config for Sencho.
+ *
+ * Before running: ensure both dev servers are up:
+ *   cd backend && npm run dev &
+ *   cd frontend && npm run dev &
+ *
+ * Or use the webServer config below (which starts them automatically).
+ */
+export default defineConfig({
+  testDir: './e2e',
+  // Don't stop on first failure — show all results
+  maxFailures: 0,
+  // How long to wait for a single test
+  timeout: 30_000,
+  // How long to wait for an expect() assertion
+  expect: { timeout: 5_000 },
+  // Run tests serially — Sencho is a single-user app and tests share DB state
+  workers: 1,
+  reporter: [['list'], ['html', { outputFolder: 'e2e/report', open: 'never' }]],
+
+  use: {
+    baseURL: 'http://localhost:5173',
+    // Persist auth state between tests in the same file
+    storageState: undefined,
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+  ],
+});