fix: dockerfile package scope renaming

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitea/workflows/docker-build-backend.yml

@@ -7,9 +7,19 @@ on:
       - develop
     tags:
       - "v*.*.*"
+    paths:
+      - "packages/backend/**"
+      - "packages/types/**"
+      - "packages/email/**"
+      - "Dockerfile.backend"
   pull_request:
     branches:
       - main
+    paths:
+      - "packages/backend/**"
+      - "packages/types/**"
+      - "packages/email/**"
+      - "Dockerfile.backend"
   workflow_dispatch:
 
 env:
@@ -40,6 +50,8 @@ jobs:
         uses: docker/metadata-action@v5
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          labels: |
+            org.opencontainers.image.source=${{ gitea.server_url }}/${{ gitea.repository }}
           tags: |
             type=raw,value=latest,enable={{is_default_branch}}
             type=ref,event=branch

.gitea/workflows/docker-build-buttplug.yml

@@ -0,0 +1,70 @@
+name: Build and Push Buttplug Image
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+    tags:
+      - "v*.*.*"
+    paths:
+      - "packages/buttplug/**"
+      - "Dockerfile.buttplug"
+      - "nginx.buttplug.conf"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "packages/buttplug/**"
+      - "Dockerfile.buttplug"
+      - "nginx.buttplug.conf"
+  workflow_dispatch:
+
+env:
+  REGISTRY: dev.pivoine.art
+  IMAGE_NAME: valknar/sexy-buttplug
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/amd64
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          labels: |
+            org.opencontainers.image.source=${{ gitea.server_url }}/${{ gitea.repository }}
+          tags: |
+            type=raw,value=latest,enable={{is_default_branch}}
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=sha,prefix={{branch}}-
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: Dockerfile.buttplug
+          platforms: linux/amd64
+          push: ${{ gitea.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:buildcache
+          cache-to: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:buildcache,mode=max

.gitea/workflows/docker-build-frontend.yml

@@ -7,9 +7,17 @@ on:
       - develop
     tags:
       - "v*.*.*"
+    paths:
+      - "packages/frontend/**"
+      - "packages/types/**"
+      - "Dockerfile"
   pull_request:
     branches:
       - main
+    paths:
+      - "packages/frontend/**"
+      - "packages/types/**"
+      - "Dockerfile"
   workflow_dispatch:
 
 env:
@@ -40,6 +48,8 @@ jobs:
         uses: docker/metadata-action@v5
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          labels: |
+            org.opencontainers.image.source=${{ gitea.server_url }}/${{ gitea.repository }}
           tags: |
             type=raw,value=latest,enable={{is_default_branch}}
             type=ref,event=branch

Dockerfile

@@ -3,7 +3,7 @@
 # ============================================================================
 # Base stage - shared dependencies
 # ============================================================================
-FROM node:22.11.0-slim AS base
+FROM node:22.14.0-slim AS base
 
 # Enable corepack for pnpm
 RUN npm install -g corepack@latest && corepack enable
@@ -20,49 +20,23 @@ RUN mkdir -p ./packages/frontend && \
     printf 'PUBLIC_API_URL=\nPUBLIC_URL=\nPUBLIC_UMAMI_ID=\nPUBLIC_UMAMI_SCRIPT=\n' > ./packages/frontend/.env
 
 # ============================================================================
-# Builder stage - compile application with Rust/WASM support
+# Builder stage - compile frontend
 # ============================================================================
 FROM base AS builder
 ARG CI=false
 ENV CI=$CI
 
-# Install build dependencies for Rust and native modules
-RUN apt-get update && apt-get install -y \
-    curl \
-    build-essential \
-    pkg-config \
-    libssl-dev \
-    ca-certificates \
-    && rm -rf /var/lib/apt/lists/*
-
-# Install Rust toolchain
-RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \
-    --default-toolchain stable \
-    --profile minimal \
-    --target wasm32-unknown-unknown
-
-# Add Rust to PATH
-ENV PATH="/root/.cargo/bin:${PATH}"
-
-# Install wasm-bindgen-cli
-RUN cargo install wasm-bindgen-cli
-
 # Copy source files
 COPY packages ./packages
 
 # Install all dependencies
 RUN pnpm install --frozen-lockfile
 
-# Build packages in correct order with WASM support
-# 1. Build buttplug WASM
-RUN RUSTFLAGS='--cfg getrandom_backend="wasm_js" --cfg=web_sys_unstable_apis' \
-    pnpm --filter @sexy.pivoine.art/buttplug build:wasm
+# Generate SvelteKit type definitions (creates .svelte-kit/tsconfig.json)
+RUN pnpm --filter @sexy/frontend exec svelte-kit sync
 
-# 2. Build buttplug TypeScript
-RUN pnpm --filter @sexy.pivoine.art/buttplug build
-
-# 3. Build frontend
-RUN pnpm --filter @sexy.pivoine.art/frontend build
+# Build frontend
+RUN pnpm --filter @sexy/frontend build
 
 # Prune dev dependencies for production
 RUN CI=true pnpm install -rP
@@ -70,7 +44,7 @@ RUN CI=true pnpm install -rP
 # ============================================================================
 # Runner stage - minimal production image
 # ============================================================================
-FROM node:22.11.0-slim AS runner
+FROM node:22.14.0-slim AS runner
 
 # Install dumb-init for proper signal handling
 RUN apt-get update && apt-get install -y \
@@ -91,19 +65,14 @@ COPY --from=builder --chown=node:node /app/package.json ./package.json
 COPY --from=builder --chown=node:node /app/pnpm-lock.yaml ./pnpm-lock.yaml
 COPY --from=builder --chown=node:node /app/pnpm-workspace.yaml ./pnpm-workspace.yaml
 
-# Create package directories
-RUN mkdir -p packages/frontend packages/buttplug
+# Create package directory
+RUN mkdir -p packages/frontend
 
 # Copy frontend artifacts
 COPY --from=builder --chown=node:node /app/packages/frontend/build ./packages/frontend/build
 COPY --from=builder --chown=node:node /app/packages/frontend/node_modules ./packages/frontend/node_modules
 COPY --from=builder --chown=node:node /app/packages/frontend/package.json ./packages/frontend/package.json
 
-# Copy buttplug artifacts
-COPY --from=builder --chown=node:node /app/packages/buttplug/dist ./packages/buttplug/dist
-COPY --from=builder --chown=node:node /app/packages/buttplug/node_modules ./packages/buttplug/node_modules
-COPY --from=builder --chown=node:node /app/packages/buttplug/package.json ./packages/buttplug/package.json
-
 # Switch to non-root user
 USER node
 

Dockerfile.backend

@@ -3,7 +3,7 @@
 # ============================================================================
 # Builder stage
 # ============================================================================
-FROM node:22.11.0-slim AS builder
+FROM node:22.14.0-slim AS builder
 
 RUN npm install -g corepack@latest && corepack enable
 
@@ -16,25 +16,29 @@ COPY packages/backend/package.json ./packages/backend/package.json
 COPY packages/frontend/package.json ./packages/frontend/package.json
 COPY packages/buttplug/package.json ./packages/buttplug/package.json
 COPY packages/types/package.json ./packages/types/package.json
+COPY packages/email/package.json ./packages/email/package.json
 
-RUN pnpm install --frozen-lockfile --filter @sexy.pivoine.art/backend --ignore-scripts
+RUN pnpm install --frozen-lockfile --filter @sexy/backend --filter @sexy/email --ignore-scripts
 
 # Rebuild native bindings (argon2, sharp)
 RUN pnpm rebuild argon2 sharp
 
 COPY packages/types ./packages/types
+COPY packages/email ./packages/email
 COPY packages/backend ./packages/backend
 
-RUN pnpm --filter @sexy.pivoine.art/backend build
+RUN pnpm --filter @sexy/email build
 
-RUN CI=true pnpm install --frozen-lockfile --filter @sexy.pivoine.art/backend --prod --ignore-scripts
+RUN pnpm --filter @sexy/backend build
+
+RUN CI=true pnpm install --frozen-lockfile --filter @sexy/backend --prod --ignore-scripts
 
 RUN pnpm rebuild argon2 sharp
 
 # ============================================================================
 # Runner stage
 # ============================================================================
-FROM node:22.11.0-slim AS runner
+FROM node:22.14.0-slim AS runner
 
 RUN apt-get update && apt-get install -y \
     dumb-init \
@@ -48,14 +52,19 @@ RUN userdel -r node && \
 
 WORKDIR /home/node/app
 
-RUN mkdir -p packages/backend
+RUN mkdir -p packages/backend packages/email
 
 COPY --from=builder --chown=node:node /app/node_modules ./node_modules
 COPY --from=builder --chown=node:node /app/package.json ./package.json
 COPY --from=builder --chown=node:node /app/packages/backend/dist ./packages/backend/dist
 COPY --from=builder --chown=node:node /app/packages/backend/node_modules ./packages/backend/node_modules
 COPY --from=builder --chown=node:node /app/packages/backend/package.json ./packages/backend/package.json
-COPY --from=builder --chown=node:node /app/packages/backend/src/migrations ./packages/backend/migrations
+COPY --from=builder --chown=node:node /app/packages/backend/src/migrations ./packages/backend/dist/migrations
+COPY --from=builder --chown=node:node /app/packages/email/dist ./packages/email/dist
+COPY --from=builder --chown=node:node /app/packages/email/node_modules ./packages/email/node_modules
+COPY --from=builder --chown=node:node /app/packages/email/email.css ./packages/email/email.css
+COPY --from=builder --chown=node:node /app/packages/email/templates ./packages/email/templates
+COPY --from=builder --chown=node:node /app/packages/email/package.json ./packages/email/package.json
 
 RUN mkdir -p /data/uploads && chown node:node /data/uploads
 

Dockerfile.buttplug

@@ -0,0 +1,65 @@
+# syntax=docker/dockerfile:1
+
+# ============================================================================
+# Builder stage - compile Rust/WASM and TypeScript
+# ============================================================================
+FROM node:22.14.0-slim AS builder
+
+# Install build dependencies for Rust
+RUN apt-get update && apt-get install -y \
+    curl \
+    build-essential \
+    pkg-config \
+    libssl-dev \
+    ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
+
+# Enable corepack for pnpm
+RUN npm install -g corepack@latest && corepack enable
+
+# Install Rust toolchain
+RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \
+    --default-toolchain stable \
+    --profile minimal \
+    --target wasm32-unknown-unknown
+
+ENV PATH="/root/.cargo/bin:${PATH}"
+
+# Install wasm-bindgen-cli
+RUN cargo install wasm-bindgen-cli
+
+WORKDIR /app
+
+# Copy workspace configuration
+COPY pnpm-workspace.yaml package.json pnpm-lock.yaml ./
+COPY packages/buttplug ./packages/buttplug
+
+# Install dependencies
+RUN pnpm install --frozen-lockfile --filter @sexy/buttplug
+
+# Build WASM
+RUN RUSTFLAGS='--cfg getrandom_backend="wasm_js" --cfg=web_sys_unstable_apis' \
+    pnpm --filter @sexy/buttplug build:wasm
+
+# Build TypeScript
+RUN pnpm --filter @sexy/buttplug build
+
+# ============================================================================
+# Runner stage - nginx serving dist/ and wasm/
+# ============================================================================
+FROM nginx:1.27-alpine AS runner
+
+# Remove default nginx config
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Copy nginx config
+COPY nginx.buttplug.conf /etc/nginx/conf.d/buttplug.conf
+
+# Copy built artifacts
+COPY --from=builder /app/packages/buttplug/dist /usr/share/nginx/html/dist
+COPY --from=builder /app/packages/buttplug/wasm /usr/share/nginx/html/wasm
+
+EXPOSE 80
+
+HEALTHCHECK --interval=30s --timeout=3s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost/dist/index.js || exit 1

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Palina & Valknar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,4 +1,4 @@
-# 💋 sexy.pivoine.art
+# 💋 SEXY
 
 <div align="center">
 
@@ -15,8 +15,9 @@ Built with passion, technology, and the fearless spirit of sexual empowerment
 
 [![Build Frontend](https://dev.pivoine.art/valknar/sexy/actions/workflows/docker-build-frontend.yml/badge.svg)](https://dev.pivoine.art/valknar/sexy/actions)
 [![Build Backend](https://dev.pivoine.art/valknar/sexy/actions/workflows/docker-build-backend.yml/badge.svg)](https://dev.pivoine.art/valknar/sexy/actions)
+[![Build Buttplug](https://dev.pivoine.art/valknar/sexy/actions/workflows/docker-build-buttplug.yml/badge.svg)](https://dev.pivoine.art/valknar/sexy/actions)
 [![License](https://img.shields.io/badge/License-For_Pleasure-FF1493?style=for-the-badge&logo=heart&logoColor=white&labelColor=8B008B)](LICENSE)
-[![Made with Love](https://img.shields.io/badge/Made_with-💜_Love-FF69B4?style=for-the-badge&labelColor=8B008B)](https://sexy.pivoine.art)
+[![Made with Love](https://img.shields.io/badge/Made_with-💜_Love-FF69B4?style=for-the-badge&labelColor=8B008B)](https://pivoine.art)
 
 </div>
 
@@ -24,7 +25,7 @@ Built with passion, technology, and the fearless spirit of sexual empowerment
 
 ## 👅 What Is This Delicious Creation?
 
-Welcome, dear pleasure-seeker! This is **sexy.pivoine.art** — a modern, sensual platform built from the ground up with full control over every intimate detail. A **SvelteKit** frontend caresses a purpose-built **Fastify + GraphQL** backend, while **Buttplug.io** hardware integration brings the experience into the physical world.
+Welcome, dear pleasure-seeker! This is **sexy** — a modern, sensual platform built from the ground up with full control over every intimate detail. A **SvelteKit** frontend caresses a purpose-built **Fastify + GraphQL** backend, while **Buttplug.io** hardware integration brings the experience into the physical world.
 
 Like Beate Uhse breaking barriers in post-war Germany, we believe in the freedom to explore, create, and celebrate sexuality without shame. This platform is built for **models**, **creators**, and **connoisseurs** of adult content who deserve technology as sophisticated as their desires.
 
@@ -39,6 +40,7 @@ Like Beate Uhse breaking barriers in post-war Germany, we believe in the freedom
 - 🌍 **Internationalization** — pleasure speaks all languages
 - 🏆 **Gamification** — achievements, leaderboards, and reward points
 - 💬 **Comments & Social** — build your community
+- 💌 **Professional HTML Emails** — Maizzle v6 + Tailwind CSS 4 templated email (verification, password reset)
 - 📊 **Analytics Integration** (Umami) — know your admirers
 - 🐳 **Self-hosted CI/CD** via Gitea Actions on `dev.pivoine.art`
 
@@ -72,6 +74,11 @@ Like Beate Uhse breaking barriers in post-war Germany, we believe in the freedom
 │  ├─ TypeScript + Rust     → Power and precision             │
 │  └─ WebBluetooth API      → Wireless intimacy               │
 ├─────────────────────────────────────────────────────────────┤
+│  💌 Email Layer                                             │
+│  ├─ Maizzle v6            → HTML email framework            │
+│  ├─ @maizzle/tailwindcss  → Email-safe Tailwind CSS 4       │
+│  └─ Nodemailer            → SMTP delivery                   │
+├─────────────────────────────────────────────────────────────┤
 │  🌸 DevOps Layer                                            │
 │  ├─ Docker                → Containerized ecstasy           │
 │  ├─ Gitea Actions         → Self-hosted seduction           │
@@ -88,7 +95,7 @@ Like Beate Uhse breaking barriers in post-war Germany, we believe in the freedom
 ```bash
 # Clone the repository
 git clone https://dev.pivoine.art/valknar/sexy.git
-cd sexy.pivoine.art
+cd sexy
 
 # Configure your secrets
 cp .env.example .env
@@ -119,7 +126,7 @@ pnpm dev:data
 pnpm dev:backend
 
 # Start the frontend (port 3000, proxied to :4000)
-pnpm --filter @sexy.pivoine.art/frontend dev
+pnpm --filter @sexy/frontend dev
 ```
 
 Visit `http://localhost:3000` and let the experience begin... 💋
@@ -130,13 +137,14 @@ GraphQL playground is available at `http://localhost:4000/graphql` — explore e
 
 ## 🌹 Project Structure
 
-This monorepo contains three packages, each serving its purpose:
+This monorepo contains four packages, each serving its purpose:
 
 ```
-sexy.pivoine.art/
+sexy/
 ├─ 💄 packages/frontend/    → SvelteKit app (the seduction)
 ├─ ⚡ packages/backend/      → Fastify + GraphQL API (the engine)
-└─ 🎮 packages/buttplug/     → Hardware control (the connection)
+├─ 🎮 packages/buttplug/     → Hardware control (the connection)
+└─ 💌 packages/email/        → Maizzle HTML email templates
 ```
 
 ### 💄 Frontend (`packages/frontend/`)
@@ -156,6 +164,13 @@ Files stored as `<UPLOAD_DIR>/<uuid>/<filename>` with on-demand WebP transforms
 Hybrid TypeScript/Rust package for intimate hardware control via WebBluetooth.
 Compiled to WebAssembly for browser-based Bluetooth device communication.
 
+### 💌 Email (`packages/email/`)
+
+Professional HTML email templates built with **Maizzle v6** + **Tailwind CSS 4** (`@maizzle/tailwindcss`).
+Design tokens mirror the frontend's `app.css` exactly — same oklch colors, Noto Sans font, semantic classes.
+LightningCSS automatically converts oklch values to hex for email client compatibility.
+Exported functions: `renderVerification({ token })` and `renderPasswordReset({ token })` — each returns `{ subject, html }`.
+
 ---
 
 ## 🗃️ Database Schema
@@ -241,6 +256,7 @@ Automated builds run on **[dev.pivoine.art](https://dev.pivoine.art/valknar/sexy
 
 - ✅ Frontend image → `dev.pivoine.art/valknar/sexy:latest`
 - ✅ Backend image → `dev.pivoine.art/valknar/sexy-backend:latest`
+- ✅ Buttplug image → `dev.pivoine.art/valknar/sexy-buttplug:latest`
 - ✅ Triggers on push to `main`, `develop`, or version tags (`v*.*.*`)
 - ✅ Build cache via registry for fast successive builds
 
@@ -312,7 +328,7 @@ graph LR
 
 ### 🌸 Created with Love by 🌸
 
-**[Palina](https://sexy.pivoine.art) & [Valknar](https://sexy.pivoine.art)**
+**[Palina](https://palina.pivoine.art) & [Valknar](https://pivoine.art)**
 
 _Für die Mäuse..._ 🐭💕
 
@@ -329,6 +345,8 @@ _Für die Mäuse..._ 🐭💕
 | [Drizzle ORM](https://orm.drizzle.team/)                  | Database             |
 | [Sharp](https://sharp.pixelplumbing.com/)                 | Image transforms     |
 | [Buttplug.io](https://buttplug.io/)                       | Hardware             |
+| [Maizzle](https://maizzle.com/)                           | HTML email framework |
+| [Nodemailer](https://nodemailer.com/)                     | Email delivery       |
 | [bits-ui](https://www.bits-ui.com/)                       | UI components        |
 | [Gitea](https://dev.pivoine.art)                          | Self-hosted VCS & CI |
 
@@ -362,7 +380,7 @@ _"Eine Frau, die ihre Sexualität selbstbestimmt lebt, ist eine freie Frau."_
 
 [![Repository](https://img.shields.io/badge/🐙_Repository-dev.pivoine.art-FF69B4?style=for-the-badge&labelColor=8B008B)](https://dev.pivoine.art/valknar/sexy)
 [![Issues](https://img.shields.io/badge/🐛_Issues-Report_Here-DA70D6?style=for-the-badge&labelColor=8B008B)](https://dev.pivoine.art/valknar/sexy/issues)
-[![Website](https://img.shields.io/badge/🌐_Website-Visit_Here-FF1493?style=for-the-badge&labelColor=8B008B)](https://sexy.pivoine.art)
+[![Website](https://img.shields.io/badge/🌐_Website-Visit_Here-FF1493?style=for-the-badge&labelColor=8B008B)](https://pivoine.art)
 
 </div>
 
@@ -383,6 +401,6 @@ _"Eine Frau, die ihre Sexualität selbstbestimmt lebt, ist eine freie Frau."_
 
 _Pleasure is a human right. Technology is freedom. Together, they are power._
 
-**[sexy.pivoine.art](https://sexy.pivoine.art)** | © 2025 Palina & Valknar
+**[pivoine.art](https://pivoine.art)** | © 2026 Palina & Valknar
 
 </div>

compose.yml

@@ -51,7 +51,7 @@ services:
       COOKIE_SECRET: change-me-in-production
       SMTP_HOST: localhost
       SMTP_PORT: 587
-      EMAIL_FROM: noreply@sexy.pivoine.art
+      EMAIL_FROM: noreply@sexy
       PUBLIC_URL: http://localhost:3000
     depends_on:
       postgres:
@@ -64,6 +64,21 @@ services:
       timeout: 10s
       retries: 3
       start_period: 20s
+  buttplug:
+    build:
+      context: .
+      dockerfile: Dockerfile.buttplug
+    container_name: sexy_buttplug
+    restart: unless-stopped
+    ports:
+      - "8080:80"
+    healthcheck:
+      test:
+        ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost/dist/index.js"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 10s
   frontend:
     build:
       context: .
@@ -78,9 +93,12 @@ services:
       HOST: 0.0.0.0
       PUBLIC_API_URL: http://sexy_backend:4000
       PUBLIC_URL: http://localhost:3000
+      BUTTPLUG_URL: http://sexy_buttplug:80
     depends_on:
       backend:
         condition: service_healthy
+      buttplug:
+        condition: service_healthy
 
 volumes:
   uploads_data:

eslint.config.js

@@ -33,8 +33,6 @@ export default ts.config(
         "error",
         { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
       ],
-      // Allow explicit any sparingly — we're adults here
-      "@typescript-eslint/no-explicit-any": "warn",
       // Enforce consistent type imports
       "@typescript-eslint/consistent-type-imports": [
         "error",
@@ -53,7 +51,7 @@ export default ts.config(
       "**/dist/",
       "**/node_modules/",
       "**/migrations/",
-      "packages/buttplug/**",
+      "**/wasm/",
     ],
   },
 );

nginx.buttplug.conf

@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+
+    # WASM MIME type
+    include /etc/nginx/mime.types;
+    types {
+        application/wasm wasm;
+    }
+
+    # Cache JS and WASM aggressively (content-addressed by build)
+    location ~* \.(js|wasm)$ {
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        add_header Cross-Origin-Resource-Policy "cross-origin";
+        add_header Cross-Origin-Embedder-Policy "require-corp";
+    }
+
+    location / {
+        try_files $uri =404;
+    }
+}

package.json

@@ -5,16 +5,17 @@
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build:frontend": "git pull && pnpm install && pnpm --filter @sexy.pivoine.art/frontend build",
-    "build:backend": "git pull && pnpm install && pnpm --filter @sexy.pivoine.art/backend build",
+    "build:frontend": "pnpm --filter @sexy/frontend build",
+    "build:backend": "pnpm --filter @sexy/backend build",
+    "dev:buttplug": "pnpm --filter @sexy/buttplug serve",
     "dev:data": "docker compose up -d postgres redis",
-    "dev:backend": "pnpm --filter @sexy.pivoine.art/backend dev",
-    "dev": "pnpm dev:data && pnpm dev:backend & pnpm --filter @sexy.pivoine.art/frontend dev",
+    "dev:backend": "pnpm --filter @sexy/backend dev",
+    "dev": "pnpm dev:data && pnpm dev:backend & pnpm dev:buttplug & pnpm --filter @sexy/frontend dev",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "check": "pnpm -r --filter=!sexy.pivoine.art check"
+    "check": "pnpm -r --filter=!sexy check"
   },
   "keywords": [],
   "author": {
@@ -22,7 +23,7 @@
     "email": "valknar@pivoine.art"
   },
   "license": "MIT",
-  "packageManager": "pnpm@10.19.0",
+  "packageManager": "pnpm@10.31.0",
   "pnpm": {
     "onlyBuiltDependencies": [
       "argon2",

packages/backend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@sexy.pivoine.art/backend",
+  "name": "@sexy/backend",
   "version": "1.0.0",
   "private": true,
   "scripts": {
@@ -14,14 +14,16 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
-    "@sexy.pivoine.art/types": "workspace:*",
     "@fastify/cookie": "^11.0.2",
     "@fastify/cors": "^10.0.2",
     "@fastify/multipart": "^9.0.3",
     "@fastify/static": "^8.1.1",
     "@pothos/core": "^4.4.0",
     "@pothos/plugin-errors": "^4.2.0",
+    "@sexy/email": "workspace:*",
+    "@sexy/types": "workspace:*",
     "argon2": "^0.43.0",
+    "bullmq": "^5.70.4",
     "drizzle-orm": "^0.44.1",
     "fastify": "^5.4.0",
     "fluent-ffmpeg": "^2.1.3",

packages/backend/src/db/schema/gamification.ts

@@ -8,6 +8,7 @@ import {
   pgEnum,
   uniqueIndex,
 } from "drizzle-orm/pg-core";
+import { sql } from "drizzle-orm";
 import { users } from "./users";
 import { recordings } from "./recordings";
 
@@ -68,6 +69,11 @@ export const user_points = pgTable(
   (t) => [
     index("user_points_user_idx").on(t.user_id),
     index("user_points_date_idx").on(t.date_created),
+    uniqueIndex("user_points_unique_action_recording")
+      .on(t.user_id, t.action, t.recording_id)
+      .where(
+        sql`"action" IN ('RECORDING_CREATE', 'RECORDING_FEATURED') AND "recording_id" IS NOT NULL`,
+      ),
   ],
 );
 

packages/backend/src/db/schema/recordings.ts

@@ -12,7 +12,7 @@ import {
 import { users } from "./users";
 import { videos } from "./videos";
 
-export const recordingStatusEnum = pgEnum("recording_status", ["draft", "published", "archived"]);
+export const recordingStatusEnum = pgEnum("recording_status", ["draft", "published"]);
 
 export const recordings = pgTable(
   "recordings",

packages/backend/src/db/schema/users.ts

@@ -29,6 +29,7 @@ export const users = pgTable(
     role: roleEnum("role").notNull().default("viewer"),
     avatar: text("avatar").references(() => files.id, { onDelete: "set null" }),
     banner: text("banner").references(() => files.id, { onDelete: "set null" }),
+    photo: text("photo").references(() => files.id, { onDelete: "set null" }),
     is_admin: boolean("is_admin").notNull().default(false),
     email_verified: boolean("email_verified").notNull().default(false),
     email_verify_token: text("email_verify_token"),

packages/backend/src/graphql/context.ts

@@ -1,9 +1,11 @@
 import type { YogaInitialContext } from "graphql-yoga";
 import type { FastifyRequest, FastifyReply } from "fastify";
 import type { Context } from "./builder";
-import { getSession } from "../lib/auth";
+import { getSession, setSession } from "../lib/auth";
 import { db } from "../db/connection";
 import { redis } from "../lib/auth";
+import { users } from "../db/schema/index";
+import { eq } from "drizzle-orm";
 
 type ServerContext = {
   req: FastifyRequest;
@@ -25,7 +27,34 @@ export async function buildContext(ctx: YogaInitialContext & ServerContext): Pro
   );
 
   const token = cookies["session_token"];
-  const currentUser = token ? await getSession(token) : null;
+  let currentUser = null;
+
+  if (token) {
+    const session = await getSession(token); // also slides TTL
+    if (session) {
+      const dbInstance = ctx.db || db;
+      const [dbUser] = await dbInstance
+        .select()
+        .from(users)
+        .where(eq(users.id, session.id))
+        .limit(1);
+      if (dbUser) {
+        currentUser = {
+          id: dbUser.id,
+          email: dbUser.email,
+          role: (dbUser.role === "admin" ? "viewer" : dbUser.role) as "model" | "viewer",
+          is_admin: dbUser.is_admin,
+          first_name: dbUser.first_name,
+          last_name: dbUser.last_name,
+          artist_name: dbUser.artist_name,
+          slug: dbUser.slug,
+          avatar: dbUser.avatar,
+        };
+        // Refresh cached session with up-to-date data
+        await setSession(token, currentUser);
+      }
+    }
+  }
 
   return {
     db: ctx.db || db,

packages/backend/src/graphql/index.ts

@@ -9,6 +9,7 @@ import "./resolvers/recordings.js";
 import "./resolvers/comments.js";
 import "./resolvers/gamification.js";
 import "./resolvers/stats.js";
+import "./resolvers/queues.js";
 import { builder } from "./builder";
 
 export const schema = builder.toSchema();

packages/backend/src/graphql/resolvers/articles.ts

@@ -1,10 +1,11 @@
 import { builder } from "../builder";
 import { ArticleType, ArticleListType, AdminArticleListType } from "../types/index";
 import { articles, users } from "../../db/schema/index";
-import { eq, and, lte, desc, asc, ilike, or, count, arrayContains } from "drizzle-orm";
+import { eq, and, lte, desc, asc, ilike, or, count, arrayContains, type SQL } from "drizzle-orm";
 import { requireAdmin } from "../../lib/acl";
+import type { DB } from "../../db/connection";
 
-async function enrichArticle(db: any, article: any) {
+async function enrichArticle(db: DB, article: typeof articles.$inferSelect) {
   let author = null;
   if (article.author) {
     const authorUser = await db
@@ -13,6 +14,7 @@ async function enrichArticle(db: any, article: any) {
         artist_name: users.artist_name,
         slug: users.slug,
         avatar: users.avatar,
+        description: users.description,
       })
       .from(users)
       .where(eq(users.id, article.author))
@@ -38,7 +40,7 @@ builder.queryField("articles", (t) =>
       const pageSize = args.limit ?? 24;
       const offset = args.offset ?? 0;
 
-      const conditions: any[] = [lte(articles.publish_date, new Date())];
+      const conditions: SQL<unknown>[] = [lte(articles.publish_date, new Date())];
       if (args.featured !== null && args.featured !== undefined) {
         conditions.push(eq(articles.featured, args.featured));
       }
@@ -49,28 +51,24 @@ builder.queryField("articles", (t) =>
           or(
             ilike(articles.title, `%${args.search}%`),
             ilike(articles.excerpt, `%${args.search}%`),
-          ),
+          ) as SQL<unknown>,
         );
       }
 
-      const orderArgs =
-        args.sortBy === "name"
-          ? [asc(articles.title)]
-          : args.sortBy === "featured"
-            ? [desc(articles.featured), desc(articles.publish_date)]
-            : [desc(articles.publish_date)];
-
       const where = and(...conditions);
+      const baseQuery = ctx.db.select().from(articles).where(where);
+      const ordered =
+        args.sortBy === "name"
+          ? baseQuery.orderBy(asc(articles.title))
+          : args.sortBy === "featured"
+            ? baseQuery.orderBy(desc(articles.featured), desc(articles.publish_date))
+            : baseQuery.orderBy(desc(articles.publish_date));
+
       const [articleList, totalRows] = await Promise.all([
-        (ctx.db.select().from(articles).where(where) as any)
-          .orderBy(...orderArgs)
-          .limit(pageSize)
-          .offset(offset),
+        ordered.limit(pageSize).offset(offset),
         ctx.db.select({ total: count() }).from(articles).where(where),
       ]);
-      const items = await Promise.all(
-        articleList.map((article: any) => enrichArticle(ctx.db, article)),
-      );
+      const items = await Promise.all(articleList.map((article) => enrichArticle(ctx.db, article)));
       return { items, total: totalRows[0]?.total ?? 0 };
     },
   }),
@@ -96,6 +94,22 @@ builder.queryField("article", (t) =>
   }),
 );
 
+builder.queryField("adminGetArticle", (t) =>
+  t.field({
+    type: ArticleType,
+    nullable: true,
+    args: {
+      id: t.arg.string({ required: true }),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const article = await ctx.db.select().from(articles).where(eq(articles.id, args.id)).limit(1);
+      if (!article[0]) return null;
+      return enrichArticle(ctx.db, article[0]);
+    },
+  }),
+);
+
 // ─── Admin queries & mutations ────────────────────────────────────────────────
 
 builder.queryField("adminListArticles", (t) =>
@@ -113,13 +127,13 @@ builder.queryField("adminListArticles", (t) =>
       const limit = args.limit ?? 50;
       const offset = args.offset ?? 0;
 
-      const conditions: any[] = [];
+      const conditions: SQL<unknown>[] = [];
       if (args.search) {
         conditions.push(
           or(
             ilike(articles.title, `%${args.search}%`),
             ilike(articles.excerpt, `%${args.search}%`),
-          ),
+          ) as SQL<unknown>,
         );
       }
       if (args.category) conditions.push(eq(articles.category, args.category));
@@ -137,9 +151,7 @@ builder.queryField("adminListArticles", (t) =>
           .offset(offset),
         ctx.db.select({ total: count() }).from(articles).where(where),
       ]);
-      const items = await Promise.all(
-        articleList.map((article: any) => enrichArticle(ctx.db, article)),
-      );
+      const items = await Promise.all(articleList.map((article) => enrichArticle(ctx.db, article)));
       return { items, total: totalRows[0]?.total ?? 0 };
     },
   }),
@@ -215,7 +227,7 @@ builder.mutationField("updateArticle", (t) =>
 
       const updated = await ctx.db
         .update(articles)
-        .set(updates as any)
+        .set(updates as Partial<typeof articles.$inferInsert>)
         .where(eq(articles.id, args.id))
         .returning();
       if (!updated[0]) return null;

packages/backend/src/graphql/resolvers/auth.ts

@@ -3,9 +3,13 @@ import { builder } from "../builder";
 import { CurrentUserType } from "../types/index";
 import { users } from "../../db/schema/index";
 import { eq } from "drizzle-orm";
+
+interface ReplyLike {
+  header?: (name: string, value: string) => void;
+}
 import { hash, verify as verifyArgon } from "../../lib/argon";
 import { setSession, deleteSession } from "../../lib/auth";
-import { sendVerification, sendPasswordReset } from "../../lib/email";
+import { enqueueVerification, enqueuePasswordReset } from "../../lib/email";
 import { slugify } from "../../lib/slugify";
 import { nanoid } from "nanoid";
 
@@ -45,13 +49,8 @@ builder.mutationField("login", (t) =>
 
       // Set session cookie
       const isProduction = process.env.NODE_ENV === "production";
-      const cookieValue = `session_token=${token}; HttpOnly; Path=/; SameSite=Lax; Max-Age=86400${isProduction ? "; Secure" : ""}`;
-      (ctx.reply as any).header?.("Set-Cookie", cookieValue);
-
-      // For graphql-yoga response
-      if ((ctx as any).serverResponse) {
-        (ctx as any).serverResponse.setHeader("Set-Cookie", cookieValue);
-      }
+      const cookieValue = `session_token=${token}; HttpOnly; Path=/; SameSite=Strict; Max-Age=86400${isProduction ? "; Secure" : ""}`;
+      (ctx.reply as ReplyLike).header?.("Set-Cookie", cookieValue);
 
       return user[0];
     },
@@ -74,8 +73,9 @@ builder.mutationField("logout", (t) =>
         await deleteSession(token);
       }
       // Clear cookie
-      const cookieValue = "session_token=; HttpOnly; Path=/; Max-Age=0";
-      (ctx.reply as any).header?.("Set-Cookie", cookieValue);
+      const isProduction = process.env.NODE_ENV === "production";
+      const cookieValue = `session_token=; HttpOnly; Path=/; SameSite=Strict; Max-Age=0${isProduction ? "; Secure" : ""}`;
+      (ctx.reply as ReplyLike).header?.("Set-Cookie", cookieValue);
       return true;
     },
   }),
@@ -131,9 +131,9 @@ builder.mutationField("register", (t) =>
       });
 
       try {
-        await sendVerification(args.email, verifyToken);
+        await enqueueVerification(args.email, verifyToken);
       } catch (e) {
-        console.warn("Failed to send verification email:", (e as Error).message);
+        console.warn("Failed to enqueue verification email:", (e as Error).message);
       }
       return true;
     },
@@ -190,9 +190,9 @@ builder.mutationField("requestPasswordReset", (t) =>
         .where(eq(users.id, user[0].id));
 
       try {
-        await sendPasswordReset(args.email, token);
+        await enqueuePasswordReset(args.email, token);
       } catch (e) {
-        console.warn("Failed to send password reset email:", (e as Error).message);
+        console.warn("Failed to enqueue password reset email:", (e as Error).message);
       }
       return true;
     },

packages/backend/src/graphql/resolvers/comments.ts

@@ -1,10 +1,10 @@
 import { GraphQLError } from "graphql";
 import { builder } from "../builder";
-import { CommentType } from "../types/index";
+import { CommentType, AdminCommentListType } from "../types/index";
 import { comments, users } from "../../db/schema/index";
-import { eq, and, desc } from "drizzle-orm";
-import { awardPoints, checkAchievements } from "../../lib/gamification";
-import { requireOwnerOrAdmin } from "../../lib/acl";
+import { eq, and, desc, ilike, count } from "drizzle-orm";
+import { requireOwnerOrAdmin, requireAdmin } from "../../lib/acl";
+import { gamificationQueue } from "../../queues/index";
 
 builder.queryField("commentsForVideo", (t) =>
   t.field({
@@ -20,7 +20,7 @@ builder.queryField("commentsForVideo", (t) =>
         .orderBy(desc(comments.date_created));
 
       return Promise.all(
-        commentList.map(async (c: any) => {
+        commentList.map(async (c) => {
           const user = await ctx.db
             .select({
               id: users.id,
@@ -59,9 +59,16 @@ builder.mutationField("createCommentForVideo", (t) =>
         })
         .returning();
 
-      // Gamification
-      await awardPoints(ctx.db, ctx.currentUser.id, "COMMENT_CREATE");
-      await checkAchievements(ctx.db, ctx.currentUser.id, "social");
+      await gamificationQueue.add("awardPoints", {
+        job: "awardPoints",
+        userId: ctx.currentUser.id,
+        action: "COMMENT_CREATE",
+      });
+      await gamificationQueue.add("checkAchievements", {
+        job: "checkAchievements",
+        userId: ctx.currentUser.id,
+        category: "social",
+      });
 
       const user = await ctx.db
         .select({
@@ -91,7 +98,68 @@ builder.mutationField("deleteComment", (t) =>
       if (!comment[0]) throw new GraphQLError("Comment not found");
       requireOwnerOrAdmin(ctx, comment[0].user_id);
       await ctx.db.delete(comments).where(eq(comments.id, args.id));
+
+      await gamificationQueue.add("revokePoints", {
+        job: "revokePoints",
+        userId: comment[0].user_id,
+        action: "COMMENT_CREATE",
+      });
+      await gamificationQueue.add("checkAchievements", {
+        job: "checkAchievements",
+        userId: comment[0].user_id,
+        category: "social",
+      });
+
       return true;
     },
   }),
 );
+
+builder.queryField("adminListComments", (t) =>
+  t.field({
+    type: AdminCommentListType,
+    args: {
+      search: t.arg.string(),
+      limit: t.arg.int(),
+      offset: t.arg.int(),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const limit = args.limit ?? 50;
+      const offset = args.offset ?? 0;
+
+      const conditions = args.search ? [ilike(comments.comment, `%${args.search}%`)] : [];
+      const where = conditions.length > 0 ? and(...conditions) : undefined;
+
+      const [commentList, totalRows] = await Promise.all([
+        ctx.db
+          .select()
+          .from(comments)
+          .where(where)
+          .orderBy(desc(comments.date_created))
+          .limit(limit)
+          .offset(offset),
+        ctx.db.select({ total: count() }).from(comments).where(where),
+      ]);
+
+      const items = await Promise.all(
+        commentList.map(async (c) => {
+          const user = await ctx.db
+            .select({
+              id: users.id,
+              first_name: users.first_name,
+              last_name: users.last_name,
+              artist_name: users.artist_name,
+              avatar: users.avatar,
+            })
+            .from(users)
+            .where(eq(users.id, c.user_id))
+            .limit(1);
+          return { ...c, user: user[0] || null };
+        }),
+      );
+
+      return { items, total: totalRows[0]?.total ?? 0 };
+    },
+  }),
+);

packages/backend/src/graphql/resolvers/gamification.ts

@@ -37,7 +37,7 @@ builder.queryField("leaderboard", (t) =>
         .limit(limit)
         .offset(offset);
 
-      return entries.map((e: any, i: number) => ({ ...e, rank: offset + i + 1 }));
+      return entries.map((e, i) => ({ ...e, rank: offset + i + 1 }));
     },
   }),
 );
@@ -101,8 +101,15 @@ builder.queryField("userGamification", (t) =>
 
       return {
         stats: stats[0] ? { ...stats[0], rank } : null,
-        achievements: userAchievements.map((a: any) => ({
-          ...a,
+        achievements: userAchievements.map((a) => ({
+          id: a.id!,
+          code: a.code!,
+          name: a.name!,
+          description: a.description!,
+          icon: a.icon!,
+          category: a.category!,
+          required_count: a.required_count!,
+          progress: a.progress!,
           date_unlocked: a.date_unlocked!,
         })),
         recent_points: recentPoints,

packages/backend/src/graphql/resolvers/models.ts

@@ -1,9 +1,10 @@
 import { builder } from "../builder";
 import { ModelType, ModelListType } from "../types/index";
 import { users, user_photos, files } from "../../db/schema/index";
-import { eq, and, desc, asc, ilike, count, arrayContains } from "drizzle-orm";
+import { eq, and, desc, asc, ilike, count, arrayContains, type SQL } from "drizzle-orm";
+import type { DB } from "../../db/connection";
 
-async function enrichModel(db: any, user: any) {
+async function enrichModel(db: DB, user: typeof users.$inferSelect) {
   // Fetch photos
   const photoRows = await db
     .select({ id: files.id, filename: files.filename })
@@ -12,10 +13,12 @@ async function enrichModel(db: any, user: any) {
     .where(eq(user_photos.user_id, user.id))
     .orderBy(user_photos.sort);
 
-  return {
-    ...user,
-    photos: photoRows.map((p: any) => ({ id: p.id, filename: p.filename })),
-  };
+  const seen = new Set<string>();
+  const photos = photoRows
+    .filter((p) => p.id !== null && !seen.has(p.id!) && seen.add(p.id!))
+    .map((p) => ({ id: p.id!, filename: p.filename! }));
+
+  return { ...user, photos };
 }
 
 builder.queryField("models", (t) =>
@@ -33,7 +36,7 @@ builder.queryField("models", (t) =>
       const pageSize = args.limit ?? 24;
       const offset = args.offset ?? 0;
 
-      const conditions: any[] = [eq(users.role, "model")];
+      const conditions: SQL<unknown>[] = [eq(users.role, "model")];
       if (args.search) conditions.push(ilike(users.artist_name, `%${args.search}%`));
       if (args.tag) conditions.push(arrayContains(users.tags, [args.tag]));
 
@@ -44,7 +47,7 @@ builder.queryField("models", (t) =>
         ctx.db.select().from(users).where(where).orderBy(order).limit(pageSize).offset(offset),
         ctx.db.select({ total: count() }).from(users).where(where),
       ]);
-      const items = await Promise.all(modelList.map((m: any) => enrichModel(ctx.db, m)));
+      const items = await Promise.all(modelList.map((m) => enrichModel(ctx.db, m)));
       return { items, total: totalRows[0]?.total ?? 0 };
     },
   }),

packages/backend/src/graphql/resolvers/queues.ts

@@ -0,0 +1,151 @@
+import { GraphQLError } from "graphql";
+import type { Job } from "bullmq";
+import { builder } from "../builder.js";
+import { JobType, QueueInfoType } from "../types/index.js";
+import { queues } from "../../queues/index.js";
+import { requireAdmin } from "../../lib/acl.js";
+
+const JOB_STATUSES = ["waiting", "active", "completed", "failed", "delayed"] as const;
+type JobStatus = (typeof JOB_STATUSES)[number];
+
+async function toJobData(job: Job, queueName: string) {
+  const status = await job.getState();
+  return {
+    id: job.id ?? "",
+    name: job.name,
+    queue: queueName,
+    status,
+    data: job.data as unknown,
+    result: job.returnvalue as unknown,
+    failedReason: job.failedReason ?? null,
+    attemptsMade: job.attemptsMade,
+    createdAt: new Date(job.timestamp),
+    processedAt: job.processedOn ? new Date(job.processedOn) : null,
+    finishedAt: job.finishedOn ? new Date(job.finishedOn) : null,
+    progress: typeof job.progress === "number" ? job.progress : null,
+  };
+}
+
+builder.queryField("adminQueues", (t) =>
+  t.field({
+    type: [QueueInfoType],
+    resolve: async (_root, _args, ctx) => {
+      requireAdmin(ctx);
+      return Promise.all(
+        Object.entries(queues).map(async ([name, queue]) => {
+          const counts = await queue.getJobCounts(
+            "waiting",
+            "active",
+            "completed",
+            "failed",
+            "delayed",
+            "paused",
+          );
+          const isPaused = await queue.isPaused();
+          return {
+            name,
+            counts: {
+              waiting: counts.waiting ?? 0,
+              active: counts.active ?? 0,
+              completed: counts.completed ?? 0,
+              failed: counts.failed ?? 0,
+              delayed: counts.delayed ?? 0,
+              paused: counts.paused ?? 0,
+            },
+            isPaused,
+          };
+        }),
+      );
+    },
+  }),
+);
+
+builder.queryField("adminQueueJobs", (t) =>
+  t.field({
+    type: [JobType],
+    args: {
+      queue: t.arg.string({ required: true }),
+      status: t.arg.string(),
+      limit: t.arg.int(),
+      offset: t.arg.int(),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const queue = queues[args.queue];
+      if (!queue) throw new GraphQLError(`Queue "${args.queue}" not found`);
+
+      const limit = args.limit ?? 25;
+      const offset = args.offset ?? 0;
+      const statuses: JobStatus[] = args.status ? [args.status as JobStatus] : [...JOB_STATUSES];
+
+      const jobs = await queue.getJobs(statuses, offset, offset + limit - 1);
+      return Promise.all(jobs.map((job) => toJobData(job, args.queue)));
+    },
+  }),
+);
+
+builder.mutationField("adminRetryJob", (t) =>
+  t.field({
+    type: "Boolean",
+    args: {
+      queue: t.arg.string({ required: true }),
+      jobId: t.arg.string({ required: true }),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const queue = queues[args.queue];
+      if (!queue) throw new GraphQLError(`Queue "${args.queue}" not found`);
+      const job = await queue.getJob(args.jobId);
+      if (!job) throw new GraphQLError(`Job "${args.jobId}" not found`);
+      await job.retry();
+      return true;
+    },
+  }),
+);
+
+builder.mutationField("adminRemoveJob", (t) =>
+  t.field({
+    type: "Boolean",
+    args: {
+      queue: t.arg.string({ required: true }),
+      jobId: t.arg.string({ required: true }),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const queue = queues[args.queue];
+      if (!queue) throw new GraphQLError(`Queue "${args.queue}" not found`);
+      const job = await queue.getJob(args.jobId);
+      if (!job) throw new GraphQLError(`Job "${args.jobId}" not found`);
+      await job.remove();
+      return true;
+    },
+  }),
+);
+
+builder.mutationField("adminPauseQueue", (t) =>
+  t.field({
+    type: "Boolean",
+    args: { queue: t.arg.string({ required: true }) },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const queue = queues[args.queue];
+      if (!queue) throw new GraphQLError(`Queue "${args.queue}" not found`);
+      await queue.pause();
+      return true;
+    },
+  }),
+);
+
+builder.mutationField("adminResumeQueue", (t) =>
+  t.field({
+    type: "Boolean",
+    args: { queue: t.arg.string({ required: true }) },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const queue = queues[args.queue];
+      if (!queue) throw new GraphQLError(`Queue "${args.queue}" not found`);
+      await queue.resume();
+      return true;
+    },
+  }),
+);

packages/backend/src/graphql/resolvers/recordings.ts

@@ -1,10 +1,11 @@
 import { GraphQLError } from "graphql";
 import { builder } from "../builder";
-import { RecordingType } from "../types/index";
+import { RecordingType, AdminRecordingListType } from "../types/index";
 import { recordings, recording_plays } from "../../db/schema/index";
-import { eq, and, desc, ne } from "drizzle-orm";
+import { eq, and, desc, ilike, count, type SQL } from "drizzle-orm";
 import { slugify } from "../../lib/slugify";
-import { awardPoints, checkAchievements } from "../../lib/gamification";
+import { requireAdmin } from "../../lib/acl";
+import { gamificationQueue } from "../../queues/index";
 
 builder.queryField("recordings", (t) =>
   t.field({
@@ -20,8 +21,7 @@ builder.queryField("recordings", (t) =>
       if (!ctx.currentUser) throw new GraphQLError("Unauthorized");
 
       const conditions = [eq(recordings.user_id, ctx.currentUser.id)];
-      if (args.status) conditions.push(eq(recordings.status, args.status as any));
-      else conditions.push(ne(recordings.status, "archived" as any));
+      if (args.status) conditions.push(eq(recordings.status, args.status as "draft" | "published"));
       if (args.linkedVideoId) conditions.push(eq(recordings.linked_video, args.linkedVideoId));
 
       const limit = args.limit || 50;
@@ -115,17 +115,25 @@ builder.mutationField("createRecording", (t) =>
           user_id: ctx.currentUser.id,
           tags: args.tags || [],
           linked_video: args.linkedVideoId || null,
-          status: (args.status as any) || "draft",
+          status: (args.status as "draft" | "published") || "draft",
           public: false,
         })
         .returning();
 
       const recording = newRecording[0];
 
-      // Gamification: award points if published
       if (recording.status === "published") {
-        await awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_CREATE", recording.id);
-        await checkAchievements(ctx.db, ctx.currentUser.id, "recordings");
+        await gamificationQueue.add("awardPoints", {
+          job: "awardPoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_CREATE",
+          recordingId: recording.id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "recordings",
+        });
       }
 
       return recording;
@@ -173,20 +181,51 @@ builder.mutationField("updateRecording", (t) =>
 
       const updated = await ctx.db
         .update(recordings)
-        .set(updates as any)
+        .set(updates as Partial<typeof recordings.$inferInsert>)
         .where(eq(recordings.id, args.id))
         .returning();
 
       const recording = updated[0];
 
-      // Gamification: if newly published
       if (args.status === "published" && existing[0].status !== "published") {
-        await awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_CREATE", recording.id);
-        await checkAchievements(ctx.db, ctx.currentUser.id, "recordings");
-      }
-      if (args.status === "published" && recording.featured && !existing[0].featured) {
-        await awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_FEATURED", recording.id);
-        await checkAchievements(ctx.db, ctx.currentUser.id, "recordings");
+        // draft → published: award creation points
+        await gamificationQueue.add("awardPoints", {
+          job: "awardPoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_CREATE",
+          recordingId: recording.id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "recordings",
+        });
+      } else if (args.status === "draft" && existing[0].status === "published") {
+        // published → draft: revoke creation points
+        await gamificationQueue.add("revokePoints", {
+          job: "revokePoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_CREATE",
+          recordingId: recording.id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "recordings",
+        });
+      } else if (args.status === "published" && recording.featured && !existing[0].featured) {
+        // newly featured while published: award featured bonus
+        await gamificationQueue.add("awardPoints", {
+          job: "awardPoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_FEATURED",
+          recordingId: recording.id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "recordings",
+        });
       }
 
       return recording;
@@ -212,6 +251,28 @@ builder.mutationField("deleteRecording", (t) =>
       if (!existing[0]) throw new GraphQLError("Recording not found");
       if (existing[0].user_id !== ctx.currentUser.id) throw new GraphQLError("Forbidden");
 
+      if (existing[0].status === "published") {
+        await gamificationQueue.add("revokePoints", {
+          job: "revokePoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_CREATE",
+          recordingId: args.id,
+        });
+        if (existing[0].featured) {
+          await gamificationQueue.add("revokePoints", {
+            job: "revokePoints",
+            userId: ctx.currentUser.id,
+            action: "RECORDING_FEATURED",
+            recordingId: args.id,
+          });
+        }
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "content",
+        });
+      }
+
       await ctx.db.delete(recordings).where(eq(recordings.id, args.id));
 
       return true;
@@ -288,10 +349,18 @@ builder.mutationField("recordRecordingPlay", (t) =>
         })
         .returning({ id: recording_plays.id });
 
-      // Gamification
       if (ctx.currentUser && recording[0].user_id !== ctx.currentUser.id) {
-        await awardPoints(ctx.db, ctx.currentUser.id, "RECORDING_PLAY", args.recordingId);
-        await checkAchievements(ctx.db, ctx.currentUser.id, "playback");
+        await gamificationQueue.add("awardPoints", {
+          job: "awardPoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_PLAY",
+          recordingId: args.recordingId,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "playback",
+        });
       }
 
       return { success: true, play_id: play[0].id };
@@ -327,16 +396,69 @@ builder.mutationField("updateRecordingPlay", (t) =>
         .where(eq(recording_plays.id, args.playId));
 
       if (args.completed && !wasCompleted && ctx.currentUser) {
-        await awardPoints(
-          ctx.db,
-          ctx.currentUser.id,
-          "RECORDING_COMPLETE",
-          existing[0].recording_id,
-        );
-        await checkAchievements(ctx.db, ctx.currentUser.id, "playback");
+        await gamificationQueue.add("awardPoints", {
+          job: "awardPoints",
+          userId: ctx.currentUser.id,
+          action: "RECORDING_COMPLETE",
+          recordingId: existing[0].recording_id,
+        });
+        await gamificationQueue.add("checkAchievements", {
+          job: "checkAchievements",
+          userId: ctx.currentUser.id,
+          category: "playback",
+        });
       }
 
       return true;
     },
   }),
 );
+
+builder.queryField("adminListRecordings", (t) =>
+  t.field({
+    type: AdminRecordingListType,
+    args: {
+      search: t.arg.string(),
+      status: t.arg.string(),
+      limit: t.arg.int(),
+      offset: t.arg.int(),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const limit = args.limit ?? 50;
+      const offset = args.offset ?? 0;
+
+      const conditions: SQL<unknown>[] = [];
+      if (args.search) conditions.push(ilike(recordings.title, `%${args.search}%`));
+      if (args.status) conditions.push(eq(recordings.status, args.status as "draft" | "published"));
+      const where = conditions.length > 0 ? and(...conditions) : undefined;
+
+      const [rows, totalRows] = await Promise.all([
+        ctx.db
+          .select()
+          .from(recordings)
+          .where(where)
+          .orderBy(desc(recordings.date_created))
+          .limit(limit)
+          .offset(offset),
+        ctx.db.select({ total: count() }).from(recordings).where(where),
+      ]);
+
+      return { items: rows, total: totalRows[0]?.total ?? 0 };
+    },
+  }),
+);
+
+builder.mutationField("adminDeleteRecording", (t) =>
+  t.field({
+    type: "Boolean",
+    args: {
+      id: t.arg.string({ required: true }),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      await ctx.db.delete(recordings).where(eq(recordings.id, args.id));
+      return true;
+    },
+  }),
+);

packages/backend/src/graphql/resolvers/users.ts

@@ -2,7 +2,7 @@ import { GraphQLError } from "graphql";
 import { builder } from "../builder";
 import { CurrentUserType, UserType, AdminUserListType, AdminUserDetailType } from "../types/index";
 import { users, user_photos, files } from "../../db/schema/index";
-import { eq, ilike, or, count, and } from "drizzle-orm";
+import { eq, ilike, or, count, and, asc, type SQL } from "drizzle-orm";
 import { requireAdmin } from "../../lib/acl";
 
 builder.queryField("me", (t) =>
@@ -45,6 +45,7 @@ builder.mutationField("updateProfile", (t) =>
       artistName: t.arg.string(),
       description: t.arg.string(),
       tags: t.arg.stringList(),
+      avatar: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
       if (!ctx.currentUser) throw new GraphQLError("Unauthorized");
@@ -58,10 +59,11 @@ builder.mutationField("updateProfile", (t) =>
       if (args.description !== undefined && args.description !== null)
         updates.description = args.description;
       if (args.tags !== undefined && args.tags !== null) updates.tags = args.tags;
+      if (args.avatar !== undefined) updates.avatar = args.avatar;
 
       await ctx.db
         .update(users)
-        .set(updates as any)
+        .set(updates as Partial<typeof users.$inferInsert>)
         .where(eq(users.id, ctx.currentUser.id));
 
       const updated = await ctx.db
@@ -91,27 +93,27 @@ builder.queryField("adminListUsers", (t) =>
       const limit = args.limit ?? 50;
       const offset = args.offset ?? 0;
 
-      let query = ctx.db.select().from(users);
-      let countQuery = ctx.db.select({ total: count() }).from(users);
-
-      const conditions: any[] = [];
+      const conditions: SQL<unknown>[] = [];
       if (args.role) {
-        conditions.push(eq(users.role, args.role as any));
+        conditions.push(eq(users.role, args.role as "model" | "viewer" | "admin"));
       }
       if (args.search) {
         const pattern = `%${args.search}%`;
-        conditions.push(or(ilike(users.email, pattern), ilike(users.artist_name, pattern)));
-      }
-
-      if (conditions.length > 0) {
-        const where = conditions.length === 1 ? conditions[0] : and(...conditions);
-        query = (query as any).where(where);
-        countQuery = (countQuery as any).where(where);
+        conditions.push(
+          or(ilike(users.email, pattern), ilike(users.artist_name, pattern)) as SQL<unknown>,
+        );
       }
 
+      const where = conditions.length > 0 ? and(...conditions) : undefined;
       const [items, totalRows] = await Promise.all([
-        (query as any).limit(limit).offset(offset),
-        countQuery,
+        ctx.db
+          .select()
+          .from(users)
+          .where(where)
+          .orderBy(asc(users.artist_name))
+          .limit(limit)
+          .offset(offset),
+        ctx.db.select({ total: count() }).from(users).where(where),
       ]);
 
       return { items, total: totalRows[0]?.total ?? 0 };
@@ -132,12 +134,14 @@ builder.mutationField("adminUpdateUser", (t) =>
       artistName: t.arg.string(),
       avatarId: t.arg.string(),
       bannerId: t.arg.string(),
+      photoId: t.arg.string(),
     },
     resolve: async (_root, args, ctx) => {
       requireAdmin(ctx);
 
       const updates: Record<string, unknown> = { date_updated: new Date() };
-      if (args.role !== undefined && args.role !== null) updates.role = args.role as any;
+      if (args.role !== undefined && args.role !== null)
+        updates.role = args.role as "model" | "viewer" | "admin";
       if (args.isAdmin !== undefined && args.isAdmin !== null) updates.is_admin = args.isAdmin;
       if (args.firstName !== undefined && args.firstName !== null)
         updates.first_name = args.firstName;
@@ -146,10 +150,11 @@ builder.mutationField("adminUpdateUser", (t) =>
         updates.artist_name = args.artistName;
       if (args.avatarId !== undefined && args.avatarId !== null) updates.avatar = args.avatarId;
       if (args.bannerId !== undefined && args.bannerId !== null) updates.banner = args.bannerId;
+      if (args.photoId !== undefined && args.photoId !== null) updates.photo = args.photoId;
 
       const updated = await ctx.db
         .update(users)
-        .set(updates as any)
+        .set(updates as Partial<typeof users.$inferInsert>)
         .where(eq(users.id, args.userId))
         .returning();
 
@@ -192,8 +197,8 @@ builder.queryField("adminGetUser", (t) =>
         .orderBy(user_photos.sort);
       const seen = new Set<string>();
       const photos = photoRows
-        .filter((p: any) => p.id && !seen.has(p.id) && seen.add(p.id))
-        .map((p: any) => ({ id: p.id, filename: p.filename }));
+        .filter((p) => p.id !== null && !seen.has(p.id!) && seen.add(p.id!))
+        .map((p) => ({ id: p.id!, filename: p.filename! }));
       return { ...user[0], photos };
     },
   }),

packages/backend/src/graphql/resolvers/videos.ts

@@ -28,10 +28,12 @@ import {
   lt,
   gte,
   arrayContains,
+  type SQL,
 } from "drizzle-orm";
 import { requireAdmin } from "../../lib/acl";
+import type { DB } from "../../db/connection";
 
-async function enrichVideo(db: any, video: any) {
+async function enrichVideo(db: DB, video: typeof videos.$inferSelect) {
   // Fetch models
   const modelRows = await db
     .select({
@@ -39,6 +41,7 @@ async function enrichVideo(db: any, video: any) {
       artist_name: users.artist_name,
       slug: users.slug,
       avatar: users.avatar,
+      description: users.description,
     })
     .from(video_models)
     .leftJoin(users, eq(video_models.user_id, users.id))
@@ -61,9 +64,19 @@ async function enrichVideo(db: any, video: any) {
     .from(video_plays)
     .where(eq(video_plays.video_id, video.id));
 
+  const models = modelRows
+    .filter((m) => m.id !== null)
+    .map((m) => ({
+      id: m.id!,
+      artist_name: m.artist_name,
+      slug: m.slug,
+      avatar: m.avatar,
+      description: m.description,
+    }));
+
   return {
     ...video,
-    models: modelRows,
+    models,
     movie_file: movieFile,
     likes_count: likesCount[0]?.count || 0,
     plays_count: playsCount[0]?.count || 0,
@@ -87,7 +100,7 @@ builder.queryField("videos", (t) =>
       const pageSize = args.limit ?? 24;
       const offset = args.offset ?? 0;
 
-      const conditions: any[] = [lte(videos.upload_date, new Date())];
+      const conditions: SQL<unknown>[] = [lte(videos.upload_date, new Date())];
       if (!ctx.currentUser) conditions.push(eq(videos.premium, false));
       if (args.featured !== null && args.featured !== undefined) {
         conditions.push(eq(videos.featured, args.featured));
@@ -107,7 +120,7 @@ builder.queryField("videos", (t) =>
         conditions.push(
           inArray(
             videos.id,
-            videoIds.map((v: any) => v.video_id),
+            videoIds.map((v) => v.video_id),
           ),
         );
       }
@@ -148,8 +161,8 @@ builder.queryField("videos", (t) =>
             .leftJoin(files, eq(videos.movie, files.id))
             .where(fullWhere),
         ]);
-        const videoList = rows.map((r: any) => r.v || r);
-        const items = await Promise.all(videoList.map((v: any) => enrichVideo(ctx.db, v)));
+        const videoList = rows.map((r) => r.v);
+        const items = await Promise.all(videoList.map((v) => enrichVideo(ctx.db, v)));
         return { items, total: totalRows[0]?.total ?? 0 };
       }
 
@@ -157,7 +170,7 @@ builder.queryField("videos", (t) =>
         ctx.db.select().from(videos).where(where).orderBy(order).limit(pageSize).offset(offset),
         ctx.db.select({ total: count() }).from(videos).where(where),
       ]);
-      const items = await Promise.all(rows.map((v: any) => enrichVideo(ctx.db, v)));
+      const items = await Promise.all(rows.map((v) => enrichVideo(ctx.db, v)));
       return { items, total: totalRows[0]?.total ?? 0 };
     },
   }),
@@ -188,6 +201,22 @@ builder.queryField("video", (t) =>
   }),
 );
 
+builder.queryField("adminGetVideo", (t) =>
+  t.field({
+    type: VideoType,
+    nullable: true,
+    args: {
+      id: t.arg.string({ required: true }),
+    },
+    resolve: async (_root, args, ctx) => {
+      requireAdmin(ctx);
+      const video = await ctx.db.select().from(videos).where(eq(videos.id, args.id)).limit(1);
+      if (!video[0]) return null;
+      return enrichVideo(ctx.db, video[0]);
+    },
+  }),
+);
+
 builder.queryField("videoLikeStatus", (t) =>
   t.field({
     type: VideoLikeStatusType,
@@ -405,7 +434,7 @@ builder.queryField("analytics", (t) =>
         };
       }
 
-      const videoIds = modelVideoIds.map((v: any) => v.video_id);
+      const videoIds = modelVideoIds.map((v) => v.video_id);
       const videoList = await ctx.db.select().from(videos).where(inArray(videos.id, videoIds));
       const plays = await ctx.db
         .select()
@@ -419,14 +448,14 @@ builder.queryField("analytics", (t) =>
       const totalLikes = videoList.reduce((sum, v) => sum + (v.likes_count || 0), 0);
       const totalPlays = videoList.reduce((sum, v) => sum + (v.plays_count || 0), 0);
 
-      const playsByDate = plays.reduce((acc: any, play) => {
+      const playsByDate = plays.reduce((acc: Record<string, number>, play) => {
         const date = new Date(play.date_created).toISOString().split("T")[0];
         if (!acc[date]) acc[date] = 0;
         acc[date]++;
         return acc;
       }, {});
 
-      const likesByDate = likes.reduce((acc: any, like) => {
+      const likesByDate = likes.reduce((acc: Record<string, number>, like) => {
         const date = new Date(like.date_created).toISOString().split("T")[0];
         if (!acc[date]) acc[date] = 0;
         acc[date]++;
@@ -483,7 +512,7 @@ builder.queryField("adminListVideos", (t) =>
       const limit = args.limit ?? 50;
       const offset = args.offset ?? 0;
 
-      const conditions: any[] = [];
+      const conditions: SQL<unknown>[] = [];
       if (args.search) conditions.push(ilike(videos.title, `%${args.search}%`));
       if (args.premium !== null && args.premium !== undefined)
         conditions.push(eq(videos.premium, args.premium));
@@ -501,7 +530,7 @@ builder.queryField("adminListVideos", (t) =>
           .offset(offset),
         ctx.db.select({ total: count() }).from(videos).where(where),
       ]);
-      const items = await Promise.all(rows.map((v: any) => enrichVideo(ctx.db, v)));
+      const items = await Promise.all(rows.map((v) => enrichVideo(ctx.db, v)));
       return { items, total: totalRows[0]?.total ?? 0 };
     },
   }),
@@ -574,7 +603,7 @@ builder.mutationField("updateVideo", (t) =>
 
       const updated = await ctx.db
         .update(videos)
-        .set(updates as any)
+        .set(updates as Partial<typeof videos.$inferInsert>)
         .where(eq(videos.id, args.id))
         .returning();
       if (!updated[0]) return null;

packages/backend/src/graphql/types/index.ts

@@ -22,7 +22,7 @@ import type {
   RecentPoint,
   UserGamification,
   Achievement,
-} from "@sexy.pivoine.art/types";
+} from "@sexy/types";
 
 type AdminUserDetail = User & { photos: ModelPhoto[] };
 import { builder } from "../builder";
@@ -55,6 +55,7 @@ export const UserType = builder.objectRef<User>("User").implement({
     is_admin: t.exposeBoolean("is_admin"),
     avatar: t.exposeString("avatar", { nullable: true }),
     banner: t.exposeString("banner", { nullable: true }),
+    photo: t.exposeString("photo", { nullable: true }),
     email_verified: t.exposeBoolean("email_verified"),
     date_created: t.expose("date_created", { type: "DateTime" }),
   }),
@@ -75,6 +76,7 @@ export const CurrentUserType = builder.objectRef<User>("CurrentUser").implement(
     is_admin: t.exposeBoolean("is_admin"),
     avatar: t.exposeString("avatar", { nullable: true }),
     banner: t.exposeString("banner", { nullable: true }),
+    photo: t.exposeString("photo", { nullable: true }),
     email_verified: t.exposeBoolean("email_verified"),
     date_created: t.expose("date_created", { type: "DateTime" }),
   }),
@@ -86,6 +88,7 @@ export const VideoModelType = builder.objectRef<VideoModel>("VideoModel").implem
     artist_name: t.exposeString("artist_name", { nullable: true }),
     slug: t.exposeString("slug", { nullable: true }),
     avatar: t.exposeString("avatar", { nullable: true }),
+    description: t.exposeString("description", { nullable: true }),
   }),
 });
 
@@ -132,6 +135,7 @@ export const ModelType = builder.objectRef<Model>("Model").implement({
     description: t.exposeString("description", { nullable: true }),
     avatar: t.exposeString("avatar", { nullable: true }),
     banner: t.exposeString("banner", { nullable: true }),
+    photo: t.exposeString("photo", { nullable: true }),
     tags: t.exposeStringList("tags", { nullable: true }),
     date_created: t.expose("date_created", { type: "DateTime" }),
     photos: t.expose("photos", { type: [ModelPhotoType], nullable: true }),
@@ -329,6 +333,74 @@ export const AchievementType = builder.objectRef<Achievement>("Achievement").imp
   }),
 });
 
+// --- Queue / Job types (admin only, not in shared types package) ---
+
+type JobCounts = {
+  waiting: number;
+  active: number;
+  completed: number;
+  failed: number;
+  delayed: number;
+  paused: number;
+};
+
+type JobData = {
+  id: string;
+  name: string;
+  queue: string;
+  status: string;
+  data: unknown;
+  result: unknown;
+  failedReason: string | null;
+  attemptsMade: number;
+  createdAt: Date;
+  processedAt: Date | null;
+  finishedAt: Date | null;
+  progress: number | null;
+};
+
+type QueueInfoData = {
+  name: string;
+  counts: JobCounts;
+  isPaused: boolean;
+};
+
+export const JobCountsType = builder.objectRef<JobCounts>("JobCounts").implement({
+  fields: (t) => ({
+    waiting: t.exposeInt("waiting"),
+    active: t.exposeInt("active"),
+    completed: t.exposeInt("completed"),
+    failed: t.exposeInt("failed"),
+    delayed: t.exposeInt("delayed"),
+    paused: t.exposeInt("paused"),
+  }),
+});
+
+export const JobType = builder.objectRef<JobData>("Job").implement({
+  fields: (t) => ({
+    id: t.exposeString("id"),
+    name: t.exposeString("name"),
+    queue: t.exposeString("queue"),
+    status: t.exposeString("status"),
+    data: t.expose("data", { type: "JSON" }),
+    result: t.expose("result", { type: "JSON", nullable: true }),
+    failedReason: t.exposeString("failedReason", { nullable: true }),
+    attemptsMade: t.exposeInt("attemptsMade"),
+    createdAt: t.expose("createdAt", { type: "DateTime" }),
+    processedAt: t.expose("processedAt", { type: "DateTime", nullable: true }),
+    finishedAt: t.expose("finishedAt", { type: "DateTime", nullable: true }),
+    progress: t.exposeFloat("progress", { nullable: true }),
+  }),
+});
+
+export const QueueInfoType = builder.objectRef<QueueInfoData>("QueueInfo").implement({
+  fields: (t) => ({
+    name: t.exposeString("name"),
+    counts: t.expose("counts", { type: JobCountsType }),
+    isPaused: t.exposeBoolean("isPaused"),
+  }),
+});
+
 export const VideoListType = builder
   .objectRef<{ items: Video[]; total: number }>("VideoList")
   .implement({
@@ -374,6 +446,24 @@ export const AdminArticleListType = builder
     }),
   });
 
+export const AdminCommentListType = builder
+  .objectRef<{ items: Comment[]; total: number }>("AdminCommentList")
+  .implement({
+    fields: (t) => ({
+      items: t.expose("items", { type: [CommentType] }),
+      total: t.exposeInt("total"),
+    }),
+  });
+
+export const AdminRecordingListType = builder
+  .objectRef<{ items: Recording[]; total: number }>("AdminRecordingList")
+  .implement({
+    fields: (t) => ({
+      items: t.expose("items", { type: [RecordingType] }),
+      total: t.exposeInt("total"),
+    }),
+  });
+
 export const AdminUserListType = builder
   .objectRef<{ items: User[]; total: number }>("AdminUserList")
   .implement({
@@ -397,6 +487,7 @@ export const AdminUserDetailType = builder.objectRef<AdminUserDetail>("AdminUser
     is_admin: t.exposeBoolean("is_admin"),
     avatar: t.exposeString("avatar", { nullable: true }),
     banner: t.exposeString("banner", { nullable: true }),
+    photo: t.exposeString("photo", { nullable: true }),
     email_verified: t.exposeBoolean("email_verified"),
     date_created: t.expose("date_created", { type: "DateTime" }),
     photos: t.expose("photos", { type: [ModelPhotoType] }),

packages/backend/src/index.ts

@@ -7,19 +7,34 @@ import { createYoga } from "graphql-yoga";
 import { eq } from "drizzle-orm";
 import { files } from "./db/schema/index";
 import path from "path";
-import { existsSync } from "fs";
+import { existsSync, mkdirSync } from "fs";
+import { writeFile, rm } from "fs/promises";
 import sharp from "sharp";
 import { schema } from "./graphql/index";
 import { buildContext } from "./graphql/context";
 import { db } from "./db/connection";
 import { redis } from "./lib/auth";
 import { logger } from "./lib/logger";
+import { migrate } from "drizzle-orm/node-postgres/migrator";
+import { startMailWorker } from "./queues/workers/mail";
+import { startGamificationWorker } from "./queues/workers/gamification";
 
 const PORT = parseInt(process.env.PORT || "4000");
 const UPLOAD_DIR = process.env.UPLOAD_DIR || "/data/uploads";
 const CORS_ORIGIN = process.env.CORS_ORIGIN || "http://localhost:3000";
 
 async function main() {
+  // Run pending DB migrations before starting the server
+  const migrationsFolder = path.join(__dirname, "migrations");
+  logger.info(`Running migrations from ${migrationsFolder}`);
+  await migrate(db, { migrationsFolder });
+  logger.info("Migrations complete");
+
+  // Start background workers
+  startMailWorker();
+  startGamificationWorker();
+  logger.info("Queue workers started");
+
   const fastify = Fastify({ loggerInstance: logger });
 
   await fastify.register(fastifyCookie, {
@@ -120,6 +135,54 @@ async function main() {
     return reply.sendFile(path.join(id, filename));
   });
 
+  // Upload a file: POST /upload (multipart, requires session)
+  fastify.post("/upload", async (request, reply) => {
+    const token = request.cookies["session_token"];
+    if (!token) return reply.status(401).send({ error: "Unauthorized" });
+
+    const sessionData = await redis.get(`session:${token}`);
+    if (!sessionData) return reply.status(401).send({ error: "Unauthorized" });
+    const { id: userId } = JSON.parse(sessionData);
+
+    const data = await request.file();
+    if (!data) return reply.status(400).send({ error: "No file provided" });
+
+    const id = crypto.randomUUID();
+    const filename = data.filename;
+    const mime_type = data.mimetype;
+    const dir = path.join(UPLOAD_DIR, id);
+
+    mkdirSync(dir, { recursive: true });
+    const buffer = await data.toBuffer();
+    await writeFile(path.join(dir, filename), buffer);
+
+    const [file] = await db
+      .insert(files)
+      .values({ id, filename, mime_type, filesize: buffer.byteLength, uploaded_by: userId })
+      .returning();
+
+    return reply.status(201).send(file);
+  });
+
+  // Delete a file: DELETE /assets/:id (requires session)
+  fastify.delete("/assets/:id", async (request, reply) => {
+    const token = request.cookies["session_token"];
+    if (!token) return reply.status(401).send({ error: "Unauthorized" });
+
+    const sessionData = await redis.get(`session:${token}`);
+    if (!sessionData) return reply.status(401).send({ error: "Unauthorized" });
+
+    const { id } = request.params as { id: string };
+    const result = await db.select().from(files).where(eq(files.id, id)).limit(1);
+    if (!result[0]) return reply.status(404).send({ error: "File not found" });
+
+    await db.delete(files).where(eq(files.id, id));
+    const dir = path.join(UPLOAD_DIR, id);
+    await rm(dir, { recursive: true, force: true });
+
+    return reply.status(200).send({ ok: true });
+  });
+
   fastify.get("/health", async (_request, reply) => {
     return reply.send({ status: "ok", timestamp: new Date().toISOString() });
   });

packages/backend/src/lib/auth.ts

@@ -21,6 +21,8 @@ export async function setSession(token: string, user: SessionUser): Promise<void
 export async function getSession(token: string): Promise<SessionUser | null> {
   const data = await redis.get(`session:${token}`);
   if (!data) return null;
+  // Slide the expiration window on every access
+  await redis.expire(`session:${token}`, 86400);
   return JSON.parse(data) as SessionUser;
 }
 

packages/backend/src/lib/email.ts

@@ -1,4 +1,6 @@
 import nodemailer from "nodemailer";
+import { renderVerification, renderPasswordReset } from "@sexy/email";
+import { mailQueue } from "../queues/index.js";
 
 const transporter = nodemailer.createTransport({
   host: process.env.SMTP_HOST || "localhost",
@@ -12,23 +14,24 @@ const transporter = nodemailer.createTransport({
     : undefined,
 });
 
-const FROM = process.env.EMAIL_FROM || "noreply@sexy.pivoine.art";
-const BASE_URL = process.env.PUBLIC_URL || "http://localhost:3000";
+const FROM = process.env.EMAIL_FROM || "noreply@sexy";
 
 export async function sendVerification(email: string, token: string): Promise<void> {
-  await transporter.sendMail({
-    from: FROM,
-    to: email,
-    subject: "Verify your email",
-    html: `<p>Click <a href="${BASE_URL}/signup/verify?token=${token}">here</a> to verify your email.</p>`,
-  });
+  const { subject, html } = await renderVerification({ token });
+  await transporter.sendMail({ from: FROM, to: email, subject, html });
 }
 
 export async function sendPasswordReset(email: string, token: string): Promise<void> {
-  await transporter.sendMail({
-    from: FROM,
-    to: email,
-    subject: "Reset your password",
-    html: `<p>Click <a href="${BASE_URL}/password/reset?token=${token}">here</a> to reset your password.</p>`,
-  });
+  const { subject, html } = await renderPasswordReset({ token });
+  await transporter.sendMail({ from: FROM, to: email, subject, html });
+}
+
+const jobOpts = { attempts: 3, backoff: { type: "exponential" as const, delay: 5000 } };
+
+export async function enqueueVerification(email: string, token: string): Promise<void> {
+  await mailQueue.add("sendVerification", { email, token }, jobOpts);
+}
+
+export async function enqueuePasswordReset(email: string, token: string): Promise<void> {
+  await mailQueue.add("sendPasswordReset", { email, token }, jobOpts);
 }

packages/backend/src/lib/gamification.ts

@@ -1,4 +1,4 @@
-import { eq, sql, and, gt, isNotNull, count, sum } from "drizzle-orm";
+import { eq, sql, and, gt, isNull, isNotNull, count, sum } from "drizzle-orm";
 import type { DB } from "../db/connection";
 import {
   user_points,
@@ -28,26 +28,62 @@ export async function awardPoints(
   recordingId?: string,
 ): Promise<void> {
   const points = POINT_VALUES[action];
-  await db.insert(user_points).values({
-    user_id: userId,
-    action,
-    points,
-    recording_id: recordingId || null,
-    date_created: new Date(),
-  });
+  await db
+    .insert(user_points)
+    .values({
+      user_id: userId,
+      action,
+      points,
+      recording_id: recordingId || null,
+      date_created: new Date(),
+    })
+    .onConflictDoNothing();
+  await updateUserStats(db, userId);
+}
+
+export async function revokePoints(
+  db: DB,
+  userId: string,
+  action: keyof typeof POINT_VALUES,
+  recordingId?: string,
+): Promise<void> {
+  const recordingCondition = recordingId
+    ? eq(user_points.recording_id, recordingId)
+    : isNull(user_points.recording_id);
+
+  // When no recordingId (e.g. COMMENT_CREATE), delete only one row so each
+  // revoke undoes exactly one prior award.
+  if (!recordingId) {
+    const row = await db
+      .select({ id: user_points.id })
+      .from(user_points)
+      .where(
+        and(eq(user_points.user_id, userId), eq(user_points.action, action), recordingCondition),
+      )
+      .limit(1);
+    if (row[0]) {
+      await db.delete(user_points).where(eq(user_points.id, row[0].id));
+    }
+  } else {
+    await db
+      .delete(user_points)
+      .where(
+        and(eq(user_points.user_id, userId), eq(user_points.action, action), recordingCondition),
+      );
+  }
+
   await updateUserStats(db, userId);
 }
 
 export async function calculateWeightedScore(db: DB, userId: string): Promise<number> {
-  const now = new Date();
   const result = await db.execute(sql`
     SELECT SUM(
-      points * EXP(-${DECAY_LAMBDA} * EXTRACT(EPOCH FROM (${now}::timestamptz - date_created)) / 86400)
+      points * EXP(${sql.raw(String(-DECAY_LAMBDA))} * EXTRACT(EPOCH FROM (NOW() - date_created)) / 86400)
     ) as weighted_score
     FROM user_points
     WHERE user_id = ${userId}
   `);
-  return parseFloat((result.rows[0] as any)?.weighted_score || "0");
+  return parseFloat((result.rows[0] as { weighted_score?: string })?.weighted_score || "0");
 }
 
 export async function updateUserStats(db: DB, userId: string): Promise<void> {
@@ -84,7 +120,7 @@ export async function updateUserStats(db: DB, userId: string): Promise<void> {
         sql`, `,
       )})
     `);
-    playbacksCount = parseInt((playbacksResult.rows[0] as any)?.count || "0");
+    playbacksCount = parseInt((playbacksResult.rows[0] as { count?: string })?.count || "0");
   } else {
     const playbacksResult = await db
       .select({ count: count() })
@@ -96,7 +132,7 @@ export async function updateUserStats(db: DB, userId: string): Promise<void> {
   const commentsResult = await db
     .select({ count: count() })
     .from(comments)
-    .where(and(eq(comments.user_id, userId), eq(comments.collection, "recordings")));
+    .where(and(eq(comments.user_id, userId), eq(comments.collection, "videos")));
   const commentsCount = commentsResult[0]?.count || 0;
 
   const achievementsResult = await db
@@ -175,7 +211,9 @@ export async function checkAchievements(db: DB, userId: string, category?: strin
         .update(user_achievements)
         .set({
           progress,
-          date_unlocked: isUnlocked ? existing[0].date_unlocked || new Date() : null,
+          date_unlocked: isUnlocked
+            ? (existing[0].date_unlocked ?? new Date())
+            : existing[0].date_unlocked,
         })
         .where(
           and(
@@ -242,7 +280,7 @@ async function getAchievementProgress(
       WHERE rp.user_id = ${userId}
       AND r.user_id != ${userId}
     `);
-    return parseInt((result.rows[0] as any)?.count || "0");
+    return parseInt((result.rows[0] as { count?: string })?.count || "0");
   }
 
   if (["completionist_10", "completionist_100"].includes(code)) {
@@ -257,7 +295,7 @@ async function getAchievementProgress(
     const result = await db
       .select({ count: count() })
       .from(comments)
-      .where(and(eq(comments.user_id, userId), eq(comments.collection, "recordings")));
+      .where(and(eq(comments.user_id, userId), eq(comments.collection, "videos")));
     return result[0]?.count || 0;
   }
 
@@ -293,7 +331,7 @@ async function getAchievementProgress(
       WHERE rp.user_id = ${userId} AND r.user_id != ${userId}
     `);
     const rc = recordingsResult[0]?.count || 0;
-    const pc = parseInt((playsResult.rows[0] as any)?.count || "0");
+    const pc = parseInt((playsResult.rows[0] as { count?: string })?.count || "0");
     return rc >= 50 && pc >= 100 ? 1 : 0;
   }
 

packages/backend/src/migrations/0002_remove_archived_recording_status.sql

@@ -0,0 +1,8 @@
+-- Update any archived recordings to draft before removing the status
+UPDATE "recordings" SET "status" = 'draft' WHERE "status" = 'archived';--> statement-breakpoint
+
+-- Recreate enum without 'archived'
+ALTER TYPE "public"."recording_status" RENAME TO "recording_status_old";--> statement-breakpoint
+CREATE TYPE "public"."recording_status" AS ENUM('draft', 'published');--> statement-breakpoint
+ALTER TABLE "recordings" ALTER COLUMN "status" TYPE "public"."recording_status" USING "status"::text::"public"."recording_status";--> statement-breakpoint
+DROP TYPE "public"."recording_status_old";

packages/backend/src/migrations/0003_model_photo.sql

@@ -0,0 +1 @@
+ALTER TABLE "users" ADD COLUMN "photo" text REFERENCES "files"("id") ON DELETE set null;

packages/backend/src/migrations/0004_gamification_unique.sql

@@ -0,0 +1,6 @@
+-- Partial unique index: prevents duplicate RECORDING_CREATE / RECORDING_FEATURED points
+-- for the same recording. RECORDING_PLAY / RECORDING_COMPLETE are excluded so a user
+-- can earn play points across multiple sessions.
+CREATE UNIQUE INDEX "user_points_unique_action_recording"
+ON "user_points" ("user_id", "action", "recording_id")
+WHERE "action" IN ('RECORDING_CREATE', 'RECORDING_FEATURED') AND "recording_id" IS NOT NULL;

packages/backend/src/migrations/meta/_journal.json

@@ -15,6 +15,20 @@
       "when": 1772645674514,
       "tag": "0001_is_admin",
       "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "7",
+      "when": 1741337600000,
+      "tag": "0002_remove_archived_recording_status",
+      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "7",
+      "when": 1741420000000,
+      "tag": "0003_model_photo",
+      "breakpoints": true
     }
   ]
 }

packages/backend/src/queues/connection.ts

@@ -0,0 +1,16 @@
+function parseRedisUrl(url: string): { host: string; port: number; password?: string } {
+  const parsed = new URL(url);
+  return {
+    host: parsed.hostname,
+    port: parseInt(parsed.port) || 6379,
+    password: parsed.password || undefined,
+  };
+}
+
+// BullMQ creates its own IORedis connections from these options.
+// maxRetriesPerRequest: null is required for workers.
+export const redisConnectionOpts = {
+  ...parseRedisUrl(process.env.REDIS_URL || "redis://localhost:6379"),
+  maxRetriesPerRequest: null as null,
+  enableReadyCheck: false,
+};

packages/backend/src/queues/index.ts

@@ -0,0 +1,25 @@
+import { Queue } from "bullmq";
+import { redisConnectionOpts } from "./connection.js";
+import { logger } from "../lib/logger.js";
+
+const log = logger.child({ component: "queues" });
+
+export const mailQueue = new Queue("mail", { connection: redisConnectionOpts });
+mailQueue.on("error", (err) => {
+  log.error({ queue: "mail", err: err.message }, "Queue error");
+});
+
+export const gamificationQueue = new Queue("gamification", {
+  connection: redisConnectionOpts,
+  defaultJobOptions: { attempts: 3, backoff: { type: "exponential", delay: 2000 } },
+});
+gamificationQueue.on("error", (err) => {
+  log.error({ queue: "gamification", err: err.message }, "Queue error");
+});
+
+log.info("Queues initialized");
+
+export const queues: Record<string, Queue> = {
+  mail: mailQueue,
+  gamification: gamificationQueue,
+};

packages/backend/src/queues/workers/gamification.ts

@@ -0,0 +1,52 @@
+import { Worker } from "bullmq";
+import { redisConnectionOpts } from "../connection.js";
+import { awardPoints, revokePoints, checkAchievements } from "../../lib/gamification.js";
+import { db } from "../../db/connection.js";
+import { logger } from "../../lib/logger.js";
+import type { POINT_VALUES } from "../../lib/gamification.js";
+
+const log = logger.child({ component: "gamification-worker" });
+
+export type GamificationJobData =
+  | { job: "awardPoints"; userId: string; action: keyof typeof POINT_VALUES; recordingId?: string }
+  | { job: "revokePoints"; userId: string; action: keyof typeof POINT_VALUES; recordingId?: string }
+  | { job: "checkAchievements"; userId: string; category?: string };
+
+export function startGamificationWorker(): Worker {
+  const worker = new Worker(
+    "gamification",
+    async (bullJob) => {
+      const data = bullJob.data as GamificationJobData;
+      log.info(
+        { jobId: bullJob.id, job: data.job, userId: data.userId },
+        "Processing gamification job",
+      );
+
+      switch (data.job) {
+        case "awardPoints":
+          await awardPoints(db, data.userId, data.action, data.recordingId);
+          break;
+        case "revokePoints":
+          await revokePoints(db, data.userId, data.action, data.recordingId);
+          break;
+        case "checkAchievements":
+          await checkAchievements(db, data.userId, data.category);
+          break;
+        default:
+          throw new Error(`Unknown gamification job: ${(data as GamificationJobData).job}`);
+      }
+
+      log.info({ jobId: bullJob.id, job: data.job }, "Gamification job completed");
+    },
+    { connection: redisConnectionOpts },
+  );
+
+  worker.on("failed", (bullJob, err) => {
+    log.error(
+      { jobId: bullJob?.id, job: (bullJob?.data as GamificationJobData)?.job, err: err.message },
+      "Gamification job failed",
+    );
+  });
+
+  return worker;
+}

packages/backend/src/queues/workers/mail.ts

@@ -0,0 +1,33 @@
+import { Worker } from "bullmq";
+import { redisConnectionOpts } from "../connection.js";
+import { sendVerification, sendPasswordReset } from "../../lib/email.js";
+import { logger } from "../../lib/logger.js";
+
+const log = logger.child({ component: "mail-worker" });
+
+export function startMailWorker(): Worker {
+  const worker = new Worker(
+    "mail",
+    async (job) => {
+      log.info({ jobId: job.id, jobName: job.name }, `Processing mail job`);
+      switch (job.name) {
+        case "sendVerification":
+          await sendVerification(job.data.email as string, job.data.token as string);
+          break;
+        case "sendPasswordReset":
+          await sendPasswordReset(job.data.email as string, job.data.token as string);
+          break;
+        default:
+          throw new Error(`Unknown mail job: ${job.name}`);
+      }
+      log.info({ jobId: job.id, jobName: job.name }, `Mail job completed`);
+    },
+    { connection: redisConnectionOpts },
+  );
+
+  worker.on("failed", (job, err) => {
+    log.error({ jobId: job?.id, jobName: job?.name, err: err.message }, `Mail job failed`);
+  });
+
+  return worker;
+}

packages/buttplug/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+wasm/
+target/
+pkg/

packages/buttplug/package.json

@@ -1,7 +1,8 @@
 {
-  "name": "@sexy.pivoine.art/buttplug",
+  "name": "@sexy/buttplug",
   "version": "1.0.0",
   "type": "module",
+  "private": true,
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -10,7 +11,8 @@
   ],
   "scripts": {
     "build": "vite build",
-    "build:wasm": "wasm-pack build --out-dir wasm --out-name index --target bundler --release"
+    "build:wasm": "wasm-pack build --out-dir wasm --out-name index --target web --release",
+    "serve": "node serve.mjs"
   },
   "dependencies": {
     "eventemitter3": "^5.0.4",

packages/buttplug/serve.mjs

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+// Simple static server for local development — serves dist/ and wasm/ on port 8080
+import http from "http";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PORT = process.env.PORT ?? 8080;
+
+const MIME = {
+  ".js": "application/javascript",
+  ".wasm": "application/wasm",
+  ".ts": "text/plain",
+  ".d.ts": "text/plain",
+};
+
+http
+  .createServer((req, res) => {
+    const filePath = path.join(__dirname, decodeURIComponent(req.url.split("?")[0]));
+    const ext = path.extname(filePath);
+
+    fs.readFile(filePath, (err, data) => {
+      if (err) {
+        res.writeHead(404);
+        res.end("Not found");
+        return;
+      }
+      res.writeHead(200, {
+        "Content-Type": MIME[ext] ?? "application/octet-stream",
+        "Cache-Control": "no-cache",
+        "Cross-Origin-Resource-Policy": "cross-origin",
+      });
+      res.end(data);
+    });
+  })
+  .listen(PORT, () => {
+    console.log(`[buttplug] serving on http://localhost:${PORT}`);
+  });

packages/buttplug/src/client/ButtplugBrowserWebsocketClientConnector.ts

@@ -8,8 +8,8 @@
 
 "use strict";
 
-import { IButtplugClientConnector } from "./IButtplugClientConnector";
-import { ButtplugMessage } from "../core/Messages";
+import { type IButtplugClientConnector } from "./IButtplugClientConnector";
+import { type ButtplugMessage } from "../core/Messages";
 import { ButtplugBrowserWebsocketConnector } from "../utils/ButtplugBrowserWebsocketConnector";
 
 export class ButtplugBrowserWebsocketClientConnector

packages/buttplug/src/client/ButtplugClient.ts

@@ -11,7 +11,7 @@
 import { ButtplugLogger } from "../core/Logging";
 import { EventEmitter } from "eventemitter3";
 import { ButtplugClientDevice } from "./ButtplugClientDevice";
-import { IButtplugClientConnector } from "./IButtplugClientConnector";
+import { type IButtplugClientConnector } from "./IButtplugClientConnector";
 import { ButtplugMessageSorter } from "../utils/ButtplugMessageSorter";
 import * as Messages from "../core/Messages";
 import { ButtplugError, ButtplugInitError, ButtplugMessageError } from "../core/Exceptions";
@@ -158,7 +158,7 @@ export class ButtplugClient extends EventEmitter {
   };
 
   private parseDeviceList = (list: Messages.DeviceList) => {
-    for (let [_, d] of Object.entries(list.Devices)) {
+    for (const [_, d] of Object.entries(list.Devices)) {
       if (!this._devices.has(d.DeviceIndex)) {
         const device = ButtplugClientDevice.fromMsg(d, this.sendMessageClosure);
         this._logger.Debug(`ButtplugClient: Adding Device: ${device}`);
@@ -168,8 +168,8 @@ export class ButtplugClient extends EventEmitter {
         this._logger.Debug(`ButtplugClient: Device already added: ${d}`);
       }
     }
-    for (let [index, device] of this._devices.entries()) {
-      if (!list.Devices.hasOwnProperty(index.toString())) {
+    for (const [index, device] of this._devices.entries()) {
+      if (!Object.prototype.hasOwnProperty.call(list.Devices, index.toString())) {
         this._devices.delete(index);
         this.emit("deviceremoved", device);
       }

packages/buttplug/src/client/ButtplugClientDevice.ts

@@ -11,7 +11,7 @@ import * as Messages from "../core/Messages";
 import { ButtplugDeviceError, ButtplugError, ButtplugMessageError } from "../core/Exceptions";
 import { EventEmitter } from "eventemitter3";
 import { ButtplugClientDeviceFeature } from "./ButtplugClientDeviceFeature";
-import { DeviceOutputCommand } from "./ButtplugClientDeviceCommand";
+import { type DeviceOutputCommand } from "./ButtplugClientDeviceCommand";
 
 /**
  * Represents an abstract device, capable of taking certain kinds of messages.
@@ -105,14 +105,22 @@ export class ButtplugClientDevice extends EventEmitter {
   };
 
   protected isOutputValid(featureIndex: number, type: Messages.OutputType) {
-    if (!this._deviceInfo.DeviceFeatures.hasOwnProperty(featureIndex.toString())) {
+    if (
+      !Object.prototype.hasOwnProperty.call(
+        this._deviceInfo.DeviceFeatures,
+        featureIndex.toString(),
+      )
+    ) {
       throw new ButtplugDeviceError(
         `Feature index ${featureIndex} does not exist for device ${this.name}`,
       );
     }
     if (
       this._deviceInfo.DeviceFeatures[featureIndex.toString()].Outputs !== undefined &&
-      !this._deviceInfo.DeviceFeatures[featureIndex.toString()].Outputs.hasOwnProperty(type)
+      !Object.prototype.hasOwnProperty.call(
+        this._deviceInfo.DeviceFeatures[featureIndex.toString()].Outputs,
+        type,
+      )
     ) {
       throw new ButtplugDeviceError(
         `Feature index ${featureIndex} does not support type ${type} for device ${this.name}`,
@@ -139,8 +147,8 @@ export class ButtplugClientDevice extends EventEmitter {
   }
 
   public async runOutput(cmd: DeviceOutputCommand): Promise<void> {
-    let p: Promise<void>[] = [];
-    for (let f of this._features.values()) {
+    const p: Promise<void>[] = [];
+    for (const f of this._features.values()) {
       if (f.hasOutput(cmd.outputType)) {
         p.push(f.runOutput(cmd));
       }
@@ -164,11 +172,14 @@ export class ButtplugClientDevice extends EventEmitter {
   }
 
   public async battery(): Promise<number> {
-    let p: Promise<void>[] = [];
-    for (let f of this._features.values()) {
+    const _p: Promise<void>[] = [];
+    for (const f of this._features.values()) {
       if (f.hasInput(Messages.InputType.Battery)) {
         // Right now, we only have one battery per device, so assume the first one we find is it.
-        let response = await f.runInput(Messages.InputType.Battery, Messages.InputCommandType.Read);
+        const response = await f.runInput(
+          Messages.InputType.Battery,
+          Messages.InputCommandType.Read,
+        );
         if (response === undefined) {
           throw new ButtplugMessageError("Got incorrect message back.");
         }

packages/buttplug/src/client/ButtplugClientDeviceCommand.ts

@@ -14,7 +14,7 @@ class PercentOrSteps {
   }
 
   public static createSteps(s: number): PercentOrSteps {
-    let v = new PercentOrSteps();
+    const v = new PercentOrSteps();
     v._steps = s;
     return v;
   }
@@ -24,7 +24,7 @@ class PercentOrSteps {
       throw new ButtplugDeviceError(`Percent value ${p} is not in the range 0.0 <= x <= 1.0`);
     }
 
-    let v = new PercentOrSteps();
+    const v = new PercentOrSteps();
     v._percent = p;
     return v;
   }

packages/buttplug/src/client/ButtplugClientDeviceFeature.ts

@@ -1,6 +1,6 @@
 import { ButtplugDeviceError, ButtplugError, ButtplugMessageError } from "../core/Exceptions";
 import * as Messages from "../core/Messages";
-import { DeviceOutputCommand } from "./ButtplugClientDeviceCommand";
+import { type DeviceOutputCommand } from "./ButtplugClientDeviceCommand";
 
 export class ButtplugClientDeviceFeature {
   constructor(
@@ -26,7 +26,10 @@ export class ButtplugClientDeviceFeature {
   };
 
   protected isOutputValid(type: Messages.OutputType) {
-    if (this._feature.Output !== undefined && !this._feature.Output.hasOwnProperty(type)) {
+    if (
+      this._feature.Output !== undefined &&
+      !Object.prototype.hasOwnProperty.call(this._feature.Output, type)
+    ) {
       throw new ButtplugDeviceError(
         `Feature index ${this._feature.FeatureIndex} does not support type ${type} for device ${this._deviceName}`,
       );
@@ -34,7 +37,10 @@ export class ButtplugClientDeviceFeature {
   }
 
   protected isInputValid(type: Messages.InputType) {
-    if (this._feature.Input !== undefined && !this._feature.Input.hasOwnProperty(type)) {
+    if (
+      this._feature.Input !== undefined &&
+      !Object.prototype.hasOwnProperty.call(this._feature.Input, type)
+    ) {
       throw new ButtplugDeviceError(
         `Feature index ${this._feature.FeatureIndex} does not support type ${type} for device ${this._deviceName}`,
       );
@@ -48,7 +54,7 @@ export class ButtplugClientDeviceFeature {
       throw new ButtplugDeviceError(`${command.outputType} requires value defined`);
     }
 
-    let type = command.outputType;
+    const type = command.outputType;
     let duration: undefined | number = undefined;
     if (type == Messages.OutputType.HwPositionWithDuration) {
       if (command.duration === undefined) {
@@ -57,18 +63,18 @@ export class ButtplugClientDeviceFeature {
       duration = command.duration;
     }
     let value: number;
-    let p = command.value;
+    const p = command.value;
     if (p.percent === undefined) {
       // TODO Check step limits here
       value = command.value.steps!;
     } else {
       value = Math.ceil(this._feature.Output[type]!.Value![1] * p.percent);
     }
-    let newCommand: Messages.DeviceFeatureOutput = { Value: value, Duration: duration };
-    let outCommand = {};
+    const newCommand: Messages.DeviceFeatureOutput = { Value: value, Duration: duration };
+    const outCommand = {};
     outCommand[type.toString()] = newCommand;
 
-    let cmd: Messages.ButtplugMessage = {
+    const cmd: Messages.ButtplugMessage = {
       OutputCmd: {
         Id: 1,
         DeviceIndex: this._deviceIndex,
@@ -111,14 +117,14 @@ export class ButtplugClientDeviceFeature {
 
   public hasOutput(type: Messages.OutputType): boolean {
     if (this._feature.Output !== undefined) {
-      return this._feature.Output.hasOwnProperty(type.toString());
+      return Object.prototype.hasOwnProperty.call(this._feature.Output, type.toString());
     }
     return false;
   }
 
   public hasInput(type: Messages.InputType): boolean {
     if (this._feature.Input !== undefined) {
-      return this._feature.Input.hasOwnProperty(type.toString());
+      return Object.prototype.hasOwnProperty.call(this._feature.Input, type.toString());
     }
     return false;
   }
@@ -126,7 +132,7 @@ export class ButtplugClientDeviceFeature {
   public async runOutput(cmd: DeviceOutputCommand): Promise<void> {
     if (
       this._feature.Output !== undefined &&
-      this._feature.Output.hasOwnProperty(cmd.outputType.toString())
+      Object.prototype.hasOwnProperty.call(this._feature.Output, cmd.outputType.toString())
     ) {
       return this.sendOutputCmd(cmd);
     }
@@ -139,8 +145,7 @@ export class ButtplugClientDeviceFeature {
   ): Promise<Messages.InputReading | undefined> {
     // Make sure the requested feature is valid
     this.isInputValid(inputType);
-    let inputAttributes = this._feature.Input[inputType];
-    console.log(this._feature.Input);
+    const inputAttributes = this._feature.Input[inputType];
     if (
       inputCommand === Messages.InputCommandType.Unsubscribe &&
       !inputAttributes.Command.includes(Messages.InputCommandType.Subscribe) &&
@@ -149,7 +154,7 @@ export class ButtplugClientDeviceFeature {
       throw new ButtplugDeviceError(`${inputType} does not support command ${inputCommand}`);
     }
 
-    let cmd: Messages.ButtplugMessage = {
+    const cmd: Messages.ButtplugMessage = {
       InputCmd: {
         Id: 1,
         DeviceIndex: this._deviceIndex,

packages/buttplug/src/client/IButtplugClientConnector.ts

@@ -6,8 +6,8 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-import { ButtplugMessage } from "../core/Messages";
-import { EventEmitter } from "eventemitter3";
+import { type ButtplugMessage } from "../core/Messages";
+import { type EventEmitter } from "eventemitter3";
 
 export interface IButtplugClientConnector extends EventEmitter {
   connect: () => Promise<void>;

packages/buttplug/src/core/Exceptions.ts

@@ -7,7 +7,7 @@
  */
 
 import * as Messages from "./Messages";
-import { ButtplugLogger } from "./Logging";
+import { type ButtplugLogger } from "./Logging";
 
 export class ButtplugError extends Error {
   public get ErrorClass(): Messages.ErrorClass {

packages/buttplug/src/core/Messages.ts

@@ -36,7 +36,7 @@ export interface ButtplugMessage {
 }
 
 export function msgId(msg: ButtplugMessage): number {
-  for (let [_, entry] of Object.entries(msg)) {
+  for (const [_, entry] of Object.entries(msg)) {
     if (entry != undefined) {
       return entry.Id;
     }
@@ -45,7 +45,7 @@ export function msgId(msg: ButtplugMessage): number {
 }
 
 export function setMsgId(msg: ButtplugMessage, id: number) {
-  for (let [_, entry] of Object.entries(msg)) {
+  for (const [_, entry] of Object.entries(msg)) {
     if (entry != undefined) {
       entry.Id = id;
       return;

packages/buttplug/src/index.ts

@@ -6,8 +6,8 @@
  * @copyright Copyright (c) Nonpolynomial Labs LLC. All rights reserved.
  */
 
-import { ButtplugMessage } from "./core/Messages";
-import { IButtplugClientConnector } from "./client/IButtplugClientConnector";
+import { type ButtplugMessage } from "./core/Messages";
+import { type IButtplugClientConnector } from "./client/IButtplugClientConnector";
 import { EventEmitter } from "eventemitter3";
 
 export * from "./client/ButtplugClient";
@@ -40,7 +40,9 @@ export class ButtplugWasmClientConnector extends EventEmitter implements IButtpl
 
   private static maybeLoadWasm = async () => {
     if (ButtplugWasmClientConnector.wasmInstance == undefined) {
-      ButtplugWasmClientConnector.wasmInstance = await import("../wasm/index.js");
+      const wasmModule = await import("../wasm/index.js");
+      await wasmModule.default(); // --target web requires calling init() before using exports
+      ButtplugWasmClientConnector.wasmInstance = wasmModule;
     }
   };
 

packages/buttplug/src/lib.rs

@@ -23,6 +23,7 @@ type FFICallback = js_sys::Function;
 type FFICallbackContext = u32;
 
 #[derive(Clone, Copy)]
+#[allow(dead_code)]
 pub struct FFICallbackContextWrapper(FFICallbackContext);
 
 unsafe impl Send for FFICallbackContextWrapper {
@@ -50,7 +51,7 @@ pub fn send_server_message(
     let buf = json.as_bytes();
     let this = JsValue::null();
     let uint8buf = unsafe { Uint8Array::new(&Uint8Array::view(buf)) };
-    callback.call1(&this, &JsValue::from(uint8buf));
+    let _ = callback.call1(&this, &JsValue::from(uint8buf));
   }
 }
 
@@ -119,7 +120,7 @@ pub fn buttplug_client_send_json_message(
       let buf = json.as_bytes();
       let this = JsValue::null();
       let uint8buf = unsafe { Uint8Array::new(&Uint8Array::view(buf)) };
-      callback.call1(&this, &JsValue::from(uint8buf));
+      let _ = callback.call1(&this, &JsValue::from(uint8buf));
     }
   });
 }

packages/buttplug/src/utils/ButtplugBrowserWebsocketConnector.ts

@@ -9,7 +9,7 @@
 "use strict";
 
 import { EventEmitter } from "eventemitter3";
-import { ButtplugMessage } from "../core/Messages";
+import { type ButtplugMessage } from "../core/Messages";
 
 export class ButtplugBrowserWebsocketConnector extends EventEmitter {
   protected _ws: WebSocket | undefined;

packages/buttplug/src/utils/ButtplugMessageSorter.ts

@@ -40,7 +40,7 @@ export class ButtplugMessageSorter {
   public ParseIncomingMessages(msgs: Messages.ButtplugMessage[]): Messages.ButtplugMessage[] {
     const noMatch: Messages.ButtplugMessage[] = [];
     for (const x of msgs) {
-      let id = Messages.msgId(x);
+      const id = Messages.msgId(x);
       if (id !== Messages.SYSTEM_MESSAGE_ID && this._waitingMsgs.has(id)) {
         const [res, rej] = this._waitingMsgs.get(id)!;
         this._waitingMsgs.delete(id);

packages/buttplug/src/webbluetooth/webbluetooth_hardware.rs

@@ -184,6 +184,7 @@ impl HardwareSpecializer for WebBluetoothHardwareSpecializer {
 pub enum WebBluetoothEvent {
   // This is the only way we have to get our endpoints back to device creation
   // right now. My god this is a mess.
+  #[allow(dead_code)]
   Connected(Vec<Endpoint>),
   Disconnected,
 }
@@ -201,6 +202,7 @@ pub enum WebBluetoothDeviceCommand {
     HardwareSubscribeCmd,
     oneshot::Sender<Result<(), ButtplugDeviceError>>,
   ),
+  #[allow(dead_code)]
   Unsubscribe(
     HardwareUnsubscribeCmd,
     oneshot::Sender<Result<(), ButtplugDeviceError>>,
@@ -271,7 +273,7 @@ async fn run_webbluetooth_loop(
   //let web_btle_device = WebBluetoothDeviceImpl::new(device, char_map);
   info!("device created!");
   let endpoints = char_map.keys().into_iter().cloned().collect();
-  device_local_event_sender
+  let _ = device_local_event_sender
     .send(WebBluetoothEvent::Connected(endpoints))
     .await;
   while let Some(msg) = device_command_receiver.recv().await {
@@ -337,6 +339,7 @@ async fn run_webbluetooth_loop(
 #[derive(Debug)]
 pub struct WebBluetoothHardware {
   device_command_sender: mpsc::Sender<WebBluetoothDeviceCommand>,
+  #[allow(dead_code)]
   device_event_receiver: mpsc::Receiver<WebBluetoothEvent>,
   event_sender: broadcast::Sender<HardwareEvent>,
 }

packages/email/email.css

@@ -0,0 +1,18 @@
+@import "@maizzle/tailwindcss";
+
+@theme {
+  /* ── Design tokens — exact mirror of frontend app.css :root ── */
+  --color-background: oklch(0.98 0.01 320);
+  --color-foreground: oklch(0.08 0.02 280);
+  --color-card: oklch(0.99 0.005 320);
+  --color-card-foreground: oklch(0.08 0.02 280);
+  --color-muted: oklch(0.95 0.01 280);
+  --color-muted-foreground: oklch(0.4 0.02 280);
+  --color-border: oklch(0.85 0.02 280);
+  --color-primary: oklch(56.971% 0.27455 319.257);
+  --color-primary-foreground: oklch(0.98 0.01 320);
+
+  /* ── Font ── */
+  --font-sans:
+    "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}

packages/email/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@sexy/email",
+  "version": "1.0.0",
+  "private": true,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "dependencies": {
+    "@maizzle/framework": "6.0.0-15",
+    "@maizzle/tailwindcss": "^1.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.9.3"
+  }
+}

packages/email/src/index.ts

@@ -0,0 +1,25 @@
+import { renderTemplate } from "./render.js";
+
+const BASE_URL = process.env.PUBLIC_URL ?? "https://sexy.pivoine.art";
+
+export async function renderVerification(data: {
+  token: string;
+}): Promise<{ subject: string; html: string }> {
+  return {
+    subject: "Verify your email address — sexy.pivoine.art",
+    html: await renderTemplate("verification", {
+      url: `${BASE_URL}/signup/verify?token=${data.token}`,
+    }),
+  };
+}
+
+export async function renderPasswordReset(data: {
+  token: string;
+}): Promise<{ subject: string; html: string }> {
+  return {
+    subject: "Reset your password — sexy.pivoine.art",
+    html: await renderTemplate("password-reset", {
+      url: `${BASE_URL}/password/reset?token=${data.token}`,
+    }),
+  };
+}

packages/email/src/render.ts

@@ -0,0 +1,42 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+
+// At runtime (dist/render.js), __dirname is packages/email/dist/
+const PKG_ROOT = path.join(__dirname, "..");
+const TEMPLATES_ROOT = path.join(PKG_ROOT, "templates");
+const CSS_PATH = path.join(PKG_ROOT, "email.css");
+
+const BASE_URL = process.env.PUBLIC_URL ?? "https://sexy.pivoine.art";
+
+export interface RenderOptions {
+  url: string;
+  [key: string]: unknown;
+}
+
+export async function renderTemplate(name: string, locals: RenderOptions): Promise<string> {
+  // Dynamic import: @maizzle/framework v6 is ESM-only
+  const { render } = await import("@maizzle/framework");
+
+  const html = await readFile(path.join(TEMPLATES_ROOT, `${name}.html`), "utf8");
+
+  const { html: rendered } = await render(html, {
+    components: {
+      root: TEMPLATES_ROOT,
+      folders: ["layouts"],
+    },
+    // Override PostCSS `from` so @import "@maizzle/tailwindcss" resolves
+    // from this package's node_modules (defu gives our value priority).
+    postcss: {
+      options: {
+        from: CSS_PATH,
+      },
+    },
+    locals: {
+      cssPath: CSS_PATH, // layout uses {{ cssPath }} in <link href="{{ cssPath }}" inline>
+      baseUrl: BASE_URL,
+      ...locals,
+    },
+  });
+
+  return rendered;
+}

packages/email/templates/layouts/main.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html
+  lang="en"
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:v="urn:schemas-microsoft-com:vml"
+  xmlns:o="urn:schemas-microsoft-com:office:office"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="x-apple-disable-message-reformatting" />
+    <!--[if mso]>
+      <noscript
+        ><xml
+          ><o:OfficeDocumentSettings
+            ><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings
+          ></xml
+        ></noscript
+      >
+    <![endif]-->
+    <title>{{ page.title || 'sexy' }}</title>
+
+    <!-- Noto Sans — progressive enhancement for clients that support web fonts -->
+    <style plain>
+      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&display=swap");
+    </style>
+
+    <!-- Design tokens + Tailwind preset — path resolved by render.ts -->
+    <link rel="stylesheet" href="{{ cssPath }}" inline />
+  </head>
+  <body class="bg-background m-0 p-0 font-sans">
+    <!-- Preview text (hidden) -->
+    <if condition="page.previewText || previewText">
+      <div class="hidden max-h-0 overflow-hidden">
+        {{ page.previewText || previewText }}
+        &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
+      </div>
+    </if>
+
+    <div class="py-8 px-4">
+      <table
+        class="w-full max-w-[600px] mx-auto"
+        role="presentation"
+        cellpadding="0"
+        cellspacing="0"
+        border="0"
+      >
+        <!-- Brand header — uses --foreground as dark bg -->
+        <tr>
+          <td class="bg-foreground rounded-t-2xl px-8 py-6 text-center">
+            <a href="{{ baseUrl }}" style="text-decoration: none">
+              <span class="text-sm font-semibold tracking-[0.22em] uppercase text-background">
+                sexy<span class="text-primary">.</span>pivoine<span class="text-primary">.</span>art
+              </span>
+            </a>
+          </td>
+        </tr>
+
+        <!-- Card body -->
+        <tr>
+          <td class="bg-card px-8 py-10 text-[14px] text-card-foreground leading-relaxed">
+            <yield />
+          </td>
+        </tr>
+
+        <!-- Footer -->
+        <tr>
+          <td class="bg-muted border-t border-border rounded-b-2xl px-8 py-6 text-center">
+            <p class="text-[11px] text-muted-foreground m-0">
+              &copy; {{ new Date().getFullYear() }} sexy &mdash; For adults only (18+)
+            </p>
+            <p class="text-[11px] text-muted-foreground mt-2 mb-0">
+              If you did not request this email, you can safely ignore it.
+            </p>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>

packages/email/templates/password-reset.html

@@ -0,0 +1,41 @@
+---
+title: "Reset your password — sexy"
+previewText: "You requested a password reset. Use the link below to set a new one."
+---
+
+<x-main>
+  <h1 class="text-[22px] font-semibold text-foreground m-0 mb-2">Reset your password</h1>
+  <p class="text-muted-foreground m-0 mb-6">
+    We received a request to reset the password for your account. Click the button below to choose a
+    new one.
+  </p>
+
+  <!-- CTA button — inline style needed for Outlook -->
+  <table role="presentation" cellpadding="0" cellspacing="0" border="0" class="mb-6">
+    <tr>
+      <td class="rounded-lg" style="background: #b700d9">
+        <a
+          href="{{ url }}"
+          class="inline-block px-8 py-[14px] text-[14px] font-semibold text-primary-foreground no-underline rounded-lg"
+          style="background: #b700d9; color: #faf4fb"
+        >
+          Reset my password
+        </a>
+      </td>
+    </tr>
+  </table>
+
+  <p class="text-[13px] text-muted-foreground m-0 mb-6">
+    This link expires in <strong class="text-foreground">1 hour</strong>. If you did not request a
+    password reset, no action is needed — your account remains secure.
+  </p>
+
+  <hr class="border-0 border-t border-border my-6" />
+
+  <p class="text-[12px] text-muted-foreground m-0">
+    Button not working? Copy and paste this link into your browser:
+  </p>
+  <p class="text-[12px] m-0 mt-1">
+    <a href="{{ url }}" class="text-primary break-all" style="color: #b700d9"> {{ url }} </a>
+  </p>
+</x-main>

packages/email/templates/verification.html

@@ -0,0 +1,40 @@
+---
+title: "Verify your email — sexy"
+previewText: "Almost there — confirm your email address to activate your account."
+---
+
+<x-main>
+  <h1 class="text-[22px] font-semibold text-foreground m-0 mb-2">Verify your email address</h1>
+  <p class="text-muted-foreground m-0 mb-6">
+    Thanks for signing up! Click the button below to confirm your email address and activate your
+    account.
+  </p>
+
+  <!-- CTA button — inline style needed for Outlook -->
+  <table role="presentation" cellpadding="0" cellspacing="0" border="0" class="mb-6">
+    <tr>
+      <td class="rounded-lg" style="background: #b700d9">
+        <a
+          href="{{ url }}"
+          class="inline-block px-8 py-[14px] text-[14px] font-semibold text-primary-foreground no-underline rounded-lg"
+          style="background: #b700d9; color: #faf4fb"
+        >
+          Verify my email
+        </a>
+      </td>
+    </tr>
+  </table>
+
+  <p class="text-[13px] text-muted-foreground m-0 mb-6">
+    This link expires in <strong class="text-foreground">24 hours</strong>.
+  </p>
+
+  <hr class="border-0 border-t border-border my-6" />
+
+  <p class="text-[12px] text-muted-foreground m-0">
+    Button not working? Copy and paste this link into your browser:
+  </p>
+  <p class="text-[12px] m-0 mt-1">
+    <a href="{{ url }}" class="text-primary break-all" style="color: #b700d9"> {{ url }} </a>
+  </p>
+</x-main>

packages/email/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "lib": ["ES2022"],
+    "outDir": "dist",
+    "declaration": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "include": ["src"]
+}

packages/frontend/package.json

@@ -1,7 +1,6 @@
 {
-  "name": "@sexy.pivoine.art/frontend",
+  "name": "@sexy/frontend",
   "version": "1.0.0",
-  "author": "valknarogg",
   "type": "module",
   "private": true,
   "scripts": {
@@ -12,9 +11,10 @@
     "check": "svelte-check --tsconfig ./tsconfig.json --threshold warning"
   },
   "devDependencies": {
+    "@sexy/buttplug": "workspace:*",
     "@iconify-json/ri": "^1.2.10",
     "@iconify/tailwind4": "^1.2.1",
-    "@internationalized/date": "^3.11.0",
+    "@internationalized/date": "^3.12.0",
     "@lucide/svelte": "^0.561.0",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/adapter-static": "^3.0.10",
@@ -29,7 +29,6 @@
     "glob": "^13.0.6",
     "mode-watcher": "^1.1.0",
     "prettier-plugin-svelte": "^3.5.1",
-    "super-sitemap": "^1.0.7",
     "svelte": "^5.53.7",
     "svelte-check": "^4.4.4",
     "svelte-sonner": "^1.0.8",
@@ -38,12 +37,10 @@
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-wasm": "3.5.0"
+    "vite": "^7.3.1"
   },
   "dependencies": {
-    "@sexy.pivoine.art/buttplug": "workspace:*",
-    "@sexy.pivoine.art/types": "workspace:*",
+    "@sexy/types": "workspace:*",
     "graphql": "^16.11.0",
     "graphql-request": "^7.1.2",
     "javascript-time-ago": "^2.6.4",

packages/frontend/src/app.css

@@ -3,6 +3,13 @@
 
 @plugin "@iconify/tailwind4";
 
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @custom-variant hover (&:hover);
@@ -194,7 +201,7 @@
   --card-foreground: oklch(0.95 0.01 280);
   --border: oklch(0.2 0.05 280);
   --input: oklch(1 0 0 / 0.15);
-  --primary: oklch(0.65 0.25 320);
+  --primary: oklch(65.054% 0.25033 319.934);
   --primary-foreground: oklch(0.98 0.01 320);
   --secondary: oklch(0.15 0.05 260);
   --secondary-foreground: oklch(0.9 0.02 260);

packages/frontend/src/app.html

@@ -9,7 +9,7 @@
     <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=Dancing+Script:wght@400..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
       rel="stylesheet"
     />
 

packages/frontend/src/hooks.server.ts

@@ -1,4 +1,5 @@
-import { isAuthenticated } from "$lib/services";
+import { redirect } from "@sveltejs/kit";
+import { isAuthenticated, UnauthorizedError } from "$lib/services";
 import { logger, generateRequestId } from "$lib/logger";
 import type { Handle } from "@sveltejs/kit";
 
@@ -65,6 +66,10 @@ export const handle: Handle = async ({ event, resolve }) => {
       },
     });
   } catch (error) {
+    if (error instanceof UnauthorizedError) {
+      const loginUrl = `/login?redirect=${encodeURIComponent(url.pathname)}`;
+      throw redirect(303, loginUrl);
+    }
     const duration = Date.now() - startTime;
     logger.error("Request handler error", {
       requestId,

packages/frontend/src/lib/components/burger-menu-button/burger-menu-button.svelte

@@ -10,23 +10,23 @@
       class="flex flex-col justify-between w-[16px] h-[10px] transform transition-all duration-300 origin-center overflow-hidden"
     >
       <div
-        class={`bg-white h-[2px] w-7 transform transition-all duration-300 origin-left ${isMobileMenuOpen ? "translate-x-10" : ""}`}
+        class={`bg-foreground h-[2px] w-7 transform transition-all duration-300 origin-left ${isMobileMenuOpen ? "translate-x-10" : ""}`}
       ></div>
       <div
-        class={`bg-white h-[2px] w-7 rounded transform transition-all duration-300 delay-75 ${isMobileMenuOpen ? "translate-x-10" : ""}`}
+        class={`bg-foreground h-[2px] w-7 rounded transform transition-all duration-300 delay-75 ${isMobileMenuOpen ? "translate-x-10" : ""}`}
       ></div>
       <div
-        class={`bg-white h-[2px] w-7 transform transition-all duration-300 origin-left delay-150 ${isMobileMenuOpen ? "translate-x-10" : ""}`}
+        class={`bg-foreground h-[2px] w-7 transform transition-all duration-300 origin-left delay-150 ${isMobileMenuOpen ? "translate-x-10" : ""}`}
       ></div>
 
       <div
         class={`absolute items-center justify-between transform transition-all duration-500 top-6.5 -translate-x-10 flex w-0 ${isMobileMenuOpen ? "translate-x-0 w-12" : ""}`}
       >
         <div
-          class={`absolute bg-white h-[2px] w-4 transform transition-all duration-500 rotate-0 delay-300 ${isMobileMenuOpen ? "rotate-45" : ""}`}
+          class={`absolute bg-foreground h-[2px] w-4 transform transition-all duration-500 rotate-0 delay-300 ${isMobileMenuOpen ? "rotate-45" : ""}`}
         ></div>
         <div
-          class={`absolute bg-white h-[2px] w-4 transform transition-all duration-500 -rotate-0 delay-300 ${isMobileMenuOpen ? "-rotate-45" : ""}`}
+          class={`absolute bg-foreground h-[2px] w-4 transform transition-all duration-500 -rotate-0 delay-300 ${isMobileMenuOpen ? "-rotate-45" : ""}`}
         ></div>
       </div>
     </div>

packages/frontend/src/lib/components/header/header.svelte

@@ -6,7 +6,8 @@
   import { logout } from "$lib/services";
   import { goto } from "$app/navigation";
   import { getAssetUrl } from "$lib/api";
-  import LogoutButton from "../logout-button/logout-button.svelte";
+  import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
+  import { getUserInitials } from "$lib/utils";
   import Separator from "../ui/separator/separator.svelte";
   import BurgerMenuButton from "../burger-menu-button/burger-menu-button.svelte";
   import Logo from "../logo/logo.svelte";
@@ -37,7 +38,7 @@
     isMobileMenuOpen = false;
   }
 
-  function isActiveLink(link: any) {
+  function isActiveLink(link: { name?: string; href: string }) {
     return (
       (page.url.pathname === "/" && link === navLinks[0]) ||
       (page.url.pathname.startsWith(link.href) && link !== navLinks[0])
@@ -46,7 +47,7 @@
 </script>
 
 <header
-  class="sticky top-0 z-50 w-full bg-gradient-to-br from-card/85 via-card/90 to-card/80 backdrop-blur-xl shadow-2xl shadow-primary/20"
+  class="sticky top-0 z-50 w-full backdrop-blur-xl shadow-[0_4px_24px_-8px_color-mix(in_oklab,var(--color-primary)_12%,transparent)] bg-card/50"
 >
   <div class="container mx-auto px-4">
     <div class="flex items-center justify-evenly h-16">
@@ -55,7 +56,7 @@
         href="/"
         class="flex w-full items-center gap-3 hover:scale-105 transition-all duration-300"
       >
-        <Logo hideName={true} />
+        <Logo />
       </a>
 
       <!-- Desktop Navigation -->
@@ -75,28 +76,14 @@
         {/each}
       </nav>
 
-      <!-- Desktop Auth Actions -->
+      <!-- Auth Actions -->
       {#if authStatus.authenticated}
-        <div class="w-full hidden lg:flex items-center justify-end">
+        <div class="w-full flex items-center justify-end">
           <div class="flex items-center gap-2 rounded-full bg-muted/30 p-1">
             <Button
               variant="link"
               size="icon"
-              class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/me" }) ? "text-foreground" : "hover:text-foreground"}`}
-              href="/me"
-              title={$_("header.dashboard")}
-            >
-              <span class="icon-[ri--dashboard-2-line] h-4 w-4"></span>
-              <span
-                class={`absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-accent transition-all duration-300 ${isActiveLink({ href: "/me" }) ? "w-full" : "group-hover:w-full"}`}
-              ></span>
-              <span class="sr-only">{$_("header.dashboard")}</span>
-            </Button>
-
-            <Button
-              variant="link"
-              size="icon"
-              class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
+              class={`flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
               href="/play"
               title={$_("header.play")}
             >
@@ -111,7 +98,7 @@
               <Button
                 variant="link"
                 size="icon"
-                class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/admin" }) ? "text-foreground" : "hover:text-foreground"}`}
+                class={`flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/admin" }) ? "text-foreground" : "hover:text-foreground"}`}
                 href="/admin/users"
                 title="Admin"
               >
@@ -123,44 +110,70 @@
               </Button>
             {/if}
 
-            <Separator orientation="vertical" class="mx-1 h-6 bg-border/50" />
+            <Separator orientation="vertical" class="hidden lg:block mx-1 h-6 bg-border/50" />
 
-            <LogoutButton
-              user={{
-                name:
-                  authStatus.user!.artist_name || authStatus.user!.email.split("@")[0] || "User",
-                avatar: getAssetUrl(authStatus.user!.avatar, "mini")!,
-                email: authStatus.user!.email,
-              }}
-              onLogout={handleLogout}
+            <a href="/me" class="flex items-center gap-2 px-1 hover:opacity-80 transition-opacity">
+              <Avatar class="h-7 w-7 ring-2 ring-primary/20">
+                <AvatarImage
+                  src={getAssetUrl(authStatus.user!.avatar, "mini")!}
+                  alt={authStatus.user!.artist_name || authStatus.user!.email}
+                />
+                <AvatarFallback
+                  class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-xs font-semibold"
+                >
+                  {getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
+                </AvatarFallback>
+              </Avatar>
+              <span
+                class="hidden lg:inline text-sm font-medium text-foreground/90 max-w-24 truncate"
+              >
+                {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
+              </span>
+            </a>
+
+            <Button
+              variant="link"
+              size="icon"
+              class="hidden lg:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group hover:text-destructive"
+              onclick={handleLogout}
+              title={$_("header.logout")}
+            >
+              <span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span>
+            </Button>
+          </div>
+          <div class="lg:hidden ml-2">
+            <BurgerMenuButton
+              label={$_("header.navigation")}
+              bind:isMobileMenuOpen
+              onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
             />
           </div>
         </div>
       {:else}
-        <div class="hidden lg:flex w-full items-center justify-end gap-4">
-          <Button variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button>
-          <Button
-            href="/signup"
-            class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 font-medium"
-            >{$_("header.signup")}</Button
-          >
+        <div class="w-full flex items-center justify-end gap-2">
+          <div class="flex gap-4">
+            <Button variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button
+            >
+            <Button
+              href="/signup"
+              class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 font-medium"
+              >{$_("header.signup")}</Button
+            >
+          </div>
+          <div class="lg:hidden ml-2">
+            <BurgerMenuButton
+              label={$_("header.navigation")}
+              bind:isMobileMenuOpen
+              onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
+            />
+          </div>
         </div>
       {/if}
-
-      <!-- Burger button — mobile/tablet only -->
-      <div class="lg:hidden ml-auto">
-        <BurgerMenuButton
-          label={$_("header.navigation")}
-          bind:isMobileMenuOpen
-          onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
-        />
-      </div>
     </div>
   </div>
 </header>
 
 <!-- Backdrop -->
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions a11y_no_noninteractive_element_interactions -->
 <div
   role="presentation"
   class={`fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-opacity duration-300 lg:hidden ${isMobileMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`}
@@ -174,21 +187,40 @@
 >
   <!-- Panel header -->
   <div class="flex items-center px-5 h-16 shrink-0 border-b border-border/30">
-    <Logo hideName={true} />
+    <Logo />
   </div>
 
   <div class="flex-1 py-6 px-5 space-y-6">
-    <!-- User logout slider -->
+    <!-- User card -->
     {#if authStatus.authenticated}
-      <LogoutButton
-        user={{
-          name: authStatus.user!.artist_name || authStatus.user!.email.split("@")[0] || "User",
-          avatar: getAssetUrl(authStatus.user!.avatar, "mini")!,
-          email: authStatus.user!.email,
-        }}
-        onLogout={handleLogout}
-        class="w-full"
-      />
+      <div class="flex items-center gap-3 rounded-xl border border-border/40 bg-card/50 px-4 py-3">
+        <Avatar class="h-10 w-10 ring-2 ring-primary/20 shrink-0">
+          <AvatarImage
+            src={getAssetUrl(authStatus.user!.avatar, "mini")!}
+            alt={authStatus.user!.artist_name || authStatus.user!.email}
+          />
+          <AvatarFallback
+            class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-sm font-semibold"
+          >
+            {getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
+          </AvatarFallback>
+        </Avatar>
+        <div class="flex flex-col min-w-0 flex-1">
+          <span class="text-sm font-semibold text-foreground truncate">
+            {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
+          </span>
+          <span class="text-xs text-muted-foreground truncate">{authStatus.user!.email}</span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="h-8 w-8 rounded-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 shrink-0"
+          onclick={handleLogout}
+          title={$_("header.logout")}
+        >
+          <span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span>
+        </Button>
+      </div>
     {/if}
 
     <!-- Navigation -->

packages/frontend/src/lib/components/image-viewer/image-viewer.svelte

@@ -145,7 +145,12 @@
 {#if isViewerOpen}
   <div class="fixed inset-0 z-50 flex items-center justify-center animate-fade-in">
     <!-- Backdrop -->
-    <div class="absolute inset-0 bg-black/95 backdrop-blur-xl" onclick={closeViewer}></div>
+    <button
+      type="button"
+      class="absolute inset-0 bg-black/95 backdrop-blur-xl cursor-default"
+      onclick={closeViewer}
+      aria-label="Close viewer"
+    ></button>
 
     <!-- Viewer Content -->
     <div class="relative w-[90vw] h-[90vh] flex flex-col animate-slide-up">

packages/frontend/src/lib/components/logo/logo.svelte

@@ -1,21 +1,5 @@
 <script lang="ts">
-  import { _ } from "svelte-i18n";
   import SexyIcon from "../icon/icon.svelte";
-
-  const { hideName = false } = $props();
 </script>
 
-<div class="relative">
-  <SexyIcon class="w-8 h-8 text-primary" />
-</div>
-<span
-  class={`logo text-3xl text-foreground opacity-90 tracking-wide font-extrabold drop-shadow-x ${hideName ? "hidden sm:inline-block" : ""}`}
->
-  {$_("brand.name")}
-</span>
-
-<style>
-  .logo {
-    font-family: "Dancing Script", cursive;
-  }
-</style>
+<SexyIcon class="w-12 h-12" />

packages/frontend/src/lib/components/page-hero/page-hero.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    title: string;
+    description?: string;
+    children?: Snippet;
+  }
+
+  let { title, description, children }: Props = $props();
+</script>
+
+<section class="relative py-12 md:py-20 overflow-hidden">
+  <div class="relative container mx-auto px-4 text-center">
+    <div class="max-w-5xl mx-auto">
+      <h1
+        class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
+      >
+        {title}
+      </h1>
+      {#if description}
+        <p
+          class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
+        >
+          {description}
+        </p>
+      {/if}
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+</section>

packages/frontend/src/lib/components/pagination/pagination.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { _ } from "svelte-i18n";
+
+  interface Props {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+  }
+
+  let { currentPage, totalPages, onPageChange }: Props = $props();
+
+  const pageNumbers = $derived(() => {
+    const pages: (number | -1)[] = [];
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+    } else {
+      pages.push(1);
+      if (currentPage > 3) pages.push(-1);
+      for (
+        let i = Math.max(2, currentPage - 1);
+        i <= Math.min(totalPages - 1, currentPage + 1);
+        i++
+      )
+        pages.push(i);
+      if (currentPage < totalPages - 2) pages.push(-1);
+      pages.push(totalPages);
+    }
+    return pages;
+  });
+</script>
+
+{#if totalPages > 1}
+  <div class="flex items-center gap-1">
+    <Button
+      variant="outline"
+      disabled={currentPage <= 1}
+      onclick={() => onPageChange(currentPage - 1)}
+    >
+      {$_("common.previous")}
+    </Button>
+    {#each pageNumbers() as p, i (i)}
+      {#if p === -1}
+        <span class="px-2 text-muted-foreground select-none">…</span>
+      {:else}
+        <Button
+          variant={p === currentPage ? "default" : "outline"}
+          class="min-w-9"
+          onclick={() => onPageChange(p)}
+        >
+          {p}
+        </Button>
+      {/if}
+    {/each}
+    <Button
+      variant="outline"
+      disabled={currentPage >= totalPages}
+      onclick={() => onPageChange(currentPage + 1)}
+    >
+      {$_("common.next")}
+    </Button>
+  </div>
+{/if}

packages/frontend/src/lib/components/recording-card/recording-card.svelte

@@ -2,16 +2,18 @@
   import { _ } from "svelte-i18n";
   import { Card, CardContent, CardHeader } from "$lib/components/ui/card";
   import { Button } from "$lib/components/ui/button";
+  import { Badge } from "$lib/components/ui/badge";
   import type { Recording, DeviceInfo } from "$lib/types";
-  import { cn } from "$lib/utils";
 
   interface Props {
     recording: Recording;
     onPlay?: (id: string) => void;
+    onPublish?: (id: string) => void;
+    onUnpublish?: (id: string) => void;
     onDelete?: (id: string) => void;
   }
 
-  let { recording, onPlay, onDelete }: Props = $props();
+  let { recording, onPlay, onPublish, onUnpublish, onDelete }: Props = $props();
 
   function formatDuration(ms: number): string {
     const totalSeconds = Math.floor(ms / 1000);
@@ -19,19 +21,6 @@
     const seconds = totalSeconds % 60;
     return `${minutes}:${seconds.toString().padStart(2, "0")}`;
   }
-
-  function getStatusColor(status: string): string {
-    switch (status) {
-      case "published":
-        return "text-green-400 bg-green-400/20";
-      case "draft":
-        return "text-yellow-400 bg-yellow-400/20";
-      case "archived":
-        return "text-red-400 bg-red-400/20";
-      default:
-        return "text-gray-400 bg-gray-400/20";
-    }
-  }
 </script>
 
 <Card
@@ -44,9 +33,14 @@
           <h3 class="font-semibold text-card-foreground group-hover:text-primary transition-colors">
             {recording.title}
           </h3>
-          <span class={cn("text-xs px-2 py-0.5 rounded-full", getStatusColor(recording.status))}>
+          <Badge
+            variant="outline"
+            class={recording.status === "published"
+              ? "text-green-600 border-green-500/40 bg-green-500/10"
+              : "text-yellow-600 border-yellow-500/40 bg-yellow-500/10"}
+          >
             {$_(`recording_card.status_${recording.status}`)}
-          </span>
+          </Badge>
         </div>
         {#if recording.description}
           <p class="text-sm text-muted-foreground line-clamp-2">
@@ -151,12 +145,35 @@
           {$_("recording_card.play")}
         </Button>
       {/if}
+      {#if onPublish && recording.status === "draft"}
+        <Button
+          size="sm"
+          variant="outline"
+          onclick={() => onPublish?.(recording.id)}
+          class="cursor-pointer border-primary/20 hover:bg-primary/10 hover:text-primary"
+          title={$_("recording_card.publish")}
+        >
+          <span class="icon-[ri--send-plane-line] w-4 h-4"></span>
+        </Button>
+      {/if}
+      {#if onUnpublish && recording.status === "published"}
+        <Button
+          size="sm"
+          variant="outline"
+          onclick={() => onUnpublish?.(recording.id)}
+          class="cursor-pointer border-muted-foreground/20 hover:bg-muted/50 hover:text-muted-foreground"
+          title={$_("recording_card.unpublish")}
+        >
+          <span class="icon-[ri--arrow-go-back-line] w-4 h-4"></span>
+        </Button>
+      {/if}
       {#if onDelete}
         <Button
           size="sm"
           variant="outline"
           onclick={() => onDelete?.(recording.id)}
           class="cursor-pointer border-destructive/20 hover:bg-destructive/10 hover:text-destructive"
+          title={$_("common.delete")}
         >
           <span class="icon-[ri--delete-bin-line] w-4 h-4"></span>
         </Button>

packages/frontend/src/lib/components/ui/empty/empty-content.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-content"
+  class={cn(
+    "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/empty-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-description"
+  class={cn(
+    "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/empty-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-header"
+  class={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/empty-media.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from "tailwind-variants";
+
+  export const emptyMediaVariants = tv({
+    base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  });
+
+  export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+</script>
+
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = "default",
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-icon"
+  data-variant={variant}
+  class={cn(emptyMediaVariants({ variant }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/empty-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty-title"
+  class={cn("text-lg font-medium tracking-tight", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/empty.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="empty"
+  class={cn(
+    "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/frontend/src/lib/components/ui/empty/index.ts

@@ -0,0 +1,22 @@
+import Root from "./empty.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Description from "./empty-description.svelte";
+import Content from "./empty-content.svelte";
+
+export {
+  Root,
+  Header,
+  Media,
+  Title,
+  Description,
+  Content,
+  //
+  Root as Empty,
+  Header as EmptyHeader,
+  Media as EmptyMedia,
+  Title as EmptyTitle,
+  Description as EmptyDescription,
+  Content as EmptyContent,
+};

packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte

@@ -23,11 +23,13 @@
     ...rest
   }: FileDropZoneProps = $props();
 
-  if (maxFiles !== undefined && fileCount === undefined) {
-    console.warn(
-      "Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt",
-    );
-  }
+  $effect(() => {
+    if (maxFiles !== undefined && fileCount === undefined) {
+      console.warn(
+        "Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt",
+      );
+    }
+  });
 
   let uploading = $state(false);
 

packages/frontend/src/lib/i18n/locales/en.ts

@@ -50,7 +50,7 @@ export default {
     account: "Account",
   },
   brand: {
-    name: "SexyArt",
+    name: "Sexy",
     tagline: "Where Love Meets Artistry",
     description:
       "The premier destination for artistic adult content, intimate storytelling, and creative expression through video and magazine content.",
@@ -91,6 +91,23 @@ export default {
   me: {
     title: "Dashboard",
     welcome: "Welcome back, {name}",
+    nav: {
+      profile: "Profile",
+      security: "Security",
+      recordings: "Recordings",
+      analytics: "Analytics",
+      back_to_site: "Back to site",
+      back_mobile: "Back",
+    },
+    analytics: {
+      title: "Analytics",
+      description: "Track your content performance and audience engagement",
+      total_videos: "Total Videos",
+      total_likes: "Total Likes",
+      total_plays: "Total Plays",
+      video_performance: "Video Performance",
+      video_performance_description: "Detailed metrics for each video",
+    },
     view_profile: "View Public Profile",
     settings: {
       title: "Settings",
@@ -134,6 +151,10 @@ export default {
       delete_confirm: "Are you sure you want to delete this recording?",
       delete_success: "Recording deleted successfully",
       delete_error: "Failed to delete recording",
+      publish_success: "Recording published successfully",
+      publish_error: "Failed to publish recording",
+      unpublish_success: "Recording unpublished",
+      unpublish_error: "Failed to unpublish recording",
     },
   },
   recording_card: {
@@ -143,8 +164,9 @@ export default {
     created: "Created",
     status_draft: "Draft",
     status_published: "Published",
-    status_archived: "Archived",
     play: "Play",
+    publish: "Publish",
+    unpublish: "Unpublish",
     edit: "Edit",
     delete: "Delete",
     public: "Public",
@@ -303,13 +325,15 @@ export default {
     show: "Show",
     add_comment_placeholder: "Add a comment...",
     toast_comment: "Your comment has been sent",
+    comment_deleted: "Comment deleted",
+    comment_delete_error: "Failed to delete comment",
     comment: "Comment",
     commenting: "Commenting...",
     error: "Heads Up!",
     back: "Back to Videos",
   },
   magazine: {
-    title: "SexyArt Magazine",
+    title: "Sexy Magazine",
     description:
       "Insights, stories, and inspiration from the world of love, art, and intimate expression",
     search_placeholder: "Search articles...",
@@ -386,7 +410,7 @@ export default {
     },
   },
   about: {
-    title: "About SexyArt",
+    title: "About Sexy",
     subtitle:
       "Where passion meets artistry, and intimate storytelling becomes a celebration of human connection.",
     join_community: "Join Our Community",
@@ -402,11 +426,11 @@ export default {
       subtitle:
         "Born from a vision to transform how intimate content is created, shared, and appreciated",
       description_part1:
-        "SexyArt was founded in 2019 with a simple yet powerful mission: to create a platform where intimate content could be appreciated as an art form, where creators could express their authentic selves, and where viewers could connect with content that celebrates love, passion, and human connection.",
+        "Sexy was founded in 2019 with a simple yet powerful mission: to create a platform where intimate content could be appreciated as an art form, where creators could express their authentic selves, and where viewers could connect with content that celebrates love, passion, and human connection.",
       description_part2:
         "We recognized that the adult content industry needed a platform that prioritized artistic expression, creator empowerment, and community building. Our founders, coming from backgrounds in photography, digital media, and community management, set out to build something different.",
       description_part3:
-        "Today, SexyArt is home to hundreds of talented creators and thousands of passionate community members who share our vision of elevating intimate content to new artistic heights.",
+        "Today, Sexy is home to hundreds of talented creators and thousands of passionate community members who share our vision of elevating intimate content to new artistic heights.",
     },
     values: {
       title: "Our Values",
@@ -446,7 +470,7 @@ export default {
         image: "/img/valknar.gif",
         bio: "DJ and visual storyteller specializing in diffusion AI art.",
       },
-      subtitle: "The passionate individuals behind SexyArt's success",
+      subtitle: "The passionate individuals behind Sexy's success",
     },
     mission: {
       title: "Our Mission",
@@ -473,7 +497,7 @@ export default {
   },
   faq: {
     title: "Frequently Asked Questions",
-    description: "Find answers to common questions about SexyArt, our platform, and services",
+    description: "Find answers to common questions about Sexy, our platform, and services",
     search_placeholder: "Search frequently asked questions...",
     search_results: "Search Results ({count})",
     no_results: "No questions found matching your search.",
@@ -482,24 +506,24 @@ export default {
       title: "Getting Started",
       questions: [
         {
-          question: "How do I create an account on SexyArt?",
+          question: "How do I create an account on Sexy?",
           answer:
             "Creating an account is simple! Click the 'Join Now' button in the top navigation, fill out the registration form with your email and basic information, verify you're 18+, and agree to our terms. You'll receive a confirmation email to activate your account.",
         },
         {
-          question: "What types of content can I find on SexyArt?",
+          question: "What types of content can I find on Sexy?",
           answer:
-            "SexyArt features high-quality artistic adult content including intimate photography, romantic videos, artistic nude content, and creative adult entertainment. All content is created by verified models and creators who focus on artistic expression and storytelling.",
+            "Sexy features high-quality artistic adult content including intimate photography, romantic videos, artistic nude content, and creative adult entertainment. All content is created by verified models and creators who focus on artistic expression and storytelling.",
         },
         {
-          question: "Is SexyArt safe and secure?",
+          question: "Is Sexy safe and secure?",
           answer:
             "Yes! We use industry-standard encryption, secure payment processing, and strict privacy measures. All creators are verified, and we have comprehensive content moderation. Your personal information and viewing habits are kept completely private.",
         },
         {
-          question: "Can I access SexyArt on mobile devices?",
+          question: "Can I access Sexy on mobile devices?",
           answer:
-            "Absolutely! SexyArt is fully responsive and works perfectly on smartphones, tablets, and desktop computers. You can enjoy the same high-quality experience across all your devices.",
+            "Absolutely! Sexy is fully responsive and works perfectly on smartphones, tablets, and desktop computers. You can enjoy the same high-quality experience across all your devices.",
         },
       ],
     },
@@ -507,7 +531,7 @@ export default {
       title: "For Creators & Models",
       questions: [
         {
-          question: "How do I become a creator on SexyArt?",
+          question: "How do I become a creator on Sexy?",
           answer:
             "To become a creator, sign up for a Creator account during registration or upgrade your existing account. You'll need to verify your identity, provide tax information, and agree to our creator terms. Once approved, you can start uploading content and building your audience.",
         },
@@ -596,7 +620,7 @@ export default {
     company_information: "Company Information",
     company_name: {
       title: "Company Name",
-      value: "SexyArt",
+      value: "Sexy",
     },
     legal_form: {
       title: "Legal Form",
@@ -613,7 +637,7 @@ export default {
     contact_information: "Contact Information",
     registered_address: "Registered Address",
     address: {
-      company: "SexyArt",
+      company: "Sexy",
       name: "Sebastian Krüger",
       street: "Berlingerstraße 48",
       city: "78333 Stockach",
@@ -687,7 +711,7 @@ export default {
       acceptance: {
         title: "1. Acceptance of Terms",
         text: [
-          "By accessing and using SexyArt, you accept and agree to be bound by the terms and provision of this agreement. If you do  not agree to abide by the above, please do not use this service.",
+          "By accessing and using Sexy, you accept and agree to be bound by the terms and provision of this agreement. If you do  not agree to abide by the above, please do not use this service.",
         ],
       },
       age: {
@@ -731,7 +755,7 @@ export default {
       values: {
         title: "Our Community Values",
         text: [
-          "SexyArt is built on respect, consent, and artistic expression. We believe in creating a space where creators and viewers can connect through shared appreciation for intimate art and storytelling.",
+          "Sexy is built on respect, consent, and artistic expression. We believe in creating a space where creators and viewers can connect through shared appreciation for intimate art and storytelling.",
         ],
       },
       respect: {
@@ -798,11 +822,19 @@ export default {
     questions_email: "support@pivoine.art",
   },
   play: {
-    title: "SexyPlay",
-    description: "Bring your toys.",
+    title: "Play",
+    description: "Connect and control your Bluetooth toys.",
     scan: "Start Scan",
     scanning: "Scanning...",
-    no_results: "No Devices founds",
+    no_results: "No devices found",
+    no_results_description: "Start a scan to discover nearby Bluetooth devices",
+    nav: {
+      play: "Play",
+      recordings: "Recordings",
+      leaderboard: "Leaderboard",
+      back_to_site: "Back to site",
+      back_mobile: "Site",
+    },
   },
   error: {
     not_found: "Oops! Page Not Found",
@@ -900,16 +932,19 @@ export default {
     },
   },
   head: {
-    title: "SexyArt | {title}",
+    title: "Sexy | {title}",
   },
   admin: {
     nav: {
-      back_to_site: "← Back to site",
-      back_mobile: "← Back",
+      back_to_site: "Back to site",
+      back_mobile: "Back",
       title: "Admin",
       users: "Users",
       videos: "Videos",
       articles: "Articles",
+      comments: "Comments",
+      recordings: "Recordings",
+      queues: "Queues",
     },
     common: {
       save_changes: "Save changes",
@@ -924,8 +959,8 @@ export default {
       cover_image: "Cover image",
       tags: "Tags",
       publish_date: "Publish date",
-      title_field: "Title *",
-      slug_field: "Slug *",
+      title_field: "Title",
+      slug_field: "Slug",
       title_slug_required: "Title and slug are required",
       image_uploaded: "Image uploaded",
       image_upload_failed: "Image upload failed",
@@ -959,6 +994,11 @@ export default {
       artist_name: "Artist name",
       avatar: "Avatar",
       banner: "Banner",
+      model_photo: "Model photo",
+      model_photo_hint:
+        "Used in model cards and on the model profile page. Avatar is used for comments and article authors.",
+      model_photo_uploaded: "Model photo uploaded",
+      model_photo_failed: "Model photo upload failed",
       is_admin: "Administrator",
       is_admin_hint: "Grants full admin access to the dashboard",
       photos: "Photo gallery",
@@ -1022,6 +1062,64 @@ export default {
       delete_success: "Article deleted",
       delete_error: "Failed to delete article",
     },
+    comments: {
+      title: "Comments",
+      search_placeholder: "Search comments…",
+      col_user: "User",
+      col_comment: "Comment",
+      col_on: "On",
+      col_date: "Date",
+      no_results: "No comments found",
+      delete_title: "Delete comment",
+      delete_success: "Comment deleted",
+      delete_error: "Failed to delete comment",
+    },
+    recordings: {
+      title: "Recordings",
+      search_placeholder: "Search recordings…",
+      col_title: "Title",
+      col_status: "Status",
+      col_duration: "Duration",
+      col_date: "Date",
+      no_results: "No recordings found",
+      published: "Published",
+      draft: "Draft",
+      public: "Public",
+      delete_title: "Delete recording",
+      delete_description: 'Permanently delete "{title}"? This cannot be undone.',
+      delete_success: "Recording deleted",
+      delete_error: "Failed to delete recording",
+    },
+    queues: {
+      title: "Job Queues",
+      pause: "Pause",
+      resume: "Resume",
+      paused_badge: "Paused",
+      retry: "Retry",
+      remove: "Remove",
+      retry_success: "Job retried",
+      retry_error: "Failed to retry job",
+      remove_success: "Job removed",
+      remove_error: "Failed to remove job",
+      pause_success: "Queue paused",
+      pause_error: "Failed to pause queue",
+      resume_success: "Queue resumed",
+      resume_error: "Failed to resume queue",
+      col_id: "ID",
+      col_name: "Name",
+      col_status: "Status",
+      col_attempts: "Attempts",
+      col_created: "Created",
+      col_actions: "Actions",
+      no_jobs: "No jobs found",
+      status_all: "All",
+      status_waiting: "Waiting",
+      status_active: "Active",
+      status_completed: "Completed",
+      status_failed: "Failed",
+      status_delayed: "Delayed",
+      failed_reason: "Reason: {reason}",
+    },
     article_form: {
       new_title: "New article",
       edit_title: "Edit article",

packages/frontend/src/lib/logger.ts

@@ -1,5 +1,5 @@
 /**
- * Server-side logging utility for sexy.pivoine.art
+ * Server-side logging utility for sexy
  * Provides structured logging with context and request tracing
  */
 
@@ -20,7 +20,7 @@ interface LogContext {
 
 class Logger {
   private isDev = process.env.NODE_ENV === "development";
-  private serviceName = "sexy.pivoine.art";
+  private serviceName = "sexy";
 
   private formatLog(ctx: LogContext): string {
     const { timestamp, level, message, context, requestId, userId, path, method, duration, error } =
@@ -126,7 +126,7 @@ class Logger {
     };
 
     console.log("\n" + "=".repeat(60));
-    console.log("🍑 sexy.pivoine.art - Server Starting 💜");
+    console.log("🍑 sexy - Server Starting 💜");
     console.log("=".repeat(60));
     console.log("\n📋 Environment Configuration:");
     Object.entries(env).forEach(([key, value]) => {

packages/frontend/src/lib/services.ts

@@ -3,6 +3,7 @@ import { apiUrl, getGraphQLClient } from "$lib/api";
 import type {
   Analytics,
   Article,
+  Comment,
   CurrentUser,
   Model,
   Recording,
@@ -15,6 +16,22 @@ import type {
 } from "$lib/types";
 import { logger } from "$lib/logger";
 
+export class UnauthorizedError extends Error {
+  constructor() {
+    super("Unauthorized");
+    this.name = "UnauthorizedError";
+  }
+}
+
+function isUnauthorizedError(error: unknown): boolean {
+  if (error && typeof error === "object" && "response" in error) {
+    const resp = (error as { response?: { errors?: { message: string }[] } }).response;
+    if (resp?.errors?.some((e) => e.message === "Unauthorized")) return true;
+  }
+  const msg = error instanceof Error ? error.message : String(error);
+  return msg.startsWith("Unauthorized");
+}
+
 // Helper to log API calls
 async function loggedApiCall<T>(
   operationName: string,
@@ -31,6 +48,10 @@ async function loggedApiCall<T>(
     return result;
   } catch (error) {
     const duration = Date.now() - startTime;
+    if (isUnauthorizedError(error)) {
+      logger.debug(`🔒 API: ${operationName} unauthorized`, { duration, context });
+      throw new UnauthorizedError();
+    }
     logger.error(`❌ API: ${operationName} failed`, {
       duration,
       context,
@@ -295,6 +316,7 @@ const ARTICLE_BY_SLUG_QUERY = gql`
         artist_name
         slug
         avatar
+        description
       }
     }
   }
@@ -489,6 +511,7 @@ const MODELS_QUERY = gql`
         description
         avatar
         banner
+        photo
         tags
         date_created
         photos {
@@ -538,6 +561,7 @@ const MODEL_BY_SLUG_QUERY = gql`
       description
       avatar
       banner
+      photo
       tags
       date_created
       photos {
@@ -572,6 +596,7 @@ const UPDATE_PROFILE_MUTATION = gql`
     $artistName: String
     $description: String
     $tags: [String!]
+    $avatar: String
   ) {
     updateProfile(
       firstName: $firstName
@@ -579,6 +604,7 @@ const UPDATE_PROFILE_MUTATION = gql`
       artistName: $artistName
       description: $description
       tags: $tags
+      avatar: $avatar
     ) {
       id
       email
@@ -608,6 +634,7 @@ export async function updateProfile(user: Partial<User> & { password?: string })
           artistName: user.artist_name,
           description: user.description,
           tags: user.tags,
+          avatar: user.avatar,
         },
       );
       return data.updateProfile;
@@ -651,7 +678,8 @@ export async function removeFile(id: string) {
         method: "DELETE",
         credentials: "include",
       });
-      if (!response.ok) throw new Error(`Failed to delete file: ${response.statusText}`);
+      if (!response.ok && response.status !== 404)
+        throw new Error(`Failed to delete file: ${response.statusText}`);
     },
     { fileId: id },
   );
@@ -808,13 +836,12 @@ const RECORDINGS_QUERY = gql`
   }
 `;
 
-export async function getRecordings(fetchFn?: typeof globalThis.fetch) {
+export async function getRecordings(fetchFn?: typeof globalThis.fetch, token?: string) {
   return loggedApiCall(
     "getRecordings",
     async () => {
-      const data = await getGraphQLClient(fetchFn).request<{ recordings: Recording[] }>(
-        RECORDINGS_QUERY,
-      );
+      const client = token ? getAuthClient(token, fetchFn) : getGraphQLClient(fetchFn);
+      const data = await client.request<{ recordings: Recording[] }>(RECORDINGS_QUERY);
       return data.recordings;
     },
     {},
@@ -894,6 +921,26 @@ export async function createRecording(
   );
 }
 
+const UPDATE_RECORDING_MUTATION = gql`
+  mutation UpdateRecording($id: String!, $status: String, $public: Boolean) {
+    updateRecording(id: $id, status: $status, public: $public) {
+      id
+      status
+      public
+    }
+  }
+`;
+
+export async function updateRecording(id: string, fields: { status?: string; public?: boolean }) {
+  return loggedApiCall("updateRecording", async () => {
+    const data = await getGraphQLClient().request<{ updateRecording: Recording }>(
+      UPDATE_RECORDING_MUTATION,
+      { id, ...fields },
+    );
+    return data.updateRecording;
+  });
+}
+
 const DELETE_RECORDING_MUTATION = gql`
   mutation DeleteRecording($id: String!) {
     deleteRecording(id: $id)
@@ -932,14 +979,12 @@ const RECORDING_QUERY = gql`
   }
 `;
 
-export async function getRecording(id: string, fetchFn?: typeof globalThis.fetch) {
+export async function getRecording(id: string, fetchFn?: typeof globalThis.fetch, token?: string) {
   return loggedApiCall(
     "getRecording",
     async () => {
-      const data = await getGraphQLClient(fetchFn).request<{ recording: Recording | null }>(
-        RECORDING_QUERY,
-        { id },
-      );
+      const client = token ? getAuthClient(token, fetchFn) : getGraphQLClient(fetchFn);
+      const data = await client.request<{ recording: Recording | null }>(RECORDING_QUERY, { id });
       return data.recording;
     },
     { id },
@@ -1145,6 +1190,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
     $artistName: String
     $avatarId: String
     $bannerId: String
+    $photoId: String
   ) {
     adminUpdateUser(
       userId: $userId
@@ -1155,6 +1201,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
       artistName: $artistName
       avatarId: $avatarId
       bannerId: $bannerId
+      photoId: $photoId
     ) {
       id
       email
@@ -1165,6 +1212,7 @@ const ADMIN_UPDATE_USER_MUTATION = gql`
       is_admin
       avatar
       banner
+      photo
       date_created
     }
   }
@@ -1179,6 +1227,7 @@ export async function adminUpdateUser(input: {
   artistName?: string;
   avatarId?: string;
   bannerId?: string;
+  photoId?: string;
 }) {
   return loggedApiCall(
     "adminUpdateUser",
@@ -1222,6 +1271,7 @@ const ADMIN_GET_USER_QUERY = gql`
       is_admin
       avatar
       banner
+      photo
       description
       tags
       email_verified
@@ -1239,7 +1289,9 @@ export async function adminGetUser(userId: string, token?: string) {
     "adminGetUser",
     async () => {
       const client = token ? getAuthClient(token) : getGraphQLClient();
-      const data = await client.request<{ adminGetUser: any }>(ADMIN_GET_USER_QUERY, { userId });
+      const data = await client.request<{
+        adminGetUser: User & { photos: Array<{ id: string; filename: string }> };
+      }>(ADMIN_GET_USER_QUERY, { userId });
       return data.adminGetUser;
     },
     { userId },
@@ -1339,6 +1391,51 @@ export async function adminListVideos(
   });
 }
 
+const ADMIN_GET_VIDEO_QUERY = gql`
+  query AdminGetVideo($id: String!) {
+    adminGetVideo(id: $id) {
+      id
+      slug
+      title
+      description
+      image
+      movie
+      tags
+      upload_date
+      premium
+      featured
+      likes_count
+      plays_count
+      models {
+        id
+        artist_name
+        slug
+        avatar
+      }
+      movie_file {
+        id
+        filename
+        mime_type
+        duration
+      }
+    }
+  }
+`;
+
+export async function adminGetVideo(
+  id: string,
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<Video | null> {
+  return loggedApiCall("adminGetVideo", async () => {
+    const client = token ? getAuthClient(token) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminGetVideo: Video | null }>(ADMIN_GET_VIDEO_QUERY, {
+      id,
+    });
+    return data.adminGetVideo;
+  });
+}
+
 const CREATE_VIDEO_MUTATION = gql`
   mutation CreateVideo(
     $title: String!
@@ -1543,6 +1640,44 @@ export async function adminListArticles(
   });
 }
 
+const ADMIN_GET_ARTICLE_QUERY = gql`
+  query AdminGetArticle($id: String!) {
+    adminGetArticle(id: $id) {
+      id
+      slug
+      title
+      excerpt
+      content
+      image
+      tags
+      publish_date
+      category
+      featured
+      author {
+        id
+        artist_name
+        slug
+        avatar
+      }
+    }
+  }
+`;
+
+export async function adminGetArticle(
+  id: string,
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<Article | null> {
+  return loggedApiCall("adminGetArticle", async () => {
+    const client = token ? getAuthClient(token) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminGetArticle: Article | null }>(
+      ADMIN_GET_ARTICLE_QUERY,
+      { id },
+    );
+    return data.adminGetArticle;
+  });
+}
+
 const CREATE_ARTICLE_MUTATION = gql`
   mutation CreateArticle(
     $title: String!
@@ -1681,15 +1816,246 @@ const ANALYTICS_QUERY = gql`
   }
 `;
 
-export async function getAnalytics(fetchFn?: typeof globalThis.fetch) {
+export async function getAnalytics(fetchFn?: typeof globalThis.fetch, token?: string) {
   return loggedApiCall(
     "getAnalytics",
     async () => {
-      const data = await getGraphQLClient(fetchFn).request<{ analytics: Analytics | null }>(
-        ANALYTICS_QUERY,
-      );
+      const client = token ? getAuthClient(token, fetchFn) : getGraphQLClient(fetchFn);
+      const data = await client.request<{ analytics: Analytics | null }>(ANALYTICS_QUERY);
       return data.analytics;
     },
     {},
   );
 }
+
+// ─── Admin: Comments ──────────────────────────────────────────────────────────
+
+const ADMIN_LIST_COMMENTS_QUERY = gql`
+  query AdminListComments($search: String, $limit: Int, $offset: Int) {
+    adminListComments(search: $search, limit: $limit, offset: $offset) {
+      items {
+        id
+        collection
+        item_id
+        comment
+        user_id
+        date_created
+        user {
+          id
+          artist_name
+          avatar
+        }
+      }
+      total
+    }
+  }
+`;
+
+export async function adminListComments(
+  opts: { search?: string; limit?: number; offset?: number } = {},
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<{ items: Comment[]; total: number }> {
+  return loggedApiCall("adminListComments", async () => {
+    const client = token ? getAuthClient(token) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminListComments: { items: Comment[]; total: number } }>(
+      ADMIN_LIST_COMMENTS_QUERY,
+      opts,
+    );
+    return data.adminListComments;
+  });
+}
+
+// ─── Admin: Recordings ────────────────────────────────────────────────────────
+
+const ADMIN_LIST_RECORDINGS_QUERY = gql`
+  query AdminListRecordings($search: String, $status: String, $limit: Int, $offset: Int) {
+    adminListRecordings(search: $search, status: $status, limit: $limit, offset: $offset) {
+      items {
+        id
+        title
+        slug
+        status
+        duration
+        public
+        featured
+        user_id
+        date_created
+      }
+      total
+    }
+  }
+`;
+
+export async function adminListRecordings(
+  opts: { search?: string; status?: string; limit?: number; offset?: number } = {},
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<{ items: Recording[]; total: number }> {
+  return loggedApiCall("adminListRecordings", async () => {
+    const client = token ? getAuthClient(token) : getGraphQLClient(fetchFn);
+    const data = await client.request<{
+      adminListRecordings: { items: Recording[]; total: number };
+    }>(ADMIN_LIST_RECORDINGS_QUERY, opts);
+    return data.adminListRecordings;
+  });
+}
+
+const ADMIN_DELETE_RECORDING_MUTATION = gql`
+  mutation AdminDeleteRecording($id: String!) {
+    adminDeleteRecording(id: $id)
+  }
+`;
+
+export async function adminDeleteRecording(id: string): Promise<void> {
+  return loggedApiCall("adminDeleteRecording", async () => {
+    await getGraphQLClient().request(ADMIN_DELETE_RECORDING_MUTATION, { id });
+  });
+}
+
+// --- Queues ---
+
+export type JobCounts = {
+  waiting: number;
+  active: number;
+  completed: number;
+  failed: number;
+  delayed: number;
+  paused: number;
+};
+
+export type QueueInfo = {
+  name: string;
+  counts: JobCounts;
+  isPaused: boolean;
+};
+
+export type Job = {
+  id: string;
+  name: string;
+  queue: string;
+  status: string;
+  data: Record<string, unknown>;
+  result: unknown;
+  failedReason: string | null;
+  attemptsMade: number;
+  createdAt: string;
+  processedAt: string | null;
+  finishedAt: string | null;
+  progress: number | null;
+};
+
+const ADMIN_QUEUES_QUERY = gql`
+  query AdminQueues {
+    adminQueues {
+      name
+      isPaused
+      counts {
+        waiting
+        active
+        completed
+        failed
+        delayed
+        paused
+      }
+    }
+  }
+`;
+
+export async function getAdminQueues(
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<QueueInfo[]> {
+  return loggedApiCall("getAdminQueues", async () => {
+    const client = token ? getAuthClient(token, fetchFn) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminQueues: QueueInfo[] }>(ADMIN_QUEUES_QUERY);
+    return data.adminQueues;
+  });
+}
+
+const ADMIN_QUEUE_JOBS_QUERY = gql`
+  query AdminQueueJobs($queue: String!, $status: String, $limit: Int, $offset: Int) {
+    adminQueueJobs(queue: $queue, status: $status, limit: $limit, offset: $offset) {
+      id
+      name
+      queue
+      status
+      data
+      result
+      failedReason
+      attemptsMade
+      createdAt
+      processedAt
+      finishedAt
+      progress
+    }
+  }
+`;
+
+export async function getAdminQueueJobs(
+  queue: string,
+  status?: string,
+  limit?: number,
+  offset?: number,
+  fetchFn?: typeof globalThis.fetch,
+  token?: string,
+): Promise<Job[]> {
+  return loggedApiCall("getAdminQueueJobs", async () => {
+    const client = token ? getAuthClient(token, fetchFn) : getGraphQLClient(fetchFn);
+    const data = await client.request<{ adminQueueJobs: Job[] }>(ADMIN_QUEUE_JOBS_QUERY, {
+      queue,
+      status,
+      limit,
+      offset,
+    });
+    return data.adminQueueJobs;
+  });
+}
+
+const ADMIN_RETRY_JOB_MUTATION = gql`
+  mutation AdminRetryJob($queue: String!, $jobId: String!) {
+    adminRetryJob(queue: $queue, jobId: $jobId)
+  }
+`;
+
+export async function adminRetryJob(queue: string, jobId: string): Promise<void> {
+  return loggedApiCall("adminRetryJob", async () => {
+    await getGraphQLClient().request(ADMIN_RETRY_JOB_MUTATION, { queue, jobId });
+  });
+}
+
+const ADMIN_REMOVE_JOB_MUTATION = gql`
+  mutation AdminRemoveJob($queue: String!, $jobId: String!) {
+    adminRemoveJob(queue: $queue, jobId: $jobId)
+  }
+`;
+
+export async function adminRemoveJob(queue: string, jobId: string): Promise<void> {
+  return loggedApiCall("adminRemoveJob", async () => {
+    await getGraphQLClient().request(ADMIN_REMOVE_JOB_MUTATION, { queue, jobId });
+  });
+}
+
+const ADMIN_PAUSE_QUEUE_MUTATION = gql`
+  mutation AdminPauseQueue($queue: String!) {
+    adminPauseQueue(queue: $queue)
+  }
+`;
+
+const ADMIN_RESUME_QUEUE_MUTATION = gql`
+  mutation AdminResumeQueue($queue: String!) {
+    adminResumeQueue(queue: $queue)
+  }
+`;
+
+export async function adminPauseQueue(queue: string): Promise<void> {
+  return loggedApiCall("adminPauseQueue", async () => {
+    await getGraphQLClient().request(ADMIN_PAUSE_QUEUE_MUTATION, { queue });
+  });
+}
+
+export async function adminResumeQueue(queue: string): Promise<void> {
+  return loggedApiCall("adminResumeQueue", async () => {
+    await getGraphQLClient().request(ADMIN_RESUME_QUEUE_MUTATION, { queue });
+  });
+}

packages/frontend/src/lib/types.ts

@@ -27,10 +27,10 @@ export type {
   RecentPoint,
   UserGamification,
   Achievement,
-} from "@sexy.pivoine.art/types";
+} from "@sexy/types";
 
-import type { CurrentUser } from "@sexy.pivoine.art/types";
-import type { ButtplugClientDevice } from "@sexy.pivoine.art/buttplug";
+import type { CurrentUser } from "@sexy/types";
+import type { ButtplugClientDevice } from "@sexy/buttplug";
 
 // ─── Frontend-only types ─────────────────────────────────────────────────────
 

packages/frontend/src/routes/+layout.svelte

@@ -28,7 +28,9 @@
 
 <div class="bg-background text-foreground min-h-screen">
   <!-- Advanced Global Plasma Background -->
-  <div class="fixed inset-0 pointer-events-none overflow-hidden">
+  <div
+    class="fixed inset-0 pointer-events-none overflow-hidden bg-gradient-to-b from-primary/12 via-accent/6 to-transparent"
+  >
     <!-- Large primary blobs -->
     <div
       class="absolute -top-40 -left-40 w-80 h-80 bg-gradient-to-r from-primary/12 via-accent/18 to-primary/8 rounded-full blur-3xl animate-blob-ultra-slow"

packages/frontend/src/routes/+page.svelte

@@ -5,6 +5,7 @@
   import { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
   import { formatVideoDuration } from "$lib/utils.js";
+  import SexyBackground from "$lib/components/background/background.svelte";
 
   const { data } = $props();
 </script>
@@ -13,10 +14,9 @@
 
 <!-- Hero Section -->
 <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
-  <!-- Background Gradient -->
   <div class="absolute inset-0 bg-gradient-to-br from-primary/20 via-accent/10 to-background"></div>
+  <SexyBackground />
 
-  <!-- Content -->
   <div class="relative z-10 container mx-auto px-4 text-center">
     <div class="max-w-5xl mx-auto space-y-12">
       <h1
@@ -47,14 +47,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Floating Elements -->
-  <div
-    class="absolute top-20 left-10 w-20 h-20 bg-primary/20 rounded-full blur-xl animate-pulse"
-  ></div>
-  <div
-    class="absolute bottom-20 right-10 w-32 h-32 bg-accent/20 rounded-full blur-xl animate-pulse delay-1000"
-  ></div>
 </section>
 
 <!-- Featured Models -->
@@ -71,40 +63,24 @@
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl mx-auto">
       {#each data.models as model (model.slug)}
-        <Card
-          class="p-0 group hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
-        >
-          <CardContent class="p-6 text-center">
-            <div class="relative mb-4">
-              <img
-                src={getAssetUrl(model.avatar, "mini")}
-                alt={model.artist_name}
-                class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all"
-              />
-              <!-- <div
-                class="absolute -bottom-2 -right-2 bg-primary text-primary-foreground rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold"
-              >
-                <HeartIcon class="w-4 h-4 fill-current" />
-              </div> -->
-            </div>
-            <h3 class="font-semibold text-lg mb-2">{model.artist_name}</h3>
-            <!-- <div
-              class="flex items-center justify-center gap-4 text-sm text-muted-foreground"
-            >
-              <div class="flex items-center gap-1">
-                <StarIcon class="w-4 h-4 text-yellow-500 fill-current" />
-                {model.rating}
+        <a href="/models/{model.slug}" class="block group">
+          <Card
+            class="p-0 h-full hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
+          >
+            <CardContent class="p-6 text-center">
+              <div class="relative mb-4">
+                <img
+                  src={getAssetUrl(model.avatar, "thumbnail")}
+                  alt={model.artist_name}
+                  class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all bg-muted"
+                />
               </div>
-              <div>{model.videos} {$_("home.featured_models.videos")}</div>
-            </div> -->
-            <Button
-              variant="ghost"
-              size="sm"
-              class="mt-4 w-full group-hover:bg-primary/10"
-              href="/models/{model.slug}">{$_("home.featured_models.view_profile")}</Button
-            >
-          </CardContent>
-        </Card>
+              <h3 class="font-semibold text-lg group-hover:text-primary transition-colors">
+                {model.artist_name}
+              </h3>
+            </CardContent>
+          </Card>
+        </a>
       {/each}
     </div>
   </div>
@@ -122,50 +98,44 @@
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
       {#each data.videos as video (video.slug)}
-        <Card
-          class="p-0 group hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
-        >
-          <div class="relative">
-            <img
-              src={getAssetUrl(video.image, "preview")}
-              alt={video.title}
-              class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
-            />
-            <div
-              class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent group-hover:scale-105 transition-transform duration-300"
-            ></div>
-            <div class="absolute bottom-2 left-2 text-white text-sm font-medium">
-              {#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
-            </div>
-            <!-- <div
-              class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-full"
-            >
-              {video.views}
-              {$_("home.trending.views")}
-            </div> -->
-            <div
-              class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-            >
-              <a
-                class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center"
-                href="/videos/{video.slug}"
-                aria-label={video.title}
+        <a href="/videos/{video.slug}" class="block group">
+          <Card
+            class="p-0 h-full hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
+          >
+            <div class="relative">
+              <img
+                src={getAssetUrl(video.image, "preview")}
+                alt={video.title}
+                class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
+              />
+              <div
+                class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent group-hover:scale-105 transition-transform duration-300"
+              ></div>
+              <div class="absolute bottom-2 left-2 text-white text-sm font-medium">
+                {#if video.movie_file?.duration}{formatVideoDuration(
+                    video.movie_file.duration,
+                  )}{/if}
+              </div>
+              <div
+                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                aria-hidden="true"
               >
-                <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
-              </a>
+                <div class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center">
+                  <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
+                </div>
+              </div>
             </div>
-          </div>
-          <CardContent class="px-4 pb-4 pt-0">
-            <h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
-              {video.title}
-            </h3>
-
-            <div class="flex items-center gap-2 text-sm text-muted-foreground">
-              <span class="icon-[ri--fire-line] w-4 h-4"></span>
-              {$_("home.trending.trending")}
-            </div>
-          </CardContent>
-        </Card>
+            <CardContent class="px-4 pb-4 pt-0">
+              <h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
+                {video.title}
+              </h3>
+              <div class="flex items-center gap-2 text-sm text-muted-foreground">
+                <span class="icon-[ri--fire-line] w-4 h-4"></span>
+                {$_("home.trending.trending")}
+              </div>
+            </CardContent>
+          </Card>
+        </a>
       {/each}
     </div>
   </div>

packages/frontend/src/routes/about/+page.svelte

@@ -7,7 +7,7 @@
 
   const { data } = $props();
 
-  const stats = [
+  const stats = $derived([
     {
       icon: "icon-[ri--user-heart-line]",
       value: data.stats.viewers_count,
@@ -28,7 +28,7 @@
       value: $_("about.stats.yearsFormatted", { values: { years: 5 } }),
       label: $_("about.stats.experience"),
     },
-  ];
+  ]);
 
   const team = [
     {

packages/frontend/src/routes/admin/+layout.svelte

@@ -1,13 +1,33 @@
 <script lang="ts">
   import { page } from "$app/state";
   import { _ } from "svelte-i18n";
+  import { Avatar, AvatarImage, AvatarFallback } from "$lib/components/ui/avatar";
+  import { getUserInitials } from "$lib/utils";
+  import { getAssetUrl } from "$lib/api";
 
-  const { children } = $props();
+  const { children, data } = $props();
+
+  const user = $derived(data.authStatus.user!);
+  const avatarUrl = $derived(
+    user.avatar ? (getAssetUrl(user.avatar, "thumbnail") ?? undefined) : undefined,
+  );
+  const displayName = $derived(user.artist_name ?? user.email);
 
   const navLinks = $derived([
     { name: $_("admin.nav.users"), href: "/admin/users", icon: "icon-[ri--team-line]" },
     { name: $_("admin.nav.videos"), href: "/admin/videos", icon: "icon-[ri--film-line]" },
     { name: $_("admin.nav.articles"), href: "/admin/articles", icon: "icon-[ri--article-line]" },
+    { name: $_("admin.nav.comments"), href: "/admin/comments", icon: "icon-[ri--message-line]" },
+    {
+      name: $_("admin.nav.recordings"),
+      href: "/admin/recordings",
+      icon: "icon-[ri--record-circle-line]",
+    },
+    {
+      name: $_("admin.nav.queues"),
+      href: "/admin/queues",
+      icon: "icon-[ri--stack-line]",
+    },
   ]);
 
   function isActive(href: string) {
@@ -15,29 +35,32 @@
   }
 </script>
 
-<div class="min-h-screen bg-background">
+<div class="min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
   <div class="container mx-auto px-4">
     <!-- Mobile top nav -->
-    <div class="lg:hidden flex items-center gap-2 py-3 border-b border-border/40">
-      <a
-        href="/"
-        class="text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 mr-2"
-      >
-        {$_("admin.nav.back_mobile")}
-      </a>
-      {#each navLinks as link (link.href)}
+    <div class="lg:hidden border-b border-border/40">
+      <div class="flex items-center gap-1 overflow-x-auto py-2 scrollbar-none">
         <a
-          href={link.href}
-          class={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-            isActive(link.href)
-              ? "bg-primary/10 text-primary"
-              : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
-          }`}
+          href="/"
+          class="shrink-0 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors px-2"
         >
-          <span class={`${link.icon} h-4 w-4`}></span>
-          {link.name}
+          <span class="icon-[ri--arrow-left-line] h-4 w-4"></span>
+          <span class="hidden sm:inline">{$_("admin.nav.back_mobile")}</span>
         </a>
-      {/each}
+        {#each navLinks as link (link.href)}
+          <a
+            href={link.href}
+            class={`shrink-0 flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors ${
+              isActive(link.href)
+                ? "bg-primary/10 text-primary"
+                : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+            }`}
+          >
+            <span class={`${link.icon} h-4 w-4 shrink-0`}></span>
+            <span class="hidden sm:inline">{link.name}</span>
+          </a>
+        {/each}
+      </div>
     </div>
 
     <!-- Desktop layout -->
@@ -45,10 +68,33 @@
       <!-- Sidebar (desktop only) -->
       <aside class="hidden lg:flex w-56 shrink-0 flex-col border-r border-border/40">
         <div class="px-4 py-5 border-b border-border/40">
-          <a href="/" class="text-xs text-muted-foreground hover:text-foreground transition-colors">
+          <a
+            href="/"
+            class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <span class="icon-[ri--arrow-left-line] h-3.5 w-3.5"></span>
             {$_("admin.nav.back_to_site")}
           </a>
-          <h1 class="mt-2 text-base font-bold text-foreground">{$_("admin.nav.title")}</h1>
+          <div class="mt-3 flex items-center gap-3">
+            <div class="relative shrink-0">
+              <Avatar class="h-9 w-9">
+                <AvatarImage src={avatarUrl} alt={displayName} />
+                <AvatarFallback class="text-xs">
+                  {getUserInitials(displayName)}
+                </AvatarFallback>
+              </Avatar>
+              <span
+                class="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary ring-2 ring-background"
+              >
+                <span class="icon-[ri--shield-keyhole-fill] h-2.5 w-2.5 text-primary-foreground"
+                ></span>
+              </span>
+            </div>
+            <div class="min-w-0">
+              <p class="text-sm font-semibold text-foreground truncate">{displayName}</p>
+              <p class="text-xs text-primary font-medium">{$_("admin.nav.title")}</p>
+            </div>
+          </div>
         </div>
 
         <nav class="flex-1 p-3 space-y-1">

packages/frontend/src/routes/admin/articles/+page.svelte

@@ -12,6 +12,8 @@
   import * as Dialog from "$lib/components/ui/dialog";
   import type { Article } from "$lib/types";
   import TimeAgo from "javascript-time-ago";
+  import Meta from "$lib/components/meta/meta.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
 
   const { data } = $props();
 
@@ -20,7 +22,7 @@
   let deleteTarget: Article | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(data.search ?? "");
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
@@ -64,8 +66,10 @@
   }
 </script>
 
-<div class="py-3 sm:py-6 sm:pl-6">
-  <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
+<Meta title={$_("admin.articles.title")} description={null} />
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.articles.title")}</h1>
     <div class="flex items-center gap-3">
       <span class="text-sm text-muted-foreground"
@@ -81,7 +85,7 @@
   </div>
 
   <!-- Filters -->
-  <div class="flex flex-wrap gap-3 mb-4 px-3 sm:px-0">
+  <div class="flex flex-wrap items-center gap-3 mb-4">
     <Input
       placeholder={$_("admin.articles.search_placeholder")}
       class="max-w-xs"
@@ -110,7 +114,6 @@
       </SelectContent>
     </Select>
     <Button
-      size="sm"
       variant={data.featured === true ? "default" : "outline"}
       onclick={() => setFilter("featured", data.featured === true ? null : "true")}
     >
@@ -202,7 +205,7 @@
 
   <!-- Pagination -->
   {#if data.total > data.limit}
-    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+    <div class="flex items-center justify-between mt-4 flex-wrap gap-3">
       <span class="text-sm text-muted-foreground">
         {$_("admin.users.showing", {
           values: {
@@ -212,32 +215,15 @@
           },
         })}
       </span>
-      <div class="flex gap-2">
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={data.offset === 0}
-          onclick={() => {
-            const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(Math.max(0, data.offset - data.limit)));
-            goto(`?${params.toString()}`);
-          }}
-        >
-          {$_("common.previous")}
-        </Button>
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={data.offset + data.limit >= data.total}
-          onclick={() => {
-            const params = new SvelteURLSearchParams(page.url.searchParams.toString());
-            params.set("offset", String(data.offset + data.limit));
-            goto(`?${params.toString()}`);
-          }}
-        >
-          {$_("common.next")}
-        </Button>
-      </div>
+      <Pagination
+        currentPage={Math.floor(data.offset / data.limit) + 1}
+        totalPages={Math.ceil(data.total / data.limit)}
+        onPageChange={(p) => {
+          const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+          params.set("offset", String((p - 1) * data.limit));
+          goto(`?${params.toString()}`);
+        }}
+      />
     </div>
   {/if}
 </div>

packages/frontend/src/routes/admin/articles/[id]/+page.server.ts

@@ -1,16 +1,17 @@
-import { adminListArticles, adminListUsers } from "$lib/services";
+import { adminGetArticle, adminListUsers } from "$lib/services";
 import { error } from "@sveltejs/kit";
 
 export async function load({ params, fetch, cookies }) {
   const token = cookies.get("session_token") || "";
-  const [articles, modelsResult] = await Promise.all([
-    adminListArticles(fetch, token).catch(() => []),
+  const [article, modelsResult] = await Promise.all([
+    adminGetArticle(params.id, fetch, token).catch(() => null),
     adminListUsers({ role: "model", limit: 200 }, fetch, token).catch(() => ({
       items: [],
       total: 0,
     })),
   ]);
-  const article = articles.find((a) => a.id === params.id);
+
   if (!article) throw error(404, "Article not found");
+
   return { article, authors: modelsResult.items };
 }

packages/frontend/src/routes/admin/articles/[id]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { goto } from "$app/navigation";
   import { toast } from "svelte-sonner";
   import { _ } from "svelte-i18n";
@@ -10,24 +11,44 @@
   import { Textarea } from "$lib/components/ui/textarea";
   import { TagsInput } from "$lib/components/ui/tags-input";
   import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import { Card, CardContent } from "$lib/components/ui/card";
   import { getAssetUrl } from "$lib/api";
   import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
   import { DatePicker } from "$lib/components/ui/date-picker";
+  import Meta from "$lib/components/meta/meta.svelte";
 
   const { data } = $props();
 
-  let title = $state(data.article.title);
-  let slug = $state(data.article.slug);
-  let excerpt = $state(data.article.excerpt ?? "");
-  let content = $state(data.article.content ?? "");
-  let category = $state(data.article.category ?? "");
-  let tags = $state<string[]>(data.article.tags ?? []);
-  let featured = $state(data.article.featured ?? false);
+  let title = $state(untrack(() => data.article.title));
+  let slug = $state(untrack(() => data.article.slug));
+  let excerpt = $state(untrack(() => data.article.excerpt ?? ""));
+  let content = $state(untrack(() => data.article.content ?? ""));
+  let category = $state(untrack(() => data.article.category ?? ""));
+  let tags = $state<string[]>(untrack(() => data.article.tags ?? []));
+  let featured = $state(untrack(() => data.article.featured ?? false));
   let publishDate = $state(
-    data.article.publish_date ? new Date(data.article.publish_date).toISOString().slice(0, 16) : "",
+    untrack(() =>
+      data.article.publish_date
+        ? new Date(data.article.publish_date).toISOString().slice(0, 16)
+        : "",
+    ),
   );
-  let imageId = $state<string | null>(data.article.image ?? null);
-  let authorId = $state(data.article.author?.id ?? "");
+  let imageId = $state<string | null>(untrack(() => data.article.image ?? null));
+  let authorId = $state(untrack(() => data.article.author?.id ?? ""));
+  $effect(() => {
+    title = data.article.title;
+    slug = data.article.slug;
+    excerpt = data.article.excerpt ?? "";
+    content = data.article.content ?? "";
+    category = data.article.category ?? "";
+    tags = data.article.tags ?? [];
+    featured = data.article.featured ?? false;
+    publishDate = data.article.publish_date
+      ? new Date(data.article.publish_date).toISOString().slice(0, 16)
+      : "";
+    imageId = data.article.image ?? null;
+    authorId = data.article.author?.id ?? "";
+  });
   let selectedAuthor = $derived(data.authors.find((a) => a.id === authorId) ?? null);
   let saving = $state(false);
   let editorTab = $state<"write" | "preview">("write");
@@ -66,153 +87,178 @@
       });
       toast.success($_("admin.article_form.update_success"));
       goto("/admin/articles");
-    } catch (e: any) {
-      toast.error(e?.message ?? $_("admin.article_form.update_error"));
+    } catch (e) {
+      toast.error((e instanceof Error ? e.message : null) ?? $_("admin.article_form.update_error"));
     } finally {
       saving = false;
     }
   }
 </script>
 
-<div class="p-3 sm:p-6">
-  <div class="flex items-center gap-4 mb-6">
-    <Button variant="ghost" href="/admin/articles" size="sm">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
-    </Button>
-    <h1 class="text-2xl font-bold">{$_("admin.article_form.edit_title")}</h1>
+<Meta title={$_("admin.article_form.edit_title")} description={null} />
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="mb-6">
+    <h1 class="text-2xl font-bold">{data.article.title}</h1>
+    <p class="text-xs text-muted-foreground mt-0.5">
+      {data.article.slug}{data.article.category ? " · " + data.article.category : ""}{data.article
+        .author
+        ? " · " + data.article.author.artist_name
+        : ""}
+    </p>
   </div>
 
-  <div class="space-y-5 max-w-4xl">
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-      <div class="space-y-1.5">
-        <Label for="title">{$_("admin.common.title_field")}</Label>
-        <Input id="title" bind:value={title} />
-      </div>
-      <div class="space-y-1.5">
-        <Label for="slug">{$_("admin.common.slug_field")}</Label>
-        <Input id="slug" bind:value={slug} />
-      </div>
-    </div>
-
-    <div class="space-y-1.5">
-      <Label for="excerpt">{$_("admin.article_form.excerpt")}</Label>
-      <Textarea id="excerpt" bind:value={excerpt} rows={2} />
-    </div>
-
-    <!-- Markdown editor with live preview -->
-    <div class="space-y-1.5">
-      <div class="flex items-center justify-between">
-        <Label>{$_("admin.article_form.content")}</Label>
-        <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
-          <button
-            type="button"
-            class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</button
-          >
-          <button
-            type="button"
-            class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</button
-          >
+  <Card class="bg-card/50 border-primary/20 max-w-4xl">
+    <CardContent class="space-y-5 pt-6">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div class="space-y-1.5">
+          <Label for="title">{$_("admin.common.title_field")}</Label>
+          <Input
+            id="title"
+            bind:value={title}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
+        </div>
+        <div class="space-y-1.5">
+          <Label for="slug">{$_("admin.common.slug_field")}</Label>
+          <Input
+            id="slug"
+            bind:value={slug}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
         </div>
       </div>
-      <div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
+
+      <div class="space-y-1.5">
+        <Label for="excerpt">{$_("admin.article_form.excerpt")}</Label>
         <Textarea
-          bind:value={content}
-          class={`h-full min-h-96 font-mono text-sm resize-none ${editorTab === "preview" ? "hidden sm:flex" : ""}`}
+          id="excerpt"
+          bind:value={excerpt}
+          rows={2}
+          class="bg-background/50 border-primary/20 focus:border-primary"
         />
-        <div
-          class={`rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground min-h-96 ${editorTab === "write" ? "hidden sm:block" : ""}`}
-        >
-          {#if preview}
-            {@html preview}
-          {:else}
-            <p class="text-muted-foreground italic text-sm">
-              {$_("admin.article_form.preview_placeholder")}
-            </p>
-          {/if}
+      </div>
+
+      <!-- Markdown editor with live preview -->
+      <div class="space-y-1.5">
+        <div class="flex items-center justify-between">
+          <Label>{$_("admin.article_form.content")}</Label>
+          <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
+            <Button
+              variant="ghost"
+              size="sm"
+              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</Button
+            >
+            <Button
+              variant="ghost"
+              size="sm"
+              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</Button
+            >
+          </div>
+        </div>
+        <div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
+          <Textarea
+            bind:value={content}
+            class={`h-full min-h-96 font-mono text-sm resize-none bg-background/50 border-primary/20 focus:border-primary ${editorTab === "preview" ? "hidden sm:flex" : ""}`}
+          />
+          <div
+            class={`rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground min-h-96 ${editorTab === "write" ? "hidden sm:block" : ""}`}
+          >
+            {#if preview}
+              {@html preview}
+            {:else}
+              <p class="text-muted-foreground italic text-sm">
+                {$_("admin.article_form.preview_placeholder")}
+              </p>
+            {/if}
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="space-y-1.5">
-      <Label>{$_("admin.common.cover_image")}</Label>
-      {#if imageId}
-        <img
-          src={getAssetUrl(imageId, "thumbnail")}
-          alt=""
-          class="h-24 rounded object-cover mb-2"
-        />
-      {/if}
-      <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
-    </div>
+      <div class="space-y-1.5">
+        <Label>{$_("admin.common.cover_image")}</Label>
+        {#if imageId}
+          <img
+            src={getAssetUrl(imageId, "thumbnail")}
+            alt=""
+            class="h-24 rounded object-cover mb-2"
+          />
+        {/if}
+        <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
+      </div>
 
-    <!-- Author -->
-    <div class="space-y-1.5">
-      <Label>{$_("admin.article_form.author")}</Label>
-      <Select type="single" bind:value={authorId}>
-        <SelectTrigger class="w-full">
-          {#if selectedAuthor}
-            {#if selectedAuthor.avatar}
-              <img
-                src={getAssetUrl(selectedAuthor.avatar, "mini")}
-                alt=""
-                class="h-5 w-5 rounded-full object-cover shrink-0"
-              />
-            {/if}
-            {selectedAuthor.artist_name}
-          {:else}
-            <span class="text-muted-foreground">{$_("admin.article_form.no_author")}</span>
-          {/if}
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="">{$_("admin.article_form.no_author")}</SelectItem>
-          {#each data.authors as author (author.id)}
-            <SelectItem value={author.id}>
-              {#if author.avatar}
+      <div class="space-y-1.5">
+        <Label>{$_("admin.article_form.author")}</Label>
+        <Select type="single" bind:value={authorId}>
+          <SelectTrigger class="w-full bg-background/50 border-primary/20">
+            {#if selectedAuthor}
+              {#if selectedAuthor.avatar}
                 <img
-                  src={getAssetUrl(author.avatar, "mini")}
+                  src={getAssetUrl(selectedAuthor.avatar, "mini")}
                   alt=""
                   class="h-5 w-5 rounded-full object-cover shrink-0"
                 />
               {/if}
-              {author.artist_name}
-            </SelectItem>
-          {/each}
-        </SelectContent>
-      </Select>
-    </div>
-
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-      <div class="space-y-1.5">
-        <Label for="category">{$_("admin.article_form.category")}</Label>
-        <Input id="category" bind:value={category} />
+              {selectedAuthor.artist_name}
+            {:else}
+              <span class="text-muted-foreground">{$_("admin.article_form.no_author")}</span>
+            {/if}
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="">{$_("admin.article_form.no_author")}</SelectItem>
+            {#each data.authors as author (author.id)}
+              <SelectItem value={author.id}>
+                {#if author.avatar}
+                  <img
+                    src={getAssetUrl(author.avatar, "mini")}
+                    alt=""
+                    class="h-5 w-5 rounded-full object-cover shrink-0"
+                  />
+                {/if}
+                {author.artist_name}
+              </SelectItem>
+            {/each}
+          </SelectContent>
+        </Select>
       </div>
-      <div class="space-y-1.5">
-        <Label>{$_("admin.common.publish_date")}</Label>
-        <DatePicker bind:value={publishDate} placeholder={$_("admin.common.publish_date")} />
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div class="space-y-1.5">
+          <Label for="category">{$_("admin.article_form.category")}</Label>
+          <Input
+            id="category"
+            bind:value={category}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
+        </div>
+        <div class="space-y-1.5">
+          <Label>{$_("admin.common.publish_date")}</Label>
+          <DatePicker bind:value={publishDate} placeholder={$_("admin.common.publish_date")} />
+        </div>
       </div>
-    </div>
 
-    <div class="space-y-1.5">
-      <Label>{$_("admin.common.tags")}</Label>
-      <TagsInput bind:value={tags} />
-    </div>
+      <div class="space-y-1.5">
+        <Label>{$_("admin.common.tags")}</Label>
+        <TagsInput
+          bind:value={tags}
+          class="bg-background/50 border-primary/20 focus:border-primary"
+        />
+      </div>
 
-    <label class="flex items-center gap-2 cursor-pointer">
-      <input type="checkbox" bind:checked={featured} class="rounded" />
-      <span class="text-sm">{$_("admin.common.featured")}</span>
-    </label>
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input type="checkbox" bind:checked={featured} class="rounded" />
+        <span class="text-sm">{$_("admin.common.featured")}</span>
+      </label>
 
-    <div class="flex gap-3 pt-2">
       <Button
         onclick={handleSubmit}
         disabled={saving}
-        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
       >
         {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
       </Button>
-      <Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
-    </div>
-  </div>
+    </CardContent>
+  </Card>
 </div>

packages/frontend/src/routes/admin/articles/new/+page.svelte

@@ -11,6 +11,8 @@
   import { TagsInput } from "$lib/components/ui/tags-input";
   import { DatePicker } from "$lib/components/ui/date-picker";
   import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import { Card, CardContent } from "$lib/components/ui/card";
+  import Meta from "$lib/components/meta/meta.svelte";
 
   let title = $state("");
   let slug = $state("");
@@ -67,135 +69,142 @@
       });
       toast.success($_("admin.article_form.create_success"));
       goto("/admin/articles");
-    } catch (e: any) {
-      toast.error(e?.message ?? $_("admin.article_form.create_error"));
+    } catch (e) {
+      toast.error((e instanceof Error ? e.message : null) ?? $_("admin.article_form.create_error"));
     } finally {
       saving = false;
     }
   }
 </script>
 
-<div class="p-3 sm:p-6">
-  <div class="flex items-center gap-4 mb-6">
-    <Button variant="ghost" href="/admin/articles" size="sm">
-      <span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
-    </Button>
+<Meta title={$_("admin.article_form.new_title")} description={null} />
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="mb-6">
     <h1 class="text-2xl font-bold">{$_("admin.article_form.new_title")}</h1>
   </div>
 
-  <div class="space-y-5 max-w-4xl">
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-      <div class="space-y-1.5">
-        <Label for="title">{$_("admin.common.title_field")}</Label>
-        <Input
-          id="title"
-          bind:value={title}
-          oninput={() => {
-            if (!slug) slug = generateSlug(title);
-          }}
-          placeholder={$_("admin.article_form.title_placeholder")}
-        />
-      </div>
-      <div class="space-y-1.5">
-        <Label for="slug">{$_("admin.common.slug_field")}</Label>
-        <Input
-          id="slug"
-          bind:value={slug}
-          placeholder={$_("admin.article_form.slug_placeholder")}
-        />
-      </div>
-    </div>
-
-    <div class="space-y-1.5">
-      <Label for="excerpt">{$_("admin.article_form.excerpt")}</Label>
-      <Textarea
-        id="excerpt"
-        bind:value={excerpt}
-        placeholder={$_("admin.article_form.excerpt_placeholder")}
-        rows={2}
-      />
-    </div>
-
-    <!-- Markdown editor with live preview -->
-    <div class="space-y-1.5">
-      <div class="flex items-center justify-between">
-        <Label>{$_("admin.article_form.content")}</Label>
-        <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
-          <button
-            type="button"
-            class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</button
-          >
-          <button
-            type="button"
-            class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</button
-          >
+  <Card class="bg-card/50 border-primary/20 max-w-4xl">
+    <CardContent class="space-y-5 pt-6">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div class="space-y-1.5">
+          <Label for="title">{$_("admin.common.title_field")}</Label>
+          <Input
+            id="title"
+            bind:value={title}
+            oninput={() => {
+              if (!slug) slug = generateSlug(title);
+            }}
+            placeholder={$_("admin.article_form.title_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
+        </div>
+        <div class="space-y-1.5">
+          <Label for="slug">{$_("admin.common.slug_field")}</Label>
+          <Input
+            id="slug"
+            bind:value={slug}
+            placeholder={$_("admin.article_form.slug_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
         </div>
       </div>
-      <!-- Mobile: single pane toggled; Desktop: side by side -->
-      <div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
+
+      <div class="space-y-1.5">
+        <Label for="excerpt">{$_("admin.article_form.excerpt")}</Label>
         <Textarea
-          bind:value={content}
-          placeholder={$_("admin.article_form.content_placeholder")}
-          class={`h-full min-h-96 font-mono text-sm resize-none ${editorTab === "preview" ? "hidden sm:flex" : ""}`}
+          id="excerpt"
+          bind:value={excerpt}
+          placeholder={$_("admin.article_form.excerpt_placeholder")}
+          rows={2}
+          class="bg-background/50 border-primary/20 focus:border-primary"
         />
-        <div
-          class={`rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground min-h-96 ${editorTab === "write" ? "hidden sm:block" : ""}`}
-        >
-          {#if preview}
-            {@html preview}
-          {:else}
-            <p class="text-muted-foreground italic text-sm">
-              {$_("admin.article_form.preview_placeholder")}
-            </p>
-          {/if}
+      </div>
+
+      <!-- Markdown editor with live preview -->
+      <div class="space-y-1.5">
+        <div class="flex items-center justify-between">
+          <Label>{$_("admin.article_form.content")}</Label>
+          <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
+            <Button
+              variant="ghost"
+              size="sm"
+              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</Button
+            >
+            <Button
+              variant="ghost"
+              size="sm"
+              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+              onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</Button
+            >
+          </div>
+        </div>
+        <!-- Mobile: single pane toggled; Desktop: side by side -->
+        <div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
+          <Textarea
+            bind:value={content}
+            placeholder={$_("admin.article_form.content_placeholder")}
+            class={`h-full min-h-96 font-mono text-sm resize-none bg-background/50 border-primary/20 focus:border-primary ${editorTab === "preview" ? "hidden sm:flex" : ""}`}
+          />
+          <div
+            class={`rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground min-h-96 ${editorTab === "write" ? "hidden sm:block" : ""}`}
+          >
+            {#if preview}
+              {@html preview}
+            {:else}
+              <p class="text-muted-foreground italic text-sm">
+                {$_("admin.article_form.preview_placeholder")}
+              </p>
+            {/if}
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="space-y-1.5">
-      <Label>{$_("admin.common.cover_image")}</Label>
-      <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
-      {#if imageId}<p class="text-xs text-green-600 mt-1">
-          {$_("admin.common.image_uploaded")} ✓
-        </p>{/if}
-    </div>
-
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <div class="space-y-1.5">
-        <Label for="category">{$_("admin.article_form.category")}</Label>
-        <Input
-          id="category"
-          bind:value={category}
-          placeholder={$_("admin.article_form.category_placeholder")}
+        <Label>{$_("admin.common.cover_image")}</Label>
+        <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
+        {#if imageId}
+          <p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>
+        {/if}
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div class="space-y-1.5">
+          <Label for="category">{$_("admin.article_form.category")}</Label>
+          <Input
+            id="category"
+            bind:value={category}
+            placeholder={$_("admin.article_form.category_placeholder")}
+            class="bg-background/50 border-primary/20 focus:border-primary"
+          />
+        </div>
+        <div class="space-y-1.5">
+          <Label>{$_("admin.common.publish_date")}</Label>
+          <DatePicker bind:value={publishDate} placeholder={$_("admin.common.publish_date")} />
+        </div>
+      </div>
+
+      <div class="space-y-1.5">
+        <Label>{$_("admin.common.tags")}</Label>
+        <TagsInput
+          bind:value={tags}
+          class="bg-background/50 border-primary/20 focus:border-primary"
         />
       </div>
-      <div class="space-y-1.5">
-        <Label>{$_("admin.common.publish_date")}</Label>
-        <DatePicker bind:value={publishDate} placeholder={$_("admin.common.publish_date")} />
-      </div>
-    </div>
 
-    <div class="space-y-1.5">
-      <Label>{$_("admin.common.tags")}</Label>
-      <TagsInput bind:value={tags} />
-    </div>
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input type="checkbox" bind:checked={featured} class="rounded" />
+        <span class="text-sm">{$_("admin.common.featured")}</span>
+      </label>
 
-    <label class="flex items-center gap-2 cursor-pointer">
-      <input type="checkbox" bind:checked={featured} class="rounded" />
-      <span class="text-sm">{$_("admin.common.featured")}</span>
-    </label>
-
-    <div class="flex gap-3 pt-2">
       <Button
         onclick={handleSubmit}
         disabled={saving}
-        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
       >
         {saving ? $_("admin.common.creating") : $_("admin.article_form.create")}
       </Button>
-      <Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
-    </div>
-  </div>
+    </CardContent>
+  </Card>
 </div>

packages/frontend/src/routes/admin/comments/+page.server.ts

@@ -0,0 +1,15 @@
+import { adminListComments } from "$lib/services";
+
+export async function load({ fetch, url, cookies }) {
+  const token = cookies.get("session_token") || "";
+  const search = url.searchParams.get("search") || undefined;
+  const offset = parseInt(url.searchParams.get("offset") || "0", 10);
+  const limit = 50;
+
+  const result = await adminListComments({ search, limit, offset }, fetch, token).catch(() => ({
+    items: [],
+    total: 0,
+  }));
+
+  return { ...result, search, offset, limit };
+}

packages/frontend/src/routes/admin/comments/+page.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import { goto, invalidateAll } from "$app/navigation";
+  import { page } from "$app/state";
+  import { SvelteURLSearchParams } from "svelte/reactivity";
+  import { toast } from "svelte-sonner";
+  import { _ } from "svelte-i18n";
+  import { deleteComment } from "$lib/services";
+  import { getAssetUrl } from "$lib/api";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import TimeAgo from "javascript-time-ago";
+  import Meta from "$lib/components/meta/meta.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
+
+  const { data } = $props();
+  const timeAgo = new TimeAgo("en");
+
+  let deleteTarget: { id: number; comment: string } | null = $state(null);
+  let deleteOpen = $state(false);
+  let deleting = $state(false);
+  let searchValue = $derived(data.search ?? "");
+  let searchTimeout: ReturnType<typeof setTimeout>;
+
+  function debounceSearch(value: string) {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+      const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+      if (value) params.set("search", value);
+      else params.delete("search");
+      params.delete("offset");
+      goto(`?${params.toString()}`, { keepFocus: true });
+    }, 300);
+  }
+
+  function confirmDelete(id: number, comment: string) {
+    deleteTarget = { id, comment };
+    deleteOpen = true;
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    deleting = true;
+    try {
+      await deleteComment(deleteTarget.id);
+      toast.success($_("admin.comments.delete_success"));
+      deleteOpen = false;
+      deleteTarget = null;
+      await invalidateAll();
+    } catch {
+      toast.error($_("admin.comments.delete_error"));
+    } finally {
+      deleting = false;
+    }
+  }
+</script>
+
+<Meta title={$_("admin.comments.title")} description={null} />
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold">{$_("admin.comments.title")}</h1>
+    <span class="text-sm text-muted-foreground"
+      >{$_("admin.users.total", { values: { total: data.total } })}</span
+    >
+  </div>
+
+  <div class="flex flex-wrap gap-3 mb-4">
+    <Input
+      placeholder={$_("admin.comments.search_placeholder")}
+      class="max-w-xs"
+      value={searchValue}
+      oninput={(e) => {
+        searchValue = (e.target as HTMLInputElement).value;
+        debounceSearch(searchValue);
+      }}
+    />
+  </div>
+
+  <div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">
+    <table class="w-full text-sm">
+      <thead class="bg-muted/30">
+        <tr>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+            >{$_("admin.comments.col_user")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+            >{$_("admin.comments.col_comment")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
+            >{$_("admin.comments.col_on")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
+            >{$_("admin.comments.col_date")}</th
+          >
+          <th class="px-4 py-3 text-right font-medium text-muted-foreground"
+            >{$_("admin.users.col_actions")}</th
+          >
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/30">
+        {#each data.items as comment (comment.id)}
+          <tr class="hover:bg-muted/10 transition-colors">
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-2">
+                {#if comment.user?.avatar}
+                  <img
+                    src={getAssetUrl(comment.user.avatar, "mini")}
+                    alt=""
+                    class="h-7 w-7 rounded-full object-cover"
+                  />
+                {:else}
+                  <div
+                    class="h-7 w-7 rounded-full bg-muted/50 flex items-center justify-center text-muted-foreground"
+                  >
+                    <span class="icon-[ri--user-line] h-4 w-4"></span>
+                  </div>
+                {/if}
+                <span class="font-medium text-sm">{comment.user?.artist_name ?? "—"}</span>
+              </div>
+            </td>
+            <td class="px-4 py-3 max-w-sm">
+              <p class="truncate text-sm">{comment.comment}</p>
+            </td>
+            <td class="px-4 py-3 text-muted-foreground hidden sm:table-cell capitalize text-sm">
+              {comment.collection} /
+              <span class="font-mono text-xs">{comment.item_id.slice(0, 8)}…</span>
+            </td>
+            <td class="px-4 py-3 text-muted-foreground hidden sm:table-cell text-sm">
+              {timeAgo.format(new Date(comment.date_created))}
+            </td>
+            <td class="px-4 py-3 text-right">
+              <Button
+                size="sm"
+                variant="ghost"
+                class="text-destructive hover:text-destructive hover:bg-destructive/10"
+                onclick={() => confirmDelete(comment.id, comment.comment)}
+              >
+                <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
+              </Button>
+            </td>
+          </tr>
+        {/each}
+
+        {#if data.items.length === 0}
+          <tr>
+            <td colspan="5" class="px-4 py-8 text-center text-muted-foreground">
+              {$_("admin.comments.no_results")}
+            </td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+  </div>
+
+  {#if data.total > data.limit}
+    <div class="flex items-center justify-between mt-4 flex-wrap gap-3">
+      <span class="text-sm text-muted-foreground">
+        {$_("admin.users.showing", {
+          values: {
+            start: data.offset + 1,
+            end: Math.min(data.offset + data.limit, data.total),
+            total: data.total,
+          },
+        })}
+      </span>
+      <Pagination
+        currentPage={Math.floor(data.offset / data.limit) + 1}
+        totalPages={Math.ceil(data.total / data.limit)}
+        onPageChange={(p) => {
+          const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+          params.set("offset", String((p - 1) * data.limit));
+          goto(`?${params.toString()}`);
+        }}
+      />
+    </div>
+  {/if}
+</div>
+
+<Dialog.Root bind:open={deleteOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>{$_("admin.comments.delete_title")}</Dialog.Title>
+      <Dialog.Description>
+        "{deleteTarget?.comment.slice(0, 80)}{(deleteTarget?.comment.length ?? 0) > 80 ? "…" : ""}"
+      </Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (deleteOpen = false)}>{$_("common.cancel")}</Button>
+      <Button variant="destructive" disabled={deleting} onclick={handleDelete}>
+        {deleting ? $_("admin.common.deleting") : $_("common.delete")}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

packages/frontend/src/routes/admin/queues/+page.server.ts

@@ -0,0 +1,35 @@
+import { getAdminQueues, getAdminQueueJobs } from "$lib/services";
+
+const LIMIT = 25;
+
+export async function load({ fetch, cookies, url }) {
+  const token = cookies.get("session_token") || "";
+  const queues = await getAdminQueues(fetch, token).catch(() => []);
+
+  const queueParam = url.searchParams.get("queue") ?? queues[0]?.name ?? null;
+  const status = url.searchParams.get("status") ?? null;
+  const offset = parseInt(url.searchParams.get("offset") ?? "0") || 0;
+
+  let jobs: Awaited<ReturnType<typeof getAdminQueueJobs>> = [];
+  let total = 0;
+
+  if (queueParam) {
+    jobs = await getAdminQueueJobs(
+      queueParam,
+      status ?? undefined,
+      LIMIT,
+      offset,
+      fetch,
+      token,
+    ).catch(() => []);
+
+    const queueInfo = queues.find((q) => q.name === queueParam);
+    if (queueInfo) {
+      const { waiting, active, completed, failed, delayed } = queueInfo.counts;
+      const counts: Record<string, number> = { waiting, active, completed, failed, delayed };
+      total = status ? (counts[status] ?? 0) : Object.values(counts).reduce((a, b) => a + b, 0);
+    }
+  }
+
+  return { queues, queue: queueParam, status, jobs, total, offset, limit: LIMIT };
+}

packages/frontend/src/routes/admin/queues/+page.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+  import { goto, invalidateAll } from "$app/navigation";
+  import { page } from "$app/state";
+  import { SvelteURLSearchParams } from "svelte/reactivity";
+  import { toast } from "svelte-sonner";
+  import { _ } from "svelte-i18n";
+  import { adminRetryJob, adminRemoveJob, adminPauseQueue, adminResumeQueue } from "$lib/services";
+  import { Button } from "$lib/components/ui/button";
+  import { Badge } from "$lib/components/ui/badge";
+  import type { Job } from "$lib/services";
+  import Meta from "$lib/components/meta/meta.svelte";
+  import Pagination from "$lib/components/pagination/pagination.svelte";
+
+  const { data } = $props();
+
+  let togglingQueue = $state<string | null>(null);
+
+  const STATUS_FILTERS = [
+    { value: null, label: $_("admin.queues.status_all") },
+    { value: "waiting", label: $_("admin.queues.status_waiting") },
+    { value: "active", label: $_("admin.queues.status_active") },
+    { value: "completed", label: $_("admin.queues.status_completed") },
+    { value: "failed", label: $_("admin.queues.status_failed") },
+    { value: "delayed", label: $_("admin.queues.status_delayed") },
+  ];
+
+  function navigate(overrides: Record<string, string | null>) {
+    const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+    for (const [k, v] of Object.entries(overrides)) {
+      if (v === null) params.delete(k);
+      else params.set(k, v);
+    }
+    goto(`?${params.toString()}`);
+  }
+
+  function selectQueue(name: string) {
+    navigate({ queue: name, status: null, offset: null });
+  }
+
+  function selectStatus(status: string | null) {
+    navigate({ status, offset: null });
+  }
+
+  async function retryJob(job: Job) {
+    try {
+      await adminRetryJob(job.queue, job.id);
+      toast.success($_("admin.queues.retry_success"));
+      await invalidateAll();
+    } catch {
+      toast.error($_("admin.queues.retry_error"));
+    }
+  }
+
+  async function removeJob(job: Job) {
+    try {
+      await adminRemoveJob(job.queue, job.id);
+      toast.success($_("admin.queues.remove_success"));
+      await invalidateAll();
+    } catch {
+      toast.error($_("admin.queues.remove_error"));
+    }
+  }
+
+  async function toggleQueue(queueName: string, isPaused: boolean) {
+    togglingQueue = queueName;
+    try {
+      if (isPaused) {
+        await adminResumeQueue(queueName);
+        toast.success($_("admin.queues.resume_success"));
+      } else {
+        await adminPauseQueue(queueName);
+        toast.success($_("admin.queues.pause_success"));
+      }
+      await invalidateAll();
+    } catch {
+      toast.error(isPaused ? $_("admin.queues.resume_error") : $_("admin.queues.pause_error"));
+    } finally {
+      togglingQueue = null;
+    }
+  }
+
+  function statusColor(status: string): string {
+    switch (status) {
+      case "active":
+        return "text-blue-500 border-blue-500/30 bg-blue-500/10";
+      case "completed":
+        return "text-green-500 border-green-500/30 bg-green-500/10";
+      case "failed":
+        return "text-destructive border-destructive/30 bg-destructive/10";
+      case "delayed":
+        return "text-yellow-500 border-yellow-500/30 bg-yellow-500/10";
+      default:
+        return "text-muted-foreground border-border/40 bg-muted/20";
+    }
+  }
+
+  function formatDate(iso: string | null): string {
+    if (!iso) return "—";
+    return new Date(iso).toLocaleString();
+  }
+</script>
+
+<Meta title={$_("admin.queues.title")} description={null} />
+
+<div class="py-3 sm:py-6 lg:pl-6">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold">{$_("admin.queues.title")}</h1>
+    {#if data.queue && data.total > 0}
+      <span class="text-sm text-muted-foreground">
+        {$_("admin.users.total", { values: { total: data.total } })}
+      </span>
+    {/if}
+  </div>
+
+  <!-- Queue cards -->
+  <div class="flex flex-wrap gap-3 mb-6">
+    {#each data.queues as queue (queue.name)}
+      {@const isSelected = data.queue === queue.name}
+      <div
+        role="button"
+        tabindex="0"
+        class={`flex-1 min-w-48 rounded-lg border p-4 text-left transition-colors cursor-pointer ${
+          isSelected
+            ? "border-primary/50 bg-primary/5"
+            : "border-border/40 bg-card hover:border-border/70"
+        }`}
+        onclick={() => selectQueue(queue.name)}
+        onkeydown={(e) => e.key === "Enter" && selectQueue(queue.name)}
+        aria-pressed={isSelected}
+      >
+        <div class="flex items-center justify-between mb-3">
+          <span class="font-semibold capitalize">{queue.name}</span>
+          <div class="flex items-center gap-1.5">
+            {#if queue.isPaused}
+              <Badge variant="outline" class="text-yellow-600 border-yellow-500/40 bg-yellow-500/10"
+                >{$_("admin.queues.paused_badge")}</Badge
+              >
+            {/if}
+            <Button
+              size="sm"
+              variant="ghost"
+              class="h-6 px-2 text-xs"
+              disabled={togglingQueue === queue.name}
+              onclick={(e) => {
+                e.stopPropagation();
+                toggleQueue(queue.name, queue.isPaused);
+              }}
+            >
+              {queue.isPaused ? $_("admin.queues.resume") : $_("admin.queues.pause")}
+            </Button>
+          </div>
+        </div>
+        <div class="flex flex-wrap gap-2 text-xs">
+          {#if queue.counts.waiting > 0}
+            <span class="text-muted-foreground">{queue.counts.waiting} waiting</span>
+          {/if}
+          {#if queue.counts.active > 0}
+            <span class="text-blue-500">{queue.counts.active} active</span>
+          {/if}
+          {#if queue.counts.completed > 0}
+            <span class="text-green-500">{queue.counts.completed} completed</span>
+          {/if}
+          {#if queue.counts.failed > 0}
+            <span class="text-destructive font-medium">{queue.counts.failed} failed</span>
+          {/if}
+          {#if queue.counts.delayed > 0}
+            <span class="text-yellow-500">{queue.counts.delayed} delayed</span>
+          {/if}
+          {#if Object.values(queue.counts).every((v) => v === 0)}
+            <span class="text-muted-foreground">empty</span>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+
+  {#if data.queue}
+    <!-- Status filter tabs -->
+    <div class="flex gap-1 mb-4 flex-wrap">
+      {#each STATUS_FILTERS as f (f.value ?? "all")}
+        <Button
+          variant={data.status === f.value ? "default" : "outline"}
+          onclick={() => selectStatus(f.value)}
+        >
+          {f.label}
+        </Button>
+      {/each}
+    </div>
+
+    <!-- Jobs table -->
+    <div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead class="bg-muted/30">
+          <tr>
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+              >{$_("admin.queues.col_id")}</th
+            >
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+              >{$_("admin.queues.col_name")}</th
+            >
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+              >{$_("admin.queues.col_status")}</th
+            >
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">
+              {$_("admin.queues.col_attempts")}
+            </th>
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden lg:table-cell">
+              {$_("admin.queues.col_created")}
+            </th>
+            <th class="px-4 py-3 text-right font-medium text-muted-foreground"
+              >{$_("admin.queues.col_actions")}</th
+            >
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-border/30">
+          {#each data.jobs as job (job.id)}
+            <tr class="hover:bg-muted/10 transition-colors">
+              <td class="px-4 py-3 font-mono text-xs text-muted-foreground">{job.id}</td>
+              <td class="px-4 py-3">
+                <div>
+                  <p class="font-medium">{job.name}</p>
+                  {#if job.failedReason}
+                    <p class="text-xs text-destructive mt-0.5 max-w-xs truncate">
+                      {$_("admin.queues.failed_reason", { values: { reason: job.failedReason } })}
+                    </p>
+                  {/if}
+                </div>
+              </td>
+              <td class="px-4 py-3">
+                <Badge variant="outline" class={statusColor(job.status)}>{job.status}</Badge>
+              </td>
+              <td class="px-4 py-3 text-muted-foreground hidden md:table-cell"
+                >{job.attemptsMade}</td
+              >
+              <td class="px-4 py-3 text-muted-foreground hidden lg:table-cell text-xs"
+                >{formatDate(job.createdAt)}</td
+              >
+              <td class="px-4 py-3 text-right">
+                <div class="flex items-center justify-end gap-1">
+                  {#if job.status === "failed"}
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      aria-label={$_("admin.queues.retry")}
+                      onclick={() => retryJob(job)}
+                    >
+                      <span class="icon-[ri--restart-line] h-4 w-4"></span>
+                    </Button>
+                  {/if}
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    aria-label={$_("admin.queues.remove")}
+                    class="text-destructive hover:text-destructive hover:bg-destructive/10"
+                    onclick={() => removeJob(job)}
+                  >
+                    <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
+                  </Button>
+                </div>
+              </td>
+            </tr>
+          {/each}
+          {#if data.jobs.length === 0}
+            <tr>
+              <td colspan="6" class="px-4 py-8 text-center text-muted-foreground"
+                >{$_("admin.queues.no_jobs")}</td
+              >
+            </tr>
+          {/if}
+        </tbody>
+      </table>
+    </div>
+
+    {#if data.total > data.limit}
+      <div class="flex items-center justify-between mt-4 flex-wrap gap-3">
+        <span class="text-sm text-muted-foreground">
+          {$_("admin.users.showing", {
+            values: {
+              start: data.offset + 1,
+              end: Math.min(data.offset + data.limit, data.total),
+              total: data.total,
+            },
+          })}
+        </span>
+        <Pagination
+          currentPage={Math.floor(data.offset / data.limit) + 1}
+          totalPages={Math.ceil(data.total / data.limit)}
+          onPageChange={(p) => navigate({ offset: String((p - 1) * data.limit) })}
+        />
+      </div>
+    {/if}
+  {/if}
+</div>