diff --git a/.github/deploy/README.md b/.github/deploy/README.md
new file mode 100644
index 000000000..234643afe
--- /dev/null
+++ b/.github/deploy/README.md
@@ -0,0 +1,119 @@
+# digitaltwin
+
+Pascal Editor, compiled and ready to run on Hostinger's Node.js hosting. Built
+from [pascalorg/editor](https://github.com/pascalorg/editor) at commit
+`08e2279`, plus the MySQL scene store from
+[ovurrsl/editor](https://github.com/ovurrsl/editor).
+
+The application sits at the root of this repository — there is one
+`package.json` and one entry point, so the host cannot pick the wrong
+directory. It follows the stock sequence: `npm install` fetches the runtime
+packages, `npm run build` has nothing to compile and exits cleanly, and
+`server.js` starts the app. `PORT` and `HOSTNAME` are read from the
+environment.
+
+## hPanel settings
+
+Everything is the default except the output directory.
+
+| Field | Value |
+|---|---|
+| Repository | `ovurrsl/digitaltwin` |
+| Branch | `main` |
+| Framework preset | Other |
+| Root directory | `./` |
+| Node.js version | 22.x |
+| Package manager | npm |
+| Build command | `npm run build` |
+| Output directory | `./` |
+| Entry file | `server.js` |
+
+## Environment variables
+
+| Name | Value |
+|---|---|
+| `DIGITALTWIN_MYSQL_HOST` | `localhost` |
+| `DIGITALTWIN_MYSQL_USER` | database user |
+| `DIGITALTWIN_MYSQL_PASSWORD` | database password |
+| `DIGITALTWIN_MYSQL_DATABASE` | database name |
+| `DIGITALTWIN_MYSQL_PORT` | `3306` (optional) |
+
+or, as a single value:
+
+| Name | Value |
+|---|---|
+| `DIGITALTWIN_MYSQL_URL` | `mysql://user:password@localhost:3306/database` |
+
+In `DIGITALTWIN_MYSQL_URL`, percent-encode any of `@ : / ? # [ ] %` that appear
+in the password — `@` becomes `%40`, `#` becomes `%23`. The separate fields
+need no encoding, which is why they are listed first.
+
+Optional:
+
+| Name | Value |
+|---|---|
+| `DIGITALTWIN_ADMIN_EMAIL` | the address that gets the admin role on sign-up |
+
+**MySQL is required.** Without a database configured the server refuses to
+start — check the runtime log for the reason. Tables are created on first
+connection. `/api/health` reports the selected backend
+(`"backend":"mysql"`) and whether the database answers (`"db":"ok"`), so one
+curl verifies a deploy. Setting `DIGITALTWIN_ALLOW_SQLITE=1` overrides the
+requirement, writing scenes to a local file the host discards on every
+release — never set it here.
+
+Every variable is also read under its older `PASCAL_` name, so an existing
+deployment keeps working until it is renamed.
+
+## When the panel forgets its variables
+
+Some panels drop their environment variables on redeploy, which takes the
+database down with them. The same settings can come from a file instead. A real
+environment variable always wins, so the panel stays in charge wherever it is
+configured.
+
+Two locations are read, in this order:
+
+| Path | Survives a redeploy? |
+|---|---|
+| `.env` next to `server.js` | only until the next release replaces this tree |
+| `~/.digitaltwin.env` | yes — it sits outside the deployed directory |
+
+Prefer the second. Create it once with the host's file manager:
+
+    DIGITALTWIN_MYSQL_HOST=127.0.0.1
+    DIGITALTWIN_MYSQL_PORT=3306
+    DIGITALTWIN_MYSQL_USER=your_user
+    DIGITALTWIN_MYSQL_PASSWORD=your_password
+    DIGITALTWIN_MYSQL_DATABASE=your_database
+
+`KEY=value` per line; `#` starts a comment; surrounding quotes are stripped.
+Values are never expanded, so a `$` in a password is a literal `$`.
+
+The boot log names the files it read and how many settings each supplied — the
+values are credentials and are never logged. `DIGITALTWIN_ENV_FILE` points at a
+different path when neither default suits.
+
+A `.env` committed here is carried across by the publish workflow, which
+otherwise replaces this tree wholesale. It is still a credential in git
+history — the home-directory file avoids that.
+
+## Layout
+
+    server.js         entry point, generated by the standalone build
+    package.json      runtime dependencies and the build/start scripts
+    .next/            the compiled application
+    public/           static assets: models, textures, icons, sounds
+
+## Regenerating
+
+Build the source with `output: 'standalone'` in `apps/editor/next.config.ts`.
+From the resulting `apps/editor/.next/standalone` tree, lift `apps/editor/.next`,
+`apps/editor/public` and `apps/editor/server.js` to the top level and drop the
+rest — the vendored `node_modules` is replaced by the dependency list in
+`package.json`, and the app's original manifest cannot be reused because it
+names workspace packages that are not published to npm. Two things the
+standalone build leaves out: copy `apps/editor/public` and
+`apps/editor/.next/static` into the tree before lifting, and add `mysql2` to
+the dependency list by hand — the store imports it dynamically, so file
+tracing does not see it.
diff --git a/.github/deploy/package.json b/.github/deploy/package.json
new file mode 100644
index 000000000..35a87e096
--- /dev/null
+++ b/.github/deploy/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "digitaltwin",
+  "version": "2.15.0",
+  "private": true,
+  "type": "module",
+  "description": "DigitalTwin, compiled and ready to run. Nothing is built at deploy time.",
+  "engines": {
+    "node": ">=20.9"
+  },
+  "scripts": {
+    "build": "node setup-native.mjs",
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "@node-rs/argon2": "2.0.2",
+    "@opentelemetry/api": "1.9.1",
+    "mysql2": "3.23.2",
+    "next": "16.2.9",
+    "nodemailer": "9.0.3",
+    "otpauth": "9.5.1",
+    "qrcode": "1.5.4",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "sharp": "0.34.5",
+    "ulid": "3.0.2"
+  }
+}
\ No newline at end of file
diff --git a/.github/deploy/setup-native.mjs b/.github/deploy/setup-native.mjs
new file mode 100644
index 000000000..ec9d7e85b
--- /dev/null
+++ b/.github/deploy/setup-native.mjs
@@ -0,0 +1,22 @@
+// Turbopack requires an externalized native package under a build-specific
+// hashed alias (e.g. "@node-rs/argon2-4d195bca84303183") but emits no package
+// by that name. Recreate the alias as a symlink to the real install. Runs as
+// the bundle's "build" step, i.e. right after npm install on the host.
+import { readdirSync, readFileSync, mkdirSync, symlinkSync, existsSync, rmSync } from 'node:fs'
+import { join } from 'node:path'
+
+const chunks = join('.next', 'server', 'chunks')
+const found = new Set()
+for (const f of readdirSync(chunks)) {
+  if (!f.endsWith('.js')) continue
+  const m = readFileSync(join(chunks, f), 'utf8').matchAll(/@node-rs\/argon2-[a-f0-9]{16}/g)
+  for (const hit of m) found.add(hit[0])
+}
+for (const alias of found) {
+  const target = join('node_modules', alias)
+  if (existsSync(target)) rmSync(target, { recursive: true })
+  mkdirSync(join('node_modules', '@node-rs'), { recursive: true })
+  symlinkSync('argon2', target)
+  console.log(`[setup-native] ${alias} -> @node-rs/argon2`)
+}
+if (found.size === 0) console.log('[setup-native] no hashed native aliases found')
diff --git a/.github/workflows/bump-plugin.yml b/.github/workflows/bump-plugin.yml
new file mode 100644
index 000000000..175d463fb
--- /dev/null
+++ b/.github/workflows/bump-plugin.yml
@@ -0,0 +1,104 @@
+name: Bump warehouse plugin
+
+# The warehouse plugin is a git dependency pinned to an exact sha, and it
+# compiles into the app — so a plugin release reaches the site only when this
+# repository moves the pin AND the bundle is rebuilt. Doing that by hand is
+# what left a set of freeze fixes sitting unreleased: the plugin's main had
+# moved on for weeks while the pin, and therefore production, had not.
+#
+# Needs no secret. The plugin repository is public, so reading its head and
+# resolving the dependency both work with nothing configured.
+on:
+  workflow_dispatch:
+  # ovurrsl/plugin-warehouse can fire this on a push to main; the schedule is
+  # what keeps the pin current until it does.
+  repository_dispatch:
+    types: [plugin-updated]
+  schedule:
+    - cron: '42 * * * *'
+
+concurrency:
+  group: bump-plugin
+  cancel-in-progress: true
+
+permissions:
+  contents: write
+  # To hand off to the deploy — see the last step.
+  actions: write
+
+env:
+  PLUGIN_REPO: https://github.com/ovurrsl/plugin-warehouse.git
+
+jobs:
+  bump:
+    runs-on: ubuntu-latest
+    steps:
+      # A scheduled run starts on the default branch, so the branch to update
+      # is named rather than inherited. Set the INTEGRATION_BRANCH repository
+      # variable to move it; the fallback is the branch it is today.
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ vars.INTEGRATION_BRANCH || 'integration' }}
+
+      - name: Compare the pin with the plugin's head
+        id: compare
+        run: |
+          head=$(git ls-remote "$PLUGIN_REPO" refs/heads/main | cut -f1)
+          pinned=$(grep -o 'plugin-warehouse\.git#[0-9a-f]\{40\}' apps/editor/package.json | cut -d'#' -f2)
+          echo "head=$head"     >> "$GITHUB_OUTPUT"
+          echo "pinned=$pinned" >> "$GITHUB_OUTPUT"
+          if [ -z "$head" ] || [ -z "$pinned" ]; then
+            echo "could not read one of them (head='$head' pinned='$pinned')" >&2
+            exit 1
+          fi
+          if [ "$head" = "$pinned" ]; then
+            echo 'the pin is current'
+            echo 'changed=false' >> "$GITHUB_OUTPUT"
+          else
+            echo "pin $pinned -> $head"
+            echo 'changed=true' >> "$GITHUB_OUTPUT"
+          fi
+
+      - uses: oven-sh/setup-bun@v2
+        if: steps.compare.outputs.changed == 'true'
+        with:
+          bun-version: 1.3.0
+
+      # The lockfile records the sha512 of the resolved tarball, so it is
+      # regenerated by a real install rather than edited — the same reason
+      # `relock.yml` exists.
+      - name: Move the pin and relock
+        if: steps.compare.outputs.changed == 'true'
+        run: |
+          sed -i "s|plugin-warehouse\.git#${{ steps.compare.outputs.pinned }}|plugin-warehouse.git#${{ steps.compare.outputs.head }}|" \
+            apps/editor/package.json
+          bun install
+
+      # The gate. A plugin release that does not compile against this editor
+      # must not reach the branch the bundle is built from — which is exactly
+      # the failure a version range would hide and an exact pin makes visible.
+      - name: Type check
+        if: steps.compare.outputs.changed == 'true'
+        run: bun run check-types
+
+      - name: Commit to the integration branch
+        if: steps.compare.outputs.changed == 'true'
+        run: |
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+          git add apps/editor/package.json bun.lock
+          git commit -m "$(printf 'chore: pin plugin-warehouse %s\n\nWas %s.' \
+            "$(echo '${{ steps.compare.outputs.head }}' | cut -c1-7)" \
+            "$(echo '${{ steps.compare.outputs.pinned }}' | cut -c1-7)")"
+          git push
+
+      # Handed off explicitly: a push made with GITHUB_TOKEN starts no workflow
+      # runs, so without this the pin moves and the site never rebuilds.
+      - name: Build and publish
+        if: steps.compare.outputs.changed == 'true'
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          gh workflow run deploy-bundle.yml \
+            --repo "$GITHUB_REPOSITORY" \
+            --ref "${{ vars.INTEGRATION_BRANCH || 'integration' }}"
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index fdacf1586..2574fdc2e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches: [integration]
   pull_request:
-    branches: [main]
+    branches: [integration]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -18,6 +18,7 @@ jobs:
 
       - uses: oven-sh/setup-bun@v2
 
+
       - name: Install dependencies
         run: bun install --frozen-lockfile
 
diff --git a/.github/workflows/deploy-bundle.yml b/.github/workflows/deploy-bundle.yml
new file mode 100644
index 000000000..1b93d4912
--- /dev/null
+++ b/.github/workflows/deploy-bundle.yml
@@ -0,0 +1,133 @@
+name: Deploy bundle
+
+# Plugins compile into the app, so a plugin release only reaches the site
+# through a rebuild. Run this after pinning a new plugin commit, or send a
+# repository_dispatch from the plugin repo to have it run itself.
+on:
+  workflow_dispatch:
+  push:
+    branches: [integration]
+    paths:
+      - 'apps/editor/**'
+      - 'packages/**'
+      - 'bun.lock'
+  repository_dispatch:
+    types: [plugin-updated]
+
+concurrency:
+  group: deploy-bundle
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    services:
+      mysql:
+        image: mysql:8
+        env:
+          MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
+          MYSQL_DATABASE: digitaltwin
+        ports:
+          - 3306:3306
+        options: >-
+          --health-cmd "mysqladmin ping -h 127.0.0.1"
+          --health-interval 5s
+          --health-timeout 5s
+          --health-retries 10
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.3.0
+
+
+      # The hoisted linker keeps the standalone output free of symlinks, which
+      # break once the host moves the deployed directory.
+      - name: Install
+        run: bun install --linker=hoisted
+
+      - name: Build
+        run: bunx turbo run build --filter=editor
+
+      # The standalone output omits both of these by design.
+      - name: Complete the standalone output
+        run: |
+          mkdir -p apps/editor/.next/standalone/apps/editor/public \
+                   apps/editor/.next/standalone/apps/editor/.next/static
+          cp -r apps/editor/public/. apps/editor/.next/standalone/apps/editor/public/
+          cp -r apps/editor/.next/static/. apps/editor/.next/standalone/apps/editor/.next/static/
+
+      # Lift the app to the top level: the host picks the directory holding
+      # package.json, and a nested second one sends it to the wrong place.
+      - name: Assemble the bundle
+        run: |
+          mkdir -p bundle
+          cp -a apps/editor/.next/standalone/apps/editor/.next bundle/.next
+          cp -a apps/editor/.next/standalone/apps/editor/public bundle/public
+          cp -a apps/editor/.next/standalone/apps/editor/server.js bundle/server.js
+          cp .github/deploy/package.json bundle/package.json
+          cp .github/deploy/README.md bundle/README.md
+          cp .github/deploy/setup-native.mjs bundle/setup-native.mjs
+          # The boot hook runs these against the live database; they are read
+          # from disk at runtime, so they must travel with the bundle.
+          cp -a apps/editor/panel/migrations bundle/panel-migrations
+          printf 'node_modules/\n' > bundle/.gitignore
+
+      # MySQL is required in production: with no database configured the
+      # server must refuse to boot rather than silently write to a local
+      # SQLite file the host wipes on release.
+      - name: Smoke test — boot without a database must fail
+        run: |
+          cd bundle
+          npm install --no-audit --no-fund
+          npm run build
+          set +e
+          timeout 20 node server.js
+          status=$?
+          set -e
+          if [ "$status" = "0" ] || [ "$status" = "124" ]; then
+            echo "server started (or kept running) without a database; expected a startup failure"
+            exit 1
+          fi
+          echo "refused to boot without a database (exit $status), as intended"
+
+      - name: Smoke test — serve against MySQL
+        env:
+          DIGITALTWIN_MYSQL_URL: mysql://root@127.0.0.1:3306/digitaltwin
+        run: |
+          cd bundle
+          node server.js &
+          for _ in $(seq 1 30); do
+            sleep 2
+            body=$(curl -s http://127.0.0.1:3000/api/health || true)
+            echo "$body" | grep -q '"status":"ok"' && break
+          done
+          echo "health: $body"
+          echo "$body" | grep -q '"backend":"mysql"' || { echo "expected backend=mysql"; exit 1; }
+          echo "$body" | grep -q '"db":"ok"' || { echo "expected db=ok"; exit 1; }
+          curl -sf -o /dev/null http://127.0.0.1:3000/ || { echo "home page failed"; exit 1; }
+
+      # The bundle is a fresh tree force-pushed over the deployment repository,
+      # which would drop a `.env` committed there to survive a panel that
+      # forgets its variables. Carry the published one across.
+      - name: Publish
+        env:
+          DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
+        run: |
+          cd bundle
+          rm -rf node_modules
+          remote="https://x-access-token:${DEPLOY_TOKEN}@github.com/ovurrsl/digitaltwin.git"
+          git init -q
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+          git remote add origin "$remote"
+          if git fetch -q --depth=1 origin main 2>/dev/null; then
+            if git cat-file -e FETCH_HEAD:.env 2>/dev/null; then
+              git show FETCH_HEAD:.env > .env
+              echo "carried the existing .env across (contents not logged)"
+            fi
+          fi
+          git add -A
+          git commit -q -m "Build from ${GITHUB_SHA::7}"
+          git push -q --force "$remote" HEAD:main
diff --git a/.github/workflows/mcp-ci.yml b/.github/workflows/mcp-ci.yml
index c11fed1e5..606ff9c73 100644
--- a/.github/workflows/mcp-ci.yml
+++ b/.github/workflows/mcp-ci.yml
@@ -2,7 +2,7 @@ name: mcp-ci
 
 on:
   push:
-    branches: [main]
+    branches: [integration]
     paths:
       - 'packages/mcp/**'
       - 'packages/core/**'
@@ -33,6 +33,7 @@ jobs:
         with:
           bun-version: 1.3.0
 
+
       - name: Install
         run: bun install --frozen-lockfile
 
diff --git a/.github/workflows/mirror-upstream.yml b/.github/workflows/mirror-upstream.yml
new file mode 100644
index 000000000..03a1e5537
--- /dev/null
+++ b/.github/workflows/mirror-upstream.yml
@@ -0,0 +1,93 @@
+name: Mirror upstream
+
+# `main` in this fork is a clean mirror of pascalorg/editor — no local commits,
+# ever. That is what makes taking upstream free: the mirror can only ever
+# fast-forward, so this job never has a decision to make and never conflicts.
+#
+# Everything this fork adds lives on the integration branch, which is also the
+# default branch. Upstream reaches it through the pull request opened below,
+# where the conflicts are — and where a human belongs. UPSTREAM.md carries the
+# rule per file.
+#
+# Deliberately NOT a force push. If `main` has diverged, someone committed to
+# the mirror and the job should fail loudly rather than erase it.
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 5 * * *'
+
+concurrency:
+  group: mirror-upstream
+  cancel-in-progress: true
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  mirror:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Fast-forward main to upstream
+        id: mirror
+        env:
+          BASE: ${{ vars.INTEGRATION_BRANCH || 'integration' }}
+        run: |
+          git remote add upstream https://github.com/pascalorg/editor.git
+          git fetch --quiet upstream main
+          git fetch --quiet origin \
+            "+refs/heads/main:refs/remotes/origin/main" \
+            "+refs/heads/$BASE:refs/remotes/origin/$BASE"
+
+          if [ "$(git rev-parse upstream/main)" = "$(git rev-parse origin/main)" ]; then
+            echo 'the mirror is current'
+          else
+            # Refuse rather than erase: a mirror that cannot fast-forward is a
+            # mirror somebody has committed to.
+            if ! git merge-base --is-ancestor origin/main upstream/main; then
+              echo "origin/main is not an ancestor of upstream/main — it has local commits." >&2
+              echo 'Move them to the integration branch; this job will not force over them.' >&2
+              exit 1
+            fi
+
+            git push origin upstream/main:refs/heads/main
+            echo "main fast-forwarded to $(git rev-parse --short upstream/main)"
+          fi
+
+          # The pull request is owed whenever the integration branch is behind
+          # the mirror — NOT only on the run that moved the mirror. `main` can
+          # also be advanced by hand, and gating on "did this job push?" drops
+          # those updates on the floor: 42 upstream commits once sat on `main`
+          # with no pull request pointing at them for exactly this reason.
+          behind=$(git rev-list --count "refs/remotes/origin/$BASE..upstream/main")
+          echo "$behind upstream commit(s) not yet in $BASE"
+          echo "behind=$behind" >> "$GITHUB_OUTPUT"
+          if [ "$behind" -gt 0 ]; then
+            echo 'owed=true' >> "$GITHUB_OUTPUT"
+          else
+            echo 'owed=false' >> "$GITHUB_OUTPUT"
+          fi
+
+      # One long-lived pull request rather than one per update: it accumulates
+      # whatever upstream has added since the last time somebody took it, and
+      # GitHub shows the conflicts against the integration branch as they arise.
+      - name: Open or update the pull request into the integration branch
+        if: steps.mirror.outputs.owed == 'true'
+        env:
+          GH_TOKEN: ${{ github.token }}
+          BASE: ${{ vars.INTEGRATION_BRANCH || 'integration' }}
+          BEHIND: ${{ steps.mirror.outputs.behind }}
+        run: |
+          body=$(printf '`main` mirrors `pascalorg/editor` and is **%s commit(s)** ahead of `%s`.\n\nThis carries those changes into the integration branch, where everything this fork adds lives. Conflicts are expected — the rule for each file that regularly conflicts is in `UPSTREAM.md`, and the `Upstream check` workflow reports the list before you start.\n\n---\n_Generated by [Claude Code](https://claude.ai/code)_\n' "$BEHIND" "$BASE")
+
+          state=$(gh pr view main --repo "$GITHUB_REPOSITORY" --json state -q .state 2>/dev/null || true)
+          if [ "$state" = 'OPEN' ]; then
+            gh pr edit main --repo "$GITHUB_REPOSITORY" --body "$body"
+          else
+            gh pr create --repo "$GITHUB_REPOSITORY" --head main --base "$BASE" \
+              --title 'Take upstream' --body "$body"
+          fi
diff --git a/.github/workflows/pull-panel.yml b/.github/workflows/pull-panel.yml
new file mode 100644
index 000000000..b01420bfa
--- /dev/null
+++ b/.github/workflows/pull-panel.yml
@@ -0,0 +1,125 @@
+name: Pull console
+
+# The console is developed in ovurrsl/panel and vendored here
+# (apps/editor/panel). This pulls it inward — the direction that matters now
+# that the console repository is its home.
+#
+# Gated on a type check, deliberately. Pushing straight to the integration
+# branch is what makes this automatic, and automatic without a gate means one
+# bad console commit quietly breaks the branch the deploy builds from. If the
+# check fails the job goes red and nothing is pushed, which is the signal.
+#
+# Needs PANEL_TOKEN — the same secret the outbound sync uses, but read-only is
+# enough here. Without it the job says so and stops, rather than failing with a
+# confusing git error.
+on:
+  workflow_dispatch:
+  # ovurrsl/panel can fire this when it changes; until it does, the schedule
+  # below is what keeps the copy current.
+  repository_dispatch:
+    types: [panel-updated]
+  schedule:
+    - cron: '17 * * * *'
+
+concurrency:
+  group: pull-console
+  cancel-in-progress: true
+
+permissions:
+  contents: write
+  # To hand off to the deploy. A push made with GITHUB_TOKEN starts no runs, so
+  # without this the console would land on the branch and stop there.
+  actions: write
+
+jobs:
+  pull:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for the console token
+        id: token
+        env:
+          PANEL_TOKEN: ${{ secrets.PANEL_TOKEN }}
+        run: |
+          if [ -z "$PANEL_TOKEN" ]; then
+            echo 'PANEL_TOKEN is not set — add a token with read access to'
+            echo 'ovurrsl/panel under Settings > Secrets > Actions to enable this.'
+            echo 'available=false' >> "$GITHUB_OUTPUT"
+          else
+            echo 'available=true' >> "$GITHUB_OUTPUT"
+          fi
+
+      # A scheduled run starts on the default branch, so the branch to update is
+      # named rather than inherited. Set the INTEGRATION_BRANCH repository
+      # variable to move it; the fallback is the branch it is today.
+      - name: Check out the integration branch
+        if: steps.token.outputs.available == 'true'
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ vars.INTEGRATION_BRANCH || 'integration' }}
+
+      - name: Check out the console
+        if: steps.token.outputs.available == 'true'
+        uses: actions/checkout@v4
+        with:
+          repository: ovurrsl/panel
+          token: ${{ secrets.PANEL_TOKEN }}
+          path: panel-upstream
+
+      - name: Apply the pull
+        if: steps.token.outputs.available == 'true'
+        id: pull
+        run: |
+          # `tee` would otherwise report its own exit status and swallow a
+          # crashed sync — the default shell here is `bash -e`, not `-eo
+          # pipefail`.
+          set -o pipefail
+          node scripts/sync-panel.mjs --panel panel-upstream --pull | tee pull.log
+
+          # Scoped to exactly the paths the commit below stages. A bare
+          # `git status --porcelain` is never empty in this job: `pull.log` and
+          # the `panel-upstream/` checkout are both untracked and neither is
+          # ignored. Unscoped, `changed` is therefore always true, and every
+          # hourly run where the console did not move would reach `git commit`
+          # with nothing staged and go red.
+          if [ -z "$(git status --porcelain -- 'apps/editor/panel' 'apps/editor/app/(panel)' 'apps/editor/app/api')" ]; then
+            echo 'changed=false' >> "$GITHUB_OUTPUT"
+          else
+            echo 'changed=true' >> "$GITHUB_OUTPUT"
+          fi
+
+      - uses: oven-sh/setup-bun@v2
+        if: steps.token.outputs.available == 'true' && steps.pull.outputs.changed == 'true'
+
+      - name: Install dependencies
+        if: steps.token.outputs.available == 'true' && steps.pull.outputs.changed == 'true'
+        run: bun install --frozen-lockfile
+
+      # The gate. A console change that does not compile here must not reach the
+      # branch the bundle is built from.
+      - name: Type check
+        if: steps.token.outputs.available == 'true' && steps.pull.outputs.changed == 'true'
+        run: bun run check-types
+
+      - name: Commit to the integration branch
+        if: steps.token.outputs.available == 'true' && steps.pull.outputs.changed == 'true'
+        run: |
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+          # Only the vendored paths — the sync writes nowhere else, and naming
+          # them keeps an unrelated stray file out of the commit.
+          git add 'apps/editor/panel' 'apps/editor/app/(panel)' 'apps/editor/app/api'
+          git commit -m "$(printf 'chore(panel): pull the console\n\n%s' "$(cat pull.log)")"
+          git push
+
+      # Handed off explicitly, because the push above cannot do it: a push made
+      # with GITHUB_TOKEN starts no workflow runs. Without this the console
+      # lands on the branch and the site never rebuilds — the chain would look
+      # wired and quietly stop one step short.
+      - name: Build and publish
+        if: steps.token.outputs.available == 'true' && steps.pull.outputs.changed == 'true'
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          gh workflow run deploy-bundle.yml \
+            --repo "$GITHUB_REPOSITORY" \
+            --ref "${{ vars.INTEGRATION_BRANCH || 'integration' }}"
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 0bae53316..0330129f2 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -49,6 +49,7 @@ jobs:
           node-version: 22
           registry-url: "https://registry.npmjs.org"
 
+
       - name: Install dependencies
         run: bun install --frozen-lockfile
 
diff --git a/.github/workflows/relock.yml b/.github/workflows/relock.yml
new file mode 100644
index 000000000..5f89ced22
--- /dev/null
+++ b/.github/workflows/relock.yml
@@ -0,0 +1,52 @@
+name: Relock
+
+# Regenerates bun.lock on a real runner and pushes the result back to the
+# branch it was dispatched on. The lockfile records the sha512 of each GitHub
+# tarball, and only a machine that can reach the real api.github.com can
+# compute those — a sandboxed environment cannot, so it delegates to this.
+#
+# It used to fire on edits to ITSELF, because dispatch needs the file on the
+# default branch and the integration branch was not it. Now it is, so the hack
+# is gone and this is dispatched like anything else. The trailing marker
+# comments below are what remains of it — kept as a record of which relocks
+# were run that way, not as a mechanism.
+#
+# Routine plugin bumps no longer come here: `bump-plugin.yml` moves the pin and
+# relocks in one job. This is for the rest — a dependency added or changed by
+# hand, or a lockfile that drifted.
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  relock:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.3.0
+
+      - name: Regenerate the lockfile
+        run: bun install
+
+      - name: Push it back
+        run: |
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+          git add bun.lock
+          if git diff --cached --quiet; then
+            echo 'lockfile already in sync'
+            exit 0
+          fi
+          git commit -m 'chore: regenerate bun.lock on a real runner'
+          git push
+
+# relock: declare mysql2 where it is imported
+
+# relock: plugin-warehouse v0.1.1 (1c73ce2)
+
+# relock: plugin-warehouse v0.1.2 (49b2f16)
diff --git a/.github/workflows/sync-panel.yml b/.github/workflows/sync-panel.yml
new file mode 100644
index 000000000..887d25b8f
--- /dev/null
+++ b/.github/workflows/sync-panel.yml
@@ -0,0 +1,95 @@
+name: Sync console upstream
+
+# The console is vendored here (apps/editor/panel) and owned by ovurrsl/panel.
+# This pushes the copy back as a pull request rather than a direct commit: the
+# console has its own tests and its own history, and its owner should see what
+# the integration changed before taking it.
+#
+# MANUAL ONLY, and that is the point. The console repository is the home of the
+# console now, so the automatic direction is inward (`pull-panel.yml`). Leaving
+# this on `push` too would give one file two masters: a change made in the
+# console flows here, this fires on that commit and pushes it straight back,
+# and the two workflows spend the day answering each other. Whichever ran last
+# would look right.
+#
+# What it is still for: seeding the console after a change had to be made here
+# (an integration fix, a migration written while wiring it up). Run it by hand,
+# take the pull request, and the console is the source again.
+#
+# Needs PANEL_TOKEN — a token with write access to ovurrsl/panel. Without it the
+# job says so and stops, rather than failing with a confusing git error.
+on:
+  workflow_dispatch:
+
+concurrency:
+  group: sync-panel
+  cancel-in-progress: true
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Check for the upstream token
+        id: token
+        env:
+          PANEL_TOKEN: ${{ secrets.PANEL_TOKEN }}
+        run: |
+          if [ -z "$PANEL_TOKEN" ]; then
+            echo 'PANEL_TOKEN is not set — add a token with write access to'
+            echo 'ovurrsl/panel under Settings > Secrets > Actions to enable this.'
+            echo 'available=false' >> "$GITHUB_OUTPUT"
+          else
+            echo 'available=true' >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Check out the console
+        if: steps.token.outputs.available == 'true'
+        uses: actions/checkout@v4
+        with:
+          repository: ovurrsl/panel
+          token: ${{ secrets.PANEL_TOKEN }}
+          path: panel-upstream
+
+      - name: Apply the sync
+        if: steps.token.outputs.available == 'true'
+        id: sync
+        run: |
+          node scripts/sync-panel.mjs --panel panel-upstream | tee sync.log
+          cd panel-upstream
+          if git diff --quiet && [ -z "$(git status --porcelain)" ]; then
+            echo 'changed=false' >> "$GITHUB_OUTPUT"
+          else
+            echo 'changed=true' >> "$GITHUB_OUTPUT"
+          fi
+
+      # A fixed branch name means repeated syncs update one pull request instead
+      # of opening a new one for every push.
+      - name: Open or update the pull request
+        if: steps.token.outputs.available == 'true' && steps.sync.outputs.changed == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.PANEL_TOKEN }}
+        run: |
+          cd panel-upstream
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+          git checkout -B sync/from-editor
+          git add -A
+          git commit -m "sync: changes from the editor integration (${GITHUB_SHA::7})"
+          git push -f origin sync/from-editor
+
+          body=$(printf 'Changes made to the console while it is vendored in `ovurrsl/editor` (`apps/editor/panel`), pushed back by its sync workflow.\n\nSource commit: `%s`\n\n```\n%s\n```\n\nImports are rewritten from `@panel/` back to `@/`; files are otherwise verbatim, so this carries the editor repository formatting.\n\n---\n_Generated by [Claude Code](https://claude.ai/code)_\n' "$GITHUB_SHA" "$(cat ../sync.log)")
+
+          # Ask for the STATE, not merely whether a pull request exists. Branch
+          # names resolve to closed and merged pull requests too, so the plain
+          # existence check edited the body of an already-merged one and never
+          # opened a new one — while the force-push above had already landed.
+          # Silent, and it starts the moment the first sync is taken.
+          state=$(gh pr view sync/from-editor --repo ovurrsl/panel --json state -q .state 2>/dev/null || true)
+          if [ "$state" = 'OPEN' ]; then
+            gh pr edit sync/from-editor --repo ovurrsl/panel --body "$body"
+          else
+            gh pr create --repo ovurrsl/panel --head sync/from-editor --base main \
+              --title 'Sync from the editor integration' --body "$body" --draft
+          fi
diff --git a/.github/workflows/upstream-check.yml b/.github/workflows/upstream-check.yml
new file mode 100644
index 000000000..1873506b9
--- /dev/null
+++ b/.github/workflows/upstream-check.yml
@@ -0,0 +1,41 @@
+name: Upstream check
+
+# Trial-merges pascalorg/editor into this branch and reports what would
+# conflict, so an upstream pull is never a surprise. Read-only: the merge is
+# aborted and nothing is pushed. Conflict rules per file live in UPSTREAM.md.
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 6 * * 1'
+
+permissions:
+  contents: read
+
+jobs:
+  trial-merge:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Attempt the merge
+        run: |
+          git config user.name 'trial-merge'
+          git config user.email 'trial-merge@localhost'
+          git remote add upstream https://github.com/pascalorg/editor.git
+          git fetch --quiet upstream main
+
+          echo '## Upstream trial merge' >> "$GITHUB_STEP_SUMMARY"
+          behind=$(git rev-list --count HEAD..upstream/main)
+          echo "Commits upstream is ahead by: **$behind**" >> "$GITHUB_STEP_SUMMARY"
+
+          if git merge --no-commit --no-ff upstream/main >/dev/null 2>&1; then
+            echo 'Merges **cleanly** — no conflicts.' >> "$GITHUB_STEP_SUMMARY"
+          else
+            echo 'Conflicting files (see UPSTREAM.md for the rule per file):' >> "$GITHUB_STEP_SUMMARY"
+            echo '```' >> "$GITHUB_STEP_SUMMARY"
+            git diff --name-only --diff-filter=U >> "$GITHUB_STEP_SUMMARY"
+            echo '```' >> "$GITHUB_STEP_SUMMARY"
+          fi
+          git merge --abort 2>/dev/null || true
diff --git a/AGENTS.md b/AGENTS.md
index 9ddb52fb3..a2eee95e5 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,3 +1,39 @@
+<!-- FORK BLOCK — ovurrsl/editor only. Upstream has no equivalent, so it
+     conflicts on every merge. Keep this block, take upstream's body below it.
+     The rule is recorded in UPSTREAM.md. -->
+
+> ## ⚠️ You are in `ovurrsl/editor`, a fork. Read this before anything else.
+>
+> Everything below this block is upstream's own instructions, written for
+> `pascalorg/editor`. They are accurate about the code and silent about this
+> fork. These four facts are the ones that cause damage when unknown:
+>
+> 1. **The default branch is `integration`, and that is where you work.** It
+>    carries ~130 commits upstream does not have, and the production bundle is
+>    built from it.
+> 2. **Never commit to `main`.** It is a byte-for-byte mirror of
+>    `pascalorg/editor`, and being a pure mirror is the only reason taking
+>    upstream never conflicts. `mirror-upstream` refuses to force over local
+>    commits, so a commit here does not get erased — it jams the mirror until
+>    somebody moves it by hand.
+> 3. **Three things flow in here automatically** and you should not do their
+>    work by hand: the warehouse plugin pin (`bump-plugin`, hourly), the console
+>    from `ovurrsl/panel` (`pull-panel`, hourly), and upstream itself
+>    (`mirror-upstream`, daily, which opens a pull request rather than merging).
+> 4. **`apps/editor/panel/**` is vendored, not authored here.** Its home is
+>    `ovurrsl/panel`. Editing it here is overwritten by the next hourly pull —
+>    change it there instead.
+>
+> **`OTOMASYON.md`** is the whole picture in plain language: what runs when,
+> which secret each workflow needs, and where to look when a link goes quiet.
+> **`UPSTREAM.md`** is the per-file rule for merging upstream.
+>
+> One more, because it is invisible until it bites: **a push made with
+> `GITHUB_TOKEN` starts no workflow runs.** Any workflow that pushes and expects
+> a build must dispatch it explicitly.
+
+<!-- END FORK BLOCK -->
+
 # Agent Instructions — `pascalorg/editor`
 
 Public, open-source home of `@pascal-app/{core,viewer,editor,mcp}` and the standalone editor app. Consumed both as npm packages and (in `pascalorg/private-editor`) as a git submodule.
diff --git a/OTOMASYON.md b/OTOMASYON.md
new file mode 100644
index 000000000..390ecab96
--- /dev/null
+++ b/OTOMASYON.md
@@ -0,0 +1,156 @@
+# Otomasyon — sistem nasıl çalışıyor
+
+Bu belge, beş deponun birbirine nasıl bağlandığını anlatır. Kod bilgisi
+gerektirmez. Teknik ayrıntı ve birleştirme kuralları için: `UPSTREAM.md`.
+
+Buradaki her bilgi, iş akışı dosyalarının kendisinden okunarak ve ikinci bir
+kontrol turuyla doğrulanarak yazıldı. Bir iş akışını değiştirirsen bu belgeyi de
+güncelle — yanlış belge, hiç belge olmamasından kötüdür.
+
+---
+
+## Büyük resim
+
+```
+   pascalorg/editor            Pascal'ın orijinal projesi (bizim değil)
+            │
+            │  ① her gün 08:00 — otomatik
+            ▼
+   ovurrsl/editor → main       Pascal'ın saf aynası. Bizim tek commitimiz bile yok.
+            │
+            │  ② öneri (pull request) açılır — BİRLEŞTİRME KARARI İNSANDA
+            ▼
+   ovurrsl/editor → integration  ◄── ovurrsl/panel            (③ saat başı, otomatik)
+   varsayılan dal; her şey burada ◄── ovurrsl/plugin-warehouse (④ saat başı, otomatik)
+            │
+            │  ⑤ derle → 2 duman testi → geçerse — otomatik
+            ▼
+   ovurrsl/Digitaltwin         Sadece derlenmiş çıktı. Buraya kaynak kod girmez.
+            │
+            ▼
+        canlı sunucu
+```
+
+**② dışındaki her ok otomatik.** ② bilerek insanda — sebebi aşağıda.
+
+---
+
+## Neden iki dal var
+
+| Dal | Ne işe yarar |
+|---|---|
+| `main` | Pascal'ın **birebir aynası**. Buraya bizim hiçbir değişikliğimiz yazılmaz. Tam da bu yüzden hiç çakışmaz: ayna sadece ileri sarabilir. |
+| `integration` | **Varsayılan dal.** Bizim eklediğimiz her şey burada, ve canlıya giden derleme bundan yapılır. |
+
+GitHub zamanlanmış işleri **yalnızca varsayılan daldan** çalıştırır. `integration`'ın
+varsayılan dal olmasının sebebi budur — başka bir dala taşınırsa saat başı çalışan
+işlerin hepsi sessizce durur.
+
+Dal adını değiştirmek istersen: depo ayarlarından `INTEGRATION_BRANCH` değişkenini
+kur. Bütün iş akışları önce onu okur, yoksa `integration`'a düşer.
+
+---
+
+## Beş depo
+
+| Depo | Ne var içinde | Sen ne yaparsın |
+|---|---|---|
+| `pascalorg/editor` | Pascal'ın orijinal projesi | Hiçbir şey — bizim değil |
+| `ovurrsl/editor` | Fork'umuz. `main` = ayna, `integration` = bizim sürümümüz | Editörün kendisine dokunacaksan `integration`'a commit'lersin |
+| `ovurrsl/panel` | Giriş/yönetim panelinin **asıl evi** | Panel değişikliklerini burada yaparsın |
+| `ovurrsl/plugin-warehouse` | Depo/raf eklentisi (`warehouse:` düğümleri) | Raf değişikliklerini burada yaparsın |
+| `ovurrsl/Digitaltwin` | **Sadece derlenmiş çıktı** | Hiçbir şey. Elle dokunma — her yayında üzerine yazılır |
+
+---
+
+## İş akışları — hangisi ne zaman çalışır
+
+Saatler **UTC**. Türkiye UTC+3, yani parantez içindeki yerel saat.
+
+### Otomatik olanlar
+
+| İş akışı | Ne zaman | Ne yapar |
+|---|---|---|
+| **`bump-plugin`** | Her saat `:42` | Eklentinin `main`'i ile bizdeki sürüm numarasını karşılaştırır. Farklıysa günceller, kilit dosyasını tazeler, tip kontrolünden geçirir, `integration`'a yazar ve derlemeyi başlatır. |
+| **`pull-panel`** | Her saat `:17` | `ovurrsl/panel`'i çeker, `apps/editor/panel` altına yerleştirir, tip kontrolünden geçirir, `integration`'a yazar ve derlemeyi başlatır. |
+| **`mirror-upstream`** | Her gün `05:00` (08:00) | `main`'i Pascal'ın son hâline ileri sarar. `integration` geride kaldıysa **öneri açar**. |
+| **`deploy-bundle`** | `integration`'a her yazımda | Derler, iki duman testi koşar, geçerse `Digitaltwin`'e yazar. |
+| **`upstream-check`** | Pazartesi `06:00` (09:00) | Deneme birleştirmesi yapar, hangi dosyaların çakışacağını rapor eder. Hiçbir şeye yazmaz. |
+| **`ci`** | `integration`'a her yazımda ve her öneride | Biome + tip kontrolü. |
+| **`mcp-ci`** | Belirli dosyalar değişince | MCP ve sahne API testleri. |
+
+### Elle çalıştırılanlar
+
+| İş akışı | Ne zaman kullanılır |
+|---|---|
+| **`sync-panel`** | Editördeki panel dosyalarını `ovurrsl/panel`'e **geri** göndermek için. Panel deposunu ilk kez doldurmak içindir; günlük iş bu değil, ters yön (`pull-panel`) otomatiktir. |
+| **`relock`** | Bir bağımlılık elle değiştirildiğinde `bun.lock`'u gerçek bir sunucuda yeniden üretmek için. |
+| **`release`** | Pascal'ın npm paket yayınlama akışı. Bizim işimiz değil, **çalıştırma.** |
+
+---
+
+## İki anahtar
+
+Bunlar `ovurrsl/editor` → Settings → Secrets and variables → Actions altında durur.
+
+| Anahtar | Kim kullanır | Ne için | Süresi dolarsa |
+|---|---|---|---|
+| `PANEL_TOKEN` | `pull-panel`, `sync-panel` | `ovurrsl/panel`'i okumak | Panel güncellemeleri durur. `pull-panel` **kırmızı olmaz**, sessizce hiçbir şey yapmaz. |
+| `DEPLOY_TOKEN` | `deploy-bundle` | `Digitaltwin`'e yazmak | Derleme geçer, **son adım kırmızı olur**, canlı eski sürümde kalır. |
+
+`bump-plugin`, `mirror-upstream` ve `upstream-check` **hiçbir anahtar kullanmaz** —
+eklenti deposu herkese açık, Pascal'ın deposu herkese açık.
+
+> Süresi dolan bir anahtarı yenilerken: GitHub anahtarın değerini yalnız
+> oluşturulduğu an bir kez gösterir. `Regenerate token` → çıkan `github_pat_…`
+> yazısını kopyala → yukarıdaki gizli anahtar kutusuna yapıştır. Anahtarın
+> ayarlar sayfasını düzeltmek yetmez; kutudaki **değerin** de yenilenmesi gerekir.
+
+---
+
+## Güvenlik kapısı
+
+Her otomatik yol aynı kapıdan geçer: **`deploy-bundle`.**
+
+1. `bun run build` — derleme
+2. **Duman testi 1:** veritabanı yokken sunucu açılmayı reddediyor mu?
+3. **Duman testi 2:** gerçek MySQL'e karşı sağlık kontrolü yanıt veriyor mu?
+4. Üçü de geçtiyse → `Digitaltwin`'e yazılır
+
+Biri geçmezse yayın durur ve **canlıdaki çalışan sürüm yerinde kalır.** Bozuk bir
+şeyin canlıya ulaşmamasının sebebi budur.
+
+Ayrıca `bump-plugin` ve `pull-panel` kendi içlerinde `bun run check-types`
+koşar — derlemeyi hiç başlatmadan önce. Derlenmeyen bir değişiklik `integration`
+dalına yazılmaz bile.
+
+---
+
+## Tek elle yapılan iş: Pascal güncellemesi
+
+`main` hiç çakışmaz, çünkü orada bizim hiçbir şeyimiz yok. Ama `integration`'da
+bizim 130'dan fazla commitimiz var ve Pascal aynı dosyalara dokunduğunda çakışma
+çıkar — beta.4 denemesinde 185 dosya sorunsuz birleşti, **12 dosya çakıştı.**
+
+İkisi kritik:
+
+- **`apps/editor/next.config.ts`** — bizim `output: 'standalone'` ayarımız.
+  Silinirse `deploy-bundle` hiç derleyemez.
+- **`apps/editor/package.json`** — eklenti sürüm pinimiz. Pascal'da böyle bir
+  bağımlılık yok; toptan "onlarınkini al" denirse **raflar sessizce kaybolur.**
+
+Bir makine bu kararı veremez. Dosya dosya kurallar `UPSTREAM.md` içinde.
+
+---
+
+## Bir şey ters giderse — nereye bakılır
+
+| Belirti | Muhtemel sebep | Bakılacak yer |
+|---|---|---|
+| Canlı güncellenmiyor, derleme yeşil | `DEPLOY_TOKEN` süresi dolmuş | `deploy-bundle` çalışmasının son adımı (`Publish`) |
+| Eklenti değişikliği canlıya gelmiyor | `bump-plugin` pini bulamıyor | O çalışmanın `Compare the pin` adımı |
+| Panel değişikliği gelmiyor | `PANEL_TOKEN` yok veya süresi dolmuş | `pull-panel` çalışmasının ilk adımı — "PANEL_TOKEN is not set" yazar |
+| Hiçbir zamanlanmış iş çalışmıyor | Varsayılan dal değişmiş | Settings → Branches → default branch `integration` mı? |
+| Pascal güncellemesi görünmüyor | Öneri açılmamış | Actions → `Mirror upstream` → elle çalıştır |
+
+Bütün çalışmalar burada: **https://github.com/ovurrsl/editor/actions**
diff --git a/UPSTREAM.md b/UPSTREAM.md
new file mode 100644
index 000000000..3d80dc29d
--- /dev/null
+++ b/UPSTREAM.md
@@ -0,0 +1,74 @@
+# Repository topology and upstream merges
+
+Plain-language version of the same picture, for whoever operates this rather
+than edits it: `OTOMASYON.md`.
+
+## Two branches, and why
+
+| Branch | What it is |
+|---|---|
+| `main` | A pure mirror of `pascalorg/editor`. No commit of ours ever lands here, which is what makes taking upstream free — the mirror can only fast-forward, so it never conflicts. |
+| `integration` | **The default branch.** Everything this fork adds lives here, and it is what the deploy builds from. Every workflow that pushes, pushes here. |
+
+Scheduled workflows run only from the default branch, which is why
+`integration` is it. Point `vars.INTEGRATION_BRANCH` at another name to move
+it; every workflow reads that variable and falls back to `integration`.
+
+## Which change goes to which repository
+
+| What changed | Repository | How it gets there |
+|---|---|---|
+| Editor (this codebase) | `ovurrsl/editor` — fork of `pascalorg/editor` | Commit on `integration` |
+| Console / panel | `ovurrsl/panel` — the console's home | Automatic inbound: `pull-panel` vendors it into `apps/editor/panel` hourly, type-checks, pushes to `integration`, then dispatches the deploy. The outbound `sync-panel` is manual now — for seeding the console repository from here, not for routine work. |
+| Warehouse plugin | `ovurrsl/plugin-warehouse` | Automatic: `bump-plugin` compares the pin in `apps/editor/package.json` against the plugin's `main` hourly, moves it, relocks, type-checks, pushes, and dispatches the deploy. Nothing to do by hand. |
+| Upstream editor | `pascalorg/editor` | `mirror-upstream` fast-forwards `main` daily and opens one long-lived pull request into `integration`. **Merging it is the one manual step in the whole chain** — see below. |
+| What the server runs | `ovurrsl/Digitaltwin` | Build artifacts only — published by the deploy workflow (or a manual publish). Never commit source here; the host redeploys from it. Step-by-step: `YAYINLAMA.md` |
+
+Every automatic path above ends at `deploy-bundle`, which refuses to publish
+unless the build succeeds and both boot smoke tests pass. That is the reason
+none of them needs a human in the middle.
+
+## Pulling updates from pascalorg/editor
+
+`mirror-upstream` keeps `main` on upstream's tip and opens a pull request from
+`main` into `integration` whenever `integration` is behind it — not only on the
+run that moved the mirror, because `main` can also be advanced by hand and
+gating on "did this job push?" loses those updates silently.
+
+The `upstream-check` workflow (weekly, or run it manually from the Actions tab)
+does a trial merge and reports which files would conflict — read its summary
+before merging for real.
+
+Resolving the pull request locally:
+
+```
+git remote add upstream https://github.com/pascalorg/editor.git   # once
+git fetch upstream
+git checkout integration
+git merge upstream/main
+```
+
+Most of this repository's additions live in files upstream does not have, so
+they merge silently: `apps/editor/panel/`, `apps/editor/lib/auth/`,
+`apps/editor/app/(panel)/`, the deploy/relock/sync workflows, the deploy
+scaffold under `.github/deploy/`.
+
+## Upstream files that carry local changes — conflict rules
+
+| File | Rule when it conflicts |
+|---|---|
+| `AGENTS.md` (and its `CLAUDE.md` / `GEMINI.md` / copilot symlinks) | Keep our fork block at the top, take upstream's body below it. The block is delimited by `FORK BLOCK` / `END FORK BLOCK` comments and says which branch to work on — without it an agent reads instructions written for `pascalorg/editor` and commits to `main`. |
+| `apps/editor/app/page.tsx` | Keep ours. Upstream's root page is the editor composition; ours is the session router. Upstream's changes to the editor composition belong in `apps/editor/components/editor-app.tsx` — port them there by hand. |
+| `apps/editor/components/editor-app.tsx` | Ours only (upstream has no such file), but it is a moved copy of upstream's old `app/page.tsx` — apply upstream's `app/page.tsx` improvements here. |
+| `apps/editor/app/layout.tsx` | Merge both; keep the `export const dynamic = 'force-dynamic'` block (the host's CDN caches static HTML across deploys and serves dead assets without it). |
+| `apps/editor/lib/graph-schema.ts` | Keep ours: API validation must consult each plugin's own node schemas, not a static union. Port upstream's non-plugin changes around that. |
+| `apps/editor/app/api/scenes/**`, `lib/auth/guard.ts` | Merge both; keep the ownership/role checks (`authorizeSceneMutation`, `canEdit`). |
+| `apps/editor/components/scene-loader.tsx` | Merge both; keep the `readOnly` prop and the console-session `useSession` wiring. |
+| `apps/editor/app/scenes/`, `app/scene/[id]/` | Merge both; keep the console-session gating and the navigation that points Home at `/`. Scene administration lives in the console's 3D scenes tab, not in a standalone page. |
+| `apps/editor/next.config.ts` | Merge both; keep `serverExternalPackages: ['@node-rs/argon2']` and the standalone/output settings. |
+| `apps/editor/package.json`, `bun.lock`, `biome.jsonc` | Merge both, and keep the `@ovurrsl/plugin-warehouse` pin — upstream has no such dependency, so a wholesale "take theirs" silently removes the warehouse racks. After changing dependencies by hand, dispatch the Relock workflow from the Actions tab to regenerate `bun.lock` on a real runner. |
+| `apps/editor/lib/bootstrap.ts`, `apps/ifc-converter/next-env.d.ts`, root `package.json`, `packages/mcp/src/storage/sqlite-scene-store.ts`, `packages/viewer/src/components/viewer/index.tsx` | No rule written yet — these conflicted in the beta.4 trial merge. Decide, then record the rule here so the next merge is cheaper. |
+
+After any upstream merge: `bun run check && bun run check-types`, build, and
+let CI plus the deploy workflow's boot smoke tests confirm nothing broke
+before publishing to `ovurrsl/Digitaltwin`.
diff --git a/YAYINLAMA.md b/YAYINLAMA.md
new file mode 100644
index 000000000..74e1df7f0
--- /dev/null
+++ b/YAYINLAMA.md
@@ -0,0 +1,136 @@
+# Yayınlama — plugin güncellemesinden canlıya
+
+Bu belge `opex.help`'e sürüm çıkarmanın tam yolunu anlatır. Depo topolojisi
+`UPSTREAM.md`'de; burada anlatılan onun çalıştırma tarafı.
+
+## Zincir
+
+```
+opex.help  (Hostinger Node.js hosting)
+   ↑  hPanel ovurrsl/digitaltwin main dalını izler, push görünce yeniden dağıtır
+ovurrsl/digitaltwin        ← DERLENMİŞ bundle. Kaynak kod yok, deploy anında hiçbir şey derlenmez
+   ↑  deploy-bundle iş akışı force-push eder
+ovurrsl/editor             ← bu depo. Bundle burada üretilir
+   ↑  bun install çeker, SHA ile çivili
+ovurrsl/plugin-warehouse   ← eklenti
+```
+
+Anlaşılması gereken tek şey: **eklenti uygulamanın içine derleniyor.** Plugin
+deposuna commit atmak canlıda hiçbir şeyi değiştirmez. Değişikliğin siteye
+ulaşması için SHA yenilenir, bundle yeniden üretilir ve digitaltwin'e konur.
+
+## Tek seferlik ön koşullar
+
+Bunlar bir kez kurulur; sonraki yayınlarda dokunulmaz.
+
+| Ne | Nerede | Neden |
+|---|---|---|
+| `DEPLOY_TOKEN` sırrı | `ovurrsl/editor` → Settings → Secrets and variables → Actions | İş akışı digitaltwin'e push edebilsin diye |
+| `deploy-bundle.yml` varsayılan dalda | `main` | GitHub `workflow_dispatch`'i yalnız varsayılan daldaki iş akışları için açar. Dosya sadece feature dalındayken tetikleme 404 döner |
+
+`DEPLOY_TOKEN` bir fine-grained PAT'tir ve şu üç ayarın üçü de doğru olmalıdır:
+
+- **Resource owner:** `ovurrsl`
+- **Repository access:** Only select repositories → **`ovurrsl/digitaltwin`**
+  (`ovurrsl/editor` değil — token'ın yazacağı yer deploy deposudur)
+- **Repository permissions → Contents:** **Read and write**
+  (`Metadata: Read-only` kendiliğinden gelir)
+
+İzin sonradan düzenlenebilir ve token dizisi değişmez — yani izni düzeltmek
+için sırrı yeniden girmek gerekmez.
+
+## Eklentiyi güncelle
+
+1. Yeni SHA'yı al: `ovurrsl/plugin-warehouse` deposunun `main` ucundaki commit.
+2. `apps/editor/package.json` içinde satırı güncelle:
+
+   ```
+   "@ovurrsl/plugin-warehouse": "git+https://github.com/ovurrsl/plugin-warehouse.git#<YENİ_SHA>"
+   ```
+
+3. `bun.lock`'u tazele. **Sandbox'ta `bun install` çalışmaz** — lock her GitHub
+   tarball'ının sha512'sini saklar ve bunu ancak gerçek `api.github.com`'a
+   ulaşabilen bir makine hesaplayabilir. Bunun için `Relock` iş akışı var:
+   `.github/workflows/relock.yml` dosyasının sonundaki yorum satırını değiştirip
+   push edin; iş akışı lock'u üretip dalınıza geri iter.
+
+4. Bundle sürümünü yükselt: `.github/deploy/package.json` → `version`.
+   Bu dosya digitaltwin'in `package.json`'ı olarak kopyalanır; atlanırsa canlı
+   sürüm numarası olduğu yerde kalır ya da geriye düşer.
+
+5. Commit + push.
+
+## Yayınla
+
+`deploy-bundle` iş akışını çalıştır. Üç yolu var:
+
+- **Elle:** Actions sekmesi → *Deploy bundle* → *Run workflow* → dalı seç
+- **Kendiliğinden:** `main`'e `apps/editor/**`, `packages/**` veya `bun.lock`
+  değiştiren bir push
+- **Plugin deposundan:** `repository_dispatch` (tip: `plugin-updated`)
+
+İş akışı sırayla: `bun install --linker=hoisted` → build → standalone bundle
+montajı → iki smoke test → digitaltwin main'e force-push.
+
+Smoke testler kasten şunu ölçer:
+
+1. Veritabanı yokken sunucu **açılmamalı** (aksi hâlde host'un sildiği yerel bir
+   dosyaya sessizce yazmaya başlar)
+2. MySQL varken `/api/health` → `backend:mysql`, `db:ok` dönmeli ve ana sayfa
+   yanıt vermeli
+
+Push force'tur, yani digitaltwin'in ağacı tamamen değişir. Orada commit'li duran
+`.env` bilerek taşınır (iş akışının *Publish* adımı önce onu okur, sonra yazar) —
+panel değişkenleri unutsa bile sunucu ayağa kalksın diye.
+
+## Doğrula
+
+```bash
+# iş akışı
+curl -s https://api.github.com/repos/ovurrsl/editor/actions/runs/<RUN_ID> \
+  | grep -o '"conclusion":"[a-z]*"' | head -1
+
+# deploy deposuna commit düştü mü
+curl -s https://api.github.com/repos/ovurrsl/digitaltwin/commits?per_page=1
+
+# canlı
+curl -s https://opex.help/api/health
+```
+
+Beklenen: `"conclusion":"success"`, `Build from <sha7>` başlıklı yeni commit ve
+
+```json
+{"status":"ok","app":"digitaltwin","backend":"mysql","db":"ok","auth":"ok"}
+```
+
+Hostinger dağıtımı birkaç dakika sürer. Tarayıcıda sert yenileme yapın.
+
+## Sorun giderme
+
+| Log'da gördüğünüz | Anlamı | Çözüm |
+|---|---|---|
+| `dispatches: 404 Not Found` | İş akışı varsayılan dalda kayıtlı değil | `deploy-bundle.yml`'ı `main`'e koyun. Tetikleme yine feature dalına yapılabilir; dispatch iş akışının gövdesini ve kopyaladığı dosyaları çalıştırıldığı ref'ten alır |
+| `DEPLOY_TOKEN:` boş + `Invalid username or token` | Sır tanımsız | Sırrı ekleyin. GitHub 2021'den beri git yazma için parolayı kabul etmiyor; depo public olsa da token şart |
+| `DEPLOY_TOKEN: ***` + `Write access to repository not granted` (403) | Token depoyu görüyor ama yazamıyor | Token'ın `Contents` izni `Read and write` mi, seçili depo `digitaltwin` mi — ikisini de kontrol edin |
+| `failed to resolve … api.github.com/repos/pascalorg/… 403` | Sandbox'ın GitHub kapsamı dışında bir bağımlılık | Yerelde çözülemez; `Relock` iş akışını kullanın |
+
+## Dikkat
+
+- **Eklenti kind adı değişirse veri kaybı olur.** Kayıtlı sahneler düğüm tipini
+  metin olarak saklar ve registry'de alias desteği yok. Eklentide bir kind
+  yeniden adlandırıldıysa yayından önce veritabanına bakın:
+
+  ```sql
+  SELECT COUNT(*) FROM scenes WHERE graph_json LIKE '%<eski:kind>%';
+  ```
+
+  0 değilse önce `scripts/migrate-legacy-scene.mjs` içindeki dönüşüm
+  mekanizmasıyla sahneleri geçirin.
+
+- **`ovurrsl/digitaltwin` private kalmalı.** Kökünde `.env` commit'li: MySQL
+  parolası, SMTP parolası, oturum anahtarları. Public yapmak bunları açar ve
+  geri almak yetmez — git geçmişinde ve cache'lerde kalır, tek çözüm her sırrı
+  değiştirmek olur.
+
+- **Deploy deposuna elle commit atmayın.** Her yayın onu force-push'la baştan
+  yazar; oraya yazılan her şey ilk yayında kaybolur.
diff --git a/apps/editor/app/(panel)/console/[tab]/page.tsx b/apps/editor/app/(panel)/console/[tab]/page.tsx
new file mode 100644
index 000000000..7971434de
--- /dev/null
+++ b/apps/editor/app/(panel)/console/[tab]/page.tsx
@@ -0,0 +1,37 @@
+import { ConsoleShell } from '@panel/components/console/console-shell'
+import { TabContent } from '@panel/components/console/tab-content'
+import { getSession } from '@panel/lib/auth/session'
+import { isConsoleTab, tabPermission } from '@panel/lib/console-tabs'
+import { notFound, redirect } from 'next/navigation'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * Every console tab is its own address (`/console/users`), so back/forward work
+ * and a link opens where it says it does. An unknown tab is a 404 rather than a
+ * silent redirect to Overview — a typo in a shared link should say so.
+ */
+export default async function ConsoleTabPage({ params }: { params: Promise<{ tab: string }> }) {
+  const { tab } = await params
+  if (!isConsoleTab(tab)) notFound()
+
+  const session = await getSession()
+  if (!session) redirect('/signin')
+
+  // The console is administration, and administration is for administrators.
+  // Without this a view-only account reached Overview, Users and Sessions —
+  // every colleague's name, address and login history — because those tabs
+  // carry no permission of their own.
+  if (!session.user.permissions.includes('admin_access')) redirect('/')
+
+  // Permission is re-checked here, not just hidden in the rail: a hand-typed URL
+  // to a tab the role cannot see lands on Overview instead of rendering it.
+  const required = tabPermission(tab)
+  if (required && !session.user.permissions.includes(required)) redirect('/console/overview')
+
+  return (
+    <ConsoleShell user={session.user} tab={tab}>
+      <TabContent tab={tab} />
+    </ConsoleShell>
+  )
+}
diff --git a/apps/editor/app/(panel)/console/layout.tsx b/apps/editor/app/(panel)/console/layout.tsx
new file mode 100644
index 000000000..6501cad9b
--- /dev/null
+++ b/apps/editor/app/(panel)/console/layout.tsx
@@ -0,0 +1,22 @@
+import { getSession } from '@panel/lib/auth/session'
+import { redirect } from 'next/navigation'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * Route guard for everything under /console — the server-side counterpart of the
+ * old client-bootstrap. It runs before any console markup exists, so an
+ * unauthenticated visitor never sees a frame of the shell.
+ *
+ * Order matters: a half-open (MFA-owed) session is not signed in, and an account
+ * owing a password change cannot reach the console until it sets one.
+ */
+export default async function ConsoleLayout({ children }: { children: React.ReactNode }) {
+  const session = await getSession()
+
+  if (!session) redirect('/signin')
+  if (session.mfaPending) redirect('/mfa')
+  if (session.user.mustChangePassword) redirect('/welcome')
+
+  return <>{children}</>
+}
diff --git a/apps/editor/app/(panel)/console/page.tsx b/apps/editor/app/(panel)/console/page.tsx
new file mode 100644
index 000000000..1e4bf26a3
--- /dev/null
+++ b/apps/editor/app/(panel)/console/page.tsx
@@ -0,0 +1,6 @@
+import { redirect } from 'next/navigation'
+
+/** /console has no content of its own — Overview is the landing tab. */
+export default function ConsoleIndex() {
+  redirect('/console/overview')
+}
diff --git a/apps/editor/app/(panel)/layout.tsx b/apps/editor/app/(panel)/layout.tsx
new file mode 100644
index 000000000..9bb1fd1df
--- /dev/null
+++ b/apps/editor/app/(panel)/layout.tsx
@@ -0,0 +1,36 @@
+import { AppProviders } from '@panel/components/app-providers'
+import { ErrorReporter } from '@panel/components/error-reporter'
+import type { Lang, Theme } from '@panel/lib/types'
+import type { Metadata } from 'next'
+import { cookies } from 'next/headers'
+import '@panel/globals.css'
+
+export const metadata: Metadata = {
+  title: 'Console',
+  description: 'DigitalTwin — authentication and administration console.',
+}
+
+/**
+ * The console's root layout, adapted to live inside the editor app: the host
+ * owns <html>/<body> and the fonts (same --font-barlow/--font-geist-mono
+ * variables), so the panel's theme attribute moves from <html> to a wrapper.
+ * Every panel token is defined on [data-dt-theme] — not :root — precisely so
+ * the theme travels with the subtree instead of leaking into the editor.
+ *
+ * Reading theme and language from cookies server-side keeps the first paint
+ * from flashing the wrong theme.
+ */
+export default async function PanelLayout({ children }: { children: React.ReactNode }) {
+  const jar = await cookies()
+  const theme: Theme = jar.get('digitaltwin_theme')?.value === 'light' ? 'light' : 'dark'
+  const lang: Lang = jar.get('digitaltwin_lang')?.value === 'tr' ? 'tr' : 'en'
+
+  return (
+    <div className="min-h-screen bg-shell text-fg" data-dt-theme={theme} lang={lang}>
+      <AppProviders initialLang={lang} initialTheme={theme}>
+        <ErrorReporter />
+        {children}
+      </AppProviders>
+    </div>
+  )
+}
diff --git a/apps/editor/app/(panel)/mfa/page.tsx b/apps/editor/app/(panel)/mfa/page.tsx
new file mode 100644
index 000000000..73d26c378
--- /dev/null
+++ b/apps/editor/app/(panel)/mfa/page.tsx
@@ -0,0 +1,14 @@
+import { MfaVerifyScreen } from '@panel/components/auth/mfa-verify-screen'
+import { getSession } from '@panel/lib/auth/session'
+import { redirect } from 'next/navigation'
+
+export const dynamic = 'force-dynamic'
+
+export default async function MfaPage() {
+  const session = await getSession({ touch: false })
+  if (!session) redirect('/signin')
+  // Reaching the OTP screen with the step already cleared means the flow is done.
+  if (!session.mfaPending) redirect('/console/overview')
+
+  return <MfaVerifyScreen />
+}
diff --git a/apps/editor/app/(panel)/mfa/recovery/page.tsx b/apps/editor/app/(panel)/mfa/recovery/page.tsx
new file mode 100644
index 000000000..73855fd0a
--- /dev/null
+++ b/apps/editor/app/(panel)/mfa/recovery/page.tsx
@@ -0,0 +1,13 @@
+import { MfaRecoveryScreen } from '@panel/components/auth/mfa-recovery-screen'
+import { getSession } from '@panel/lib/auth/session'
+import { redirect } from 'next/navigation'
+
+export const dynamic = 'force-dynamic'
+
+export default async function MfaRecoveryPage() {
+  const session = await getSession({ touch: false })
+  if (!session) redirect('/signin')
+  if (!session.mfaPending) redirect('/console/overview')
+
+  return <MfaRecoveryScreen />
+}
diff --git a/apps/editor/app/(panel)/mfa/setup/page.tsx b/apps/editor/app/(panel)/mfa/setup/page.tsx
new file mode 100644
index 000000000..f3c397341
--- /dev/null
+++ b/apps/editor/app/(panel)/mfa/setup/page.tsx
@@ -0,0 +1,14 @@
+import { MfaSetupScreen } from '@panel/components/auth/mfa-setup-screen'
+import { getSession } from '@panel/lib/auth/session'
+import { redirect } from 'next/navigation'
+
+export const dynamic = 'force-dynamic'
+
+export default async function MfaSetupPage() {
+  // Enrolment is reachable with a half-open session on purpose: that is exactly
+  // the state a first-time user is in when MFA is mandatory.
+  const session = await getSession({ touch: false })
+  if (!session) redirect('/signin')
+
+  return <MfaSetupScreen />
+}
diff --git a/apps/editor/app/(panel)/request/page.tsx b/apps/editor/app/(panel)/request/page.tsx
new file mode 100644
index 000000000..4f9892a1a
--- /dev/null
+++ b/apps/editor/app/(panel)/request/page.tsx
@@ -0,0 +1,5 @@
+import { RequestAccessScreen } from '@panel/components/auth/request-access-screen'
+
+export default function RequestPage() {
+  return <RequestAccessScreen />
+}
diff --git a/apps/editor/app/(panel)/reset/[token]/page.tsx b/apps/editor/app/(panel)/reset/[token]/page.tsx
new file mode 100644
index 000000000..05469b6fc
--- /dev/null
+++ b/apps/editor/app/(panel)/reset/[token]/page.tsx
@@ -0,0 +1,8 @@
+import { SetPasswordScreen } from '@panel/components/auth/set-password-screen'
+
+export const dynamic = 'force-dynamic'
+
+export default async function SetPasswordPage({ params }: { params: Promise<{ token: string }> }) {
+  const { token } = await params
+  return <SetPasswordScreen token={token} requestedMode="reset" />
+}
diff --git a/apps/editor/app/(panel)/reset/page.tsx b/apps/editor/app/(panel)/reset/page.tsx
new file mode 100644
index 000000000..b094fda66
--- /dev/null
+++ b/apps/editor/app/(panel)/reset/page.tsx
@@ -0,0 +1,5 @@
+import { ResetRequestScreen } from '@panel/components/auth/reset-request-screen'
+
+export default function ResetPage() {
+  return <ResetRequestScreen />
+}
diff --git a/apps/editor/app/(panel)/signin/page.tsx b/apps/editor/app/(panel)/signin/page.tsx
new file mode 100644
index 000000000..f4d4418fe
--- /dev/null
+++ b/apps/editor/app/(panel)/signin/page.tsx
@@ -0,0 +1,20 @@
+import { SignInScreen } from '@panel/components/auth/sign-in-screen'
+import { getSession } from '@panel/lib/auth/session'
+import { redirect } from 'next/navigation'
+import { Suspense } from 'react'
+
+export const dynamic = 'force-dynamic'
+
+export default async function SignInPage() {
+  // An already-signed-in visitor is bounced to the console rather than shown a
+  // form that would just re-authenticate them.
+  const session = await getSession({ touch: false })
+  if (session && !session.mfaPending && !session.user.mustChangePassword)
+    redirect('/console/overview')
+
+  return (
+    <Suspense fallback={null}>
+      <SignInScreen />
+    </Suspense>
+  )
+}
diff --git a/apps/editor/app/(panel)/welcome/page.tsx b/apps/editor/app/(panel)/welcome/page.tsx
new file mode 100644
index 000000000..4a6eb80f8
--- /dev/null
+++ b/apps/editor/app/(panel)/welcome/page.tsx
@@ -0,0 +1,29 @@
+import { SetPasswordScreen } from '@panel/components/auth/set-password-screen'
+import { getSession } from '@panel/lib/auth/session'
+import { redirect } from 'next/navigation'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * First sign-in, reachable two ways:
+ *   /welcome?token=…  an invited account opening its emailed link
+ *   /welcome          a signed-in account carrying must_change_password
+ *
+ * Neither is reachable by accident: without a token and without that flag there
+ * is nothing to set up, so the visitor goes wherever they actually belong.
+ */
+export default async function WelcomePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ token?: string }>
+}) {
+  const { token } = await searchParams
+  if (token) return <SetPasswordScreen token={token} requestedMode="welcome" />
+
+  const session = await getSession({ touch: false })
+  if (!session) redirect('/signin')
+  if (session.mfaPending) redirect('/mfa')
+  if (!session.user.mustChangePassword) redirect('/console/overview')
+
+  return <SetPasswordScreen token={null} requestedMode="welcome" identity={session.user.username} />
+}
diff --git a/apps/editor/app/(public)/changelog/page.tsx b/apps/editor/app/(public)/changelog/page.tsx
new file mode 100644
index 000000000..7356212e2
--- /dev/null
+++ b/apps/editor/app/(public)/changelog/page.tsx
@@ -0,0 +1,131 @@
+import { changelogPage } from '@panel/lib/changelog'
+import type { Lang } from '@panel/lib/types'
+import type { Metadata } from 'next'
+import { cookies } from 'next/headers'
+
+export const dynamic = 'force-dynamic'
+
+export const metadata: Metadata = { title: 'Changelog' }
+
+/**
+ * A narrow, single-column release history: date, version, title, what
+ * changed, tags — rows separated by rules rather than boxed into cards,
+ * which is what keeps a long history readable in one scroll.
+ *
+ * Public, and fed by the same source as the console's Updates tab, so the
+ * two can never drift. The RSS button beside the heading is the same list
+ * again, for anyone who would rather be told than remember to look.
+ */
+/**
+ * Which of the three components a release belongs to. The repositories behind
+ * them are never named here — that rule is why the entries carry a `channel`
+ * rather than a repo — but a reader still has to be able to tell an editor
+ * release from a plugin one, and they version independently.
+ */
+const CHANNEL_LABEL: Record<Lang, Record<'editor' | 'plugin' | 'console', string>> = {
+  en: { editor: 'Editor', plugin: 'Warehouse plugin', console: 'Console' },
+  tr: { editor: 'Editör', plugin: 'Depo eklentisi', console: 'Konsol' },
+}
+
+function formatDay(lang: Lang, iso: string): string {
+  try {
+    return new Date(iso).toLocaleDateString(lang === 'tr' ? 'tr-TR' : 'en-GB', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    })
+  } catch {
+    return iso
+  }
+}
+
+export default async function ChangelogPage() {
+  const jar = await cookies()
+  const lang: Lang = jar.get('digitaltwin_lang')?.value === 'tr' ? 'tr' : 'en'
+  const { entries } = await changelogPage(null, 40)
+
+  return (
+    <main>
+      <div className="mx-auto max-w-2xl px-6 pt-20 pb-24">
+        <header className="mb-16">
+          <h1 className="m-0 font-bold text-[36px] text-fg leading-[1.1] tracking-[-0.025em]">
+            {lang === 'tr' ? 'Sürüm notları' : 'Changelog'}
+          </h1>
+          <p className="mt-3 text-[15px] text-muted-fg leading-relaxed">
+            {lang === 'tr'
+              ? 'DigitalTwin platformundaki yeni özellikler, iyileştirmeler ve düzeltmeler.'
+              : 'New features, improvements, and fixes across the DigitalTwin platform.'}
+          </p>
+          <div className="mt-6">
+            <a
+              className="inline-flex items-center gap-[6px] rounded-full border border-border bg-surface px-[14px] py-[6px] text-[12px] text-muted-fg no-underline transition-colors hover:border-border hover:text-fg"
+              href="/changelog/rss.xml"
+              title={lang === 'tr' ? 'RSS ile takip et' : 'Subscribe via RSS'}
+            >
+              <svg
+                aria-hidden
+                className="h-3 w-3"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M4 11a9 9 0 0 1 9 9" />
+                <path d="M4 4a16 16 0 0 1 16 16" />
+                <circle cx="5" cy="19" r="1" />
+              </svg>
+              {lang === 'tr' ? 'Takip et' : 'Subscribe'}
+            </a>
+          </div>
+        </header>
+
+        <div className="divide-y divide-border">
+          {entries.map((entry, index) => (
+            <article className={index === 0 ? 'py-8 pt-0' : 'py-8'} key={entry.id}>
+              <div className="mb-3 flex items-center gap-3">
+                <time
+                  className="font-mono text-[13px] text-muted-fg tabular-nums"
+                  dateTime={entry.date}
+                >
+                  {formatDay(lang, entry.date)}
+                </time>
+                {entry.version ? (
+                  <>
+                    <span className="text-muted-fg/40">·</span>
+                    <span className="font-mono text-[13px] text-muted-fg">{entry.version}</span>
+                  </>
+                ) : null}
+                <span className="text-muted-fg/40">·</span>
+                <span className="rounded-full border border-border px-[8px] py-[1px] font-mono text-[11px] text-muted-fg">
+                  {CHANNEL_LABEL[lang][entry.channel]}
+                </span>
+              </div>
+
+              <h2 className="m-0 font-semibold text-[22px] text-fg leading-snug tracking-[-0.015em]">
+                {entry.title}
+              </h2>
+
+              <p className="mt-2 text-[15px] text-muted-fg leading-relaxed">{entry.summary}</p>
+
+              {entry.tags.length > 0 ? (
+                <div className="mt-3 flex flex-wrap gap-[6px]">
+                  {entry.tags.map((tag) => (
+                    <span
+                      className="rounded-full bg-muted px-[8px] py-[2px] font-mono text-[11px] text-muted-fg"
+                      key={tag}
+                    >
+                      #{tag}
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+            </article>
+          ))}
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/apps/editor/app/(public)/changelog/rss.xml/route.ts b/apps/editor/app/(public)/changelog/rss.xml/route.ts
new file mode 100644
index 000000000..264201954
--- /dev/null
+++ b/apps/editor/app/(public)/changelog/rss.xml/route.ts
@@ -0,0 +1,56 @@
+import { changelogPage } from '@panel/lib/changelog'
+import { appUrl } from '@panel/lib/mail'
+
+export const dynamic = 'force-dynamic'
+
+/** Escapes the five characters XML cannot carry raw. */
+function xml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;')
+}
+
+/**
+ * GET /changelog/rss.xml — the same entries the changelog page shows, for
+ * readers who would rather be told than remember to look.
+ */
+export async function GET() {
+  const { entries } = await changelogPage(null, 40)
+  const site = appUrl('/changelog')
+
+  const items = entries
+    .map((entry) => {
+      const title = entry.version ? `${entry.version} — ${entry.title}` : entry.title
+      return `    <item>
+      <title>${xml(title)}</title>
+      <link>${xml(site)}</link>
+      <guid isPermaLink="false">${xml(entry.id)}</guid>
+      <pubDate>${new Date(entry.date).toUTCString()}</pubDate>
+      <description>${xml(entry.summary)}</description>
+${entry.tags.map((tag) => `      <category>${xml(tag)}</category>`).join('\n')}
+    </item>`
+    })
+    .join('\n')
+
+  const body = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+  <channel>
+    <title>DigitalTwin — changelog</title>
+    <link>${xml(site)}</link>
+    <description>Releases and changes across the DigitalTwin platform.</description>
+    <language>en</language>
+${items}
+  </channel>
+</rss>
+`
+
+  return new Response(body, {
+    headers: {
+      'content-type': 'application/rss+xml; charset=utf-8',
+      'cache-control': 'no-store',
+    },
+  })
+}
diff --git a/apps/editor/app/(public)/guides/[slug]/page.tsx b/apps/editor/app/(public)/guides/[slug]/page.tsx
new file mode 100644
index 000000000..8ba3f8334
--- /dev/null
+++ b/apps/editor/app/(public)/guides/[slug]/page.tsx
@@ -0,0 +1,150 @@
+import type { Lang } from '@panel/lib/types'
+import type { Metadata } from 'next'
+import { cookies } from 'next/headers'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { DocsShell } from '@/components/public/docs-shell'
+import { allGuideSlugs, guidePageFor, guidesFor } from '@/lib/guides-content'
+import { slugify } from '@/lib/slugify'
+
+export const dynamic = 'force-dynamic'
+
+interface Params {
+  params: Promise<{ slug: string }>
+}
+
+export async function generateMetadata({ params }: Params): Promise<Metadata> {
+  const { slug } = await params
+  const page = guidePageFor('en', slug)
+  return { title: page?.title ?? 'Documentation' }
+}
+
+/** One documentation page: heading, description, sections, and where to go next. */
+export default async function GuidePage({ params }: Params) {
+  const { slug } = await params
+  if (!allGuideSlugs().includes(slug)) notFound()
+
+  const jar = await cookies()
+  const lang: Lang = jar.get('digitaltwin_lang')?.value === 'tr' ? 'tr' : 'en'
+  const guides = guidesFor(lang)
+  const page = guidePageFor(lang, slug)
+  if (!page) notFound()
+
+  const group = guides.groups.find((g) => g.pages.some((p) => p.slug === slug))
+  const flat = guides.groups.flatMap((g) => g.pages)
+  const index = flat.findIndex((p) => p.slug === slug)
+  const previous = index > 0 ? flat[index - 1] : undefined
+  const next = index >= 0 && index < flat.length - 1 ? flat[index + 1] : undefined
+
+  const nav = guides.groups.map((g) => ({
+    title: g.title,
+    pages: g.pages.map((p) => ({ slug: p.slug, title: p.title })),
+  }))
+
+  return (
+    <DocsShell
+      groups={nav}
+      onThisPage={page.blocks.map((block) => ({
+        id: slugify(block.heading),
+        title: block.heading,
+      }))}
+      onThisPageLabel={lang === 'tr' ? 'Bu sayfada' : 'On this page'}
+    >
+      <article className="flex max-w-[720px] flex-col gap-9">
+        <header className="flex flex-col gap-[7px]">
+          {group ? (
+            <span className="font-mono text-[10px] text-muted-fg uppercase tracking-[0.14em]">
+              {group.title}
+            </span>
+          ) : null}
+          <h1 className="m-0 font-bold text-[32px] leading-[1.15] tracking-[-0.025em]">
+            {page.title}
+          </h1>
+          <p className="m-0 text-[15px] text-muted-fg leading-[1.65]">{page.description}</p>
+        </header>
+
+        {page.blocks.map((block) => (
+          <section
+            className="flex scroll-mt-[86px] flex-col gap-[10px]"
+            id={slugify(block.heading)}
+            key={block.heading}
+          >
+            <h2 className="m-0 font-semibold text-[19px] tracking-[-0.015em]">{block.heading}</h2>
+
+            {block.body?.map((paragraph) => (
+              <p className="m-0 text-[14.5px] text-fg leading-[1.75]" key={paragraph}>
+                {paragraph}
+              </p>
+            ))}
+
+            {block.points ? (
+              <ul className="m-0 flex list-none flex-col gap-[7px] p-0">
+                {block.points.map((point) => (
+                  <li className="flex gap-[10px] text-[14.5px] text-fg leading-[1.7]" key={point}>
+                    <span
+                      aria-hidden
+                      className="mt-[9px] h-[4px] w-[4px] shrink-0 rounded-full bg-brand"
+                    />
+                    <span>{point}</span>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+
+            {block.table ? (
+              <div className="overflow-x-auto rounded-[12px] border border-border bg-surface">
+                <table className="w-full border-collapse text-[13.5px]">
+                  <thead>
+                    <tr className="border-border border-b text-left font-mono text-[9.5px] text-muted-fg uppercase tracking-[0.12em]">
+                      <th className="px-[13px] py-[9px] font-medium">{block.table.columns[0]}</th>
+                      <th className="px-[13px] py-[9px] font-medium">{block.table.columns[1]}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {block.table.rows.map(([key, value]) => (
+                      <tr className="border-border-soft border-t" key={key}>
+                        <td className="px-[13px] py-[9px] align-top">
+                          <span className="rounded-[5px] border border-border bg-field px-[7px] py-[2px] font-mono text-[12px] text-fg">
+                            {key}
+                          </span>
+                        </td>
+                        <td className="px-[13px] py-[9px] text-muted-fg">{value}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : null}
+          </section>
+        ))}
+
+        {previous || next ? (
+          <nav className="flex flex-wrap gap-[10px] border-border border-t pt-6">
+            {previous ? (
+              <Link
+                className="flex min-w-0 flex-1 flex-col gap-[3px] rounded-[10px] border border-border bg-surface p-[12px] no-underline transition-colors hover:bg-hover"
+                href={`/guides/${previous.slug}`}
+              >
+                <span className="font-mono text-[9.5px] text-muted-fg uppercase tracking-[0.12em]">
+                  ←
+                </span>
+                <span className="font-medium text-[13.5px] text-fg">{previous.title}</span>
+              </Link>
+            ) : null}
+            {next ? (
+              <Link
+                className="flex min-w-0 flex-1 flex-col items-end gap-[3px] rounded-[10px] border border-border bg-surface p-[12px] no-underline transition-colors hover:bg-hover"
+                href={`/guides/${next.slug}`}
+              >
+                <span className="font-mono text-[9.5px] text-muted-fg uppercase tracking-[0.12em]">
+                  →
+                </span>
+                <span className="font-medium text-[13.5px] text-fg">{next.title}</span>
+              </Link>
+            ) : null}
+          </nav>
+        ) : null}
+      </article>
+    </DocsShell>
+  )
+}
diff --git a/apps/editor/app/(public)/guides/page.tsx b/apps/editor/app/(public)/guides/page.tsx
new file mode 100644
index 000000000..df6b8dd82
--- /dev/null
+++ b/apps/editor/app/(public)/guides/page.tsx
@@ -0,0 +1,109 @@
+import type { Lang } from '@panel/lib/types'
+import type { Metadata } from 'next'
+import { cookies } from 'next/headers'
+import Link from 'next/link'
+import { DocsShell } from '@/components/public/docs-shell'
+import { guidesFor } from '@/lib/guides-content'
+
+export const dynamic = 'force-dynamic'
+
+export const metadata: Metadata = { title: 'Documentation' }
+
+/** The documentation home: a welcome, a way in, then the manual as cards. */
+export default async function GuidesIndex() {
+  const jar = await cookies()
+  const lang: Lang = jar.get('digitaltwin_lang')?.value === 'tr' ? 'tr' : 'en'
+  const guides = guidesFor(lang)
+  const [firstGroup, ...restGroups] = guides.groups
+
+  const nav = guides.groups.map((group) => ({
+    title: group.title,
+    pages: group.pages.map((page) => ({ slug: page.slug, title: page.title })),
+  }))
+
+  return (
+    <DocsShell
+      groups={nav}
+      onThisPage={[
+        { id: 'start-here', title: guides.startHere },
+        { id: 'explore', title: guides.explore },
+      ]}
+      onThisPageLabel={lang === 'tr' ? 'Bu sayfada' : 'On this page'}
+    >
+      <article className="flex max-w-[720px] flex-col gap-10">
+        <header className="flex flex-col gap-3">
+          <span className="font-mono text-[10px] text-muted-fg uppercase tracking-[0.14em]">
+            {guides.groups[0]?.title}
+          </span>
+          <h1 className="m-0 font-bold text-[36px] leading-[1.1] tracking-[-0.025em]">
+            {guides.title}
+          </h1>
+          {guides.lead.map((paragraph) => (
+            <p className="m-0 text-[15px] text-muted-fg leading-[1.7]" key={paragraph}>
+              {paragraph}
+            </p>
+          ))}
+        </header>
+
+        {firstGroup ? (
+          <section className="flex flex-col gap-3" id="start-here">
+            <h2 className="m-0 font-semibold text-[19px] tracking-[-0.015em]">
+              {guides.startHere}
+            </h2>
+            <div className="grid grid-cols-1 gap-[10px] sm:grid-cols-2">
+              {firstGroup.pages.map((page) => (
+                <GuideCard
+                  description={page.description}
+                  key={page.slug}
+                  slug={page.slug}
+                  title={page.title}
+                />
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        <section className="flex flex-col gap-6" id="explore">
+          <h2 className="m-0 font-semibold text-[19px] tracking-[-0.015em]">{guides.explore}</h2>
+          {restGroups.map((group) => (
+            <div className="flex flex-col gap-[10px]" key={group.title}>
+              <h3 className="m-0 font-mono text-[10px] text-muted-fg uppercase tracking-[0.14em]">
+                {group.title}
+              </h3>
+              <div className="grid grid-cols-1 gap-[10px] sm:grid-cols-2">
+                {group.pages.map((page) => (
+                  <GuideCard
+                    description={page.description}
+                    key={page.slug}
+                    slug={page.slug}
+                    title={page.title}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </section>
+      </article>
+    </DocsShell>
+  )
+}
+
+function GuideCard({
+  slug,
+  title,
+  description,
+}: {
+  slug: string
+  title: string
+  description: string
+}) {
+  return (
+    <Link
+      className="flex flex-col gap-[5px] rounded-[12px] border border-border bg-surface p-[14px] no-underline transition-colors hover:border-border/80 hover:bg-hover"
+      href={`/guides/${slug}`}
+    >
+      <span className="font-semibold text-[13.5px] text-fg tracking-[-0.01em]">{title}</span>
+      <span className="text-[12.5px] text-muted-fg leading-[1.55]">{description}</span>
+    </Link>
+  )
+}
diff --git a/apps/editor/app/(public)/layout.tsx b/apps/editor/app/(public)/layout.tsx
new file mode 100644
index 000000000..28f43289a
--- /dev/null
+++ b/apps/editor/app/(public)/layout.tsx
@@ -0,0 +1,87 @@
+import '@panel/globals.css'
+import { dictionaryFor } from '@panel/lib/i18n'
+import type { Lang } from '@panel/lib/types'
+import { cookies } from 'next/headers'
+import Link from 'next/link'
+import type { ReactNode } from 'react'
+import { BrandLockup } from '@/components/brand-mark'
+import { LangSwitch } from '@/components/public/lang-switch'
+import { ThemeSwitch } from '@/components/public/theme-switch'
+import { authAvailable } from '@/lib/auth/db'
+import { getSessionUser } from '@/lib/auth/session'
+
+/**
+ * The shell for the two pages anyone may read without an account: the
+ * documentation and the changelog. It wears the product's skin but carries
+ * none of the console's machinery — no session, no providers — because the
+ * whole point is that a signed-out visitor can reach it from the sign-in
+ * screen.
+ */
+export default async function PublicLayout({ children }: { children: ReactNode }) {
+  const jar = await cookies()
+  const lang: Lang = jar.get('digitaltwin_lang')?.value === 'tr' ? 'tr' : 'en'
+  const theme = jar.get('digitaltwin_theme')?.value === 'light' ? 'light' : 'dark'
+  const t = dictionaryFor(lang)
+
+  // These pages are readable by anyone, so the call to action has to match who
+  // is reading: a stranger is offered the door, an editor the editor, and a
+  // view-only account the scenes it may look at.
+  const user = authAvailable() ? await getSessionUser() : null
+  const cta =
+    user === null
+      ? { href: '/signin', label: t.signIn }
+      : user.role === 'viewer'
+        ? { href: '/scenes', label: lang === 'tr' ? 'Sahnelerim' : 'My scenes' }
+        : { href: '/', label: lang === 'tr' ? 'Editörü aç' : 'Open the editor' }
+
+  return (
+    <div className="min-h-screen bg-bg text-fg" data-dt-theme={theme} lang={lang}>
+      <header className="sticky top-0 z-20 border-border border-b bg-bg/85 backdrop-blur">
+        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 py-[13px]">
+          <Link className="text-fg no-underline" href="/guides">
+            <BrandLockup />
+          </Link>
+
+          <nav className="flex items-center gap-[14px] text-[13px]">
+            <Link className="text-muted-fg no-underline hover:text-fg" href="/guides">
+              {lang === 'tr' ? 'Kılavuz' : 'Guides'}
+            </Link>
+            <Link className="text-muted-fg no-underline hover:text-fg" href="/changelog">
+              {lang === 'tr' ? 'Sürüm notları' : 'Changelog'}
+            </Link>
+            <LangSwitch />
+            <ThemeSwitch
+              labels={{
+                system: t.themeSystem,
+                light: t.themeLight,
+                dark: t.themeDark,
+              }}
+            />
+            <Link
+              className="rounded-full bg-brand px-[13px] py-[6px] font-medium text-[12.5px] text-[#18181b] no-underline transition-opacity hover:opacity-90"
+              href={cta.href}
+            >
+              {cta.label}
+            </Link>
+          </nav>
+        </div>
+      </header>
+
+      {children}
+
+      <footer className="border-border border-t">
+        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3 px-6 py-6 text-[12px] text-muted-fg">
+          <span>DigitalTwin — {t.internalOnly}</span>
+          <span className="flex gap-4">
+            <Link className="text-muted-fg no-underline hover:text-fg" href="/terms">
+              {lang === 'tr' ? 'Şartlar' : 'Terms'}
+            </Link>
+            <Link className="text-muted-fg no-underline hover:text-fg" href="/privacy">
+              {lang === 'tr' ? 'Gizlilik' : 'Privacy'}
+            </Link>
+          </span>
+        </div>
+      </footer>
+    </div>
+  )
+}
diff --git a/apps/editor/app/api/admin/scenes/[id]/manage/route.ts b/apps/editor/app/api/admin/scenes/[id]/manage/route.ts
new file mode 100644
index 000000000..077e92660
--- /dev/null
+++ b/apps/editor/app/api/admin/scenes/[id]/manage/route.ts
@@ -0,0 +1,66 @@
+import type { NextRequest } from 'next/server'
+import { z } from 'zod'
+import { requireAdmin } from '@/lib/auth/admin'
+import { unpublishScene } from '@/lib/auth/site-scenes'
+import { guardSceneApiRequest, sceneApiJson } from '@/lib/scene-api-security'
+import { getSceneOperations } from '@/lib/scene-store-server'
+
+export const dynamic = 'force-dynamic'
+
+const schema = z.discriminatedUnion('action', [
+  z.object({ action: z.literal('rename'), name: z.string().trim().min(1).max(200) }),
+  z.object({ action: z.literal('duplicate') }),
+  z.object({ action: z.literal('delete') }),
+])
+
+/**
+ * POST /api/admin/scenes/[id]/manage — rename, duplicate or delete a project
+ * from the console.
+ *
+ * Duplicating copies the graph into a new scene owned by the same person and
+ * marked as a copy; the copy is a draft, because publishing is an approval
+ * and approval does not transfer. Deleting removes the scene and withdraws
+ * its site card first, so no card is left pointing at nothing.
+ */
+export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const guard = guardSceneApiRequest(request, { skipAuth: true })
+  if (guard) return guard
+  const admin = await requireAdmin()
+  if (!admin) return sceneApiJson(request, { error: 'forbidden' }, { status: 403 })
+
+  const { id } = await params
+  let body: unknown
+  try {
+    body = await request.json()
+  } catch {
+    return sceneApiJson(request, { error: 'invalid_request' }, { status: 400 })
+  }
+  const parsed = schema.safeParse(body)
+  if (!parsed.success) return sceneApiJson(request, { error: 'invalid_request' }, { status: 400 })
+
+  const operations = await getSceneOperations()
+  const scene = await operations.loadStoredScene(id)
+  if (!scene) return sceneApiJson(request, { error: 'not_found' }, { status: 404 })
+
+  if (parsed.data.action === 'rename') {
+    const meta = await operations.renameStoredScene(id, parsed.data.name)
+    return sceneApiJson(request, { ok: true, name: meta.name })
+  }
+
+  if (parsed.data.action === 'duplicate') {
+    const copy = await operations.saveScene({
+      name: `${scene.name} (copy)`.slice(0, 200),
+      projectId: scene.projectId ?? null,
+      ownerId: scene.ownerId ?? undefined,
+      graph: scene.graph as never,
+      thumbnailUrl: scene.thumbnailUrl ?? null,
+    })
+    return sceneApiJson(request, { ok: true, id: copy.id }, { status: 201 })
+  }
+
+  // Withdraw first: a site card outliving its scene is a dead link on the
+  // one screen the whole organisation reads.
+  await unpublishScene(id)
+  const deleted = await operations.deleteStoredScene(id)
+  return sceneApiJson(request, { ok: deleted })
+}
diff --git a/apps/editor/app/api/admin/scenes/[id]/owner/route.ts b/apps/editor/app/api/admin/scenes/[id]/owner/route.ts
new file mode 100644
index 000000000..9b7c82b4f
--- /dev/null
+++ b/apps/editor/app/api/admin/scenes/[id]/owner/route.ts
@@ -0,0 +1,39 @@
+import type { NextRequest } from 'next/server'
+import { z } from 'zod'
+import { reassignScene, requireAdmin, userExists } from '@/lib/auth/admin'
+import { guardSceneApiRequest, sceneApiJson } from '@/lib/scene-api-security'
+import { getSceneOperations } from '@/lib/scene-store-server'
+
+export const dynamic = 'force-dynamic'
+
+const schema = z.object({ ownerId: z.string().min(1).max(64).nullable() })
+
+export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const guard = guardSceneApiRequest(request, { skipAuth: true })
+  if (guard) return guard
+  const admin = await requireAdmin()
+  if (!admin) return sceneApiJson(request, { error: 'forbidden' }, { status: 403 })
+
+  const { id } = await params
+  let body: unknown
+  try {
+    body = await request.json()
+  } catch {
+    return sceneApiJson(request, { error: 'invalid_request' }, { status: 400 })
+  }
+  const parsed = schema.safeParse(body)
+  if (!parsed.success) {
+    return sceneApiJson(request, { error: 'invalid_request' }, { status: 400 })
+  }
+
+  const operations = await getSceneOperations()
+  const scene = await operations.loadStoredScene(id)
+  if (!scene) return sceneApiJson(request, { error: 'not_found' }, { status: 404 })
+
+  if (parsed.data.ownerId && !(await userExists(parsed.data.ownerId))) {
+    return sceneApiJson(request, { error: 'owner_not_found' }, { status: 400 })
+  }
+
+  await reassignScene(id, parsed.data.ownerId)
+  return sceneApiJson(request, { ok: true })
+}
diff --git a/apps/editor/app/api/admin/scenes/adopt-unowned/route.ts b/apps/editor/app/api/admin/scenes/adopt-unowned/route.ts
new file mode 100644
index 000000000..21866b332
--- /dev/null
+++ b/apps/editor/app/api/admin/scenes/adopt-unowned/route.ts
@@ -0,0 +1,33 @@
+import type { NextRequest } from 'next/server'
+import { z } from 'zod'
+import { adoptUnownedScenes, requireAdmin, userExists } from '@/lib/auth/admin'
+import { guardSceneApiRequest, sceneApiJson } from '@/lib/scene-api-security'
+
+export const dynamic = 'force-dynamic'
+
+const schema = z.object({ ownerId: z.string().min(1).max(64) })
+
+/** Adopts every legacy null-owner scene to one user. */
+export async function POST(request: NextRequest) {
+  const guard = guardSceneApiRequest(request, { skipAuth: true })
+  if (guard) return guard
+  const admin = await requireAdmin()
+  if (!admin) return sceneApiJson(request, { error: 'forbidden' }, { status: 403 })
+
+  let body: unknown
+  try {
+    body = await request.json()
+  } catch {
+    return sceneApiJson(request, { error: 'invalid_request' }, { status: 400 })
+  }
+  const parsed = schema.safeParse(body)
+  if (!parsed.success) {
+    return sceneApiJson(request, { error: 'invalid_request' }, { status: 400 })
+  }
+  if (!(await userExists(parsed.data.ownerId))) {
+    return sceneApiJson(request, { error: 'owner_not_found' }, { status: 400 })
+  }
+
+  const adopted = await adoptUnownedScenes(parsed.data.ownerId)
+  return sceneApiJson(request, { ok: true, adopted })
+}
diff --git a/apps/editor/app/api/admin/scenes/publish/route.ts b/apps/editor/app/api/admin/scenes/publish/route.ts
new file mode 100644
index 000000000..b80eb681b
--- /dev/null
+++ b/apps/editor/app/api/admin/scenes/publish/route.ts
@@ -0,0 +1,48 @@
+import type { NextRequest } from 'next/server'
+import { z } from 'zod'
+import { requireAdmin } from '@/lib/auth/admin'
+import { notifyScenePublished, publishSceneAsSite, unpublishScene } from '@/lib/auth/site-scenes'
+import { guardSceneApiRequest, sceneApiJson } from '@/lib/scene-api-security'
+
+export const dynamic = 'force-dynamic'
+
+const schema = z.object({
+  sceneId: z.string().min(1).max(64),
+  publish: z.boolean(),
+})
+
+/**
+ * POST /api/admin/scenes/publish — an admin approving (or withdrawing) a
+ * project. Publishing puts the scene on Sites & Projects as an active site;
+ * withdrawing removes the card and leaves the scene untouched, so the person
+ * who drew it never loses work to a moderation decision.
+ */
+export async function POST(request: NextRequest) {
+  const guard = guardSceneApiRequest(request, { skipAuth: true })
+  if (guard) return guard
+  const admin = await requireAdmin()
+  if (!admin) return sceneApiJson(request, { error: 'forbidden' }, { status: 403 })
+
+  let body: unknown
+  try {
+    body = await request.json()
+  } catch {
+    return sceneApiJson(request, { error: 'invalid_request' }, { status: 400 })
+  }
+  const parsed = schema.safeParse(body)
+  if (!parsed.success) return sceneApiJson(request, { error: 'invalid_request' }, { status: 400 })
+
+  if (!parsed.data.publish) {
+    const removed = await unpublishScene(parsed.data.sceneId)
+    return sceneApiJson(request, { published: false, changed: removed })
+  }
+
+  const result = await publishSceneAsSite(parsed.data.sceneId, admin.id)
+  if (result === 'scene_not_found') {
+    return sceneApiJson(request, { error: 'not_found' }, { status: 404 })
+  }
+  // Approval is the moment somebody's drawing becomes the organisation's, and
+  // they should hear it from the system rather than notice it later.
+  if (result === 'published') await notifyScenePublished(parsed.data.sceneId)
+  return sceneApiJson(request, { published: true, changed: result === 'published' })
+}
diff --git a/apps/editor/app/api/admin/scenes/route.ts b/apps/editor/app/api/admin/scenes/route.ts
new file mode 100644
index 000000000..8c1f918e7
--- /dev/null
+++ b/apps/editor/app/api/admin/scenes/route.ts
@@ -0,0 +1,41 @@
+import type { NextRequest } from 'next/server'
+import { listUsers, ownerEmails, requireAdmin } from '@/lib/auth/admin'
+import { publishedSceneIds } from '@/lib/auth/site-scenes'
+import { guardSceneApiRequest, sceneApiJson } from '@/lib/scene-api-security'
+import { getSceneOperations } from '@/lib/scene-store-server'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/admin/scenes — every scene with its owner, plus the accounts an
+ * owner can be reassigned to. Feeds the console's 3D scenes tab, which took
+ * over from the editor's old /admin page.
+ */
+export async function GET(request: NextRequest) {
+  const guard = guardSceneApiRequest(request, { skipAuth: true })
+  if (guard) return guard
+  const admin = await requireAdmin()
+  if (!admin) return sceneApiJson(request, { error: 'forbidden' }, { status: 403 })
+
+  const [users, operations, published] = await Promise.all([
+    listUsers(),
+    getSceneOperations(),
+    publishedSceneIds(),
+  ])
+  const scenes = await operations.listScenes({ limit: 500 })
+  const emails = await ownerEmails(scenes.map((s) => s.ownerId).filter((x): x is string => !!x))
+
+  return sceneApiJson(request, {
+    scenes: scenes.map((s) => ({
+      id: s.id,
+      name: s.name,
+      ownerId: s.ownerId,
+      ownerEmail: s.ownerId ? (emails.get(s.ownerId) ?? null) : null,
+      updatedAt: s.updatedAt,
+      nodeCount: s.nodeCount,
+      published: published.has(s.id),
+    })),
+    users: users.map((u) => ({ id: u.id, email: u.email })),
+    adminId: admin.id,
+  })
+}
diff --git a/apps/editor/app/api/audit/route.ts b/apps/editor/app/api/audit/route.ts
new file mode 100644
index 000000000..9c8923922
--- /dev/null
+++ b/apps/editor/app/api/audit/route.ts
@@ -0,0 +1,32 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { auditKinds, listLogs } from '@panel/lib/logs'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/audit — the append-only change trail.
+ *
+ * There is no DELETE here and there never should be: the whole value of the
+ * trail is that no console action can remove an entry from it.
+ */
+export const GET = handler(async (request: Request) => {
+  const guard = await requirePermission('view_logs')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.logsRestricted')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const params = new URL(request.url).searchParams
+  const page = await listLogs({
+    view: 'audit',
+    search: params.get('search') ?? undefined,
+    kind: params.get('kind') ?? undefined,
+    cursor: params.get('cursor') ?? undefined,
+    limit: Number(params.get('limit') ?? 50) || 50,
+  })
+
+  return ok({ ...page, kinds: await auditKinds() })
+})
diff --git a/apps/editor/app/api/auth/password/route.ts b/apps/editor/app/api/auth/password/route.ts
new file mode 100644
index 000000000..b79f5c727
--- /dev/null
+++ b/apps/editor/app/api/auth/password/route.ts
@@ -0,0 +1,87 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import type { ResetConfirmResponse } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { checkPasswordPolicy, hashPassword } from '@panel/lib/auth/password'
+import { getSession, revokeAllSessions } from '@panel/lib/auth/session'
+import { isEnrolled } from '@panel/lib/auth/totp'
+import { exec } from '@panel/lib/db'
+import { deliverPasswordChanged } from '@panel/lib/mail'
+import { getSettings } from '@panel/lib/settings'
+import { z } from 'zod'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+const schema = z
+  .object({
+    password: z.string().min(10).max(512),
+    passwordAgain: z.string().min(10).max(512),
+    revokeOtherSessions: z.boolean().default(true),
+    acceptPolicy: z.boolean().default(false),
+  })
+  .refine((v) => v.password === v.passwordAgain, {
+    path: ['passwordAgain'],
+    params: { code: 'password_mismatch' },
+    message: 'err.passwordMismatch',
+  })
+
+/**
+ * POST /api/auth/password — the forced change on first sign-in.
+ *
+ * Distinct from /api/auth/reset/confirm, which is driven by an emailed token.
+ * This one is driven by an authenticated session carrying must_change_password,
+ * which is how a seeded or admin-provisioned account arrives with no invite link
+ * in play. Either route sets the same column and clears the same flag.
+ */
+export const POST = handler(async (request: Request) => {
+  const parsed = await parseBody(request, schema)
+  if (!parsed.ok) return parsed.response
+
+  const session = await getSession()
+  if (!session || session.mfaPending) return fail('unauthenticated', 'err.sessionExpired')
+  if (!parsed.data.acceptPolicy)
+    return fail('validation', 'err.policyRequired', { field: 'acceptPolicy' })
+
+  const policy = checkPasswordPolicy(
+    parsed.data.password,
+    session.user.username || session.user.email,
+  )
+  if (!policy.ok) return fail('password_policy', 'err.passwordPolicy', { policy })
+
+  await exec(
+    'UPDATE users SET password_hash = ?, password_set_at = NOW(), must_change_password = 0 WHERE id = ?',
+    [await hashPassword(parsed.data.password), session.userId],
+  )
+
+  // Spare the current session — the user just proved themselves and should not
+  // be thrown back to sign-in for changing their own password.
+  const revokedSessions = parsed.data.revokeOtherSessions
+    ? await revokeAllSessions(session.userId, session.id)
+    : 0
+
+  await audit({
+    actorUserId: session.userId,
+    actorLabel: session.user.email,
+    level: 'info',
+    kind: 'auth',
+    message: 'Password changed on first sign-in',
+    event: { k: 'passwordChangedFirst' },
+    meta: { revokedSessions },
+  })
+
+  await deliverPasswordChanged({
+    email: session.user.email,
+    fullName: session.user.name,
+    via: 'first-sign-in',
+  })
+
+  const settings = await getSettings()
+  const mfaOwed = settings.mfaRequired && !(await isEnrolled(session.userId))
+
+  const body: ResetConfirmResponse = {
+    state: 'signedIn',
+    next: mfaOwed ? 'mfa-setup' : 'console',
+    revokedSessions,
+  }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/auth/reset/[token]/route.ts b/apps/editor/app/api/auth/reset/[token]/route.ts
new file mode 100644
index 000000000..96976de29
--- /dev/null
+++ b/apps/editor/app/api/auth/reset/[token]/route.ts
@@ -0,0 +1,41 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { resolveInvitationToken } from '@panel/lib/auth/invitations'
+import { resolveResetToken } from '@panel/lib/auth/reset'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/auth/reset/:token — what the `#/reset/:token` and `#/welcome` screens
+ * call before rendering, so an expired link shows its own state instead of a
+ * form that will fail on submit.
+ *
+ * One token space, two sources: a reset link and an invite link both land here.
+ * The response says which, because the invite variant renders the "Set up your
+ * account" copy and the policy-consent checkbox.
+ */
+export const GET = handler(
+  async (_request: Request, ctx: { params: Promise<{ token: string }> }) => {
+    const { token } = await ctx.params
+
+    const reset = await resolveResetToken(token)
+    if (reset.state === 'valid') {
+      return ok({ kind: 'reset' as const, email: reset.email, username: reset.username })
+    }
+    if (reset.state === 'expired') return fail('token_expired', 'err.tokenExpired')
+    if (reset.state === 'used') return fail('token_invalid', 'err.tokenUsed')
+
+    const invite = await resolveInvitationToken(token)
+    if (!invite) return fail('token_invalid', 'err.tokenInvalid')
+    if (invite.state === 'expired') return fail('invite_expired', 'err.inviteExpired')
+    if (invite.state === 'revoked') return fail('invite_revoked', 'err.inviteRevoked')
+    if (invite.state === 'accepted') return fail('token_invalid', 'err.tokenUsed')
+
+    return ok({
+      kind: 'invite' as const,
+      email: invite.email,
+      fullName: invite.fullName,
+      expiresAt: invite.expiresAt.toISOString(),
+    })
+  },
+)
diff --git a/apps/editor/app/api/auth/reset/confirm/route.ts b/apps/editor/app/api/auth/reset/confirm/route.ts
new file mode 100644
index 000000000..fcfd3d3ec
--- /dev/null
+++ b/apps/editor/app/api/auth/reset/confirm/route.ts
@@ -0,0 +1,114 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { type ResetConfirmResponse, resetConfirmSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { markInvitationAccepted, resolveInvitationToken } from '@panel/lib/auth/invitations'
+import { clearFailures } from '@panel/lib/auth/lockout'
+import { checkPasswordPolicy, hashPassword } from '@panel/lib/auth/password'
+import { markResetUsed, resolveResetToken } from '@panel/lib/auth/reset'
+import { createSession, revokeAllSessions } from '@panel/lib/auth/session'
+import { isEnrolled } from '@panel/lib/auth/totp'
+import { findUserById } from '@panel/lib/auth/users'
+import { exec } from '@panel/lib/db'
+import { deliverPasswordChanged } from '@panel/lib/mail'
+import { getSettings } from '@panel/lib/settings'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/auth/reset/confirm — the shared submit for `#/reset/:token` and
+ * `#/welcome`. Which mode it runs in is decided by the token, not by the client:
+ *
+ *   reset token  -> set password, revoke sessions, land back on sign-in
+ *   invite token -> set password, accept the invite, open a session, and route
+ *                   on to MFA enrolment if the org requires it
+ *
+ * The five policy rules are re-checked here. The client's meter is a courtesy;
+ * this is the check that counts.
+ */
+export const POST = handler(async (request: Request) => {
+  const parsed = await parseBody(request, resetConfirmSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { token, password, revokeOtherSessions, acceptPolicy } = parsed.data
+
+  const reset = await resolveResetToken(token)
+  if (reset.state === 'expired') return fail('token_expired', 'err.tokenExpired')
+  if (reset.state === 'used') return fail('token_invalid', 'err.tokenUsed')
+
+  const invite = reset.state === 'valid' ? null : await resolveInvitationToken(token)
+  if (reset.state !== 'valid') {
+    if (!invite) return fail('token_invalid', 'err.tokenInvalid')
+    if (invite.state === 'expired') return fail('invite_expired', 'err.inviteExpired')
+    if (invite.state === 'revoked') return fail('invite_revoked', 'err.inviteRevoked')
+    if (invite.state === 'accepted') return fail('token_invalid', 'err.tokenUsed')
+  }
+
+  const isInvite = invite !== null
+  const userId = isInvite ? invite.userId : reset.userId!
+
+  const user = await findUserById(userId)
+  if (!user) return fail('token_invalid', 'err.tokenInvalid')
+
+  // The policy-consent checkbox only exists on the first sign-in variant, and it
+  // is a hard gate there — the screen disables the button, and so does this.
+  if (isInvite && !acceptPolicy)
+    return fail('validation', 'err.policyRequired', { field: 'acceptPolicy' })
+
+  const policy = checkPasswordPolicy(password, user.username || user.email)
+  if (!policy.ok) return fail('password_policy', 'err.passwordPolicy', { policy })
+
+  const hash = await hashPassword(password)
+  await exec(
+    `UPDATE users
+        SET password_hash = ?, password_set_at = NOW(), must_change_password = 0,
+            status = CASE WHEN status = 'invited' THEN 'active' ELSE status END
+      WHERE id = ?`,
+    [hash, userId],
+  )
+  await clearFailures(userId)
+
+  if (isInvite) await markInvitationAccepted(invite.invitationId)
+  else await markResetUsed(reset.resetId!)
+
+  // Revoke first, then open the new session, so "sign out all other sessions"
+  // never takes the session this request is about to create with it.
+  const revokedSessions = revokeOtherSessions ? await revokeAllSessions(userId, null) : 0
+
+  await audit({
+    actorUserId: userId,
+    actorLabel: user.email,
+    level: 'info',
+    kind: 'auth',
+    message: isInvite ? 'Invite accepted — password set' : 'Password changed',
+    event: { k: isInvite ? 'inviteAccepted' : 'passwordChanged' },
+    meta: { revokedSessions },
+  })
+
+  // An invitation being accepted is the account's own beginning and needs no
+  // warning; a reset completing is exactly the event whose owner must find out
+  // even when it was not them who did it.
+  if (!isInvite) {
+    await deliverPasswordChanged({ email: user.email, fullName: user.full_name, via: 'reset' })
+  }
+
+  if (!isInvite) {
+    // A reset ends on the sign-in screen: proving control of the inbox is not
+    // the same as signing in, and the OTP step still has to happen.
+    const body: ResetConfirmResponse = { state: 'anonymous', next: 'signin', revokedSessions }
+    return ok(body)
+  }
+
+  const settings = await getSettings()
+  const enrolled = await isEnrolled(userId)
+  const mfaOwed = settings.mfaRequired && !enrolled
+
+  await createSession({ userId, keepSignedIn: false, mfaPending: mfaOwed })
+
+  const body: ResetConfirmResponse = {
+    state: mfaOwed ? 'mfaRequired' : 'signedIn',
+    next: mfaOwed ? 'mfa-setup' : 'console',
+    revokedSessions,
+  }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/auth/reset/route.ts b/apps/editor/app/api/auth/reset/route.ts
new file mode 100644
index 000000000..157f48ac7
--- /dev/null
+++ b/apps/editor/app/api/auth/reset/route.ts
@@ -0,0 +1,54 @@
+import { handler, ok, parseBody } from '@panel/lib/api'
+import { type ResetRequestResponse, resetRequestSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { issueReset } from '@panel/lib/auth/reset'
+import { findUserByEmail } from '@panel/lib/auth/users'
+import { deliverResetLink } from '@panel/lib/mail'
+import { headers } from 'next/headers'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/auth/reset — "send me a reset link".
+ *
+ * Always 202 with the same body. Whether the address exists, is suspended or has
+ * never been registered is not disclosed; the screen says "a link is on its way"
+ * either way. Only the audit trail records which branch actually ran.
+ */
+export const POST = handler(async (request: Request) => {
+  const parsed = await parseBody(request, resetRequestSchema)
+  if (!parsed.ok) return parsed.response
+
+  const email = parsed.data.email.trim().toLowerCase()
+  const user = await findUserByEmail(email)
+  const eligible = user !== null && user.status !== 'suspended' && user.status !== 'inactive'
+
+  if (eligible) {
+    const h = await headers()
+    const { token, expiresAt } = await issueReset(
+      user.id,
+      h.get('x-forwarded-for') ?? h.get('x-real-ip'),
+    )
+    await deliverResetLink({ email: user.email, fullName: user.full_name, token, expiresAt })
+    await audit({
+      actorUserId: user.id,
+      actorLabel: user.email,
+      level: 'info',
+      kind: 'auth',
+      message: 'Password reset link issued',
+      event: { k: 'resetIssued' },
+    })
+  } else {
+    await audit({
+      actorLabel: email.slice(0, 64),
+      level: 'warn',
+      kind: 'auth',
+      message: 'Password reset requested for an address that cannot receive one',
+      event: { k: 'resetUnroutable' },
+    })
+  }
+
+  const body: ResetRequestResponse = { accepted: true }
+  return ok(body, { status: 202 })
+})
diff --git a/apps/editor/app/api/auth/session/route.ts b/apps/editor/app/api/auth/session/route.ts
new file mode 100644
index 000000000..59d808bca
--- /dev/null
+++ b/apps/editor/app/api/auth/session/route.ts
@@ -0,0 +1,49 @@
+import { handler, ok } from '@panel/lib/api'
+import type { SessionResponse } from '@panel/lib/api-contract'
+import { getSession } from '@panel/lib/auth/session'
+import { getSettings } from '@panel/lib/settings'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/auth/session
+ *
+ * The single source of truth for the idle countdown. The client polls it; the
+ * server owns `expiresInSeconds`, so a tampered clock or a stale tab cannot
+ * stretch a session past settings.session_minutes.
+ *
+ * This read deliberately does NOT slide the idle window. It used to, on the
+ * reasoning that a poll from a visible tab is activity — but a visible tab is
+ * not a person. A console left open on an unattended screen polled itself every
+ * 30 seconds and so could never time out, which is the one thing the idle
+ * timeout exists to prevent on a system whose own sign-in screen says
+ * "authorised personnel only".
+ *
+ * Real work still slides it: every other console request goes through
+ * `requirePermission` → `getSession()`, which touches by default. And the idle
+ * dialog's "Stay signed in" has its own endpoint (`/api/auth/session/touch`).
+ * So the window now follows what the person does, not whether a tab is open.
+ */
+export const GET = handler(async () => {
+  const settings = await getSettings()
+  const session = await getSession({ touch: false })
+
+  if (!session) {
+    const body: SessionResponse = {
+      state: 'anonymous',
+      user: null,
+      expiresInSeconds: 0,
+      sessionMinutes: settings.sessionMinutes,
+    }
+    return ok(body)
+  }
+
+  const body: SessionResponse = {
+    state: session.state,
+    user: session.user,
+    expiresInSeconds: Math.max(0, Math.floor((session.expiresAt.getTime() - Date.now()) / 1000)),
+    sessionMinutes: settings.sessionMinutes,
+  }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/auth/session/touch/route.ts b/apps/editor/app/api/auth/session/touch/route.ts
new file mode 100644
index 000000000..1eaf002ce
--- /dev/null
+++ b/apps/editor/app/api/auth/session/touch/route.ts
@@ -0,0 +1,23 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import type { TouchResponse } from '@panel/lib/api-contract'
+import { getSession } from '@panel/lib/auth/session'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/auth/session/touch — the idle dialog's "Stay signed in".
+ *
+ * Deliberately a separate endpoint from the polling GET: mouse movement must not
+ * extend the session while the warning is open (WP4), so only this explicit,
+ * user-initiated call slides the window.
+ */
+export const POST = handler(async () => {
+  const session = await getSession({ touch: true })
+  if (!session) return fail('unauthenticated', 'err.sessionExpired')
+
+  const body: TouchResponse = {
+    expiresInSeconds: Math.max(0, Math.floor((session.expiresAt.getTime() - Date.now()) / 1000)),
+  }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/auth/sessions/[id]/route.ts b/apps/editor/app/api/auth/sessions/[id]/route.ts
new file mode 100644
index 000000000..fd1778e2c
--- /dev/null
+++ b/apps/editor/app/api/auth/sessions/[id]/route.ts
@@ -0,0 +1,47 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { audit } from '@panel/lib/auth/audit'
+import { clearSessionCookie, getSession, revokeSession } from '@panel/lib/auth/session'
+import { queryOne, type RowDataPacket } from '@panel/lib/db'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * DELETE /api/auth/sessions/:id — revoke one device.
+ *
+ * Ownership is re-checked against the row rather than trusted from the URL, so a
+ * guessed session id from another account is a 404, not a revocation.
+ */
+export const DELETE = handler(
+  async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+    const session = await getSession()
+    if (!session || session.mfaPending) return fail('unauthenticated', 'err.sessionExpired')
+
+    const { id } = await ctx.params
+    if (!/^[0-9a-f]{32}$/.test(id)) return fail('not_found', 'err.notFound')
+
+    const target = Buffer.from(id, 'hex')
+    const row = await queryOne<RowDataPacket & { user_id: number }>(
+      'SELECT user_id FROM sessions WHERE id = ? AND revoked_at IS NULL',
+      [target],
+    )
+    if (!row || row.user_id !== session.userId) return fail('not_found', 'err.notFound')
+
+    await revokeSession(target)
+    await audit({
+      actorUserId: session.userId,
+      actorLabel: session.user.email,
+      level: 'info',
+      kind: 'session',
+      message: 'Session revoked',
+      event: { k: 'sessionRevoked' },
+      meta: { self: target.equals(session.id) },
+    })
+
+    // Revoking your own session should also drop the cookie, otherwise the tab
+    // keeps sending a dead id until the next navigation.
+    if (target.equals(session.id)) await clearSessionCookie()
+
+    return ok({ revoked: 1, self: target.equals(session.id) })
+  },
+)
diff --git a/apps/editor/app/api/auth/sessions/route.ts b/apps/editor/app/api/auth/sessions/route.ts
new file mode 100644
index 000000000..d91949030
--- /dev/null
+++ b/apps/editor/app/api/auth/sessions/route.ts
@@ -0,0 +1,15 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import type { SessionsResponse } from '@panel/lib/api-contract'
+import { getSession, listSessions } from '@panel/lib/auth/session'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** GET /api/auth/sessions — the signed-in user's own live sessions. */
+export const GET = handler(async () => {
+  const session = await getSession()
+  if (!session || session.mfaPending) return fail('unauthenticated', 'err.sessionExpired')
+
+  const body: SessionsResponse = { sessions: await listSessions(session.userId, session.id) }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/auth/signin/route.ts b/apps/editor/app/api/auth/signin/route.ts
new file mode 100644
index 000000000..7d86bd29e
--- /dev/null
+++ b/apps/editor/app/api/auth/signin/route.ts
@@ -0,0 +1,141 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { type SignInResponse, signInSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { clearFailures, lockStateFrom, registerFailure } from '@panel/lib/auth/lockout'
+import { fakeVerify, verifyPassword } from '@panel/lib/auth/password'
+import { createSession, getSession, hasTrustedDevice } from '@panel/lib/auth/session'
+import { isEnrolled } from '@panel/lib/auth/totp'
+import { findUserByIdentifier, pendingLabel } from '@panel/lib/auth/users'
+import { exec } from '@panel/lib/db'
+import { getSettings, isSsoEnforced } from '@panel/lib/settings'
+import { cookies } from 'next/headers'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/auth/signin
+ *
+ * Outcomes, in the order the state machine reaches them:
+ *   mfaRequired  — credentials good, OTP step still owed
+ *   firstSignIn  — credentials good, must_change_password set
+ *   signedIn     — fully established session
+ *
+ * Every failure answers `invalid_credentials` with the same message regardless of
+ * whether the account exists, and the miss path still pays the argon2 cost so the
+ * response time does not leak existence either.
+ */
+export const POST = handler(async (request: Request) => {
+  const parsed = await parseBody(request, signInSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { identifier, password, keepSignedIn } = parsed.data
+  const user = await findUserByIdentifier(identifier)
+
+  if (!user) {
+    await fakeVerify()
+    await audit({
+      actorLabel: identifier.slice(0, 64),
+      level: 'warn',
+      kind: 'auth',
+      message: 'Sign-in failed — unknown identifier',
+      event: { k: 'signInUnknown' },
+    })
+    return fail('invalid_credentials', 'err.credentials')
+  }
+
+  const lock = lockStateFrom(user.failed_attempts, user.locked_until)
+  if (lock.locked) {
+    return fail('account_locked', 'err.locked', { retryAfterSeconds: lock.retryAfterSeconds })
+  }
+
+  if (user.status === 'suspended') {
+    await audit({
+      actorUserId: user.id,
+      actorLabel: user.email,
+      level: 'warn',
+      kind: 'auth',
+      message: 'Sign-in refused — account suspended',
+      event: { k: 'signInSuspended' },
+    })
+    return fail('account_suspended', 'err.suspended')
+  }
+  if (user.status === 'inactive') {
+    return fail('account_inactive', 'err.inactive')
+  }
+
+  // An SSO-enforced domain means the password path is closed for this address —
+  // checked before the hash so a correct password still cannot slip through.
+  if (await isSsoEnforced(user.email)) {
+    return fail('sso_required', 'err.ssoRequired', { domain: user.email.split('@')[1] ?? null })
+  }
+
+  // An invited account has no password yet; it can only arrive through the
+  // invite link, which lands on /welcome and sets one.
+  if (user.status === 'invited' || !user.password_hash) {
+    await fakeVerify()
+    return fail('invalid_credentials', 'err.credentials')
+  }
+
+  if (!(await verifyPassword(user.password_hash, password))) {
+    const next = await registerFailure(user.id)
+    await audit({
+      actorUserId: user.id,
+      actorLabel: user.email,
+      level: 'warn',
+      kind: 'auth',
+      message: `Sign-in failed — wrong password (attempt ${next.failedAttempts})`,
+      event: { k: 'signInWrongPassword', p: { attempt: next.failedAttempts } },
+    })
+    return next.locked
+      ? fail('account_locked', 'err.locked', { retryAfterSeconds: next.retryAfterSeconds })
+      : fail('invalid_credentials', 'err.credentials', { attemptsLeft: next.attemptsLeft })
+  }
+
+  await clearFailures(user.id)
+
+  // Remember which language to write to this person in. Mail is composed with
+  // nobody present to ask, and this is the one moment their own preference is
+  // both known and current.
+  const lang = (await cookies()).get('digitaltwin_lang')?.value === 'tr' ? 'tr' : 'en'
+  await exec('UPDATE users SET locale = ? WHERE id = ?', [lang, user.id]).catch(() => {
+    // A database that predates the column must not fail a sign-in over it.
+  })
+
+  const settings = await getSettings()
+  const enrolled = await isEnrolled(user.id)
+  const trusted = enrolled && (await hasTrustedDevice(user.id))
+  // MFA is owed when the org requires it or the user already enrolled — unless a
+  // live trusted-device grant covers this account.
+  const mfaOwed = (settings.mfaRequired || enrolled) && !trusted
+
+  await createSession({ userId: user.id, keepSignedIn, mfaPending: mfaOwed })
+
+  await audit({
+    actorUserId: user.id,
+    actorLabel: user.email,
+    level: 'info',
+    kind: 'auth',
+    message: mfaOwed ? 'Password accepted — awaiting two-factor' : 'Signed in',
+    event: { k: mfaOwed ? 'signInAwaitingMfa' : 'signedIn' },
+    meta: { keepSignedIn, trustedDevice: trusted },
+  })
+
+  if (mfaOwed) {
+    const body: SignInResponse = {
+      state: 'mfaRequired',
+      pendingLabel: pendingLabel(user),
+      enrolmentRequired: !enrolled,
+    }
+    return ok(body)
+  }
+
+  // Session is live from here, so re-reading it gives the client the same
+  // SessionUser shape GET /api/auth/session returns.
+  const session = await getSession({ touch: false })
+  const body: SignInResponse = {
+    state: user.must_change_password === 1 ? 'firstSignIn' : 'signedIn',
+    user: session?.user,
+  }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/auth/signout/route.ts b/apps/editor/app/api/auth/signout/route.ts
new file mode 100644
index 000000000..34dd07450
--- /dev/null
+++ b/apps/editor/app/api/auth/signout/route.ts
@@ -0,0 +1,45 @@
+import { handler, ok, parseBody } from '@panel/lib/api'
+import { type SignOutResponse, signOutSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import {
+  clearSessionCookie,
+  getSession,
+  revokeAllSessions,
+  revokeSession,
+} from '@panel/lib/auth/session'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/auth/signout
+ *
+ * Always answers 200, even without a session — signing out of nothing is not an
+ * error, and a 401 here would make the sign-out button look broken after the
+ * idle timeout has already fired.
+ */
+export const POST = handler(async (request: Request) => {
+  const parsed = await parseBody(request, signOutSchema)
+  if (!parsed.ok) return parsed.response
+
+  const session = await getSession({ touch: false })
+  await clearSessionCookie()
+
+  if (!session) return ok<SignOutResponse>({ revoked: 0 })
+
+  let revoked = 1
+  await revokeSession(session.id)
+  if (parsed.data.allDevices) revoked += await revokeAllSessions(session.userId, session.id)
+
+  await audit({
+    actorUserId: session.userId,
+    actorLabel: session.user.email,
+    level: 'info',
+    kind: 'auth',
+    message: parsed.data.allDevices ? 'Signed out of all devices' : 'Signed out',
+    event: { k: parsed.data.allDevices ? 'signedOutAll' : 'signedOut' },
+    meta: { revoked },
+  })
+
+  return ok<SignOutResponse>({ revoked })
+})
diff --git a/apps/editor/app/api/changelog/route.ts b/apps/editor/app/api/changelog/route.ts
new file mode 100644
index 000000000..b42f34367
--- /dev/null
+++ b/apps/editor/app/api/changelog/route.ts
@@ -0,0 +1,25 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import type { ChangelogResponse } from '@panel/lib/api-contract'
+import { requireSession } from '@panel/lib/auth/guard'
+import { changelogPage } from '@panel/lib/changelog'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/changelog?cursor=&limit=20
+ *
+ * Served from the app backend, never from the client. The upstream fetch is
+ * cached for 60 s here so a room full of consoles costs one request a minute
+ * rather than one per viewer.
+ */
+export const GET = handler(async (request: Request) => {
+  const guard = await requireSession()
+  if (!guard.ok) return fail('unauthenticated', 'err.sessionExpired')
+
+  const params = new URL(request.url).searchParams
+  const page = await changelogPage(params.get('cursor'), Number(params.get('limit') ?? 20) || 20)
+
+  const body: ChangelogResponse = page
+  return ok(body)
+})
diff --git a/apps/editor/app/api/guides/route.ts b/apps/editor/app/api/guides/route.ts
new file mode 100644
index 000000000..e7a637b7b
--- /dev/null
+++ b/apps/editor/app/api/guides/route.ts
@@ -0,0 +1,17 @@
+import type { Lang } from '@panel/lib/types'
+import type { NextRequest } from 'next/server'
+import { guidesFor } from '@/lib/guides-content'
+import { sceneApiJson } from '@/lib/scene-api-security'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/guides?lang=en|tr — the manual as data, so the console renders the
+ * same pages the public site does instead of keeping a second copy that would
+ * drift. Unauthenticated: the documentation is public either way.
+ */
+export function GET(request: NextRequest) {
+  const requested = new URL(request.url).searchParams.get('lang')
+  const lang: Lang = requested === 'tr' ? 'tr' : 'en'
+  return sceneApiJson(request, { groups: guidesFor(lang).groups })
+}
diff --git a/apps/editor/app/api/health/route.ts b/apps/editor/app/api/health/route.ts
index 300230ba3..55a4086ef 100644
--- a/apps/editor/app/api/health/route.ts
+++ b/apps/editor/app/api/health/route.ts
@@ -1,3 +1,33 @@
-export function GET() {
-  return Response.json({ status: 'ok', app: 'editor', timestamp: new Date().toISOString() })
+import { authAvailable } from '@/lib/auth/db'
+import { getSceneStore } from '@/lib/scene-store-server'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * Exercises the scene store so one curl verifies a deploy end to end: which
+ * backend was selected and whether the database actually answers.
+ */
+export async function GET() {
+  try {
+    const store = await getSceneStore()
+    await store.list({ limit: 1 })
+    return Response.json({
+      status: 'ok',
+      app: 'digitaltwin',
+      backend: store.backend,
+      db: 'ok',
+      auth: authAvailable() ? 'ok' : 'disabled',
+      timestamp: new Date().toISOString(),
+    })
+  } catch (error) {
+    return Response.json(
+      {
+        status: 'error',
+        app: 'digitaltwin',
+        error: error instanceof Error ? error.message : String(error),
+        timestamp: new Date().toISOString(),
+      },
+      { status: 503 },
+    )
+  }
 }
diff --git a/apps/editor/app/api/invitations/[id]/resend/route.ts b/apps/editor/app/api/invitations/[id]/resend/route.ts
new file mode 100644
index 000000000..cb36af7fd
--- /dev/null
+++ b/apps/editor/app/api/invitations/[id]/resend/route.ts
@@ -0,0 +1,57 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import type { InvitationResponse } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { resendInvitation } from '@panel/lib/auth/invitations'
+import { queryOne, type RowDataPacket } from '@panel/lib/db'
+import { deliverInvite } from '@panel/lib/mail'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/invitations/:id/resend — new token, resent_count + 1, fresh expiry.
+ * The old token stops working the moment this succeeds.
+ */
+export const POST = handler(async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('edit_users')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const { id } = await ctx.params
+  const issued = await resendInvitation(id)
+  if (!issued) return fail('not_found', 'err.inviteNotResendable')
+
+  const recipient = await queryOne<RowDataPacket & { email: string; full_name: string }>(
+    'SELECT u.email, u.full_name FROM invitations i JOIN users u ON u.id = i.user_id WHERE i.public_id = ?',
+    [id],
+  )
+  // "Resend" that quietly resends nothing is the least useful button in the
+  // console: it is pressed precisely when the first message did not arrive.
+  let mailDelivered = false
+  if (recipient) {
+    mailDelivered = await deliverInvite({
+      email: recipient.email,
+      fullName: recipient.full_name,
+      token: issued.token,
+      expiresAt: issued.invitation.expiresAt,
+    })
+  }
+  if (!mailDelivered) return fail('server_error', 'err.mailFailed')
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'invite',
+    message: `Invitation resent to ${recipient?.email ?? id}`,
+    event: { k: 'inviteResent', p: { email: recipient?.email ?? id } },
+    meta: { invitation: id, resentCount: issued.invitation.resentCount },
+  })
+
+  const body: InvitationResponse = { invitation: issued.invitation }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/invitations/[id]/route.ts b/apps/editor/app/api/invitations/[id]/route.ts
new file mode 100644
index 000000000..bee6cc88d
--- /dev/null
+++ b/apps/editor/app/api/invitations/[id]/route.ts
@@ -0,0 +1,42 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import type { InvitationResponse } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { revokeInvitation } from '@panel/lib/auth/invitations'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * DELETE /api/invitations/:id — revoke a pending invite.
+ *
+ * An already-accepted invite is not revocable: the account exists by then, and
+ * deactivating it is a different action with a different audit meaning.
+ */
+export const DELETE = handler(
+  async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+    const guard = await requirePermission('edit_users')
+    if (!guard.ok) {
+      return guard.reason === 'forbidden'
+        ? fail('forbidden', 'err.forbidden')
+        : fail('unauthenticated', 'err.sessionExpired')
+    }
+
+    const { id } = await ctx.params
+    const invitation = await revokeInvitation(id)
+    if (!invitation) return fail('not_found', 'err.inviteNotRevocable')
+
+    await audit({
+      actorUserId: guard.session.userId,
+      actorLabel: guard.session.user.email,
+      level: 'warn',
+      kind: 'invite',
+      message: 'Invitation revoked',
+      event: { k: 'inviteRevoked' },
+      meta: { invitation: id },
+    })
+
+    const body: InvitationResponse = { invitation }
+    return ok(body)
+  },
+)
diff --git a/apps/editor/app/api/jobs/[id]/cancel/route.ts b/apps/editor/app/api/jobs/[id]/cancel/route.ts
new file mode 100644
index 000000000..a7e9be91e
--- /dev/null
+++ b/apps/editor/app/api/jobs/[id]/cancel/route.ts
@@ -0,0 +1,32 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { cancelJob } from '@panel/lib/jobs'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** POST /api/jobs/:id/cancel — only a queued or running job can be cancelled. */
+export const POST = handler(async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const { id } = await ctx.params
+  const job = await cancelJob(id)
+  if (!job) return fail('conflict', 'err.jobNotCancellable')
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'warn',
+    kind: 'job',
+    message: `Job cancelled: ${id} (${job.kind})`,
+    event: { k: 'jobCancelled', p: { id, kind: job.kind } },
+  })
+
+  return ok({ job })
+})
diff --git a/apps/editor/app/api/jobs/[id]/retry/route.ts b/apps/editor/app/api/jobs/[id]/retry/route.ts
new file mode 100644
index 000000000..44b843df6
--- /dev/null
+++ b/apps/editor/app/api/jobs/[id]/retry/route.ts
@@ -0,0 +1,32 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { retryJob } from '@panel/lib/jobs'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** POST /api/jobs/:id/retry — re-queues a failed or cancelled job. */
+export const POST = handler(async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const { id } = await ctx.params
+  const job = await retryJob(id)
+  if (!job) return fail('conflict', 'err.jobNotRetryable')
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'job',
+    message: `Job re-queued: ${id} (${job.kind}), attempt ${job.attempts + 1}`,
+    event: { k: 'jobRequeued', p: { id, kind: job.kind, attempt: job.attempts + 1 } },
+  })
+
+  return ok({ job })
+})
diff --git a/apps/editor/app/api/jobs/route.ts b/apps/editor/app/api/jobs/route.ts
new file mode 100644
index 000000000..03fa7a53d
--- /dev/null
+++ b/apps/editor/app/api/jobs/route.ts
@@ -0,0 +1,20 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { listJobs, startJobWorker } from '@panel/lib/jobs'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** GET /api/jobs?status= — the queue, newest first. */
+export const GET = handler(async (request: Request) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  startJobWorker()
+  const status = new URL(request.url).searchParams.get('status') ?? undefined
+  return ok({ jobs: await listJobs(status) })
+})
diff --git a/apps/editor/app/api/jobs/stream/route.ts b/apps/editor/app/api/jobs/stream/route.ts
new file mode 100644
index 000000000..8425b9988
--- /dev/null
+++ b/apps/editor/app/api/jobs/stream/route.ts
@@ -0,0 +1,83 @@
+import { getSession } from '@panel/lib/auth/session'
+import { jobsFingerprint, listJobs, startJobWorker } from '@panel/lib/jobs'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+const POLL_MS = 1000
+const HEARTBEAT_MS = 15_000
+
+/**
+ * GET /api/jobs/stream — live queue over SSE, with the client falling back to a
+ * 4 s poll if the stream cannot be opened.
+ *
+ * The payload is only pushed when the fingerprint changes, so an idle queue
+ * costs one heartbeat comment every 15 s rather than a list per second.
+ */
+export async function GET(request: Request): Promise<Response> {
+  const session = await getSession()
+  if (!session || session.mfaPending) {
+    return new Response('unauthorized', { status: 401 })
+  }
+
+  startJobWorker()
+  const encoder = new TextEncoder()
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      let lastFingerprint = ''
+      let lastBeat = Date.now()
+      let closed = false
+
+      const send = (event: string, data: unknown) => {
+        controller.enqueue(encoder.encode(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`))
+      }
+
+      const stop = () => {
+        if (closed) return
+        closed = true
+        clearInterval(timer)
+        try {
+          controller.close()
+        } catch {
+          /* already closed by the client */
+        }
+      }
+
+      // The abort signal is the only reliable close notice — a disconnected
+      // client does not error the enqueue until much later.
+      request.signal.addEventListener('abort', stop)
+
+      const timer = setInterval(() => {
+        if (closed) return
+        void (async () => {
+          try {
+            const fingerprint = await jobsFingerprint()
+            if (fingerprint !== lastFingerprint) {
+              lastFingerprint = fingerprint
+              send('jobs', { jobs: await listJobs() })
+              lastBeat = Date.now()
+              return
+            }
+            if (Date.now() - lastBeat >= HEARTBEAT_MS) {
+              controller.enqueue(encoder.encode(': keep-alive\n\n'))
+              lastBeat = Date.now()
+            }
+          } catch {
+            stop()
+          }
+        })()
+      }, POLL_MS)
+    },
+  })
+
+  return new Response(stream, {
+    headers: {
+      'content-type': 'text/event-stream; charset=utf-8',
+      'cache-control': 'no-cache, no-transform',
+      connection: 'keep-alive',
+      // Proxies that buffer will otherwise hold the whole stream back.
+      'x-accel-buffering': 'no',
+    },
+  })
+}
diff --git a/apps/editor/app/api/keys/[id]/route.ts b/apps/editor/app/api/keys/[id]/route.ts
new file mode 100644
index 000000000..7c7e29733
--- /dev/null
+++ b/apps/editor/app/api/keys/[id]/route.ts
@@ -0,0 +1,34 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { revokeKey } from '@panel/lib/integrations'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** DELETE /api/keys/:id — revokes in place; the row stays for the audit story. */
+export const DELETE = handler(
+  async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+    const guard = await requirePermission('admin_access')
+    if (!guard.ok) {
+      return guard.reason === 'forbidden'
+        ? fail('forbidden', 'err.forbidden')
+        : fail('unauthenticated', 'err.sessionExpired')
+    }
+
+    const { id } = await ctx.params
+    const key = await revokeKey(id)
+    if (!key) return fail('conflict', 'err.keyNotRevocable')
+
+    await audit({
+      actorUserId: guard.session.userId,
+      actorLabel: guard.session.user.email,
+      level: 'warn',
+      kind: 'api_key',
+      message: `API key revoked: ${key.name} (${key.prefix}…)`,
+      event: { k: 'apiKeyRevoked', p: { name: key.name, prefix: key.prefix } },
+    })
+
+    return ok({ key })
+  },
+)
diff --git a/apps/editor/app/api/keys/route.ts b/apps/editor/app/api/keys/route.ts
new file mode 100644
index 000000000..04d8ce1ce
--- /dev/null
+++ b/apps/editor/app/api/keys/route.ts
@@ -0,0 +1,59 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { type CreateKeyResponse, createKeySchema, type KeysResponse } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { createKey, listKeys } from '@panel/lib/integrations'
+import { siteNames } from '@panel/lib/users'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** GET /api/keys — prefixes only; the raw key exists nowhere on this path. */
+export const GET = handler(async () => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const body: KeysResponse = { keys: await listKeys(), sites: await siteNames(), canEdit: true }
+  return ok(body)
+})
+
+/** POST /api/keys — the ONLY response that ever carries the raw key. */
+export const POST = handler(async (request: Request) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, createKeySchema)
+  if (!parsed.ok) return parsed.response
+
+  const key = await createKey({
+    name: parsed.data.name,
+    scope: parsed.data.scope,
+    siteName: parsed.data.siteName ?? null,
+    createdBy: guard.session.userId,
+  })
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'warn',
+    kind: 'api_key',
+    message: `API key created: ${key.name} (${key.scope}) · ${key.siteId ?? 'all sites'}`,
+    event: {
+      k: 'apiKeyCreated',
+      p: { name: key.name, scope: key.scope, site: key.siteId ?? 'all sites' },
+    },
+    // The prefix is safe to record; the secret is not, and never appears here.
+    meta: { key: key.id, prefix: key.prefix },
+  })
+
+  const body: CreateKeyResponse = { key }
+  return ok(body, { status: 201 })
+})
diff --git a/apps/editor/app/api/last-activity/route.ts b/apps/editor/app/api/last-activity/route.ts
new file mode 100644
index 000000000..7c65266e4
--- /dev/null
+++ b/apps/editor/app/api/last-activity/route.ts
@@ -0,0 +1,33 @@
+import { queryOne, type RowDataPacket } from '@panel/lib/db'
+import type { NextRequest } from 'next/server'
+import { sceneApiJson } from '@/lib/scene-api-security'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/last-activity — when the system was last signed in to, and from
+ * what kind of device.
+ *
+ * Deliberately about the system, never about a person: no name, no email, no
+ * address, and no way to ask about a particular account. That last part is
+ * what keeps the sign-in screen from becoming an oracle for "does this
+ * address have an account here" — the answer is the same whoever asks.
+ */
+export async function GET(request: NextRequest) {
+  let last: { at: string; device: string | null } | null = null
+  try {
+    const row = await queryOne<RowDataPacket & { created_at: Date; device: string | null }>(
+      `SELECT created_at, device
+         FROM sessions
+        WHERE mfa_pending = 0
+        ORDER BY created_at DESC
+        LIMIT 1`,
+    )
+    if (row) last = { at: row.created_at.toISOString(), device: row.device }
+  } catch {
+    // Before the console schema exists there is nothing to report, which is a
+    // quiet absence rather than an error on the sign-in screen.
+  }
+
+  return sceneApiJson(request, { last })
+}
diff --git a/apps/editor/app/api/logs/route.ts b/apps/editor/app/api/logs/route.ts
new file mode 100644
index 000000000..f0e200129
--- /dev/null
+++ b/apps/editor/app/api/logs/route.ts
@@ -0,0 +1,64 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { clearDiagnostics, type LogLevel, type LogRange, listLogs } from '@panel/lib/logs'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+const RANGES: LogRange[] = ['hour', 'today', 'week', 'all']
+const LEVELS = ['info', 'warn', 'error']
+
+/** GET /api/logs — runtime diagnostics, cursor-paginated. */
+export const GET = handler(async (request: Request) => {
+  const guard = await requirePermission('view_logs')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.logsRestricted')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const params = new URL(request.url).searchParams
+  const level = params.get('level')
+  const range = params.get('range')
+
+  const page = await listLogs({
+    view: 'diagnostics',
+    search: params.get('search') ?? undefined,
+    level: level && LEVELS.includes(level) ? (level as LogLevel) : 'All',
+    actor: params.get('actor') ?? undefined,
+    range: range && RANGES.includes(range as LogRange) ? (range as LogRange) : 'all',
+    cursor: params.get('cursor') ?? undefined,
+    limit: Number(params.get('limit') ?? 50) || 50,
+  })
+
+  return ok({ ...page, canClear: guard.session.user.permissions.includes('edit_users') })
+})
+
+/**
+ * DELETE /api/logs — clears info-level diagnostics.
+ *
+ * Requires both view_logs and edit_users, as the old panel did. The clear is
+ * itself recorded, with the row count, so the gap in the log has an explanation
+ * sitting next to it.
+ */
+export const DELETE = handler(async () => {
+  const guard = await requirePermission('view_logs', 'edit_users')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const removed = await clearDiagnostics()
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'warn',
+    kind: 'settings',
+    message: `Diagnostics cleared — ${removed} info-level entries removed (warnings, errors and change records kept)`,
+    event: { k: 'diagnosticsCleared', p: { removed } },
+  })
+
+  return ok({ removed })
+})
diff --git a/apps/editor/app/api/mfa/recovery/route.ts b/apps/editor/app/api/mfa/recovery/route.ts
new file mode 100644
index 000000000..82a9ec8e6
--- /dev/null
+++ b/apps/editor/app/api/mfa/recovery/route.ts
@@ -0,0 +1,73 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { type MfaRecoveryResponse, mfaRecoverySchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { clearFailures, readLockState, registerFailure } from '@panel/lib/auth/lockout'
+import { clearMfaPending, getSession } from '@panel/lib/auth/session'
+import { consumeRecoveryCode } from '@panel/lib/auth/totp'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/mfa/recovery — the way in when the authenticator is gone.
+ *
+ * A code is spent whether or not it was the last one: they are single-use by
+ * definition, and the count that comes back is what lets the screen say how
+ * many are left before somebody is locked out for good.
+ */
+export const POST = handler(async (request: Request) => {
+  const parsed = await parseBody(request, mfaRecoverySchema)
+  if (!parsed.ok) return parsed.response
+
+  const session = await getSession({ touch: false })
+  if (!session) return fail('unauthenticated', 'err.sessionExpired')
+
+  // The lock is consulted BEFORE the code is spent. Checking it only on the
+  // failure path — which is what this route used to do — counts misses and
+  // reports "locked" while still admitting whoever eventually guesses right,
+  // so the lock reported a state it did not enforce. Recovery codes are the
+  // one credential that survives losing the authenticator, so an unbounded
+  // guessing budget here is the weakest point in the second factor.
+  const gate = await readLockState(session.userId)
+  if (gate.locked) {
+    return fail('account_locked', 'err.locked', { retryAfterSeconds: gate.retryAfterSeconds })
+  }
+
+  const result = await consumeRecoveryCode(session.userId, parsed.data.code)
+
+  if (!result.ok) {
+    const lock = await registerFailure(session.userId)
+    await audit({
+      actorUserId: session.userId,
+      actorLabel: session.user.email,
+      level: 'warn',
+      kind: 'auth',
+      message: 'Recovery code rejected',
+      event: { k: 'recoveryRejected' },
+    })
+    return lock.locked
+      ? fail('account_locked', 'err.locked', { retryAfterSeconds: lock.retryAfterSeconds })
+      : fail('recovery_invalid', 'err.recoveryInvalid', { attemptsLeft: lock.attemptsLeft })
+  }
+
+  await clearFailures(session.userId)
+  await clearMfaPending(session.id)
+
+  await audit({
+    actorUserId: session.userId,
+    actorLabel: session.user.email,
+    level: 'warn',
+    kind: 'auth',
+    message: 'Signed in with a recovery code',
+    event: { k: 'recoveryUsed' },
+    meta: { remaining: result.remaining },
+  })
+
+  const fresh = await getSession({ touch: false })
+  const body: MfaRecoveryResponse = {
+    state: fresh?.state === 'firstSignIn' ? 'firstSignIn' : 'signedIn',
+    user: fresh?.user,
+    codesRemaining: result.remaining,
+  }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/mfa/setup/route.ts b/apps/editor/app/api/mfa/setup/route.ts
new file mode 100644
index 000000000..217b85164
--- /dev/null
+++ b/apps/editor/app/api/mfa/setup/route.ts
@@ -0,0 +1,40 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import type { MfaSetupResponse } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { getSession } from '@panel/lib/auth/session'
+import { isEnrolled, startEnrolment } from '@panel/lib/auth/totp'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/mfa/setup — mints the secret the enrolment screen renders.
+ *
+ * Reachable with a half-open session on purpose: a person whose organisation
+ * requires two-factor arrives here from sign-in with `mfaPending` still set,
+ * and demanding a complete session to finish becoming complete is a deadlock.
+ * Nothing here grants access — the secret is unconfirmed until /verify.
+ *
+ * Refuses when already enrolled, so a live second factor can never be replaced
+ * by anyone holding only the first one.
+ */
+export const POST = handler(async () => {
+  const session = await getSession({ touch: false })
+  if (!session) return fail('unauthenticated', 'err.sessionExpired')
+
+  if (await isEnrolled(session.userId)) return fail('conflict', 'err.mfaAlreadyEnrolled')
+
+  const { qrDataUrl, manualKey } = await startEnrolment(session.userId, session.user.email)
+
+  await audit({
+    actorUserId: session.userId,
+    actorLabel: session.user.email,
+    level: 'info',
+    kind: 'auth',
+    message: 'Two-factor enrolment started',
+    event: { k: 'mfaEnrolStarted' },
+  })
+
+  const body: MfaSetupResponse = { qrDataUrl, manualKey }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/mfa/verify/route.ts b/apps/editor/app/api/mfa/verify/route.ts
new file mode 100644
index 000000000..9ee92afa4
--- /dev/null
+++ b/apps/editor/app/api/mfa/verify/route.ts
@@ -0,0 +1,109 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { type MfaVerifyResponse, mfaVerifySchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { clearFailures, readLockState, registerFailure } from '@panel/lib/auth/lockout'
+import { clearMfaPending, getSession } from '@panel/lib/auth/session'
+import { confirmEnrolment, isEnrolled, verifyTotp } from '@panel/lib/auth/totp'
+import { exec } from '@panel/lib/db'
+import { deliverTwoFactorChanged } from '@panel/lib/mail'
+import { getSettings } from '@panel/lib/settings'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/mfa/verify — one endpoint, two moments.
+ *
+ * Enrolment: the secret exists but is unconfirmed, so a correct code confirms
+ * it and returns the recovery set. That set is shown once and never again,
+ * which is why it is returned here rather than fetchable later.
+ *
+ * Sign-in: the secret is already confirmed, so a correct code simply clears
+ * `mfa_pending` on the session that is already open.
+ *
+ * A wrong code counts against the same lockout counter as a wrong password —
+ * an attacker holding the password must not get unlimited guesses at the
+ * second factor.
+ */
+export const POST = handler(async (request: Request) => {
+  const parsed = await parseBody(request, mfaVerifySchema)
+  if (!parsed.ok) return parsed.response
+
+  const session = await getSession({ touch: false })
+  if (!session) return fail('unauthenticated', 'err.sessionExpired')
+
+  // The lock is consulted BEFORE the code is checked. Consulting it only on the
+  // failure path — which is what this route used to do — means a locked account
+  // still has its code verified, and a correct guess clears the failures and
+  // signs in: the lock counted misses and announced itself without ever
+  // refusing anyone. The comment above promises the attacker gets no unlimited
+  // guesses at the second factor; this is the line that keeps that promise.
+  const gate = await readLockState(session.userId)
+  if (gate.locked) {
+    return fail('account_locked', 'err.locked', { retryAfterSeconds: gate.retryAfterSeconds })
+  }
+
+  const enrolling = !(await isEnrolled(session.userId))
+
+  const recoveryCodes = enrolling
+    ? await confirmEnrolment(session.userId, session.user.email, parsed.data.code)
+    : null
+  const accepted = enrolling
+    ? recoveryCodes !== null
+    : await verifyTotp(session.userId, session.user.email, parsed.data.code)
+
+  if (!accepted) {
+    const lock = await registerFailure(session.userId)
+    await audit({
+      actorUserId: session.userId,
+      actorLabel: session.user.email,
+      level: 'warn',
+      kind: 'auth',
+      message: 'Two-factor code rejected',
+      event: { k: 'mfaCodeRejected' },
+    })
+    return lock.locked
+      ? fail('account_locked', 'err.locked', { retryAfterSeconds: lock.retryAfterSeconds })
+      : fail('mfa_invalid', 'err.mfaInvalid', { attemptsLeft: lock.attemptsLeft })
+  }
+
+  await clearFailures(session.userId)
+  await clearMfaPending(session.id)
+
+  // "Trust this device" is a grant on this session alone; the window comes from
+  // the organisation's settings rather than being hard-coded here.
+  if (parsed.data.trustDevice) {
+    const { trustedDeviceDays } = await getSettings()
+    await exec('UPDATE sessions SET trusted_until = DATE_ADD(NOW(), INTERVAL ? DAY) WHERE id = ?', [
+      trustedDeviceDays,
+      session.id,
+    ])
+  }
+
+  await audit({
+    actorUserId: session.userId,
+    actorLabel: session.user.email,
+    level: 'info',
+    kind: 'auth',
+    message: enrolling ? 'Two-factor enrolled' : 'Signed in — two-factor cleared',
+    event: { k: enrolling ? 'mfaEnrolled' : 'signedInMfaCleared' },
+    meta: { trustDevice: parsed.data.trustDevice },
+  })
+
+  if (enrolling) {
+    await deliverTwoFactorChanged({
+      email: session.user.email,
+      fullName: session.user.name,
+      enabled: true,
+    })
+  }
+
+  // Re-read so the client gets the session in its post-verification shape.
+  const fresh = await getSession({ touch: false })
+  const body: MfaVerifyResponse = {
+    state: fresh?.state === 'firstSignIn' ? 'firstSignIn' : 'signedIn',
+    user: fresh?.user,
+    ...(recoveryCodes ? { recoveryCodes } : {}),
+  }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/overview/route.ts b/apps/editor/app/api/overview/route.ts
new file mode 100644
index 000000000..c143484b7
--- /dev/null
+++ b/apps/editor/app/api/overview/route.ts
@@ -0,0 +1,68 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import type { OverviewResponse } from '@panel/lib/api-contract'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { queryOne, type RowDataPacket } from '@panel/lib/db'
+import { readHealth } from '@panel/lib/health'
+import { listLogs, recentActors } from '@panel/lib/logs'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/overview — one round trip for the whole landing tab.
+ *
+ * Health, counts, connected users and recent incidents in a single response:
+ * four separate polls on a 4 s timer would be four times the wake-ups for a
+ * screen that always shows all four together.
+ */
+export const GET = handler(async () => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const counts = await queryOne<
+    RowDataPacket & {
+      users: number
+      active_users: number
+      without_2fa: number
+      sites: number
+      active_sites: number
+      signed_in: number
+      queued_jobs: number
+    }
+  >(`
+    SELECT
+      (SELECT COUNT(*) FROM users) AS users,
+      (SELECT COUNT(*) FROM users WHERE status = 'active') AS active_users,
+      (SELECT COUNT(*) FROM users u
+         LEFT JOIN two_factor tf ON tf.user_id = u.id
+        WHERE tf.confirmed_at IS NULL) AS without_2fa,
+      (SELECT COUNT(*) FROM sites WHERE status <> 'archived') AS sites,
+      (SELECT COUNT(*) FROM sites WHERE status = 'active') AS active_sites,
+      (SELECT COUNT(DISTINCT user_id) FROM sessions
+        WHERE revoked_at IS NULL AND expires_at > NOW()) AS signed_in,
+      (SELECT COUNT(*) FROM jobs WHERE status IN ('queued','running')) AS queued_jobs
+  `)
+
+  // Incidents are the warn/error tail of diagnostics — the five most recent.
+  const incidents = await listLogs({ view: 'diagnostics', level: 'All', limit: 20 })
+
+  const body: OverviewResponse = {
+    health: readHealth(),
+    counts: {
+      users: Number(counts?.users ?? 0),
+      activeUsers: Number(counts?.active_users ?? 0),
+      sites: Number(counts?.sites ?? 0),
+      activeSites: Number(counts?.active_sites ?? 0),
+      signedIn: Number(counts?.signed_in ?? 0),
+      without2fa: Number(counts?.without_2fa ?? 0),
+      queuedJobs: Number(counts?.queued_jobs ?? 0),
+    },
+    connected: await recentActors(20),
+    incidents: incidents.entries.filter((e) => e.level !== 'info').slice(0, 5),
+  }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/requests/[id]/approve/route.ts b/apps/editor/app/api/requests/[id]/approve/route.ts
new file mode 100644
index 000000000..27464774e
--- /dev/null
+++ b/apps/editor/app/api/requests/[id]/approve/route.ts
@@ -0,0 +1,113 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { type ApproveRequestResponse, approveRequestSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { issueInvitation } from '@panel/lib/auth/invitations'
+import { exec, queryOne, type RowDataPacket } from '@panel/lib/db'
+import { deliverInvite } from '@panel/lib/mail'
+import { getSettings } from '@panel/lib/settings'
+import { createInvitedUser, getUserDetail } from '@panel/lib/users'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/requests/:id/approve — the "Approve & assign" dialog.
+ *
+ * Approval never adds an account silently: it asks for a role and at least one
+ * site, then creates the user as `invited` and emails the link. The schema
+ * enforces the "at least one site" rule so a mis-wired client cannot create an
+ * account with no access at all.
+ */
+export const POST = handler(async (request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('edit_users')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, approveRequestSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { id } = await ctx.params
+  const row = await queryOne<
+    RowDataPacket & {
+      id: number
+      full_name: string
+      email: string
+      username: string
+      status: string
+    }
+  >('SELECT id, full_name, email, username, status FROM access_requests WHERE public_id = ?', [id])
+
+  if (!row) return fail('not_found', 'err.notFound')
+  if (row.status !== 'pending') return fail('conflict', 'err.requestDecided')
+
+  const settings = await getSettings()
+  if (parsed.data.org === 'external' && !settings.externalUsersAllowed) {
+    return fail('forbidden', 'err.externalNotAllowed')
+  }
+
+  const clash = await queryOne<RowDataPacket & { id: number }>(
+    'SELECT id FROM users WHERE email = ? OR username = ? LIMIT 1',
+    [row.email, row.username],
+  )
+  if (clash) return fail('conflict', 'err.userExists')
+
+  const created = await createInvitedUser(
+    {
+      fullName: row.full_name,
+      username: row.username,
+      email: row.email,
+      role: parsed.data.role,
+      org: parsed.data.org,
+      siteNames: parsed.data.siteNames,
+    },
+    guard.session.userId,
+  )
+
+  const issued = await issueInvitation(created.userId, guard.session.userId)
+  // The account is created and the invitation issued either way — those must
+  // not roll back because a mail server is unreachable. But an invitation
+  // nobody receives is an account nobody can activate, so whether it was
+  // delivered travels back to the administrator who pressed Approve.
+  const mailDelivered = await deliverInvite({
+    email: row.email,
+    fullName: row.full_name,
+    token: issued.token,
+    expiresAt: issued.invitation.expiresAt,
+  })
+
+  await exec(
+    "UPDATE access_requests SET status = 'approved', decided_by = ?, decided_at = NOW() WHERE id = ?",
+    [guard.session.userId, row.id],
+  )
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'request',
+    message: `Access request approved: ${row.email} as ${parsed.data.role}`,
+    event: { k: 'requestApproved', p: { email: row.email, role: parsed.data.role } },
+    meta: { sites: parsed.data.siteNames, org: parsed.data.org },
+  })
+
+  const user = await getUserDetail(created.publicId)
+  if (!user) return fail('server_error', 'err.server')
+
+  if (!mailDelivered) {
+    await audit({
+      actorUserId: guard.session.userId,
+      actorLabel: guard.session.user.email,
+      level: 'error',
+      kind: 'request',
+      message: `Invitation email to ${row.email} was not delivered; the account exists and the invitation is valid`,
+      event: { k: 'requestApproved' as const, p: { email: row.email, role: parsed.data.role } },
+    })
+  }
+
+  const body: ApproveRequestResponse = { user, invitation: issued.invitation, mailDelivered }
+  return ok(body, { status: 201 })
+})
diff --git a/apps/editor/app/api/requests/[id]/reject/route.ts b/apps/editor/app/api/requests/[id]/reject/route.ts
new file mode 100644
index 000000000..dfebc8a9b
--- /dev/null
+++ b/apps/editor/app/api/requests/[id]/reject/route.ts
@@ -0,0 +1,50 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { exec, queryOne, type RowDataPacket } from '@panel/lib/db'
+import { deliverRequestRejected } from '@panel/lib/mail'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/requests/:id/reject
+ *
+ * The row is kept, not deleted: the unique index only constrains *pending*
+ * rows, so a rejected applicant can ask again while the decision stays on record.
+ */
+export const POST = handler(async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('edit_users')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const { id } = await ctx.params
+  const row = await queryOne<
+    RowDataPacket & { id: number; email: string; full_name: string; status: string }
+  >('SELECT id, email, full_name, status FROM access_requests WHERE public_id = ?', [id])
+  if (!row) return fail('not_found', 'err.notFound')
+  if (row.status !== 'pending') return fail('conflict', 'err.requestDecided')
+
+  await exec(
+    "UPDATE access_requests SET status = 'rejected', decided_by = ?, decided_at = NOW() WHERE id = ?",
+    [guard.session.userId, row.id],
+  )
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'warn',
+    kind: 'request',
+    message: `Access request rejected: ${row.email}`,
+    event: { k: 'requestRejected', p: { email: row.email } },
+  })
+
+  // The receipt promised an answer either way; leaving somebody waiting for a
+  // message that never comes is worse than the decision itself.
+  await deliverRequestRejected({ email: row.email, fullName: row.full_name })
+
+  return ok({ rejected: true })
+})
diff --git a/apps/editor/app/api/requests/route.ts b/apps/editor/app/api/requests/route.ts
new file mode 100644
index 000000000..4d12793eb
--- /dev/null
+++ b/apps/editor/app/api/requests/route.ts
@@ -0,0 +1,121 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import {
+  type AccessRequestResponse,
+  accessRequestSchema,
+  type PendingRequestsResponse,
+} from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requireSession } from '@panel/lib/auth/guard'
+import { WORK_DOMAIN } from '@panel/lib/auth/users'
+import { exec, query, queryOne, type RowDataPacket } from '@panel/lib/db'
+import { deliverRequestReceipt } from '@panel/lib/mail'
+import { getSettings } from '@panel/lib/settings'
+import { ulid } from 'ulid'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** GET /api/requests — the pending strip above the user table. */
+export const GET = handler(async () => {
+  const guard = await requireSession()
+  if (!guard.ok) return fail('unauthenticated', 'err.sessionExpired')
+
+  const rows = await query<
+    RowDataPacket & {
+      public_id: string
+      full_name: string
+      email: string
+      username: string
+      department: string
+      requested_role: string
+      note: string | null
+      created_at: Date
+    }
+  >(
+    `SELECT public_id, full_name, email, username, department, requested_role, note, created_at
+       FROM access_requests
+      WHERE status = 'pending'
+      ORDER BY created_at DESC`,
+  )
+
+  const body: PendingRequestsResponse = {
+    requests: rows.map((r) => ({
+      id: r.public_id,
+      fullName: r.full_name,
+      email: r.email,
+      username: r.username,
+      department: r.department,
+      requestedRole: r.requested_role,
+      note: r.note,
+      status: 'pending' as const,
+      createdAt: r.created_at.toISOString(),
+    })),
+  }
+  return ok(body)
+})
+
+/**
+ * POST /api/requests — the public "Request an account" screen.
+ *
+ * The domain suffix is applied server-side from WORK_DOMAIN, not taken from the
+ * request: the form renders it as a fixed adornment, and a client that posts a
+ * full foreign address must not be able to smuggle one past that.
+ *
+ * Duplicate handling is deliberately quiet. An existing account or a pending
+ * request answers exactly like a fresh submission, because this endpoint is
+ * unauthenticated and a distinguishable response turns it into a directory
+ * oracle for "who works here".
+ */
+export const POST = handler(async (request: Request) => {
+  const parsed = await parseBody(request, accessRequestSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { fullName, username, department, requestedRole, note } = parsed.data
+  const email = `${username}${WORK_DOMAIN}`
+
+  const settings = await getSettings()
+  if (!settings.externalUsersAllowed && !email.endsWith(WORK_DOMAIN)) {
+    return fail('forbidden', 'err.externalNotAllowed')
+  }
+
+  const existingUser = await queryOne<RowDataPacket & { id: number }>(
+    'SELECT id FROM users WHERE email = ? OR username = ? LIMIT 1',
+    [email, username],
+  )
+  const existingRequest = await queryOne<RowDataPacket & { public_id: string }>(
+    "SELECT public_id FROM access_requests WHERE email = ? AND status = 'pending' LIMIT 1",
+    [email],
+  )
+
+  const publicId = existingRequest?.public_id ?? ulid()
+
+  if (!existingUser && !existingRequest) {
+    await exec(
+      `INSERT INTO access_requests (public_id, full_name, email, username, department, requested_role, note)
+       VALUES (?, ?, ?, ?, ?, ?, ?)`,
+      [publicId, fullName, email, username, department, requestedRole, note ?? null],
+    )
+    await deliverRequestReceipt({ email, fullName })
+    await audit({
+      actorLabel: email.slice(0, 64),
+      level: 'info',
+      kind: 'request',
+      message: `Account requested — ${department} / ${requestedRole}`,
+      event: { k: 'accountRequested', p: { department, role: requestedRole } },
+      meta: { request: publicId },
+    })
+  } else {
+    await audit({
+      actorLabel: email.slice(0, 64),
+      level: 'info',
+      kind: 'request',
+      message: existingUser
+        ? 'Account request ignored — an account already exists'
+        : 'Account request ignored — a request is already pending',
+      event: { k: existingUser ? 'requestIgnoredExists' : 'requestIgnoredPending' },
+    })
+  }
+
+  const body: AccessRequestResponse = { request: { id: publicId, email, status: 'pending' } }
+  return ok(body, { status: 202 })
+})
diff --git a/apps/editor/app/api/roles/[name]/route.ts b/apps/editor/app/api/roles/[name]/route.ts
new file mode 100644
index 000000000..583d407fa
--- /dev/null
+++ b/apps/editor/app/api/roles/[name]/route.ts
@@ -0,0 +1,106 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { type DeleteRoleResponse, updateRoleSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { allRoles, invalidateRolesCache } from '@panel/lib/auth/roles'
+import { exec, transaction } from '@panel/lib/db'
+import { PERMISSIONS, type Permission } from '@panel/lib/types'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+function isPermission(value: string): value is Permission {
+  return (PERMISSIONS as readonly string[]).includes(value)
+}
+
+/**
+ * PUT /api/roles/:name — toggles in the permission matrix write straight here.
+ *
+ * System roles (Admin, Supervisor, Editor, Viewer) are defined in code and are
+ * not editable: letting someone strip `admin_access` off Admin is a one-click
+ * way to lock the whole tenant out.
+ */
+export const PUT = handler(async (request: Request, ctx: { params: Promise<{ name: string }> }) => {
+  const guard = await requirePermission('edit_roles')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, updateRoleSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { name } = await ctx.params
+  const role = (await allRoles()).find((r) => r.name === decodeURIComponent(name))
+  if (!role) return fail('not_found', 'err.notFound')
+  if (role.isSystem) return fail('forbidden', 'err.systemRoleLocked')
+
+  const permissions = parsed.data.permissions.filter(isPermission)
+  await exec('UPDATE roles SET permissions = CAST(? AS JSON) WHERE name = ?', [
+    JSON.stringify(permissions),
+    role.name,
+  ])
+  invalidateRolesCache()
+
+  const added = permissions.filter((p) => !role.permissions.includes(p))
+  const removed = role.permissions.filter((p) => !permissions.includes(p))
+  // Built once: the stored sentence and the rendered one must not drift apart.
+  const permissionDelta =
+    (added.length ? ` · +${added.join(', ')}` : '') +
+    (removed.length ? ` · -${removed.join(', ')}` : '')
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'role_change',
+    message: `Permissions updated for ${role.name}${permissionDelta}`,
+    event: { k: 'rolePermissions', p: { name: role.name, changes: permissionDelta } },
+    meta: { added, removed },
+  })
+
+  return ok({ name: role.name, permissions })
+})
+
+/** DELETE /api/roles/:name — custom roles only; their users fall back to Viewer. */
+export const DELETE = handler(
+  async (_request: Request, ctx: { params: Promise<{ name: string }> }) => {
+    const guard = await requirePermission('edit_roles')
+    if (!guard.ok) {
+      return guard.reason === 'forbidden'
+        ? fail('forbidden', 'err.forbidden')
+        : fail('unauthenticated', 'err.sessionExpired')
+    }
+
+    const { name } = await ctx.params
+    const role = (await allRoles()).find((r) => r.name === decodeURIComponent(name))
+    if (!role) return fail('not_found', 'err.notFound')
+    if (role.isSystem) return fail('forbidden', 'err.systemRoleLocked')
+
+    // Reassign inside the transaction so no account is ever left pointing at a
+    // role that no longer exists — an unknown role grants nothing at all.
+    const reassigned = await transaction(async (cx) => {
+      const [res] = await cx.execute(
+        "UPDATE users SET global_role = 'Viewer' WHERE global_role = ?",
+        [role.name],
+      )
+      await cx.execute("UPDATE assignments SET role = 'Viewer' WHERE role = ?", [role.name])
+      await cx.execute('DELETE FROM roles WHERE name = ?', [role.name])
+      return (res as { affectedRows: number }).affectedRows
+    })
+    invalidateRolesCache()
+
+    await audit({
+      actorUserId: guard.session.userId,
+      actorLabel: guard.session.user.email,
+      level: 'warn',
+      kind: 'role_change',
+      message: `Role deleted: ${role.name} — ${reassigned} account(s) reassigned to Viewer`,
+      event: { k: 'roleDeleted', p: { name: role.name, count: reassigned } },
+    })
+
+    const body: DeleteRoleResponse = { reassigned }
+    return ok(body)
+  },
+)
diff --git a/apps/editor/app/api/roles/route.ts b/apps/editor/app/api/roles/route.ts
new file mode 100644
index 000000000..053f9aeed
--- /dev/null
+++ b/apps/editor/app/api/roles/route.ts
@@ -0,0 +1,75 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { createRoleSchema, type RolesFullResponse } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { allRoles, invalidateRolesCache } from '@panel/lib/auth/roles'
+import { exec, query, type RowDataPacket } from '@panel/lib/db'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+async function rolesWithCounts(canEdit: boolean): Promise<RolesFullResponse> {
+  const roles = await allRoles()
+  const counts = await query<RowDataPacket & { global_role: string; n: number }>(
+    'SELECT global_role, COUNT(*) AS n FROM users GROUP BY global_role',
+  )
+  const byName = new Map(counts.map((c) => [c.global_role, c.n]))
+
+  return {
+    roles: roles.map((r) => ({ ...r, userCount: byName.get(r.name) ?? 0 })),
+    canEdit,
+  }
+}
+
+/** GET /api/roles — the permission matrix and the role cards read from here. */
+export const GET = handler(async () => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+  return ok(await rolesWithCounts(guard.session.user.permissions.includes('edit_roles')))
+})
+
+/**
+ * POST /api/roles — adds a custom role.
+ *
+ * Starts with `view_projects` only, matching the old panel: a new role that
+ * arrives with no permissions looks broken, and one that arrives with many is a
+ * privilege accident waiting to happen.
+ */
+export const POST = handler(async (request: Request) => {
+  const guard = await requirePermission('edit_roles')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, createRoleSchema)
+  if (!parsed.ok) return parsed.response
+
+  const name = parsed.data.name
+  const existing = await allRoles()
+  if (existing.some((r) => r.name.toLocaleLowerCase('tr') === name.toLocaleLowerCase('tr'))) {
+    return fail('conflict', 'err.roleExists')
+  }
+
+  await exec('INSERT INTO roles (name, permissions, is_system) VALUES (?, CAST(? AS JSON), 0)', [
+    name,
+    JSON.stringify(['view_projects']),
+  ])
+  invalidateRolesCache()
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'role_change',
+    message: `Role created: ${name}`,
+    event: { k: 'roleCreated', p: { name } },
+  })
+
+  return ok(await rolesWithCounts(true), { status: 201 })
+})
diff --git a/apps/editor/app/api/scenes/[id]/events/route.ts b/apps/editor/app/api/scenes/[id]/events/route.ts
index 2167a12b2..9b043f90e 100644
--- a/apps/editor/app/api/scenes/[id]/events/route.ts
+++ b/apps/editor/app/api/scenes/[id]/events/route.ts
@@ -1,3 +1,5 @@
+import { authorizeSceneRead } from '@/lib/auth/guard'
+import { publishedSceneIds } from '@/lib/auth/site-scenes'
 import {
   guardSceneApiRequest,
   sceneApiJson,
@@ -35,6 +37,14 @@ export async function GET(request: Request, { params }: RouteParams) {
     return sceneApiJson(request, { error: 'not_found' }, { status: 404 })
   }
 
+  // Same rule as the single-scene read: this stream carries the full graph of
+  // every revision, so an unauthorised subscriber would get the drawing plus
+  // a live feed of the work as it happens.
+  const auth = await authorizeSceneRead(scene.ownerId ?? null, {
+    published: (await publishedSceneIds()).has(id),
+  })
+  if (!auth.ok) return sceneApiJson(request, { error: auth.error }, { status: auth.status })
+
   const url = new URL(request.url)
   const afterFromQuery = Number.parseInt(url.searchParams.get('after') ?? '0', 10)
   const afterFromHeader = Number.parseInt(request.headers.get('Last-Event-ID') ?? '0', 10)
diff --git a/apps/editor/app/api/scenes/[id]/route.ts b/apps/editor/app/api/scenes/[id]/route.ts
index 1712ad4ad..1b795f0ad 100644
--- a/apps/editor/app/api/scenes/[id]/route.ts
+++ b/apps/editor/app/api/scenes/[id]/route.ts
@@ -1,5 +1,7 @@
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { authorizeSceneMutation, authorizeSceneRead } from '@/lib/auth/guard'
+import { publishedSceneIds } from '@/lib/auth/site-scenes'
 import { apiGraphSchema } from '@/lib/graph-schema'
 import {
   guardSceneApiRequest,
@@ -40,6 +42,12 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
     if (!scene) {
       return sceneApiJson(request, { error: 'not_found' }, { status: 404 })
     }
+    // The origin guard above proves where the request came from, not who sent
+    // it. Without this a scene id was enough to read the drawing.
+    const auth = await authorizeSceneRead(scene.ownerId ?? null, {
+      published: (await publishedSceneIds()).has(id),
+    })
+    if (!auth.ok) return sceneApiJson(request, { error: auth.error }, { status: auth.status })
     return sceneApiJson(request, scene, {
       headers: { ETag: `"${scene.version}"` },
     })
@@ -83,6 +91,8 @@ export async function PUT(request: NextRequest, { params }: RouteParams) {
     if (!existing) {
       return sceneApiJson(request, { error: 'not_found' }, { status: 404 })
     }
+    const auth = await authorizeSceneMutation(existing.ownerId)
+    if (!auth.ok) return sceneApiJson(request, { error: auth.error }, { status: auth.status })
     const meta = await operations.saveScene({
       id,
       name: parsed.data.name ?? existing.name,
@@ -110,6 +120,12 @@ export async function DELETE(request: NextRequest, { params }: RouteParams) {
 
   const operations = await getSceneOperations()
   try {
+    const existing = await operations.loadStoredScene(id)
+    if (!existing) {
+      return sceneApiJson(request, { error: 'not_found' }, { status: 404 })
+    }
+    const auth = await authorizeSceneMutation(existing.ownerId)
+    if (!auth.ok) return sceneApiJson(request, { error: auth.error }, { status: auth.status })
     const removed = await operations.deleteStoredScene(id, { expectedVersion: ifMatch })
     if (!removed) {
       return sceneApiJson(request, { error: 'not_found' }, { status: 404 })
@@ -151,6 +167,12 @@ export async function PATCH(request: NextRequest, { params }: RouteParams) {
 
   const operations = await getSceneOperations()
   try {
+    const existing = await operations.loadStoredScene(id)
+    if (!existing) {
+      return sceneApiJson(request, { error: 'not_found' }, { status: 404 })
+    }
+    const auth = await authorizeSceneMutation(existing.ownerId)
+    if (!auth.ok) return sceneApiJson(request, { error: auth.error }, { status: auth.status })
     const meta = await operations.renameStoredScene(id, parsed.data.name, { expectedVersion })
     return sceneApiJson(request, meta, {
       headers: { ETag: `"${meta.version}"` },
diff --git a/apps/editor/app/api/scenes/route.ts b/apps/editor/app/api/scenes/route.ts
index 01ffc3ba8..5f2be1aa3 100644
--- a/apps/editor/app/api/scenes/route.ts
+++ b/apps/editor/app/api/scenes/route.ts
@@ -1,5 +1,7 @@
 import type { NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { authAvailable } from '@/lib/auth/db'
+import { canEdit, getSessionUser } from '@/lib/auth/session'
 import { apiGraphSchema } from '@/lib/graph-schema'
 import { guardSceneApiRequest, sceneApiJson, sceneApiPreflight } from '@/lib/scene-api-security'
 import { getSceneOperations } from '@/lib/scene-store-server'
@@ -40,9 +42,19 @@ export async function GET(request: NextRequest) {
     )
   }
 
+  // With auth on, a signed-in user sees only their own scenes and a signed-out
+  // caller sees none. Without auth (SQLite dev), the list stays unfiltered.
+  let ownerId: string | undefined
+  if (authAvailable()) {
+    const user = await getSessionUser()
+    if (!user) return sceneApiJson(request, { scenes: [] })
+    ownerId = user.id
+  }
+
   const operations = await getSceneOperations()
   const scenes = await operations.listScenes({
     projectId: parsed.data.projectId,
+    ownerId,
     limit: parsed.data.limit,
   })
   return sceneApiJson(request, { scenes })
@@ -52,6 +64,17 @@ export async function POST(request: NextRequest) {
   const guard = guardSceneApiRequest(request)
   if (guard) return guard
 
+  // With auth on, creating a scene requires being signed in with an editing
+  // role, and stamps the owner. Without auth (SQLite dev), creation stays
+  // open and unowned.
+  let ownerId: string | undefined
+  if (authAvailable()) {
+    const user = await getSessionUser()
+    if (!user) return sceneApiJson(request, { error: 'auth_required' }, { status: 401 })
+    if (!canEdit(user)) return sceneApiJson(request, { error: 'forbidden' }, { status: 403 })
+    ownerId = user.id
+  }
+
   let body: unknown
   try {
     body = await request.json()
@@ -78,6 +101,7 @@ export async function POST(request: NextRequest) {
       id: parsed.data.id,
       name: parsed.data.name,
       projectId: parsed.data.projectId ?? null,
+      ownerId,
       graph: parsed.data.graph as never,
       thumbnailUrl: parsed.data.thumbnailUrl ?? null,
     })
diff --git a/apps/editor/app/api/settings/route.ts b/apps/editor/app/api/settings/route.ts
new file mode 100644
index 000000000..a9fc82a4d
--- /dev/null
+++ b/apps/editor/app/api/settings/route.ts
@@ -0,0 +1,109 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { type SettingsResponse, updateSettingsSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { exec } from '@panel/lib/db'
+import { getSettings, invalidateSettingsCache } from '@panel/lib/settings'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * The single settings row. The console edits it; nothing here enforces it —
+ * session length is applied in the session layer, invite expiry when an invite
+ * is issued and checked, the MFA requirement in the sign-in flow. Section 08 is
+ * explicit that enforcement lives on the server, not in this screen.
+ */
+export const GET = handler(async () => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const body: SettingsResponse = {
+    settings: await getSettings(),
+    canEdit: guard.session.user.permissions.includes('admin_access'),
+  }
+  return ok(body)
+})
+
+const COLUMNS: Record<string, string> = {
+  sessionMinutes: 'session_minutes',
+  keepSignedInAllowed: 'keep_signed_in_allowed',
+  keepSignedInDays: 'keep_signed_in_days',
+  trustedDeviceDays: 'trusted_device_days',
+  concurrentSessionLimit: 'concurrent_session_limit',
+  mfaRequired: 'mfa_required',
+  externalUsersAllowed: 'external_users_allowed',
+  inviteExpiryDays: 'invite_expiry_days',
+}
+
+export const PUT = handler(async (request: Request) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, updateSettingsSchema)
+  if (!parsed.ok) return parsed.response
+
+  const before = await getSettings()
+  const sets: string[] = []
+  const params: unknown[] = []
+
+  for (const [key, column] of Object.entries(COLUMNS)) {
+    const value = (parsed.data as Record<string, unknown>)[key]
+    if (value === undefined) continue
+    sets.push(`${column} = ?`)
+    params.push(typeof value === 'boolean' ? (value ? 1 : 0) : value)
+  }
+
+  if (parsed.data.ssoEnforcedDomains !== undefined) {
+    // Normalised to a leading @ so the sign-in suffix check has one shape to match.
+    const domains = parsed.data.ssoEnforcedDomains.map((d) =>
+      d.startsWith('@') ? d.toLowerCase() : `@${d.toLowerCase()}`,
+    )
+    sets.push('sso_enforced_domains = CAST(? AS JSON)')
+    params.push(JSON.stringify(domains))
+  }
+
+  if (sets.length === 0) return ok<SettingsResponse>({ settings: before, canEdit: true })
+
+  sets.push('updated_by = ?')
+  params.push(guard.session.userId)
+  await exec(`UPDATE settings SET ${sets.join(', ')} WHERE id = 1`, params)
+  invalidateSettingsCache()
+
+  const after = await getSettings()
+  const read = (source: Record<string, unknown>, key: string) => JSON.stringify(source[key])
+  const changed = Object.keys(parsed.data)
+    .filter(
+      (key) =>
+        read(before as unknown as Record<string, unknown>, key) !==
+        read(after as unknown as Record<string, unknown>, key),
+    )
+    .map(
+      (key) =>
+        `${key}: ${read(before as unknown as Record<string, unknown>, key)} → ` +
+        `${read(after as unknown as Record<string, unknown>, key)}`,
+    )
+
+  if (changed.length > 0) {
+    await audit({
+      actorUserId: guard.session.userId,
+      actorLabel: guard.session.user.email,
+      level: 'warn',
+      kind: 'settings',
+      message: `Settings changed — ${changed.join(', ')}`,
+      event: { k: 'settingsChanged', p: { changes: changed.join(', ') } },
+      meta: parsed.data,
+    })
+  }
+
+  const body: SettingsResponse = { settings: after, canEdit: true }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/settings/test-mail/route.ts b/apps/editor/app/api/settings/test-mail/route.ts
new file mode 100644
index 000000000..74d5fa6e0
--- /dev/null
+++ b/apps/editor/app/api/settings/test-mail/route.ts
@@ -0,0 +1,69 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { deliverTestMessage } from '@panel/lib/mail'
+import { z } from 'zod'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+const schema = z.object({
+  /** Defaults to the administrator's own address — the safe thing to test with. */
+  to: z.string().trim().email().max(320).optional(),
+  lang: z.enum(['en', 'tr']).optional(),
+})
+
+/**
+ * POST /api/settings/test-mail
+ *
+ * Proves delivery end to end without waiting for somebody to forget a
+ * password. Restricted to `admin_access`: an open endpoint that sends mail to
+ * an arbitrary address from the organisation's own domain is a spam relay.
+ */
+export const POST = handler(async (request: Request) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, schema)
+  if (!parsed.ok) return parsed.response
+
+  const to = parsed.data.to ?? guard.session.user.email
+
+  // Unlike every other message, a failure here is the answer, not a nuisance:
+  // this endpoint exists to tell an administrator whether mail actually leaves
+  // the building. Reporting "sent" after a timeout would be worse than useless.
+  try {
+    await deliverTestMessage({
+      email: to,
+      fullName: guard.session.user.name,
+      lang: parsed.data.lang,
+    })
+  } catch (err) {
+    const reason = err instanceof Error ? err.message : String(err)
+    console.error(`[mail] test message to ${to} failed:`, err)
+    await audit({
+      actorUserId: guard.session.userId,
+      actorLabel: guard.session.user.email,
+      level: 'error',
+      kind: 'settings',
+      message: `Test message to ${to} failed: ${reason}`,
+      event: { k: 'settingsChanged', p: { changes: `test mail failed → ${to}` } },
+    })
+    return fail('server_error', 'err.mailFailed', { reason })
+  }
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'settings',
+    message: `Test message sent to ${to}`,
+    event: { k: 'settingsChanged', p: { changes: `test mail → ${to}` } },
+  })
+
+  return ok({ sent: true, to })
+})
diff --git a/apps/editor/app/api/showcase/route.ts b/apps/editor/app/api/showcase/route.ts
new file mode 100644
index 000000000..45aa4beb9
--- /dev/null
+++ b/apps/editor/app/api/showcase/route.ts
@@ -0,0 +1,41 @@
+import { query, type RowDataPacket } from '@panel/lib/db'
+import type { NextRequest } from 'next/server'
+import { sceneApiJson } from '@/lib/scene-api-security'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/showcase — the published projects, for the sign-in screen's hero.
+ *
+ * Deliberately unauthenticated and deliberately thin: only the name and a
+ * size figure of projects an administrator has already approved for the
+ * whole organisation. Drafts never appear here, and nothing identifying a
+ * person leaves the building.
+ */
+export async function GET(request: NextRequest) {
+  let sites: { name: string; footprintM2: number | null; nodeCount: number | null }[] = []
+  try {
+    const rows = await query<
+      RowDataPacket & { name: string; footprint_m2: number | null; node_count: number | null }
+    >(
+      `SELECT s.name, s.footprint_m2, sc.node_count
+         FROM sites s
+         LEFT JOIN scenes sc
+           ON CONVERT(sc.id USING utf8mb4) COLLATE utf8mb4_unicode_ci
+            = CONVERT(s.scene_id USING utf8mb4) COLLATE utf8mb4_unicode_ci
+        WHERE s.status = 'active'
+        ORDER BY s.name
+        LIMIT 8`,
+    )
+    sites = rows.map((r) => ({
+      name: r.name,
+      footprintM2: r.footprint_m2,
+      nodeCount: r.node_count,
+    }))
+  } catch {
+    // Before the first migration there is no sites table; an empty hero is
+    // the right answer, not a 500 on the sign-in screen.
+  }
+
+  return sceneApiJson(request, { sites })
+}
diff --git a/apps/editor/app/api/sites/[id]/archive/route.ts b/apps/editor/app/api/sites/[id]/archive/route.ts
new file mode 100644
index 000000000..94bc36392
--- /dev/null
+++ b/apps/editor/app/api/sites/[id]/archive/route.ts
@@ -0,0 +1,45 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { exec, queryOne, type RowDataPacket } from '@panel/lib/db'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/sites/:id/archive
+ *
+ * Archiving stops access without deleting anything — assignments stay on the
+ * row, so a restore hands everyone their access back instead of requiring the
+ * whole grant list to be rebuilt by hand.
+ */
+export const POST = handler(async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const { id } = await ctx.params
+  const row = await queryOne<RowDataPacket & { id: number; name: string; status: string }>(
+    'SELECT id, name, status FROM sites WHERE public_id = ?',
+    [id],
+  )
+  if (!row) return fail('not_found', 'err.notFound')
+  if (row.status === 'archived') return fail('conflict', 'err.siteStateUnchanged')
+
+  await exec("UPDATE sites SET status = 'archived' WHERE id = ?", [row.id])
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'warn',
+    kind: 'site',
+    message: `Site archived: ${row.name}`,
+    event: { k: 'siteArchived', p: { name: row.name } },
+    meta: { site: id, from: row.status, to: 'archived' },
+  })
+
+  return ok({ status: 'archived' })
+})
diff --git a/apps/editor/app/api/sites/[id]/restore/route.ts b/apps/editor/app/api/sites/[id]/restore/route.ts
new file mode 100644
index 000000000..174dce42f
--- /dev/null
+++ b/apps/editor/app/api/sites/[id]/restore/route.ts
@@ -0,0 +1,45 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { exec, queryOne, type RowDataPacket } from '@panel/lib/db'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/sites/:id/restore
+ *
+ * Archiving stops access without deleting anything — assignments stay on the
+ * row, so a restore hands everyone their access back instead of requiring the
+ * whole grant list to be rebuilt by hand.
+ */
+export const POST = handler(async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const { id } = await ctx.params
+  const row = await queryOne<RowDataPacket & { id: number; name: string; status: string }>(
+    'SELECT id, name, status FROM sites WHERE public_id = ?',
+    [id],
+  )
+  if (!row) return fail('not_found', 'err.notFound')
+  if (row.status === 'active') return fail('conflict', 'err.siteStateUnchanged')
+
+  await exec("UPDATE sites SET status = 'active' WHERE id = ?", [row.id])
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'site',
+    message: `Site restored: ${row.name}`,
+    event: { k: 'siteRestored', p: { name: row.name } },
+    meta: { site: id, from: row.status, to: 'active' },
+  })
+
+  return ok({ status: 'active' })
+})
diff --git a/apps/editor/app/api/sites/route.ts b/apps/editor/app/api/sites/route.ts
new file mode 100644
index 000000000..5fee6a853
--- /dev/null
+++ b/apps/editor/app/api/sites/route.ts
@@ -0,0 +1,116 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { createSiteSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { exec, query, queryOne, type RowDataPacket } from '@panel/lib/db'
+import { enqueueJob, startJobWorker } from '@panel/lib/jobs'
+import type { Site } from '@panel/lib/types'
+import { ulid } from 'ulid'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** GET /api/sites — every site, archived ones included, newest name order. */
+export const GET = handler(async () => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const rows = await query<
+    RowDataPacket & {
+      public_id: string
+      name: string
+      status: 'active' | 'setup' | 'archived'
+      storage_slots: number | null
+      picking_slots: number | null
+      footprint_m2: number | null
+      created_by_email: string | null
+      created_at: Date
+      user_count: number
+      scene_id: string | null
+    }
+  >(
+    `SELECT s.public_id, s.name, s.status, s.storage_slots, s.picking_slots, s.footprint_m2,
+            u.email AS created_by_email, s.created_at, s.scene_id,
+            (SELECT COUNT(*) FROM assignments a WHERE a.site_id = s.id) AS user_count
+       FROM sites s
+       LEFT JOIN users u ON u.id = s.created_by
+      ORDER BY s.name`,
+  )
+
+  const sites: Site[] = rows.map((r) => ({
+    id: r.public_id,
+    name: r.name,
+    status: r.status,
+    storageSlots: r.storage_slots ?? undefined,
+    pickingSlots: r.picking_slots ?? undefined,
+    footprintM2: r.footprint_m2 ?? undefined,
+    createdBy: r.created_by_email ?? '—',
+    createdAt: r.created_at.toISOString(),
+    userCount: r.user_count,
+    sceneId: r.scene_id,
+  }))
+
+  return ok({ sites, canEdit: guard.session.user.permissions.includes('admin_access') })
+})
+
+/**
+ * POST /api/sites — creates the site in `setup` and queues its provisioning.
+ *
+ * The site is NOT active on return: a provisioning job carries it there, which
+ * is what makes the "Setting up" card state and the job queue two views of one
+ * fact rather than two independent fictions.
+ */
+export const POST = handler(async (request: Request) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, createSiteSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { name, template, footprintM2 } = parsed.data
+
+  const clash = await queryOne<RowDataPacket & { id: number }>(
+    'SELECT id FROM sites WHERE name = ?',
+    [name],
+  )
+  if (clash) return fail('conflict', 'err.siteExists')
+
+  const publicId = ulid()
+  await exec(
+    `INSERT INTO sites (public_id, name, status, footprint_m2, created_by)
+     VALUES (?, ?, 'setup', ?, ?)`,
+    [publicId, name, footprintM2 ?? null, guard.session.userId],
+  )
+
+  const row = await queryOne<RowDataPacket & { id: number }>(
+    'SELECT id FROM sites WHERE public_id = ?',
+    [publicId],
+  )
+  const jobId = await enqueueJob({
+    kind: 'site_provision',
+    siteId: row?.id ?? null,
+    payload: { template, footprintM2: footprintM2 ?? null },
+    queuedBy: guard.session.userId,
+  })
+  startJobWorker()
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'site',
+    message: `Site created: ${name} (${template}) — provisioning queued as ${jobId}`,
+    event: { k: 'siteCreated', p: { name, template, jobId } },
+    meta: { site: publicId, job: jobId },
+  })
+
+  return ok({ site: publicId, job: jobId }, { status: 201 })
+})
diff --git a/apps/editor/app/api/telemetry/route.ts b/apps/editor/app/api/telemetry/route.ts
new file mode 100644
index 000000000..97652b5e4
--- /dev/null
+++ b/apps/editor/app/api/telemetry/route.ts
@@ -0,0 +1,45 @@
+import { handler, ok, parseBody } from '@panel/lib/api'
+import { telemetrySchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { getSession } from '@panel/lib/auth/session'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/telemetry — the browser error sink.
+ *
+ * Recorded with actor_label 'browser', as the contract specifies, which is also
+ * what keeps it out of the "connected users" panel. The client suppresses
+ * repeats for 5 s; this side additionally refuses to trust anything in the
+ * payload beyond its shape — the message is truncated and never interpolated
+ * into anything but the log text.
+ *
+ * Always answers 202, even unauthenticated: an error sink that fails when the
+ * session has expired misses exactly the errors worth having.
+ */
+export const POST = handler(async (request: Request) => {
+  const parsed = await parseBody(request, telemetrySchema)
+  if (!parsed.ok) return ok({ accepted: false }, { status: 202 })
+
+  const session = await getSession({ touch: false })
+  const { message, source, line, column, stack } = parsed.data
+
+  await audit({
+    actorUserId: session?.userId ?? null,
+    actorLabel: 'browser',
+    level: 'error',
+    kind: 'telemetry',
+    message: `Browser error captured: ${message}`.slice(0, 1024),
+    event: { k: 'browserError', p: { message: message.slice(0, 900) } },
+    meta: {
+      source: source?.slice(0, 512) ?? null,
+      line: line ?? null,
+      column: column ?? null,
+      stack: stack?.slice(0, 2000) ?? null,
+      user: session?.user.email ?? null,
+    },
+  })
+
+  return ok({ accepted: true }, { status: 202 })
+})
diff --git a/apps/editor/app/api/users/[id]/assignments/route.ts b/apps/editor/app/api/users/[id]/assignments/route.ts
new file mode 100644
index 000000000..f12fdbaad
--- /dev/null
+++ b/apps/editor/app/api/users/[id]/assignments/route.ts
@@ -0,0 +1,62 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { assignmentsSchema, type UserDetailResponse } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { allRoles } from '@panel/lib/auth/roles'
+import { findInternalId, getUserDetail, setAssignments, siteNames } from '@panel/lib/users'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * PUT /api/users/:id/assignments — the drawer's site-by-site role list.
+ *
+ * Every change lands in the audit trail with its before/after, because "who
+ * gave this account access to Gebze, and when" is the question the trail exists
+ * to answer.
+ */
+export const PUT = handler(async (request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('edit_users')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, assignmentsSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { id } = await ctx.params
+  const before = await getUserDetail(id)
+  if (!before) return fail('not_found', 'err.notFound')
+
+  const internalId = await findInternalId(id)
+  if (!internalId) return fail('not_found', 'err.notFound')
+
+  await setAssignments(internalId, before.org, parsed.data.siteRoles, guard.session.userId)
+
+  const after = await getUserDetail(id)
+  const diff = Object.entries(parsed.data.siteRoles)
+    .filter(([site, role]) => (before.siteRoles?.[site] ?? null) !== role)
+    .map(([site, role]) => `${site}: ${before.siteRoles?.[site] ?? 'none'} → ${role ?? 'none'}`)
+
+  if (diff.length > 0) {
+    await audit({
+      actorUserId: guard.session.userId,
+      actorLabel: guard.session.user.email,
+      level: 'info',
+      kind: 'role_change',
+      message: `Site access changed for ${before.email}: ${diff.join(', ')}`,
+      event: { k: 'siteAccessChanged', p: { email: before.email, changes: diff.join(', ') } },
+      meta: { siteRoles: parsed.data.siteRoles },
+    })
+  }
+
+  const body: UserDetailResponse = {
+    user: after!,
+    sites: await siteNames(),
+    roles: (await allRoles()).map((r) => r.name),
+    canEdit: true,
+  }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/users/[id]/revoke-sessions/route.ts b/apps/editor/app/api/users/[id]/revoke-sessions/route.ts
new file mode 100644
index 000000000..e95a196cf
--- /dev/null
+++ b/apps/editor/app/api/users/[id]/revoke-sessions/route.ts
@@ -0,0 +1,42 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { revokeAllSessions } from '@panel/lib/auth/session'
+import { deliverSessionsRevoked } from '@panel/lib/mail'
+import { findInternalId, getUserDetail } from '@panel/lib/users'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** POST /api/users/:id/revoke-sessions — the drawer's "sign out all sessions". */
+export const POST = handler(async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('edit_users')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const { id } = await ctx.params
+  const user = await getUserDetail(id)
+  const internalId = await findInternalId(id)
+  if (!user || !internalId) return fail('not_found', 'err.notFound')
+
+  const revoked = await revokeAllSessions(internalId, null)
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'session',
+    message: `All sessions revoked for ${user.email}`,
+    event: { k: 'allSessionsRevoked', p: { email: user.email } },
+    meta: { revoked },
+  })
+
+  // Being thrown out of every device without explanation reads as a fault.
+  if (revoked > 0) {
+    await deliverSessionsRevoked({ email: user.email, fullName: user.name, byAdmin: true })
+  }
+
+  return ok({ revoked })
+})
diff --git a/apps/editor/app/api/users/[id]/route.ts b/apps/editor/app/api/users/[id]/route.ts
new file mode 100644
index 000000000..1d97196f2
--- /dev/null
+++ b/apps/editor/app/api/users/[id]/route.ts
@@ -0,0 +1,180 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { type UserDetailResponse, updateUserSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { allRoles } from '@panel/lib/auth/roles'
+import { revokeAllSessions } from '@panel/lib/auth/session'
+import { queryOne, type RowDataPacket } from '@panel/lib/db'
+import { deliverAccessChanged } from '@panel/lib/mail'
+import { deleteUser, getUserDetail, siteNames, updateUser } from '@panel/lib/users'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** GET /api/users/:id — everything the detail drawer renders. */
+export const GET = handler(async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const { id } = await ctx.params
+  const user = await getUserDetail(id)
+  if (!user) return fail('not_found', 'err.notFound')
+
+  const body: UserDetailResponse = {
+    user,
+    sites: await siteNames(),
+    roles: (await allRoles()).map((r) => r.name),
+    canEdit: guard.session.user.permissions.includes('edit_users'),
+  }
+  return ok(body)
+})
+
+/**
+ * PATCH /api/users/:id — inline edit and the drawer's activate/deactivate.
+ *
+ * The primary admin is protected from deactivation as well as deletion: locking
+ * out the only account that can grant permissions is not a recoverable mistake.
+ */
+export const PATCH = handler(async (request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('edit_users')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, updateUserSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { id } = await ctx.params
+  const before = await getUserDetail(id)
+  if (!before) return fail('not_found', 'err.notFound')
+
+  if (
+    before.isPrimaryAdmin &&
+    (parsed.data.status === 'Inactive' || parsed.data.role !== undefined)
+  ) {
+    return fail('forbidden', 'err.primaryAdminProtected')
+  }
+
+  const internal = await queryOne<RowDataPacket & { id: number }>(
+    'SELECT id FROM users WHERE public_id = ?',
+    [id],
+  )
+  if (!internal) return fail('not_found', 'err.notFound')
+
+  if (parsed.data.email || parsed.data.username) {
+    const clash = await queryOne<RowDataPacket & { id: number }>(
+      'SELECT id FROM users WHERE (email = ? OR username = ?) AND id <> ? LIMIT 1',
+      [parsed.data.email ?? '', parsed.data.username ?? '', internal.id],
+    )
+    if (clash) return fail('conflict', 'err.userExists')
+  }
+
+  await updateUser(internal.id, parsed.data, before.org)
+
+  // Deactivating an account must also end its live sessions, or the change is
+  // cosmetic until the idle timeout happens to fire.
+  if (parsed.data.status === 'Inactive') await revokeAllSessions(internal.id, null)
+
+  const after = await getUserDetail(id)
+
+  // Old → new for the audit line, read from the stored row on both sides. An
+  // external account has its role clamped to Viewer on write, so diffing against
+  // the request would record a change that never happened.
+  const snapshot = (u: NonNullable<typeof after>): Record<string, string> => ({
+    fullName: u.name,
+    email: u.email,
+    username: u.username,
+    role: String(u.role),
+    status: u.status,
+  })
+  const previous = snapshot(before)
+  const current = after ? snapshot(after) : previous
+  const changed = Object.keys(parsed.data)
+    .filter((key) => previous[key] !== current[key])
+    .map((key) => `${key}: ${previous[key]} → ${current[key]}`)
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'user',
+    message: `User updated: ${before.email}${changed.length ? ` (${changed.join(', ')})` : ''}`,
+    event: changed.length
+      ? { k: 'userUpdated' as const, p: { email: before.email, changes: changed.join(', ') } }
+      : { k: 'userUpdatedPlain' as const, p: { email: before.email } },
+    meta: parsed.data,
+  })
+
+  // Losing or regaining access is the one change a person notices only as a
+  // sign-in that stops working, so it is announced. Every other edit — a name,
+  // a role — is the administrator's business and stays quiet.
+  if (parsed.data.status !== undefined && parsed.data.status !== before.status) {
+    await deliverAccessChanged({
+      email: before.email,
+      fullName: after?.name ?? before.name,
+      active: parsed.data.status === 'Active',
+    })
+  }
+
+  const body: UserDetailResponse = {
+    user: after!,
+    sites: await siteNames(),
+    roles: (await allRoles()).map((r) => r.name),
+    canEdit: true,
+  }
+  return ok(body)
+})
+
+/** DELETE /api/users/:id — the primary admin is never deletable. */
+export const DELETE = handler(
+  async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+    const guard = await requirePermission('edit_users')
+    if (!guard.ok) {
+      return guard.reason === 'forbidden'
+        ? fail('forbidden', 'err.forbidden')
+        : fail('unauthenticated', 'err.sessionExpired')
+    }
+
+    const { id } = await ctx.params
+    const user = await getUserDetail(id)
+    if (!user) return fail('not_found', 'err.notFound')
+    if (user.isPrimaryAdmin) return fail('forbidden', 'err.primaryAdminProtected')
+
+    const internal = await queryOne<RowDataPacket & { id: number }>(
+      'SELECT id FROM users WHERE public_id = ?',
+      [id],
+    )
+    if (!internal) return fail('not_found', 'err.notFound')
+    if (internal.id === guard.session.userId) return fail('forbidden', 'err.cannotDeleteSelf')
+
+    try {
+      await deleteUser(internal.id)
+    } catch (err) {
+      // MySQL 1451: a RESTRICT foreign key still points at this account.
+      // Migration 006 relaxed every provenance FK to SET NULL, so this only
+      // fires on a database that has not run it — but "something went wrong"
+      // is never an acceptable answer to a refused delete.
+      if ((err as { errno?: number }).errno === 1451) {
+        return fail('conflict', 'err.userReferenced')
+      }
+      throw err
+    }
+    await audit({
+      actorUserId: guard.session.userId,
+      actorLabel: guard.session.user.email,
+      level: 'warn',
+      kind: 'user',
+      message: `User deleted: ${user.email}`,
+      event: { k: 'userDeleted', p: { email: user.email } },
+      meta: { role: user.role, org: user.org },
+    })
+
+    return ok({ deleted: true })
+  },
+)
diff --git a/apps/editor/app/api/users/[id]/temp-password/route.ts b/apps/editor/app/api/users/[id]/temp-password/route.ts
new file mode 100644
index 000000000..73a8b0f28
--- /dev/null
+++ b/apps/editor/app/api/users/[id]/temp-password/route.ts
@@ -0,0 +1,68 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import type { TempPasswordResponse } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { generateTempPassword, hashPassword } from '@panel/lib/auth/password'
+import { revokeAllSessions } from '@panel/lib/auth/session'
+import { exec } from '@panel/lib/db'
+import { deliverTemporaryPassword } from '@panel/lib/mail'
+import { findInternalId, getUserDetail } from '@panel/lib/users'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/users/:id/temp-password
+ *
+ * Returns the raw password exactly once, the same way a new API key does. It is
+ * never stored in readable form and never reappears — which is the whole point
+ * of removing the old panel's readable password column.
+ *
+ * must_change_password is set, so the temporary credential can only be used to
+ * reach the set-password screen.
+ */
+export const POST = handler(async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('edit_users')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const { id } = await ctx.params
+  const user = await getUserDetail(id)
+  const internalId = await findInternalId(id)
+  if (!user || !internalId) return fail('not_found', 'err.notFound')
+
+  const temporaryPassword = generateTempPassword()
+  await exec(
+    `UPDATE users
+        SET password_hash = ?, password_set_at = NOW(), must_change_password = 1,
+            failed_attempts = 0, locked_until = NULL,
+            status = CASE WHEN status = 'invited' THEN 'active' ELSE status END
+      WHERE id = ?`,
+    [await hashPassword(temporaryPassword), internalId],
+  )
+  await revokeAllSessions(internalId, null)
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'warn',
+    kind: 'user',
+    message: `Temporary password issued for ${user.email}`,
+    event: { k: 'tempPassword', p: { email: user.email } },
+  })
+
+  // Still returned to the administrator once, for the case where mail is down
+  // — but the credential now has a way to reach its owner that is not a phone
+  // call.
+  await deliverTemporaryPassword({
+    email: user.email,
+    fullName: user.name,
+    temporaryPassword,
+  })
+
+  const body: TempPasswordResponse = { temporaryPassword }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/users/bulk/route.ts b/apps/editor/app/api/users/bulk/route.ts
new file mode 100644
index 000000000..fa92c3cab
--- /dev/null
+++ b/apps/editor/app/api/users/bulk/route.ts
@@ -0,0 +1,164 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { type BulkUsersResponse, bulkUsersSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { revokeAllSessions } from '@panel/lib/auth/session'
+import { deleteUser, findInternalId, getUserDetail, updateUser } from '@panel/lib/users'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/users/bulk — the selection toolbar on the Users tab.
+ *
+ * Three rules make this safe to expose:
+ *
+ * 1. Every guard the single-account endpoints apply is applied again here, per
+ *    account. The bulk path is not a shortcut around `edit_users`, the primary
+ *    administrator protection, or the you-cannot-delete-yourself rule.
+ * 2. Nothing is silently dropped. An account that is skipped comes back in the
+ *    response with a reason, so the toolbar can say "9 changed, 1 skipped
+ *    (primary administrator)" instead of quietly doing less than asked.
+ * 3. One audit row per affected account. A single "12 accounts changed" line
+ *    would be cheaper and would destroy the per-account history the trail is
+ *    for.
+ *
+ * The prototype also offered "Require 2FA". It is not here: enrolment means
+ * possessing an authenticator, and no administrator can do that on someone
+ * else's behalf. The org-wide requirement already exists as a settings toggle,
+ * and `revokeSessions` is the action an administrator actually wants when
+ * tightening a set of accounts — it forces every one of them back through the
+ * sign-in gate, which enforces the policy that is in effect.
+ */
+export const POST = handler(async (request: Request) => {
+  const guard = await requirePermission('edit_users')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, bulkUsersSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { action, ids } = parsed.data
+  const skipped: BulkUsersResponse['skipped'] = []
+  let applied = 0
+
+  // Duplicates in the payload would otherwise be applied — and audited — twice.
+  for (const id of [...new Set(ids)]) {
+    const user = await getUserDetail(id)
+    if (!user) {
+      skipped.push({ id, label: id, reason: 'notFound' })
+      continue
+    }
+
+    const internalId = await findInternalId(id)
+    if (internalId === null) {
+      skipped.push({ id, label: user.email, reason: 'notFound' })
+      continue
+    }
+
+    const isSelf = internalId === guard.session.userId
+
+    // Demoting or disabling the only account that can grant permissions is not
+    // a recoverable mistake; revoking its sessions is merely inconvenient.
+    if (user.isPrimaryAdmin && action !== 'revokeSessions') {
+      skipped.push({ id, label: user.email, reason: 'primaryAdmin' })
+      continue
+    }
+    // Signing yourself out in bulk is a legitimate thing to want; deleting or
+    // deactivating yourself mid-request is not.
+    if (isSelf && (action === 'delete' || action === 'deactivate')) {
+      skipped.push({ id, label: user.email, reason: 'self' })
+      continue
+    }
+
+    switch (action) {
+      case 'roleViewer': {
+        if (user.role === 'Viewer') {
+          skipped.push({ id, label: user.email, reason: 'noop' })
+          continue
+        }
+        await updateUser(internalId, { role: 'Viewer' }, user.org)
+        await audit({
+          actorUserId: guard.session.userId,
+          actorLabel: guard.session.user.email,
+          level: 'info',
+          kind: 'user',
+          message: `User updated: ${user.email} (role: ${user.role} → Viewer)`,
+          event: {
+            k: 'userUpdated',
+            p: { email: user.email, changes: `role: ${user.role} → Viewer` },
+          },
+          meta: { bulk: action, role: 'Viewer' },
+        })
+        break
+      }
+
+      case 'revokeSessions': {
+        // Signing your own other devices out is legitimate; signing out the
+        // console you are working in halfway through a batch is not. The first
+        // run of this endpoint did exactly that and 401'd its own next request.
+        const ended = await revokeAllSessions(internalId, isSelf ? guard.session.id : null)
+        if (ended === 0) {
+          skipped.push({ id, label: user.email, reason: 'noop' })
+          continue
+        }
+        await audit({
+          actorUserId: guard.session.userId,
+          actorLabel: guard.session.user.email,
+          level: 'info',
+          kind: 'user',
+          message: `Sessions revoked: ${user.email} (${ended})`,
+          event: { k: 'sessionsRevokedFor', p: { email: user.email, count: ended } },
+          meta: { bulk: action, sessions: ended },
+        })
+        break
+      }
+
+      case 'deactivate': {
+        if (user.status === 'Inactive') {
+          skipped.push({ id, label: user.email, reason: 'noop' })
+          continue
+        }
+        await updateUser(internalId, { status: 'Inactive' }, user.org)
+        // Same rule as the single-account path: a deactivation that leaves live
+        // sessions running is cosmetic until the idle timeout happens to fire.
+        await revokeAllSessions(internalId, null)
+        await audit({
+          actorUserId: guard.session.userId,
+          actorLabel: guard.session.user.email,
+          level: 'warn',
+          kind: 'user',
+          message: `User updated: ${user.email} (status: ${user.status} → Inactive)`,
+          event: {
+            k: 'userUpdated',
+            p: { email: user.email, changes: `status: ${user.status} → Inactive` },
+          },
+          meta: { bulk: action, status: 'Inactive' },
+        })
+        break
+      }
+
+      case 'delete': {
+        await deleteUser(internalId)
+        await audit({
+          actorUserId: guard.session.userId,
+          actorLabel: guard.session.user.email,
+          level: 'warn',
+          kind: 'user',
+          message: `User deleted: ${user.email}`,
+          event: { k: 'userDeleted', p: { email: user.email } },
+          meta: { bulk: action, role: user.role, org: user.org },
+        })
+        break
+      }
+    }
+
+    applied += 1
+  }
+
+  const body: BulkUsersResponse = { applied, skipped }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/users/route.ts b/apps/editor/app/api/users/route.ts
new file mode 100644
index 000000000..84ca5566e
--- /dev/null
+++ b/apps/editor/app/api/users/route.ts
@@ -0,0 +1,127 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import {
+  type CreateUserResponse,
+  createUserSchema,
+  type UsersListResponse,
+} from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { issueInvitation } from '@panel/lib/auth/invitations'
+import { allRoles } from '@panel/lib/auth/roles'
+import { WORK_DOMAIN } from '@panel/lib/auth/users'
+import { queryOne, type RowDataPacket } from '@panel/lib/db'
+import { deliverInvite } from '@panel/lib/mail'
+import { getSettings } from '@panel/lib/settings'
+import type { Lang } from '@panel/lib/types'
+import {
+  createInvitedUser,
+  getUserDetail,
+  listUsers,
+  siteNames,
+  type UserSortKey,
+} from '@panel/lib/users'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+const SORTS: UserSortKey[] = ['name', 'email', 'username', 'role', 'status']
+
+/**
+ * GET /api/users — search, role filter, sort, page.
+ *
+ * Readable by any signed-in account; `canEdit` in the response is what the
+ * read-only banner keys off. Mutation is a separate gate below.
+ */
+export const GET = handler(async (request: Request) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const url = new URL(request.url)
+  const sortParam = url.searchParams.get('sort')
+  const langParam = url.searchParams.get('lang')
+
+  const result = await listUsers({
+    search: url.searchParams.get('search') ?? undefined,
+    role: url.searchParams.get('role') ?? undefined,
+    sort: SORTS.includes(sortParam as UserSortKey) ? (sortParam as UserSortKey) : 'name',
+    direction: url.searchParams.get('direction') === 'desc' ? 'desc' : 'asc',
+    page: Number(url.searchParams.get('page') ?? 1) || 1,
+    pageSize: Number(url.searchParams.get('pageSize') ?? 10) || 10,
+    lang: (langParam === 'tr' ? 'tr' : 'en') as Lang,
+  })
+
+  const body: UsersListResponse = {
+    ...result,
+    sites: await siteNames(),
+    roles: (await allRoles()).map((r) => r.name),
+    canEdit: guard.session.user.permissions.includes('edit_users'),
+  }
+  return ok(body)
+})
+
+/**
+ * POST /api/users — creates an invited account and issues its invite link.
+ *
+ * The account never gets a password here: it lands in `invited` state with a
+ * one-shot token, and sets its own password through /welcome. That is what keeps
+ * the old panel's "admin types the password into a form" pattern from coming back.
+ */
+export const POST = handler(async (request: Request) => {
+  const guard = await requirePermission('edit_users')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, createUserSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { fullName, username, role, org, siteNames: sites } = parsed.data
+  const settings = await getSettings()
+  if (org === 'external' && !settings.externalUsersAllowed) {
+    return fail('forbidden', 'err.externalNotAllowed')
+  }
+
+  const email = `${username}${WORK_DOMAIN}`
+  const clash = await queryOne<RowDataPacket & { id: number }>(
+    'SELECT id FROM users WHERE email = ? OR username = ? LIMIT 1',
+    [email, username],
+  )
+  if (clash) return fail('conflict', 'err.userExists')
+
+  const created = await createInvitedUser(
+    { fullName, username, email, role, org, siteNames: sites },
+    guard.session.userId,
+  )
+  const issued = await issueInvitation(created.userId, guard.session.userId)
+  await deliverInvite({
+    email,
+    fullName,
+    token: issued.token,
+    expiresAt: issued.invitation.expiresAt,
+  })
+
+  const detail = await getUserDetail(created.publicId)
+  if (!detail) return fail('server_error', 'err.server')
+
+  // Log the role that was stored, not the one that was asked for: an external
+  // account is clamped to Viewer on write, and an audit line claiming otherwise
+  // is worse than no line at all.
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'user',
+    message: `User invited: ${email} as ${detail.role}`,
+    event: { k: 'userInvited', p: { email, role: String(detail.role) } },
+    meta: { requestedRole: role, storedRole: detail.role, org, sites },
+  })
+
+  const body: CreateUserResponse = { user: detail, invitation: issued.invitation }
+  return ok(body, { status: 201 })
+})
diff --git a/apps/editor/app/api/webhooks/[id]/route.ts b/apps/editor/app/api/webhooks/[id]/route.ts
new file mode 100644
index 000000000..1f11fd93c
--- /dev/null
+++ b/apps/editor/app/api/webhooks/[id]/route.ts
@@ -0,0 +1,64 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { patchWebhookSchema } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { deleteWebhook, setWebhookStatus } from '@panel/lib/integrations'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/** PATCH /api/webhooks/:id — pause / resume. */
+export const PATCH = handler(async (request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, patchWebhookSchema)
+  if (!parsed.ok) return parsed.response
+
+  const { id } = await ctx.params
+  const webhook = await setWebhookStatus(id, parsed.data.status)
+  if (!webhook) return fail('not_found', 'err.notFound')
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'webhook',
+    message: `Webhook ${parsed.data.status === 'paused' ? 'paused' : 'resumed'}: ${webhook.url}`,
+    event: {
+      k: parsed.data.status === 'paused' ? 'webhookPaused' : 'webhookResumed',
+      p: { url: webhook.url },
+    },
+  })
+
+  return ok({ webhook })
+})
+
+export const DELETE = handler(
+  async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+    const guard = await requirePermission('admin_access')
+    if (!guard.ok) {
+      return guard.reason === 'forbidden'
+        ? fail('forbidden', 'err.forbidden')
+        : fail('unauthenticated', 'err.sessionExpired')
+    }
+
+    const { id } = await ctx.params
+    if (!(await deleteWebhook(id))) return fail('not_found', 'err.notFound')
+
+    await audit({
+      actorUserId: guard.session.userId,
+      actorLabel: guard.session.user.email,
+      level: 'warn',
+      kind: 'webhook',
+      message: `Webhook deleted: ${id}`,
+      event: { k: 'webhookDeleted', p: { id } },
+    })
+
+    return ok({ deleted: true })
+  },
+)
diff --git a/apps/editor/app/api/webhooks/[id]/test/route.ts b/apps/editor/app/api/webhooks/[id]/test/route.ts
new file mode 100644
index 000000000..14a66bc3f
--- /dev/null
+++ b/apps/editor/app/api/webhooks/[id]/test/route.ts
@@ -0,0 +1,48 @@
+import { fail, handler, ok } from '@panel/lib/api'
+import type { WebhookTestResponse } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { deliverTest } from '@panel/lib/integrations'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * POST /api/webhooks/:id/test — sends one real ping and reports what came back.
+ *
+ * It is a genuine outbound request, not a simulation: the only useful answer to
+ * "is this endpoint reachable" is one that actually tried.
+ */
+export const POST = handler(async (_request: Request, ctx: { params: Promise<{ id: string }> }) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const { id } = await ctx.params
+  const result = await deliverTest(id)
+  if (!result.hook) return fail('not_found', 'err.notFound')
+
+  const httpSuffix = result.responseStatus ? ` (HTTP ${result.responseStatus})` : ''
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: result.delivered ? 'info' : 'warn',
+    kind: 'webhook',
+    message: `Webhook test ${result.delivered ? 'delivered' : 'failed'}: ${result.hook.url}${httpSuffix}`,
+    event: {
+      k: result.delivered ? 'webhookTestDelivered' : 'webhookTestFailed',
+      p: { url: result.hook.url, status: httpSuffix },
+    },
+  })
+
+  const body: WebhookTestResponse = {
+    delivered: result.delivered,
+    status: result.hook.status,
+    responseStatus: result.responseStatus,
+  }
+  return ok(body)
+})
diff --git a/apps/editor/app/api/webhooks/route.ts b/apps/editor/app/api/webhooks/route.ts
new file mode 100644
index 000000000..cb12dbad5
--- /dev/null
+++ b/apps/editor/app/api/webhooks/route.ts
@@ -0,0 +1,55 @@
+import { fail, handler, ok, parseBody } from '@panel/lib/api'
+import { createWebhookSchema, type WebhooksResponse } from '@panel/lib/api-contract'
+import { audit } from '@panel/lib/auth/audit'
+import { requirePermission } from '@panel/lib/auth/guard'
+import { createWebhook, HOOK_EVENTS, listWebhooks } from '@panel/lib/integrations'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+export const GET = handler(async () => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const body: WebhooksResponse = {
+    webhooks: await listWebhooks(),
+    events: [...HOOK_EVENTS],
+    canEdit: true,
+  }
+  return ok(body)
+})
+
+/** POST /api/webhooks — https only; the schema refuses plaintext endpoints. */
+export const POST = handler(async (request: Request) => {
+  const guard = await requirePermission('admin_access')
+  if (!guard.ok) {
+    return guard.reason === 'forbidden'
+      ? fail('forbidden', 'err.forbidden')
+      : fail('unauthenticated', 'err.sessionExpired')
+  }
+
+  const parsed = await parseBody(request, createWebhookSchema)
+  if (!parsed.ok) return parsed.response
+
+  const known = new Set<string>(HOOK_EVENTS)
+  const events = parsed.data.events.filter((e) => known.has(e))
+  if (events.length === 0) return fail('validation', 'err.eventRequired', { field: 'events' })
+
+  const webhook = await createWebhook(parsed.data.url, events)
+
+  await audit({
+    actorUserId: guard.session.userId,
+    actorLabel: guard.session.user.email,
+    level: 'info',
+    kind: 'webhook',
+    message: `Webhook added: ${webhook.url} · ${events.join(', ')}`,
+    event: { k: 'webhookAdded', p: { url: webhook.url, events: events.join(', ') } },
+    meta: { webhook: webhook.id },
+  })
+
+  return ok({ webhook }, { status: 201 })
+})
diff --git a/apps/editor/app/apple-icon.png b/apps/editor/app/apple-icon.png
new file mode 100644
index 000000000..41f2cd869
Binary files /dev/null and b/apps/editor/app/apple-icon.png differ
diff --git a/apps/editor/app/client-bootstrap.tsx b/apps/editor/app/client-bootstrap.tsx
index 821544fec..70a7018f5 100644
--- a/apps/editor/app/client-bootstrap.tsx
+++ b/apps/editor/app/client-bootstrap.tsx
@@ -10,6 +10,7 @@
 // idempotent under HMR.
 import '../lib/bootstrap'
 import { type ReactNode, useEffect } from 'react'
+import { SessionProvider } from '@/components/auth/session-provider'
 
 export function ClientBootstrap({
   children,
@@ -22,5 +23,5 @@ export function ClientBootstrap({
     if (!enableDevDiagnostics) return
     import('react-scan').then(({ scan }) => scan({ enabled: true }))
   }, [enableDevDiagnostics])
-  return children
+  return <SessionProvider>{children}</SessionProvider>
 }
diff --git a/apps/editor/app/editor/page.tsx b/apps/editor/app/editor/page.tsx
new file mode 100644
index 000000000..796b09fd3
--- /dev/null
+++ b/apps/editor/app/editor/page.tsx
@@ -0,0 +1,8 @@
+import { redirect } from 'next/navigation'
+
+export const dynamic = 'force-dynamic'
+
+/** The editor moved to the root URL; this survives for old links and habit. */
+export default function EditorRedirect() {
+  redirect('/')
+}
diff --git a/apps/editor/app/favicon.ico b/apps/editor/app/favicon.ico
index e9f367294..24e42fd2c 100644
Binary files a/apps/editor/app/favicon.ico and b/apps/editor/app/favicon.ico differ
diff --git a/apps/editor/app/icon.png b/apps/editor/app/icon.png
new file mode 100644
index 000000000..1b54692ae
Binary files /dev/null and b/apps/editor/app/icon.png differ
diff --git a/apps/editor/app/layout.tsx b/apps/editor/app/layout.tsx
index 01965f4ba..7dec65829 100644
--- a/apps/editor/app/layout.tsx
+++ b/apps/editor/app/layout.tsx
@@ -1,10 +1,45 @@
+import { readEnv } from '@pascal-app/mcp/env'
 import { Agentation } from 'agentation'
 import { GeistPixelSquare } from 'geist/font/pixel'
+import type { Metadata } from 'next'
 import { Barlow } from 'next/font/google'
 import localFont from 'next/font/local'
 import { ClientBootstrap } from './client-bootstrap'
 import './globals.css'
 
+/**
+ * No page in this app may be statically prerendered: the host's CDN caches
+ * static HTML for a year, and every redeploy renames the hashed assets that
+ * HTML points at — so a cached page comes back unstyled after the next
+ * release. Dynamic rendering makes Next send no-cache headers instead. The
+ * hashed /_next/static assets themselves stay long-cached, which is safe.
+ */
+export const dynamic = 'force-dynamic'
+
+/**
+ * "System" is the default and has to hold on the very first request, before any
+ * cookie exists and before React runs. The server renders a guess into every
+ * [data-dt-theme] wrapper; this corrects it in place.
+ */
+const THEME_BOOTSTRAP = `(function(){try{
+var m=document.cookie.match(/(?:^|; )digitaltwin_theme_choice=([^;]*)/);
+var c=m?decodeURIComponent(m[1]):null;
+try{var s=localStorage.getItem('digitaltwin_theme');if(s==='system'||s==='light'||s==='dark')c=s}catch(e){}
+var r=(c==='light'||c==='dark')?c:(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');
+var n=document.querySelectorAll('[data-dt-theme]');
+for(var i=0;i<n.length;i++)n[i].setAttribute('data-dt-theme',r);
+document.documentElement.setAttribute('data-dt-theme',r);
+document.cookie='digitaltwin_theme='+r+';path=/;max-age=31536000;samesite=lax';
+}catch(e){}})()`
+
+export const metadata: Metadata = {
+  title: {
+    default: 'DigitalTwin Editor',
+    template: '%s | DigitalTwin',
+  },
+  description: '3D building editor',
+}
+
 const geistSans = localFont({
   src: './fonts/GeistVF.woff',
   variable: '--font-geist-sans',
@@ -27,7 +62,7 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   const enableDevDiagnostics =
-    process.env.NODE_ENV === 'development' && process.env.PASCAL_DEV_DIAGNOSTICS === '1'
+    process.env.NODE_ENV === 'development' && readEnv(process.env, 'DEV_DIAGNOSTICS') === '1'
 
   return (
     <html
@@ -37,6 +72,13 @@ export default function RootLayout({
       <body className="font-sans">
         <ClientBootstrap enableDevDiagnostics={enableDevDiagnostics}>{children}</ClientBootstrap>
         {enableDevDiagnostics && <Agentation />}
+        {/* Runs after the theme wrappers are parsed and before React hydrates,
+            so a first visit with no stored choice paints in the operating
+            system's theme instead of flashing the server's guess. */}
+        <script
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: pre-paint theme resolution has to be inline
+          dangerouslySetInnerHTML={{ __html: THEME_BOOTSTRAP }}
+        />
       </body>
     </html>
   )
diff --git a/apps/editor/app/page.tsx b/apps/editor/app/page.tsx
index e4ccf7ed3..b75272c7f 100644
--- a/apps/editor/app/page.tsx
+++ b/apps/editor/app/page.tsx
@@ -1,117 +1,27 @@
-'use client'
+import { getSession } from '@panel/lib/auth/session'
+import { redirect } from 'next/navigation'
+import { EditorApp } from '@/components/editor-app'
+import { canEdit, getSessionUser } from '@/lib/auth/session'
 
-import { Editor, ItemsPanel } from '@pascal-app/editor'
-import { Hammer, Layers, Package, Settings } from 'lucide-react'
-import Image from 'next/image'
-import Link from 'next/link'
-import { BuildTab } from '@/components/build-tab'
-import {
-  CommunityViewerToolbarLeft,
-  CommunityViewerToolbarRight,
-} from '@/components/viewer-toolbar'
+export const dynamic = 'force-dynamic'
 
-// The open-source editor only ships the built-in catalog (no uploaded items),
-// so the Library/Community/Mine source chips and tag filters add nothing —
-// drop them and keep the panel to plain categories.
-function EditorItemsPanel() {
-  return <ItemsPanel showSourceFilter={false} showTagFilters={false} />
-}
+/**
+ * The front door. A visitor who has not finished signing in is sent to the
+ * console screen that matches their state; a signed-in one gets the editor
+ * rendered right here — no redirect, so the address bar stays on the bare
+ * domain, which is how the operator wants the editor addressed.
+ */
+export default async function Root() {
+  const session = await getSession({ touch: false })
 
-const SIDEBAR_TABS = [
-  {
-    id: 'site',
-    label: 'Scene',
-    component: () => null,
-    mobileDefaultSnap: 0.5,
-    mobileIcon: <Layers className="h-5 w-5" />,
-    icon: (
-      <Image
-        alt=""
-        className="h-8 w-8 object-contain"
-        height={32}
-        src="/icons/scene.webp"
-        width={32}
-      />
-    ),
-  },
-  {
-    id: 'build',
-    label: 'Build',
-    component: BuildTab,
-    mobileDefaultSnap: 0.5,
-    mobileIcon: <Hammer className="h-5 w-5" />,
-    icon: (
-      <Image
-        alt=""
-        className="h-8 w-8 object-contain"
-        height={32}
-        src="/icons/build.webp"
-        width={32}
-      />
-    ),
-  },
-  {
-    id: 'items',
-    label: 'Items',
-    component: EditorItemsPanel,
-    mobileDefaultSnap: 0.5,
-    mobileIcon: <Package className="h-5 w-5" />,
-    icon: (
-      <Image
-        alt=""
-        className="h-8 w-8 object-contain"
-        height={32}
-        src="/icons/couch.webp"
-        width={32}
-      />
-    ),
-  },
-  {
-    id: 'settings',
-    label: 'Settings',
-    component: () => null,
-    mobileDefaultSnap: 0.5,
-    mobileIcon: <Settings className="h-5 w-5" />,
-    icon: (
-      <Image
-        alt=""
-        className="h-8 w-8 object-contain"
-        height={32}
-        src="/icons/settings.webp"
-        width={32}
-      />
-    ),
-  },
-]
+  if (!session) redirect('/signin')
+  if (session.mfaPending) redirect('/mfa')
+  if (session.user.mustChangePassword) redirect('/welcome')
 
-const PROJECT_ID = 'local-editor'
+  // View-only accounts have no business in the editing surface: they land on
+  // their scene list and open scenes in preview.
+  const user = await getSessionUser()
+  if (user && !canEdit(user)) redirect('/scenes')
 
-export default function Home() {
-  return (
-    <div className="relative h-screen w-screen">
-      {PROJECT_ID === 'local-editor' && (
-        <div className="pointer-events-none absolute top-3 left-1/2 z-40 -translate-x-1/2">
-          <div className="pointer-events-auto flex items-center gap-3 rounded-full border border-border/60 bg-background/90 px-4 py-1.5 text-xs shadow-sm backdrop-blur">
-            <span className="text-muted-foreground">Local editor — scenes are not saved.</span>
-            <Link className="font-medium text-foreground hover:underline" href="/scenes">
-              Open recent scenes
-            </Link>
-            <span aria-hidden className="text-muted-foreground">
-              ·
-            </span>
-            <Link className="font-medium text-foreground hover:underline" href="/scenes">
-              Create new
-            </Link>
-          </div>
-        </div>
-      )}
-      <Editor
-        layoutVersion="v2"
-        projectId={PROJECT_ID}
-        sidebarTabs={SIDEBAR_TABS}
-        viewerToolbarLeft={<CommunityViewerToolbarLeft />}
-        viewerToolbarRight={<CommunityViewerToolbarRight />}
-      />
-    </div>
-  )
+  return <EditorApp />
 }
diff --git a/apps/editor/app/privacy/page.tsx b/apps/editor/app/privacy/page.tsx
index 450757898..1b75548d4 100644
--- a/apps/editor/app/privacy/page.tsx
+++ b/apps/editor/app/privacy/page.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 
 export const metadata: Metadata = {
   title: 'Privacy Policy',
-  description: 'Privacy Policy for Pascal Editor and the Pascal platform.',
+  description: 'Privacy Policy for the DigitalTwin editor and platform.',
 }
 
 export default function PrivacyPage() {
@@ -39,9 +39,9 @@ export default function PrivacyPage() {
           <section className="mb-8 space-y-4">
             <h2 className="font-semibold text-xl">1. Introduction</h2>
             <p className="text-foreground/90 leading-relaxed">
-              Pascal Group Inc. (&quot;we,&quot; &quot;us,&quot; or &quot;our&quot;) operates the
-              Pascal Editor and Platform at pascal.app. This Privacy Policy explains how we collect,
-              use, and protect your information when you use our services.
+              DigitalTwin (&quot;we,&quot; &quot;us,&quot; or &quot;our&quot;) operates the
+              DigitalTwin editor and platform. This Privacy Policy explains how we collect, use, and
+              protect your information when you use our services.
             </p>
           </section>
 
@@ -151,9 +151,9 @@ export default function PrivacyPage() {
               To exercise any of these rights, please contact us at{' '}
               <a
                 className="text-foreground underline hover:text-foreground/80"
-                href="mailto:support@pascal.app"
+                href="mailto:support@example.com"
               >
-                support@pascal.app
+                support@example.com
               </a>
               .
             </p>
@@ -193,9 +193,9 @@ export default function PrivacyPage() {
               contact us at{' '}
               <a
                 className="text-foreground underline hover:text-foreground/80"
-                href="mailto:support@pascal.app"
+                href="mailto:support@example.com"
               >
-                support@pascal.app
+                support@example.com
               </a>
               .
             </p>
diff --git a/apps/editor/app/scene/[id]/page.tsx b/apps/editor/app/scene/[id]/page.tsx
index 95df49f36..8c7795546 100644
--- a/apps/editor/app/scene/[id]/page.tsx
+++ b/apps/editor/app/scene/[id]/page.tsx
@@ -1,7 +1,10 @@
 import type { SceneGraph } from '@pascal-app/editor'
-import { headers } from 'next/headers'
 import Link from 'next/link'
+import { redirect } from 'next/navigation'
 import { SceneLoader, type SceneMeta } from '@/components/scene-loader'
+import { authAvailable } from '@/lib/auth/db'
+import { canEdit, getSessionUser } from '@/lib/auth/session'
+import { getSceneOperations } from '@/lib/scene-store-server'
 
 export const dynamic = 'force-dynamic'
 
@@ -9,35 +12,20 @@ interface SceneWithGraph extends SceneMeta {
   graph: SceneGraph
 }
 
-async function resolveBaseUrl(): Promise<string> {
-  if (process.env.NEXT_PUBLIC_APP_URL) {
-    return process.env.NEXT_PUBLIC_APP_URL
-  }
-  const h = await headers()
-  const host = h.get('x-forwarded-host') ?? h.get('host')
-  const proto = h.get('x-forwarded-proto') ?? 'http'
-  if (!host) {
-    return 'http://localhost:3000'
-  }
-  return `${proto}://${host}`
-}
-
 async function fetchScene(id: string): Promise<SceneWithGraph | null> {
-  const base = await resolveBaseUrl()
-  const response = await fetch(`${base}/api/scenes/${encodeURIComponent(id)}`, {
-    cache: 'no-store',
-  })
-  if (response.status === 404) {
-    return null
-  }
-  if (!response.ok) {
-    throw new Error(`Failed to load scene: ${response.status}`)
-  }
-  return (await response.json()) as SceneWithGraph
+  const operations = await getSceneOperations()
+  return (await operations.loadStoredScene(id)) as SceneWithGraph | null
 }
 
 export default async function ScenePage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
+
+  // A scene is company work, and a link to one is not a licence to read it.
+  // The root and /scenes already sent strangers to sign in; this page did not,
+  // so anyone holding a scene id could open the drawing without an account.
+  const viewer = authAvailable() ? await getSessionUser() : null
+  if (authAvailable() && !viewer) redirect('/signin')
+
   const scene = await fetchScene(id)
 
   if (!scene) {
@@ -58,7 +46,7 @@ export default async function ScenePage({ params }: { params: Promise<{ id: stri
             </Link>
             <Link
               className="rounded-md border border-border bg-background px-3 py-2 font-medium text-sm hover:bg-accent/40"
-              href="/"
+              href="/editor"
             >
               Back to editor
             </Link>
@@ -68,6 +56,10 @@ export default async function ScenePage({ params }: { params: Promise<{ id: stri
     )
   }
 
+  // A view-only account gets the scene in preview; the server refuses its
+  // writes regardless. Without auth (SQLite dev) everything stays editable.
+  const readOnly = authAvailable() && (!viewer || !canEdit(viewer))
+
   const { graph, ...meta } = scene
-  return <SceneLoader initialScene={graph} meta={meta} />
+  return <SceneLoader initialScene={graph} meta={meta} readOnly={readOnly} />
 }
diff --git a/apps/editor/app/scenes/page.tsx b/apps/editor/app/scenes/page.tsx
index 39b8dbf07..8c20c72d4 100644
--- a/apps/editor/app/scenes/page.tsx
+++ b/apps/editor/app/scenes/page.tsx
@@ -1,36 +1,29 @@
-import { headers } from 'next/headers'
 import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { IfcImportButton } from '@/components/ifc-import-button'
 import { CreateSceneButton } from '@/components/save-button'
 import type { SceneMeta } from '@/components/scene-loader'
+import { authAvailable } from '@/lib/auth/db'
+import { getSessionUser, type SessionUser } from '@/lib/auth/session'
+import { getSceneOperations } from '@/lib/scene-store-server'
 
 export const dynamic = 'force-dynamic'
 
-async function resolveBaseUrl(): Promise<string> {
-  if (process.env.NEXT_PUBLIC_APP_URL) {
-    return process.env.NEXT_PUBLIC_APP_URL
-  }
-  const h = await headers()
-  const host = h.get('x-forwarded-host') ?? h.get('host')
-  const proto = h.get('x-forwarded-proto') ?? 'http'
-  if (!host) {
-    return 'http://localhost:3000'
-  }
-  return `${proto}://${host}`
+/**
+ * Signing in belongs to the console alone, so this page carries no sign-in
+ * control: a visitor without a session is sent to /signin. Without auth
+ * (SQLite dev) everything is listed and there is nobody to redirect.
+ */
+async function requireUser(): Promise<SessionUser | null> {
+  if (!authAvailable()) return null
+  const user = await getSessionUser()
+  if (!user) redirect('/signin')
+  return user
 }
 
-async function fetchScenes(): Promise<SceneMeta[]> {
-  const base = await resolveBaseUrl()
-  const response = await fetch(`${base}/api/scenes?limit=50`, {
-    cache: 'no-store',
-  })
-  if (!response.ok) {
-    return []
-  }
-  const payload = (await response.json()) as { scenes?: SceneMeta[] } | SceneMeta[]
-  if (Array.isArray(payload)) {
-    return payload
-  }
-  return payload.scenes ?? []
+async function fetchScenes(ownerId: string | undefined): Promise<SceneMeta[]> {
+  const operations = await getSceneOperations()
+  return (await operations.listScenes({ ownerId, limit: 50 })) as SceneMeta[]
 }
 
 function formatDate(iso: string): string {
@@ -42,7 +35,9 @@ function formatDate(iso: string): string {
 }
 
 export default async function ScenesPage() {
-  const scenes = await fetchScenes()
+  const user = await requireUser()
+  const editingAllowed = user?.role !== 'viewer'
+  const scenes = await fetchScenes(user?.id)
 
   return (
     <div className="min-h-screen bg-background">
@@ -58,7 +53,22 @@ export default async function ScenesPage() {
             <span className="text-muted-foreground">/</span>
             <span className="font-medium text-foreground">Scenes</span>
           </nav>
-          <CreateSceneButton />
+          <div className="flex items-center gap-3">
+            {user?.role === 'admin' && (
+              <a
+                className="rounded-md border border-border px-3 py-1.5 font-medium text-sm transition-colors hover:bg-accent/40"
+                href="/console/scenes"
+              >
+                Admin
+              </a>
+            )}
+            {editingAllowed && (
+              <>
+                <IfcImportButton />
+                <CreateSceneButton />
+              </>
+            )}
+          </div>
         </div>
       </header>
 
@@ -66,16 +76,25 @@ export default async function ScenesPage() {
         <h1 className="mb-2 font-bold text-3xl">Your scenes</h1>
         <p className="mb-8 text-muted-foreground text-sm">
           {scenes.length === 0
-            ? 'No scenes yet. Create one to get started.'
+            ? editingAllowed
+              ? 'No scenes yet. Create one to get started.'
+              : 'No scenes have been shared with you yet.'
             : `${scenes.length} scene${scenes.length === 1 ? '' : 's'}.`}
         </p>
 
         {scenes.length === 0 ? (
           <div className="rounded-xl border border-border/60 border-dashed bg-background p-12 text-center">
-            <p className="text-muted-foreground text-sm">You haven&apos;t saved any scenes yet.</p>
-            <div className="mt-4 flex justify-center">
-              <CreateSceneButton />
-            </div>
+            <p className="text-muted-foreground text-sm">
+              {editingAllowed
+                ? 'You haven’t saved any scenes yet. Start from scratch, or import an IFC model exported from Revit, ArchiCAD or similar.'
+                : 'Ask an administrator to assign a scene to your account.'}
+            </p>
+            {editingAllowed && (
+              <div className="mt-4 flex items-start justify-center gap-3">
+                <CreateSceneButton />
+                <IfcImportButton />
+              </div>
+            )}
           </div>
         ) : (
           <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
diff --git a/apps/editor/app/terms/page.tsx b/apps/editor/app/terms/page.tsx
index f8afb3e17..54ebb2bc8 100644
--- a/apps/editor/app/terms/page.tsx
+++ b/apps/editor/app/terms/page.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 
 export const metadata: Metadata = {
   title: 'Terms of Service',
-  description: 'Terms of Service for Pascal Editor and the Pascal platform.',
+  description: 'Terms of Service for the DigitalTwin editor and platform.',
 }
 
 export default function TermsPage() {
@@ -39,9 +39,9 @@ export default function TermsPage() {
           <section className="mb-8 space-y-4">
             <h2 className="font-semibold text-xl">1. Introduction</h2>
             <p className="text-foreground/90 leading-relaxed">
-              Welcome to Pascal Editor (&quot;Editor&quot;) and the Pascal platform at pascal.app
-              (&quot;Platform&quot;), operated by Pascal Group Inc. (&quot;we,&quot; &quot;us,&quot;
-              or &quot;our&quot;). By accessing or using our services, you agree to these Terms of
+              Welcome to the DigitalTwin editor (&quot;Editor&quot;) and the DigitalTwin platform
+              (&quot;Platform&quot;), operated by DigitalTwin (&quot;we,&quot; &quot;us,&quot; or
+              &quot;our&quot;). By accessing or using our services, you agree to these Terms of
               Service.
             </p>
           </section>
@@ -49,14 +49,14 @@ export default function TermsPage() {
           <section className="mb-8 space-y-4">
             <h2 className="font-semibold text-xl">2. The Editor and Platform</h2>
             <p className="text-foreground/90 leading-relaxed">
-              The Pascal Editor is open-source software released under the MIT License. You may use,
-              copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Editor
-              software in accordance with the MIT License terms.
+              The DigitalTwin editor is open-source software released under the MIT License. You may
+              use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
+              Editor software in accordance with the MIT License terms.
             </p>
             <p className="text-foreground/90 leading-relaxed">
-              The Pascal platform (pascal.app) and its associated services, including user accounts,
-              cloud storage, and project hosting, are proprietary services owned and operated by
-              Pascal Group Inc. These Terms govern your use of the Platform.
+              The DigitalTwin platform and its associated services, including user accounts, cloud
+              storage, and project hosting, are proprietary services owned and operated by
+              DigitalTwin. These Terms govern your use of the Platform.
             </p>
           </section>
 
@@ -105,8 +105,8 @@ export default function TermsPage() {
           <section className="mb-8 space-y-4">
             <h2 className="font-semibold text-xl">6. Platform Ownership</h2>
             <p className="text-foreground/90 leading-relaxed">
-              The Platform, including its design, features, and proprietary code, is owned by Pascal
-              Group Inc. and protected by intellectual property laws. While the Editor source code
+              The Platform, including its design, features, and proprietary code, is owned by
+              DigitalTwin. and protected by intellectual property laws. While the Editor source code
               is open-source under the MIT License, the Platform services, branding, and
               infrastructure remain our proprietary property.
             </p>
@@ -120,9 +120,9 @@ export default function TermsPage() {
               may also delete your account at any time by contacting us at{' '}
               <a
                 className="text-foreground underline hover:text-foreground/80"
-                href="mailto:support@pascal.app"
+                href="mailto:support@example.com"
               >
-                support@pascal.app
+                support@example.com
               </a>
               .
             </p>
@@ -145,7 +145,7 @@ export default function TermsPage() {
           <section className="mb-8 space-y-4">
             <h2 className="font-semibold text-xl">9. Limitation of Liability</h2>
             <p className="text-foreground/90 leading-relaxed">
-              TO THE MAXIMUM EXTENT PERMITTED BY LAW, PASCAL GROUP INC. SHALL NOT BE LIABLE FOR ANY
+              TO THE MAXIMUM EXTENT PERMITTED BY LAW, DIGITALTWIN SHALL NOT BE LIABLE FOR ANY
               INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, INCLUDING LOSS OF
               DATA, PROFITS, OR GOODWILL, ARISING FROM YOUR USE OF THE PLATFORM.
             </p>
@@ -166,9 +166,9 @@ export default function TermsPage() {
               If you have questions about these Terms, please contact us at{' '}
               <a
                 className="text-foreground underline hover:text-foreground/80"
-                href="mailto:support@pascal.app"
+                href="mailto:support@example.com"
               >
-                support@pascal.app
+                support@example.com
               </a>
               .
             </p>
diff --git a/apps/editor/components/account-settings-section.tsx b/apps/editor/components/account-settings-section.tsx
new file mode 100644
index 000000000..cf87d7ecf
--- /dev/null
+++ b/apps/editor/components/account-settings-section.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { LayoutDashboard, LogOut } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useCallback, useState } from 'react'
+import { useSession } from '@/components/auth/session-provider'
+
+const ROLE_LABEL: Record<'admin' | 'editor' | 'viewer', string> = {
+  admin: 'Administrator',
+  editor: 'Editor',
+  viewer: 'Viewer (read-only)',
+}
+
+/**
+ * Who is signed in, their access, and a way out — mounted at the top of the
+ * editor's built-in Settings panel via `settingsPanelProps.accountSection`.
+ *
+ * Styled like the rest of the editor's own sidebar tabs (ScenesTab, BuildTab):
+ * muted-background rounded buttons, not the console's bordered-card idiom —
+ * this panel lives inside the 3D editor, not the admin console.
+ */
+export function AccountSettingsSection() {
+  const router = useRouter()
+  const { user, signOut } = useSession()
+  const [signingOut, setSigningOut] = useState(false)
+
+  const handleSignOut = useCallback(async () => {
+    setSigningOut(true)
+    await signOut()
+    router.push('/signin')
+  }, [router, signOut])
+
+  if (!user) return null
+
+  return (
+    <div className="space-y-3">
+      <label className="font-medium text-muted-foreground text-xs uppercase">Account</label>
+
+      <div className="flex items-center justify-between gap-2 rounded-lg bg-muted/40 px-3 py-2">
+        <div className="min-w-0">
+          <div className="truncate font-medium text-sm">{user.email}</div>
+          <div className="text-muted-foreground text-xs">{ROLE_LABEL[user.role]}</div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        {user.role === 'admin' && (
+          <button
+            className="flex items-center justify-center gap-2 rounded-lg bg-muted/40 px-3 py-2 font-medium text-sm transition-colors hover:bg-muted"
+            onClick={() => router.push('/console')}
+            type="button"
+          >
+            <LayoutDashboard className="size-4" />
+            Open admin console
+          </button>
+        )}
+
+        <button
+          className="flex items-center justify-center gap-2 rounded-lg bg-muted/40 px-3 py-2 font-medium text-sm text-destructive transition-colors hover:bg-destructive/10 disabled:opacity-50"
+          disabled={signingOut}
+          onClick={() => void handleSignOut()}
+          type="button"
+        >
+          <LogOut className="size-4" />
+          {signingOut ? 'Signing out…' : 'Sign out'}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/editor/components/auth/session-provider.tsx b/apps/editor/components/auth/session-provider.tsx
new file mode 100644
index 000000000..5c987c300
--- /dev/null
+++ b/apps/editor/components/auth/session-provider.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useState } from 'react'
+
+export interface SessionUser {
+  id: string
+  email: string
+  role: 'admin' | 'editor' | 'viewer'
+}
+
+interface SessionValue {
+  user: SessionUser | null
+  loading: boolean
+  refresh: () => Promise<void>
+  signOut: () => Promise<void>
+  /** Sends the visitor to the console's sign-in; used by gated actions on 401. */
+  openAuth: () => void
+}
+
+const SessionContext = createContext<SessionValue | null>(null)
+
+/** The console's /api/auth/session response, reduced to what the editor uses. */
+interface ConsoleSessionResponse {
+  state: 'anonymous' | 'signedIn' | 'mfaRequired' | 'firstSignIn'
+  user: { id: string; email: string; permissions?: string[] } | null
+}
+
+/**
+ * Sign-in itself now lives in the console (/signin): it owns passwords, 2FA
+ * and lockout, so the editor no longer renders its own dialog — gated actions
+ * navigate to the console and come back signed in. Only a fully signed-in
+ * session counts; a half-open one (2FA pending, forced password change) is
+ * treated as signed out.
+ */
+export function SessionProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<SessionUser | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const refresh = useCallback(async () => {
+    try {
+      const res = await fetch('/api/auth/session', { cache: 'no-store' })
+      const body = (await res.json()) as ConsoleSessionResponse
+      if (body.state === 'signedIn' && body.user) {
+        const permissions = body.user.permissions ?? []
+        setUser({
+          id: body.user.id,
+          email: body.user.email,
+          // Mirrors the server-side fold in lib/auth/session.ts.
+          role: permissions.includes('admin_access')
+            ? 'admin'
+            : permissions.includes('edit_projects') || permissions.includes('create_projects')
+              ? 'editor'
+              : 'viewer',
+        })
+      } else {
+        setUser(null)
+      }
+    } catch {
+      setUser(null)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const signOut = useCallback(async () => {
+    // A bodyless POST fails JSON parsing server-side before the session is
+    // ever looked up, so the cookie and session row both survive — the UI
+    // would redirect to /signin while the account stayed signed in underneath.
+    await fetch('/api/auth/signout', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ allDevices: false }),
+    }).catch(() => {})
+    setUser(null)
+  }, [])
+
+  const openAuth = useCallback(() => {
+    window.location.href = '/signin'
+  }, [])
+
+  useEffect(() => {
+    void refresh()
+  }, [refresh])
+
+  return (
+    <SessionContext.Provider value={{ user, loading, refresh, signOut, openAuth }}>
+      {children}
+    </SessionContext.Provider>
+  )
+}
+
+export function useSession(): SessionValue {
+  const ctx = useContext(SessionContext)
+  if (!ctx) {
+    // Rendered outside the provider (shouldn't happen); degrade to signed-out.
+    return {
+      user: null,
+      loading: false,
+      refresh: async () => {},
+      signOut: async () => {},
+      openAuth: () => {},
+    }
+  }
+  return ctx
+}
diff --git a/apps/editor/components/brand-mark.tsx b/apps/editor/components/brand-mark.tsx
new file mode 100644
index 000000000..ae532f2ca
--- /dev/null
+++ b/apps/editor/components/brand-mark.tsx
@@ -0,0 +1,46 @@
+/**
+ * The brand mark, path for path from the corporate asset — the same paths the
+ * console's header uses, so the public pages and the signed-in application
+ * carry one identity rather than a stand-in square.
+ *
+ * Colours are `fill` attributes rather than classes: an SVG `<style>` block
+ * inside an HTML document is not scoped to its own svg, so two marks on one
+ * page would fight over the same class name.
+ */
+
+const MARK_VIEW = '111.3 65.6 94.9 69.8'
+
+const MARK_PATHS = [
+  'M149.5,65.7s-46.7,13.2-36.8,38.8c0,0,7.5,20.8,36.5,30.9,0,0-36.5-26.2-22.1-48.7,0,0,3.5-6.8,22.4-21.1Z',
+  'M169.5,77.6s-42.2,8.2-36.8,25.3c0,0,4.6,13.6,36.5,23.5,0,0-34.6-20.1-21.8-33.6,0,0,3.6-5.6,22.2-15.2Z',
+  'M188.8,86s-38.7,4.8-33.6,17.7c0,0,1.2,9.3,33.7,16.7,0,0-32.6-11.9-19.3-23.4,0,0,7.2-7,19.2-11Z',
+  'M183.2,103.6c0-4.6,5.1-8.2,11.5-8.2s11.5,3.7,11.5,8.2-5.1,8.2-11.5,8.2-11.5-3.7-11.5-8.2Z',
+]
+
+export function BrandMark({ className = 'h-[22px] w-auto' }: { className?: string }) {
+  return (
+    <svg
+      aria-label="DigitalTwin"
+      className={className}
+      role="img"
+      style={{ display: 'block' }}
+      viewBox={MARK_VIEW}
+    >
+      <g fill="#FFC629" fillRule="evenodd">
+        {MARK_PATHS.map((d) => (
+          <path d={d} key={d} />
+        ))}
+      </g>
+    </svg>
+  )
+}
+
+/** Mark plus wordmark — the lockup every public header uses. */
+export function BrandLockup({ className = '' }: { className?: string }) {
+  return (
+    <span className={`flex items-center gap-[9px] ${className}`}>
+      <BrandMark />
+      <span className="font-semibold text-[15px] tracking-[-0.015em]">DigitalTwin</span>
+    </span>
+  )
+}
diff --git a/apps/editor/components/editor-app.tsx b/apps/editor/components/editor-app.tsx
new file mode 100644
index 000000000..7aaeea81a
--- /dev/null
+++ b/apps/editor/components/editor-app.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { Editor } from '@pascal-app/editor'
+import { AccountSettingsSection } from '@/components/account-settings-section'
+import { EDITOR_SIDEBAR_TABS } from '@/components/editor-sidebar-tabs'
+import {
+  CommunityViewerToolbarLeft,
+  CommunityViewerToolbarRight,
+} from '@/components/viewer-toolbar'
+
+const PROJECT_ID = 'local-editor'
+
+/**
+ * The full editor experience. Mounted by the root route for a signed-in
+ * session, so the address bar shows just the domain; `/editor` survives only
+ * as a redirect for old links.
+ *
+ * Upstream floats a "scenes are not saved" banner over the canvas here, with
+ * links to open and create one. It sat across the 2D/3D/Split tabs, and the
+ * Scenes rail now answers both links from inside the editor, so it is gone.
+ */
+export function EditorApp() {
+  return (
+    <div className="relative h-screen w-screen">
+      <Editor
+        layoutVersion="v2"
+        projectId={PROJECT_ID}
+        settingsPanelProps={{ accountSection: <AccountSettingsSection /> }}
+        sidebarTabs={EDITOR_SIDEBAR_TABS}
+        viewerToolbarLeft={<CommunityViewerToolbarLeft />}
+        viewerToolbarRight={<CommunityViewerToolbarRight />}
+      />
+    </div>
+  )
+}
diff --git a/apps/editor/components/editor-sidebar-tabs.tsx b/apps/editor/components/editor-sidebar-tabs.tsx
new file mode 100644
index 000000000..a5f112ef7
--- /dev/null
+++ b/apps/editor/components/editor-sidebar-tabs.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import { ItemsPanel, type SidebarTab } from '@pascal-app/editor'
+import { FolderOpen, Hammer, Layers, Package, Settings } from 'lucide-react'
+import Image from 'next/image'
+import { BuildTab } from '@/components/build-tab'
+import { ScenesTab } from '@/components/scenes-tab'
+
+/**
+ * The editor's icon rail, defined once.
+ *
+ * It was defined twice — once for the root editor and once for a saved scene —
+ * and the two drifted: opening a scene silently lost Items and Settings. One
+ * list, both mounts.
+ *
+ * `site` and `settings` are built-in panels inside <Editor>; their `component`
+ * is never called, which is why it returns null.
+ */
+
+// The open-source editor only ships the built-in catalog (no uploaded items),
+// so the Library/Community/Mine source chips and tag filters add nothing —
+// drop them and keep the panel to plain categories.
+function EditorItemsPanel() {
+  return <ItemsPanel showSourceFilter={false} showTagFilters={false} />
+}
+
+function railIcon(src: string) {
+  return <Image alt="" className="h-8 w-8 object-contain" height={32} src={src} width={32} />
+}
+
+export const EDITOR_SIDEBAR_TABS: (SidebarTab & { component: React.ComponentType })[] = [
+  {
+    id: 'site',
+    label: 'Scene',
+    component: () => null,
+    mobileDefaultSnap: 0.5,
+    mobileIcon: <Layers className="h-5 w-5" />,
+    icon: railIcon('/icons/scene.webp'),
+  },
+  {
+    id: 'build',
+    label: 'Build',
+    component: BuildTab,
+    mobileDefaultSnap: 0.5,
+    mobileIcon: <Hammer className="h-5 w-5" />,
+    icon: railIcon('/icons/build.webp'),
+  },
+  {
+    id: 'items',
+    label: 'Items',
+    component: EditorItemsPanel,
+    mobileDefaultSnap: 0.5,
+    mobileIcon: <Package className="h-5 w-5" />,
+    icon: railIcon('/icons/couch.webp'),
+  },
+  {
+    id: 'scenes',
+    label: 'Scenes',
+    component: ScenesTab,
+    mobileDefaultSnap: 0.6,
+    mobileIcon: <FolderOpen className="h-5 w-5" />,
+    // No illustrated asset for a scene library exists in the shared icon set —
+    // `collection.webp` was a byte-for-byte copy of `zone.webp` (the floorplan
+    // zone tool), so Scenes silently wore the zone icon. Lucide's folder reads
+    // unambiguously as "a library of saved things" and matches the mobile rail.
+    icon: <FolderOpen className="h-7 w-7" strokeWidth={1.5} />,
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    component: () => null,
+    mobileDefaultSnap: 0.5,
+    mobileIcon: <Settings className="h-5 w-5" />,
+    icon: railIcon('/icons/settings.webp'),
+  },
+]
diff --git a/apps/editor/components/ifc-import-button.tsx b/apps/editor/components/ifc-import-button.tsx
new file mode 100644
index 000000000..9a46b5ef9
--- /dev/null
+++ b/apps/editor/components/ifc-import-button.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useCallback, useRef, useState } from 'react'
+import { useSession } from '@/components/auth/session-provider'
+
+/**
+ * Imports an IFC building model as a new scene.
+ *
+ * Conversion runs in the browser: web-ifc is a WASM parser, and a model is
+ * routinely tens of megabytes, so shipping the bytes to the server first would
+ * cost an upload for work the page can do itself. Only the converted scene
+ * graph is posted, through the same endpoint as "Create new scene", so the
+ * result is owned by the signed-in user and stored like any other scene.
+ *
+ * The converter and its WASM are pulled in on first use rather than imported
+ * at the top, keeping roughly a megabyte and a half out of the initial load
+ * for everyone who never imports a model.
+ */
+export function IfcImportButton() {
+  const router = useRouter()
+  const { user, openAuth } = useSession()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [status, setStatus] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      setError(null)
+      setStatus('Reading file…')
+      try {
+        const bytes = new Uint8Array(await file.arrayBuffer())
+
+        setStatus('Loading converter…')
+        const { convertIfcToPascal } = await import('@pascal-app/ifc-converter')
+
+        const graph = await convertIfcToPascal(bytes, (message, percent) => {
+          setStatus(`${message} (${percent}%)`)
+        })
+
+        const nodeCount = Object.keys(graph.nodes).length
+        if (nodeCount === 0) {
+          setError('No convertible elements were found in that file.')
+          return
+        }
+
+        setStatus(`Saving ${nodeCount} elements…`)
+        const response = await fetch('/api/scenes', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name: file.name.replace(/\.ifc$/i, '') || 'Imported model',
+            graph: { nodes: graph.nodes, rootNodeIds: graph.rootNodeIds },
+          }),
+        })
+        if (response.status === 401) {
+          openAuth()
+          return
+        }
+        if (!response.ok) {
+          setError(`Could not save the imported scene (${response.status})`)
+          return
+        }
+        const meta = (await response.json()) as { id: string }
+        router.push(`/scene/${meta.id}`)
+      } catch (err) {
+        // A conversion failure is the expected case for an unusual export, so
+        // surface what the parser said rather than a generic message.
+        setError(err instanceof Error ? err.message : 'Could not read that IFC file.')
+      } finally {
+        setStatus(null)
+      }
+    },
+    [router, openAuth],
+  )
+
+  const busy = status !== null
+
+  return (
+    <div className="flex flex-col items-end gap-1">
+      <input
+        accept=".ifc"
+        className="hidden"
+        onChange={(event) => {
+          const file = event.target.files?.[0]
+          // Clear the input so picking the same file twice still fires.
+          event.target.value = ''
+          if (file) void handleFile(file)
+        }}
+        ref={inputRef}
+        type="file"
+      />
+      <button
+        className="rounded-md border border-border px-3 py-1.5 font-medium text-sm disabled:opacity-60"
+        disabled={busy}
+        onClick={() => {
+          if (!user) {
+            openAuth()
+            return
+          }
+          inputRef.current?.click()
+        }}
+        type="button"
+      >
+        {busy ? 'Importing…' : 'Import IFC'}
+      </button>
+      {status && <span className="text-muted-foreground text-xs">{status}</span>}
+      {error && <span className="max-w-xs text-right text-red-600 text-xs">{error}</span>}
+    </div>
+  )
+}
diff --git a/apps/editor/components/public/docs-shell.tsx b/apps/editor/components/public/docs-shell.tsx
new file mode 100644
index 000000000..e1a3220d4
--- /dev/null
+++ b/apps/editor/components/public/docs-shell.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import type { ReactNode } from 'react'
+
+export interface DocsNavGroup {
+  title: string
+  pages: { slug: string; title: string }[]
+}
+
+/**
+ * The documentation frame: the page tree on the left, the article in the
+ * middle, and what is on this page down the right. The tree is a client
+ * component only so it can mark where the reader is — everything it renders
+ * comes from the server.
+ */
+export function DocsShell({
+  groups,
+  onThisPage,
+  onThisPageLabel,
+  children,
+}: {
+  groups: DocsNavGroup[]
+  onThisPage?: { id: string; title: string }[]
+  onThisPageLabel: string
+  children: ReactNode
+}) {
+  const pathname = usePathname()
+
+  return (
+    <div className="mx-auto flex max-w-6xl gap-8 px-6 py-9">
+      <nav className="hidden w-[212px] shrink-0 lg:block">
+        <div className="sticky top-[74px] flex flex-col gap-5">
+          {groups.map((group) => (
+            <div className="flex flex-col gap-[3px]" key={group.title}>
+              <span className="px-[9px] pb-[3px] font-semibold text-[12.5px] text-fg">
+                {group.title}
+              </span>
+              {group.pages.map((page) => {
+                const href = `/guides/${page.slug}`
+                const active = pathname === href
+                return (
+                  <Link
+                    className={`rounded-[7px] px-[9px] py-[5px] text-[12.5px] no-underline transition-colors ${
+                      active
+                        ? 'bg-hover font-medium text-fg'
+                        : 'text-muted-fg hover:bg-hover/60 hover:text-fg'
+                    }`}
+                    href={href}
+                    key={page.slug}
+                  >
+                    {page.title}
+                  </Link>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      </nav>
+
+      <main className="min-w-0 flex-1">{children}</main>
+
+      {onThisPage && onThisPage.length > 0 ? (
+        <aside className="hidden w-[188px] shrink-0 xl:block">
+          <div className="sticky top-[74px] flex flex-col gap-[7px]">
+            <span className="font-mono text-[10px] text-muted-fg uppercase tracking-[0.14em]">
+              {onThisPageLabel}
+            </span>
+            {onThisPage.map((item) => (
+              <a
+                className="text-[12.5px] text-muted-fg no-underline leading-[1.5] hover:text-fg"
+                href={`#${item.id}`}
+                key={item.id}
+              >
+                {item.title}
+              </a>
+            ))}
+          </div>
+        </aside>
+      ) : null}
+    </div>
+  )
+}
diff --git a/apps/editor/components/public/lang-switch.tsx b/apps/editor/components/public/lang-switch.tsx
new file mode 100644
index 000000000..c38c72d0c
--- /dev/null
+++ b/apps/editor/components/public/lang-switch.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+
+const COOKIE = 'digitaltwin_lang'
+
+/**
+ * English ⇄ Turkish, on the pages that render outside the console's providers.
+ * The cookie is the same one the console reads, so switching here carries over
+ * to the signed-in application and back.
+ *
+ * The page is re-requested rather than re-rendered: the copy is chosen on the
+ * server, which is what keeps the first paint in the right language.
+ */
+export function LangSwitch() {
+  const [lang, setLang] = useState<'en' | 'tr'>('en')
+
+  useEffect(() => {
+    let stored: string | null | undefined
+    try {
+      stored = localStorage.getItem(COOKIE)
+    } catch {
+      /* ignore */
+    }
+    stored ??= document.cookie
+      .split('; ')
+      .find((c) => c.startsWith(`${COOKIE}=`))
+      ?.split('=')[1]
+    setLang(stored === 'tr' ? 'tr' : 'en')
+  }, [])
+
+  const toggle = useCallback(() => {
+    const next = lang === 'en' ? 'tr' : 'en'
+    document.cookie = `${COOKIE}=${next}; path=/; max-age=31536000; samesite=lax`
+    // The console takes localStorage as the authority over the cookie, so both
+    // are written — otherwise signing in would put the language back.
+    try {
+      localStorage.setItem(COOKIE, next)
+    } catch {
+      /* private mode — the cookie still carries the choice */
+    }
+    window.location.reload()
+  }, [lang])
+
+  return (
+    <button
+      aria-label={lang === 'en' ? 'Türkçe' : 'English'}
+      className="flex h-[26px] cursor-pointer items-center rounded-full border border-border bg-surface px-[9px] font-mono text-[10.5px] text-muted-fg transition-colors hover:text-fg"
+      onClick={toggle}
+      title={lang === 'en' ? 'Türkçe' : 'English'}
+      type="button"
+    >
+      {lang === 'en' ? 'EN' : 'TR'}
+    </button>
+  )
+}
diff --git a/apps/editor/components/public/theme-switch.tsx b/apps/editor/components/public/theme-switch.tsx
new file mode 100644
index 000000000..4d52c1c29
--- /dev/null
+++ b/apps/editor/components/public/theme-switch.tsx
@@ -0,0 +1,87 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+
+type Choice = 'system' | 'light' | 'dark'
+
+const COOKIE = 'digitaltwin_theme'
+const CHOICE_COOKIE = 'digitaltwin_theme_choice'
+const ORDER: Choice[] = ['system', 'light', 'dark']
+
+/**
+ * One button, cycling System → Light → Dark.
+ *
+ * It starts on System and System means it: the page follows the operating
+ * system and keeps following it when the OS flips at dusk. Clicking once
+ * pins Light, again Dark, again back to System — an explicit choice then
+ * survives the OS changing under it.
+ */
+export function ThemeSwitch({ labels }: { labels: Record<Choice, string> }) {
+  const [choice, setChoice] = useState<Choice>('system')
+
+  const apply = useCallback((next: Choice) => {
+    const media = window.matchMedia('(prefers-color-scheme: dark)')
+    const resolved = next === 'system' ? (media.matches ? 'dark' : 'light') : next
+    // The tokens hang off whichever element carries [data-dt-theme] — the
+    // layout's wrapper here, the root element elsewhere. Update every one of
+    // them rather than assuming which, or the page keeps whatever the server
+    // guessed before the browser could say what it prefers.
+    for (const node of document.querySelectorAll<HTMLElement>('[data-dt-theme]')) {
+      node.dataset.dtTheme = resolved
+    }
+    document.documentElement.dataset.dtTheme = resolved
+    document.cookie = `${COOKIE}=${resolved}; path=/; max-age=31536000; samesite=lax`
+    document.cookie = `${CHOICE_COOKIE}=${next}; path=/; max-age=31536000; samesite=lax`
+    // The console reads the choice from localStorage and treats it as the
+    // authority over the cookie, so a choice made here has to be written to
+    // both or signing in would silently undo it.
+    try {
+      localStorage.setItem(COOKIE, next)
+    } catch {
+      /* private mode — the cookie still carries the choice */
+    }
+  }, [])
+
+  useEffect(() => {
+    let stored: string | null | undefined
+    try {
+      stored = localStorage.getItem(COOKIE)
+    } catch {
+      /* ignore */
+    }
+    stored ??= document.cookie
+      .split('; ')
+      .find((c) => c.startsWith(`${CHOICE_COOKIE}=`))
+      ?.split('=')[1]
+    const initial: Choice = ORDER.includes(stored as Choice) ? (stored as Choice) : 'system'
+    setChoice(initial)
+    apply(initial)
+  }, [apply])
+
+  // Only "system" listens: an explicit choice must survive the OS changing.
+  useEffect(() => {
+    if (choice !== 'system') return
+    const media = window.matchMedia('(prefers-color-scheme: dark)')
+    const onChange = () => apply('system')
+    media.addEventListener('change', onChange)
+    return () => media.removeEventListener('change', onChange)
+  }, [choice, apply])
+
+  const cycle = () => {
+    const next = ORDER[(ORDER.indexOf(choice) + 1) % ORDER.length] ?? 'system'
+    setChoice(next)
+    apply(next)
+  }
+
+  return (
+    <button
+      aria-label={labels[choice]}
+      className="flex h-[26px] w-[26px] cursor-pointer items-center justify-center rounded-full border border-border bg-surface text-[12px] text-muted-fg transition-colors hover:text-fg"
+      onClick={cycle}
+      title={labels[choice]}
+      type="button"
+    >
+      {choice === 'system' ? '◐' : choice === 'light' ? '☀' : '☾'}
+    </button>
+  )
+}
diff --git a/apps/editor/components/save-button.tsx b/apps/editor/components/save-button.tsx
index bd227b83a..7325609bf 100644
--- a/apps/editor/components/save-button.tsx
+++ b/apps/editor/components/save-button.tsx
@@ -3,6 +3,7 @@
 import type { SceneGraph } from '@pascal-app/editor'
 import { useRouter } from 'next/navigation'
 import { useCallback, useState } from 'react'
+import { useSession } from '@/components/auth/session-provider'
 
 const EMPTY_GRAPH: SceneGraph = {
   nodes: {},
@@ -21,10 +22,15 @@ interface SaveButtonProps {
  */
 export function CreateSceneButton({ label = 'Create new scene' }: { label?: string } = {}) {
   const router = useRouter()
+  const { user, openAuth } = useSession()
   const [isCreating, setIsCreating] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   const handleCreate = useCallback(async () => {
+    if (!user) {
+      openAuth()
+      return
+    }
     setIsCreating(true)
     setError(null)
     try {
@@ -33,6 +39,10 @@ export function CreateSceneButton({ label = 'Create new scene' }: { label?: stri
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ name: 'Untitled scene', graph: EMPTY_GRAPH }),
       })
+      if (response.status === 401) {
+        openAuth()
+        return
+      }
       if (!response.ok) {
         setError(`Failed to create scene (${response.status})`)
         return
@@ -44,7 +54,7 @@ export function CreateSceneButton({ label = 'Create new scene' }: { label?: stri
     } finally {
       setIsCreating(false)
     }
-  }, [router])
+  }, [router, user, openAuth])
 
   return (
     <div className="flex items-center gap-3">
@@ -68,10 +78,15 @@ export function CreateSceneButton({ label = 'Create new scene' }: { label?: stri
  */
 export function SaveButton({ sceneId, name, version, getGraph }: SaveButtonProps) {
   const router = useRouter()
+  const { user, openAuth } = useSession()
   const [isSaving, setIsSaving] = useState(false)
   const [status, setStatus] = useState<string | null>(null)
 
   const handleSave = useCallback(async () => {
+    if (!user) {
+      openAuth()
+      return
+    }
     const graph = getGraph()
     if (!graph) {
       setStatus('No scene to save')
@@ -88,6 +103,10 @@ export function SaveButton({ sceneId, name, version, getGraph }: SaveButtonProps
         },
         body: JSON.stringify({ name, graph }),
       })
+      if (response.status === 401) {
+        openAuth()
+        return
+      }
       if (response.status === 409) {
         setStatus('Conflict — reload to continue')
         return
@@ -102,9 +121,13 @@ export function SaveButton({ sceneId, name, version, getGraph }: SaveButtonProps
     } finally {
       setIsSaving(false)
     }
-  }, [getGraph, name, sceneId, version])
+  }, [getGraph, name, sceneId, version, user, openAuth])
 
   const handleSaveAs = useCallback(async () => {
+    if (!user) {
+      openAuth()
+      return
+    }
     const graph = getGraph()
     if (!graph) {
       setStatus('No scene to save')
@@ -120,6 +143,10 @@ export function SaveButton({ sceneId, name, version, getGraph }: SaveButtonProps
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ name: newName, graph }),
       })
+      if (response.status === 401) {
+        openAuth()
+        return
+      }
       if (!response.ok) {
         setStatus(`Save-as failed (${response.status})`)
         return
@@ -131,7 +158,7 @@ export function SaveButton({ sceneId, name, version, getGraph }: SaveButtonProps
     } finally {
       setIsSaving(false)
     }
-  }, [getGraph, name, router])
+  }, [getGraph, name, router, user, openAuth])
 
   return (
     <div className="flex items-center gap-2">
diff --git a/apps/editor/components/scene-loader.tsx b/apps/editor/components/scene-loader.tsx
index 9b3b6797b..a52ec67f6 100644
--- a/apps/editor/components/scene-loader.tsx
+++ b/apps/editor/components/scene-loader.tsx
@@ -3,18 +3,12 @@
 // Node registry bootstrap is loaded once at the root via
 // `<ClientBootstrap>` in `app/layout.tsx` — no per-page side-effect
 // import here.
-import {
-  applySceneGraphToEditor,
-  Editor,
-  type SceneGraph,
-  type SidebarTab,
-} from '@pascal-app/editor'
-import { Hammer, Layers } from 'lucide-react'
-import Image from 'next/image'
-import Link from 'next/link'
+import { applySceneGraphToEditor, Editor, type SceneGraph, useEditor } from '@pascal-app/editor'
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { BuildTab } from './build-tab'
+import { AccountSettingsSection } from '@/components/account-settings-section'
+import { useSession } from '@/components/auth/session-provider'
+import { EDITOR_SIDEBAR_TABS } from './editor-sidebar-tabs'
 import { CommunityViewerToolbarLeft, CommunityViewerToolbarRight } from './viewer-toolbar'
 
 export interface SceneMeta {
@@ -30,44 +24,15 @@ export interface SceneMeta {
   nodeCount: number
 }
 
-const SIDEBAR_TABS: (SidebarTab & { component: React.ComponentType })[] = [
-  {
-    id: 'site',
-    label: 'Scene',
-    component: () => null, // Built-in SitePanel handles this
-    mobileDefaultSnap: 0.5,
-    mobileIcon: <Layers className="h-5 w-5" />,
-    icon: (
-      <Image
-        alt=""
-        className="h-8 w-8 object-contain"
-        height={32}
-        src="/icons/scene.webp"
-        width={32}
-      />
-    ),
-  },
-  {
-    id: 'build',
-    label: 'Build',
-    component: BuildTab,
-    mobileDefaultSnap: 0.5,
-    mobileIcon: <Hammer className="h-5 w-5" />,
-    icon: (
-      <Image
-        alt=""
-        className="h-8 w-8 object-contain"
-        height={32}
-        src="/icons/build.webp"
-        width={32}
-      />
-    ),
-  },
-]
-
 interface SceneLoaderProps {
   initialScene: SceneGraph
   meta: SceneMeta
+  /**
+   * View-only account: the scene opens in preview and nothing is ever saved.
+   * The server refuses a viewer's writes anyway (403) — this stops the client
+   * from attempting them and from showing editing affordances on load.
+   */
+  readOnly?: boolean
 }
 
 type SceneGraphWithCollections = SceneGraph & {
@@ -92,18 +57,24 @@ function sceneGraphSignature(graph: SceneGraphWithCollections): string {
   })
 }
 
-export function SceneLoader({ initialScene, meta }: SceneLoaderProps) {
+export function SceneLoader({ initialScene, meta, readOnly = false }: SceneLoaderProps) {
   const router = useRouter()
   const versionRef = useRef(meta.version)
   const lastRemoteGraphJsonRef = useRef<string | null>(null)
   const suppressRemoteSaveUntilRef = useRef(0)
   const [conflict, setConflict] = useState(false)
   const [saveError, setSaveError] = useState<string | null>(null)
+  const { openAuth } = useSession()
+
+  useEffect(() => {
+    if (readOnly) useEditor.getState().setPreviewMode(true)
+  }, [readOnly])
 
   const handleLoad = useCallback(async () => initialScene, [initialScene])
 
   const handleSave = useCallback(
     async (graph: SceneGraph, options?: { keepalive?: boolean }) => {
+      if (readOnly) return
       const graphJson = sceneGraphSignature(graph)
       const isRecentRemoteApply = Date.now() < suppressRemoteSaveUntilRef.current
       if (lastRemoteGraphJsonRef.current === graphJson) {
@@ -133,6 +104,12 @@ export function SceneLoader({ initialScene, meta }: SceneLoaderProps) {
           return
         }
 
+        if (response.status === 401) {
+          setSaveError('Sign in to save your changes.')
+          openAuth()
+          return
+        }
+
         if (!response.ok) {
           setSaveError(`Save failed (${response.status})`)
           return
@@ -145,7 +122,7 @@ export function SceneLoader({ initialScene, meta }: SceneLoaderProps) {
         setSaveError(error instanceof Error ? error.message : 'Save failed')
       }
     },
-    [meta.id, meta.name],
+    [meta.id, meta.name, openAuth, readOnly],
   )
 
   useEffect(() => {
@@ -223,21 +200,14 @@ export function SceneLoader({ initialScene, meta }: SceneLoaderProps) {
           <p className="font-medium text-destructive text-xs">{saveError}</p>
         </div>
       )}
-      <div className="pointer-events-none absolute top-4 right-4 z-40 flex items-center gap-2">
-        <Link
-          className="pointer-events-auto rounded-md border border-border bg-background/90 px-3 py-1.5 font-medium text-xs shadow-sm backdrop-blur hover:bg-accent/40"
-          href="/scenes"
-        >
-          All scenes
-        </Link>
-      </div>
       <Editor
         layoutVersion="v2"
         onLoad={handleLoad}
         onSave={handleSave}
         onThumbnailCapture={handleThumb}
         projectId={meta.projectId ?? 'default'}
-        sidebarTabs={SIDEBAR_TABS}
+        settingsPanelProps={{ accountSection: <AccountSettingsSection /> }}
+        sidebarTabs={EDITOR_SIDEBAR_TABS}
         viewerToolbarLeft={<CommunityViewerToolbarLeft />}
         viewerToolbarRight={<CommunityViewerToolbarRight />}
       />
diff --git a/apps/editor/components/scenes-tab.tsx b/apps/editor/components/scenes-tab.tsx
new file mode 100644
index 000000000..e5890ebaf
--- /dev/null
+++ b/apps/editor/components/scenes-tab.tsx
@@ -0,0 +1,264 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useSession } from '@/components/auth/session-provider'
+import type { SceneMeta } from '@/components/scene-loader'
+import { cn } from '@/lib/utils'
+
+/**
+ * The scenes library, as a sidebar panel.
+ *
+ * Everything /scenes offers is here — open, create, import a model, and the
+ * way through to administration — so switching scenes no longer means leaving
+ * the editor and coming back. The page still exists and still works; this is
+ * the same capability where the work is.
+ */
+
+interface ScenesResponse {
+  scenes: SceneMeta[]
+}
+
+function formatWhen(iso: string): string {
+  const then = new Date(iso).getTime()
+  if (Number.isNaN(then)) return ''
+  const minutes = Math.round((Date.now() - then) / 60_000)
+  if (minutes < 1) return 'just now'
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.round(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.round(hours / 24)
+  if (days < 30) return `${days}d ago`
+  return new Date(then).toLocaleDateString()
+}
+
+const EMPTY_GRAPH = { nodes: {}, rootNodeIds: [] }
+
+export function ScenesTab() {
+  const router = useRouter()
+  const { user, loading: sessionLoading, openAuth } = useSession()
+  const [scenes, setScenes] = useState<SceneMeta[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState<string | null>(null)
+  const fileRef = useRef<HTMLInputElement>(null)
+
+  // Which scene is open right now, so the list can say so. Read from the URL
+  // rather than passed in: this panel is mounted by both the root editor
+  // (no scene) and /scene/[id], and the URL is what actually distinguishes them.
+  const currentId =
+    typeof window === 'undefined'
+      ? null
+      : (/^\/scene\/([^/]+)/.exec(window.location.pathname)?.[1] ?? null)
+
+  const canEdit = user !== null && user.role !== 'viewer'
+
+  const load = useCallback(async () => {
+    setError(null)
+    try {
+      const response = await fetch('/api/scenes', { cache: 'no-store' })
+      if (response.status === 401) {
+        setScenes([])
+        return
+      }
+      if (!response.ok) {
+        setError(`Could not load scenes (${response.status})`)
+        return
+      }
+      const body = (await response.json()) as ScenesResponse
+      setScenes(body.scenes ?? [])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not load scenes')
+    }
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const create = useCallback(async () => {
+    if (!user) {
+      openAuth()
+      return
+    }
+    setBusy('new')
+    setError(null)
+    try {
+      const response = await fetch('/api/scenes', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: 'Untitled scene', graph: EMPTY_GRAPH }),
+      })
+      if (response.status === 401) {
+        openAuth()
+        return
+      }
+      if (!response.ok) {
+        setError(`Could not create a scene (${response.status})`)
+        return
+      }
+      const meta = (await response.json()) as { id: string }
+      router.push(`/scene/${meta.id}`)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not create a scene')
+    } finally {
+      setBusy(null)
+    }
+  }, [openAuth, router, user])
+
+  const importIfc = useCallback(
+    async (file: File) => {
+      setError(null)
+      setBusy('Reading file…')
+      try {
+        const bytes = new Uint8Array(await file.arrayBuffer())
+        setBusy('Loading converter…')
+        const { convertIfcToPascal } = await import('@pascal-app/ifc-converter')
+        const graph = await convertIfcToPascal(bytes, (message, percent) => {
+          setBusy(`${message} (${percent}%)`)
+        })
+        if (Object.keys(graph.nodes).length === 0) {
+          setError('No convertible elements were found in that file.')
+          return
+        }
+        setBusy('Saving…')
+        const response = await fetch('/api/scenes', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name: file.name.replace(/\.ifc$/i, '') || 'Imported model',
+            graph: { nodes: graph.nodes, rootNodeIds: graph.rootNodeIds },
+          }),
+        })
+        if (response.status === 401) {
+          openAuth()
+          return
+        }
+        if (!response.ok) {
+          setError(`Could not save the imported scene (${response.status})`)
+          return
+        }
+        const meta = (await response.json()) as { id: string }
+        router.push(`/scene/${meta.id}`)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Could not read that IFC file.')
+      } finally {
+        setBusy(null)
+      }
+    },
+    [openAuth, router],
+  )
+
+  return (
+    <div className="flex h-full flex-col gap-3 p-3">
+      <div className="flex items-center justify-between gap-2">
+        <span className="font-medium text-muted-foreground text-xs">
+          {scenes === null ? 'Scenes' : scenes.length === 1 ? '1 scene' : `${scenes.length} scenes`}
+        </span>
+        <button
+          className="rounded-md px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
+          disabled={busy !== null}
+          onClick={() => void load()}
+          type="button"
+        >
+          Refresh
+        </button>
+      </div>
+
+      {canEdit && (
+        <div className="flex flex-col gap-1.5">
+          <button
+            className="flex items-center justify-center rounded-lg bg-muted/40 px-3 py-2 font-medium text-sm transition-colors hover:bg-muted disabled:opacity-50"
+            disabled={busy !== null}
+            onClick={() => void create()}
+            type="button"
+          >
+            {busy === 'new' ? 'Creating…' : 'New scene'}
+          </button>
+          <input
+            accept=".ifc"
+            className="hidden"
+            onChange={(event) => {
+              const file = event.target.files?.[0]
+              event.target.value = ''
+              if (file) void importIfc(file)
+            }}
+            ref={fileRef}
+            type="file"
+          />
+          <button
+            className="flex items-center justify-center rounded-lg bg-muted/40 px-3 py-2 font-medium text-sm transition-colors hover:bg-muted disabled:opacity-50"
+            disabled={busy !== null}
+            onClick={() => fileRef.current?.click()}
+            type="button"
+          >
+            Import IFC
+          </button>
+        </div>
+      )}
+
+      {busy !== null && busy !== 'new' && <p className="text-muted-foreground text-xs">{busy}</p>}
+      {error && <p className="text-destructive text-xs">{error}</p>}
+
+      <div className="-mx-1 min-h-0 flex-1 overflow-y-auto px-1">
+        {scenes === null ? (
+          <p className="py-6 text-center text-muted-foreground text-xs">
+            {sessionLoading ? '' : 'Loading…'}
+          </p>
+        ) : scenes.length === 0 ? (
+          <p className="py-6 text-center text-muted-foreground text-xs leading-relaxed">
+            {canEdit
+              ? 'Nothing saved yet. Start a new scene, or import a model exported from Revit or ArchiCAD.'
+              : 'No scenes have been shared with your account yet.'}
+          </p>
+        ) : (
+          <ul className="flex flex-col gap-1.5">
+            {scenes.map((scene) => {
+              const active = scene.id === currentId
+              return (
+                <li key={scene.id}>
+                  <button
+                    className={cn(
+                      'flex w-full items-center gap-2.5 rounded-xl p-1.5 text-left transition-colors',
+                      active
+                        ? 'bg-primary/10 ring-1 ring-primary/50'
+                        : 'bg-muted/40 hover:bg-muted',
+                    )}
+                    onClick={() => router.push(`/scene/${scene.id}`)}
+                    type="button"
+                  >
+                    <span className="flex h-10 w-[58px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-background/60">
+                      {scene.thumbnailUrl ? (
+                        <img
+                          alt=""
+                          className="h-full w-full object-cover"
+                          src={scene.thumbnailUrl}
+                        />
+                      ) : (
+                        <span className="text-[9px] text-muted-foreground">—</span>
+                      )}
+                    </span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate font-medium text-sm">{scene.name}</span>
+                      <span className="block truncate text-[11px] text-muted-foreground">
+                        {scene.nodeCount} nodes · {formatWhen(scene.updatedAt)}
+                      </span>
+                    </span>
+                  </button>
+                </li>
+              )
+            })}
+          </ul>
+        )}
+      </div>
+
+      {user?.role === 'admin' && (
+        <a
+          className="rounded-lg bg-muted/40 px-3 py-2 text-center font-medium text-sm transition-colors hover:bg-muted"
+          href="/console/scenes"
+        >
+          Manage in console
+        </a>
+      )}
+    </div>
+  )
+}
diff --git a/apps/editor/hostinger-server.js b/apps/editor/hostinger-server.js
new file mode 100644
index 000000000..656d36e9c
--- /dev/null
+++ b/apps/editor/hostinger-server.js
@@ -0,0 +1,12 @@
+// Hostinger Node.js Web App entry point. The build step copies this file to
+// .next/standalone/server.js. It hands off to the server Next generates
+// inside the standalone bundle (apps/editor/server.js), which chdirs into
+// the app directory and wires PORT/HOSTNAME itself. A CJS shim with dynamic
+// import() because apps/editor is ESM ("type": "module").
+const path = require('node:path')
+const { pathToFileURL } = require('node:url')
+
+import(pathToFileURL(path.join(__dirname, 'apps', 'editor', 'server.js')).href).catch((err) => {
+  console.error('Failed to start Next.js standalone server:', err)
+  process.exit(1)
+})
diff --git a/apps/editor/instrumentation.ts b/apps/editor/instrumentation.ts
new file mode 100644
index 000000000..d6cd8c92a
--- /dev/null
+++ b/apps/editor/instrumentation.ts
@@ -0,0 +1,95 @@
+/**
+ * Runs once per server process before any request. The scene store is lazy
+ * and its first consumer is a page request, so a misconfigured or unreachable
+ * database would otherwise keep the deploy looking healthy until someone
+ * opens /scenes. Force the connection here instead: a bad deploy dies at
+ * startup, where the host's log makes the reason obvious.
+ */
+export async function register() {
+  if (process.env.NEXT_RUNTIME !== 'nodejs') return
+
+  // Before anything reads configuration: a panel that forgets its variables on
+  // redeploy would otherwise take the database down with it.
+  const { loadEnvFiles } = await import('./lib/env-file')
+  const files = loadEnvFiles()
+  if (files.length > 0) {
+    console.log(`[digitaltwin:boot] loaded env files: ${files.join(', ')}`)
+  }
+
+  const { getSceneStore } = await import('./lib/scene-store-server')
+  try {
+    const store = await getSceneStore()
+    await store.list({ limit: 1 })
+    console.log(`[digitaltwin:boot] scene store ready backend=${store.backend}`)
+  } catch (err) {
+    console.error(`[digitaltwin:boot] scene store unavailable: ${describeStartupError(err)}`)
+    if (process.env.NODE_ENV === 'production') {
+      process.exit(1)
+    }
+  }
+
+  const { authAvailable, migrateAuth } = await import('./lib/auth/db')
+  if (authAvailable()) {
+    try {
+      const { ensureConsoleSchema } = await import('./lib/auth/live-migrate')
+      await ensureConsoleSchema()
+      await migrateAuth()
+      console.log('[digitaltwin:boot] auth tables ready')
+      // Console sites become real scenes; the worker keeps them in step.
+      const { startSiteSceneWorker } = await import('./lib/auth/site-scenes')
+      startSiteSceneWorker()
+    } catch (err) {
+      console.error(`[digitaltwin:boot] auth unavailable: ${describeStartupError(err)}`)
+      if (process.env.NODE_ENV === 'production') {
+        process.exit(1)
+      }
+    }
+  }
+}
+
+/**
+ * A refused TCP connection reaches us as an `AggregateError` holding one error
+ * per address the hostname resolved to — and its own `message` is empty, so
+ * logging it prints a bare "AggregateError:" above a stack through minified
+ * bundle chunks. That names neither the host, the port, nor the reason. Unwrap
+ * it, and translate the driver's error codes into the misconfiguration each
+ * one actually indicates.
+ */
+function describeStartupError(err: unknown): string {
+  const parts: string[] = []
+  for (const cause of flatten(err)) {
+    const code = (cause as { code?: string }).code
+    const message = cause.message || cause.name
+    // Node's own connect errors already spell out the address; only add it
+    // when the driver's message leaves it out.
+    const address = addressOf(cause)
+    const suffix = address && !message.includes(address) ? ` (${address})` : ''
+    const hint = code && HINTS[code] ? ` — ${HINTS[code]}` : ''
+    parts.push(`${message}${suffix}${hint}`)
+  }
+  return parts.length > 0 ? [...new Set(parts)].join('; ') : String(err)
+}
+
+/** An AggregateError's `errors`, or the error itself. */
+function flatten(err: unknown): Error[] {
+  if (err instanceof AggregateError && Array.isArray(err.errors)) {
+    return err.errors.flatMap(flatten)
+  }
+  return err instanceof Error ? [err] : []
+}
+
+function addressOf(err: Error): string | undefined {
+  const { address, port } = err as { address?: string; port?: number }
+  if (!address) return undefined
+  return port ? `${address}:${port}` : address
+}
+
+const HINTS: Record<string, string> = {
+  ECONNREFUSED: 'nothing is listening there; check DIGITALTWIN_MYSQL_HOST and _PORT',
+  ENOTFOUND: 'hostname does not resolve; check DIGITALTWIN_MYSQL_HOST',
+  ETIMEDOUT: 'no route or a firewall dropped it; check DIGITALTWIN_MYSQL_HOST and _PORT',
+  ER_ACCESS_DENIED_ERROR: 'check DIGITALTWIN_MYSQL_USER and DIGITALTWIN_MYSQL_PASSWORD',
+  ER_ACCESS_DENIED_NO_PASSWORD_ERROR: 'check DIGITALTWIN_MYSQL_PASSWORD',
+  ER_BAD_DB_ERROR: 'check DIGITALTWIN_MYSQL_DATABASE',
+  ER_DBACCESS_DENIED_ERROR: 'the user has no rights on that database',
+}
diff --git a/apps/editor/lib/auth/admin.ts b/apps/editor/lib/auth/admin.ts
new file mode 100644
index 000000000..b7dd6eb7f
--- /dev/null
+++ b/apps/editor/lib/auth/admin.ts
@@ -0,0 +1,87 @@
+import { getAuthPool } from './db'
+import { getSessionUser, type SessionUser } from './session'
+
+export interface AdminUser {
+  id: string
+  email: string
+  role: 'user' | 'admin'
+  createdAt: string
+}
+
+/** The current user if they are an admin, otherwise null. */
+export async function requireAdmin(): Promise<SessionUser | null> {
+  const user = await getSessionUser()
+  return user && user.role === 'admin' ? user : null
+}
+
+interface UserRow {
+  id: string
+  email: string
+  global_role: string
+  created_at: string
+}
+
+/**
+ * All users, each with how many scenes they own, newest first. Reads the
+ * console's users table: ids are the console's public ULIDs (which is what
+ * scenes.owner_id now stores) and the editor's two-role view is derived from
+ * the console's global role.
+ */
+export async function listUsers(): Promise<AdminUser[]> {
+  const pool = await getAuthPool()
+  // No scene count here. It used to carry a correlated COUNT(*) over `scenes`
+  // per user — and because the collation split forces CONVERT() on the join
+  // column, that count could not seek `scenes_owner_updated_idx` and scanned
+  // the index once per account. The only caller maps these rows to {id, email}
+  // and throws the number away, so it was pure cost.
+  const [rows] = await pool.query(`
+    SELECT u.public_id AS id, u.email, u.global_role, u.created_at
+      FROM users u
+     ORDER BY u.created_at DESC
+     LIMIT 500
+  `)
+  return (Array.isArray(rows) ? (rows as UserRow[]) : []).map((r) => ({
+    id: r.id,
+    email: r.email,
+    role: r.global_role === 'Admin' ? 'admin' : 'user',
+    createdAt: String(r.created_at),
+  }))
+}
+
+/** Maps owner ids to emails so scene listings can show a human owner. */
+export async function ownerEmails(ownerIds: string[]): Promise<Map<string, string>> {
+  const unique = [...new Set(ownerIds.filter(Boolean))]
+  if (unique.length === 0) return new Map()
+  const pool = await getAuthPool()
+  const placeholders = unique.map(() => '?').join(',')
+  const [rows] = await pool.query(
+    `SELECT public_id AS id, email FROM users WHERE public_id IN (${placeholders})`,
+    unique,
+  )
+  const map = new Map<string, string>()
+  for (const row of Array.isArray(rows) ? (rows as { id: string; email: string }[]) : []) {
+    map.set(row.id, row.email)
+  }
+  return map
+}
+
+export async function userExists(userId: string): Promise<boolean> {
+  const pool = await getAuthPool()
+  const [rows] = await pool.execute('SELECT 1 FROM users WHERE public_id = ?', [userId])
+  return Array.isArray(rows) && rows.length > 0
+}
+
+/** Reassigns a scene's owner. `null` makes it unowned again. */
+export async function reassignScene(sceneId: string, ownerId: string | null): Promise<void> {
+  const pool = await getAuthPool()
+  await pool.execute('UPDATE scenes SET owner_id = ? WHERE id = ?', [ownerId, sceneId])
+}
+
+/** Adopts every unowned (legacy) scene to a user in one shot. */
+export async function adoptUnownedScenes(ownerId: string): Promise<number> {
+  const pool = await getAuthPool()
+  const [result] = await pool.execute('UPDATE scenes SET owner_id = ? WHERE owner_id IS NULL', [
+    ownerId,
+  ])
+  return Number((result as { affectedRows?: number })?.affectedRows ?? 0)
+}
diff --git a/apps/editor/lib/auth/db.ts b/apps/editor/lib/auth/db.ts
new file mode 100644
index 000000000..787b76e76
--- /dev/null
+++ b/apps/editor/lib/auth/db.ts
@@ -0,0 +1,75 @@
+import { resolveMysqlUrl } from '@pascal-app/mcp/storage'
+
+/**
+ * Auth stores users and sessions in the same MySQL database as scenes, but
+ * through its own small pool rather than reaching into the scene store's
+ * private one. mysql2 is a dynamic import (never a static one) so it stays a
+ * traceable runtime dependency in the standalone bundle, exactly as the scene
+ * store does it. node:crypto covers hashing, so auth adds no new dependency.
+ */
+
+interface MysqlQueryable {
+  query(sql: string, values?: unknown[]): Promise<[unknown, unknown]>
+  execute(sql: string, values?: unknown[]): Promise<[unknown, unknown]>
+}
+
+export interface MysqlPool extends MysqlQueryable {
+  end(): Promise<void>
+}
+
+let pool: MysqlPool | null = null
+let poolPromise: Promise<MysqlPool> | null = null
+
+/** True when a MySQL target is configured. Auth is unavailable without one. */
+export function authAvailable(env: NodeJS.ProcessEnv = process.env): boolean {
+  return Boolean(resolveMysqlUrl(env))
+}
+
+export async function getAuthPool(): Promise<MysqlPool> {
+  if (pool) return pool
+  if (!poolPromise) {
+    poolPromise = (async () => {
+      const url = resolveMysqlUrl(process.env)
+      if (!url) {
+        throw new Error('Auth requires a MySQL connection (DIGITALTWIN_MYSQL_URL or the trio).')
+      }
+      const mod = (await import('mysql2/promise')) as unknown as {
+        createPool: (config: { uri: string; connectionLimit: number }) => MysqlPool
+      }
+      const created = mod.createPool({ uri: url, connectionLimit: 3 })
+      try {
+        await migrate(created)
+      } catch (err) {
+        // Don't cache a failed pool: a database briefly unreachable at boot
+        // would otherwise poison auth until the process restarts.
+        poolPromise = null
+        await created.end().catch(() => {})
+        throw err
+      }
+      pool = created
+      return created
+    })()
+  }
+  return poolPromise
+}
+
+/** Creates the auth tables. Safe to call repeatedly. */
+export async function migrateAuth(): Promise<void> {
+  await getAuthPool()
+}
+
+async function migrate(p: MysqlPool): Promise<void> {
+  // The console owns the identity schema now (users, sessions, roles, ... —
+  // see panel/migrations). Creating the editor's old users/user_sessions here
+  // would race the console's migrations for the `users` name, so this only
+  // verifies the console schema is reachable and reports plainly when the
+  // migrations have not been run yet.
+  try {
+    await p.query('SELECT 1 FROM users LIMIT 1')
+  } catch {
+    throw new Error(
+      "The console's database schema is missing. Run the panel migrations " +
+        '(panel/migrate.ts) against this database first.',
+    )
+  }
+}
diff --git a/apps/editor/lib/auth/guard.ts b/apps/editor/lib/auth/guard.ts
new file mode 100644
index 000000000..f33dedebf
--- /dev/null
+++ b/apps/editor/lib/auth/guard.ts
@@ -0,0 +1,56 @@
+import { authAvailable } from './db'
+import { canEdit, getSessionUser, type SessionUser } from './session'
+
+export type MutationAuth =
+  | { ok: true; user: SessionUser | null }
+  | { ok: false; status: 401 | 403; error: string }
+
+/**
+ * Authorizes a write against an existing scene.
+ *
+ * - Auth off (SQLite dev): always allowed, no identity.
+ * - Signed out: 401.
+ * - View-only account: 403 — a viewer opens scenes in preview and never
+ *   writes, whatever the ownership says.
+ * - Owned by someone else and caller is not an admin: 403.
+ * - Unowned (legacy null-owner scenes) or owned by the caller: allowed. An
+ *   admin may write any scene.
+ */
+/**
+ * Authorizes a read of one scene.
+ *
+ * `GET /api/scenes/:id` had no identity check at all: the surrounding guard
+ * proves the request came from this origin, not that it came from anybody in
+ * particular, so any visitor holding a scene id could read the drawing —
+ * while `/scene/:id`, the page rendering the same data, redirected them to
+ * sign in. The rule here is the one `GET /api/scenes` already applies to the
+ * list: you see your own, an admin sees all.
+ *
+ * Published scenes are the deliberate exception. Publishing is an
+ * administrator approving a project for the whole organisation, and the
+ * signed-in scene list, the sign-in showcase and Sites & Projects all render
+ * them — so any signed-in account may read one, whoever owns it.
+ */
+export async function authorizeSceneRead(
+  ownerId: string | null,
+  opts: { published?: boolean } = {},
+): Promise<MutationAuth> {
+  if (!authAvailable()) return { ok: true, user: null }
+  const user = await getSessionUser()
+  if (!user) return { ok: false, status: 401, error: 'auth_required' }
+  if (user.role === 'admin') return { ok: true, user }
+  if (opts.published) return { ok: true, user }
+  if (ownerId && ownerId !== user.id) return { ok: false, status: 403, error: 'forbidden' }
+  return { ok: true, user }
+}
+
+export async function authorizeSceneMutation(ownerId: string | null): Promise<MutationAuth> {
+  if (!authAvailable()) return { ok: true, user: null }
+  const user = await getSessionUser()
+  if (!user) return { ok: false, status: 401, error: 'auth_required' }
+  if (!canEdit(user)) return { ok: false, status: 403, error: 'forbidden' }
+  if (ownerId && ownerId !== user.id && user.role !== 'admin') {
+    return { ok: false, status: 403, error: 'forbidden' }
+  }
+  return { ok: true, user }
+}
diff --git a/apps/editor/lib/auth/live-migrate.ts b/apps/editor/lib/auth/live-migrate.ts
new file mode 100644
index 000000000..b0b5a6158
--- /dev/null
+++ b/apps/editor/lib/auth/live-migrate.ts
@@ -0,0 +1,213 @@
+import { randomBytes } from 'node:crypto'
+import { readdirSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { hashPassword } from '@panel/lib/auth/password'
+import { db, exec, query, queryOne, type RowDataPacket } from '@panel/lib/db'
+import { ulid } from 'ulid'
+
+/**
+ * Brings a live database — wherever it is in its history — up to the console
+ * schema at boot, so a redeploy is the whole upgrade and nobody runs SQL by
+ * hand in a hosting panel.
+ *
+ * Three states are handled, all idempotently:
+ *  1. The editor's old auth era: a `users` table WITHOUT `public_id`. It is
+ *     renamed aside (nothing is dropped), the console migrations run, and the
+ *     old accounts are carried over with a fresh temporary password — scrypt
+ *     hashes cannot become argon2 ones — printed ONCE to the boot log, which
+ *     is exactly where the operator of this deployment reads. Scene ownership
+ *     follows the accounts to their new ids.
+ *  2. A fresh database: migrations plus a settings row.
+ *  3. Already migrated: the recorded migration names short-circuit everything.
+ */
+export async function ensureConsoleSchema(): Promise<void> {
+  const oldUsers = await tableExists('users')
+  const isLegacyShape = oldUsers && !(await columnExists('users', 'public_id'))
+
+  if (isLegacyShape) {
+    console.log('[digitaltwin:migrate] legacy editor auth tables found — setting them aside')
+    await exec('RENAME TABLE users TO legacy_editor_users', [])
+    if (await tableExists('user_sessions')) {
+      await exec('RENAME TABLE user_sessions TO legacy_editor_sessions', [])
+    }
+  }
+
+  await runSqlMigrations()
+  await ensureSettingsRow()
+
+  if (isLegacyShape || (await tableExists('legacy_editor_users'))) {
+    await migrateLegacyAccounts()
+  }
+}
+
+async function runSqlMigrations(): Promise<void> {
+  await exec(
+    `CREATE TABLE IF NOT EXISTS schema_migrations (
+       name VARCHAR(128) NOT NULL PRIMARY KEY,
+       applied_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
+     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4`,
+    [],
+  )
+  const done = new Set(
+    (await query<RowDataPacket & { name: string }>('SELECT name FROM schema_migrations')).map(
+      (r) => r.name,
+    ),
+  )
+  const dir = join(process.cwd(), 'panel-migrations')
+  const files = readdirSync(dir)
+    .filter((f) => f.endsWith('.sql'))
+    .sort()
+  for (const file of files) {
+    if (done.has(file)) continue
+    console.log(`[digitaltwin:migrate] applying ${file}`)
+    for (const statement of splitStatements(readFileSync(join(dir, file), 'utf8'))) {
+      await db().query(statement)
+    }
+    await exec('INSERT INTO schema_migrations (name) VALUES (?)', [file])
+  }
+}
+
+async function ensureSettingsRow(): Promise<void> {
+  // 2FA starts optional here — the operator turns it on from the Settings tab
+  // once they have enrolled, rather than being locked out by a default.
+  await exec(
+    `INSERT INTO settings (id, mfa_required, sso_enforced_domains)
+     SELECT 1, 0, '[]' FROM DUAL
+      WHERE NOT EXISTS (SELECT 1 FROM settings WHERE id = 1)`,
+    [],
+  )
+}
+
+interface LegacyUser extends RowDataPacket {
+  id: string
+  email: string
+  role: string
+}
+
+async function migrateLegacyAccounts(): Promise<void> {
+  const legacy = await query<LegacyUser>('SELECT id, email, role FROM legacy_editor_users')
+  for (const row of legacy) {
+    const email = row.email.trim().toLowerCase()
+    const existing = await queryOne<RowDataPacket & { public_id: string }>(
+      'SELECT public_id FROM users WHERE email = ?',
+      [email],
+    )
+    let publicId = existing?.public_id
+    if (!publicId) {
+      publicId = ulid()
+      const username = (email.split('@')[0] ?? 'user').replace(/[^a-z0-9._-]/g, '') || 'user'
+      const temp = tempPassword()
+      await exec(
+        `INSERT INTO users (public_id, email, username, full_name, org, global_role, status,
+                            password_hash, must_change_password)
+         VALUES (?, ?, ?, ?, 'internal', ?, 'active', ?, 1)`,
+        [
+          publicId,
+          email,
+          username,
+          username,
+          row.role === 'admin' ? 'Admin' : 'Viewer',
+          Buffer.from(await hashPassword(temp)),
+        ],
+      )
+      // The one place the operator can read: the runtime log. Shown once; the
+      // first sign-in forces a change, after which this value is dead.
+      console.log(
+        `[digitaltwin:migrate] account carried over: ${email} — temporary password: ${temp}`,
+      )
+    }
+    await exec(
+      'UPDATE scenes SET owner_id = ? WHERE CONVERT(owner_id USING utf8mb4) = CONVERT(? USING utf8mb4)',
+      [publicId, row.id],
+    )
+  }
+}
+
+function tempPassword(): string {
+  const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789'
+  let out = ''
+  for (const byte of randomBytes(14)) {
+    out += alphabet[byte % alphabet.length]
+  }
+  return `Gecici!${out.slice(0, 10)}`
+}
+
+async function tableExists(name: string): Promise<boolean> {
+  const row = await queryOne<RowDataPacket & { n: number }>(
+    'SELECT COUNT(*) AS n FROM information_schema.tables WHERE table_schema = DATABASE() AND table_name = ?',
+    [name],
+  )
+  return Number(row?.n ?? 0) > 0
+}
+
+async function columnExists(table: string, column: string): Promise<boolean> {
+  const row = await queryOne<RowDataPacket & { n: number }>(
+    'SELECT COUNT(*) AS n FROM information_schema.columns WHERE table_schema = DATABASE() AND table_name = ? AND column_name = ?',
+    [table, column],
+  )
+  return Number(row?.n ?? 0) > 0
+}
+
+/** Statement splitter matching panel/migrate.ts: semicolons outside strings and comments. */
+function splitStatements(sql: string): string[] {
+  const out: string[] = []
+  let buf = ''
+  let quote: string | null = null
+  let lineComment = false
+  let blockComment = false
+  for (let i = 0; i < sql.length; i++) {
+    const ch = sql[i] as string
+    const next = sql[i + 1]
+    if (lineComment) {
+      if (ch === '\n') lineComment = false
+      buf += ch
+      continue
+    }
+    if (blockComment) {
+      if (ch === '*' && next === '/') {
+        blockComment = false
+        buf += '*/'
+        i++
+        continue
+      }
+      buf += ch
+      continue
+    }
+    if (quote) {
+      if (ch === '\\') {
+        buf += ch + (next ?? '')
+        i++
+        continue
+      }
+      if (ch === quote) quote = null
+      buf += ch
+      continue
+    }
+    if (ch === "'" || ch === '"' || ch === '`') {
+      quote = ch
+      buf += ch
+      continue
+    }
+    if (ch === '-' && next === '-') {
+      lineComment = true
+      buf += ch
+      continue
+    }
+    if (ch === '/' && next === '*') {
+      blockComment = true
+      buf += '/*'
+      i++
+      continue
+    }
+    if (ch === ';') {
+      const trimmed = buf.trim()
+      if (trimmed) out.push(trimmed)
+      buf = ''
+      continue
+    }
+    buf += ch
+  }
+  const trimmed = buf.trim()
+  if (trimmed) out.push(trimmed)
+  return out
+}
diff --git a/apps/editor/lib/auth/session.ts b/apps/editor/lib/auth/session.ts
new file mode 100644
index 000000000..ec184594b
--- /dev/null
+++ b/apps/editor/lib/auth/session.ts
@@ -0,0 +1,52 @@
+import { getSession } from '@panel/lib/auth/session'
+
+export interface SessionUser {
+  id: string
+  email: string
+  /**
+   * The console's permission model folded down to the editor's three tiers:
+   * admins run everything, editors build, viewers only look — a viewer opens
+   * scenes in preview and cannot save.
+   */
+  role: 'admin' | 'editor' | 'viewer'
+}
+
+export function canEdit(user: SessionUser): boolean {
+  return user.role !== 'viewer'
+}
+
+/**
+ * Identity is owned by the console: it signs people in (password, 2FA,
+ * invitations, lockout) and issues the dt_session cookie. The editor no
+ * longer keeps its own accounts — this bridge validates the console's
+ * session and folds its permission model down to the editor's two roles.
+ *
+ * A half-open session (2FA pending, forced password change) is treated as
+ * signed out here: the person has not finished proving who they are, so the
+ * editor must not act on their behalf yet.
+ */
+export async function getSessionUser(): Promise<SessionUser | null> {
+  const session = await getSession()
+  if (session?.state !== 'signedIn') return null
+  const user = session.user
+  const permissions = user.permissions
+  const role = permissions.includes('admin_access')
+    ? 'admin'
+    : permissions.includes('edit_projects') || permissions.includes('create_projects')
+      ? 'editor'
+      : 'viewer'
+  return { id: user.id, email: user.email, role }
+}
+
+/**
+ * Secure must be off on localhost http (or login can't set a cookie in dev)
+ * and on in production. Hostinger terminates TLS at its proxy, so the internal
+ * request scheme is http — the real scheme comes from x-forwarded-proto.
+ */
+export function isSecureScheme(
+  forwardedProto: string | null,
+  nodeEnv: string | undefined,
+): boolean {
+  const proto = forwardedProto?.split(',')[0]?.trim()
+  return proto === 'https' || nodeEnv === 'production'
+}
diff --git a/apps/editor/lib/auth/site-scenes.ts b/apps/editor/lib/auth/site-scenes.ts
new file mode 100644
index 000000000..736b94573
--- /dev/null
+++ b/apps/editor/lib/auth/site-scenes.ts
@@ -0,0 +1,197 @@
+import { exec, query, type RowDataPacket } from '@panel/lib/db'
+import { deliverScenePublished } from '@panel/lib/mail'
+import { ulid } from 'ulid'
+import { getSceneOperations } from '@/lib/scene-store-server'
+
+/**
+ * Where sites and scenes meet — and the direction matters.
+ *
+ * A site created in the console is an approved project, so it gets a real
+ * scene right away (the worker below). A scene drawn in the editor is a
+ * private draft and does NOT become a site on its own: an admin publishes
+ * it from the console's 3D scenes tab (`publishSceneAsSite`). Sites &
+ * Projects is therefore the approved catalogue, /scenes the workbench.
+ *
+ * The console's provisioning job still drives the card's progress; this
+ * file does the parts the console cannot, because only the editor has a
+ * scene store. Editor-owned on purpose: it must never sync upstream.
+ */
+
+const EMPTY_GRAPH = { nodes: {}, rootNodeIds: [] }
+
+interface PendingSite extends RowDataPacket {
+  id: number
+  name: string
+  owner_public_id: string | null
+}
+
+export async function ensureSiteScenes(): Promise<number> {
+  const pending = await query<PendingSite>(
+    // LEFT JOIN: migration 006 lets sites.created_by go NULL when the account
+    // that created the site is deleted. An INNER JOIN would silently skip
+    // those sites forever, leaving a card on Sites & Projects with no scene
+    // behind it. An ownerless scene is a supported state — that is what the
+    // console's "adopt unowned" action is for.
+    `SELECT s.id, s.name, u.public_id AS owner_public_id
+       FROM sites s
+       LEFT JOIN users u ON u.id = s.created_by
+      WHERE s.scene_id IS NULL AND s.status <> 'archived'`,
+  )
+  if (pending.length === 0) return 0
+
+  const operations = await getSceneOperations()
+  let created = 0
+  for (const site of pending) {
+    const meta = await operations.saveScene({
+      name: site.name,
+      projectId: null,
+      ownerId: site.owner_public_id ?? undefined,
+      graph: EMPTY_GRAPH as never,
+      thumbnailUrl: null,
+    })
+    await exec('UPDATE sites SET scene_id = ? WHERE id = ? AND scene_id IS NULL', [
+      meta.id,
+      site.id,
+    ])
+    created++
+    console.log(`[digitaltwin:sites] scene ${meta.id} created for site "${site.name}"`)
+  }
+  return created
+}
+
+interface OrphanScene extends RowDataPacket {
+  id: string
+  name: string
+  creator_id: number
+}
+
+export type PublishResult = 'published' | 'already_published' | 'scene_not_found'
+
+/**
+ * Publishing is an admin's act of approval, never automatic.
+ *
+ * The two screens mean different things: /scenes is where people draw, and
+ * every scene there is a private draft. Sites & Projects is the approved
+ * catalogue — a project only lands there when an admin publishes it from
+ * the console's 3D scenes tab. So this runs on request, not on a timer.
+ *
+ * The card is credited to the scene's owner, whose work is being published;
+ * an ownerless legacy scene falls back to the approving admin. Site names
+ * are unique, so a clash gets the scene id's tail appended.
+ */
+export async function publishSceneAsSite(
+  sceneId: string,
+  approverPublicId: string,
+): Promise<PublishResult> {
+  if ((await publishedSceneIds()).has(sceneId)) return 'already_published'
+
+  // The scenes table (editor store) and the console tables carry different
+  // utf8mb4 collations; every textual join pins both sides to one collation
+  // or MariaDB refuses the comparison.
+  const rows = await query<OrphanScene>(
+    `SELECT sc.id, sc.name, u.id AS creator_id
+       FROM scenes sc
+       LEFT JOIN users u
+         ON CONVERT(u.public_id USING utf8mb4) COLLATE utf8mb4_unicode_ci
+          = CONVERT(sc.owner_id USING utf8mb4) COLLATE utf8mb4_unicode_ci
+      WHERE sc.id = ?`,
+    [sceneId],
+  )
+  const scene = rows[0]
+  if (!scene) return 'scene_not_found'
+
+  let creatorId: number | null = scene.creator_id
+  if (creatorId === null) {
+    const approver = await query<RowDataPacket & { id: number }>(
+      'SELECT id FROM users WHERE public_id = ?',
+      [approverPublicId],
+    )
+    creatorId = approver[0]?.id ?? null
+  }
+  if (creatorId === null) return 'scene_not_found'
+
+  const base = scene.name.slice(0, 100).trim() || 'Scene'
+  for (const name of [base, `${base} · ${scene.id.slice(0, 6)}`]) {
+    try {
+      await exec(
+        `INSERT INTO sites (public_id, name, status, created_by, scene_id)
+         VALUES (?, ?, 'active', ?, ?)`,
+        [ulid(), name, creatorId, scene.id],
+      )
+      console.log(`[digitaltwin:sites] scene "${scene.name}" published as a site`)
+      return 'published'
+    } catch (error) {
+      if ((error as { code?: string })?.code !== 'ER_DUP_ENTRY') throw error
+    }
+  }
+  return 'already_published'
+}
+
+/**
+ * Tells a scene's owner that their project went live.
+ *
+ * Separate from `publishSceneAsSite` so a mail failure can never roll back an
+ * approval that already happened. A scene with no owner — one adopted from the
+ * pre-account era — has nobody to tell, and that is not an error.
+ */
+export async function notifyScenePublished(sceneId: string): Promise<void> {
+  const rows = await query<RowDataPacket & { name: string; email: string; full_name: string }>(
+    `SELECT sc.name, u.email, u.full_name
+       FROM scenes sc
+       JOIN users u
+         ON CONVERT(u.public_id USING utf8mb4) COLLATE utf8mb4_unicode_ci
+          = CONVERT(sc.owner_id USING utf8mb4) COLLATE utf8mb4_unicode_ci
+      WHERE sc.id = ?`,
+    [sceneId],
+  )
+  const owner = rows[0]
+  if (!owner) return
+
+  await deliverScenePublished({
+    email: owner.email,
+    fullName: owner.full_name,
+    sceneName: owner.name,
+    sceneId,
+  })
+}
+
+/** Scene ids that already carry a site card — the published set. */
+export async function publishedSceneIds(): Promise<Set<string>> {
+  const rows = await query<RowDataPacket & { scene_id: string }>(
+    'SELECT scene_id FROM sites WHERE scene_id IS NOT NULL',
+  )
+  return new Set(rows.map((r) => r.scene_id))
+}
+
+/** Withdraws a published project: the card goes, the scene stays. */
+export async function unpublishScene(sceneId: string): Promise<boolean> {
+  const result = await exec(
+    `DELETE FROM sites
+      WHERE CONVERT(scene_id USING utf8mb4) COLLATE utf8mb4_unicode_ci
+          = CONVERT(? USING utf8mb4) COLLATE utf8mb4_unicode_ci`,
+    [sceneId],
+  )
+  return result.affectedRows > 0
+}
+
+let worker: ReturnType<typeof setInterval> | undefined
+let running = false
+
+/** Mirrors the console's job-worker idiom: lazy, quiet, unref'd. */
+export function startSiteSceneWorker(): void {
+  if (worker) return
+  const tick = async () => {
+    if (running) return
+    running = true
+    try {
+      await ensureSiteScenes()
+    } catch (error) {
+      console.error('[digitaltwin:sites] scene provisioning failed:', error)
+    } finally {
+      running = false
+    }
+  }
+  worker = setInterval(() => void tick(), 10_000)
+  worker.unref?.()
+  void tick()
+}
diff --git a/apps/editor/lib/bootstrap.ts b/apps/editor/lib/bootstrap.ts
index a24f64cb5..cfeb33834 100644
--- a/apps/editor/lib/bootstrap.ts
+++ b/apps/editor/lib/bootstrap.ts
@@ -1,3 +1,4 @@
+import { warehouseCatalogPanel, warehousePlugin } from '@ovurrsl/plugin-warehouse'
 import {
   type AnyNodeDefinition,
   discoverPlugins,
@@ -49,7 +50,7 @@ function loadBuiltinsSync(): void {
     const kinds = Array.from(nodeRegistry.entries(), ([k]) => k)
     if (typeof console !== 'undefined') {
       console.info(
-        `[pascal:registry] loaded ${builtinPlugin.id} v${builtinPlugin.apiVersion} (${kinds.length} kinds: ${kinds.join(', ') || '∅'})`,
+        `[digitaltwin:registry] loaded ${builtinPlugin.id} v${builtinPlugin.apiVersion} (${kinds.length} kinds: ${kinds.join(', ') || '∅'})`,
       )
     }
     // Expose the registry on globalThis for ad-hoc dev inspection. In
@@ -76,7 +77,7 @@ export async function loadExternalPlugins(): Promise<void> {
     await loadPlugin(plugin)
   }
   if (isDev() && externals.length > 0 && typeof console !== 'undefined') {
-    console.info(`[pascal:registry] + ${externals.length} discovered plugin(s)`)
+    console.info(`[digitaltwin:registry] + ${externals.length} discovered plugin(s)`)
   }
 }
 
@@ -86,5 +87,12 @@ export async function loadExternalPlugins(): Promise<void> {
 extendPluginDiscovery(async () => [treesPlugin])
 registerEditorHostPanel(treesHostPanel)
 
+// Warehouse & logistics pack. Composed onto the discovery chain rather than
+// replacing it — `setPluginDiscovery` would drop every plugin registered above.
+// Both calls must precede `loadExternalPlugins()` below: it fires at import
+// time behind a module-closure flag, so a later registration is a no-op.
+extendPluginDiscovery(async () => [warehousePlugin])
+registerEditorHostPanel(warehouseCatalogPanel)
+
 loadBuiltinsSync()
 void loadExternalPlugins()
diff --git a/apps/editor/lib/env-file.test.ts b/apps/editor/lib/env-file.test.ts
new file mode 100644
index 000000000..5309a21eb
--- /dev/null
+++ b/apps/editor/lib/env-file.test.ts
@@ -0,0 +1,89 @@
+import { afterEach, expect, test } from 'bun:test'
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { candidateEnvFiles, loadEnvFiles, parseEnvFile } from './env-file'
+
+const dirs: string[] = []
+afterEach(() => {
+  for (const dir of dirs.splice(0)) rmSync(dir, { recursive: true, force: true })
+})
+
+function tempEnvFile(contents: string): string {
+  const dir = mkdtempSync(join(tmpdir(), 'dt-env-'))
+  dirs.push(dir)
+  const path = join(dir, 'config.env')
+  writeFileSync(path, contents)
+  return path
+}
+
+test('parses the KEY=value subset panels produce', () => {
+  expect(
+    parseEnvFile(
+      [
+        '# a comment',
+        '',
+        'DIGITALTWIN_MYSQL_HOST=127.0.0.1',
+        'export DIGITALTWIN_MYSQL_PORT=3306',
+        'DIGITALTWIN_MYSQL_USER = spaced ',
+        'DIGITALTWIN_MYSQL_DATABASE="quoted"',
+        "DIGITALTWIN_ADMIN_EMAIL='single'",
+      ].join('\n'),
+    ),
+  ).toEqual({
+    DIGITALTWIN_MYSQL_HOST: '127.0.0.1',
+    DIGITALTWIN_MYSQL_PORT: '3306',
+    DIGITALTWIN_MYSQL_USER: 'spaced',
+    DIGITALTWIN_MYSQL_DATABASE: 'quoted',
+    DIGITALTWIN_ADMIN_EMAIL: 'single',
+  })
+})
+
+test('keeps a password containing = # $ and quotes intact', () => {
+  const parsed = parseEnvFile('DIGITALTWIN_MYSQL_PASSWORD=p@ss=w0rd$x\nOTHER=1')
+  expect(parsed.DIGITALTWIN_MYSQL_PASSWORD).toBe('p@ss=w0rd$x')
+  // A '#' only starts a comment at the beginning of a line, so a password
+  // containing one survives.
+  expect(parseEnvFile('K=a#b').K).toBe('a#b')
+})
+
+test('ignores malformed lines rather than throwing', () => {
+  expect(parseEnvFile('no-equals-here\n=novalue\n1BAD=x\nGOOD=y')).toEqual({ GOOD: 'y' })
+})
+
+test('a real environment variable always wins over the file', () => {
+  const path = tempEnvFile('DIGITALTWIN_MYSQL_HOST=from-file\nDIGITALTWIN_MYSQL_PORT=3306')
+  const env: NodeJS.ProcessEnv = {
+    DIGITALTWIN_ENV_FILE: path,
+    DIGITALTWIN_MYSQL_HOST: 'from-panel',
+  }
+  loadEnvFiles(env)
+  expect(env.DIGITALTWIN_MYSQL_HOST).toBe('from-panel')
+  expect(env.DIGITALTWIN_MYSQL_PORT).toBe('3306')
+})
+
+test('an empty panel field counts as unset and the file fills it', () => {
+  const path = tempEnvFile('DIGITALTWIN_MYSQL_PASSWORD=secret')
+  const env: NodeJS.ProcessEnv = { DIGITALTWIN_ENV_FILE: path, DIGITALTWIN_MYSQL_PASSWORD: '' }
+  loadEnvFiles(env)
+  expect(env.DIGITALTWIN_MYSQL_PASSWORD).toBe('secret')
+})
+
+test('reports which files were read without leaking values', () => {
+  const path = tempEnvFile('DIGITALTWIN_MYSQL_USER=someone\nDIGITALTWIN_MYSQL_PASSWORD=hunter2')
+  const loaded = loadEnvFiles({ DIGITALTWIN_ENV_FILE: path })
+  expect(loaded[0]).toContain(path)
+  expect(loaded.join()).toContain('(2)')
+  expect(loaded.join()).not.toContain('hunter2')
+})
+
+test('a missing file is not an error', () => {
+  const env: NodeJS.ProcessEnv = { DIGITALTWIN_ENV_FILE: '/nonexistent/nope.env', HOME: '/nowhere' }
+  expect(() => loadEnvFiles(env)).not.toThrow()
+})
+
+test('looks in the app directory and the home directory', () => {
+  const candidates = candidateEnvFiles({ HOME: '/home/someone' })
+  expect(candidates).toContain('/home/someone/.digitaltwin.env')
+  expect(candidates.some((p) => p.endsWith('/.env'))).toBe(true)
+})
diff --git a/apps/editor/lib/env-file.ts b/apps/editor/lib/env-file.ts
new file mode 100644
index 000000000..a208a087d
--- /dev/null
+++ b/apps/editor/lib/env-file.ts
@@ -0,0 +1,79 @@
+import { readFileSync } from 'node:fs'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+
+/**
+ * Hosting panels lose their environment variables on redeploy, which takes the
+ * database down with them. Reading the same settings from a file lets them
+ * survive a release.
+ *
+ * Files are read in order and never overwrite a variable that is already set,
+ * so a real environment variable always wins and the panel stays authoritative
+ * when it is configured.
+ *
+ * `~/.digitaltwin.env` is the one that outlives a deploy: the app directory is
+ * replaced wholesale on every release, so a file committed next to the app is
+ * only as durable as the release that carried it.
+ */
+export function candidateEnvFiles(env: NodeJS.ProcessEnv = process.env): string[] {
+  const explicit = env.DIGITALTWIN_ENV_FILE?.trim()
+  const home = env.HOME?.trim() || homedir()
+  return [
+    ...(explicit ? [explicit] : []),
+    join(process.cwd(), '.env'),
+    ...(home ? [join(home, '.digitaltwin.env')] : []),
+  ]
+}
+
+/**
+ * Parses the `KEY=value` subset that hosting panels and `.env` files agree on:
+ * blank lines and `#` comments are skipped, a leading `export` is tolerated,
+ * and a wrapping pair of matching quotes is removed. Values are not expanded —
+ * a `$` in a password is a literal `$`.
+ */
+export function parseEnvFile(contents: string): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const rawLine of contents.split(/\r?\n/)) {
+    const line = rawLine.trim()
+    if (line.length === 0 || line.startsWith('#')) continue
+    const eq = line.indexOf('=')
+    if (eq <= 0) continue
+    const key = line
+      .slice(0, eq)
+      .replace(/^export\s+/, '')
+      .trim()
+    if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) continue
+    let value = line.slice(eq + 1).trim()
+    const quote = value[0]
+    if ((quote === '"' || quote === "'") && value.length >= 2 && value.endsWith(quote)) {
+      value = value.slice(1, -1)
+    }
+    out[key] = value
+  }
+  return out
+}
+
+/**
+ * Loads the candidate files into `process.env`. Returns the files that were
+ * read and how many variables each contributed — never the values, which are
+ * credentials.
+ */
+export function loadEnvFiles(env: NodeJS.ProcessEnv = process.env): string[] {
+  const loaded: string[] = []
+  for (const path of candidateEnvFiles(env)) {
+    let contents: string
+    try {
+      contents = readFileSync(path, 'utf8')
+    } catch {
+      continue // Absent or unreadable: the next candidate, or the panel, covers it.
+    }
+    let applied = 0
+    for (const [key, value] of Object.entries(parseEnvFile(contents))) {
+      if (env[key] !== undefined && env[key] !== '') continue
+      env[key] = value
+      applied++
+    }
+    loaded.push(`${path} (${applied})`)
+  }
+  return loaded
+}
diff --git a/apps/editor/lib/graph-schema.test.ts b/apps/editor/lib/graph-schema.test.ts
new file mode 100644
index 000000000..e6964037d
--- /dev/null
+++ b/apps/editor/lib/graph-schema.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, test } from 'bun:test'
+import { warehousePlugin } from '@ovurrsl/plugin-warehouse'
+import { AnyNode } from '@pascal-app/core/schema'
+import { apiGraphSchema } from './graph-schema'
+
+/**
+ * A real node of the given plugin kind, built by the plugin's own schema so
+ * the test breaks if the plugin's contract changes rather than drifting.
+ */
+function pluginNode(kind: string): Record<string, unknown> {
+  const def = warehousePlugin.nodes?.find((d) => d.kind === kind)
+  if (!def) throw new Error(`plugin does not register ${kind}`)
+  // Node ids are branded per kind: the id prefix is the kind's local part
+  // verbatim (`pallet-rack_x`), so derive it rather than guess.
+  const local = kind.split(':').pop() ?? kind
+  const parsed = def.schema.safeParse({
+    object: 'node',
+    id: `${local}_t1`,
+    type: kind,
+    name: 'Test node',
+    parentId: 'level_1',
+  })
+  if (!parsed.success) {
+    throw new Error(`could not build a valid ${kind}: ${parsed.error.issues[0]?.message}`)
+  }
+  return parsed.data as Record<string, unknown>
+}
+
+function graphWith(node: Record<string, unknown>) {
+  return {
+    nodes: { [String(node.id)]: node },
+    rootNodeIds: [String(node.id)],
+  }
+}
+
+describe('apiGraphSchema plugin nodes', () => {
+  test('a warehouse pallet is NOT part of the host AnyNode union (the 400 bug)', () => {
+    expect(AnyNode.safeParse(pluginNode('warehouse:pallet')).success).toBe(false)
+  })
+
+  test('accepts every node kind the warehouse plugin registers', () => {
+    for (const def of warehousePlugin.nodes ?? []) {
+      const result = apiGraphSchema.safeParse(graphWith(pluginNode(def.kind)))
+      expect(
+        result.success,
+        `${def.kind} rejected: ${JSON.stringify(result.error?.issues[0])}`,
+      ).toBe(true)
+    }
+  })
+
+  test('still accepts built-in nodes', () => {
+    const wall = {
+      object: 'node',
+      id: 'wall_1',
+      type: 'wall',
+      name: 'Wall',
+      visible: true,
+      thickness: 0.2,
+      start: [0, 0],
+      end: [1, 0],
+    }
+    expect(apiGraphSchema.safeParse(graphWith(wall)).success).toBe(true)
+  })
+
+  test('still rejects unknown node kinds', () => {
+    const bogus = { object: 'node', id: 'x_1', type: 'not-a-kind', name: 'X' }
+    expect(apiGraphSchema.safeParse(graphWith(bogus)).success).toBe(false)
+  })
+
+  test('still rejects a malformed plugin node', () => {
+    const broken = { ...pluginNode('warehouse:pallet'), position: 'not-a-vector' }
+    expect(apiGraphSchema.safeParse(graphWith(broken)).success).toBe(false)
+  })
+})
diff --git a/apps/editor/lib/graph-schema.ts b/apps/editor/lib/graph-schema.ts
index c94c724fa..96dec22ba 100644
--- a/apps/editor/lib/graph-schema.ts
+++ b/apps/editor/lib/graph-schema.ts
@@ -1,17 +1,60 @@
+import { warehousePlugin } from '@ovurrsl/plugin-warehouse'
 import { AnyNode } from '@pascal-app/core/schema'
+import { treesPlugin } from '@pascal-app/plugin-trees'
 import { z } from 'zod'
 
 /**
- * Validates a SceneGraph at an untrusted API boundary. Re-runs
- * `AnyNode.safeParse` on every node, which enforces the `AssetUrl`
- * allowlist in core (closes the Phase 3 SSRF / arbitrary-URL risk on
- * scan/guide/item/material fields).
+ * Validates a SceneGraph at an untrusted API boundary. Re-runs schema
+ * validation on every node, which enforces the `AssetUrl` allowlist in core
+ * (closes the Phase 3 SSRF / arbitrary-URL risk on scan/guide/item/material
+ * fields).
  *
  * Shared between `POST /api/scenes` and `PUT /api/scenes/[id]` so neither
  * route can silently accept malicious URLs via the `graph` payload.
  *
  * Phase 8 P4 found the POST bypass; Phase 10 A2 found the PUT bypass.
+ *
+ * `AnyNode` is a hand-maintained union of the HOST's kinds — by construction
+ * it cannot know a plugin's, and validating a `warehouse:*` node against it
+ * rejects every save containing one. Plugin kinds are therefore validated
+ * against the plugin's own `def.schema`, exactly as the runtime registry
+ * does; `AnyNode` remains the verdict for everything unclaimed, so an
+ * unknown kind is still refused. The plugin barrels are the same modules the
+ * client bootstrap imports during SSR, so they are server-safe by contract.
+ */
+const pluginNodeSchemas = new Map<string, z.ZodType>()
+for (const plugin of [treesPlugin, warehousePlugin]) {
+  for (const def of plugin.nodes ?? []) {
+    pluginNodeSchemas.set(def.kind, def.schema)
+  }
+}
+
+function validateNode(node: unknown): z.ZodSafeParseResult<unknown> {
+  const kind = (node as { type?: unknown } | null)?.type
+  const pluginSchema = typeof kind === 'string' ? pluginNodeSchemas.get(kind) : undefined
+  if (pluginSchema) return pluginSchema.safeParse(node)
+  return AnyNode.safeParse(node)
+}
+
+/**
+ * Parses a node with its owning schema and returns the schema's output —
+ * i.e. with every defaulted field materialised. The editor's `setScene`
+ * stores nodes verbatim without parsing, so a hand-built node missing a
+ * defaulted field (e.g. a pallet without `supportSlabId`) reaches kind
+ * systems in a shape they never see from editor-created nodes, and crashes
+ * them. Writers that synthesise nodes outside the editor (the legacy scene
+ * migrator) run each node through this before saving.
  */
+export function parseNodeWithDefaults(node: unknown): unknown {
+  const result = validateNode(node)
+  if (!result.success) {
+    throw new Error(
+      `node failed schema parse: ${result.error.issues.map((i) => `${i.path.join('.')}: ${i.message}`).join('; ')}`,
+    )
+  }
+  return result.data
+}
+
 export const apiGraphSchema = z
   .object({
     nodes: z.record(z.string(), z.unknown()),
@@ -21,7 +64,7 @@ export const apiGraphSchema = z
   })
   .superRefine((value, ctx) => {
     for (const [nodeId, node] of Object.entries(value.nodes)) {
-      const res = AnyNode.safeParse(node)
+      const res = validateNode(node)
       if (!res.success) {
         for (const issue of res.error.issues) {
           ctx.addIssue({
diff --git a/apps/editor/lib/guides-content.ts b/apps/editor/lib/guides-content.ts
new file mode 100644
index 000000000..e97915683
--- /dev/null
+++ b/apps/editor/lib/guides-content.ts
@@ -0,0 +1,826 @@
+import type { Lang } from '@panel/lib/types'
+
+/**
+ * The documentation, as data.
+ *
+ * Written for this deployment rather than adapted from an upstream manual:
+ * every page describes something that exists here — the console's accounts
+ * and roles, the warehouse plugin, publishing to Sites & Projects — and
+ * nothing that does not. Text only, no screenshots: images would have to be
+ * recaptured on every release, and a stale screenshot teaches the wrong
+ * interface.
+ */
+
+export interface GuideBlock {
+  /** Section heading inside a page. */
+  heading: string
+  /** Prose paragraphs. */
+  body?: string[]
+  /** Bulleted points. */
+  points?: string[]
+  /** Two-column reference table, e.g. shortcuts. */
+  table?: { columns: [string, string]; rows: [string, string][] }
+}
+
+export interface GuidePage {
+  slug: string
+  title: string
+  description: string
+  blocks: GuideBlock[]
+}
+
+export interface GuideGroup {
+  title: string
+  pages: GuidePage[]
+}
+
+export interface GuidesContent {
+  /** Index page. */
+  title: string
+  lead: string[]
+  startHere: string
+  explore: string
+  groups: GuideGroup[]
+}
+
+const EN: GuidesContent = {
+  title: 'Welcome to DigitalTwin',
+  lead: [
+    'DigitalTwin is a 3D building editor that runs in your browser — draw warehouses and buildings, furnish them from a catalogue, walk through them, and share the result with your colleagues.',
+    'Everything you draw is saved to your own account on your own server. An administrator decides who may edit, who may only look, and which projects are published to the whole organisation.',
+    'This guide is readable without an account. If you do not have one yet, use “Request access” on the sign-in screen.',
+  ],
+  startHere: 'Start here',
+  explore: 'Explore the features',
+  groups: [
+    {
+      title: 'Getting started',
+      pages: [
+        {
+          slug: 'your-first-scene',
+          title: 'Your first scene',
+          description: 'Draw a room, add a door and a window, and place your first items.',
+          blocks: [
+            {
+              heading: 'Create the scene',
+              body: [
+                'Open your scene list from the editor’s status strip (“Open recent scenes”) and choose “Create new scene”. You land in an empty editor with a ground floor already prepared.',
+              ],
+            },
+            {
+              heading: 'Draw the walls',
+              points: [
+                'Open the Build tab in the left sidebar and pick the wall tool.',
+                'Click once where the wall starts and once where it ends — the length is shown live as you move.',
+                'Press C while drawing to close the room automatically back to your first point.',
+                'Press Esc to cancel a wall you have started but not finished.',
+              ],
+            },
+            {
+              heading: 'Add a door and a window',
+              body: [
+                'Still in the Build tab, choose the door or window and click on a wall. The opening is cut into the wall for real, and you can slide it along the wall afterwards or type an exact size in the properties panel.',
+              ],
+            },
+            {
+              heading: 'Place items',
+              body: [
+                'The Items tab holds the catalogue. Pick a category, then click in the scene to place. Items snap to walls and stack on top of each other where that makes sense.',
+              ],
+            },
+            {
+              heading: 'Saving',
+              body: [
+                'There is no save button: your work is written to the server as you go, and the scene list shows when each scene was last touched. “All scenes” takes you back to the list.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'interface-tour',
+          title: 'Interface tour',
+          description: 'What each region of the editor does.',
+          blocks: [
+            {
+              heading: 'Left sidebar',
+              points: [
+                'Scene — the structure of what you have built, level by level.',
+                'Build — walls, floors, doors, windows, roofs and stairs.',
+                'Items — the catalogue of furniture and equipment.',
+                'Settings — per-scene preferences.',
+              ],
+            },
+            {
+              heading: 'Top-left toolbar',
+              points: [
+                '3D / 2D / Split — how the scene is shown. Split puts the plan and the model side by side.',
+                'The « button collapses the sidebar when you need the full width.',
+              ],
+            },
+            {
+              heading: 'Top-right toolbar',
+              points: [
+                'Stack — how levels are shown: stacked, exploded, or one at a time.',
+                'Full height — how walls are drawn: full, cut away, low, or translucent.',
+                'Display — grid, measurements, units, camera mode, shading, scene theme and shadows.',
+                'Walkthrough — first-person movement inside the model.',
+                'Preview — hides every editing control. Use it when showing the model to someone.',
+              ],
+            },
+            {
+              heading: 'Bottom toolbar',
+              body: [
+                'The active tools for what you are doing: select, move, measure, delete, and the placement helpers. The letter under each icon is its keyboard shortcut.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'keyboard-shortcuts',
+          title: 'Keyboard shortcuts',
+          description: 'The keys worth learning first.',
+          blocks: [
+            {
+              heading: 'Tools',
+              table: {
+                columns: ['Shortcut', 'Action'],
+                rows: [
+                  ['V', 'Select tool'],
+                  ['M', 'Measure'],
+                  ['Z', 'Orbit / zoom the camera'],
+                  ['X', 'Delete the selection'],
+                ],
+              },
+            },
+            {
+              heading: 'Drawing',
+              table: {
+                columns: ['Shortcut', 'Action'],
+                rows: [
+                  ['C', 'Close the room automatically'],
+                  ['Ctrl', 'Hold to change the snapping grid'],
+                  ['Esc', 'Cancel what you are drawing'],
+                ],
+              },
+            },
+            {
+              heading: 'Editing',
+              table: {
+                columns: ['Shortcut', 'Action'],
+                rows: [
+                  ['Cmd/Ctrl + Z', 'Undo'],
+                  ['Cmd/Ctrl + Shift + Z', 'Redo'],
+                  ['Cmd/Ctrl + C / V', 'Copy and paste the selection'],
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: 'Building',
+      pages: [
+        {
+          slug: 'walls-and-rooms',
+          title: 'Walls and rooms',
+          description: 'Draw straight and curved walls with live measurements and snapping.',
+          blocks: [
+            {
+              heading: 'Drawing',
+              points: [
+                'Two clicks make a wall: start and end. The length and angle follow the cursor as you move.',
+                'Walls snap to the grid and to the ends of other walls, so corners meet cleanly.',
+                'Hold Ctrl to change the snap step while drawing.',
+                'C closes the outline back to your starting point and makes a room of it.',
+              ],
+            },
+            {
+              heading: 'Changing a wall',
+              body: [
+                'Select a wall to edit its thickness, height and material. Drag its ends to move them; the walls attached to it follow.',
+              ],
+            },
+            {
+              heading: 'How walls are shown',
+              body: [
+                'The “Full height” control in the top-right toolbar decides how walls appear while you work: full height, cut away at eye level, low, or translucent. It changes only the view, never the model.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'doors-and-windows',
+          title: 'Doors and windows',
+          description: 'Openings that are cut into the wall, and can be sized exactly.',
+          blocks: [
+            {
+              heading: 'Placing',
+              body: [
+                'Choose a door or window in the Build tab and click on a wall. The opening is cut through the wall, so it is visible from both sides and in the plan view.',
+              ],
+            },
+            {
+              heading: 'Adjusting',
+              points: [
+                'Drag along the wall to reposition.',
+                'Type exact width, height and sill height in the properties panel.',
+                'Flip the opening direction where a door’s swing matters.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'floors-and-levels',
+          title: 'Floors and levels',
+          description: 'Stack storeys, switch between them, and shape floor slabs.',
+          blocks: [
+            {
+              heading: 'Levels',
+              body: [
+                'A scene starts with a ground floor. Add levels above or below it from the level selector at the top-left of the viewport, and switch which one you are editing there too.',
+              ],
+            },
+            {
+              heading: 'Seeing several levels at once',
+              body: [
+                'The “Stack” control decides how levels are drawn together: stacked as a real building, exploded apart to see each one, or solo — only the level you are working on.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'roofs-and-stairs',
+          title: 'Roofs and stairs',
+          description: 'Cover the building and connect its levels.',
+          blocks: [
+            {
+              heading: 'Roofs',
+              body: [
+                'Draw a roof footprint, then choose the roof type and adjust pitch and overhang. The roof follows the outline, so changing the walls under it updates its shape.',
+              ],
+            },
+            {
+              heading: 'Stairs',
+              body: [
+                'Stairs are placed like any other item and connect the level you are on to the one above. Their run and step height can be set exactly in the properties panel.',
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: 'Items and materials',
+      pages: [
+        {
+          slug: 'finding-and-placing-items',
+          title: 'Finding and placing items',
+          description: 'Browse the catalogue, place, arrange and duplicate.',
+          blocks: [
+            {
+              heading: 'Finding',
+              body: [
+                'The Items tab groups the catalogue by category. Pick a category to see what is in it; the same catalogue is available in every scene.',
+              ],
+            },
+            {
+              heading: 'Placing and arranging',
+              points: [
+                'Click in the scene to place. Items snap to walls and to the surfaces of other items.',
+                'Select an item to move, rotate or scale it with the handles in the scene, or to type exact numbers.',
+                'Copy and paste repeats an item with the same configuration.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'materials-and-paint',
+          title: 'Materials and paint',
+          description: 'Give walls, floors and furniture their finish.',
+          blocks: [
+            {
+              heading: 'Painting a surface',
+              body: [
+                'Select a wall, floor or item and choose a material from its properties. The change is per surface, so one wall can differ from the rest of the room.',
+              ],
+            },
+            {
+              heading: 'How it is drawn',
+              body: [
+                'The Display menu switches between solid shading, which is fast and flat, and rendered shading, which adds ambient occlusion and reads much better in presentations.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'warehouse-equipment',
+          title: 'Warehouse equipment',
+          description: 'Pallets, racking, conveyors and the capacity panel.',
+          blocks: [
+            {
+              heading: 'What the plugin adds',
+              points: [
+                'Pallets in EPAL, GMA and plastic sizes.',
+                'Pallet racking with per-bay tunnels, skips and picking levels, following EN 15620 tables.',
+                'Roller conveyor modules with 45°, 90° and 180° curves.',
+              ],
+            },
+            {
+              heading: 'Capacity and clashes',
+              body: [
+                'The equipment carries a capacity and clash panel: it counts what fits and flags where two pieces of equipment occupy the same space, which is the check worth doing before a layout leaves the screen.',
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: 'Projects and access',
+      pages: [
+        {
+          slug: 'scenes-and-publishing',
+          title: 'Scenes and publishing',
+          description: 'Private drafts, and the projects an administrator approves.',
+          blocks: [
+            {
+              heading: 'Your scenes are drafts',
+              body: [
+                'Everything you draw belongs to you. Your scene list shows only your own work; other people cannot see it, and administrators can see it only from the console.',
+              ],
+            },
+            {
+              heading: 'Publishing',
+              body: [
+                'When a project is finished, an administrator publishes it. A published project appears on Sites & Projects as an approved site, which is the catalogue the whole organisation reads.',
+              ],
+            },
+            {
+              heading: 'Withdrawing',
+              body: [
+                'Withdrawing a published project removes its card from Sites & Projects and nothing else — the scene, its contents and its history stay exactly where they were.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'importing-ifc',
+          title: 'Importing an IFC model',
+          description: 'Bring in a model exported from Revit, ArchiCAD or similar.',
+          blocks: [
+            {
+              heading: 'How to import',
+              body: [
+                'Open your scene list and choose “Import IFC”, then pick the .ifc file. A new scene is created from it and opens when the conversion finishes.',
+              ],
+            },
+            {
+              heading: 'What to expect',
+              points: [
+                'Conversion runs inside your browser — the file is not uploaded anywhere until the resulting scene is saved.',
+                'Large models take a while; leave the tab open until it completes.',
+                'Geometry and structure come across. Vendor-specific parametric behaviour does not, so expect to tidy up.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'accounts-and-roles',
+          title: 'Accounts and roles',
+          description: 'Signing in, what each role may do, and two-factor authentication.',
+          blocks: [
+            {
+              heading: 'Getting an account',
+              points: [
+                'Accounts are issued by an administrator. Use “Request access” on the sign-in screen and you will be emailed when it is approved.',
+                'The invitation carries a temporary password; your first sign-in makes you choose your own, and the temporary one dies at that moment.',
+                'If two-factor authentication is required, you enrol it right after setting your password, with any authenticator app.',
+                '“Forgot password” mails a single-use link that is valid for 30 minutes.',
+              ],
+            },
+            {
+              heading: 'What each role may do',
+              table: {
+                columns: ['Role', 'What it allows'],
+                rows: [
+                  ['Viewer', 'Open scenes in preview: look around and measure, but never save'],
+                  ['Editor', 'Create and edit their own scenes'],
+                  [
+                    'Administrator',
+                    'Everything, plus the console: accounts, roles, sites, publishing, audit',
+                  ],
+                ],
+              },
+            },
+            {
+              heading: 'Sessions',
+              body: [
+                'A session ends by itself after a period of inactivity set by your administrator. You can see and revoke your own devices from the console’s Sessions screen.',
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+const TR: GuidesContent = {
+  title: 'DigitalTwin’e hoş geldiniz',
+  lead: [
+    'DigitalTwin, tarayıcıda çalışan bir 3B yapı editörüdür — depo ve bina çizer, katalogdan donatır, içinde gezer ve sonucu iş arkadaşlarınızla paylaşırsınız.',
+    'Çizdiğiniz her şey kendi sunucunuzdaki kendi hesabınıza kaydedilir. Kimin düzenleyebileceğine, kimin yalnız izleyeceğine ve hangi projelerin tüm kuruma yayınlanacağına yönetici karar verir.',
+    'Bu kılavuz hesapsız da okunabilir. Henüz hesabınız yoksa giriş ekranındaki “Hesap talebi oluştur” bağlantısını kullanın.',
+  ],
+  startHere: 'Buradan başlayın',
+  explore: 'Özellikleri keşfedin',
+  groups: [
+    {
+      title: 'Başlarken',
+      pages: [
+        {
+          slug: 'your-first-scene',
+          title: 'İlk sahneniz',
+          description: 'Bir oda çizin, kapı ve pencere ekleyin, ilk nesnelerinizi yerleştirin.',
+          blocks: [
+            {
+              heading: 'Sahneyi oluşturun',
+              body: [
+                'Editörün üst şeridindeki “Son sahneleri aç” ile sahne listenizi açın ve “Yeni sahne oluştur” deyin. Zemin katı hazır, boş bir editöre düşersiniz.',
+              ],
+            },
+            {
+              heading: 'Duvarları çizin',
+              points: [
+                'Sol kenar çubuğundaki Yapı sekmesini açıp duvar aracını seçin.',
+                'Duvarın başlayacağı yere bir, biteceği yere bir kez tıklayın — uzunluk imleçle birlikte canlı görünür.',
+                'Çizerken C tuşuna basarsanız oda ilk noktaya kadar kendiliğinden kapanır.',
+                'Başlayıp bitirmediğiniz bir duvarı Esc ile iptal edersiniz.',
+              ],
+            },
+            {
+              heading: 'Kapı ve pencere ekleyin',
+              body: [
+                'Yine Yapı sekmesinde kapıyı veya pencereyi seçip bir duvara tıklayın. Boşluk duvara gerçekten açılır; sonrasında duvar boyunca kaydırabilir ya da özellikler panelinden tam ölçü yazabilirsiniz.',
+              ],
+            },
+            {
+              heading: 'Nesne yerleştirin',
+              body: [
+                'Katalog Nesneler sekmesindedir. Bir kategori seçip sahneye tıklayarak yerleştirirsiniz. Nesneler duvarlara yapışır, uygun olan yerlerde üst üste istiflenir.',
+              ],
+            },
+            {
+              heading: 'Kaydetme',
+              body: [
+                'Kaydet düğmesi yoktur: çalışmanız siz çizdikçe sunucuya yazılır ve sahne listesi her sahnenin en son ne zaman değiştiğini gösterir. “Tüm sahneler” sizi listeye döndürür.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'interface-tour',
+          title: 'Arayüz turu',
+          description: 'Editörün her bölgesi ne işe yarar.',
+          blocks: [
+            {
+              heading: 'Sol kenar çubuğu',
+              points: [
+                'Sahne — kat kat, ne inşa ettiğinizin yapısı.',
+                'Yapı — duvar, döşeme, kapı, pencere, çatı ve merdiven.',
+                'Nesneler — mobilya ve ekipman kataloğu.',
+                'Ayarlar — sahneye özel tercihler.',
+              ],
+            },
+            {
+              heading: 'Sol üst araç çubuğu',
+              points: [
+                '3B / 2B / Bölünmüş — sahnenin nasıl gösterileceği. Bölünmüş, planla modeli yan yana koyar.',
+                '« düğmesi tam genişlik gerektiğinde kenar çubuğunu toplar.',
+              ],
+            },
+            {
+              heading: 'Sağ üst araç çubuğu',
+              points: [
+                'İstif — katların gösterimi: üst üste, patlatılmış ya da tek kat.',
+                'Tam yükseklik — duvarların çizimi: tam, kesitli, alçak veya yarı saydam.',
+                'Görünüm — ızgara, ölçüler, birimler, kamera kipi, gölgelendirme, sahne teması ve gölgeler.',
+                'Gezinti — modelin içinde birinci şahıs hareket.',
+                'Önizleme — bütün düzenleme araçlarını gizler. Modeli birine gösterirken bunu kullanın.',
+              ],
+            },
+            {
+              heading: 'Alt araç çubuğu',
+              body: [
+                'Yaptığınız işe göre etkin araçlar: seçme, taşıma, ölçme, silme ve yerleştirme yardımcıları. Her simgenin altındaki harf, klavye kısayoludur.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'keyboard-shortcuts',
+          title: 'Klavye kısayolları',
+          description: 'Önce öğrenmeye değer tuşlar.',
+          blocks: [
+            {
+              heading: 'Araçlar',
+              table: {
+                columns: ['Kısayol', 'İşlev'],
+                rows: [
+                  ['V', 'Seçme aracı'],
+                  ['M', 'Ölçüm'],
+                  ['Z', 'Kamerayı döndür / yakınlaştır'],
+                  ['X', 'Seçimi sil'],
+                ],
+              },
+            },
+            {
+              heading: 'Çizim',
+              table: {
+                columns: ['Kısayol', 'İşlev'],
+                rows: [
+                  ['C', 'Odayı otomatik kapat'],
+                  ['Ctrl', 'Basılı tutunca yapışma adımı değişir'],
+                  ['Esc', 'Çizdiğinizi iptal edin'],
+                ],
+              },
+            },
+            {
+              heading: 'Düzenleme',
+              table: {
+                columns: ['Kısayol', 'İşlev'],
+                rows: [
+                  ['Cmd/Ctrl + Z', 'Geri al'],
+                  ['Cmd/Ctrl + Shift + Z', 'İleri al'],
+                  ['Cmd/Ctrl + C / V', 'Seçimi kopyala ve yapıştır'],
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: 'İnşa',
+      pages: [
+        {
+          slug: 'walls-and-rooms',
+          title: 'Duvarlar ve odalar',
+          description: 'Canlı ölçü ve yapışmayla düz veya eğri duvar çizin.',
+          blocks: [
+            {
+              heading: 'Çizim',
+              points: [
+                'Bir duvar iki tıklamadır: başlangıç ve bitiş. Uzunluk ve açı imleci izler.',
+                'Duvarlar ızgaraya ve diğer duvarların uçlarına yapışır; köşeler temiz birleşir.',
+                'Çizerken Ctrl basılı tutmak yapışma adımını değiştirir.',
+                'C, ana hattı başlangıç noktasına kapatıp odaya dönüştürür.',
+              ],
+            },
+            {
+              heading: 'Duvarı değiştirmek',
+              body: [
+                'Bir duvarı seçince kalınlığını, yüksekliğini ve malzemesini düzenlersiniz. Uçlarını sürüklerseniz ona bağlı duvarlar da takip eder.',
+              ],
+            },
+            {
+              heading: 'Duvarların gösterimi',
+              body: [
+                'Sağ üstteki “Tam yükseklik” denetimi, çalışırken duvarların nasıl görüneceğini belirler: tam, göz hizasından kesitli, alçak veya yarı saydam. Yalnız görünümü değiştirir, modele dokunmaz.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'doors-and-windows',
+          title: 'Kapılar ve pencereler',
+          description: 'Duvara gerçekten açılan, tam ölçülendirilebilen boşluklar.',
+          blocks: [
+            {
+              heading: 'Yerleştirme',
+              body: [
+                'Yapı sekmesinden kapı ya da pencere seçip bir duvara tıklayın. Boşluk duvarı baştan başa keser; iki yüzden de ve plan görünümünde görünür.',
+              ],
+            },
+            {
+              heading: 'Ayarlama',
+              points: [
+                'Duvar boyunca sürükleyerek konumlandırın.',
+                'Özellikler panelinden tam genişlik, yükseklik ve denizlik yüksekliği yazın.',
+                'Kapı açılış yönünün önemli olduğu yerlerde yönü çevirin.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'floors-and-levels',
+          title: 'Döşemeler ve katlar',
+          description: 'Katları istifleyin, aralarında geçin, döşemeyi biçimlendirin.',
+          blocks: [
+            {
+              heading: 'Katlar',
+              body: [
+                'Sahne zemin katla başlar. Görünümün sol üstündeki kat seçicisinden üstüne ya da altına kat eklersiniz; hangi katı düzenlediğinizi de oradan değiştirirsiniz.',
+              ],
+            },
+            {
+              heading: 'Birden çok katı birlikte görmek',
+              body: [
+                '“İstif” denetimi katların birlikte nasıl çizileceğine karar verir: gerçek bina gibi üst üste, her birini görmek için patlatılmış ya da tek — yalnız üzerinde çalıştığınız kat.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'roofs-and-stairs',
+          title: 'Çatılar ve merdivenler',
+          description: 'Binayı örtün ve katlarını birbirine bağlayın.',
+          blocks: [
+            {
+              heading: 'Çatılar',
+              body: [
+                'Çatı ana hattını çizin, sonra çatı tipini seçip eğim ve saçak taşmasını ayarlayın. Çatı ana hattı izler; altındaki duvarları değiştirince biçimi güncellenir.',
+              ],
+            },
+            {
+              heading: 'Merdivenler',
+              body: [
+                'Merdiven de diğer nesneler gibi yerleştirilir ve bulunduğunuz katı üsttekine bağlar. Basamak sayısı ve yüksekliği özellikler panelinden tam olarak verilebilir.',
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: 'Nesneler ve malzemeler',
+      pages: [
+        {
+          slug: 'finding-and-placing-items',
+          title: 'Nesne bulmak ve yerleştirmek',
+          description: 'Katalogda gezinin, yerleştirin, düzenleyin, çoğaltın.',
+          blocks: [
+            {
+              heading: 'Bulmak',
+              body: [
+                'Nesneler sekmesi kataloğu kategorilere ayırır. Kategoriye tıklayınca içindekiler görünür; aynı katalog her sahnede vardır.',
+              ],
+            },
+            {
+              heading: 'Yerleştirmek ve düzenlemek',
+              points: [
+                'Yerleştirmek için sahneye tıklayın. Nesneler duvarlara ve diğer nesnelerin yüzeylerine yapışır.',
+                'Seçtiğiniz nesneyi sahnedeki tutamaklarla taşıyın, döndürün, ölçeklendirin ya da tam sayı yazın.',
+                'Kopyala-yapıştır, nesneyi aynı ayarlarla tekrarlar.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'materials-and-paint',
+          title: 'Malzemeler ve boya',
+          description: 'Duvara, döşemeye ve mobilyaya kaplamasını verin.',
+          blocks: [
+            {
+              heading: 'Bir yüzeyi boyamak',
+              body: [
+                'Duvarı, döşemeyi veya nesneyi seçip özelliklerinden malzeme seçin. Değişiklik yüzey bazındadır; bir duvar odanın geri kalanından farklı olabilir.',
+              ],
+            },
+            {
+              heading: 'Nasıl çizildiği',
+              body: [
+                'Görünüm menüsü, hızlı ve düz olan katı gölgelendirme ile ortam gölgelemesi ekleyen ve sunumlarda çok daha iyi duran kaliteli gölgelendirme arasında geçiş yapar.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'warehouse-equipment',
+          title: 'Depo ekipmanları',
+          description: 'Paletler, raflar, konveyörler ve kapasite paneli.',
+          blocks: [
+            {
+              heading: 'Eklentinin getirdikleri',
+              points: [
+                'EPAL, GMA ve plastik ölçülerde paletler.',
+                'Göz bazında tünel, atlama ve toplama seviyeleri olan palet rafları; EN 15620 tablolarına uygun.',
+                '45°, 90° ve 180° virajlı rulolu konveyör modülleri.',
+              ],
+            },
+            {
+              heading: 'Kapasite ve çakışma',
+              body: [
+                'Ekipman bir kapasite ve çakışma paneliyle gelir: neyin sığdığını sayar, iki ekipmanın aynı hacmi paylaştığı yerleri işaretler — bir yerleşim planı ekrandan çıkmadan önce yapılması gereken kontrol budur.',
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: 'Projeler ve erişim',
+      pages: [
+        {
+          slug: 'scenes-and-publishing',
+          title: 'Sahneler ve yayınlama',
+          description: 'Özel taslaklar ve yöneticinin onayladığı projeler.',
+          blocks: [
+            {
+              heading: 'Sahneleriniz taslaktır',
+              body: [
+                'Çizdiğiniz her şey size aittir. Sahne listeniz yalnız sizin çalışmanızı gösterir; başkaları göremez, yöneticiler ise ancak konsoldan görebilir.',
+              ],
+            },
+            {
+              heading: 'Yayınlamak',
+              body: [
+                'Proje bitince yöneticiniz onu yayınlar. Yayınlanan proje, tüm kurumun okuduğu katalog olan Siteler ve Projeler ekranında onaylı saha olarak görünür.',
+              ],
+            },
+            {
+              heading: 'Geri çekmek',
+              body: [
+                'Yayından geri çekmek yalnız kartı kaldırır — sahne, içeriği ve geçmişi olduğu yerde kalır.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'importing-ifc',
+          title: 'IFC modeli içe aktarmak',
+          description: 'Revit, ArchiCAD gibi araçlardan dışa aktarılmış modeli getirin.',
+          blocks: [
+            {
+              heading: 'Nasıl aktarılır',
+              body: [
+                'Sahne listenizi açıp “IFC içe aktar” deyin ve .ifc dosyasını seçin. Dosyadan yeni bir sahne oluşturulur ve dönüşüm bitince açılır.',
+              ],
+            },
+            {
+              heading: 'Ne beklemeli',
+              points: [
+                'Dönüşüm tarayıcınızda çalışır — oluşan sahne kaydedilene kadar dosya hiçbir yere yüklenmez.',
+                'Büyük modeller zaman alır; bitene kadar sekmeyi açık bırakın.',
+                'Geometri ve yapı aktarılır. Üreticiye özgü parametrik davranışlar aktarılmaz; bir miktar düzeltme beklemelisiniz.',
+              ],
+            },
+          ],
+        },
+        {
+          slug: 'accounts-and-roles',
+          title: 'Hesaplar ve roller',
+          description: 'Giriş, hangi rolün ne yapabildiği ve iki adımlı doğrulama.',
+          blocks: [
+            {
+              heading: 'Hesap edinmek',
+              points: [
+                'Hesapları yönetici açar. Giriş ekranındaki “Hesap talebi oluştur” ile başvurun; onaylanınca e-posta alırsınız.',
+                'Davette geçici bir şifre gelir; ilk girişte kendi şifrenizi belirlersiniz ve geçici şifre o anda geçersiz olur.',
+                'İki adımlı doğrulama zorunluysa, şifrenizi belirledikten hemen sonra herhangi bir doğrulayıcı uygulamayla kaydolursunuz.',
+                '“Şifremi unuttum”, 30 dakika geçerli tek kullanımlık bir bağlantı gönderir.',
+              ],
+            },
+            {
+              heading: 'Hangi rol ne yapabilir',
+              table: {
+                columns: ['Rol', 'Neye izin verir'],
+                rows: [
+                  ['İzleyici', 'Sahneleri önizlemede açar: gezer ve ölçer, ama kaydedemez'],
+                  ['Editör', 'Kendi sahnelerini oluşturur ve düzenler'],
+                  [
+                    'Yönetici',
+                    'Her şey, ayrıca konsol: hesaplar, roller, sahalar, yayınlama, denetim',
+                  ],
+                ],
+              },
+            },
+            {
+              heading: 'Oturumlar',
+              body: [
+                'Oturum, yöneticinizin belirlediği hareketsizlik süresinden sonra kendiliğinden kapanır. Kendi cihazlarınızı konsolun Oturumlar ekranından görüp sonlandırabilirsiniz.',
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+export function guidesFor(lang: Lang): GuidesContent {
+  return lang === 'tr' ? TR : EN
+}
+
+export function guidePageFor(lang: Lang, slug: string): GuidePage | null {
+  for (const group of guidesFor(lang).groups) {
+    const page = group.pages.find((p) => p.slug === slug)
+    if (page) return page
+  }
+  return null
+}
+
+export function allGuideSlugs(): string[] {
+  return EN.groups.flatMap((group) => group.pages.map((page) => page.slug))
+}
diff --git a/apps/editor/lib/scene-api-security.test.ts b/apps/editor/lib/scene-api-security.test.ts
index 6494b5dd7..d9fa8ce63 100644
--- a/apps/editor/lib/scene-api-security.test.ts
+++ b/apps/editor/lib/scene-api-security.test.ts
@@ -4,9 +4,9 @@ import { guardSceneApiRequest, sceneApiPreflight } from './scene-api-security'
 const OLD_ENV = { ...process.env }
 
 afterEach(() => {
-  restoreEnv('PASCAL_SCENE_API_TOKEN')
-  restoreEnv('PASCAL_SCENE_API_ORIGINS')
-  restoreEnv('PASCAL_SCENE_API_RATE_LIMIT')
+  restoreEnv('DIGITALTWIN_SCENE_API_TOKEN')
+  restoreEnv('DIGITALTWIN_SCENE_API_ORIGINS')
+  restoreEnv('DIGITALTWIN_SCENE_API_RATE_LIMIT')
 })
 
 function restoreEnv(key: keyof NodeJS.ProcessEnv): void {
@@ -15,7 +15,7 @@ function restoreEnv(key: keyof NodeJS.ProcessEnv): void {
 }
 
 test('allows loopback scene API requests without a token', () => {
-  delete process.env.PASCAL_SCENE_API_TOKEN
+  delete process.env.DIGITALTWIN_SCENE_API_TOKEN
   const request = new Request('http://127.0.0.1:3000/api/scenes', {
     headers: { host: '127.0.0.1:3000' },
   })
@@ -24,7 +24,7 @@ test('allows loopback scene API requests without a token', () => {
 })
 
 test('requires a token for non-loopback scene API requests', async () => {
-  delete process.env.PASCAL_SCENE_API_TOKEN
+  delete process.env.DIGITALTWIN_SCENE_API_TOKEN
   const request = new Request('https://editor.example/api/scenes', {
     headers: { host: 'editor.example' },
   })
@@ -36,7 +36,7 @@ test('requires a token for non-loopback scene API requests', async () => {
 })
 
 test('accepts bearer token auth when configured', () => {
-  process.env.PASCAL_SCENE_API_TOKEN = 'secret'
+  process.env.DIGITALTWIN_SCENE_API_TOKEN = 'secret'
   const request = new Request('https://editor.example/api/scenes', {
     headers: {
       authorization: 'Bearer secret',
@@ -48,7 +48,7 @@ test('accepts bearer token auth when configured', () => {
 })
 
 test('applies configured CORS origins for preflight', () => {
-  process.env.PASCAL_SCENE_API_ORIGINS = 'https://app.example'
+  process.env.DIGITALTWIN_SCENE_API_ORIGINS = 'https://app.example'
   const request = new Request('https://editor.example/api/scenes', {
     method: 'OPTIONS',
     headers: {
diff --git a/apps/editor/lib/scene-api-security.ts b/apps/editor/lib/scene-api-security.ts
index 2dd3819a6..2a41c4324 100644
--- a/apps/editor/lib/scene-api-security.ts
+++ b/apps/editor/lib/scene-api-security.ts
@@ -1,10 +1,12 @@
 import { timingSafeEqual } from 'node:crypto'
+import { readEnv } from '@pascal-app/mcp/env'
 import { NextResponse } from 'next/server'
 
 const DEFAULT_RATE_LIMIT_PER_MINUTE = 120
 const WINDOW_MS = 60_000
 const ALLOWED_METHODS = 'GET, POST, PUT, PATCH, DELETE, OPTIONS'
-const ALLOWED_HEADERS = 'authorization, content-type, if-match, last-event-id, x-pascal-scene-token'
+const ALLOWED_HEADERS =
+  'authorization, content-type, if-match, last-event-id, x-digitaltwin-scene-token, x-pascal-scene-token'
 
 type RateBucket = {
   resetAt: number
@@ -63,13 +65,21 @@ function validateOrigin(request: Request): NextResponse | null {
 }
 
 function validateAuth(request: Request): NextResponse | null {
-  const token = process.env.PASCAL_SCENE_API_TOKEN
+  const token = readEnv(process.env, 'SCENE_API_TOKEN')
   if (!token) {
     if (isLoopbackRequest(request)) return null
+    // With no token configured the API still serves the app's own pages.
+    // Everything cross-origin was already rejected above; anything that is
+    // neither loopback nor a same-origin browser request — scripts, other
+    // servers — falls through and needs the token.
+    if (isSameOriginBrowserRequest(request)) return null
     return sceneApiJson(request, { error: 'scene_api_token_required' }, { status: 503 })
   }
 
-  const supplied = bearerToken(request) ?? request.headers.get('x-pascal-scene-token')
+  const supplied =
+    bearerToken(request) ??
+    request.headers.get('x-digitaltwin-scene-token') ??
+    request.headers.get('x-pascal-scene-token')
   if (supplied && safeEqual(supplied, token)) return null
   return sceneApiJson(request, { error: 'unauthorized' }, { status: 401 })
 }
@@ -110,7 +120,7 @@ function safeEqual(a: string, b: string): boolean {
 }
 
 function rateLimitPerMinute(): number {
-  const raw = process.env.PASCAL_SCENE_API_RATE_LIMIT
+  const raw = readEnv(process.env, 'SCENE_API_RATE_LIMIT')
   if (!raw) return DEFAULT_RATE_LIMIT_PER_MINUTE
   const n = Number.parseInt(raw, 10)
   return Number.isFinite(n) ? n : DEFAULT_RATE_LIMIT_PER_MINUTE
@@ -131,7 +141,7 @@ function isOriginAllowed(request: Request, origin: string): boolean {
 }
 
 function configuredOrigins(): Set<string> {
-  const raw = process.env.PASCAL_SCENE_API_ORIGINS
+  const raw = readEnv(process.env, 'SCENE_API_ORIGINS')
   if (!raw) return new Set()
   return new Set(
     raw
@@ -142,16 +152,36 @@ function configuredOrigins(): Set<string> {
   )
 }
 
+/**
+ * Compares hosts rather than full origins: behind a TLS-terminating proxy the
+ * request URL keeps the internal scheme, so a scheme comparison would reject
+ * the app's own pages. The host is the part that matters for CSRF anyway.
+ */
 function isSameOrigin(request: Request, origin: string): boolean {
   const parsedOrigin = parseUrl(origin)
   if (!parsedOrigin) return false
-  const requestUrl = new URL(request.url)
-  return normalizeOrigin(parsedOrigin) === normalizeOrigin(requestUrl)
+  return parsedOrigin.host.toLowerCase() === requestHost(request)
+}
+
+/**
+ * Browsers omit Origin on same-origin GETs — which is how the editor opens its
+ * live scene event stream — but they do send Sec-Fetch-Site on every request,
+ * and it cannot be set from script. Non-browser callers send neither.
+ */
+function isSameOriginBrowserRequest(request: Request): boolean {
+  const origin = request.headers.get('origin')
+  if (origin) return isOriginAllowed(request, origin)
+  return request.headers.get('sec-fetch-site') === 'same-origin'
+}
+
+function requestHost(request: Request): string {
+  const forwarded = request.headers.get('x-forwarded-host')?.split(',')[0]?.trim()
+  const host = forwarded || request.headers.get('host') || new URL(request.url).host
+  return host.toLowerCase()
 }
 
 function isLoopbackRequest(request: Request): boolean {
-  const host = request.headers.get('host') ?? new URL(request.url).host
-  return isLoopbackHostname(stripPort(host))
+  return isLoopbackHostname(stripPort(requestHost(request)))
 }
 
 function isLoopbackHostname(hostname: string): boolean {
diff --git a/apps/editor/lib/slugify.ts b/apps/editor/lib/slugify.ts
new file mode 100644
index 000000000..4f9850f85
--- /dev/null
+++ b/apps/editor/lib/slugify.ts
@@ -0,0 +1,28 @@
+/**
+ * Stable anchor ids for headings, safe for Turkish text: the dotted/dotless
+ * i pair and the other Turkish letters are folded to ASCII rather than
+ * dropped, so `Sahne çizmek` and `Sahne cizmek` cannot collide with each
+ * other or vanish into an empty id.
+ */
+const FOLD: Record<string, string> = {
+  ç: 'c',
+  ğ: 'g',
+  ı: 'i',
+  i: 'i',
+  İ: 'i',
+  ö: 'o',
+  ş: 's',
+  ü: 'u',
+}
+
+export function slugify(value: string): string {
+  return (
+    value
+      .toLowerCase()
+      .replace(/[çğıiİöşü]/g, (char) => FOLD[char] ?? char)
+      .normalize('NFD')
+      .replace(/[̀-ͯ]/g, '')
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '') || 'section'
+  )
+}
diff --git a/apps/editor/next.config.ts b/apps/editor/next.config.ts
index 18fb18206..8b18f91c5 100644
--- a/apps/editor/next.config.ts
+++ b/apps/editor/next.config.ts
@@ -1,6 +1,17 @@
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
+  // Hostinger runs the app from a self-contained bundle; see hostinger-server.js.
+  output: 'standalone',
+  // Dev-only. Without these, the dev server refuses the HMR websocket for any
+  // origin other than localhost, and because Turbopack delivers module updates
+  // over that socket the page loads its shell and then hangs waiting for lazy
+  // chunks that never arrive — with no error beyond a websocket handshake
+  // failure. Needed to open the editor from a tablet or another machine.
+  // The public entry (via the router's forwarded port) has to be listed too —
+  // the check is on the Host header, so a LAN entry does not cover the same
+  // machine reached from outside. Update this if the WAN address changes.
+  allowedDevOrigins: ['192.168.1.101', '192.168.1.*', '*.local', '95.70.136.179'],
   logging: {
     browserToTerminal: true,
   },
@@ -13,7 +24,9 @@ const nextConfig: NextConfig = {
     '@pascal-app/core',
     '@pascal-app/editor',
     '@pascal-app/mcp',
+    '@pascal-app/ifc-converter',
     '@pascal-app/plugin-trees',
+    '@ovurrsl/plugin-warehouse',
     '@dgreenheck/ez-tree',
   ],
   turbopack: {
@@ -24,11 +37,22 @@ const nextConfig: NextConfig = {
       '@react-three/drei': './node_modules/@react-three/drei',
     },
   },
+  // The console's db driver and argon2 are native/dynamic-require packages the
+  // bundler must not inline; both ship as real node_modules in the deploy
+  // bundle. Neither is in transpilePackages, so no conflict.
+  serverExternalPackages: ['@node-rs/argon2'],
   experimental: {
     serverActions: {
       bodySizeLimit: '100mb',
     },
   },
+  // web-ifc parses IFC in a WASM module. It is fetched from the app's own
+  // origin (scripts/copy-web-ifc-wasm.mjs puts the blobs in public/), which
+  // keeps `WebAssembly.instantiateStreaming` happy about the MIME type.
+  webpack: (config) => {
+    config.experiments = { ...config.experiments, asyncWebAssembly: true }
+    return config
+  },
   images: {
     unoptimized: process.env.NEXT_PUBLIC_ASSETS_CDN_URL?.startsWith('http://localhost') ?? false,
     remotePatterns: [
diff --git a/apps/editor/package.json b/apps/editor/package.json
index e9acf4f63..c3d41ccd1 100644
--- a/apps/editor/package.json
+++ b/apps/editor/package.json
@@ -4,17 +4,22 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "dotenv -e ../../.env.local -- next dev --port ${PORT:-3002}",
-    "build": "dotenv -e ../../.env.local -- next build",
+    "predev": "node scripts/copy-web-ifc-wasm.mjs",
+    "dev": "next dev --port 3002",
+    "prebuild": "node scripts/copy-web-ifc-wasm.mjs",
+    "build": "next build",
     "start": "next start",
     "lint": "biome lint",
     "check-types": "next typegen && tsgo --noEmit"
   },
   "dependencies": {
     "@iconify/react": "^6.0.2",
+    "@node-rs/argon2": "^2.0.2",
     "@number-flow/react": "^0.6.0",
+    "@ovurrsl/plugin-warehouse": "git+https://github.com/ovurrsl/plugin-warehouse.git#b53d9dee7623039a89fe3390716e96ad95af7164",
     "@pascal-app/core": "*",
     "@pascal-app/editor": "*",
+    "@pascal-app/ifc-converter": "*",
     "@pascal-app/mcp": "*",
     "@pascal-app/nodes": "*",
     "@pascal-app/plugin-trees": "github:pascalorg/plugin-trees#56d978cd9b409b716207b3f3d269455d3cd6f067",
@@ -26,19 +31,27 @@
     "clsx": "^2.1.1",
     "geist": "^1.7.0",
     "lucide-react": "^1.7.0",
+    "mysql2": "^3.15.4",
     "next": "16.2.9",
+    "nodemailer": "^9.0.3",
+    "otpauth": "^9.5.1",
     "postcss": "^8.5.6",
+    "qrcode": "^1.5.4",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1",
     "three": "^0.185.0",
+    "ulid": "^3.0.2",
+    "web-ifc": "^0.0.77",
     "zod": "^4.3.5"
   },
   "devDependencies": {
     "@pascal/typescript-config": "*",
     "@types/howler": "^2.2.12",
     "@types/node": "^22.19.12",
+    "@types/nodemailer": "^8.0.1",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "agentation": "^3.0.2",
@@ -47,4 +60,4 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "6.0.3"
   }
-}
+}
\ No newline at end of file
diff --git a/apps/editor/panel/components/app-providers.tsx b/apps/editor/panel/components/app-providers.tsx
new file mode 100644
index 000000000..8b1bb0895
--- /dev/null
+++ b/apps/editor/panel/components/app-providers.tsx
@@ -0,0 +1,167 @@
+'use client'
+
+import { DEFAULT_LANG, type Dictionary, dictionaryFor } from '@panel/lib/i18n'
+import type { Lang, Theme } from '@panel/lib/types'
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+
+const THEME_KEY = 'digitaltwin_theme'
+const CHOICE_KEY = 'digitaltwin_theme_choice'
+const LANG_KEY = 'digitaltwin_lang'
+
+interface AppShell {
+  theme: Theme
+  /** What the person picked; 'system' follows the OS and keeps following it. */
+  themeChoice: Theme | 'system'
+  lang: Lang
+  t: Dictionary
+  toggleTheme: () => void
+  setThemeChoice: (choice: Theme | 'system') => void
+  toggleLang: () => void
+  setTheme: (theme: Theme) => void
+  setLang: (lang: Lang) => void
+}
+
+const Ctx = createContext<AppShell | null>(null)
+
+export function useApp(): AppShell {
+  const value = useContext(Ctx)
+  if (!value) throw new Error('useApp must be used inside <AppProviders>')
+  return value
+}
+
+/** Convenience for components that only need the dictionary. */
+export function useT(): Dictionary {
+  return useApp().t
+}
+
+export function AppProviders({
+  initialTheme,
+  initialLang,
+  children,
+}: {
+  initialTheme: Theme
+  initialLang: Lang
+  children: React.ReactNode
+}) {
+  const [theme, setThemeState] = useState<Theme>(initialTheme)
+  const [choice, setChoiceState] = useState<Theme | 'system'>('system')
+  const [lang, setLangState] = useState<Lang>(initialLang)
+
+  /**
+   * The `lang` attribute drives screen-reader pronunciation, hyphenation and
+   * font selection, so it tracks the dictionary.
+   *
+   * It is deliberately NOT what capitalisation depends on. `text-transform:
+   * uppercase` is specified to follow the document language, but Chromium still
+   * renders İŞLEMCİ as ISLEMCI under lang="tr" — so every uppercase label goes
+   * through <Caps>, which uses toLocaleUpperCase and cannot silently regress.
+   */
+  useEffect(() => {
+    document.documentElement.lang = lang
+    // The tokens hang off whichever element carries [data-dt-theme] — the
+    // layout wrapper renders on the server and cannot re-render from client
+    // state, so every one of them is updated rather than just the root.
+    for (const node of document.querySelectorAll<HTMLElement>('[data-dt-theme]')) {
+      node.dataset.dtTheme = theme
+    }
+    document.documentElement.dataset.dtTheme = theme
+  }, [lang, theme])
+
+  /**
+   * Writes the resolved theme (what the server should render next time) and
+   * separately what the person actually chose. "system" is the default and
+   * keeps meaning system: the OS flipping at dusk moves the page with it,
+   * while an explicit light or dark survives that.
+   */
+  const persist = useCallback((resolved: Theme, choice: Theme | 'system') => {
+    setThemeState(resolved)
+    try {
+      localStorage.setItem(THEME_KEY, choice)
+      document.cookie = `${THEME_KEY}=${resolved};path=/;max-age=31536000;samesite=lax`
+      document.cookie = `${CHOICE_KEY}=${choice};path=/;max-age=31536000;samesite=lax`
+    } catch {
+      /* private mode — the in-memory state still works for this tab */
+    }
+  }, [])
+
+  const setTheme = useCallback(
+    (next: Theme) => {
+      persist(next, next)
+    },
+    [persist],
+  )
+
+  const setThemeChoice = useCallback(
+    (next: Theme | 'system') => {
+      const resolved =
+        next === 'system'
+          ? window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'
+          : next
+      setChoiceState(next)
+      persist(resolved, next)
+    },
+    [persist],
+  )
+
+  const setLang = useCallback((next: Lang) => {
+    setLangState(next)
+    try {
+      localStorage.setItem(LANG_KEY, next)
+      document.cookie = `${LANG_KEY}=${next};path=/;max-age=31536000;samesite=lax`
+    } catch {
+      /* ignore */
+    }
+  }, [])
+
+  // Reconcile once on mount: the server rendered from a cookie, but the stored
+  // choice — or, when there is none, the OS — is the authority.
+  useEffect(() => {
+    let stored: string | null = null
+    let storedLang: string | null = null
+    try {
+      stored = localStorage.getItem(THEME_KEY)
+      storedLang = localStorage.getItem(LANG_KEY)
+    } catch {
+      /* ignore */
+    }
+
+    const initial: Theme | 'system' =
+      stored === 'dark' || stored === 'light' || stored === 'system' ? stored : 'system'
+    setChoiceState(initial)
+    setThemeChoice(initial)
+
+    if ((storedLang === 'en' || storedLang === 'tr') && storedLang !== lang) setLang(storedLang)
+    // Mount-only on purpose — this reconciles the server guess, it does not track changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Only "system" listens; an explicit choice must outlive the OS changing.
+  useEffect(() => {
+    if (choice !== 'system') return
+    const media = window.matchMedia('(prefers-color-scheme: dark)')
+    const onChange = () => setThemeChoice('system')
+    media.addEventListener('change', onChange)
+    return () => media.removeEventListener('change', onChange)
+  }, [choice, setThemeChoice])
+
+  const value = useMemo<AppShell>(
+    () => ({
+      theme,
+      themeChoice: choice,
+      lang,
+      t: dictionaryFor(lang),
+      toggleTheme: () => setTheme(theme === 'dark' ? 'light' : 'dark'),
+      setThemeChoice,
+      toggleLang: () => setLang(lang === 'en' ? 'tr' : 'en'),
+      setTheme,
+      setLang,
+    }),
+    [theme, choice, lang, setTheme, setThemeChoice, setLang],
+  )
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>
+}
+
+export { CHOICE_KEY, DEFAULT_LANG, LANG_KEY, THEME_KEY }
diff --git a/apps/editor/panel/components/auth/auth-shell.tsx b/apps/editor/panel/components/auth/auth-shell.tsx
new file mode 100644
index 000000000..c29ef5d57
--- /dev/null
+++ b/apps/editor/panel/components/auth/auth-shell.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { GlowBlobs, GridBackdrop } from '@panel/components/ui/backdrop'
+import { LangToggle, ThemeToggle } from '@panel/components/ui/controls'
+import { useBreakpoint } from '@panel/lib/hooks/use-breakpoint'
+import type { ReactNode } from 'react'
+
+/**
+ * The shared frame for the six single-column auth screens (sign-in has its own
+ * two-pane layout). Centred column, 400 px card ceiling, grid backdrop behind.
+ * Below 700 px the card takes the full width and the backdrop grid switches off,
+ * which is what keeps a phone from paying for a decorative animation.
+ */
+export function AuthShell({
+  children,
+  label,
+  paused = false,
+}: {
+  children: ReactNode
+  label: string
+  paused?: boolean
+}) {
+  const { isMobile } = useBreakpoint()
+
+  return (
+    <div
+      data-screen-label={label}
+      className="relative flex min-h-screen items-center justify-center overflow-hidden bg-bg px-6 py-10 text-fg"
+    >
+      {!isMobile ? (
+        <>
+          <GridBackdrop paused={paused} />
+          <GlowBlobs />
+        </>
+      ) : null}
+
+      {/* A landmark, not a div: the console shell already wraps its content in
+          <main>, and without the same here every auth screen offered a screen
+          reader no way to skip the backdrop and the two toggles. */}
+      <main className="relative z-10 flex w-full max-w-[420px] flex-col items-center gap-4">
+        <div className="flex w-full items-center justify-end gap-[6px]">
+          <ThemeToggle />
+          <LangToggle />
+        </div>
+        {children}
+      </main>
+    </div>
+  )
+}
+
+/** The mono signature line that closes every auth screen. */
+export function AuthFooter({
+  protectedUpper,
+  signature,
+}: {
+  protectedUpper: string
+  signature: string
+}) {
+  return (
+    // No text-transform here: one uppercase pass over mixed Turkish and brand
+    // text is always wrong for half of it, so the literals carry their own case.
+    <p className="m-0 font-mono text-[9px] leading-[1.6] tracking-[0.1em] text-muted-fg">
+      {protectedUpper} · {signature}
+    </p>
+  )
+}
diff --git a/apps/editor/panel/components/auth/mfa-recovery-screen.tsx b/apps/editor/panel/components/auth/mfa-recovery-screen.tsx
new file mode 100644
index 000000000..1d3bb22e6
--- /dev/null
+++ b/apps/editor/panel/components/auth/mfa-recovery-screen.tsx
@@ -0,0 +1,117 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { AuthFooter, AuthShell } from '@panel/components/auth/auth-shell'
+import { AuthCard, Button, Field, FieldLabel } from '@panel/components/ui/controls'
+import { ErrorBox, Kicker, ScreenTitle, SuccessMark } from '@panel/components/ui/feedback'
+import type { MfaRecoveryResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { resolveApiMessage } from '@panel/lib/i18n'
+import { useRouter } from 'next/navigation'
+import { useCallback, useState } from 'react'
+
+export function MfaRecoveryScreen() {
+  const { t } = useApp()
+  const router = useRouter()
+
+  const [value, setValue] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [done, setDone] = useState(false)
+  const [remaining, setRemaining] = useState(0)
+  const [nextRoute, setNextRoute] = useState('/console/overview')
+
+  const submit = useCallback(async () => {
+    // Client-side shape check first, so an obviously malformed code never costs
+    // a failed attempt against the account's lockout counter.
+    if (!/^[A-Za-z0-9]{4}-[A-Za-z0-9]{4}$/.test(value.trim())) {
+      setError(t.recErr)
+      return
+    }
+
+    setBusy(true)
+    setError(null)
+    const res = await call<MfaRecoveryResponse>('/api/mfa/recovery', {
+      body: { code: value.trim().toUpperCase() },
+    })
+    setBusy(false)
+
+    if (!res.ok) {
+      setError(
+        resolveApiMessage(t, res.messageKey, {
+          seconds: Number(res.details.retryAfterSeconds ?? 30),
+        }),
+      )
+      return
+    }
+
+    setRemaining(res.data.codesRemaining)
+    setNextRoute(res.data.state === 'firstSignIn' ? '/welcome' : '/console/overview')
+    setDone(true)
+  }, [value, t])
+
+  return (
+    <AuthShell label="Recovery sign-in">
+      <AuthCard gap={18}>
+        {done ? (
+          <div className="flex flex-col gap-5">
+            <SuccessMark />
+            <div className="flex flex-col gap-[5px]">
+              <h1 className="m-0 text-[18px] font-semibold tracking-[-0.01em]">{t.recDoneTitle}</h1>
+              <p className="m-0 text-[12.5px] leading-[1.55] text-muted-fg text-pretty">
+                {t.recDoneLead}
+              </p>
+              <span className="font-mono text-[11px] text-muted-fg">
+                {remaining} {t.muTitleCodes.toLocaleLowerCase()}
+              </span>
+            </div>
+            <Button onClick={() => router.push(nextRoute)}>{t.recGoConsole}</Button>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-[18px]">
+            <div className="flex flex-col gap-[3px]">
+              <Kicker>{t.recKick}</Kicker>
+              <ScreenTitle title={t.recTitle} lead={t.recLead} />
+            </div>
+
+            {error ? <ErrorBox shield={false}>{error}</ErrorBox> : null}
+
+            <div className="flex flex-col gap-[6px]">
+              <FieldLabel htmlFor="dt-recovery">{t.recLabel}</FieldLabel>
+              <Field
+                id="dt-recovery"
+                type="text"
+                autoComplete="off"
+                spellCheck={false}
+                placeholder="XXXX-XXXX"
+                value={value}
+                invalid={Boolean(error)}
+                onChange={(e) => {
+                  setValue(e.target.value.toUpperCase())
+                  setError(null)
+                }}
+                onKeyDown={(e) => e.key === 'Enter' && void submit()}
+                className="font-mono uppercase tracking-[0.08em]"
+              />
+            </div>
+
+            <div className="flex flex-col gap-[10px]">
+              <Button onClick={() => void submit()} disabled={busy}>
+                {t.recCta}
+              </Button>
+              <button
+                type="button"
+                onClick={() => router.push('/mfa')}
+                className="bg-transparent text-[11.5px] text-muted-fg hover:text-fg"
+              >
+                {t.recBack}
+              </button>
+            </div>
+          </div>
+        )}
+      </AuthCard>
+
+      <AuthFooter protectedUpper={t.protectedUpper} signature={t.signature} />
+    </AuthShell>
+  )
+}
diff --git a/apps/editor/panel/components/auth/mfa-setup-screen.tsx b/apps/editor/panel/components/auth/mfa-setup-screen.tsx
new file mode 100644
index 000000000..99a99f312
--- /dev/null
+++ b/apps/editor/panel/components/auth/mfa-setup-screen.tsx
@@ -0,0 +1,220 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { AuthFooter, AuthShell } from '@panel/components/auth/auth-shell'
+import { OtpInput } from '@panel/components/auth/otp-input'
+import { Caps } from '@panel/components/ui/caps'
+import { AuthCard, Button, Checkbox } from '@panel/components/ui/controls'
+import { ErrorBox, Kicker, ScreenTitle } from '@panel/components/ui/feedback'
+import type { MfaSetupResponse, MfaVerifyResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { resolveApiMessage } from '@panel/lib/i18n'
+import { QrCode } from 'lucide-react'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState } from 'react'
+
+type Step = 'scan' | 'verify' | 'codes'
+
+export function MfaSetupScreen() {
+  const { t } = useApp()
+  const router = useRouter()
+
+  const [step, setStep] = useState<Step>('scan')
+  const [qr, setQr] = useState<string | null>(null)
+  const [manualKey, setManualKey] = useState('')
+  const [code, setCode] = useState<string[]>(Array(6).fill(''))
+  const [recoveryCodes, setRecoveryCodes] = useState<string[]>([])
+  const [stored, setStored] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    void (async () => {
+      const res = await call<MfaSetupResponse>('/api/mfa/setup', { body: {} })
+      if (!res.ok) {
+        if (res.code === 'unauthenticated') {
+          router.replace('/signin')
+          return
+        }
+        // Already enrolled — the code screen is the right place, not setup.
+        if (res.code === 'conflict') {
+          router.replace('/mfa')
+          return
+        }
+        setError(resolveApiMessage(t, res.messageKey))
+        return
+      }
+      setQr(res.data.qrDataUrl)
+      setManualKey(res.data.manualKey)
+    })()
+    // Runs once: a re-run would mint a new secret mid-enrolment.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const verify = useCallback(
+    async (joined?: string) => {
+      const value = joined ?? code.join('')
+      if (value.length !== 6) {
+        setError(t.muCodeErr)
+        return
+      }
+
+      setBusy(true)
+      setError(null)
+      const res = await call<MfaVerifyResponse>('/api/mfa/verify', {
+        body: { code: value, trustDevice: false },
+      })
+      setBusy(false)
+
+      if (!res.ok) {
+        setError(
+          resolveApiMessage(t, res.messageKey, {
+            seconds: Number(res.details.retryAfterSeconds ?? 30),
+          }),
+        )
+        setCode(Array(6).fill(''))
+        return
+      }
+
+      setRecoveryCodes(res.data.recoveryCodes ?? [])
+      setStep('codes')
+    },
+    [code, t],
+  )
+
+  const copyKey = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(manualKey.replace(/\s/g, ''))
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1600)
+    } catch {
+      /* clipboard blocked — the key is on screen to type by hand */
+    }
+  }, [manualKey])
+
+  const downloadCodes = useCallback(() => {
+    const body =
+      `DigitalTwin — recovery codes\n` +
+      `Each code works once. Store them somewhere safe and offline.\n\n` +
+      recoveryCodes.map((c) => `  ${c}`).join('\n') +
+      `\n`
+    const url = URL.createObjectURL(new Blob([body], { type: 'text/plain;charset=utf-8' }))
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = 'digitaltwin-recovery-codes.txt'
+    anchor.click()
+    URL.revokeObjectURL(url)
+  }, [recoveryCodes])
+
+  const title =
+    step === 'scan' ? t.muTitleScan : step === 'verify' ? t.muTitleVerify : t.muTitleCodes
+  const lead = step === 'scan' ? t.muLeadScan : step === 'verify' ? t.muLeadVerify : t.muLeadCodes
+
+  return (
+    <AuthShell label="2FA setup">
+      <AuthCard gap={18}>
+        <div className="flex flex-col gap-[3px]">
+          <Kicker>{t.muKick}</Kicker>
+          <ScreenTitle title={title} lead={lead} />
+        </div>
+
+        {error ? <ErrorBox shield={false}>{error}</ErrorBox> : null}
+
+        {step === 'scan' ? (
+          <>
+            <div className="flex items-stretch gap-[14px]">
+              <div className="flex h-[118px] w-[118px] shrink-0 flex-col items-center justify-center gap-[6px] rounded-[10px] border border-dashed border-input bg-field text-muted-fg">
+                {qr ? (
+                  <Image
+                    src={qr}
+                    alt={t.muQr}
+                    width={106}
+                    height={106}
+                    unoptimized
+                    className="rounded-[4px] bg-white p-1"
+                  />
+                ) : (
+                  <>
+                    <QrCode className="block h-[26px] w-[26px]" strokeWidth={1.8} />
+                    <Caps className="font-mono text-[8.5px] tracking-[0.12em]">{t.muQr}</Caps>
+                  </>
+                )}
+              </div>
+              <div className="flex min-w-0 flex-1 flex-col justify-center gap-2">
+                <Caps className="text-[10px] font-medium tracking-[0.12em] text-muted-fg">
+                  {t.muManual}
+                </Caps>
+                <span className="break-all font-mono text-xs tracking-[0.04em] text-fg">
+                  {manualKey || '····'}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => void copyKey()}
+                  className="h-[26px] self-start rounded-[7px] border border-input bg-field px-[10px] text-[11px] font-medium text-fg hover:bg-hover"
+                >
+                  {copied ? t.muCopied : t.muCopy}
+                </button>
+              </div>
+            </div>
+            <Button onClick={() => setStep('verify')} disabled={!manualKey}>
+              {t.muContinue}
+            </Button>
+          </>
+        ) : null}
+
+        {step === 'verify' ? (
+          <>
+            <OtpInput
+              value={code}
+              onChange={setCode}
+              onComplete={(joined) => void verify(joined)}
+              invalid={Boolean(error)}
+            />
+            <div className="flex flex-col gap-[10px]">
+              <Button onClick={() => void verify()} disabled={busy}>
+                {t.muVerify}
+              </Button>
+              <button
+                type="button"
+                onClick={() => setStep('scan')}
+                className="bg-transparent text-[11.5px] text-muted-fg hover:text-fg"
+              >
+                {t.muBack}
+              </button>
+            </div>
+          </>
+        ) : null}
+
+        {step === 'codes' ? (
+          <>
+            <div className="grid grid-cols-2 gap-[6px] rounded-[10px] border border-border bg-field p-3">
+              {recoveryCodes.map((rc) => (
+                <span key={rc} className="font-mono text-[11.5px] tracking-[0.05em] text-fg">
+                  {rc}
+                </span>
+              ))}
+            </div>
+            <Button variant="secondary" onClick={downloadCodes}>
+              {t.muDownload}
+            </Button>
+            <Checkbox checked={stored} onChange={setStored}>
+              {t.muSavedLbl}
+            </Checkbox>
+            {/* The finish button stays inert until the codes are acknowledged —
+                the one place in the flow where a checkbox is a real gate. */}
+            <div
+              className="flex flex-col"
+              style={{ opacity: stored ? 1 : 0.45, pointerEvents: stored ? 'auto' : 'none' }}
+            >
+              <Button onClick={() => router.push('/console/overview')}>{t.muFinish}</Button>
+            </div>
+          </>
+        ) : null}
+      </AuthCard>
+
+      <AuthFooter protectedUpper={t.protectedUpper} signature={t.signature} />
+    </AuthShell>
+  )
+}
diff --git a/apps/editor/panel/components/auth/mfa-verify-screen.tsx b/apps/editor/panel/components/auth/mfa-verify-screen.tsx
new file mode 100644
index 000000000..3921415dd
--- /dev/null
+++ b/apps/editor/panel/components/auth/mfa-verify-screen.tsx
@@ -0,0 +1,139 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { AuthFooter, AuthShell } from '@panel/components/auth/auth-shell'
+import { OtpInput } from '@panel/components/auth/otp-input'
+import { Caps } from '@panel/components/ui/caps'
+import { AuthCard, Button, Checkbox } from '@panel/components/ui/controls'
+import { ErrorBox, Kicker, ScreenTitle } from '@panel/components/ui/feedback'
+import type { MfaVerifyResponse, SessionResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { resolveApiMessage } from '@panel/lib/i18n'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState } from 'react'
+
+export function MfaVerifyScreen() {
+  const { t } = useApp()
+  const router = useRouter()
+
+  const [code, setCode] = useState<string[]>(Array(6).fill(''))
+  const [trustDevice, setTrustDevice] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [resent, setResent] = useState(false)
+  const [account, setAccount] = useState('')
+
+  // The half-open session already knows who is signing in — showing the address
+  // here is what makes "Use another account" a meaningful offer.
+  useEffect(() => {
+    void call<SessionResponse>('/api/auth/session').then((res) => {
+      if (!res.ok) return
+      if (res.data.state === 'anonymous') {
+        router.replace('/signin')
+        return
+      }
+      if (res.data.user) setAccount(res.data.user.email)
+    })
+  }, [router])
+
+  const verify = useCallback(
+    async (joined?: string) => {
+      const value = joined ?? code.join('')
+      if (value.length !== 6) {
+        setError(t.errCode)
+        return
+      }
+
+      setBusy(true)
+      setError(null)
+      const res = await call<MfaVerifyResponse>('/api/mfa/verify', {
+        body: { code: value, trustDevice },
+      })
+      setBusy(false)
+
+      if (!res.ok) {
+        setError(
+          resolveApiMessage(t, res.messageKey, {
+            seconds: Number(res.details.retryAfterSeconds ?? 30),
+          }),
+        )
+        setCode(Array(6).fill(''))
+        return
+      }
+
+      router.push(res.data.state === 'firstSignIn' ? '/welcome' : '/console/overview')
+    },
+    [code, trustDevice, router, t],
+  )
+
+  const signOutAndRestart = useCallback(async () => {
+    await call('/api/auth/signout', { body: { allDevices: false } })
+    router.push('/signin')
+  }, [router])
+
+  return (
+    <AuthShell label="Two-factor verification">
+      <AuthCard>
+        <div className="flex flex-col gap-[3px]">
+          <Kicker>{t.step2}</Kicker>
+          <ScreenTitle title={t.verifyTitle} lead={t.verifyLead} />
+          {account ? <span className="font-mono text-[11px] text-fg">{account}</span> : null}
+        </div>
+
+        {error ? <ErrorBox shield={false}>{error}</ErrorBox> : null}
+
+        <OtpInput
+          value={code}
+          onChange={setCode}
+          onComplete={(joined) => void verify(joined)}
+          invalid={Boolean(error)}
+        />
+
+        <Checkbox checked={trustDevice} onChange={setTrustDevice}>
+          {t.trustDevice}
+        </Checkbox>
+
+        <div className="flex flex-col gap-[10px]">
+          <Button onClick={() => void verify()} disabled={busy}>
+            {t.verifyCta}
+          </Button>
+          <div className="flex items-center justify-between gap-2">
+            <button
+              type="button"
+              onClick={() => setResent(true)}
+              className="bg-transparent text-xs text-muted-fg hover:text-fg"
+            >
+              {resent ? t.resent : t.resend}
+            </button>
+            <button
+              type="button"
+              onClick={() => void signOutAndRestart()}
+              className="bg-transparent text-[11.5px] text-muted-fg hover:text-fg"
+            >
+              {t.otherAccount}
+            </button>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-[6px] border-t border-border pt-4">
+          <button
+            type="button"
+            onClick={() => router.push('/mfa/recovery')}
+            className="text-left font-mono text-[9px] tracking-[0.1em] text-muted-fg hover:text-fg"
+          >
+            <Caps>{t.vLost}</Caps>
+          </button>
+          <button
+            type="button"
+            onClick={() => router.push('/mfa/setup')}
+            className="text-left font-mono text-[9px] tracking-[0.1em] text-muted-fg hover:text-fg"
+          >
+            <Caps>{t.vSetup}</Caps>
+          </button>
+        </div>
+      </AuthCard>
+
+      <AuthFooter protectedUpper={t.protectedUpper} signature={t.signature} />
+    </AuthShell>
+  )
+}
diff --git a/apps/editor/panel/components/auth/otp-input.tsx b/apps/editor/panel/components/auth/otp-input.tsx
new file mode 100644
index 000000000..cda56b93e
--- /dev/null
+++ b/apps/editor/panel/components/auth/otp-input.tsx
@@ -0,0 +1,104 @@
+'use client'
+
+import { cn } from '@panel/lib/cn'
+import { useBreakpoint } from '@panel/lib/hooks/use-breakpoint'
+import { type ClipboardEvent, type KeyboardEvent, useEffect, useRef } from 'react'
+
+/**
+ * Six-cell OTP entry with the three ergonomics the design calls out by name:
+ * paste all six digits into any cell, auto-advance while typing, and Backspace
+ * on an empty cell steps back instead of doing nothing.
+ *
+ * `min-width: 0` on the cells is load-bearing — an <input>'s intrinsic minimum
+ * width pushed the six cells outside the card without it.
+ */
+export function OtpInput({
+  value,
+  onChange,
+  onComplete,
+  invalid = false,
+  autoFocus = true,
+}: {
+  value: string[]
+  onChange: (next: string[]) => void
+  onComplete?: (code: string) => void
+  invalid?: boolean
+  autoFocus?: boolean
+}) {
+  const { touch } = useBreakpoint()
+  const refs = useRef<Array<HTMLInputElement | null>>([])
+
+  useEffect(() => {
+    if (autoFocus) refs.current[0]?.focus()
+  }, [autoFocus])
+
+  const commit = (next: string[]) => {
+    onChange(next)
+    const joined = next.join('')
+    if (joined.length === 6 && onComplete) onComplete(joined)
+  }
+
+  const setCell = (index: number, raw: string) => {
+    const digit = raw.replace(/\D/g, '').slice(-1)
+    const next = [...value]
+    next[index] = digit
+    commit(next)
+    if (digit && index < 5) refs.current[index + 1]?.focus()
+  }
+
+  const onKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Backspace' && !value[index] && index > 0) {
+      event.preventDefault()
+      const next = [...value]
+      next[index - 1] = ''
+      onChange(next)
+      refs.current[index - 1]?.focus()
+      return
+    }
+    if (event.key === 'ArrowLeft' && index > 0) {
+      event.preventDefault()
+      refs.current[index - 1]?.focus()
+    }
+    if (event.key === 'ArrowRight' && index < 5) {
+      event.preventDefault()
+      refs.current[index + 1]?.focus()
+    }
+  }
+
+  const onPaste = (event: ClipboardEvent<HTMLInputElement>) => {
+    const digits = event.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6)
+    if (!digits) return
+    event.preventDefault()
+    const next = Array.from({ length: 6 }, (_, i) => digits[i] ?? '')
+    commit(next)
+    refs.current[Math.min(digits.length, 5)]?.focus()
+  }
+
+  return (
+    <div className="flex gap-[7px]">
+      {Array.from({ length: 6 }, (_, index) => (
+        <input
+          key={index}
+          ref={(el) => {
+            refs.current[index] = el
+          }}
+          type="text"
+          inputMode="numeric"
+          autoComplete="one-time-code"
+          maxLength={1}
+          aria-label={`Digit ${index + 1} of 6`}
+          value={value[index] ?? ''}
+          onChange={(e) => setCell(index, e.target.value)}
+          onKeyDown={(e) => onKeyDown(index, e)}
+          onPaste={onPaste}
+          className={cn(
+            'w-0 min-w-0 flex-1 rounded-[8px] bg-field text-center font-mono text-[18px] font-medium text-fg outline-none',
+            'border focus:shadow-[0_0_0_3px_var(--dt-hover)]',
+            invalid ? 'border-destructive' : 'border-input focus:border-ring',
+            touch ? 'h-[54px]' : 'h-[46px]',
+          )}
+        />
+      ))}
+    </div>
+  )
+}
diff --git a/apps/editor/panel/components/auth/request-access-screen.tsx b/apps/editor/panel/components/auth/request-access-screen.tsx
new file mode 100644
index 000000000..f9e2199c4
--- /dev/null
+++ b/apps/editor/panel/components/auth/request-access-screen.tsx
@@ -0,0 +1,190 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { AuthFooter, AuthShell } from '@panel/components/auth/auth-shell'
+import { Caps } from '@panel/components/ui/caps'
+import {
+  AuthCard,
+  Button,
+  Field,
+  FieldLabel,
+  SegBar,
+  SegButton,
+} from '@panel/components/ui/controls'
+import { ErrorBox, ScreenTitle, SuccessMark } from '@panel/components/ui/feedback'
+import type { AccessRequestResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { useBreakpoint } from '@panel/lib/hooks/use-breakpoint'
+import { resolveApiMessage } from '@panel/lib/i18n'
+import { useRouter } from 'next/navigation'
+import { useCallback, useState } from 'react'
+
+const DOMAIN = '@netlog.com.tr'
+const DEPARTMENTS = ['Warehouse', 'Operations', 'Engineering', 'IT']
+const ROLES = ['Editor', 'Viewer']
+
+export function RequestAccessScreen() {
+  const { t } = useApp()
+  const router = useRouter()
+  const { touch } = useBreakpoint()
+
+  const [fullName, setFullName] = useState('')
+  const [username, setUsername] = useState('')
+  const [department, setDepartment] = useState(DEPARTMENTS[0])
+  const [role, setRole] = useState(ROLES[0])
+  const [note, setNote] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [sent, setSent] = useState(false)
+
+  const submit = useCallback(async () => {
+    if (!fullName.trim() || !username.trim()) {
+      setError(t.errFields)
+      return
+    }
+
+    setBusy(true)
+    setError(null)
+    const res = await call<AccessRequestResponse>('/api/requests', {
+      body: {
+        fullName: fullName.trim(),
+        // Local part only. The domain is a fixed adornment here and is applied
+        // server-side, so a foreign address cannot be typed past the form.
+        username: username.trim().toLowerCase().replace(/@.*$/, ''),
+        department,
+        requestedRole: role,
+        note: note.trim() || undefined,
+      },
+    })
+    setBusy(false)
+
+    if (!res.ok) {
+      setError(resolveApiMessage(t, res.messageKey))
+      return
+    }
+    setSent(true)
+  }, [fullName, username, department, role, note, t])
+
+  return (
+    <AuthShell label="Account request">
+      <div className="w-full" style={{ maxWidth: 420 }}>
+        <AuthCard width={420}>
+          {sent ? (
+            <div className="flex flex-col gap-5">
+              <SuccessMark />
+              <div className="flex flex-col gap-[6px]">
+                <h1 className="m-0 text-[18px] font-semibold tracking-[-0.01em]">
+                  {t.reqSentTitle}
+                </h1>
+                <p className="m-0 text-[12.5px] leading-[1.55] text-muted-fg text-pretty">
+                  {t.reqSentLead}
+                </p>
+                <span className="font-mono text-[11px] text-fg">
+                  {username.trim().toLowerCase()}
+                  {DOMAIN}
+                </span>
+              </div>
+              <Button variant="secondary" onClick={() => router.push('/signin')}>
+                {t.backToSignIn}
+              </Button>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-[18px]">
+              <div className="flex flex-col gap-1">
+                <ScreenTitle title={t.reqTitle} lead={t.reqLead} />
+              </div>
+
+              {error ? <ErrorBox shield={false}>{error}</ErrorBox> : null}
+
+              <div className="flex flex-col gap-[6px]">
+                <FieldLabel htmlFor="dt-req-name">{t.fullName}</FieldLabel>
+                <Field
+                  id="dt-req-name"
+                  type="text"
+                  placeholder={t.egName}
+                  value={fullName}
+                  onChange={(e) => setFullName(e.target.value)}
+                />
+              </div>
+
+              <div className="flex flex-col gap-[6px]">
+                <FieldLabel htmlFor="dt-req-user">{t.workEmail}</FieldLabel>
+                <div className="flex min-w-0 items-center overflow-hidden rounded-[8px] border border-input bg-field focus-within:border-ring focus-within:shadow-[0_0_0_3px_var(--dt-hover)]">
+                  <input
+                    id="dt-req-user"
+                    type="text"
+                    placeholder="yusuf.aydin"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    className={`min-w-0 flex-1 bg-transparent px-[11px] text-[13px] text-fg outline-none ${
+                      touch ? 'h-[46px]' : 'h-[38px]'
+                    }`}
+                  />
+                  <span
+                    className={`flex shrink-0 items-center border-l border-input bg-surface px-[11px] font-mono text-[11.5px] text-muted-fg ${
+                      touch ? 'h-[46px]' : 'h-[38px]'
+                    }`}
+                  >
+                    {DOMAIN}
+                  </span>
+                </div>
+                <span className="font-mono text-[9px] tracking-[0.06em] text-muted-fg">
+                  {t.usernameHint}
+                </span>
+              </div>
+
+              <div className="flex flex-col gap-[6px]">
+                <Caps className="text-[10px] font-medium tracking-[0.12em] text-muted-fg">
+                  {t.department}
+                </Caps>
+                <SegBar>
+                  {DEPARTMENTS.map((d) => (
+                    <SegButton key={d} active={department === d} onClick={() => setDepartment(d)}>
+                      {d}
+                    </SegButton>
+                  ))}
+                </SegBar>
+              </div>
+
+              <div className="flex flex-col gap-[6px]">
+                <Caps className="text-[10px] font-medium tracking-[0.12em] text-muted-fg">
+                  {t.accessNeeded}
+                </Caps>
+                <SegBar>
+                  {ROLES.map((r) => (
+                    <SegButton key={r} active={role === r} onClick={() => setRole(r)}>
+                      {r}
+                    </SegButton>
+                  ))}
+                </SegBar>
+              </div>
+
+              <div className="flex flex-col gap-[6px]">
+                <FieldLabel htmlFor="dt-req-note">{t.whichSites}</FieldLabel>
+                <textarea
+                  id="dt-req-note"
+                  rows={3}
+                  placeholder={t.egReason}
+                  value={note}
+                  onChange={(e) => setNote(e.target.value)}
+                  className="w-full min-w-0 resize-y rounded-[8px] border border-input bg-field px-[11px] py-[9px] text-[12.5px] leading-[1.5] text-fg outline-none focus:border-ring focus:shadow-[0_0_0_3px_var(--dt-hover)]"
+                />
+              </div>
+
+              <div className="flex flex-col gap-[9px]">
+                <Button onClick={() => void submit()} disabled={busy}>
+                  {t.submitRequest}
+                </Button>
+                <Button variant="secondary" onClick={() => router.push('/signin')}>
+                  {t.backToSignIn}
+                </Button>
+              </div>
+            </div>
+          )}
+        </AuthCard>
+      </div>
+
+      <AuthFooter protectedUpper={t.protectedUpper} signature={t.signature} />
+    </AuthShell>
+  )
+}
diff --git a/apps/editor/panel/components/auth/reset-request-screen.tsx b/apps/editor/panel/components/auth/reset-request-screen.tsx
new file mode 100644
index 000000000..3d5ab0989
--- /dev/null
+++ b/apps/editor/panel/components/auth/reset-request-screen.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { AuthFooter, AuthShell } from '@panel/components/auth/auth-shell'
+import { AuthCard, Button, Field, FieldLabel } from '@panel/components/ui/controls'
+import { ErrorBox, ScreenTitle, SuccessMark } from '@panel/components/ui/feedback'
+import type { ResetRequestResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { resolveApiMessage } from '@panel/lib/i18n'
+import { useRouter } from 'next/navigation'
+import { useCallback, useState } from 'react'
+
+export function ResetRequestScreen() {
+  const { t } = useApp()
+  const router = useRouter()
+
+  const [email, setEmail] = useState('')
+  const [sent, setSent] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  const submit = useCallback(async () => {
+    if (!email.trim()) {
+      setError(t.errFields)
+      return
+    }
+
+    setBusy(true)
+    setError(null)
+    const res = await call<ResetRequestResponse>('/api/auth/reset', {
+      body: { email: email.trim() },
+    })
+    setBusy(false)
+
+    // The endpoint answers 202 for every address that parses, so the only way to
+    // land here is a malformed address or a dead network — never "no such user".
+    if (!res.ok) {
+      setError(resolveApiMessage(t, res.messageKey))
+      return
+    }
+    setSent(true)
+  }, [email, t])
+
+  return (
+    <AuthShell label="Password reset">
+      <AuthCard>
+        {sent ? (
+          <div className="flex flex-col gap-5">
+            <SuccessMark />
+            <div className="flex flex-col gap-[5px]">
+              <h1 className="m-0 text-[18px] font-semibold tracking-[-0.01em]">{t.inboxTitle}</h1>
+              <p className="m-0 text-[12.5px] leading-[1.55] text-muted-fg">{t.inboxLead}</p>
+              <span className="font-mono text-[11px] text-fg">{email.trim()}</span>
+            </div>
+            <Button variant="secondary" onClick={() => router.push('/signin')}>
+              {t.backToSignIn}
+            </Button>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1">
+              <ScreenTitle title={t.resetTitle} lead={t.resetLead} />
+            </div>
+
+            {error ? <ErrorBox shield={false}>{error}</ErrorBox> : null}
+
+            <div className="flex flex-col gap-[6px]">
+              <FieldLabel htmlFor="dt-reset-email">{t.emailLabel}</FieldLabel>
+              <Field
+                id="dt-reset-email"
+                type="email"
+                autoComplete="email"
+                placeholder="name@netlog.com.tr"
+                value={email}
+                onChange={(e) => {
+                  setEmail(e.target.value)
+                  setError(null)
+                }}
+                onKeyDown={(e) => e.key === 'Enter' && void submit()}
+              />
+            </div>
+
+            <div className="flex flex-col gap-[9px]">
+              <Button onClick={() => void submit()} disabled={busy}>
+                {t.resetCta}
+              </Button>
+              <Button variant="secondary" onClick={() => router.push('/signin')}>
+                {t.backToSignIn}
+              </Button>
+            </div>
+          </div>
+        )}
+      </AuthCard>
+
+      <AuthFooter protectedUpper={t.protectedUpper} signature={t.signature} />
+    </AuthShell>
+  )
+}
diff --git a/apps/editor/panel/components/auth/set-password-screen.tsx b/apps/editor/panel/components/auth/set-password-screen.tsx
new file mode 100644
index 000000000..a3a4de21d
--- /dev/null
+++ b/apps/editor/panel/components/auth/set-password-screen.tsx
@@ -0,0 +1,301 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { AuthFooter, AuthShell } from '@panel/components/auth/auth-shell'
+import { Caps } from '@panel/components/ui/caps'
+import { AuthCard, Button, Checkbox, Field, FieldLabel } from '@panel/components/ui/controls'
+import { ErrorBox, Kicker, ScreenTitle, SuccessMark } from '@panel/components/ui/feedback'
+import type { ResetConfirmResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { resolveApiMessage } from '@panel/lib/i18n'
+import { checkPasswordPolicy } from '@panel/lib/password-policy'
+import { Check } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+type Mode = 'reset' | 'welcome'
+
+/**
+ * One screen, two modes — the design's `SetPasswordPage` with a `welcome` flag.
+ * Which mode applies is decided by the token, not the route: the preview call
+ * says whether it resolved a reset link or an invite, so a user who opens an
+ * invite at /reset/:token still gets the account-setup copy and the consent gate.
+ *
+ * `token = null` is the third way in: an authenticated account carrying
+ * must_change_password, which has no emailed link at all. Same form, same rules,
+ * different endpoint.
+ */
+export function SetPasswordScreen({
+  token,
+  requestedMode,
+  identity: knownIdentity,
+}: {
+  token: string | null
+  requestedMode: Mode
+  identity?: string
+}) {
+  const { t } = useApp()
+  const router = useRouter()
+
+  const [mode, setMode] = useState<Mode>(requestedMode)
+  const [identity, setIdentity] = useState(knownIdentity ?? '')
+  const [tokenError, setTokenError] = useState<string | null>(null)
+  const [checking, setChecking] = useState(token !== null)
+
+  const [password, setPassword] = useState('')
+  const [again, setAgain] = useState('')
+  const [revokeOthers, setRevokeOthers] = useState(true)
+  const [consent, setConsent] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [next, setNext] = useState<ResetConfirmResponse['next']>('signin')
+
+  useEffect(() => {
+    if (token === null) return // session-driven mode — nothing to resolve
+    void (async () => {
+      const res = await call<
+        | { kind: 'reset'; email: string; username: string }
+        | { kind: 'invite'; email: string; fullName: string }
+      >(`/api/auth/reset/${encodeURIComponent(token)}`)
+      setChecking(false)
+
+      if (!res.ok) {
+        setTokenError(resolveApiMessage(t, res.messageKey))
+        return
+      }
+      setMode(res.data.kind === 'invite' ? 'welcome' : 'reset')
+      setIdentity(res.data.kind === 'reset' ? res.data.username : res.data.email)
+    })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token])
+
+  const policy = useMemo(() => checkPasswordPolicy(password, identity), [password, identity])
+  const matches = again.length > 0 && password === again
+  const mismatch = again.length > 0 && password !== again
+  const isWelcome = mode === 'welcome'
+  const canSubmit = policy.ok && matches && (!isWelcome || consent)
+
+  const rules = [
+    { ok: policy.minLength, label: t.c1 },
+    { ok: policy.mixedCase, label: t.c2 },
+    { ok: policy.digit, label: t.c3 },
+    { ok: policy.symbol, label: t.c4 },
+    { ok: policy.noIdentity, label: t.c5 },
+  ]
+
+  const meterColor =
+    policy.strength <= 0
+      ? 'var(--dt-destructive)'
+      : policy.strength <= 2
+        ? 'var(--dt-warn)'
+        : 'var(--dt-ok)'
+
+  const submit = useCallback(async () => {
+    if (!canSubmit || busy) return
+
+    setBusy(true)
+    setError(null)
+    const res =
+      token === null
+        ? await call<ResetConfirmResponse>('/api/auth/password', {
+            body: {
+              password,
+              passwordAgain: again,
+              revokeOtherSessions: revokeOthers,
+              acceptPolicy: consent,
+            },
+          })
+        : await call<ResetConfirmResponse>('/api/auth/reset/confirm', {
+            body: {
+              token,
+              password,
+              passwordAgain: again,
+              revokeOtherSessions: revokeOthers,
+              acceptPolicy: consent,
+            },
+          })
+    setBusy(false)
+
+    if (!res.ok) {
+      setError(resolveApiMessage(t, res.messageKey))
+      return
+    }
+    setNext(res.data.next)
+    setSaved(true)
+  }, [canSubmit, busy, token, password, again, revokeOthers, consent, t])
+
+  const continueOn = useCallback(() => {
+    router.push(
+      next === 'console' ? '/console/overview' : next === 'mfa-setup' ? '/mfa/setup' : '/signin',
+    )
+  }, [next, router])
+
+  if (checking) {
+    return (
+      <AuthShell label="Set new password">
+        <AuthCard gap={18}>
+          <div className="flex flex-col gap-2">
+            <span
+              className="h-3 w-24 rounded bg-hover"
+              style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+            />
+            <span
+              className="h-6 w-48 rounded bg-hover"
+              style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+            />
+            <span
+              className="h-3 w-full rounded bg-hover"
+              style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+            />
+          </div>
+        </AuthCard>
+      </AuthShell>
+    )
+  }
+
+  if (tokenError) {
+    return (
+      <AuthShell label="Set new password">
+        <AuthCard gap={18}>
+          <ErrorBox>{tokenError}</ErrorBox>
+          <Button variant="secondary" onClick={() => router.push('/reset')}>
+            {t.resetCta}
+          </Button>
+          <button
+            type="button"
+            onClick={() => router.push('/signin')}
+            className="bg-transparent text-[11.5px] text-muted-fg hover:text-fg"
+          >
+            {t.backToSignIn}
+          </button>
+        </AuthCard>
+        <AuthFooter protectedUpper={t.protectedUpper} signature={t.signature} />
+      </AuthShell>
+    )
+  }
+
+  return (
+    <AuthShell label="Set new password">
+      <AuthCard gap={18}>
+        {saved ? (
+          <div className="flex flex-col gap-5">
+            <SuccessMark />
+            <div className="flex flex-col gap-[5px]">
+              <h1 className="m-0 text-[18px] font-semibold tracking-[-0.01em]">{t.spDoneTitle}</h1>
+              <p className="m-0 text-[12.5px] leading-[1.55] text-muted-fg text-pretty">
+                {t.spDoneLead}
+              </p>
+            </div>
+            <Button onClick={continueOn}>{isWelcome ? t.spDoneCtaFirst : t.spDoneCta}</Button>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-[18px]">
+            <div className="flex flex-col gap-[3px]">
+              <Kicker>{isWelcome ? t.spKickFirst : t.spKickReset}</Kicker>
+              <ScreenTitle
+                title={isWelcome ? t.spTitleFirst : t.spTitle}
+                lead={isWelcome ? t.spLeadFirst : t.spLead}
+              />
+            </div>
+
+            {error ? <ErrorBox shield={false}>{error}</ErrorBox> : null}
+
+            <div className="flex flex-col gap-[6px]">
+              <FieldLabel htmlFor="dt-np1">{t.spNew}</FieldLabel>
+              <Field
+                id="dt-np1"
+                type="password"
+                autoComplete="new-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <div className="flex items-center gap-[6px]">
+                {[0, 1, 2, 3].map((i) => (
+                  <span
+                    key={i}
+                    className="h-1 flex-1 rounded-[3px]"
+                    style={{
+                      background: password && i <= policy.strength ? meterColor : 'var(--dt-hover)',
+                    }}
+                  />
+                ))}
+                <Caps className="whitespace-nowrap font-mono text-[9px] tracking-[0.1em] text-muted-fg">
+                  {password ? t.strength[policy.strength] : ''}
+                </Caps>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-[5px]">
+              {rules.map((rule) => (
+                <div key={rule.label} className="flex items-center gap-2">
+                  <span
+                    className="flex h-[13px] w-[13px] shrink-0 items-center justify-center rounded-full border"
+                    style={{
+                      borderColor: rule.ok ? 'var(--dt-ok)' : 'var(--dt-input)',
+                      background: rule.ok ? 'rgba(74,222,128,0.14)' : 'transparent',
+                      color: 'var(--dt-ok)',
+                    }}
+                  >
+                    {rule.ok ? <Check className="h-[9px] w-[9px]" strokeWidth={3} /> : null}
+                  </span>
+                  <span className={`text-[11.5px] ${rule.ok ? 'text-fg' : 'text-muted-fg'}`}>
+                    {rule.label}
+                  </span>
+                </div>
+              ))}
+            </div>
+
+            <div className="flex flex-col gap-[6px]">
+              <FieldLabel htmlFor="dt-np2">{t.spAgain}</FieldLabel>
+              <Field
+                id="dt-np2"
+                type="password"
+                autoComplete="new-password"
+                value={again}
+                invalid={mismatch}
+                valid={matches}
+                onChange={(e) => setAgain(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && void submit()}
+              />
+              {mismatch ? (
+                <span className="text-[11px] text-destructive">{t.spMismatch}</span>
+              ) : null}
+            </div>
+
+            <Checkbox checked={revokeOthers} onChange={setRevokeOthers}>
+              {t.spRevoke}
+            </Checkbox>
+
+            {isWelcome ? (
+              <Checkbox checked={consent} onChange={setConsent} align="start">
+                {t.spConsent}
+              </Checkbox>
+            ) : null}
+
+            {/* Inert rather than hidden while the rules are unmet — the user can
+                see the button they are working towards. */}
+            <div
+              className="flex flex-col"
+              style={{ opacity: canSubmit ? 1 : 0.45, pointerEvents: canSubmit ? 'auto' : 'none' }}
+            >
+              <Button onClick={() => void submit()} disabled={busy}>
+                {isWelcome ? t.spCtaFirst : t.spCta}
+              </Button>
+            </div>
+
+            <button
+              type="button"
+              onClick={() => router.push('/signin')}
+              className="self-start bg-transparent text-[11.5px] text-muted-fg hover:text-fg"
+            >
+              {t.backToSignIn}
+            </button>
+          </div>
+        )}
+      </AuthCard>
+
+      <AuthFooter protectedUpper={t.protectedUpper} signature={t.signature} />
+    </AuthShell>
+  )
+}
diff --git a/apps/editor/panel/components/auth/sign-in-screen.tsx b/apps/editor/panel/components/auth/sign-in-screen.tsx
new file mode 100644
index 000000000..272f8ac3b
--- /dev/null
+++ b/apps/editor/panel/components/auth/sign-in-screen.tsx
@@ -0,0 +1,590 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { GlowBlobs, GridBackdrop, HeroGrid } from '@panel/components/ui/backdrop'
+import { Caps } from '@panel/components/ui/caps'
+import {
+  Button,
+  Checkbox,
+  Field,
+  FieldLabel,
+  LangToggle,
+  Spinner,
+  ThemeToggle,
+} from '@panel/components/ui/controls'
+import { Dialog, ErrorBox, NoticeBox } from '@panel/components/ui/feedback'
+import { BrandLockup, NetlogLogo } from '@panel/components/ui/netlog-logo'
+import type { SignInResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { useBreakpoint } from '@panel/lib/hooks/use-breakpoint'
+import { format, formatDate, formatNumber, resolveApiMessage } from '@panel/lib/i18n'
+import { ArrowRight, Eye, EyeOff, KeyRound, Mail, ShieldCheck } from 'lucide-react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/** Site figures shown in the hero summary card, rotating every eight seconds. */
+interface ShowcaseSite {
+  name: string
+  footprintM2: number | null
+  nodeCount: number | null
+}
+
+/**
+ * The hero rotates through the projects an administrator has published —
+ * real names and real figures, never a draft and never a demo. Until
+ * something is published there is nothing to rotate, and the panel is left
+ * out rather than filled with invented warehouses.
+ */
+function useShowcaseSites(): ShowcaseSite[] {
+  const [sites, setSites] = useState<ShowcaseSite[]>([])
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/showcase', { cache: 'no-store' })
+      .then((response) => (response.ok ? response.json() : { sites: [] }))
+      .then((body: { sites?: ShowcaseSite[] }) => {
+        if (!cancelled) setSites(body.sites ?? [])
+      })
+      .catch(() => {
+        /* the hero simply stays empty */
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return sites
+}
+
+interface LastActivity {
+  at: string
+  device: string | null
+}
+
+/**
+ * When the system was last signed in to — an activity signal, not a person.
+ * Nothing here identifies who it was, so it cannot be used to probe whether a
+ * given address has an account.
+ */
+function useLastActivity(): LastActivity | null {
+  const [last, setLast] = useState<LastActivity | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/last-activity', { cache: 'no-store' })
+      .then((response) => (response.ok ? response.json() : { last: null }))
+      .then((body: { last?: LastActivity | null }) => {
+        if (!cancelled) setLast(body.last ?? null)
+      })
+      .catch(() => {
+        /* the line is simply left out */
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return last
+}
+
+export function SignInScreen() {
+  const { t, lang } = useApp()
+  const router = useRouter()
+  const params = useSearchParams()
+  const { isDesktop, isNarrow, isMobile, touch } = useBreakpoint()
+
+  const [identifier, setIdentifier] = useState('')
+  const [password, setPassword] = useState('')
+  const [keepSignedIn, setKeepSignedIn] = useState(false)
+  const [showPass, setShowPass] = useState(false)
+  const [capsOn, setCapsOn] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  const [lockSeconds, setLockSeconds] = useState(0)
+  const [ssoBlocked, setSsoBlocked] = useState(false)
+  const [siteIndex, setSiteIndex] = useState(0)
+  const [expiredOpen, setExpiredOpen] = useState(params.get('expired') === '1')
+  const [sessionMinutes, setSessionMinutes] = useState(20)
+
+  const showcase = useShowcaseSites()
+  const lastActivity = useLastActivity()
+  const site = showcase[siteIndex] ?? showcase[0]
+
+  useEffect(() => {
+    if (showcase.length < 2) return
+    const id = setInterval(() => setSiteIndex((i) => (i + 1) % showcase.length), 8000)
+    return () => clearInterval(id)
+  }, [showcase.length])
+
+  // Countdown on the lock, ticked client-side. The server re-checks on submit,
+  // so a user who edits this out only gets a 423 a moment sooner.
+  useEffect(() => {
+    if (lockSeconds <= 0) return
+    const id = setInterval(() => setLockSeconds((s) => Math.max(0, s - 1)), 1000)
+    return () => clearInterval(id)
+  }, [lockSeconds])
+
+  // The idle-timeout copy quotes the configured limit, so read the real value.
+  useEffect(() => {
+    if (!expiredOpen) return
+    void call<{ sessionMinutes: number }>('/api/auth/session').then((res) => {
+      if (res.ok) setSessionMinutes(res.data.sessionMinutes)
+    })
+  }, [expiredOpen])
+
+  const closeExpired = useCallback(() => {
+    setExpiredOpen(false)
+    // Strip the flag so a refresh does not re-open the dialog.
+    router.replace('/signin')
+  }, [router])
+
+  const submit = useCallback(async () => {
+    if (submitting || lockSeconds > 0) return
+    if (!identifier.trim() || !password) {
+      setError(t.errFields)
+      return
+    }
+
+    setSubmitting(true)
+    setError(null)
+    setSsoBlocked(false)
+
+    const res = await call<SignInResponse>('/api/auth/signin', {
+      body: { identifier: identifier.trim(), password, keepSignedIn },
+    })
+
+    setSubmitting(false)
+
+    if (!res.ok) {
+      if (res.code === 'account_locked') {
+        const seconds = Number(res.details.retryAfterSeconds ?? 30)
+        setLockSeconds(seconds)
+        setError(resolveApiMessage(t, res.messageKey, { seconds }))
+        return
+      }
+      if (res.code === 'sso_required') {
+        setSsoBlocked(true)
+        setError(null)
+        return
+      }
+
+      const left = res.details.attemptsLeft
+      const suffix =
+        typeof left === 'number' && left > 0
+          ? ` ${left} ${left === 1 ? t.errAttemptLeft : t.errAttemptsLeft}`
+          : ''
+      setError(resolveApiMessage(t, res.messageKey) + suffix)
+      setPassword('')
+      return
+    }
+
+    if (res.data.state === 'mfaRequired') {
+      router.push(res.data.enrolmentRequired ? '/mfa/setup' : '/mfa')
+      return
+    }
+    router.push(res.data.state === 'firstSignIn' ? '/welcome' : '/console/overview')
+  }, [identifier, password, keepSignedIn, submitting, lockSeconds, router, t])
+
+  /**
+   * Hero resource links.
+   *
+   * Three of the four point at the 3D editor, which is a separate application —
+   * in the prototype they popped a note saying so, which is not something to
+   * ship. They are real links when NEXT_PUBLIC_EDITOR_URL names the editor, and
+   * absent when it does not: a button that cannot go anywhere is worse than no
+   * button. The changelog lives in this app, so it is always offered; the
+   * sign-in gate in front of it is the correct answer to clicking it here.
+   */
+  // The guide and the changelog are readable without an account, which is
+  // exactly what a visitor stuck on this screen needs; the editor links only
+  // appear when a deployment declares where its editor lives.
+  const editorUrl = process.env.NEXT_PUBLIC_EDITOR_URL
+  const quickLinks = [
+    { label: t.qlGuides, href: '/guides' },
+    { label: t.qlChangelog, href: '/changelog' },
+    ...(editorUrl
+      ? [
+          { label: t.qlProjects, href: `${editorUrl.replace(/\/$/, '')}/projects` },
+          { label: t.qlViewer, href: `${editorUrl.replace(/\/$/, '')}/viewer` },
+        ]
+      : []),
+  ]
+
+  const locked = lockSeconds > 0
+  const heroVisible = isDesktop || (isNarrow && !isMobile)
+
+  return (
+    <div
+      data-screen-label="Sign in"
+      className="relative flex min-h-screen overflow-hidden bg-bg text-fg"
+      style={isMobile ? undefined : undefined}
+    >
+      {!isMobile ? <GridBackdrop paused={submitting} /> : null}
+      <GlowBlobs />
+
+      {heroVisible ? (
+        <div
+          className="relative z-[1] flex min-w-0 flex-1 flex-col overflow-hidden bg-hero px-10 py-9"
+          style={{ gap: isDesktop ? 0 : 18 }}
+        >
+          <HeroGrid paused={submitting} />
+
+          <div className="relative z-[1] flex items-center gap-[10px]">
+            {/* The hero has vertical room, so it carries the full lockup. */}
+            <NetlogLogo className="h-[36px] w-auto shrink-0" />
+            <span className="h-5 w-px bg-border" />
+            <span className="text-sm font-semibold tracking-[-0.01em] text-fg">
+              DigitalTwin Platform
+            </span>
+          </div>
+
+          <div
+            className="relative z-[1] flex max-w-[470px] flex-col"
+            style={{
+              flex: isDesktop ? 1 : undefined,
+              justifyContent: isDesktop ? 'center' : undefined,
+              gap: isDesktop ? 24 : 12,
+            }}
+          >
+            <h1
+              className="m-0 font-semibold tracking-[-0.02em] text-pretty"
+              style={{ fontSize: isDesktop ? 33 : 21, lineHeight: 1.15 }}
+            >
+              {t.heroTitle}
+            </h1>
+            <p
+              className="m-0 leading-[1.6] text-muted-fg text-pretty"
+              style={{ fontSize: isDesktop ? 13.5 : 12 }}
+            >
+              {t.heroLead}
+            </p>
+
+            {isDesktop && site ? (
+              <div className="flex min-w-0 flex-col overflow-hidden rounded-[12px] border border-border bg-surface">
+                <div className="flex items-center justify-between gap-[10px] border-b border-border-soft px-[13px] py-[9px]">
+                  <span className="truncate text-xs font-semibold text-fg">{site.name}</span>
+                  <span className="flex shrink-0 items-center gap-[6px] font-mono text-[8.5px] tracking-[0.12em] text-muted-fg">
+                    <span
+                      className="h-[5px] w-[5px] rounded-full bg-brand"
+                      style={{ animation: 'dtPulse 2s ease infinite' }}
+                    />
+                    <Caps>{t.liveTwin}</Caps>
+                  </span>
+                </div>
+                <div className="flex min-w-0">
+                  {[
+                    { label: t.scScene, value: site.nodeCount ?? 0, unit: t.scNodes },
+                    { label: t.footprint, value: site.footprintM2 ?? 0, unit: 'm²' },
+                  ].map((cell, i) => (
+                    <div
+                      key={cell.label}
+                      className="flex min-w-0 flex-1 flex-col gap-[3px] px-[13px] py-[11px]"
+                      style={{
+                        borderLeft: i === 0 ? undefined : '1px solid var(--dt-border-soft)',
+                      }}
+                    >
+                      <Caps className="font-mono text-[8.5px] tracking-[0.14em] text-muted-fg">
+                        {cell.label}
+                      </Caps>
+                      <div className="flex min-w-0 items-baseline gap-1">
+                        <span className="font-mono text-[19px] font-medium tracking-[-0.02em] text-fg">
+                          {formatNumber(lang, cell.value)}
+                        </span>
+                        <span className="text-[10.5px] text-muted-fg">{cell.unit}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      {/* The form pane is the landmark, not the hero — the hero is decoration
+          and a marketing panel, and skipping to it helps nobody. */}
+      <main
+        className="relative z-[1] flex w-full min-w-0 items-center justify-center bg-sidebar px-6 py-9"
+        style={
+          isDesktop
+            ? { maxWidth: 462, flexShrink: 0 }
+            : heroVisible
+              ? { maxWidth: 420, flexShrink: 0 }
+              : undefined
+        }
+      >
+        <div
+          className="flex w-full max-w-[344px] flex-col gap-5"
+          style={{ animation: 'dtFade 0.25s ease' }}
+        >
+          {isNarrow && !heroVisible ? (
+            <BrandLockup
+              label="DigitalTwin"
+              logoClassName="h-[26px] w-auto"
+              labelClassName="text-[13px] font-semibold"
+            />
+          ) : null}
+
+          <div className="flex items-center justify-between gap-[10px]">
+            <div className="flex min-w-0 flex-col gap-1">
+              <h1 className="m-0 text-[18px] font-semibold tracking-[-0.01em]">{t.signIn}</h1>
+              <p className="m-0 text-[12.5px] text-muted-fg">{t.signInLead}</p>
+            </div>
+            <div className="flex shrink-0 items-center gap-[6px]">
+              <ThemeToggle />
+              <LangToggle />
+            </div>
+          </div>
+
+          {ssoBlocked ? <NoticeBox title={t.ssoTitle}>{t.ssoNotice}</NoticeBox> : null}
+          {error ? <ErrorBox>{error}</ErrorBox> : null}
+
+          <div className="flex flex-col gap-[13px]">
+            <div className="flex flex-col gap-[6px]">
+              <FieldLabel htmlFor="dt-identifier">{t.identifier}</FieldLabel>
+              <Field
+                id="dt-identifier"
+                type="text"
+                autoComplete="username"
+                icon={<Mail className="h-[15px] w-[15px]" strokeWidth={2} />}
+                placeholder="Admin  •  r.ovur  •  resul.ovur@netlog.com.tr"
+                value={identifier}
+                onChange={(e) => setIdentifier(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && void submit()}
+              />
+              <span className="font-mono text-[9px] tracking-[0.06em] text-muted-fg">
+                {t.identifierHint}
+              </span>
+            </div>
+
+            <div className="flex flex-col gap-[6px]">
+              <div className="flex items-baseline justify-between gap-2">
+                <FieldLabel htmlFor="dt-password">{t.password}</FieldLabel>
+                <button
+                  type="button"
+                  onClick={() => router.push('/reset')}
+                  className="bg-transparent text-[11.5px] text-muted-fg hover:text-fg"
+                >
+                  {t.forgot}
+                </button>
+              </div>
+              <Field
+                id="dt-password"
+                type={showPass ? 'text' : 'password'}
+                autoComplete="current-password"
+                icon={<KeyRound className="h-[15px] w-[15px]" strokeWidth={2} />}
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                onKeyUp={(e) => setCapsOn(e.getModifierState('CapsLock'))}
+                onKeyDown={(e) => {
+                  setCapsOn(e.getModifierState('CapsLock'))
+                  if (e.key === 'Enter') void submit()
+                }}
+                trailing={
+                  <HoldToReveal
+                    revealed={showPass}
+                    onChange={setShowPass}
+                    title={t.holdToShow}
+                    compact={!touch}
+                  />
+                }
+              />
+              {capsOn ? (
+                <span className="flex items-center gap-[7px] text-[11.5px] text-warn">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2.5}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="block h-[13px] w-[13px] shrink-0"
+                  >
+                    <path d="m6 8 6-6 6 6" />
+                    <path d="M6 14h12" />
+                    <path d="M6 20h12" />
+                  </svg>
+                  {t.capsLock}
+                </span>
+              ) : null}
+            </div>
+
+            <Checkbox checked={keepSignedIn} onChange={setKeepSignedIn}>
+              {t.remember}
+            </Checkbox>
+
+            <Button
+              onClick={() => void submit()}
+              disabled={locked || submitting}
+              className="mt-[2px]"
+            >
+              {submitting ? <Spinner /> : null}
+              {locked ? (
+                <span>
+                  {t.lockedPrefix} · {lockSeconds}s
+                </span>
+              ) : (
+                <>
+                  <span>{t.signIn}</span>
+                  <ArrowRight className="block h-[14px] w-[14px] shrink-0" strokeWidth={2.4} />
+                </>
+              )}
+            </Button>
+          </div>
+
+          <div className="flex flex-col gap-[13px]">
+            <div className="flex items-center gap-3">
+              <span className="h-px flex-1 bg-border" />
+              <Caps className="font-mono text-[9px] tracking-[0.14em] text-muted-fg">{t.or}</Caps>
+              <span className="h-px flex-1 bg-border" />
+            </div>
+            <Button variant="secondary" onClick={() => setSsoBlocked(true)}>
+              {/* Entra ID tile mark. Kept as the only non-brand colour on the screen. */}
+              <svg viewBox="0 0 24 24" className="block h-[15px] w-[15px] shrink-0" aria-hidden>
+                <rect x="3" y="3" width="8" height="8" fill="#F25022" />
+                <rect x="13" y="3" width="8" height="8" fill="#7FBA00" />
+                <rect x="3" y="13" width="8" height="8" fill="#00A4EF" />
+                <rect x="13" y="13" width="8" height="8" fill="#FFB900" />
+              </svg>
+              <span>{t.ssoNetlog}</span>
+            </Button>
+          </div>
+
+          <div className="flex items-start gap-[9px] rounded-[9px] border border-border bg-surface px-[11px] py-[9px]">
+            <ShieldCheck
+              className="mt-px block h-[14px] w-[14px] shrink-0 text-brand-fg"
+              strokeWidth={2.2}
+            />
+            <div className="flex min-w-0 flex-col gap-[2px]">
+              <span className="text-[11.5px] font-medium text-fg">{t.internalOnly}</span>
+              {lastActivity ? (
+                <span className="font-mono text-[9.5px] text-muted-fg text-pretty">
+                  {t.lastSignIn} {formatDate(lang, lastActivity.at)}
+                  {lastActivity.device ? ` · ${lastActivity.device}` : ''}
+                </span>
+              ) : null}
+            </div>
+          </div>
+
+          {quickLinks.length > 0 ? (
+            <div className="flex flex-col gap-[9px] border-t border-border pt-4">
+              <Caps className="font-mono text-[9px] tracking-[0.14em] text-muted-fg">
+                {t.resources}
+              </Caps>
+              <div className="grid grid-cols-2 gap-[7px]">
+                {quickLinks.map((link) => (
+                  <a
+                    key={link.label}
+                    href={link.href}
+                    className={`flex items-center gap-2 rounded-[8px] border border-border-soft bg-field px-[10px] text-left font-medium text-muted-fg no-underline hover:bg-hover hover:text-fg ${
+                      touch ? 'h-12 text-[12.5px]' : 'h-[34px] text-[11.5px]'
+                    }`}
+                  >
+                    <span className="h-1 w-1 shrink-0 rounded-full bg-brand" />
+                    <span className="truncate">{link.label}</span>
+                  </a>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          <div className="text-[12.5px] text-muted-fg">
+            {t.noAccount}{' '}
+            <button
+              type="button"
+              onClick={() => router.push('/request')}
+              className="bg-transparent font-medium text-fg underline underline-offset-[3px]"
+            >
+              {t.requestAccount}
+            </button>
+          </div>
+
+          <p className="m-0 font-mono text-[9px] leading-[1.6] tracking-[0.1em] text-muted-fg">
+            {t.protectedUpper} · {t.signature}
+          </p>
+        </div>
+      </main>
+
+      {expiredOpen ? (
+        <Dialog labelledBy="dt-expired-title" onClose={() => setExpiredOpen(false)}>
+          <h2
+            id="dt-expired-title"
+            className="m-0 flex items-center gap-2 text-xs font-bold tracking-[0.06em] text-fg"
+          >
+            <span className="h-[5px] w-[5px] rounded-full bg-brand" />
+            <Caps>{t.sessionExpiredTitle}</Caps>
+          </h2>
+          <p className="m-0 text-xs leading-[1.55] text-muted-fg">
+            {format(t.sessionExpiredLead, { minutes: sessionMinutes })}
+          </p>
+          <div className="flex justify-end">
+            <Button full={false} onClick={closeExpired} className="h-8">
+              {t.okLabel}
+            </Button>
+          </div>
+        </Dialog>
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * Hold-to-reveal, matching the editor's own control: the password shows while
+ * the pointer or key is held and hides on release. There is deliberately no
+ * onClick — an onClick alongside the hold handlers re-revealed the password on
+ * the click that followed mouseup, which read as a broken toggle.
+ */
+function HoldToReveal({
+  revealed,
+  onChange,
+  title,
+  compact,
+}: {
+  revealed: boolean
+  onChange: (next: boolean) => void
+  title: string
+  compact: boolean
+}) {
+  const held = useRef(false)
+
+  const show = () => {
+    held.current = true
+    onChange(true)
+  }
+  const hide = () => {
+    held.current = false
+    onChange(false)
+  }
+
+  return (
+    <button
+      type="button"
+      title={title}
+      aria-label={title}
+      aria-pressed={revealed}
+      onMouseDown={show}
+      onMouseUp={hide}
+      onMouseLeave={hide}
+      onTouchStart={show}
+      onTouchEnd={hide}
+      onKeyDown={(e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+          e.preventDefault()
+          show()
+        }
+      }}
+      onKeyUp={hide}
+      onBlur={hide}
+      className={`absolute right-1 flex items-center justify-center rounded-[6px] bg-transparent text-muted-fg hover:bg-hover hover:text-fg ${
+        compact ? 'h-[30px] px-[7px]' : 'h-11 px-[11px]'
+      }`}
+    >
+      {revealed ? (
+        <Eye className="block h-[15px] w-[15px]" strokeWidth={2} />
+      ) : (
+        <EyeOff className="block h-[15px] w-[15px]" strokeWidth={2} />
+      )}
+    </button>
+  )
+}
diff --git a/apps/editor/panel/components/console/assign-dialog.tsx b/apps/editor/panel/components/console/assign-dialog.tsx
new file mode 100644
index 000000000..0146674d3
--- /dev/null
+++ b/apps/editor/panel/components/console/assign-dialog.tsx
@@ -0,0 +1,151 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { Button, SegBar, SegButton } from '@panel/components/ui/controls'
+import { Dialog } from '@panel/components/ui/feedback'
+import type { ApproveRequestResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { resolveApiMessage } from '@panel/lib/i18n'
+import type { AccessRequest } from '@panel/lib/types'
+import { useState } from 'react'
+
+/**
+ * "Approve & assign" — approval never silently adds an account. It asks for a
+ * role and at least one site first, so nobody lands in the tenant with a role
+ * but nothing to open.
+ */
+export function AssignDialog({
+  request,
+  roles,
+  sites,
+  onCancel,
+  onDone,
+  onError,
+}: {
+  request: AccessRequest
+  roles: string[]
+  sites: string[]
+  onCancel: () => void
+  onDone: (email: string, mailDelivered: boolean) => void
+  onError: (message: string) => void
+}) {
+  const { t } = useApp()
+
+  const [role, setRole] = useState(
+    roles.includes(request.requestedRole) ? request.requestedRole : (roles[0] ?? 'Viewer'),
+  )
+  const [selected, setSelected] = useState<string[]>([])
+  const [org, setOrg] = useState<'internal' | 'external'>('internal')
+  const [busy, setBusy] = useState(false)
+
+  // Escape is handled by <Dialog> through the layer stack — see onClose below.
+
+  const confirm = async () => {
+    if (selected.length === 0) return
+    setBusy(true)
+    const res = await call<ApproveRequestResponse>(`/api/requests/${request.id}/approve`, {
+      body: { role, siteNames: selected, org },
+    })
+    setBusy(false)
+
+    if (!res.ok) {
+      onError(resolveApiMessage(t, res.messageKey))
+      return
+    }
+    onDone(res.data.user.email, res.data.mailDelivered)
+  }
+
+  const ready = selected.length > 0
+
+  return (
+    <Dialog labelledBy="dt-assign-title" width={384} onClose={onCancel}>
+      <div className="flex flex-col gap-1">
+        <h2 id="dt-assign-title" className="m-0 text-[15px] font-semibold tracking-[-0.01em]">
+          {t.asgTitle}
+        </h2>
+        <span className="truncate font-mono text-[10.5px] text-muted-fg">
+          {request.fullName} · {request.email}
+        </span>
+        <p className="m-0 mt-1 text-[11.5px] leading-[1.5] text-muted-fg text-pretty">
+          {t.asgLead}
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-[6px]">
+        <Caps className="text-[10px] font-medium tracking-[0.12em] text-muted-fg">{t.asgRole}</Caps>
+        <SegBar>
+          {roles.map((name) => (
+            <SegButton key={name} active={role === name} onClick={() => setRole(name)}>
+              {name}
+            </SegButton>
+          ))}
+        </SegBar>
+      </div>
+
+      <div className="flex flex-col gap-[6px]">
+        <Caps className="text-[10px] font-medium tracking-[0.12em] text-muted-fg">
+          {t.inviteOrg}
+        </Caps>
+        <SegBar>
+          <SegButton active={org === 'internal'} onClick={() => setOrg('internal')}>
+            {t.orgInternal}
+          </SegButton>
+          <SegButton active={org === 'external'} onClick={() => setOrg('external')}>
+            {t.orgExternal}
+          </SegButton>
+        </SegBar>
+      </div>
+
+      <div className="flex flex-col gap-[6px]">
+        <Caps className="text-[10px] font-medium tracking-[0.12em] text-muted-fg">
+          {t.asgSites}
+        </Caps>
+        <div className="grid grid-cols-2 gap-[6px]">
+          {sites.map((site) => {
+            const on = selected.includes(site)
+            return (
+              <button
+                key={site}
+                type="button"
+                onClick={() =>
+                  setSelected((prev) => (on ? prev.filter((s) => s !== site) : [...prev, site]))
+                }
+                className={cn(
+                  'flex h-[30px] min-w-0 items-center gap-2 rounded-[7px] border px-[9px] text-[11.5px]',
+                  on
+                    ? 'border-brand bg-field text-fg'
+                    : 'border-border bg-transparent text-muted-fg',
+                )}
+              >
+                <span
+                  className={cn(
+                    'h-[10px] w-[10px] shrink-0 rounded-[3px] border',
+                    on ? 'border-brand bg-brand' : 'border-input',
+                  )}
+                />
+                <span className="truncate">{site}</span>
+              </button>
+            )
+          })}
+        </div>
+        {!ready ? <span className="text-[11px] text-muted-fg">{t.asgNeedSite}</span> : null}
+      </div>
+
+      <div className="flex flex-col gap-[9px]">
+        <div
+          className="flex flex-col"
+          style={{ opacity: ready ? 1 : 0.45, pointerEvents: ready ? 'auto' : 'none' }}
+        >
+          <Button onClick={() => void confirm()} disabled={busy}>
+            {t.asgConfirm}
+          </Button>
+        </div>
+        <Button variant="secondary" onClick={onCancel}>
+          {t.cancel}
+        </Button>
+      </div>
+    </Dialog>
+  )
+}
diff --git a/apps/editor/panel/components/console/audit-tab.tsx b/apps/editor/panel/components/console/audit-tab.tsx
new file mode 100644
index 000000000..337df2b68
--- /dev/null
+++ b/apps/editor/panel/components/console/audit-tab.tsx
@@ -0,0 +1,172 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { SegBar, SegButton } from '@panel/components/ui/controls'
+import type { LogsResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { auditText, formatDate } from '@panel/lib/i18n'
+import { Search } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+type Entry = LogsResponse['entries'][number]
+
+/**
+ * The append-only change trail. Deliberately has no clear action and no delete
+ * endpoint behind it — that absence is the feature.
+ */
+export function AuditTab() {
+  const { t, lang } = useApp()
+
+  const [entries, setEntries] = useState<Entry[]>([])
+  const [cursor, setCursor] = useState<string | null>(null)
+  const [kinds, setKinds] = useState<string[]>([])
+  const [counts, setCounts] = useState({ info: 0, warn: 0, error: 0 })
+  const [kind, setKind] = useState('All')
+  const [search, setSearch] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(
+    async (nextCursor?: string) => {
+      const params = new URLSearchParams({ kind, limit: '50' })
+      if (search.trim()) params.set('search', search.trim())
+      if (nextCursor) params.set('cursor', nextCursor)
+
+      const res = await call<LogsResponse>(`/api/audit?${params}`)
+      setLoading(false)
+      if (!res.ok) return
+
+      setEntries((prev) => (nextCursor ? [...prev, ...res.data.entries] : res.data.entries))
+      setCursor(res.data.nextCursor)
+      setCounts(res.data.counts)
+      if (res.data.kinds) setKinds(res.data.kinds)
+    },
+    [kind, search],
+  )
+
+  useEffect(() => {
+    setLoading(true)
+    void load()
+  }, [load])
+
+  const total = counts.info + counts.warn + counts.error
+
+  const kindLabel = (value: string) =>
+    ({
+      user: t.auKindUser,
+      role_change: t.auKindRole,
+      invite: t.auKindInvite,
+      request: t.auKindRequest,
+      site: t.auKindSite,
+      api_key: t.auKindKey,
+      webhook: t.auKindHook,
+      settings: t.auKindSettings,
+    })[value] ?? value
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div className="flex flex-col gap-[2px]">
+          <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.c.audit}</h2>
+          <p className="m-0 text-xs text-muted-fg">
+            {total} {t.c.events} · {t.c.appendOnly}
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-[7px]">
+          <div className="relative flex items-center">
+            <Search
+              className="pointer-events-none absolute left-[9px] h-3 w-3 text-muted-fg"
+              strokeWidth={2.2}
+            />
+            <input
+              type="text"
+              placeholder={t.c.logSearchPh}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="h-[30px] w-[190px] min-w-0 rounded-[8px] border border-input bg-field pl-[26px] pr-[10px] text-xs text-fg outline-none focus:border-ring focus:shadow-[0_0_0_3px_var(--dt-hover)]"
+            />
+          </div>
+          <SegBar>
+            <SegButton active={kind === 'All'} onClick={() => setKind('All')}>
+              {t.c.filterAll}
+            </SegButton>
+            {kinds.map((value) => (
+              <SegButton key={value} active={kind === value} onClick={() => setKind(value)}>
+                {kindLabel(value)}
+              </SegButton>
+            ))}
+          </SegBar>
+        </div>
+      </header>
+
+      <div className="flex items-start gap-[9px] rounded-[10px] border border-border bg-surface px-3 py-2">
+        <span className="mt-[6px] h-[5px] w-[5px] shrink-0 rounded-full bg-brand" />
+        <span className="min-w-0 text-[11.5px] leading-[1.5] text-muted-fg text-pretty">
+          {t.c.auditBanner}
+        </span>
+      </div>
+
+      <div className="flex min-w-0 flex-col overflow-hidden rounded-[12px] border border-border">
+        {loading ? (
+          Array.from({ length: 6 }, (_, i) => (
+            <div
+              key={i}
+              className="flex h-[46px] items-center gap-4 border-b border-border-soft px-3"
+            >
+              <span
+                className="h-[9px] w-[300px] rounded bg-hover"
+                style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+              />
+            </div>
+          ))
+        ) : entries.length === 0 ? (
+          <div className="px-3 py-10 text-center text-[11.5px] text-muted-fg">{t.auEmpty}</div>
+        ) : (
+          <>
+            {entries.map((entry) => (
+              <div
+                key={entry.id}
+                className="flex min-w-0 items-start gap-[10px] border-b border-border-soft px-3 py-2 last:border-b-0"
+              >
+                <span
+                  className={cn(
+                    'mt-[5px] h-[5px] w-[5px] shrink-0 rounded-full',
+                    entry.level === 'warn'
+                      ? 'bg-warn'
+                      : entry.level === 'error'
+                        ? 'bg-destructive'
+                        : 'bg-ok',
+                  )}
+                />
+                <div className="flex min-w-0 flex-1 flex-col gap-[2px]">
+                  <span className="select-text break-words text-[12px] text-fg">
+                    {auditText(t, entry)}
+                  </span>
+                  <span className="truncate font-mono text-[9.5px] text-muted-fg">
+                    {formatDate(lang, entry.createdAt)} · {entry.actor}
+                  </span>
+                </div>
+                {entry.kind ? (
+                  <Caps className="shrink-0 rounded-[4px] border border-border px-[6px] py-px font-mono text-[8.5px] tracking-[0.08em] text-muted-fg">
+                    {kindLabel(entry.kind)}
+                  </Caps>
+                ) : null}
+              </div>
+            ))}
+            {cursor ? (
+              <button
+                type="button"
+                onClick={() => void load(cursor)}
+                className="h-9 border-t border-border bg-surface text-[11.5px] font-medium text-muted-fg hover:text-fg"
+              >
+                {t.lgLoadMore}
+              </button>
+            ) : null}
+          </>
+        )}
+      </div>
+    </section>
+  )
+}
diff --git a/apps/editor/panel/components/console/command-palette.tsx b/apps/editor/panel/components/console/command-palette.tsx
new file mode 100644
index 000000000..388528a4e
--- /dev/null
+++ b/apps/editor/panel/components/console/command-palette.tsx
@@ -0,0 +1,311 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { useModalFocus } from '@panel/components/ui/modal-focus'
+import type { UsersListResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { CONSOLE_TABS, type ConsoleTab, TAB_META, tabLabel } from '@panel/lib/console-tabs'
+import { useEscapeLayer } from '@panel/lib/escape-layers'
+import type { SessionUser } from '@panel/lib/types'
+import { Search } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+interface Item {
+  id: string
+  label: string
+  hint: string
+  run: () => void
+}
+
+interface Group {
+  label: string
+  items: Item[]
+}
+
+/** Per group, as the prototype does — a palette that scrolls has stopped helping. */
+const MAX_PER_GROUP = 8
+/** Long enough that typing a name does not fire a request per keystroke. */
+const SEARCH_DEBOUNCE_MS = 180
+
+/**
+ * ⌘K / Ctrl+K command palette.
+ *
+ * Three groups, matching the prototype: every tab, the handful of actions worth
+ * reaching by name, and a live user search. Two rules the prototype could not
+ * enforce and this one does:
+ *
+ * - Nothing appears that the signed-in role cannot do. The palette is a
+ *   shortcut, not a second way in: a tab hidden from the rail is hidden here,
+ *   and "Invite a user" only shows with `edit_users`.
+ * - Matching is locale-aware. `toLowerCase()` maps İ to "i̇" (i plus a combining
+ *   dot) and I to "i", so a Turkish user searching "izmir" would miss "İzmir"
+ *   and searching "ısparta" would miss "Isparta".
+ */
+export function CommandPalette({
+  user,
+  open,
+  onClose,
+}: {
+  user: SessionUser
+  open: boolean
+  onClose: () => void
+}) {
+  const { t, lang, themeChoice, setThemeChoice } = useApp()
+  const router = useRouter()
+
+  const [query, setQuery] = useState('')
+  const [cursor, setCursor] = useState(0)
+  const [people, setPeople] = useState<UsersListResponse['users']>([])
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  useEscapeLayer(open, onClose)
+  useModalFocus(panelRef, open)
+
+  // A palette that reopens showing the last search is a palette that acts on
+  // stale intent the first time you press Enter.
+  useEffect(() => {
+    if (!open) return
+    setQuery('')
+    setCursor(0)
+    setPeople([])
+  }, [open])
+
+  const can = useCallback(
+    (permission: string) => user.permissions.includes(permission as never),
+    [user],
+  )
+
+  const go = useCallback(
+    (tab: ConsoleTab, query?: Record<string, string>) => {
+      onClose()
+      const search = query ? `?${new URLSearchParams(query)}` : ''
+      router.push(`/console/${tab}${search}`)
+    },
+    [onClose, router],
+  )
+
+  /**
+   * Live user lookup, so the group is not capped at whatever the first page
+   * held. No permission gate: the Users tab carries none either, and the
+   * endpoint decides for itself what the caller may see. (An earlier draft
+   * gated this on `view_users`, which is not one of the nine permissions the
+   * contract defines — so the group silently never appeared.)
+   */
+  useEffect(() => {
+    if (!open) return
+    const term = query.trim()
+    if (term.length < 2) {
+      setPeople([])
+      return
+    }
+
+    let cancelled = false
+    const timer = setTimeout(async () => {
+      const params = new URLSearchParams({ search: term, pageSize: String(MAX_PER_GROUP), lang })
+      const res = await call<UsersListResponse>(`/api/users?${params}`)
+      if (!cancelled && res.ok) setPeople(res.data.users)
+    }, SEARCH_DEBOUNCE_MS)
+
+    return () => {
+      cancelled = true
+      clearTimeout(timer)
+    }
+  }, [open, query, lang])
+
+  const groups = useMemo<Group[]>(() => {
+    const fold = (value: string) => value.toLocaleLowerCase(lang === 'tr' ? 'tr-TR' : 'en-GB')
+    const needle = fold(query.trim())
+    const matches = (item: Item) => !needle || fold(`${item.label} ${item.hint}`).includes(needle)
+
+    const tabs: Item[] = CONSOLE_TABS.filter((tab) => {
+      const permission = TAB_META[tab].permission
+      return !permission || user.permissions.includes(permission)
+    }).map((tab) => ({
+      id: `tab:${tab}`,
+      label: tabLabel(t, tab),
+      hint: t.c.goTo,
+      run: () => go(tab),
+    }))
+
+    const actions: Item[] = []
+    if (can('edit_users')) {
+      actions.push({
+        id: 'act:invite',
+        label: t.cpInvite,
+        hint: t.c.users,
+        run: () => go('users', { new: '1' }),
+      })
+    }
+    if (can('edit_roles')) {
+      actions.push({ id: 'act:role', label: t.cpNewRole, hint: t.c.roles, run: () => go('roles') })
+    }
+    // Same three-state cycle as the header button and the Appearance row —
+    // a palette action that only flipped light/dark could not get back to
+    // "system", which is the default the rest of the app respects.
+    const nextChoice =
+      themeChoice === 'system' ? 'light' : themeChoice === 'light' ? 'dark' : 'system'
+    actions.push({
+      id: 'act:theme',
+      label:
+        nextChoice === 'system'
+          ? t.seSystem
+          : nextChoice === 'light'
+            ? t.cpThemeLight
+            : t.cpThemeDark,
+      hint: t.seAppearance,
+      run: () => {
+        setThemeChoice(nextChoice)
+        onClose()
+      },
+    })
+    if (can('view_logs')) {
+      actions.push({
+        id: 'act:logs',
+        label: t.cpClearLogs,
+        hint: t.c.diagnostics,
+        run: () => go('logs'),
+      })
+    }
+    actions.push({
+      id: 'act:signout',
+      label: t.c.signOut,
+      hint: t.c.sessions,
+      run: () => {
+        onClose()
+        router.push('/signin')
+      },
+    })
+
+    const persons: Item[] = people.map((person) => ({
+      id: `user:${person.id}`,
+      label: `${person.name} — ${person.role}`,
+      hint: person.email.split('@')[0] ?? '',
+      run: () => go('users', { q: person.name }),
+    }))
+
+    return [
+      { label: t.c.goTo, items: tabs.filter(matches) },
+      { label: t.cpActions, items: actions.filter(matches) },
+      // Already filtered by the server; filtering again would drop matches on
+      // fields the query hit but the label does not show.
+      { label: t.c.users, items: persons },
+    ]
+      .map((group) => ({ ...group, items: group.items.slice(0, MAX_PER_GROUP) }))
+      .filter((group) => group.items.length > 0)
+  }, [
+    query,
+    lang,
+    t,
+    user.permissions,
+    can,
+    themeChoice,
+    setThemeChoice,
+    people,
+    go,
+    onClose,
+    router,
+  ])
+
+  const flat = useMemo(() => groups.flatMap((g) => g.items), [groups])
+  const active = flat[Math.min(cursor, flat.length - 1)]
+
+  // Typing narrows the list under the cursor; leaving it where it was would run
+  // whatever happened to slide into that position.
+  useEffect(() => {
+    setCursor(0)
+  }, [query, people])
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      setCursor((c) => (flat.length === 0 ? 0 : (c + 1) % flat.length))
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      setCursor((c) => (flat.length === 0 ? 0 : (c - 1 + flat.length) % flat.length))
+    } else if (event.key === 'Enter') {
+      event.preventDefault()
+      active?.run()
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-[110] flex items-start justify-center px-6 pb-6 pt-[88px] backdrop-blur-[3px]"
+      style={{ background: 'rgba(0,0,0,0.55)', animation: 'dtFade 0.14s ease' }}
+      onMouseDown={onClose}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={t.a11yPalette}
+        tabIndex={-1}
+        onMouseDown={(e) => e.stopPropagation()}
+        onKeyDown={onKeyDown}
+        className="flex w-full max-w-[560px] flex-col overflow-hidden rounded-[12px] border border-border bg-popover shadow-e4 outline-none"
+        style={{ animation: 'dtDrop 0.16s ease' }}
+      >
+        <div className="flex items-center gap-[10px] border-b border-border px-[14px]">
+          <Search className="h-[15px] w-[15px] shrink-0 text-muted-fg" strokeWidth={2.2} />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t.cpPlaceholder}
+            aria-label={t.cpPlaceholder}
+            // The list is the listbox; the input keeps focus and drives it.
+            role="combobox"
+            aria-expanded
+            aria-controls="dt-palette-list"
+            aria-activedescendant={active ? `dt-cmd-${active.id}` : undefined}
+            className="h-11 min-w-0 flex-1 bg-transparent text-sm text-fg outline-none"
+          />
+          <Caps className="shrink-0 rounded-[4px] bg-hover px-[5px] py-px font-mono text-[9px] text-muted-fg">
+            ESC
+          </Caps>
+        </div>
+
+        <div id="dt-palette-list" role="listbox" className="max-h-[52vh] overflow-y-auto p-1">
+          {flat.length === 0 ? (
+            <p className="m-0 px-3 py-8 text-center text-[12.5px] text-muted-fg">{t.cpEmpty}</p>
+          ) : (
+            groups.map((group) => (
+              <div key={group.label} className="flex flex-col gap-px py-1">
+                <Caps className="px-2 py-[5px] font-mono text-[8.5px] tracking-[0.14em] text-muted-fg">
+                  {group.label}
+                </Caps>
+                {group.items.map((item) => (
+                  <button
+                    key={item.id}
+                    id={`dt-cmd-${item.id}`}
+                    type="button"
+                    role="option"
+                    aria-selected={item.id === active?.id}
+                    // Pointer and keyboard share one cursor, so hovering never
+                    // disagrees with what Enter is about to do.
+                    onMouseEnter={() => setCursor(flat.findIndex((f) => f.id === item.id))}
+                    onClick={item.run}
+                    className={cn(
+                      'flex w-full items-center gap-[10px] rounded-[8px] px-2 py-2 text-left text-[13px] text-fg',
+                      item.id === active?.id ? 'bg-hover' : 'bg-transparent',
+                    )}
+                  >
+                    <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                    <span className="shrink-0 font-mono text-[10px] text-muted-fg">
+                      {item.hint}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/editor/panel/components/console/console-shell.tsx b/apps/editor/panel/components/console/console-shell.tsx
new file mode 100644
index 000000000..0b2accbb0
--- /dev/null
+++ b/apps/editor/panel/components/console/console-shell.tsx
@@ -0,0 +1,418 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { CommandPalette } from '@panel/components/console/command-palette'
+import { Caps } from '@panel/components/ui/caps'
+import { Button, LangToggle, ThemeToggle } from '@panel/components/ui/controls'
+import { Dialog, Toast } from '@panel/components/ui/feedback'
+import { BrandLockup } from '@panel/components/ui/netlog-logo'
+import type { SessionResponse, TouchResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { type ConsoleTab, railEntries, tabLabel } from '@panel/lib/console-tabs'
+import { useEscapeLayer } from '@panel/lib/escape-layers'
+import { useBreakpoint } from '@panel/lib/hooks/use-breakpoint'
+import type { SessionUser } from '@panel/lib/types'
+import { ChevronDown, Clock, Search } from 'lucide-react'
+import { usePathname, useRouter } from 'next/navigation'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+/** Warning appears two minutes before the idle limit — the figure from WP4. */
+const WARN_AT_SECONDS = 120
+const POLL_MS = 30_000
+
+export function ConsoleShell({
+  user: initialUser,
+  tab,
+  children,
+}: {
+  user: SessionUser
+  tab: ConsoleTab
+  children: React.ReactNode
+}) {
+  const { t } = useApp()
+  const router = useRouter()
+  const pathname = usePathname()
+  const { isWide, isMobile, touch } = useBreakpoint()
+
+  const [user] = useState(initialUser)
+  const [navOpen, setNavOpen] = useState(false)
+  const [paletteOpen, setPaletteOpen] = useState(false)
+  const [secondsLeft, setSecondsLeft] = useState<number | null>(null)
+  const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' } | null>(null)
+  const signingOut = useRef(false)
+
+  const rail = useMemo(
+    () => railEntries(t).filter((e) => !e.permission || user.permissions.includes(e.permission)),
+    [t, user.permissions],
+  )
+
+  const signOut = useCallback(
+    async (reason: 'user' | 'idle') => {
+      if (signingOut.current) return
+      signingOut.current = true
+      await call('/api/auth/signout', { body: { allDevices: false } })
+      router.push(reason === 'idle' ? '/signin?expired=1' : '/signin')
+    },
+    [router],
+  )
+
+  /**
+   * The countdown is server-owned: every poll replaces the local number with
+   * `expiresInSeconds` from the API. Ticking it down locally between polls is
+   * only there to make the dialog count smoothly.
+   */
+  useEffect(() => {
+    let cancelled = false
+
+    const sync = async () => {
+      // A hidden tab must not keep the session alive — the poll is activity.
+      if (document.visibilityState === 'hidden') return
+      const res = await call<SessionResponse>('/api/auth/session')
+      if (cancelled) return
+      if (!res.ok) return
+      if (res.data.state === 'anonymous') {
+        void signOut('idle')
+        return
+      }
+      setSecondsLeft(res.data.expiresInSeconds)
+    }
+
+    // Named, so the listener can actually be removed again — an inline arrow
+    // here leaks one listener per remount.
+    const onVisibility = () => void sync()
+
+    void sync()
+    const poll = setInterval(() => void sync(), POLL_MS)
+    document.addEventListener('visibilitychange', onVisibility)
+
+    return () => {
+      cancelled = true
+      clearInterval(poll)
+      document.removeEventListener('visibilitychange', onVisibility)
+    }
+  }, [signOut])
+
+  // Local tick between polls, purely so the countdown reads smoothly. The poll
+  // above is what the number is actually anchored to.
+  const counting = secondsLeft !== null
+  useEffect(() => {
+    if (!counting) return
+    const tick = setInterval(() => {
+      setSecondsLeft((prev) => {
+        if (prev === null) return prev
+        if (prev <= 1) {
+          void signOut('idle')
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+    return () => clearInterval(tick)
+  }, [counting, signOut])
+
+  const idleWarning = secondsLeft !== null && secondsLeft <= WARN_AT_SECONDS && secondsLeft > 0
+
+  const staySignedIn = useCallback(async () => {
+    const res = await call<TouchResponse>('/api/auth/session/touch', { body: {} })
+    if (!res.ok) {
+      void signOut('idle')
+      return
+    }
+    setSecondsLeft(res.data.expiresInSeconds)
+    setToast({ message: t.idleExtended, tone: 'success' })
+    setTimeout(() => setToast(null), 2400)
+  }, [signOut, t])
+
+  /**
+   * Escape chain: menu → command palette → drawer → dialog → inline edit. Only
+   * the topmost layer closes per press. Ordering comes from the layer stack in
+   * `@panel/lib/escape-layers` — mounting order is nesting order, so no layer has to
+   * know what sits above it.
+   */
+  const closeNav = useCallback(() => setNavOpen(false), [])
+  useEscapeLayer(navOpen, closeNav)
+
+  /**
+   * ⌘K on macOS, Ctrl+K elsewhere. Bound at the window so it works from any
+   * tab, and `preventDefault` because Ctrl+K is Chrome's address-bar search.
+   */
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey)) return
+      event.preventDefault()
+      setPaletteOpen((open) => !open)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [])
+
+  const closePalette = useCallback(() => setPaletteOpen(false), [])
+
+  // Dismiss the "Go to" menu on any outside click, matching CustomSelect.
+  useEffect(() => {
+    if (!navOpen) return
+    const onClick = () => setNavOpen(false)
+    window.addEventListener('click', onClick)
+    return () => window.removeEventListener('click', onClick)
+  }, [navOpen])
+
+  const goto = useCallback(
+    (next: ConsoleTab) => {
+      if (pathname !== `/console/${next}`) router.push(`/console/${next}`)
+    },
+    [pathname, router],
+  )
+
+  const initials = user.name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0] ?? '')
+    .join('')
+    .toLocaleUpperCase('tr')
+
+  return (
+    <div data-screen-label="Admin console" className="flex min-h-screen flex-col bg-bg text-fg">
+      <header className="relative z-40 flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border bg-sidebar px-3">
+        <BrandLockup
+          label="Console"
+          meta={isWide ? 'ADMIN · V0.9.1' : undefined}
+          logoClassName="h-[26px] w-auto"
+          labelClassName="text-[13px] font-semibold"
+        />
+
+        <div className="flex shrink-0 items-center gap-[7px]">
+          {isWide ? (
+            <button
+              type="button"
+              onClick={() => setPaletteOpen(true)}
+              title={t.a11yPalette}
+              aria-label={t.a11yPalette}
+              className={cn(
+                'flex shrink-0 items-center gap-[6px] whitespace-nowrap border border-border bg-field px-[9px] font-medium text-fg hover:bg-hover',
+                touch ? 'h-11 rounded-[10px]' : 'h-7 rounded-[8px]',
+              )}
+            >
+              <Search className="block h-3 w-3 shrink-0 text-muted-fg" strokeWidth={2.2} />
+              <span className="text-[11.5px] text-muted-fg">{t.c.search}</span>
+              <span className="rounded-[4px] bg-hover px-1 py-px font-mono text-[9px] text-muted-fg">
+                ⌘K
+              </span>
+            </button>
+          ) : null}
+
+          <LangToggle />
+          <ThemeToggle />
+
+          {/* "Go to" is hidden on mobile: the tab strip below the header already
+              lists every destination, and at 402 px the extra control pushed the
+              brand label out of the header entirely. */}
+          {isWide ? (
+            <div className="relative shrink-0">
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setNavOpen((v) => !v)
+                }}
+                aria-expanded={navOpen}
+                className={cn(
+                  'flex shrink-0 items-center gap-[6px] whitespace-nowrap border border-border bg-field px-[9px] text-[11.5px] font-medium text-fg hover:bg-hover',
+                  touch ? 'h-11 rounded-[10px]' : 'h-7 rounded-[8px]',
+                )}
+              >
+                <span>{t.c.goTo}</span>
+                <ChevronDown
+                  className={cn(
+                    'block h-3 w-3 shrink-0 text-muted-fg transition-transform',
+                    navOpen && 'rotate-180',
+                  )}
+                  strokeWidth={2.5}
+                />
+              </button>
+
+              {navOpen ? (
+                <div
+                  className="absolute right-0 top-8 z-[70] w-[172px] rounded-[10px] border border-border bg-popover p-1 shadow-e4"
+                  style={{ animation: 'dtDrop 0.14s ease' }}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {rail
+                    .filter((entry) => entry.kind === 'item')
+                    .slice(0, 5)
+                    .map((entry) => (
+                      <button
+                        key={entry.id}
+                        type="button"
+                        onClick={() => {
+                          setNavOpen(false)
+                          goto(entry.id!)
+                        }}
+                        className="flex h-[30px] w-full items-center gap-2 rounded-[7px] px-2 text-left text-xs font-medium text-fg hover:bg-hover"
+                      >
+                        <span className="h-1 w-1 shrink-0 rounded-full bg-brand" />
+                        <span>{entry.label}</span>
+                      </button>
+                    ))}
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+
+          <div className="flex shrink-0 items-center gap-2 rounded-[8px] border border-border bg-field px-2 py-1">
+            <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-[5px] bg-hover text-[9px] font-semibold text-brand-fg">
+              {initials}
+            </span>
+            {isWide ? (
+              <span className="whitespace-nowrap text-[11.5px] font-medium text-fg">
+                {user.name}
+              </span>
+            ) : null}
+          </div>
+
+          {/* The console and the editor are one product; an administrator
+              standing in the console should not have to type a URL to get
+              back to the work itself. */}
+          <a
+            className={cn(
+              'flex shrink-0 items-center whitespace-nowrap rounded-[8px] bg-brand px-[10px] font-medium text-[11.5px] text-[#18181b] no-underline transition-opacity hover:opacity-90',
+              touch ? 'h-11 rounded-[10px]' : 'h-7',
+            )}
+            href="/"
+          >
+            {t.c.openEditor}
+          </a>
+
+          <button
+            type="button"
+            onClick={() => void signOut('user')}
+            className={cn(
+              'shrink-0 whitespace-nowrap border border-destructive bg-field px-[10px] text-[11.5px] font-medium text-destructive hover:bg-hover',
+              touch ? 'h-11 rounded-[10px]' : 'h-7 rounded-[8px]',
+            )}
+          >
+            {isWide ? t.c.signOut : t.c.signOutShort}
+          </button>
+        </div>
+      </header>
+
+      {isMobile ? (
+        <nav className="dt-scroll-x flex shrink-0 items-center gap-[2px] border-b border-border bg-sidebar px-[10px] py-2">
+          {rail
+            .filter((entry) => entry.kind === 'item')
+            .map((entry) => (
+              <button
+                key={entry.id}
+                type="button"
+                onClick={() => goto(entry.id!)}
+                aria-current={entry.id === tab ? 'page' : undefined}
+                className={cn(
+                  'h-11 whitespace-nowrap rounded-[6px] px-[10px] text-[11px] font-medium',
+                  entry.id === tab
+                    ? 'bg-panel-hi text-fg shadow-e2'
+                    : 'bg-transparent text-muted-fg',
+                )}
+              >
+                {entry.label}
+              </button>
+            ))}
+        </nav>
+      ) : null}
+
+      <div className="flex min-h-0 min-w-0 flex-1">
+        {isWide ? (
+          <nav className="flex w-[208px] shrink-0 flex-col gap-px border-r border-border bg-sidebar px-2 py-[10px]">
+            {rail.map((entry, index) =>
+              entry.kind === 'heading' ? (
+                <div key={`h-${index}`} className="px-2 pb-[3px] pt-[11px]">
+                  <Caps className="font-mono text-[8.5px] tracking-[0.14em] text-muted-fg">
+                    {entry.label}
+                  </Caps>
+                </div>
+              ) : (
+                <button
+                  key={entry.id}
+                  type="button"
+                  onClick={() => goto(entry.id!)}
+                  aria-current={entry.id === tab ? 'page' : undefined}
+                  className={cn(
+                    'flex w-full min-w-0 items-center gap-[9px] rounded-[7px] px-2 font-medium',
+                    touch ? 'h-11 text-[13px]' : 'h-[30px] text-[12.5px]',
+                    entry.id === tab
+                      ? 'bg-panel text-fg'
+                      : 'bg-transparent text-muted-fg hover:text-fg',
+                  )}
+                >
+                  <span
+                    className="h-[5px] w-[5px] shrink-0 rounded-full"
+                    style={{ background: entry.id === tab ? 'var(--dt-brand)' : 'var(--dt-input)' }}
+                  />
+                  <span className="truncate">{entry.label}</span>
+                </button>
+              ),
+            )}
+
+            <div className="mt-auto flex flex-col gap-1 px-2 pb-1 pt-4">
+              <Caps className="font-mono text-[8.5px] tracking-[0.14em] text-muted-fg">
+                {t.c.buildLabel}
+              </Caps>
+              <span className="flex items-center gap-[6px] font-mono text-[8.5px] tracking-[0.14em] text-muted-fg">
+                <span
+                  className="h-[5px] w-[5px] rounded-full bg-brand"
+                  style={{ animation: 'dtPulse 2s ease infinite' }}
+                />
+                <Caps>{t.c.webgpuHealthy}</Caps>
+              </span>
+            </div>
+          </nav>
+        ) : null}
+
+        <main className="min-h-0 min-w-0 flex-1 overflow-y-auto">
+          <div
+            key={tab}
+            className="mx-auto w-full max-w-[1180px] px-5 py-6"
+            style={{ animation: 'dtFade 0.18s ease' }}
+          >
+            <h1 className="sr-only">{tabLabel(t, tab)}</h1>
+            {children}
+          </div>
+        </main>
+      </div>
+
+      <CommandPalette user={user} open={paletteOpen} onClose={closePalette} />
+
+      {idleWarning ? (
+        <Dialog role="alertdialog" labelledBy="dt-idle-title">
+          <div className="flex items-center gap-[10px]">
+            <div className="flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[9px] border border-brand bg-field text-brand-fg">
+              <Clock className="block h-[15px] w-[15px]" strokeWidth={2.2} />
+            </div>
+            <h2 id="dt-idle-title" className="m-0 text-[15px] font-semibold tracking-[-0.01em]">
+              {t.idleTitle}
+            </h2>
+          </div>
+          <p className="m-0 text-[12.5px] leading-[1.55] text-muted-fg text-pretty">{t.idleLead}</p>
+          <span className="font-mono text-[26px] font-medium tracking-[0.02em] text-fg">
+            {formatCountdown(secondsLeft ?? 0)}
+          </span>
+          <div className="flex flex-col gap-[9px]">
+            {/* Mouse movement deliberately does NOT extend the session while this
+                is open — only a deliberate click does (WP4). */}
+            <Button onClick={() => void staySignedIn()}>{t.idleStay}</Button>
+            <Button variant="secondary" onClick={() => void signOut('user')}>
+              {t.idleOut}
+            </Button>
+          </div>
+        </Dialog>
+      ) : null}
+
+      {toast ? <Toast message={toast.message} tone={toast.tone} /> : null}
+    </div>
+  )
+}
+
+function formatCountdown(totalSeconds: number): string {
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${minutes}:${String(seconds).padStart(2, '0')}`
+}
diff --git a/apps/editor/panel/components/console/guides-tab.tsx b/apps/editor/panel/components/console/guides-tab.tsx
new file mode 100644
index 000000000..97d303d4c
--- /dev/null
+++ b/apps/editor/panel/components/console/guides-tab.tsx
@@ -0,0 +1,154 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { useEffect, useState } from 'react'
+
+/**
+ * The documentation, inside the console.
+ *
+ * The same pages the public site serves — fetched rather than duplicated, so
+ * there is one manual and it cannot drift into two. Signed-in people should
+ * not have to leave the console to look something up.
+ */
+
+interface GuideBlock {
+  heading: string
+  body?: string[]
+  points?: string[]
+  table?: { columns: [string, string]; rows: [string, string][] }
+}
+
+interface GuidePage {
+  slug: string
+  title: string
+  description: string
+  blocks: GuideBlock[]
+}
+
+interface GuideGroup {
+  title: string
+  pages: GuidePage[]
+}
+
+export function GuidesTab() {
+  const { t, lang } = useApp()
+  const [groups, setGroups] = useState<GuideGroup[]>([])
+  const [slug, setSlug] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch(`/api/guides?lang=${lang}`, { cache: 'no-store' })
+      .then((response) => (response.ok ? response.json() : { groups: [] }))
+      .then((body: { groups?: GuideGroup[] }) => {
+        if (cancelled) return
+        setGroups(body.groups ?? [])
+        setSlug((current) => current ?? body.groups?.[0]?.pages?.[0]?.slug ?? null)
+      })
+      .catch(() => {
+        /* the empty state covers it */
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [lang])
+
+  const page = groups.flatMap((group) => group.pages).find((p) => p.slug === slug)
+
+  return (
+    <section className="flex min-w-0 gap-6" style={{ animation: 'dtFade 0.2s ease' }}>
+      <nav className="hidden w-[196px] shrink-0 flex-col gap-4 md:flex">
+        {groups.map((group) => (
+          <div className="flex flex-col gap-[3px]" key={group.title}>
+            <span className="px-[9px] pb-[3px] font-semibold text-[12px] text-fg">
+              {group.title}
+            </span>
+            {group.pages.map((item) => (
+              <button
+                className={`cursor-pointer rounded-[7px] px-[9px] py-[5px] text-left text-[12.5px] transition-colors ${
+                  item.slug === slug
+                    ? 'bg-hover font-medium text-fg'
+                    : 'text-muted-fg hover:bg-hover/60 hover:text-fg'
+                }`}
+                key={item.slug}
+                onClick={() => setSlug(item.slug)}
+                type="button"
+              >
+                {item.title}
+              </button>
+            ))}
+          </div>
+        ))}
+      </nav>
+
+      <article className="flex min-w-0 max-w-[680px] flex-1 flex-col gap-7">
+        {page ? (
+          <>
+            <header className="flex flex-col gap-[6px]">
+              <h2 className="m-0 font-semibold text-[19px] tracking-[-0.015em]">{page.title}</h2>
+              <p className="m-0 text-[13px] text-muted-fg leading-[1.6]">{page.description}</p>
+            </header>
+
+            {page.blocks.map((block) => (
+              <div className="flex flex-col gap-[9px]" key={block.heading}>
+                <h3 className="m-0 font-semibold text-[14.5px] tracking-[-0.01em]">
+                  {block.heading}
+                </h3>
+
+                {block.body?.map((paragraph) => (
+                  <p className="m-0 text-[13px] text-fg leading-[1.7]" key={paragraph}>
+                    {paragraph}
+                  </p>
+                ))}
+
+                {block.points ? (
+                  <ul className="m-0 flex list-none flex-col gap-[6px] p-0">
+                    {block.points.map((point) => (
+                      <li className="flex gap-[9px] text-[13px] text-fg leading-[1.65]" key={point}>
+                        <span
+                          aria-hidden
+                          className="mt-[8px] h-[4px] w-[4px] shrink-0 rounded-full bg-brand"
+                        />
+                        <span>{point}</span>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+
+                {block.table ? (
+                  <div className="overflow-x-auto rounded-[12px] border border-border bg-surface">
+                    <table className="w-full border-collapse text-[12.5px]">
+                      <thead>
+                        <tr className="border-border border-b text-left font-mono text-[9.5px] text-muted-fg uppercase tracking-[0.12em]">
+                          <th className="px-[13px] py-[9px] font-medium">
+                            {block.table.columns[0]}
+                          </th>
+                          <th className="px-[13px] py-[9px] font-medium">
+                            {block.table.columns[1]}
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {block.table.rows.map(([key, value]) => (
+                          <tr className="border-border-soft border-t" key={key}>
+                            <td className="px-[13px] py-[9px] align-top">
+                              <span className="rounded-[5px] border border-border bg-field px-[7px] py-[2px] font-mono text-[11.5px] text-fg">
+                                {key}
+                              </span>
+                            </td>
+                            <td className="px-[13px] py-[9px] text-muted-fg">{value}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                ) : null}
+              </div>
+            ))}
+          </>
+        ) : (
+          <p className="m-0 text-[13px] text-muted-fg">{t.scEmpty}</p>
+        )}
+      </article>
+    </section>
+  )
+}
diff --git a/apps/editor/panel/components/console/integrations-tab.tsx b/apps/editor/panel/components/console/integrations-tab.tsx
new file mode 100644
index 000000000..e6571ee0f
--- /dev/null
+++ b/apps/editor/panel/components/console/integrations-tab.tsx
@@ -0,0 +1,489 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { Button, SegBar, SegButton } from '@panel/components/ui/controls'
+import { Dialog, Toast } from '@panel/components/ui/feedback'
+import type {
+  CreateKeyResponse,
+  KeysResponse,
+  WebhooksResponse,
+  WebhookTestResponse,
+} from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { formatDate, resolveApiMessage } from '@panel/lib/i18n'
+import type { ApiKey, Webhook } from '@panel/lib/types'
+import { useCallback, useEffect, useState } from 'react'
+
+export function IntegrationsTab() {
+  const { t, lang } = useApp()
+
+  const [keys, setKeys] = useState<ApiKey[]>([])
+  const [sites, setSites] = useState<string[]>([])
+  const [hooks, setHooks] = useState<Webhook[]>([])
+  const [events, setEvents] = useState<string[]>([])
+  const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' } | null>(null)
+
+  const [creatingKey, setCreatingKey] = useState(false)
+  const [keyName, setKeyName] = useState('')
+  const [keyScope, setKeyScope] = useState<'read' | 'read_write'>('read')
+  const [keySite, setKeySite] = useState<string>('')
+  const [freshSecret, setFreshSecret] = useState<string | null>(null)
+  const [copied, setCopied] = useState(false)
+
+  const [addingHook, setAddingHook] = useState(false)
+  const [hookUrl, setHookUrl] = useState('')
+  const [hookEvents, setHookEvents] = useState<string[]>([])
+
+  const notify = useCallback((message: string, tone: 'success' | 'error' = 'success') => {
+    setToast({ message, tone })
+    setTimeout(() => setToast(null), 3000)
+  }, [])
+
+  const load = useCallback(async () => {
+    const [k, h] = await Promise.all([
+      call<KeysResponse>('/api/keys'),
+      call<WebhooksResponse>('/api/webhooks'),
+    ])
+    if (k.ok) {
+      setKeys(k.data.keys)
+      setSites(k.data.sites)
+    }
+    if (h.ok) {
+      setHooks(h.data.webhooks)
+      setEvents(h.data.events)
+    }
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const createKey = useCallback(async () => {
+    if (!keyName.trim()) {
+      notify(t.errFields, 'error')
+      return
+    }
+    const res = await call<CreateKeyResponse>('/api/keys', {
+      body: { name: keyName.trim(), scope: keyScope, siteName: keySite || null },
+    })
+    if (!res.ok) {
+      notify(resolveApiMessage(t, res.messageKey), 'error')
+      return
+    }
+    setKeyName('')
+    setCreatingKey(false)
+    setFreshSecret(res.data.key.secret)
+    void load()
+  }, [keyName, keyScope, keySite, notify, t, load])
+
+  const createHook = useCallback(async () => {
+    const res = await call('/api/webhooks', { body: { url: hookUrl.trim(), events: hookEvents } })
+    if (!res.ok) {
+      notify(resolveApiMessage(t, res.messageKey), 'error')
+      return
+    }
+    setHookUrl('')
+    setHookEvents([])
+    setAddingHook(false)
+    void load()
+  }, [hookUrl, hookEvents, notify, t, load])
+
+  const testHook = useCallback(
+    async (hook: Webhook) => {
+      const res = await call<WebhookTestResponse>(`/api/webhooks/${hook.id}/test`, { body: {} })
+      if (!res.ok) {
+        notify(resolveApiMessage(t, res.messageKey), 'error')
+        return
+      }
+      notify(
+        res.data.delivered
+          ? `${hook.url} — ${t.igTestOk}`
+          : `${hook.url} — ${t.igTestFail}${res.data.responseStatus ? ` (HTTP ${res.data.responseStatus})` : ''}`,
+        res.data.delivered ? 'success' : 'error',
+      )
+      void load()
+    },
+    [notify, t, load],
+  )
+
+  return (
+    <section className="flex min-w-0 flex-col gap-6" style={{ animation: 'dtFade 0.2s ease' }}>
+      {/* ——— API keys ——— */}
+      <div className="flex min-w-0 flex-col gap-[14px]">
+        <header className="flex flex-wrap items-end justify-between gap-3">
+          <div className="flex flex-col gap-[2px]">
+            <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.igKeysTitle}</h2>
+            <p className="m-0 text-xs text-muted-fg text-pretty">{t.igKeysLead}</p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setCreatingKey((v) => !v)}
+            className="h-[30px] shrink-0 rounded-[8px] bg-primary px-[13px] text-xs font-semibold text-primary-fg shadow-e2 hover:opacity-92"
+          >
+            {creatingKey ? t.c.closeForm : t.igNewKey}
+          </button>
+        </header>
+
+        {creatingKey ? (
+          <div
+            className="flex flex-wrap items-end gap-[10px] rounded-[12px] border border-input bg-surface p-[13px]"
+            style={{ animation: 'dtDrop 0.16s ease' }}
+          >
+            <div className="flex min-w-[160px] flex-1 flex-col gap-[5px]">
+              <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+                {t.igKeyNameLbl}
+              </Caps>
+              <input
+                type="text"
+                placeholder="WMS sync"
+                value={keyName}
+                onChange={(e) => setKeyName(e.target.value)}
+                className="h-8 w-full min-w-0 rounded-[8px] border border-input bg-field px-[10px] text-xs text-fg outline-none focus:border-ring"
+              />
+            </div>
+
+            <div className="flex flex-col gap-[5px]">
+              <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+                {t.igScopeLbl}
+              </Caps>
+              <SegBar>
+                <SegButton active={keyScope === 'read'} onClick={() => setKeyScope('read')}>
+                  {t.igScopeRead}
+                </SegButton>
+                <SegButton
+                  active={keyScope === 'read_write'}
+                  onClick={() => setKeyScope('read_write')}
+                >
+                  {t.igScopeWrite}
+                </SegButton>
+              </SegBar>
+            </div>
+
+            <div className="flex min-w-[150px] flex-col gap-[5px]">
+              <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+                {t.igSiteLbl}
+              </Caps>
+              <select
+                value={keySite}
+                onChange={(e) => setKeySite(e.target.value)}
+                className="h-8 w-full min-w-0 rounded-[8px] border border-input bg-field px-[8px] text-xs text-fg outline-none focus:border-ring"
+              >
+                <option value="">{t.igAllSites}</option>
+                {sites.map((site) => (
+                  <option key={site} value={site}>
+                    {site}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="flex gap-[7px]">
+              <button
+                type="button"
+                onClick={() => void createKey()}
+                className="h-8 rounded-[8px] bg-primary px-[14px] text-xs font-semibold text-primary-fg hover:opacity-92"
+              >
+                {t.igCreateKey}
+              </button>
+              <button
+                type="button"
+                onClick={() => setCreatingKey(false)}
+                className="h-8 rounded-[8px] border border-border bg-transparent px-3 text-xs text-muted-fg hover:bg-hover hover:text-fg"
+              >
+                {t.cancel}
+              </button>
+            </div>
+          </div>
+        ) : null}
+
+        <div className="flex min-w-0 flex-col overflow-hidden rounded-[12px] border border-border">
+          {keys.length === 0 ? (
+            <div className="px-3 py-8 text-center text-[11.5px] text-muted-fg">{t.igNoKeys}</div>
+          ) : (
+            keys.map((key) => (
+              <div
+                key={key.id}
+                className="flex min-w-0 flex-wrap items-center gap-3 border-b border-border-soft px-3 py-[10px] last:border-b-0"
+              >
+                {/* A revoked row used to be dimmed with opacity-55. That drops
+                    every column on it — scope, site, last use — to 2.98:1,
+                    which is the one thing a row nobody can read is not allowed
+                    to be. The state is carried by the struck-through key and
+                    the "Revoked" label instead, both of which survive at full
+                    contrast. */}
+                <div className="flex min-w-[180px] flex-1 flex-col gap-[2px]">
+                  <span
+                    className={cn(
+                      'truncate text-[12.5px] font-medium',
+                      key.revokedAt && 'line-through',
+                    )}
+                  >
+                    {key.name}
+                  </span>
+                  <span
+                    className={cn(
+                      'truncate font-mono text-[10px] text-muted-fg',
+                      key.revokedAt && 'line-through',
+                    )}
+                  >
+                    {key.prefix}••••••••••••
+                  </span>
+                </div>
+                <span className="w-[110px] shrink-0 rounded-[5px] border border-border px-[7px] py-px text-center font-mono text-[10px] text-muted-fg">
+                  {key.scope === 'read' ? t.igScopeRead : t.igScopeWrite}
+                </span>
+                <span className="w-[120px] shrink-0 truncate text-[11.5px] text-muted-fg">
+                  {key.siteId ?? t.igAllSites}
+                </span>
+                <span className="w-[150px] shrink-0 truncate font-mono text-[10px] text-muted-fg">
+                  {key.lastUsedAt ? formatDate(lang, key.lastUsedAt) : t.igNever}
+                </span>
+                {key.revokedAt ? (
+                  <span className="shrink-0 text-[11px] text-muted-fg">{t.igRevoked}</span>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      const res = await call(`/api/keys/${key.id}`, { method: 'DELETE' })
+                      if (!res.ok) {
+                        notify(resolveApiMessage(t, res.messageKey), 'error')
+                        return
+                      }
+                      void load()
+                    }}
+                    className="h-[26px] shrink-0 rounded-[6px] border border-destructive bg-transparent px-[10px] text-[11px] text-destructive hover:bg-hover"
+                  >
+                    {t.igRevoke}
+                  </button>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* ——— Webhooks ——— */}
+      <div className="flex min-w-0 flex-col gap-[14px]">
+        <header className="flex flex-wrap items-end justify-between gap-3">
+          <div className="flex flex-col gap-[2px]">
+            <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.igHooksTitle}</h2>
+            <p className="m-0 text-xs text-muted-fg text-pretty">{t.igHooksLead}</p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setAddingHook((v) => !v)}
+            className="h-[30px] shrink-0 rounded-[8px] bg-primary px-[13px] text-xs font-semibold text-primary-fg shadow-e2 hover:opacity-92"
+          >
+            {addingHook ? t.c.closeForm : t.igAddHook}
+          </button>
+        </header>
+
+        {addingHook ? (
+          <div
+            className="flex flex-col gap-[10px] rounded-[12px] border border-input bg-surface p-[13px]"
+            style={{ animation: 'dtDrop 0.16s ease' }}
+          >
+            <div className="flex flex-col gap-[5px]">
+              <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">URL</Caps>
+              <input
+                type="text"
+                placeholder="https://wms.netlog.com.tr/hooks/dt"
+                value={hookUrl}
+                onChange={(e) => setHookUrl(e.target.value)}
+                className="h-8 w-full min-w-0 rounded-[8px] border border-input bg-field px-[10px] font-mono text-xs text-fg outline-none focus:border-ring"
+              />
+            </div>
+
+            <div className="flex flex-col gap-[5px]">
+              <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+                {t.igEventsLbl}
+              </Caps>
+              <div className="flex flex-wrap gap-[6px]">
+                {events.map((event) => {
+                  const on = hookEvents.includes(event)
+                  return (
+                    <button
+                      key={event}
+                      type="button"
+                      onClick={() =>
+                        setHookEvents((prev) =>
+                          on ? prev.filter((e) => e !== event) : [...prev, event],
+                        )
+                      }
+                      className={cn(
+                        'flex h-[26px] items-center gap-2 rounded-[6px] border px-[9px] font-mono text-[10.5px]',
+                        on
+                          ? 'border-brand bg-field text-fg'
+                          : 'border-border bg-transparent text-muted-fg',
+                      )}
+                    >
+                      <span
+                        className={cn(
+                          'h-[8px] w-[8px] shrink-0 rounded-[2px] border',
+                          on ? 'border-brand bg-brand' : 'border-input',
+                        )}
+                      />
+                      {event}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+
+            <div className="flex gap-[7px]">
+              <button
+                type="button"
+                onClick={() => void createHook()}
+                className="h-8 rounded-[8px] bg-primary px-[14px] text-xs font-semibold text-primary-fg hover:opacity-92"
+              >
+                {t.igCreateHook}
+              </button>
+              <button
+                type="button"
+                onClick={() => setAddingHook(false)}
+                className="h-8 rounded-[8px] border border-border bg-transparent px-3 text-xs text-muted-fg hover:bg-hover hover:text-fg"
+              >
+                {t.cancel}
+              </button>
+            </div>
+          </div>
+        ) : null}
+
+        <div className="flex min-w-0 flex-col overflow-hidden rounded-[12px] border border-border">
+          {hooks.length === 0 ? (
+            <div className="px-3 py-8 text-center text-[11.5px] text-muted-fg">{t.igNoHooks}</div>
+          ) : (
+            hooks.map((hook) => (
+              <div
+                key={hook.id}
+                className="flex min-w-0 flex-wrap items-center gap-3 border-b border-border-soft px-3 py-[10px] last:border-b-0"
+              >
+                <div className="flex min-w-[220px] flex-1 flex-col gap-[4px]">
+                  <span className="truncate font-mono text-[11.5px] text-fg">{hook.url}</span>
+                  <div className="flex flex-wrap gap-[4px]">
+                    {hook.events.map((event) => (
+                      <span
+                        key={event}
+                        className="rounded-[4px] border border-border-soft px-[5px] font-mono text-[9px] text-muted-fg"
+                      >
+                        {event}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+
+                <span
+                  className={cn(
+                    'flex w-[110px] shrink-0 items-center gap-[6px] rounded-[5px] border px-[7px] py-px text-[10.5px]',
+                    hook.status === 'active'
+                      ? 'border-border text-fg'
+                      : hook.status === 'failing'
+                        ? 'border-destructive text-destructive'
+                        : 'border-border text-muted-fg',
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'h-[5px] w-[5px] rounded-full',
+                      hook.status === 'active'
+                        ? 'bg-ok'
+                        : hook.status === 'failing'
+                          ? 'bg-destructive'
+                          : 'bg-muted-fg',
+                    )}
+                  />
+                  {hook.status === 'active'
+                    ? t.igStActive
+                    : hook.status === 'paused'
+                      ? t.igStPaused
+                      : t.igStFailing}
+                </span>
+
+                <span className="w-[150px] shrink-0 truncate font-mono text-[10px] text-muted-fg">
+                  {hook.lastDeliveryAt ? formatDate(lang, hook.lastDeliveryAt) : t.igNever}
+                </span>
+
+                <div className="flex shrink-0 items-center gap-[6px]">
+                  <button
+                    type="button"
+                    onClick={() => void testHook(hook)}
+                    className="h-[26px] rounded-[6px] border border-border bg-field px-[10px] text-[11px] text-fg hover:bg-hover"
+                  >
+                    {t.igTest}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      const res = await call(`/api/webhooks/${hook.id}`, {
+                        method: 'PATCH',
+                        body: { status: hook.status === 'paused' ? 'active' : 'paused' },
+                      })
+                      if (!res.ok) {
+                        notify(resolveApiMessage(t, res.messageKey), 'error')
+                        return
+                      }
+                      void load()
+                    }}
+                    className="h-[26px] rounded-[6px] border border-border bg-transparent px-[10px] text-[11px] text-muted-fg hover:bg-hover hover:text-fg"
+                  >
+                    {hook.status === 'paused' ? t.igResume : t.igPause}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      const res = await call(`/api/webhooks/${hook.id}`, { method: 'DELETE' })
+                      if (!res.ok) {
+                        notify(resolveApiMessage(t, res.messageKey), 'error')
+                        return
+                      }
+                      void load()
+                    }}
+                    className="h-[26px] rounded-[6px] border border-destructive bg-transparent px-[10px] text-[11px] text-destructive hover:bg-hover"
+                  >
+                    {t.confirmDelete}
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {freshSecret ? (
+        <Dialog labelledBy="dt-secret-title" width={420} onClose={() => setFreshSecret(null)}>
+          <h2 id="dt-secret-title" className="m-0 text-[15px] font-semibold tracking-[-0.01em]">
+            {t.igSecretTitle}
+          </h2>
+          <code className="select-all break-all rounded-[8px] border border-border bg-field px-3 py-2 font-mono text-[12px] text-fg">
+            {freshSecret}
+          </code>
+          <p className="m-0 text-[11.5px] leading-[1.5] text-muted-fg text-pretty">
+            {t.igSecretNote}
+          </p>
+          <div className="flex gap-[9px]">
+            <Button
+              onClick={async () => {
+                try {
+                  await navigator.clipboard.writeText(freshSecret)
+                  setCopied(true)
+                  setTimeout(() => setCopied(false), 1600)
+                } catch {
+                  /* clipboard blocked — the value is selectable on screen */
+                }
+              }}
+            >
+              {copied ? t.copied : t.copy}
+            </Button>
+            <Button variant="secondary" onClick={() => setFreshSecret(null)}>
+              {t.close}
+            </Button>
+          </div>
+        </Dialog>
+      ) : null}
+
+      {toast ? <Toast message={toast.message} tone={toast.tone} /> : null}
+    </section>
+  )
+}
diff --git a/apps/editor/panel/components/console/invite-form.tsx b/apps/editor/panel/components/console/invite-form.tsx
new file mode 100644
index 000000000..64fd123b9
--- /dev/null
+++ b/apps/editor/panel/components/console/invite-form.tsx
@@ -0,0 +1,179 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { SegBar, SegButton } from '@panel/components/ui/controls'
+import type { CreateUserResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { resolveApiMessage } from '@panel/lib/i18n'
+import type { UserV3 } from '@panel/lib/types'
+import { useState } from 'react'
+
+const DOMAIN = '@netlog.com.tr'
+
+/**
+ * Inline "add user" row. Notably it does NOT take a password: the account is
+ * created as `invited` and sets its own via the emailed link. That removes the
+ * old panel's readable-password column at the source rather than masking it.
+ */
+export function InviteForm({
+  roles,
+  sites,
+  onCancel,
+  onCreated,
+  onError,
+}: {
+  roles: string[]
+  sites: string[]
+  onCancel: () => void
+  onCreated: (user: UserV3) => void
+  onError: (message: string) => void
+}) {
+  const { t } = useApp()
+
+  const [fullName, setFullName] = useState('')
+  const [username, setUsername] = useState('')
+  const [role, setRole] = useState(roles.includes('Editor') ? 'Editor' : (roles[0] ?? 'Viewer'))
+  const [org, setOrg] = useState<'internal' | 'external'>('internal')
+  const [selected, setSelected] = useState<string[]>([])
+  const [busy, setBusy] = useState(false)
+
+  const submit = async () => {
+    if (!fullName.trim() || !username.trim()) {
+      onError(t.errFields)
+      return
+    }
+
+    setBusy(true)
+    const res = await call<CreateUserResponse>('/api/users', {
+      body: {
+        fullName: fullName.trim(),
+        username: username.trim().toLowerCase().replace(/@.*$/, ''),
+        role,
+        org,
+        siteNames: selected,
+      },
+    })
+    setBusy(false)
+
+    if (!res.ok) {
+      onError(resolveApiMessage(t, res.messageKey))
+      return
+    }
+    onCreated(res.data.user)
+  }
+
+  return (
+    <div
+      className="flex flex-wrap items-end gap-[10px] rounded-[12px] border border-input bg-surface p-[13px]"
+      style={{ animation: 'dtDrop 0.16s ease' }}
+    >
+      <div className="flex min-w-[132px] flex-1 flex-col gap-[5px]">
+        <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+          {t.inviteFullName}
+        </Caps>
+        <input
+          type="text"
+          placeholder={t.egName}
+          value={fullName}
+          onChange={(e) => setFullName(e.target.value)}
+          className="h-8 w-full min-w-0 rounded-[8px] border border-input bg-field px-[10px] text-xs text-fg outline-none focus:border-ring"
+        />
+      </div>
+
+      <div className="flex min-w-[190px] flex-1 flex-col gap-[5px]">
+        <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+          {t.inviteEmail}
+        </Caps>
+        <div className="flex min-w-0 items-center overflow-hidden rounded-[8px] border border-input bg-field focus-within:border-ring">
+          <input
+            type="text"
+            placeholder="yusuf.aydin"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="h-8 min-w-0 flex-1 bg-transparent px-[10px] text-xs text-fg outline-none"
+          />
+          <span className="flex h-8 shrink-0 items-center border-l border-input bg-surface px-[10px] font-mono text-[10.5px] text-muted-fg">
+            {DOMAIN}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-[5px]">
+        <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">{t.inviteRole}</Caps>
+        <SegBar>
+          {roles.map((name) => (
+            <SegButton key={name} active={role === name} onClick={() => setRole(name)}>
+              {name}
+            </SegButton>
+          ))}
+        </SegBar>
+      </div>
+
+      <div className="flex flex-col gap-[5px]">
+        <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">{t.inviteOrg}</Caps>
+        <SegBar>
+          <SegButton active={org === 'internal'} onClick={() => setOrg('internal')}>
+            {t.orgInternal}
+          </SegButton>
+          <SegButton active={org === 'external'} onClick={() => setOrg('external')}>
+            {t.orgExternal}
+          </SegButton>
+        </SegBar>
+      </div>
+
+      <div className="flex w-full flex-col gap-[5px]">
+        <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+          {t.inviteSites}
+        </Caps>
+        <div className="flex flex-wrap gap-[6px]">
+          {sites.map((site) => {
+            const on = selected.includes(site)
+            return (
+              <button
+                key={site}
+                type="button"
+                onClick={() =>
+                  setSelected((prev) => (on ? prev.filter((s) => s !== site) : [...prev, site]))
+                }
+                className={cn(
+                  'flex h-[28px] items-center gap-2 rounded-[7px] border px-[9px] text-[11.5px]',
+                  on
+                    ? 'border-brand bg-field text-fg'
+                    : 'border-border bg-transparent text-muted-fg',
+                )}
+              >
+                <span
+                  className={cn(
+                    'h-[9px] w-[9px] shrink-0 rounded-[3px] border',
+                    on ? 'border-brand bg-brand' : 'border-input',
+                  )}
+                />
+                {site}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      <div className="flex gap-[7px]">
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => void submit()}
+          className="h-8 rounded-[8px] bg-primary px-[14px] text-xs font-semibold text-primary-fg hover:opacity-92"
+        >
+          {t.save}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="h-8 rounded-[8px] border border-border bg-transparent px-3 text-xs text-muted-fg hover:bg-hover hover:text-fg"
+        >
+          {t.cancel}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/editor/panel/components/console/jobs-tab.tsx b/apps/editor/panel/components/console/jobs-tab.tsx
new file mode 100644
index 000000000..d451c194a
--- /dev/null
+++ b/apps/editor/panel/components/console/jobs-tab.tsx
@@ -0,0 +1,249 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { SegBar, SegButton } from '@panel/components/ui/controls'
+import { Toast } from '@panel/components/ui/feedback'
+import type { JobsResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { formatDate, resolveApiMessage } from '@panel/lib/i18n'
+import type { Job, JobStatus } from '@panel/lib/types'
+import { ListChecks } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const FILTERS: Array<JobStatus | 'All'> = ['All', 'queued', 'running', 'failed', 'done']
+const POLL_FALLBACK_MS = 4000
+
+export function JobsTab() {
+  const { t, lang } = useApp()
+
+  const [jobs, setJobs] = useState<Job[]>([])
+  const [filter, setFilter] = useState<JobStatus | 'All'>('All')
+  const [loading, setLoading] = useState(true)
+  const [live, setLive] = useState(false)
+  const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' } | null>(null)
+  const filterRef = useRef(filter)
+  filterRef.current = filter
+
+  const notify = useCallback((message: string, tone: 'success' | 'error' = 'success') => {
+    setToast({ message, tone })
+    setTimeout(() => setToast(null), 2600)
+  }, [])
+
+  const load = useCallback(async () => {
+    const res = await call<JobsResponse>('/api/jobs')
+    if (res.ok) setJobs(res.data.jobs)
+    setLoading(false)
+  }, [])
+
+  /**
+   * SSE first, 4 s poll as the fallback the contract asks for. The stream sends
+   * the whole list on change, so `filter` is applied client-side — otherwise
+   * every filter change would have to tear the connection down and rebuild it.
+   */
+  useEffect(() => {
+    void load()
+
+    let source: EventSource | null = null
+    let poll: ReturnType<typeof setInterval> | null = null
+
+    const startPolling = () => {
+      if (poll) return
+      setLive(false)
+      poll = setInterval(() => void load(), POLL_FALLBACK_MS)
+    }
+
+    try {
+      source = new EventSource('/api/jobs/stream')
+      source.addEventListener('open', () => setLive(true))
+      source.addEventListener('jobs', (event) => {
+        try {
+          setJobs((JSON.parse((event as MessageEvent).data) as JobsResponse).jobs)
+          setLoading(false)
+        } catch {
+          /* malformed frame — the next one replaces it */
+        }
+      })
+      source.addEventListener('error', () => {
+        source?.close()
+        source = null
+        startPolling()
+      })
+    } catch {
+      startPolling()
+    }
+
+    return () => {
+      source?.close()
+      if (poll) clearInterval(poll)
+    }
+  }, [load])
+
+  const act = useCallback(
+    async (job: Job, action: 'retry' | 'cancel') => {
+      const res = await call(`/api/jobs/${job.id}/${action}`, { body: {} })
+      if (!res.ok) {
+        notify(resolveApiMessage(t, res.messageKey), 'error')
+        return
+      }
+      void load()
+    },
+    [notify, t, load],
+  )
+
+  const visible = filter === 'All' ? jobs : jobs.filter((j) => j.status === filter)
+
+  const statusLabel = (status: JobStatus) =>
+    status === 'queued'
+      ? t.jbQueued
+      : status === 'running'
+        ? t.jbRunning
+        : status === 'failed'
+          ? t.jbFailed
+          : status === 'done'
+            ? t.jbDone
+            : t.jbCancelled
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div className="flex flex-col gap-[2px]">
+          <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.c.jobs}</h2>
+          <p className="m-0 flex items-center gap-2 text-xs text-muted-fg">
+            {t.jbLead}
+            <span className="flex items-center gap-[5px] font-mono text-[9px]">
+              <span
+                className={cn('h-[5px] w-[5px] rounded-full', live ? 'bg-ok' : 'bg-muted-fg')}
+                style={live ? { animation: 'dtPulse 2s ease infinite' } : undefined}
+              />
+              <Caps>{live ? t.jbLive : t.jbPolling}</Caps>
+            </span>
+          </p>
+        </div>
+
+        <SegBar>
+          {FILTERS.map((value) => (
+            <SegButton key={value} active={filter === value} onClick={() => setFilter(value)}>
+              {value === 'All' ? t.c.filterAll : statusLabel(value)}
+            </SegButton>
+          ))}
+        </SegBar>
+      </header>
+
+      <div className="flex min-w-0 flex-col overflow-hidden rounded-[12px] border border-border">
+        {loading ? (
+          Array.from({ length: 3 }, (_, i) => (
+            <div
+              key={i}
+              className="flex h-[58px] items-center gap-4 border-b border-border-soft px-3"
+            >
+              <span
+                className="h-[9px] w-[220px] rounded bg-hover"
+                style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+              />
+            </div>
+          ))
+        ) : visible.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 px-4 py-12">
+            <ListChecks className="h-[22px] w-[22px] text-muted-fg" strokeWidth={1.6} />
+            <span className="text-[12.5px] font-semibold">{t.jbEmptyTitle}</span>
+            <span className="max-w-[380px] text-center text-[11.5px] text-muted-fg text-pretty">
+              {t.jbEmptyLead}
+            </span>
+          </div>
+        ) : (
+          visible.map((job) => (
+            <div
+              key={job.id}
+              className="flex min-w-0 flex-wrap items-center gap-3 border-b border-border-soft px-3 py-[10px] last:border-b-0"
+            >
+              <div className="flex min-w-[200px] flex-1 flex-col gap-[2px]">
+                <div className="flex items-center gap-2">
+                  <span className="shrink-0 font-mono text-[10px] text-muted-fg">
+                    {job.id.slice(-8)}
+                  </span>
+                  <span className="truncate text-[12.5px] font-medium">{job.kind}</span>
+                </div>
+                <span className="truncate font-mono text-[10px] text-muted-fg">
+                  {job.siteId ?? '—'} · {t.jbBy} {job.queuedBy} · {formatDate(lang, job.queuedAt)}
+                </span>
+                {job.errorText ? (
+                  <span className="truncate text-[11px] text-destructive">{job.errorText}</span>
+                ) : null}
+              </div>
+
+              <div className="flex w-[150px] shrink-0 items-center gap-2">
+                <div className="h-[5px] flex-1 overflow-hidden rounded-full bg-hover">
+                  <div
+                    className={cn(
+                      'h-full rounded-full transition-[width] duration-500',
+                      job.status === 'failed' ? 'bg-destructive' : 'bg-brand',
+                    )}
+                    style={{ width: `${job.progress}%` }}
+                  />
+                </div>
+                <span className="w-[34px] shrink-0 text-right font-mono text-[10px] text-muted-fg">
+                  {job.progress}%
+                </span>
+              </div>
+
+              <span
+                className={cn(
+                  'flex w-[86px] shrink-0 items-center gap-[6px] rounded-[5px] border px-[7px] py-px text-[10.5px]',
+                  job.status === 'running'
+                    ? 'border-brand text-brand-fg'
+                    : job.status === 'failed'
+                      ? 'border-destructive text-destructive'
+                      : job.status === 'done'
+                        ? 'border-border text-fg'
+                        : 'border-border text-muted-fg',
+                )}
+              >
+                <span
+                  className={cn(
+                    'h-[5px] w-[5px] rounded-full',
+                    job.status === 'running'
+                      ? 'bg-brand'
+                      : job.status === 'failed'
+                        ? 'bg-destructive'
+                        : job.status === 'done'
+                          ? 'bg-ok'
+                          : 'bg-muted-fg',
+                  )}
+                  style={
+                    job.status === 'running' ? { animation: 'dtPulse 2s ease infinite' } : undefined
+                  }
+                />
+                {statusLabel(job.status)}
+              </span>
+
+              <div className="flex shrink-0 items-center gap-[6px]">
+                {job.status === 'failed' || job.status === 'cancelled' ? (
+                  <button
+                    type="button"
+                    onClick={() => void act(job, 'retry')}
+                    className="h-[26px] rounded-[6px] border border-border bg-field px-[10px] text-[11px] text-fg hover:bg-hover"
+                  >
+                    {t.jbRetry}
+                  </button>
+                ) : null}
+                {job.status === 'queued' || job.status === 'running' ? (
+                  <button
+                    type="button"
+                    onClick={() => void act(job, 'cancel')}
+                    className="h-[26px] rounded-[6px] border border-destructive bg-transparent px-[10px] text-[11px] text-destructive hover:bg-hover"
+                  >
+                    {t.jbCancel}
+                  </button>
+                ) : null}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {toast ? <Toast message={toast.message} tone={toast.tone} /> : null}
+    </section>
+  )
+}
diff --git a/apps/editor/panel/components/console/logs-tab.tsx b/apps/editor/panel/components/console/logs-tab.tsx
new file mode 100644
index 000000000..ef5ae4b9c
--- /dev/null
+++ b/apps/editor/panel/components/console/logs-tab.tsx
@@ -0,0 +1,275 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Button, SegBar, SegButton } from '@panel/components/ui/controls'
+import { Dialog, Toast } from '@panel/components/ui/feedback'
+import type { LogsResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { auditText, formatDate, resolveApiMessage } from '@panel/lib/i18n'
+import { AlertTriangle, CheckCircle2, Search, ShieldAlert, XCircle } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+type Level = 'All' | 'info' | 'warn' | 'error'
+type Range = 'hour' | 'today' | 'week' | 'all'
+type Entry = LogsResponse['entries'][number]
+
+/**
+ * Runtime diagnostics.
+ *
+ * Paging is cursor-based, so "load more" cannot duplicate or skip a row while
+ * the log is being written to underneath it — which is the normal case here.
+ */
+export function LogsTab() {
+  const { t, lang } = useApp()
+
+  const [entries, setEntries] = useState<Entry[]>([])
+  const [cursor, setCursor] = useState<string | null>(null)
+  const [actors, setActors] = useState<string[]>([])
+  const [counts, setCounts] = useState({ info: 0, warn: 0, error: 0 })
+  const [canClear, setCanClear] = useState(false)
+  const [restricted, setRestricted] = useState(false)
+  const [loading, setLoading] = useState(true)
+
+  const [search, setSearch] = useState('')
+  const [level, setLevel] = useState<Level>('All')
+  const [range, setRange] = useState<Range>('all')
+  const [actor, setActor] = useState('All')
+
+  const [confirmClear, setConfirmClear] = useState(false)
+  const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' } | null>(null)
+
+  const notify = useCallback((message: string, tone: 'success' | 'error' = 'success') => {
+    setToast({ message, tone })
+    setTimeout(() => setToast(null), 2600)
+  }, [])
+
+  const load = useCallback(
+    async (nextCursor?: string) => {
+      const params = new URLSearchParams({ level, range, actor, limit: '50' })
+      if (search.trim()) params.set('search', search.trim())
+      if (nextCursor) params.set('cursor', nextCursor)
+
+      const res = await call<LogsResponse>(`/api/logs?${params}`)
+      setLoading(false)
+
+      if (!res.ok) {
+        if (res.code === 'forbidden') setRestricted(true)
+        return
+      }
+      setRestricted(false)
+      setEntries((prev) => (nextCursor ? [...prev, ...res.data.entries] : res.data.entries))
+      setCursor(res.data.nextCursor)
+      setActors(res.data.actors)
+      setCounts(res.data.counts)
+      setCanClear(Boolean(res.data.canClear))
+    },
+    [level, range, actor, search],
+  )
+
+  useEffect(() => {
+    setLoading(true)
+    void load()
+  }, [load])
+
+  if (restricted) {
+    return (
+      <section className="flex flex-col items-center gap-2 rounded-[12px] border border-dashed border-input px-4 py-14">
+        <ShieldAlert className="h-[22px] w-[22px] text-muted-fg" strokeWidth={1.6} />
+        <span className="text-[12.5px] font-semibold">{t.c.logsRestricted}</span>
+        <span className="text-[11.5px] text-muted-fg">{t.c.logsRestrictedLead}</span>
+      </section>
+    )
+  }
+
+  const total = counts.info + counts.warn + counts.error
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div className="flex flex-col gap-[2px]">
+          <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.c.incidentLog}</h2>
+          <p className="m-0 text-xs text-muted-fg">
+            {total} {t.c.events} · {counts.error} {t.c.lvError.toLocaleLowerCase(lang)} ·{' '}
+            {counts.warn} {t.c.lvWarn.toLocaleLowerCase(lang)}
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-[7px]">
+          <div className="relative flex items-center">
+            <Search
+              className="pointer-events-none absolute left-[9px] h-3 w-3 text-muted-fg"
+              strokeWidth={2.2}
+            />
+            <input
+              type="text"
+              placeholder={t.c.logSearchPh}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="h-[30px] w-[190px] min-w-0 rounded-[8px] border border-input bg-field pl-[26px] pr-[10px] text-xs text-fg outline-none focus:border-ring focus:shadow-[0_0_0_3px_var(--dt-hover)]"
+            />
+          </div>
+
+          <SegBar>
+            {(
+              [
+                ['hour', t.c.lastHour],
+                ['today', t.c.today],
+                ['week', t.c.days7],
+                ['all', t.c.filterAll],
+              ] as Array<[Range, string]>
+            ).map(([value, label]) => (
+              <SegButton key={value} active={range === value} onClick={() => setRange(value)}>
+                {label}
+              </SegButton>
+            ))}
+          </SegBar>
+
+          <SegBar>
+            {(
+              [
+                ['All', t.c.filterAll],
+                ['info', t.c.lvInfo],
+                ['warn', t.c.lvWarn],
+                ['error', t.c.lvError],
+              ] as Array<[Level, string]>
+            ).map(([value, label]) => (
+              <SegButton key={value} active={level === value} onClick={() => setLevel(value)}>
+                {label}
+              </SegButton>
+            ))}
+          </SegBar>
+
+          <select
+            value={actor}
+            onChange={(e) => setActor(e.target.value)}
+            aria-label={t.lgActor}
+            className="h-[30px] min-w-0 max-w-[190px] rounded-[8px] border border-input bg-field px-2 text-xs text-fg outline-none focus:border-ring"
+          >
+            <option value="All">{t.c.allUsers}</option>
+            {actors.map((name) => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </select>
+
+          {canClear ? (
+            <button
+              type="button"
+              onClick={() => setConfirmClear(true)}
+              className="h-[30px] shrink-0 rounded-[8px] border border-destructive bg-transparent px-[11px] text-xs font-medium text-destructive hover:bg-hover"
+            >
+              {t.lgClear}
+            </button>
+          ) : null}
+        </div>
+      </header>
+
+      <div className="flex min-w-0 flex-col overflow-hidden rounded-[12px] border border-border">
+        {loading ? (
+          Array.from({ length: 6 }, (_, i) => (
+            <div
+              key={i}
+              className="flex h-[46px] items-center gap-4 border-b border-border-soft px-3"
+            >
+              <span
+                className="h-[9px] w-[280px] rounded bg-hover"
+                style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+              />
+            </div>
+          ))
+        ) : entries.length === 0 ? (
+          <div className="px-3 py-10 text-center text-[11.5px] text-muted-fg">{t.lgEmpty}</div>
+        ) : (
+          <>
+            {entries.map((entry) => (
+              <LogRow key={entry.id} entry={entry} lang={lang} text={auditText(t, entry)} />
+            ))}
+            {cursor ? (
+              <button
+                type="button"
+                onClick={() => void load(cursor)}
+                className="h-9 border-t border-border bg-surface text-[11.5px] font-medium text-muted-fg hover:text-fg"
+              >
+                {t.lgLoadMore}
+              </button>
+            ) : null}
+          </>
+        )}
+      </div>
+
+      {confirmClear ? (
+        <Dialog
+          role="alertdialog"
+          labelledBy="dt-clear-title"
+          width={384}
+          onClose={() => setConfirmClear(false)}
+        >
+          <h2 id="dt-clear-title" className="m-0 text-[15px] font-semibold tracking-[-0.01em]">
+            {t.lgClearTitle}
+          </h2>
+          <p className="m-0 text-[12.5px] leading-[1.55] text-muted-fg text-pretty">
+            {t.lgClearLead}
+          </p>
+          <div className="flex flex-col gap-[9px]">
+            <Button
+              variant="destructive"
+              onClick={async () => {
+                const res = await call<{ removed: number }>('/api/logs', { method: 'DELETE' })
+                setConfirmClear(false)
+                if (!res.ok) {
+                  notify(resolveApiMessage(t, res.messageKey), 'error')
+                  return
+                }
+                notify(`${res.data.removed} ${t.lgCleared}`)
+                void load()
+              }}
+            >
+              {t.lgClear}
+            </Button>
+            <Button variant="secondary" onClick={() => setConfirmClear(false)}>
+              {t.cancel}
+            </Button>
+          </div>
+        </Dialog>
+      ) : null}
+
+      {toast ? <Toast message={toast.message} tone={toast.tone} /> : null}
+    </section>
+  )
+}
+
+function LogRow({ entry, lang, text }: { entry: Entry; lang: 'en' | 'tr'; text: string }) {
+  const Icon =
+    entry.level === 'error' ? XCircle : entry.level === 'warn' ? AlertTriangle : CheckCircle2
+
+  return (
+    <div className="flex min-w-0 items-start gap-[10px] border-b border-border-soft px-3 py-2 last:border-b-0">
+      <Icon
+        className={cn(
+          'mt-[2px] h-[13px] w-[13px] shrink-0',
+          entry.level === 'error'
+            ? 'text-destructive'
+            : entry.level === 'warn'
+              ? 'text-warn'
+              : 'text-muted-fg',
+        )}
+        strokeWidth={2.2}
+      />
+      <div className="flex min-w-0 flex-1 flex-col gap-[2px]">
+        {/* Selectable: a log line you cannot copy is half a log line. */}
+        <span className="select-text break-words font-mono text-[11.5px] text-fg">{text}</span>
+        <span className="truncate font-mono text-[9.5px] text-muted-fg">
+          {formatDate(lang, entry.createdAt)} · {entry.actor}
+          {entry.kind ? (
+            <>
+              {' · '}
+              <span className="text-brand-fg">[{entry.kind}]</span>
+            </>
+          ) : null}
+        </span>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/editor/panel/components/console/overview-tab.tsx b/apps/editor/panel/components/console/overview-tab.tsx
new file mode 100644
index 000000000..dff819801
--- /dev/null
+++ b/apps/editor/panel/components/console/overview-tab.tsx
@@ -0,0 +1,216 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Sparkline } from '@panel/components/console/sparkline'
+import { Caps } from '@panel/components/ui/caps'
+import type { OverviewResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { auditText, formatDate, formatNumber } from '@panel/lib/i18n'
+import { AlertTriangle } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/** The 4 s cadence the design specifies for health polling. */
+const POLL_MS = 4000
+const SERIES_LENGTH = 24
+
+export function OverviewTab() {
+  const { t, lang } = useApp()
+  const router = useRouter()
+
+  const [data, setData] = useState<OverviewResponse | null>(null)
+  const [cpuSeries, setCpuSeries] = useState<number[]>([])
+  const [memSeries, setMemSeries] = useState<number[]>([])
+  const stopped = useRef(false)
+
+  const load = useCallback(async () => {
+    // A hidden tab must not keep polling — the old panel's health probe ran
+    // regardless of visibility and burned cycles on tabs nobody was watching.
+    if (document.visibilityState === 'hidden') return
+
+    const res = await call<OverviewResponse>('/api/overview')
+    if (!res.ok || stopped.current) return
+
+    setData(res.data)
+    setCpuSeries((prev) => [...prev, res.data.health.cpuPercent].slice(-SERIES_LENGTH))
+    setMemSeries((prev) => [...prev, res.data.health.heapGb].slice(-SERIES_LENGTH))
+  }, [])
+
+  useEffect(() => {
+    stopped.current = false
+    void load()
+
+    const timer = setInterval(() => void load(), POLL_MS)
+    const onVisibility = () => void load()
+    document.addEventListener('visibilitychange', onVisibility)
+
+    return () => {
+      stopped.current = true
+      clearInterval(timer)
+      document.removeEventListener('visibilitychange', onVisibility)
+    }
+  }, [load])
+
+  if (!data) {
+    return (
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }, (_, i) => (
+          <div
+            key={i}
+            className="h-[104px] rounded-[12px] border border-border bg-surface"
+            style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  const { health, counts, connected, incidents } = data
+
+  const metrics = [
+    {
+      label: t.ovCpu,
+      value: String(health.cpuPercent),
+      unit: '%',
+      series: cpuSeries,
+      foot: `${health.cores} ${t.ovCores} · ${t.ovLoad} ${health.loadAverage1m}`,
+    },
+    {
+      label: t.ovMemory,
+      value: health.heapGb.toFixed(2),
+      unit: 'GB',
+      series: memSeries,
+      foot: `${t.ovSystemMem} ${health.systemUsedGb} / ${health.systemTotalGb} GB`,
+    },
+    {
+      label: t.ovSites,
+      value: String(counts.activeSites),
+      unit: `/ ${counts.sites}`,
+      series: [],
+      foot: `${t.ovQueue} ${counts.queuedJobs}`,
+    },
+    {
+      label: t.ovSignedIn,
+      value: String(counts.signedIn),
+      unit: `/ ${formatNumber(lang, counts.users)}`,
+      series: [],
+      foot: `${counts.without2fa} ${t.c.without2fa}`,
+    },
+  ]
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-col gap-[2px]">
+        <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.c.sysStatus}</h2>
+        <p className="m-0 text-xs text-muted-fg">{t.c.sysStatusLead}</p>
+      </header>
+
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        {metrics.map((metric, index) => (
+          <div
+            key={metric.label}
+            className="flex min-w-0 flex-col gap-2 rounded-[12px] border border-border bg-surface p-[13px]"
+            // Cards reveal in sequence, 60 ms apart, as the design specifies.
+            style={{ animation: 'dtFade 0.3s ease backwards', animationDelay: `${index * 60}ms` }}
+          >
+            <Caps className="font-mono text-[8.5px] tracking-[0.12em] text-muted-fg">
+              {metric.label}
+            </Caps>
+            <div className="flex items-baseline gap-1">
+              <span className="font-mono text-[26px] font-medium leading-none tracking-[-0.02em] text-fg">
+                {metric.value}
+              </span>
+              <span className="text-[11px] text-muted-fg">{metric.unit}</span>
+            </div>
+            {metric.series.length > 0 ? <Sparkline values={metric.series} /> : null}
+            <span className="truncate font-mono text-[9.5px] text-muted-fg">{metric.foot}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid gap-3 lg:grid-cols-2">
+        <div className="flex min-w-0 flex-col overflow-hidden rounded-[12px] border border-border">
+          <div className="flex items-center justify-between gap-2 border-b border-border bg-surface px-3 py-2">
+            <Caps className="font-mono text-[8.5px] tracking-[0.12em] text-muted-fg">
+              {t.c.connectedUsers}
+            </Caps>
+            <span className="flex items-center gap-[6px] font-mono text-[9px] text-muted-fg">
+              <span
+                className="h-[5px] w-[5px] rounded-full bg-ok"
+                style={{ animation: 'dtPulse 2s ease infinite' }}
+              />
+              <Caps>{t.c.last20}</Caps>
+            </span>
+          </div>
+
+          {connected.length === 0 ? (
+            <div className="px-3 py-8 text-center text-[11.5px] text-muted-fg">
+              {t.ovNoConnected}
+            </div>
+          ) : (
+            connected.map((row) => (
+              <div
+                key={row.actor}
+                className="flex min-w-0 items-center gap-3 border-b border-border-soft px-3 py-2 last:border-b-0"
+              >
+                <div className="flex min-w-0 flex-1 flex-col gap-[2px]">
+                  <span className="truncate font-mono text-[11px] text-fg">{row.actor}</span>
+                  <span className="truncate text-[10.5px] text-muted-fg">{row.lastAction}</span>
+                </div>
+                <span className="shrink-0 font-mono text-[9.5px] text-muted-fg">
+                  {formatDate(lang, row.at)}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="flex min-w-0 flex-col overflow-hidden rounded-[12px] border border-border">
+          <div className="flex items-center justify-between gap-2 border-b border-border bg-surface px-3 py-2">
+            <Caps className="font-mono text-[8.5px] tracking-[0.12em] text-muted-fg">
+              {t.c.recentIncidents}
+            </Caps>
+            <button
+              type="button"
+              onClick={() => router.push('/console/logs')}
+              className="bg-transparent text-[10.5px] text-muted-fg hover:text-fg"
+            >
+              {t.c.viewAll}
+            </button>
+          </div>
+
+          {incidents.length === 0 ? (
+            <div className="px-3 py-8 text-center text-[11.5px] text-muted-fg">
+              {t.ovNoIncidents}
+            </div>
+          ) : (
+            incidents.map((entry) => (
+              <div
+                key={entry.id}
+                className="flex min-w-0 items-start gap-2 border-b border-border-soft px-3 py-2 last:border-b-0"
+              >
+                <AlertTriangle
+                  className={cn(
+                    'mt-[2px] h-[13px] w-[13px] shrink-0',
+                    entry.level === 'error' ? 'text-destructive' : 'text-warn',
+                  )}
+                  strokeWidth={2.2}
+                />
+                <div className="flex min-w-0 flex-1 flex-col gap-[2px]">
+                  <span className="truncate font-mono text-[11px] text-fg">
+                    {auditText(t, entry)}
+                  </span>
+                  <span className="truncate font-mono text-[9.5px] text-muted-fg">
+                    {formatDate(lang, entry.createdAt)} · {entry.actor}
+                    {entry.kind ? ` · ${entry.kind}` : ''}
+                  </span>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/editor/panel/components/console/roles-tab.tsx b/apps/editor/panel/components/console/roles-tab.tsx
new file mode 100644
index 000000000..edaca8dd8
--- /dev/null
+++ b/apps/editor/panel/components/console/roles-tab.tsx
@@ -0,0 +1,370 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { Button, SegBar, SegButton } from '@panel/components/ui/controls'
+import { Dialog, Toast } from '@panel/components/ui/feedback'
+import type { RolesFullResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { useBreakpoint } from '@panel/lib/hooks/use-breakpoint'
+import { collator, type Dictionary, resolveApiMessage } from '@panel/lib/i18n'
+import { PERMISSIONS, type Permission } from '@panel/lib/types'
+import { Check, ChevronDown, ChevronUp, Minus } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+type RoleRow = RolesFullResponse['roles'][number]
+
+export function RolesTab() {
+  const { t, lang } = useApp()
+  const { touch } = useBreakpoint()
+
+  const [roles, setRoles] = useState<RoleRow[]>([])
+  const [canEdit, setCanEdit] = useState(false)
+  const [view, setView] = useState<'matrix' | 'list'>('matrix')
+  const [search, setSearch] = useState('')
+  const [adding, setAdding] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [expanded, setExpanded] = useState<string | null>(null)
+  const [deleting, setDeleting] = useState<RoleRow | null>(null)
+  const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' } | null>(null)
+
+  const notify = useCallback((message: string, tone: 'success' | 'error' = 'success') => {
+    setToast({ message, tone })
+    setTimeout(() => setToast(null), 2600)
+  }, [])
+
+  const load = useCallback(async () => {
+    const res = await call<RolesFullResponse>('/api/roles')
+    if (!res.ok) {
+      notify(resolveApiMessage(t, res.messageKey), 'error')
+      return
+    }
+    setRoles(res.data.roles)
+    setCanEdit(res.data.canEdit)
+  }, [notify, t])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const compare = collator(lang)
+  const visible = roles.filter(
+    (role) =>
+      !search.trim() ||
+      compare.compare(role.name, search) === 0 ||
+      role.name.toLocaleLowerCase(lang).includes(search.trim().toLocaleLowerCase(lang)),
+  )
+
+  /**
+   * A matrix toggle writes straight to the API and the row re-reads from the
+   * response. No optimistic flip: a silently rolled-back permission is worse
+   * than a 200 ms wait, and permissions are exactly where a lie is expensive.
+   */
+  const togglePermission = useCallback(
+    async (role: RoleRow, permission: Permission) => {
+      if (!canEdit || role.isSystem) return
+      const next = role.permissions.includes(permission)
+        ? role.permissions.filter((p) => p !== permission)
+        : [...role.permissions, permission]
+
+      const res = await call(`/api/roles/${encodeURIComponent(role.name)}`, {
+        method: 'PUT',
+        body: { permissions: next },
+      })
+      if (!res.ok) {
+        notify(resolveApiMessage(t, res.messageKey), 'error')
+        return
+      }
+      void load()
+    },
+    [canEdit, load, notify, t],
+  )
+
+  const createRole = useCallback(async () => {
+    if (!newName.trim()) return
+    const res = await call('/api/roles', { body: { name: newName.trim() } })
+    if (!res.ok) {
+      notify(resolveApiMessage(t, res.messageKey), 'error')
+      return
+    }
+    setNewName('')
+    setAdding(false)
+    void load()
+  }, [newName, load, notify, t])
+
+  const cols = `minmax(0,1.5fr) repeat(${visible.length}, ${touch ? '56px' : 'minmax(0,1fr)'})`
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div className="flex flex-col gap-[2px]">
+          <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.c.rolePerms}</h2>
+          <p className="m-0 text-xs text-muted-fg">
+            {roles.length} {t.c.rolesCount} · {PERMISSIONS.length} {t.c.permsCount}
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-[7px]">
+          <input
+            type="text"
+            placeholder={t.c.roleSearchPh}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="h-[30px] w-[150px] min-w-0 rounded-[8px] border border-input bg-field px-[10px] text-xs text-fg outline-none focus:border-ring focus:shadow-[0_0_0_3px_var(--dt-hover)]"
+          />
+          <SegBar>
+            <SegButton active={view === 'matrix'} onClick={() => setView('matrix')}>
+              {t.c.viewMatrix}
+            </SegButton>
+            <SegButton active={view === 'list'} onClick={() => setView('list')}>
+              {t.c.viewList}
+            </SegButton>
+          </SegBar>
+          <button
+            type="button"
+            disabled={!canEdit}
+            onClick={() => setAdding((v) => !v)}
+            className="h-[30px] shrink-0 rounded-[8px] bg-primary px-[13px] text-xs font-semibold text-primary-fg shadow-e2 hover:opacity-92"
+          >
+            {adding ? t.c.closeForm : t.c.addRole}
+          </button>
+        </div>
+      </header>
+
+      {adding ? (
+        <div
+          className="flex flex-wrap items-end gap-[10px] rounded-[12px] border border-input bg-surface p-[13px]"
+          style={{ animation: 'dtDrop 0.16s ease' }}
+        >
+          <div className="flex min-w-[170px] flex-1 flex-col gap-[5px]">
+            <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+              {t.newRoleName}
+            </Caps>
+            <input
+              type="text"
+              placeholder={t.egRole}
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && void createRole()}
+              className="h-8 w-full min-w-0 rounded-[8px] border border-input bg-field px-[10px] text-xs text-fg outline-none focus:border-ring"
+            />
+          </div>
+          <div className="flex gap-[7px]">
+            <button
+              type="button"
+              onClick={() => void createRole()}
+              className="h-8 rounded-[8px] bg-primary px-[14px] text-xs font-semibold text-primary-fg hover:opacity-92"
+            >
+              {t.save}
+            </button>
+            <button
+              type="button"
+              onClick={() => setAdding(false)}
+              className="h-8 rounded-[8px] border border-border bg-transparent px-3 text-xs text-muted-fg hover:bg-hover hover:text-fg"
+            >
+              {t.cancel}
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      {/* The search can exclude everything. Without this the matrix still drew
+          its header and every permission row, just with no role columns — a
+          table that looks broken rather than empty. */}
+      {visible.length === 0 ? (
+        <section className="flex flex-col items-center gap-2 rounded-[12px] border border-dashed border-input px-4 py-14">
+          <span className="text-[12.5px] font-semibold">{t.roleNoMatch}</span>
+          <span className="text-[11.5px] text-muted-fg">{t.roleNoMatchHint}</span>
+        </section>
+      ) : view === 'matrix' ? (
+        <div className="min-w-0 overflow-x-auto rounded-[12px] border border-border">
+          <div
+            className="grid h-[31px] items-center gap-2 border-b border-border bg-surface px-3 font-mono text-[8.5px] tracking-[0.12em] text-muted-fg"
+            style={{ gridTemplateColumns: cols }}
+          >
+            <Caps>{t.c.colPermission}</Caps>
+            {visible.map((role) => (
+              <Caps key={role.name} invariant className="truncate text-center">
+                {role.name}
+              </Caps>
+            ))}
+          </div>
+
+          {PERMISSIONS.map((permission) => (
+            <div
+              key={permission}
+              className="grid items-center gap-2 border-b border-border-soft px-3 py-[7px] last:border-b-0"
+              style={{ gridTemplateColumns: cols }}
+            >
+              <div className="flex min-w-0 flex-col">
+                <span className="truncate text-[12.5px]">{labelFor(t, permission)}</span>
+                <span className="font-mono text-[9px] text-muted-fg">{permission}</span>
+              </div>
+              {visible.map((role) => {
+                const on = role.permissions.includes(permission)
+                const locked = !canEdit || role.isSystem
+                return (
+                  <button
+                    key={`${role.name}-${permission}`}
+                    type="button"
+                    disabled={locked}
+                    title={locked ? t.systemRoleLocked : `${role.name} · ${permission}`}
+                    onClick={() => void togglePermission(role, permission)}
+                    className={cn(
+                      'mx-auto flex items-center justify-center rounded-[6px] border',
+                      touch ? 'h-11 w-11' : 'h-[26px] w-[26px]',
+                      on
+                        ? 'border-brand bg-field text-brand-fg'
+                        : 'border-border bg-transparent text-muted-fg',
+                      locked && 'cursor-not-allowed opacity-60',
+                    )}
+                  >
+                    {on ? (
+                      <Check className="h-[13px] w-[13px]" strokeWidth={3} />
+                    ) : (
+                      <Minus className="h-[11px] w-[11px] opacity-50" strokeWidth={2.5} />
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-[9px]">
+          {visible.map((role) => {
+            const open = expanded === role.name
+            return (
+              <div
+                key={role.name}
+                className="overflow-hidden rounded-[12px] border border-border bg-surface"
+              >
+                <div className="flex h-10 items-center justify-between gap-[10px] px-3">
+                  <button
+                    type="button"
+                    onClick={() => setExpanded(open ? null : role.name)}
+                    className="flex min-w-0 flex-1 items-center gap-[9px] bg-transparent text-left"
+                  >
+                    <span
+                      className={cn(
+                        'h-[5px] w-[5px] shrink-0 rounded-full',
+                        role.isSystem ? 'bg-brand' : 'bg-input',
+                      )}
+                    />
+                    <Caps
+                      invariant
+                      className="truncate text-[12.5px] font-semibold tracking-[0.04em]"
+                    >
+                      {role.name}
+                    </Caps>
+                    {role.isSystem ? (
+                      <span className="shrink-0 rounded-[4px] border border-border px-[5px] font-mono text-[8.5px] text-muted-fg">
+                        {t.systemRole}
+                      </span>
+                    ) : null}
+                  </button>
+
+                  <div className="flex shrink-0 items-center gap-2 font-mono text-[9.5px] text-muted-fg">
+                    <span>
+                      {role.permissions.length} {t.permEnabled} · {role.userCount} {t.c.accounts}
+                    </span>
+                    {!role.isSystem && canEdit ? (
+                      <button
+                        type="button"
+                        onClick={() => setDeleting(role)}
+                        className="h-5 rounded-[5px] border border-destructive bg-transparent px-[6px] text-[8.5px] tracking-[0.08em] text-destructive hover:bg-hover"
+                      >
+                        <Caps>{t.confirmDelete}</Caps>
+                      </button>
+                    ) : null}
+                    {open ? (
+                      <ChevronUp className="h-[13px] w-[13px]" strokeWidth={2.5} />
+                    ) : (
+                      <ChevronDown className="h-[13px] w-[13px]" strokeWidth={2.5} />
+                    )}
+                  </div>
+                </div>
+
+                {open ? (
+                  <div className="grid gap-2 border-t border-border-soft p-3 sm:grid-cols-2 lg:grid-cols-3">
+                    {PERMISSIONS.map((permission) => (
+                      <label
+                        key={permission}
+                        className={cn(
+                          'flex min-w-0 items-center gap-2 text-[11.5px]',
+                          role.isSystem || !canEdit
+                            ? 'cursor-not-allowed text-muted-fg'
+                            : 'cursor-pointer',
+                        )}
+                      >
+                        <input
+                          type="checkbox"
+                          checked={role.permissions.includes(permission)}
+                          disabled={role.isSystem || !canEdit}
+                          onChange={() => void togglePermission(role, permission)}
+                          className="h-[14px] w-[14px] shrink-0 cursor-pointer"
+                          style={{ accentColor: 'var(--dt-brand)' }}
+                        />
+                        <span className="truncate">{labelFor(t, permission)}</span>
+                      </label>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      <p className="m-0 text-[11.5px] text-muted-fg">{t.c.rolesFootnote}</p>
+
+      {deleting ? (
+        <Dialog role="alertdialog" labelledBy="dt-role-del" onClose={() => setDeleting(null)}>
+          <h2 id="dt-role-del" className="m-0 text-[15px] font-semibold tracking-[-0.01em]">
+            {t.roleDeleteConfirm}
+          </h2>
+          <p className="m-0 text-[12.5px] leading-[1.55] text-muted-fg text-pretty">
+            {t.roleDeleteLead}
+          </p>
+          <span className="font-mono text-[11px] text-fg">{deleting.name}</span>
+          <div className="flex flex-col gap-[9px]">
+            <Button
+              variant="destructive"
+              onClick={async () => {
+                const res = await call<{ reassigned: number }>(
+                  `/api/roles/${encodeURIComponent(deleting.name)}`,
+                  { method: 'DELETE' },
+                )
+                if (!res.ok) {
+                  notify(resolveApiMessage(t, res.messageKey), 'error')
+                  return
+                }
+                setDeleting(null)
+                void load()
+              }}
+            >
+              {t.confirmDelete}
+            </Button>
+            <Button variant="secondary" onClick={() => setDeleting(null)}>
+              {t.cancel}
+            </Button>
+          </div>
+        </Dialog>
+      ) : null}
+
+      {toast ? <Toast message={toast.message} tone={toast.tone} /> : null}
+    </section>
+  )
+}
+
+/**
+ * Human label for a permission key; the mono key stays visible beside it.
+ *
+ * From the dictionary, not from the key itself — deriving "Edit users" by
+ * replacing underscores left the whole permission matrix in English for a
+ * Turkish reader, on the one screen where the words decide who can do what.
+ */
+function labelFor(t: Dictionary, permission: Permission): string {
+  return t.perm[permission]
+}
diff --git a/apps/editor/panel/components/console/scenes-tab.tsx b/apps/editor/panel/components/console/scenes-tab.tsx
new file mode 100644
index 000000000..107a3c7ad
--- /dev/null
+++ b/apps/editor/panel/components/console/scenes-tab.tsx
@@ -0,0 +1,240 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Toast } from '@panel/components/ui/feedback'
+import { formatDate } from '@panel/lib/i18n'
+import { useCallback, useEffect, useState } from 'react'
+
+/**
+ * The 3D scenes on the server: every scene, its owner, reassignment and the
+ * one-shot adoption of ownerless legacy scenes. This screen replaced the
+ * editor's standalone /admin page, so scene administration lives with the
+ * rest of the console. The endpoints are the editor's — they exist only in
+ * the combined deployment, which is the only place this tab is reachable.
+ */
+
+interface AdminSceneRow {
+  id: string
+  name: string
+  ownerId: string | null
+  ownerEmail: string | null
+  updatedAt: string
+  nodeCount: number
+  /** Approved: it carries a card on Sites & Projects. */
+  published: boolean
+}
+
+const ACTION =
+  'cursor-pointer rounded-[6px] border border-border bg-field px-[9px] py-[4px] font-medium text-[11.5px] text-fg transition-colors hover:bg-hover disabled:opacity-50'
+
+interface AdminScenesPayload {
+  scenes: AdminSceneRow[]
+  users: { id: string; email: string }[]
+  adminId: string
+}
+
+export function ScenesTab() {
+  const { t, lang } = useApp()
+
+  const [data, setData] = useState<AdminScenesPayload | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' } | null>(null)
+
+  const notify = useCallback((message: string, tone: 'success' | 'error') => {
+    setToast({ message, tone })
+    setTimeout(() => setToast(null), 2600)
+  }, [])
+
+  const load = useCallback(async () => {
+    try {
+      const response = await fetch('/api/admin/scenes', { credentials: 'same-origin' })
+      if (response.ok) setData((await response.json()) as AdminScenesPayload)
+    } catch {
+      /* the empty state below covers it */
+    }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const post = useCallback(
+    async (url: string, body: unknown) => {
+      setBusy(true)
+      try {
+        const response = await fetch(url, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          credentials: 'same-origin',
+          body: JSON.stringify(body),
+        })
+        if (!response.ok) {
+          notify(t.scSaveFailed, 'error')
+          return
+        }
+        notify(t.scSaved, 'success')
+        await load()
+      } catch {
+        notify(t.scSaveFailed, 'error')
+      } finally {
+        setBusy(false)
+      }
+    },
+    [load, notify, t],
+  )
+
+  const scenes = data?.scenes ?? []
+  const unowned = scenes.filter((s) => !s.ownerId).length
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div className="flex flex-col gap-[2px]">
+          <h2 className="m-0 font-semibold text-[15.5px] tracking-[-0.01em]">{t.scTitle}</h2>
+          <p className="m-0 text-muted-fg text-xs">{t.scLead}</p>
+        </div>
+        {unowned > 0 && data ? (
+          <button
+            className="cursor-pointer rounded-[8px] border border-border bg-surface px-3 py-[7px] font-medium text-[12px] text-fg transition-colors hover:bg-hover disabled:opacity-50"
+            disabled={busy}
+            onClick={() => post('/api/admin/scenes/adopt-unowned', { ownerId: data.adminId })}
+            type="button"
+          >
+            {t.scAdopt} ({unowned})
+          </button>
+        ) : null}
+      </header>
+
+      <div className="overflow-x-auto rounded-[12px] border border-border bg-surface">
+        <table className="w-full border-collapse text-[12.5px]">
+          <thead>
+            <tr className="border-border border-b text-left font-mono text-[9.5px] text-muted-fg uppercase tracking-[0.12em]">
+              <th className="px-[13px] py-[9px] font-medium">{t.scScene}</th>
+              <th className="px-[13px] py-[9px] font-medium">{t.scOwner}</th>
+              <th className="px-[13px] py-[9px] font-medium">{t.scNodes}</th>
+              <th className="px-[13px] py-[9px] font-medium">{t.scUpdated}</th>
+              <th className="px-[13px] py-[9px] font-medium">{t.scStatus}</th>
+              <th className="px-[13px] py-[9px]" />
+            </tr>
+          </thead>
+          <tbody>
+            {scenes.map((scene) => (
+              <tr
+                className="border-border-soft border-t transition-colors hover:bg-hover"
+                key={scene.id}
+              >
+                <td className="px-[13px] py-[9px] font-medium text-fg">{scene.name}</td>
+                <td className="px-[13px] py-[9px]">
+                  <select
+                    className="cursor-pointer rounded-[6px] border border-border bg-field px-2 py-1 text-[11.5px] text-fg disabled:opacity-50"
+                    defaultValue={scene.ownerId ?? ''}
+                    disabled={busy}
+                    onChange={(event) =>
+                      post(`/api/admin/scenes/${scene.id}/owner`, {
+                        ownerId: event.target.value === '' ? null : event.target.value,
+                      })
+                    }
+                  >
+                    <option value="">{t.scUnowned}</option>
+                    {(data?.users ?? []).map((user) => (
+                      <option key={user.id} value={user.id}>
+                        {user.email}
+                      </option>
+                    ))}
+                  </select>
+                </td>
+                <td className="px-[13px] py-[9px] text-muted-fg">{scene.nodeCount}</td>
+                <td className="px-[13px] py-[9px] font-mono text-[11px] text-muted-fg">
+                  {formatDate(lang, scene.updatedAt)}
+                </td>
+                <td className="px-[13px] py-[9px]">
+                  <span
+                    className={`rounded-[4px] border px-[6px] py-px font-mono text-[9.5px] tracking-[0.1em] uppercase ${
+                      scene.published
+                        ? 'border-brand/40 text-brand-fg'
+                        : 'border-border text-muted-fg'
+                    }`}
+                  >
+                    {scene.published ? t.scPublished : t.scDraft}
+                  </span>
+                </td>
+                <td className="px-[13px] py-[9px] text-right">
+                  <div className="flex flex-wrap justify-end gap-[6px]">
+                    <button
+                      className={ACTION}
+                      disabled={busy}
+                      onClick={() =>
+                        post('/api/admin/scenes/publish', {
+                          sceneId: scene.id,
+                          publish: !scene.published,
+                        })
+                      }
+                      type="button"
+                    >
+                      {scene.published ? t.scUnpublish : t.scPublish}
+                    </button>
+                    <button
+                      className={ACTION}
+                      disabled={busy}
+                      onClick={() => {
+                        const name = window.prompt(t.scRenamePrompt, scene.name)?.trim()
+                        if (name && name !== scene.name) {
+                          void post(`/api/admin/scenes/${scene.id}/manage`, {
+                            action: 'rename',
+                            name,
+                          })
+                        }
+                      }}
+                      type="button"
+                    >
+                      {t.scRename}
+                    </button>
+                    <button
+                      className={ACTION}
+                      disabled={busy}
+                      onClick={() =>
+                        post(`/api/admin/scenes/${scene.id}/manage`, { action: 'duplicate' })
+                      }
+                      type="button"
+                    >
+                      {t.scDuplicate}
+                    </button>
+                    <button
+                      className="cursor-pointer rounded-[6px] border border-destructive/40 px-[9px] py-[4px] font-medium text-[11.5px] text-destructive transition-colors hover:bg-destructive/10 disabled:opacity-50"
+                      disabled={busy}
+                      onClick={() => {
+                        if (window.confirm(t.scDeleteConfirm.replace('{name}', scene.name))) {
+                          void post(`/api/admin/scenes/${scene.id}/manage`, { action: 'delete' })
+                        }
+                      }}
+                      type="button"
+                    >
+                      {t.scDelete}
+                    </button>
+                    <a
+                      className="rounded-[6px] border border-border px-[9px] py-[4px] font-medium text-[11.5px] text-fg no-underline transition-colors hover:bg-hover"
+                      href={`/scene/${scene.id}`}
+                    >
+                      {t.scOpen}
+                    </a>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {scenes.length === 0 ? (
+              <tr>
+                <td className="px-[13px] py-[18px] text-center text-muted-fg" colSpan={6}>
+                  {loading ? '…' : t.scEmpty}
+                </td>
+              </tr>
+            ) : null}
+          </tbody>
+        </table>
+      </div>
+
+      {toast ? <Toast message={toast.message} tone={toast.tone} /> : null}
+    </section>
+  )
+}
diff --git a/apps/editor/panel/components/console/sessions-tab.tsx b/apps/editor/panel/components/console/sessions-tab.tsx
new file mode 100644
index 000000000..e7d821294
--- /dev/null
+++ b/apps/editor/panel/components/console/sessions-tab.tsx
@@ -0,0 +1,154 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { Toast } from '@panel/components/ui/feedback'
+import type { SessionResponse, SessionsResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { formatDate, resolveApiMessage } from '@panel/lib/i18n'
+import type { SessionInfo } from '@panel/lib/types'
+import { Monitor } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+/**
+ * The signed-in user's own devices, plus a read-only view of the policy the
+ * server enforces. The policy is deliberately not editable here: session length,
+ * device limit and the MFA requirement all live in the org settings row, which
+ * the Settings tab owns in step 7.
+ */
+export function SessionsTab() {
+  const { t, lang } = useApp()
+
+  const [sessions, setSessions] = useState<SessionInfo[]>([])
+  const [sessionMinutes, setSessionMinutes] = useState<number | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' } | null>(null)
+
+  const load = useCallback(async () => {
+    const [list, meta] = await Promise.all([
+      call<SessionsResponse>('/api/auth/sessions'),
+      call<SessionResponse>('/api/auth/session'),
+    ])
+    if (list.ok) setSessions(list.data.sessions)
+    if (meta.ok) setSessionMinutes(meta.data.sessionMinutes)
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const revoke = useCallback(
+    async (session: SessionInfo) => {
+      const res = await call<{ revoked: number; self: boolean }>(
+        `/api/auth/sessions/${session.id}`,
+        {
+          method: 'DELETE',
+        },
+      )
+      if (!res.ok) {
+        setToast({ message: resolveApiMessage(t, res.messageKey), tone: 'error' })
+        setTimeout(() => setToast(null), 2600)
+        return
+      }
+      // Revoking your own session drops the cookie, so the next navigation is a
+      // sign-in. Reloading here is what makes that immediate rather than eventual.
+      if (res.data.self) {
+        window.location.href = '/signin'
+        return
+      }
+      void load()
+    },
+    [load, t],
+  )
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-col gap-[2px]">
+        <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.c.sessionsTitle}</h2>
+        <p className="m-0 text-xs text-muted-fg">
+          {sessions.length} {t.sessionPolicyLead.toLocaleLowerCase(lang)}
+        </p>
+      </header>
+
+      <div className="flex flex-col gap-2 rounded-[12px] border border-border bg-surface p-3">
+        <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+          {t.sessionPolicy}
+        </Caps>
+        <div className="flex flex-wrap gap-x-6 gap-y-2">
+          <PolicyValue
+            label={t.polIdle}
+            value={sessionMinutes ? `${sessionMinutes} ${t.polMin}` : '—'}
+          />
+          <PolicyValue label={t.polMfa} value={t.on} />
+        </div>
+        <p className="m-0 text-[11.5px] text-muted-fg text-pretty">{t.sessionPolicyLead}</p>
+      </div>
+
+      <div className="flex min-w-0 flex-col overflow-hidden rounded-[12px] border border-border">
+        {loading ? (
+          <div className="flex flex-col">
+            {Array.from({ length: 3 }, (_, i) => (
+              <div
+                key={i}
+                className="flex h-[52px] items-center gap-4 border-b border-border-soft px-3"
+              >
+                <span
+                  className="h-[9px] w-[180px] rounded bg-hover"
+                  style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+                />
+              </div>
+            ))}
+          </div>
+        ) : sessions.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 px-4 py-10">
+            <Monitor className="h-[22px] w-[22px] text-muted-fg" strokeWidth={1.6} />
+            <span className="text-[11.5px] text-muted-fg">{t.noOtherSessions}</span>
+          </div>
+        ) : (
+          sessions.map((session) => (
+            <div
+              key={session.id}
+              className="flex min-w-0 flex-wrap items-center gap-3 border-b border-border-soft px-3 py-[10px] last:border-b-0"
+            >
+              <div className="flex min-w-[180px] flex-1 flex-col gap-[2px]">
+                <div className="flex items-center gap-2">
+                  <span className="truncate text-[12.5px] font-medium">
+                    {session.device ?? '—'}
+                  </span>
+                  {session.current ? (
+                    <span className="shrink-0 rounded-[4px] border border-brand px-[5px] font-mono text-[8.5px] text-brand-fg">
+                      {t.thisDevice}
+                    </span>
+                  ) : null}
+                </div>
+                <span className="truncate font-mono text-[10px] text-muted-fg">
+                  {session.ip ?? '—'} · {formatDate(lang, session.lastActivityAt)}
+                </span>
+              </div>
+
+              <button
+                type="button"
+                onClick={() => void revoke(session)}
+                className="h-[26px] shrink-0 rounded-[6px] border border-destructive bg-transparent px-[10px] text-[11px] text-destructive hover:bg-hover"
+              >
+                {session.current ? t.c.endSession : t.revokeSession}
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+
+      {toast ? <Toast message={toast.message} tone={toast.tone} /> : null}
+    </section>
+  )
+}
+
+function PolicyValue({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex flex-col gap-[2px]">
+      <Caps className="font-mono text-[8.5px] tracking-[0.1em] text-muted-fg">{label}</Caps>
+      <span className="font-mono text-[13px] text-fg">{value}</span>
+    </div>
+  )
+}
diff --git a/apps/editor/panel/components/console/settings-tab.tsx b/apps/editor/panel/components/console/settings-tab.tsx
new file mode 100644
index 000000000..02fe45a47
--- /dev/null
+++ b/apps/editor/panel/components/console/settings-tab.tsx
@@ -0,0 +1,400 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { SegBar, SegButton } from '@panel/components/ui/controls'
+import { Toast } from '@panel/components/ui/feedback'
+import type { SettingsResponse, UpdateSettingsRequest } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { format, resolveApiMessage } from '@panel/lib/i18n'
+import type { Lang, OrgSettings, Theme } from '@panel/lib/types'
+import { type ReactNode, useCallback, useEffect, useState } from 'react'
+
+/**
+ * The org settings row, grouped as the design has it: Security, Identity and
+ * invites, Appearance.
+ *
+ * Appearance is the odd one out and stays local on purpose — theme and language
+ * are per-viewer preferences held in a cookie, not tenant policy, so they are
+ * rendered in the same list but never written to the settings row.
+ */
+export function SettingsTab() {
+  const { t, lang, themeChoice, setThemeChoice, setLang } = useApp()
+
+  const [settings, setSettings] = useState<OrgSettings | null>(null)
+  const [canEdit, setCanEdit] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' } | null>(null)
+
+  const load = useCallback(async () => {
+    const res = await call<SettingsResponse>('/api/settings')
+    if (!res.ok) return
+    setSettings(res.data.settings)
+    setCanEdit(res.data.canEdit)
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  /**
+   * Delivery is the one setting that cannot be verified by reading it back —
+   * SMTP either reaches an inbox or it does not. The address is the signed-in
+   * administrator's own, chosen server-side, so this cannot be pointed at
+   * anybody else.
+   */
+  const [sending, setSending] = useState(false)
+  const sendTest = useCallback(async () => {
+    if (sending) return
+    setSending(true)
+    const res = await call<{ sent: boolean; to: string }>('/api/settings/test-mail', {
+      body: { lang },
+    })
+    setSending(false)
+    setToast(
+      res.ok
+        ? { message: format(t.seMailSent, { email: res.data.to }), tone: 'success' }
+        : { message: resolveApiMessage(t, res.messageKey), tone: 'error' },
+    )
+    setTimeout(() => setToast(null), 3200)
+  }, [lang, sending, t])
+
+  const save = useCallback(
+    async (patch: UpdateSettingsRequest) => {
+      if (!canEdit || busy) return
+      setBusy(true)
+      const res = await call<SettingsResponse>('/api/settings', { method: 'PUT', body: patch })
+      setBusy(false)
+
+      if (!res.ok) {
+        setToast({ message: resolveApiMessage(t, res.messageKey), tone: 'error' })
+        setTimeout(() => setToast(null), 2600)
+        return
+      }
+      setSettings(res.data.settings)
+      setToast({ message: t.seSaved, tone: 'success' })
+      setTimeout(() => setToast(null), 1800)
+    },
+    [canEdit, busy, t],
+  )
+
+  if (!settings) {
+    return (
+      <div className="flex flex-col gap-3">
+        {Array.from({ length: 3 }, (_, i) => (
+          <div
+            key={i}
+            className="h-[160px] rounded-[12px] border border-border bg-surface"
+            style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  const sections: Array<{ title: string; rows: ReactNode[] }> = [
+    {
+      title: t.seSecurity,
+      rows: [
+        <SegRow
+          key="sess"
+          label={t.seSessLen}
+          desc={t.seSessLenD}
+          options={[
+            [10, '10'],
+            [20, '20'],
+            [30, '30'],
+            [60, `60 ${t.polMin}`],
+          ]}
+          value={settings.sessionMinutes}
+          disabled={!canEdit}
+          onChange={(v) => void save({ sessionMinutes: v })}
+        />,
+        <ToggleRow
+          key="keep"
+          label={t.seKeep}
+          desc={t.seKeepD}
+          on={settings.keepSignedInAllowed}
+          disabled={!canEdit}
+          onToggle={() => void save({ keepSignedInAllowed: !settings.keepSignedInAllowed })}
+        />,
+        <SegRow
+          key="keepdays"
+          label={t.seKeepDays}
+          desc={t.seKeepDaysD}
+          options={[
+            [7, '7'],
+            [14, '14'],
+            [30, `30 ${t.seDays}`],
+          ]}
+          value={settings.keepSignedInDays}
+          disabled={!canEdit || !settings.keepSignedInAllowed}
+          onChange={(v) => void save({ keepSignedInDays: v })}
+        />,
+        <SegRow
+          key="trust"
+          label={t.seTrust}
+          desc={t.seTrustD}
+          options={[
+            [14, '14'],
+            [30, '30'],
+            [90, `90 ${t.seDays}`],
+          ]}
+          value={settings.trustedDeviceDays}
+          disabled={!canEdit}
+          onChange={(v) => void save({ trustedDeviceDays: v })}
+        />,
+        <SegRow
+          key="conc"
+          label={t.seConc}
+          desc={t.seConcD}
+          options={[
+            [1, '1'],
+            [3, '3'],
+            [5, '5'],
+          ]}
+          value={settings.concurrentSessionLimit}
+          disabled={!canEdit}
+          onChange={(v) => void save({ concurrentSessionLimit: v })}
+        />,
+        <ToggleRow
+          key="mfa"
+          label={t.seMfa}
+          desc={t.seMfaD}
+          on={settings.mfaRequired}
+          disabled={!canEdit}
+          onToggle={() => void save({ mfaRequired: !settings.mfaRequired })}
+        />,
+      ],
+    },
+    {
+      title: t.seIdentity,
+      rows: [
+        <ChipRow
+          key="sso"
+          label={t.seSso}
+          desc={t.seSsoD}
+          chips={settings.ssoEnforcedDomains}
+          empty={t.seSsoNone}
+        />,
+        <SegRow
+          key="invite"
+          label={t.seInvite}
+          desc={t.seInviteD}
+          options={[
+            [5, '5'],
+            [7, '7'],
+            [14, `14 ${t.seDays}`],
+          ]}
+          value={settings.inviteExpiryDays}
+          disabled={!canEdit}
+          onChange={(v) => void save({ inviteExpiryDays: v })}
+        />,
+        <ToggleRow
+          key="ext"
+          label={t.seExternal}
+          desc={t.seExternalD}
+          on={settings.externalUsersAllowed}
+          disabled={!canEdit}
+          onToggle={() => void save({ externalUsersAllowed: !settings.externalUsersAllowed })}
+        />,
+      ],
+    },
+    {
+      title: t.seAppearance,
+      rows: [
+        <SegRow
+          key="theme"
+          label={t.seTheme}
+          desc={t.seThemeD}
+          options={[
+            ['system', t.seSystem],
+            ['light', t.seLight],
+            ['dark', t.seDark],
+          ]}
+          value={themeChoice}
+          disabled={false}
+          onChange={(v) => setThemeChoice(v as Theme | 'system')}
+        />,
+        <SegRow
+          key="lang"
+          label={t.seLang}
+          desc={t.seLangD}
+          options={[
+            ['en', 'EN'],
+            ['tr', 'TR'],
+          ]}
+          value={lang}
+          disabled={false}
+          onChange={(v) => setLang(v as Lang)}
+        />,
+      ],
+    },
+    {
+      title: t.seMail,
+      rows: [
+        <RowShell key="testmail" label={t.seMailTest} desc={t.seMailTestD}>
+          <button
+            className="rounded-[8px] border border-border bg-field px-3 py-[6px] font-medium text-[12px] text-fg hover:bg-hover disabled:opacity-50"
+            disabled={sending}
+            onClick={() => void sendTest()}
+            type="button"
+          >
+            {sending ? t.seMailSending : t.seMailSend}
+          </button>
+        </RowShell>,
+      ],
+    },
+  ]
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-col gap-[2px]">
+        <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.c.settings}</h2>
+        <p className="m-0 text-xs text-muted-fg text-pretty">{t.seLead}</p>
+      </header>
+
+      {!canEdit ? (
+        <div className="flex min-w-0 items-center gap-[9px] rounded-[10px] border border-border bg-surface px-3 py-2">
+          <span className="h-[5px] w-[5px] shrink-0 rounded-full bg-destructive" />
+          <span className="shrink-0 text-[11.5px] font-semibold">{t.c.readOnly}</span>
+          <span className="min-w-0 text-[11.5px] text-muted-fg text-pretty">
+            {t.c.readOnlyLead}
+          </span>
+        </div>
+      ) : null}
+
+      {sections.map((section) => (
+        <div
+          key={section.title}
+          className="min-w-0 overflow-hidden rounded-[12px] border border-border"
+        >
+          <div className="border-b border-border bg-surface px-3 py-2">
+            <Caps className="font-mono text-[8.5px] tracking-[0.12em] text-muted-fg">
+              {section.title}
+            </Caps>
+          </div>
+          {section.rows}
+        </div>
+      ))}
+
+      {toast ? <Toast message={toast.message} tone={toast.tone} /> : null}
+    </section>
+  )
+}
+
+function RowShell({ label, desc, children }: { label: string; desc: string; children: ReactNode }) {
+  return (
+    <div className="flex min-w-0 flex-wrap items-center justify-between gap-3 border-b border-border-soft px-3 py-[11px] last:border-b-0">
+      <div className="flex min-w-[200px] flex-1 flex-col gap-[2px]">
+        <span className="text-[12.5px] font-medium text-fg">{label}</span>
+        <span className="text-[11px] leading-[1.45] text-muted-fg text-pretty">{desc}</span>
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  )
+}
+
+function SegRow<T extends string | number>({
+  label,
+  desc,
+  options,
+  value,
+  disabled,
+  onChange,
+}: {
+  label: string
+  desc: string
+  options: Array<[T, string]>
+  value: T
+  disabled: boolean
+  onChange: (value: T) => void
+}) {
+  return (
+    <RowShell label={label} desc={desc}>
+      <div className={cn(disabled && 'pointer-events-none opacity-50')}>
+        <SegBar>
+          {options.map(([optionValue, optionLabel]) => (
+            <SegButton
+              key={String(optionValue)}
+              active={value === optionValue}
+              onClick={() => onChange(optionValue)}
+            >
+              {optionLabel}
+            </SegButton>
+          ))}
+        </SegBar>
+      </div>
+    </RowShell>
+  )
+}
+
+function ToggleRow({
+  label,
+  desc,
+  on,
+  disabled,
+  onToggle,
+}: {
+  label: string
+  desc: string
+  on: boolean
+  disabled: boolean
+  onToggle: () => void
+}) {
+  return (
+    <RowShell label={label} desc={desc}>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={on}
+        aria-label={label}
+        disabled={disabled}
+        onClick={onToggle}
+        className={cn(
+          'relative flex h-[22px] w-[38px] items-center rounded-full border transition-colors',
+          on ? 'border-brand bg-brand' : 'border-input bg-field',
+        )}
+      >
+        <span
+          className={cn(
+            'absolute h-[16px] w-[16px] rounded-full transition-[left]',
+            on ? 'left-[19px] bg-[#0A0A0A]' : 'left-[2px] bg-muted-fg',
+          )}
+        />
+      </button>
+    </RowShell>
+  )
+}
+
+function ChipRow({
+  label,
+  desc,
+  chips,
+  empty,
+}: {
+  label: string
+  desc: string
+  chips: string[]
+  empty: string
+}) {
+  return (
+    <RowShell label={label} desc={desc}>
+      <div className="flex flex-wrap justify-end gap-[6px]">
+        {chips.length === 0 ? (
+          <span className="text-[11px] text-muted-fg">{empty}</span>
+        ) : (
+          chips.map((chip) => (
+            <span
+              key={chip}
+              className="rounded-[6px] border border-brand bg-field px-[9px] py-[3px] font-mono text-[10px] tracking-[0.04em] text-brand-fg"
+            >
+              {chip}
+            </span>
+          ))
+        )}
+      </div>
+    </RowShell>
+  )
+}
diff --git a/apps/editor/panel/components/console/sites-tab.tsx b/apps/editor/panel/components/console/sites-tab.tsx
new file mode 100644
index 000000000..92bc1ad13
--- /dev/null
+++ b/apps/editor/panel/components/console/sites-tab.tsx
@@ -0,0 +1,330 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { SegBar, SegButton } from '@panel/components/ui/controls'
+import { Toast } from '@panel/components/ui/feedback'
+import type { SitesResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { formatNumber, resolveApiMessage } from '@panel/lib/i18n'
+import type { Site } from '@panel/lib/types'
+import { Warehouse } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+type Template = 'empty' | 'ifc' | 'copy'
+
+/** How long the tab keeps watching a provisioning site before it stops polling. */
+const PROVISION_WATCH_MS = 2 * 60 * 1000
+
+export function SitesTab() {
+  const { t, lang } = useApp()
+
+  const [sites, setSites] = useState<Site[]>([])
+  const [canEdit, setCanEdit] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [creating, setCreating] = useState(false)
+  const [name, setName] = useState('')
+  const [template, setTemplate] = useState<Template>('empty')
+  const [footprint, setFootprint] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' } | null>(null)
+
+  const notify = useCallback((message: string, tone: 'success' | 'error' = 'success') => {
+    setToast({ message, tone })
+    setTimeout(() => setToast(null), 2600)
+  }, [])
+
+  const load = useCallback(async () => {
+    const res = await call<SitesResponse>('/api/sites')
+    if (res.ok) {
+      setSites(res.data.sites)
+      setCanEdit(res.data.canEdit)
+    }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  /**
+   * A site in `setup` is waiting on its provisioning job, so the tab polls while
+   * any card is in that state — and gives up after PROVISION_WATCH_MS.
+   *
+   * The bound is not cosmetic: a site can sit in `setup` with no job behind it
+   * (a seeded row, or a job that was cancelled), and without a ceiling this tab
+   * would poll that row for as long as it stayed open.
+   */
+  useEffect(() => {
+    if (!sites.some((s) => s.status === 'setup')) return
+
+    const startedAt = Date.now()
+    const timer = setInterval(() => {
+      if (Date.now() - startedAt > PROVISION_WATCH_MS) {
+        clearInterval(timer)
+        return
+      }
+      void load()
+    }, 4000)
+    return () => clearInterval(timer)
+  }, [sites, load])
+
+  const create = useCallback(async () => {
+    if (!name.trim()) {
+      notify(t.errFields, 'error')
+      return
+    }
+    setBusy(true)
+    const res = await call<{ site: string; job: string }>('/api/sites', {
+      body: {
+        name: name.trim(),
+        template,
+        footprintM2: footprint.trim() ? Number(footprint.replace(/\D/g, '')) : null,
+      },
+    })
+    setBusy(false)
+
+    if (!res.ok) {
+      notify(resolveApiMessage(t, res.messageKey), 'error')
+      return
+    }
+    setName('')
+    setFootprint('')
+    setCreating(false)
+    notify(`${name.trim()} — ${t.stQueuedToast}`)
+    void load()
+  }, [name, template, footprint, notify, t, load])
+
+  const setStatus = useCallback(
+    async (site: Site, action: 'archive' | 'restore') => {
+      const res = await call(`/api/sites/${site.id}/${action}`, { body: {} })
+      if (!res.ok) {
+        notify(resolveApiMessage(t, res.messageKey), 'error')
+        return
+      }
+      void load()
+    },
+    [notify, t, load],
+  )
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div className="flex flex-col gap-[2px]">
+          <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.c.sites}</h2>
+          <p className="m-0 text-xs text-muted-fg">{t.stLead}</p>
+        </div>
+        <button
+          type="button"
+          disabled={!canEdit}
+          onClick={() => setCreating((v) => !v)}
+          className="h-[30px] shrink-0 rounded-[8px] bg-primary px-[13px] text-xs font-semibold text-primary-fg shadow-e2 hover:opacity-92"
+        >
+          {creating ? t.c.closeForm : t.stNew}
+        </button>
+      </header>
+
+      {creating ? (
+        <div
+          className="flex flex-col gap-[10px] rounded-[12px] border border-input bg-surface p-[13px]"
+          style={{ animation: 'dtDrop 0.16s ease' }}
+        >
+          <div className="flex flex-wrap items-end gap-[10px]">
+            <div className="flex min-w-[170px] flex-1 flex-col gap-[5px]">
+              <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+                {t.stNameLbl}
+              </Caps>
+              <input
+                type="text"
+                placeholder="Gebze HUB3"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="h-8 w-full min-w-0 rounded-[8px] border border-input bg-field px-[10px] text-xs text-fg outline-none focus:border-ring"
+              />
+            </div>
+
+            <div className="flex flex-col gap-[5px]">
+              <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+                {t.stTplLbl}
+              </Caps>
+              <SegBar>
+                {(
+                  [
+                    ['empty', t.stTplEmpty],
+                    ['ifc', t.stTplIfc],
+                    ['copy', t.stTplCopy],
+                  ] as Array<[Template, string]>
+                ).map(([value, label]) => (
+                  <SegButton
+                    key={value}
+                    active={template === value}
+                    onClick={() => setTemplate(value)}
+                  >
+                    {label}
+                  </SegButton>
+                ))}
+              </SegBar>
+            </div>
+
+            <div className="flex min-w-[130px] flex-col gap-[5px]">
+              <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+                {t.stFpLbl}
+              </Caps>
+              <input
+                type="text"
+                inputMode="numeric"
+                placeholder="28000"
+                value={footprint}
+                onChange={(e) => setFootprint(e.target.value)}
+                className="h-8 w-full min-w-0 rounded-[8px] border border-input bg-field px-[10px] font-mono text-xs text-fg outline-none focus:border-ring"
+              />
+            </div>
+          </div>
+
+          <p className="m-0 text-[11.5px] text-muted-fg text-pretty">{t.stHint}</p>
+
+          <div className="flex gap-[7px]">
+            <button
+              type="button"
+              disabled={busy}
+              onClick={() => void create()}
+              className="h-8 rounded-[8px] bg-primary px-[14px] text-xs font-semibold text-primary-fg hover:opacity-92"
+            >
+              {t.stCreate}
+            </button>
+            <button
+              type="button"
+              onClick={() => setCreating(false)}
+              className="h-8 rounded-[8px] border border-border bg-transparent px-3 text-xs text-muted-fg hover:bg-hover hover:text-fg"
+            >
+              {t.cancel}
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      {loading ? (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 3 }, (_, i) => (
+            <div
+              key={i}
+              className="h-[168px] rounded-[12px] border border-border bg-surface"
+              style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+            />
+          ))}
+        </div>
+      ) : sites.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 rounded-[12px] border border-dashed border-input px-4 py-12">
+          <Warehouse className="h-[22px] w-[22px] text-muted-fg" strokeWidth={1.6} />
+          <span className="text-[12.5px] font-semibold">{t.stEmptyTitle}</span>
+          <span className="max-w-[380px] text-center text-[11.5px] text-muted-fg text-pretty">
+            {t.stEmptyLead}
+          </span>
+        </div>
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {sites.map((site) => (
+            <article
+              key={site.id}
+              // Archived cards are marked by their dashed border and their
+              // status chip, not by dimming. Blanket opacity took the whole card
+              // below 4.5:1 — the same defect the revoked API key row had, and
+              // one the seeded data happened not to expose.
+              className={cn(
+                'flex min-w-0 flex-col gap-3 rounded-[12px] border bg-surface p-[13px]',
+                site.status === 'archived' ? 'border-dashed border-input' : 'border-border',
+              )}
+            >
+              <div className="flex items-center justify-between gap-2">
+                <span className="min-w-0 truncate text-[13px] font-semibold">{site.name}</span>
+                <span
+                  className={cn(
+                    'flex shrink-0 items-center gap-[6px] rounded-[5px] border px-[7px] py-px text-[10.5px]',
+                    site.status === 'active'
+                      ? 'border-border text-fg'
+                      : site.status === 'setup'
+                        ? 'border-brand text-brand-fg'
+                        : 'border-border text-muted-fg',
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'h-[5px] w-[5px] rounded-full',
+                      site.status === 'active'
+                        ? 'bg-ok'
+                        : site.status === 'setup'
+                          ? 'bg-brand'
+                          : 'bg-muted-fg',
+                    )}
+                    style={
+                      site.status === 'setup'
+                        ? { animation: 'dtPulse 2s ease infinite' }
+                        : undefined
+                    }
+                  />
+                  {site.status === 'active'
+                    ? t.stActive
+                    : site.status === 'setup'
+                      ? t.stSetup
+                      : t.stArchived}
+                </span>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                {[
+                  { k: t.stStorage, v: site.storageSlots },
+                  { k: t.stPicking, v: site.pickingSlots },
+                  { k: t.stFp2, v: site.footprintM2 },
+                  { k: t.stUsers, v: site.userCount },
+                ].map((cell) => (
+                  <div key={cell.k} className="flex min-w-0 flex-col gap-[2px]">
+                    <Caps className="font-mono text-[8.5px] tracking-[0.1em] text-muted-fg">
+                      {cell.k}
+                    </Caps>
+                    <span className="font-mono text-[13px] text-fg">
+                      {typeof cell.v === 'number' ? formatNumber(lang, cell.v) : '—'}
+                    </span>
+                  </div>
+                ))}
+              </div>
+
+              <div className="mt-auto flex gap-[6px]">
+                <button
+                  type="button"
+                  disabled={site.status !== 'active'}
+                  onClick={() => {
+                    // With the editor deployed alongside, the site's scene is
+                    // real and opens directly; standalone keeps the note.
+                    if (site.sceneId) window.location.assign(`/scene/${site.sceneId}`)
+                    else notify(t.stOpenNote)
+                  }}
+                  className="h-[26px] flex-1 rounded-[6px] border border-border bg-field text-[11px] font-medium text-fg hover:bg-hover"
+                >
+                  {t.stOpen}
+                </button>
+                <button
+                  type="button"
+                  disabled={!canEdit || site.status === 'setup'}
+                  onClick={() =>
+                    void setStatus(site, site.status === 'archived' ? 'restore' : 'archive')
+                  }
+                  className={cn(
+                    'h-[26px] shrink-0 rounded-[6px] border bg-transparent px-[10px] text-[11px]',
+                    site.status === 'archived'
+                      ? 'border-border text-muted-fg hover:bg-hover hover:text-fg'
+                      : 'border-destructive text-destructive hover:bg-hover',
+                  )}
+                >
+                  {site.status === 'archived' ? t.stRestore : t.stArch}
+                </button>
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+
+      {toast ? <Toast message={toast.message} tone={toast.tone} /> : null}
+    </section>
+  )
+}
diff --git a/apps/editor/panel/components/console/sparkline.tsx b/apps/editor/panel/components/console/sparkline.tsx
new file mode 100644
index 000000000..5f918a94d
--- /dev/null
+++ b/apps/editor/panel/components/console/sparkline.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { useId } from 'react'
+
+/**
+ * Small trend line for the metric cards.
+ *
+ * `dtDash` draws the stroke on first paint. The key is the point count, so the
+ * animation replays when a series is first filled but not on every 4 s tick —
+ * a line that redraws itself every poll reads as a glitch, not as motion.
+ */
+export function Sparkline({
+  values,
+  width = 132,
+  height = 30,
+  tone = 'brand',
+}: {
+  values: number[]
+  width?: number
+  height?: number
+  tone?: 'brand' | 'muted'
+}) {
+  const gradientId = useId()
+
+  if (values.length < 2) {
+    return (
+      <svg
+        viewBox={`0 0 ${width} ${height}`}
+        width={width}
+        height={height}
+        aria-hidden
+        className="block"
+      >
+        <line
+          x1={0}
+          y1={height / 2}
+          x2={width}
+          y2={height / 2}
+          stroke="var(--dt-input)"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+        />
+      </svg>
+    )
+  }
+
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+  // A flat series has zero span; without the guard every point lands on NaN.
+  const span = max - min || 1
+  const step = width / (values.length - 1)
+
+  const points = values.map((value, index) => {
+    const x = index * step
+    const y = height - 2 - ((value - min) / span) * (height - 4)
+    return [x, y] as const
+  })
+
+  const line = points
+    .map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`)
+    .join(' ')
+  const area = `${line} L${width},${height} L0,${height} Z`
+  const stroke = tone === 'brand' ? 'var(--dt-brand)' : 'var(--dt-muted-fg)'
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      width={width}
+      height={height}
+      aria-hidden
+      className="block"
+    >
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={stroke} stopOpacity="0.22" />
+          <stop offset="100%" stopColor={stroke} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path d={area} fill={`url(#${gradientId})`} />
+      <path
+        key={values.length}
+        d={line}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ strokeDasharray: 220, animation: 'dtDash 0.9s ease forwards' }}
+      />
+    </svg>
+  )
+}
diff --git a/apps/editor/panel/components/console/tab-content.tsx b/apps/editor/panel/components/console/tab-content.tsx
new file mode 100644
index 000000000..7e559d9aa
--- /dev/null
+++ b/apps/editor/panel/components/console/tab-content.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { AuditTab } from '@panel/components/console/audit-tab'
+import { GuidesTab } from '@panel/components/console/guides-tab'
+import { IntegrationsTab } from '@panel/components/console/integrations-tab'
+import { JobsTab } from '@panel/components/console/jobs-tab'
+import { LogsTab } from '@panel/components/console/logs-tab'
+import { OverviewTab } from '@panel/components/console/overview-tab'
+import { RolesTab } from '@panel/components/console/roles-tab'
+import { ScenesTab } from '@panel/components/console/scenes-tab'
+import { SessionsTab } from '@panel/components/console/sessions-tab'
+import { SettingsTab } from '@panel/components/console/settings-tab'
+import { SitesTab } from '@panel/components/console/sites-tab'
+import { UpdatesTab } from '@panel/components/console/updates-tab'
+import { UsersTab } from '@panel/components/console/users-tab'
+import type { ConsoleTab } from '@panel/lib/console-tabs'
+
+/**
+ * One switch, so adding a tab in a later handover step is a single edit here
+ * rather than a change to the route, the shell and the rail.
+ */
+export function TabContent({ tab }: { tab: ConsoleTab }) {
+  switch (tab) {
+    case 'users':
+      return <UsersTab />
+    case 'roles':
+      return <RolesTab />
+    case 'sessions':
+      return <SessionsTab />
+    case 'sites':
+      return <SitesTab />
+    case 'scenes':
+      return <ScenesTab />
+    case 'jobs':
+      return <JobsTab />
+    case 'integrations':
+      return <IntegrationsTab />
+    case 'settings':
+      return <SettingsTab />
+    case 'overview':
+      return <OverviewTab />
+    case 'logs':
+      return <LogsTab />
+    case 'audit':
+      return <AuditTab />
+    case 'updates':
+      return <UpdatesTab />
+    case 'guides':
+      return <GuidesTab />
+    // No default: `tab` is a ConsoleTab, every one of the eleven is handled
+    // above, and TypeScript now fails the build if a twelfth is added without a
+    // screen. A fallback here would have hidden that.
+  }
+}
diff --git a/apps/editor/panel/components/console/updates-tab.tsx b/apps/editor/panel/components/console/updates-tab.tsx
new file mode 100644
index 000000000..fd3c42483
--- /dev/null
+++ b/apps/editor/panel/components/console/updates-tab.tsx
@@ -0,0 +1,191 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import type { ChangelogResponse, ReleaseEntry } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { formatDateOnly } from '@panel/lib/i18n'
+import { useCallback, useEffect, useState } from 'react'
+
+/**
+ * Release notes as a vertical timeline, newest first.
+ *
+ * The upstream repositories are never named here — entries arrive with a
+ * `channel` and the wording comes from the dictionary, which is the rule the
+ * design settled on after the repo URLs leaked into the UI.
+ */
+export function UpdatesTab() {
+  const { t, lang } = useApp()
+
+  const [entries, setEntries] = useState<ReleaseEntry[]>([])
+  const [cursor, setCursor] = useState<string | null>(null)
+  const [live, setLive] = useState(false)
+  const [fetchedAt, setFetchedAt] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [tag, setTag] = useState<string | null>(null)
+
+  const load = useCallback(async (nextCursor?: string) => {
+    const params = new URLSearchParams({ limit: '20' })
+    if (nextCursor) params.set('cursor', nextCursor)
+
+    const res = await call<ChangelogResponse>(`/api/changelog?${params}`)
+    setLoading(false)
+    if (!res.ok) return
+
+    setEntries((prev) => (nextCursor ? [...prev, ...res.data.entries] : res.data.entries))
+    setCursor(res.data.nextCursor)
+    setLive(res.data.live)
+    setFetchedAt(res.data.fetchedAt)
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const visible = tag ? entries.filter((e) => e.tags.includes(tag)) : entries
+  const allTags = [...new Set(entries.flatMap((e) => e.tags))].slice(0, 10)
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div className="flex flex-col gap-[2px]">
+          <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.c.changelog}</h2>
+          <p className="m-0 text-xs text-muted-fg">{t.clLead}</p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <span
+            className={cn(
+              'flex shrink-0 items-center gap-[6px] rounded-[5px] border px-[8px] py-[3px] font-mono text-[9px]',
+              live ? 'border-brand text-brand-fg' : 'border-border text-muted-fg',
+            )}
+          >
+            <span
+              className={cn('h-[5px] w-[5px] rounded-full', live ? 'bg-brand' : 'bg-muted-fg')}
+            />
+            <Caps invariant>{live ? t.clLive : t.clSnapshot}</Caps>
+          </span>
+          {fetchedAt ? (
+            <span className="font-mono text-[9.5px] text-muted-fg">
+              {t.clFetched} {formatDateOnly(lang, fetchedAt)}
+            </span>
+          ) : null}
+        </div>
+      </header>
+
+      {allTags.length > 0 ? (
+        <div className="flex flex-wrap gap-[6px]">
+          {allTags.map((value) => (
+            <button
+              key={value}
+              type="button"
+              onClick={() => setTag(tag === value ? null : value)}
+              className={cn(
+                'rounded-[6px] border px-[9px] py-[3px] font-mono text-[10px]',
+                tag === value
+                  ? 'border-brand bg-field text-brand-fg'
+                  : 'border-border bg-transparent text-muted-fg hover:text-fg',
+              )}
+            >
+              #{value}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {loading ? (
+        <div className="flex flex-col gap-3">
+          {Array.from({ length: 3 }, (_, i) => (
+            <div
+              key={i}
+              className="h-[110px] rounded-[12px] border border-border bg-surface"
+              style={{ animation: 'dtShimmer 1.4s ease infinite' }}
+            />
+          ))}
+        </div>
+      ) : visible.length === 0 ? (
+        <div className="rounded-[12px] border border-dashed border-input px-4 py-12 text-center text-[11.5px] text-muted-fg">
+          {t.clEmpty}
+        </div>
+      ) : (
+        <ol className="m-0 flex list-none flex-col gap-0 p-0">
+          {visible.map((entry, index) => (
+            <li key={entry.id} className="flex min-w-0 gap-4">
+              {/* Timeline rail: dot plus the connecting line, drawn per row so
+                  the last entry does not trail a line into empty space. */}
+              <div className="flex w-[10px] shrink-0 flex-col items-center pt-[18px]">
+                <span
+                  className={cn(
+                    'h-[7px] w-[7px] shrink-0 rounded-full',
+                    entry.channel === 'editor' ? 'bg-brand' : 'bg-input',
+                  )}
+                />
+                {index < visible.length - 1 ? <span className="w-px flex-1 bg-border" /> : null}
+              </div>
+
+              <article className="mb-3 min-w-0 flex-1 rounded-[12px] border border-border bg-surface p-[13px]">
+                <div className="flex flex-wrap items-baseline gap-2">
+                  <span className="font-mono text-[10px] text-muted-fg">
+                    {formatDateOnly(lang, entry.date)}
+                  </span>
+                  {entry.version ? (
+                    <span className="rounded-[4px] border border-border px-[6px] font-mono text-[10px] text-fg">
+                      {entry.version}
+                    </span>
+                  ) : null}
+                  <span className="font-mono text-[9.5px] text-muted-fg">
+                    {entry.channel === 'editor'
+                      ? t.clEditor
+                      : entry.channel === 'console'
+                        ? t.clConsole
+                        : t.clPlugin}
+                  </span>
+                </div>
+
+                <h3 className="m-0 mt-[6px] text-[13.5px] font-semibold tracking-[-0.01em] text-fg">
+                  {entry.title}
+                </h3>
+                <p className="m-0 mt-[4px] text-[12px] leading-[1.55] text-muted-fg text-pretty">
+                  {entry.summary}
+                </p>
+
+                <div className="mt-[9px] flex flex-wrap items-center gap-2">
+                  {entry.authors.slice(0, 4).map((author) => (
+                    <span key={author} className="flex items-center gap-[5px]">
+                      <span className="flex h-[18px] w-[18px] items-center justify-center rounded-[5px] bg-hover font-mono text-[8px] text-muted-fg">
+                        {author.slice(0, 2).toLocaleUpperCase('en')}
+                      </span>
+                      <span className="font-mono text-[9.5px] text-muted-fg">{author}</span>
+                    </span>
+                  ))}
+                  <span className="flex-1" />
+                  {entry.tags.map((value) => (
+                    <button
+                      key={value}
+                      type="button"
+                      onClick={() => setTag(tag === value ? null : value)}
+                      className="rounded-[4px] border border-border-soft bg-transparent px-[5px] font-mono text-[9px] text-muted-fg hover:text-fg"
+                    >
+                      #{value}
+                    </button>
+                  ))}
+                </div>
+              </article>
+            </li>
+          ))}
+        </ol>
+      )}
+
+      {cursor && !tag ? (
+        <button
+          type="button"
+          onClick={() => void load(cursor)}
+          className="h-9 rounded-[10px] border border-border bg-surface text-[11.5px] font-medium text-muted-fg hover:text-fg"
+        >
+          {t.lgLoadMore}
+        </button>
+      ) : null}
+    </section>
+  )
+}
diff --git a/apps/editor/panel/components/console/user-drawer.tsx b/apps/editor/panel/components/console/user-drawer.tsx
new file mode 100644
index 000000000..fd52dd8ff
--- /dev/null
+++ b/apps/editor/panel/components/console/user-drawer.tsx
@@ -0,0 +1,500 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { Caps } from '@panel/components/ui/caps'
+import { Button } from '@panel/components/ui/controls'
+import { Dialog } from '@panel/components/ui/feedback'
+import { useModalFocus } from '@panel/components/ui/modal-focus'
+import type { UserDetailResponse } from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { useEscapeLayer } from '@panel/lib/escape-layers'
+import { formatDate, resolveApiMessage } from '@panel/lib/i18n'
+import { PERMISSIONS, type Permission } from '@panel/lib/types'
+import { X } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+type Detail = UserDetailResponse['user']
+
+/**
+ * Right-hand detail drawer: identity, site-by-site roles, effective permissions
+ * and account actions. Contents reveal in sequence (60 ms apart) as the panel
+ * slides — the same cascade the prototype uses so the panel reads as one motion
+ * rather than five things appearing at once.
+ */
+export function UserDrawer({
+  userId,
+  onClose,
+  onChanged,
+  notify,
+}: {
+  userId: string
+  onClose: () => void
+  onChanged: () => void
+  notify: (message: string, tone?: 'success' | 'error') => void
+}) {
+  const { t, lang } = useApp()
+
+  const [detail, setDetail] = useState<Detail | null>(null)
+  const [sites, setSites] = useState<string[]>([])
+  const [roles, setRoles] = useState<string[]>([])
+  const [canEdit, setCanEdit] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [tempPassword, setTempPassword] = useState<string | null>(null)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const [copied, setCopied] = useState(false)
+
+  const apply = useCallback((data: UserDetailResponse) => {
+    setDetail(data.user)
+    setSites(data.sites)
+    setRoles(data.roles)
+    setCanEdit(data.canEdit)
+  }, [])
+
+  const load = useCallback(async () => {
+    const res = await call<UserDetailResponse>(`/api/users/${userId}`)
+    if (!res.ok) {
+      notify(resolveApiMessage(t, res.messageKey), 'error')
+      onClose()
+      return
+    }
+    apply(res.data)
+  }, [userId, apply, notify, onClose, t])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  /**
+   * Escape chain: this drawer sits below any dialog it opens. The dialogs push
+   * themselves onto the stack above it, so a press closes whichever is on top
+   * and the drawer stays put until it is the topmost layer itself.
+   *
+   * This used to be a `window` listener that re-implemented that ordering by
+   * inspecting the two dialog states. It broke the moment a third dialog was
+   * added to the drawer, because the new one was not in the if-chain.
+   */
+  useEscapeLayer(true, onClose)
+
+  // The drawer declares aria-modal, so it owes the same three things a dialog
+  // does: focus in, focus trapped, focus back on the row that opened it.
+  useModalFocus(panelRef, Boolean(detail))
+
+  const mutate = useCallback(
+    async (path: string, init: { method?: string; body?: unknown }, successMessage?: string) => {
+      setBusy(true)
+      const res = await call<UserDetailResponse>(path, init)
+      setBusy(false)
+
+      if (!res.ok) {
+        notify(resolveApiMessage(t, res.messageKey), 'error')
+        return false
+      }
+      if ('user' in res.data) apply(res.data)
+      if (successMessage) notify(successMessage)
+      onChanged()
+      return true
+    },
+    [apply, notify, onChanged, t],
+  )
+
+  /** Click a site's role badge to walk role → role → no access, as in the design. */
+  const cycleSiteRole = useCallback(
+    async (site: string) => {
+      if (!detail || !canEdit) return
+      const ladder = [...roles, null]
+      const current = detail.siteRoles?.[site] ?? null
+      const next = ladder[(ladder.indexOf(current as string | null) + 1) % ladder.length] ?? null
+
+      await mutate(`/api/users/${userId}/assignments`, {
+        method: 'PUT',
+        body: { siteRoles: { [site]: next } },
+      })
+    },
+    [detail, canEdit, roles, userId, mutate],
+  )
+
+  if (!detail) return null
+
+  const initials = detail.name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0] ?? '')
+    .join('')
+    .toLocaleUpperCase('tr')
+
+  const meta: Array<{ k: string; v: string }> = [
+    { k: t.dwUsername, v: detail.username },
+    { k: t.dwMfaLbl, v: detail.mfa === 'On' ? t.c.mfaOn : t.c.mfaOff },
+    { k: t.dwLastSeen, v: detail.lastSeen ? formatDate(lang, detail.lastSeen) : '—' },
+    { k: t.dwSessions, v: String(detail.activeSessions) },
+    { k: t.dwOrgLbl, v: detail.org === 'external' ? t.orgExternal : t.orgInternal },
+    { k: t.c.colRole, v: String(detail.role) },
+  ]
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-[105] flex justify-end backdrop-blur-[2px]"
+        style={{ background: 'rgba(0,0,0,0.45)', animation: 'dtFade 0.15s ease' }}
+      >
+        <button
+          type="button"
+          aria-label={t.close}
+          onClick={onClose}
+          className="absolute inset-0 cursor-default bg-transparent"
+        />
+
+        <div
+          ref={panelRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="dt-drawer-title"
+          tabIndex={-1}
+          className="relative flex h-full w-[min(400px,100%)] flex-col border-l border-border bg-sidebar shadow-e4 outline-none"
+          style={{ animation: 'dtSlideR 0.24s cubic-bezier(0.16,1,0.3,1)' }}
+        >
+          <header className="flex shrink-0 items-center gap-[11px] border-b border-border px-[18px] py-4">
+            <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[9px] bg-hover text-xs font-semibold text-fg">
+              {initials}
+            </span>
+            <div className="flex min-w-0 flex-1 flex-col gap-px">
+              <span id="dt-drawer-title" className="truncate text-sm font-semibold">
+                {detail.name}
+              </span>
+              <span className="truncate font-mono text-[10px] text-muted-fg">{detail.email}</span>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label={t.close}
+              className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[7px] border border-border bg-transparent text-muted-fg hover:bg-hover hover:text-fg"
+            >
+              <X className="h-[13px] w-[13px]" strokeWidth={2.2} />
+            </button>
+          </header>
+
+          <div className="flex min-h-0 flex-1 flex-col gap-[18px] overflow-y-auto px-[18px] pb-7 pt-4">
+            <Cascade delay={60}>
+              <div className="flex flex-wrap items-center gap-[6px]">
+                <span className="rounded-[5px] border border-border bg-field px-[7px] py-px text-[10.5px] text-fg">
+                  {detail.role}
+                </span>
+                <span
+                  className={cn(
+                    'flex items-center gap-[6px] rounded-[5px] border px-[7px] py-px text-[10.5px]',
+                    detail.status === 'Invited'
+                      ? 'border-brand text-brand-fg'
+                      : detail.status === 'Active'
+                        ? 'border-border text-fg'
+                        : 'border-border text-muted-fg',
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'h-[5px] w-[5px] rounded-full',
+                      detail.status === 'Invited'
+                        ? 'bg-brand'
+                        : detail.status === 'Active'
+                          ? 'bg-ok'
+                          : 'bg-muted-fg',
+                    )}
+                  />
+                  {detail.status === 'Invited'
+                    ? t.invitedLbl
+                    : detail.status === 'Active'
+                      ? t.c.statusActive
+                      : t.c.statusInactive}
+                </span>
+                {detail.isPrimaryAdmin ? (
+                  <span className="rounded-[5px] border border-border bg-field px-[7px] py-px font-mono text-[9px] text-muted-fg">
+                    {(t.dwPrimaryAdmin.split('—')[0] ?? t.dwPrimaryAdmin).trim()}
+                  </span>
+                ) : null}
+              </div>
+            </Cascade>
+
+            <Cascade delay={110}>
+              <div className="grid grid-cols-2 gap-2">
+                {meta.map((row) => (
+                  <div
+                    key={row.k}
+                    className="flex min-w-0 flex-col gap-[2px] rounded-[9px] border border-border-soft bg-surface px-[11px] py-[9px]"
+                  >
+                    <Caps className="font-mono text-[8.5px] tracking-[0.1em] text-muted-fg">
+                      {row.k}
+                    </Caps>
+                    <span className="truncate text-xs text-fg">{row.v}</span>
+                  </div>
+                ))}
+              </div>
+            </Cascade>
+
+            <Cascade delay={160}>
+              <div className="flex flex-col gap-2">
+                <div className="flex items-baseline justify-between gap-[10px]">
+                  <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+                    {t.dwSiteAccess}
+                  </Caps>
+                  {canEdit ? (
+                    <span className="text-[10.5px] text-muted-fg">{t.dwSiteHint}</span>
+                  ) : null}
+                </div>
+                <div className="flex flex-col overflow-hidden rounded-[10px] border border-border bg-surface">
+                  {/* A fresh install, or one where every site is archived, left
+                      an empty bordered box under the heading with no hint that
+                      anything was missing. */}
+                  {sites.length === 0 ? (
+                    <p className="m-0 px-[11px] py-4 text-center text-[11px] leading-[1.5] text-muted-fg text-pretty">
+                      {t.dwNoSites}
+                    </p>
+                  ) : null}
+                  {sites.map((site) => {
+                    const role = detail.siteRoles?.[site] ?? null
+                    return (
+                      <div
+                        key={site}
+                        className="flex min-w-0 items-center justify-between gap-[10px] border-b border-border-soft px-[11px] py-2 last:border-b-0"
+                      >
+                        <span className="min-w-0 truncate text-xs text-fg">{site}</span>
+                        <button
+                          type="button"
+                          disabled={!canEdit || busy}
+                          onClick={() => void cycleSiteRole(site)}
+                          className={cn(
+                            'h-[22px] shrink-0 rounded-[5px] border px-[8px] text-[10.5px]',
+                            role
+                              ? 'border-brand bg-field text-fg'
+                              : 'border-border bg-transparent text-muted-fg',
+                          )}
+                        >
+                          {role ?? t.dwNoAccess}
+                        </button>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            </Cascade>
+
+            <Cascade delay={210}>
+              <div className="flex flex-col gap-2">
+                <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+                  {t.dwPermsLbl}
+                </Caps>
+                <div className="flex flex-wrap gap-[6px]">
+                  {PERMISSIONS.map((perm: Permission) => {
+                    const on = detail.effectivePermissions.includes(perm)
+                    return (
+                      <span
+                        key={perm}
+                        className={cn(
+                          'flex items-center gap-[6px] rounded-[5px] border px-[7px] py-px font-mono text-[10px]',
+                          on
+                            ? 'border-border bg-field text-fg'
+                            : 'border-border-soft text-muted-fg',
+                        )}
+                      >
+                        <span
+                          className={cn(
+                            'h-[5px] w-[5px] rounded-full',
+                            on ? 'bg-brand' : 'bg-input',
+                          )}
+                        />
+                        {perm}
+                      </span>
+                    )
+                  })}
+                </div>
+              </div>
+            </Cascade>
+
+            <Cascade delay={260}>
+              <div className="flex flex-col gap-2">
+                <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+                  {t.dwActions}
+                </Caps>
+
+                {detail.status === 'Invited' && detail.invitation ? (
+                  <>
+                    <Button
+                      variant="secondary"
+                      disabled={!canEdit || busy}
+                      onClick={() =>
+                        void mutate(
+                          `/api/invitations/${detail.invitation!.id}/resend`,
+                          { body: {} },
+                          `${detail.email} ${t.invRenewToast}`,
+                        ).then(load)
+                      }
+                    >
+                      {t.dwResend}
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      disabled={!canEdit || busy}
+                      onClick={() =>
+                        void mutate(
+                          `/api/invitations/${detail.invitation!.id}`,
+                          { method: 'DELETE' },
+                          `${detail.email} ${t.invRevokeToast}`,
+                        ).then(load)
+                      }
+                    >
+                      {t.dwRevokeInvite}
+                    </Button>
+                  </>
+                ) : null}
+
+                <Button
+                  variant="secondary"
+                  disabled={!canEdit || busy}
+                  onClick={async () => {
+                    setBusy(true)
+                    const res = await call<{ temporaryPassword: string }>(
+                      `/api/users/${userId}/temp-password`,
+                      { body: {} },
+                    )
+                    setBusy(false)
+                    if (!res.ok) {
+                      notify(resolveApiMessage(t, res.messageKey), 'error')
+                      return
+                    }
+                    setTempPassword(res.data.temporaryPassword)
+                    notify(`${detail.email} ${t.dwPassToast}`)
+                    onChanged()
+                    void load()
+                  }}
+                >
+                  {t.dwResetPass}
+                </Button>
+
+                <Button
+                  variant="secondary"
+                  disabled={!canEdit || busy || detail.activeSessions === 0}
+                  onClick={() =>
+                    void mutate(
+                      `/api/users/${userId}/revoke-sessions`,
+                      { body: {} },
+                      `${detail.email} ${t.dwSignoutToast}`,
+                    ).then(load)
+                  }
+                >
+                  {t.dwSignout}
+                </Button>
+
+                <Button
+                  variant={detail.status === 'Inactive' ? 'secondary' : 'destructive'}
+                  disabled={!canEdit || busy || detail.isPrimaryAdmin}
+                  onClick={() =>
+                    void mutate(`/api/users/${userId}`, {
+                      method: 'PATCH',
+                      body: { status: detail.status === 'Inactive' ? 'Active' : 'Inactive' },
+                    })
+                  }
+                >
+                  {detail.status === 'Inactive' ? t.dwActivate : t.dwDeactivate}
+                </Button>
+
+                <Button
+                  variant="destructive"
+                  disabled={!canEdit || busy || detail.isPrimaryAdmin}
+                  onClick={() => setConfirmDelete(true)}
+                >
+                  {t.dwDelete}
+                </Button>
+
+                {detail.isPrimaryAdmin ? (
+                  <p className="m-0 text-[11px] leading-[1.5] text-muted-fg text-pretty">
+                    {t.dwPrimaryAdmin}
+                  </p>
+                ) : null}
+              </div>
+            </Cascade>
+          </div>
+        </div>
+      </div>
+
+      {tempPassword ? (
+        <Dialog labelledBy="dt-temp-title" onClose={() => setTempPassword(null)}>
+          <h2 id="dt-temp-title" className="m-0 text-[15px] font-semibold tracking-[-0.01em]">
+            {t.tempPassTitle}
+          </h2>
+          <p className="m-0 text-[12.5px] leading-[1.55] text-muted-fg text-pretty">
+            {t.tempPassLead}
+          </p>
+          <span className="select-all break-all rounded-[8px] border border-border bg-field px-3 py-2 font-mono text-[13px] tracking-[0.04em] text-fg">
+            {tempPassword}
+          </span>
+          <div className="flex gap-[9px]">
+            <Button
+              onClick={async () => {
+                try {
+                  await navigator.clipboard.writeText(tempPassword)
+                  setCopied(true)
+                  setTimeout(() => setCopied(false), 1600)
+                } catch {
+                  /* clipboard blocked — the value is selectable on screen */
+                }
+              }}
+            >
+              {copied ? t.copied : t.copy}
+            </Button>
+            <Button variant="secondary" onClick={() => setTempPassword(null)}>
+              {t.close}
+            </Button>
+          </div>
+        </Dialog>
+      ) : null}
+
+      {confirmDelete ? (
+        <Dialog
+          role="alertdialog"
+          labelledBy="dt-del-title"
+          onClose={() => setConfirmDelete(false)}
+        >
+          <h2 id="dt-del-title" className="m-0 text-[15px] font-semibold tracking-[-0.01em]">
+            {t.confirmDeleteTitle}
+          </h2>
+          <p className="m-0 text-[12.5px] leading-[1.55] text-muted-fg text-pretty">
+            {t.confirmDeleteLead}
+          </p>
+          <span className="font-mono text-[11px] text-fg">{detail.email}</span>
+          <div className="flex flex-col gap-[9px]">
+            <Button
+              variant="destructive"
+              disabled={busy}
+              onClick={async () => {
+                setBusy(true)
+                const res = await call(`/api/users/${userId}`, { method: 'DELETE' })
+                setBusy(false)
+                if (!res.ok) {
+                  notify(resolveApiMessage(t, res.messageKey), 'error')
+                  return
+                }
+                setConfirmDelete(false)
+                onChanged()
+                onClose()
+              }}
+            >
+              {t.confirmDelete}
+            </Button>
+            <Button variant="secondary" onClick={() => setConfirmDelete(false)}>
+              {t.cancel}
+            </Button>
+          </div>
+        </Dialog>
+      ) : null}
+    </>
+  )
+}
+
+/** One staged reveal step of the drawer cascade. */
+function Cascade({ delay, children }: { delay: number; children: React.ReactNode }) {
+  return (
+    <div style={{ animation: `dtFade 0.3s ease backwards`, animationDelay: `${delay}ms` }}>
+      {children}
+    </div>
+  )
+}
diff --git a/apps/editor/panel/components/console/users-tab.tsx b/apps/editor/panel/components/console/users-tab.tsx
new file mode 100644
index 000000000..0b72a00a6
--- /dev/null
+++ b/apps/editor/panel/components/console/users-tab.tsx
@@ -0,0 +1,888 @@
+'use client'
+
+import { useApp } from '@panel/components/app-providers'
+import { AssignDialog } from '@panel/components/console/assign-dialog'
+import { InviteForm } from '@panel/components/console/invite-form'
+import { UserDrawer } from '@panel/components/console/user-drawer'
+import { Caps } from '@panel/components/ui/caps'
+import { Button, SegBar, SegButton } from '@panel/components/ui/controls'
+import { Dialog, Toast } from '@panel/components/ui/feedback'
+import type {
+  BulkUsersResponse,
+  PendingRequestsResponse,
+  UsersListResponse,
+} from '@panel/lib/api-contract'
+import { call } from '@panel/lib/client-api'
+import { cn } from '@panel/lib/cn'
+import { useBreakpoint } from '@panel/lib/hooks/use-breakpoint'
+import { type Dictionary, format, resolveApiMessage } from '@panel/lib/i18n'
+import type { AccessRequest, UserV3 } from '@panel/lib/types'
+import {
+  AlertTriangle,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Search,
+} from 'lucide-react'
+import { useSearchParams } from 'next/navigation'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+type SortKey = 'name' | 'email' | 'username' | 'role' | 'status'
+type ListState = 'loading' | 'ready' | 'error'
+
+/** Desktop grid: name, email, username, role, 2FA, status, actions. */
+const COLS = 'minmax(150px,1.4fr) minmax(190px,1.7fr) minmax(104px,0.9fr) 96px 44px 92px 150px'
+
+/** The same grid with a leading checkbox column, used when selection is on. */
+const COLS_SELECTABLE = `26px ${COLS}`
+
+type BulkAction = 'roleViewer' | 'revokeSessions' | 'deactivate' | 'delete'
+
+export function UsersTab() {
+  const { t, lang } = useApp()
+  const { isMobile } = useBreakpoint()
+
+  const [state, setState] = useState<ListState>('loading')
+  const [data, setData] = useState<UsersListResponse | null>(null)
+  const [requests, setRequests] = useState<AccessRequest[]>([])
+  const [errorText, setErrorText] = useState<string | null>(null)
+
+  const [roleFilter, setRoleFilter] = useState('All')
+  const [sort, setSort] = useState<SortKey>('name')
+  const [direction, setDirection] = useState<'asc' | 'desc'>('asc')
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+
+  /**
+   * The command palette lands here with what it matched: `?q=` seeds the search
+   * box, `?new=1` opens the invite form. Read once — after that the tab owns its
+   * own state, or typing in the box would fight the URL on every render.
+   */
+  const params = useSearchParams()
+  const [search, setSearch] = useState(() => params.get('q') ?? '')
+  const [inviting, setInviting] = useState(() => params.get('new') === '1')
+  const [drawerId, setDrawerId] = useState<string | null>(null)
+  const [approving, setApproving] = useState<AccessRequest | null>(null)
+  const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' } | null>(null)
+
+  /**
+   * Selection is scoped to the page you can see.
+   *
+   * Carrying it across pages would let one click act on accounts that scrolled
+   * out of view several filter changes ago — the count in the confirmation would
+   * be honest and still be a surprise. Any change to the query clears it.
+   */
+  const [selected, setSelected] = useState<string[]>([])
+  const [bulk, setBulk] = useState<BulkAction | null>(null)
+  const [confirmCount, setConfirmCount] = useState('')
+  const [bulkBusy, setBulkBusy] = useState(false)
+
+  const notify = useCallback((message: string, tone: 'success' | 'error' = 'success') => {
+    setToast({ message, tone })
+    setTimeout(() => setToast(null), 2600)
+  }, [])
+
+  const load = useCallback(async () => {
+    setState((prev) => (prev === 'ready' ? 'ready' : 'loading'))
+    const params = new URLSearchParams({
+      search,
+      role: roleFilter,
+      sort,
+      direction,
+      page: String(page),
+      pageSize: String(pageSize),
+      lang,
+    })
+    const res = await call<UsersListResponse>(`/api/users?${params}`)
+    if (!res.ok) {
+      setErrorText(resolveApiMessage(t, res.messageKey))
+      setState('error')
+      return
+    }
+    setData(res.data)
+    setState('ready')
+  }, [search, roleFilter, sort, direction, page, pageSize, lang, t])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  useEffect(() => {
+    void call<PendingRequestsResponse>('/api/requests').then((res) => {
+      if (res.ok) setRequests(res.data.requests)
+    })
+  }, [])
+
+  // Filter and sort changes reset to page 1 — otherwise a narrowed result set
+  // leaves you stranded on a page that no longer exists.
+  useEffect(() => {
+    setPage(1)
+  }, [search, roleFilter, sort, direction, pageSize])
+
+  // Anything that changes which rows are on screen drops the selection.
+  useEffect(() => {
+    setSelected([])
+  }, [search, roleFilter, sort, direction, page, pageSize])
+
+  const users = data?.users ?? []
+  const canEdit = data?.canEdit ?? false
+  const total = data?.total ?? 0
+  const pageCount = Math.max(1, Math.ceil(total / pageSize))
+
+  const selectable = canEdit && state === 'ready' && users.length > 0
+  const selectedOnPage = useMemo(
+    () => selected.filter((id) => users.some((u) => u.id === id)),
+    [selected, users],
+  )
+  const allSelected = users.length > 0 && selectedOnPage.length === users.length
+  const cols = selectable ? COLS_SELECTABLE : COLS
+
+  const toggleOne = useCallback((id: string) => {
+    setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]))
+  }, [])
+
+  const toggleAll = useCallback(() => {
+    setSelected((prev) => (prev.length === users.length ? [] : users.map((u) => u.id)))
+  }, [users])
+
+  const runBulk = useCallback(async () => {
+    if (!bulk) return
+    setBulkBusy(true)
+    const res = await call<BulkUsersResponse>('/api/users/bulk', {
+      body: { action: bulk, ids: selectedOnPage },
+    })
+    setBulkBusy(false)
+    setBulk(null)
+    setConfirmCount('')
+
+    if (!res.ok) {
+      notify(resolveApiMessage(t, res.messageKey), 'error')
+      return
+    }
+
+    setSelected([])
+    void load()
+
+    // The server decides what it actually touched, and the toast reports that
+    // rather than the number the user selected. Reporting the selection back
+    // would claim work the primary-admin and self rules refused to do.
+    const { applied, skipped } = res.data
+    if (applied === 0 && skipped.length > 0) {
+      notify(t.bulkNothing, 'error')
+      return
+    }
+    const reasons = new Set(skipped.map((s) => reasonLabel(t, s.reason)))
+    const detail = skipped.length
+      ? ` · ${format(t.bulkSkipped, { count: skipped.length })} (${[...reasons].join(', ')})`
+      : ''
+    notify(`${format(t.bulkApplied, { count: applied })}${detail}`)
+  }, [bulk, selectedOnPage, notify, t, load])
+
+  const countLabel = useMemo(() => {
+    if (state === 'loading') return `${t.c.search}…`
+    if (state === 'error') return t.loadFailedTitle
+    const parts = [`${total} ${t.c.of} ${data?.totalUnfiltered ?? 0} ${t.c.accounts}`]
+    if (data?.without2fa) parts.push(`${data.without2fa} ${t.c.without2fa}`)
+    return parts.join(' · ')
+  }, [state, total, data, t])
+
+  const toggleSort = (key: SortKey) => {
+    if (sort === key) setDirection((d) => (d === 'asc' ? 'desc' : 'asc'))
+    else {
+      setSort(key)
+      setDirection('asc')
+    }
+  }
+
+  const headers: Array<{ key: SortKey | null; label: string }> = [
+    { key: 'name', label: t.c.colUser },
+    { key: 'email', label: t.c.colEmail },
+    { key: 'username', label: t.c.colUsername },
+    { key: 'role', label: t.c.colRole },
+    { key: null, label: t.c.col2fa },
+    { key: 'status', label: t.c.colStatus },
+    { key: null, label: t.colInvite },
+  ]
+
+  const decideRequest = useCallback(
+    async (request: AccessRequest, decision: 'reject') => {
+      const res = await call(`/api/requests/${request.id}/${decision}`, { body: {} })
+      if (!res.ok) {
+        notify(resolveApiMessage(t, res.messageKey), 'error')
+        return
+      }
+      setRequests((prev) => prev.filter((r) => r.id !== request.id))
+    },
+    [notify, t],
+  )
+
+  return (
+    <section className="flex min-w-0 flex-col gap-[14px]" style={{ animation: 'dtFade 0.2s ease' }}>
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div className="flex flex-col gap-[2px]">
+          <h2 className="m-0 text-[15.5px] font-semibold tracking-[-0.01em]">{t.c.userAccounts}</h2>
+          <p className="m-0 text-xs text-muted-fg">{countLabel}</p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-[7px]">
+          <div className="relative flex items-center">
+            <Search
+              className="pointer-events-none absolute left-[9px] h-3 w-3 text-muted-fg"
+              strokeWidth={2.2}
+            />
+            <input
+              type="text"
+              placeholder={t.c.userSearchPh}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="h-[30px] w-[196px] min-w-0 rounded-[8px] border border-input bg-field pl-[26px] pr-[10px] text-xs text-fg outline-none focus:border-ring focus:shadow-[0_0_0_3px_var(--dt-hover)]"
+            />
+          </div>
+
+          <SegBar>
+            {['All', ...(data?.roles ?? [])].map((role) => (
+              <SegButton
+                key={role}
+                active={roleFilter === role}
+                onClick={() => setRoleFilter(role)}
+              >
+                {role === 'All' ? t.c.filterAll : role}
+              </SegButton>
+            ))}
+          </SegBar>
+
+          <button
+            type="button"
+            disabled={!canEdit}
+            onClick={() => setInviting((v) => !v)}
+            className="h-[30px] shrink-0 rounded-[8px] bg-primary px-[13px] text-xs font-semibold text-primary-fg shadow-e2 hover:opacity-92"
+          >
+            {inviting ? t.c.closeForm : t.c.addUser}
+          </button>
+        </div>
+      </header>
+
+      {state === 'ready' && !canEdit ? (
+        <div className="flex min-w-0 items-center gap-[9px] rounded-[10px] border border-border bg-surface px-3 py-2">
+          <span className="h-[5px] w-[5px] shrink-0 rounded-full bg-destructive" />
+          <span className="shrink-0 text-[11.5px] font-semibold">{t.c.readOnly}</span>
+          <span className="min-w-0 text-[11.5px] text-muted-fg text-pretty">
+            {t.c.readOnlyLead}
+          </span>
+        </div>
+      ) : null}
+
+      {requests.length > 0 ? (
+        <div className="min-w-0 overflow-hidden rounded-[12px] border border-brand bg-surface">
+          <div className="flex items-center gap-2 border-b border-border-soft px-3 py-2">
+            <span
+              className="h-[5px] w-[5px] shrink-0 rounded-full bg-brand"
+              style={{ animation: 'dtPulse 2s ease infinite' }}
+            />
+            <Caps className="font-mono text-[9px] tracking-[0.12em] text-muted-fg">
+              {`${requests.length} ${t.c.requestsAwaiting}`}
+            </Caps>
+          </div>
+          {requests.map((request) => (
+            <div
+              key={request.id}
+              className="flex min-w-0 flex-wrap items-center gap-[11px] border-b border-border-soft px-3 py-[10px] last:border-b-0"
+            >
+              <div className="flex min-w-[150px] flex-1 flex-col gap-[2px]">
+                <span className="truncate text-[12.5px] font-medium">{request.fullName}</span>
+                <span className="truncate font-mono text-[10px] text-muted-fg">
+                  {request.email} · {request.department} · {request.requestedRole}
+                </span>
+              </div>
+              <span className="min-w-[140px] flex-1 text-[11.5px] text-muted-fg text-pretty">
+                {request.note ?? ''}
+              </span>
+              <div className="flex shrink-0 items-center gap-[6px]">
+                <button
+                  type="button"
+                  disabled={!canEdit}
+                  onClick={() => setApproving(request)}
+                  className="h-[26px] rounded-[6px] bg-primary px-[10px] text-[11px] font-semibold text-primary-fg hover:opacity-92"
+                >
+                  {t.c.approveAs} {request.requestedRole}
+                </button>
+                <button
+                  type="button"
+                  disabled={!canEdit}
+                  onClick={() => void decideRequest(request, 'reject')}
+                  className="h-[26px] rounded-[6px] border border-destructive bg-transparent px-[10px] text-[11px] text-destructive hover:bg-hover"
+                >
+                  {t.c.reject}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {inviting ? (
+        <InviteForm
+          roles={data?.roles ?? []}
+          sites={data?.sites ?? []}
+          onCancel={() => setInviting(false)}
+          onCreated={(user) => {
+            setInviting(false)
+            notify(`${user.email} ${t.invitedToast}`)
+            void load()
+          }}
+          onError={(message) => notify(message, 'error')}
+        />
+      ) : null}
+
+      {selectedOnPage.length > 0 ? (
+        <div
+          role="toolbar"
+          aria-label={t.bulkClear}
+          className="flex min-w-0 flex-wrap items-center gap-2 rounded-[10px] border border-brand bg-surface px-3 py-[7px]"
+          style={{ animation: 'dtDrop 0.14s ease' }}
+        >
+          <span className="shrink-0 text-[11.5px] font-semibold">
+            {format(t.bulkSelected, { count: selectedOnPage.length, total: users.length })}
+          </span>
+          <span className="h-[14px] w-px shrink-0 bg-border" />
+
+          {(
+            [
+              ['roleViewer', t.bulkRoleViewer, false],
+              ['revokeSessions', t.bulkRevoke, false],
+              ['deactivate', t.bulkDeactivate, false],
+              ['delete', t.bulkDelete, true],
+            ] as Array<[BulkAction, string, boolean]>
+          ).map(([action, label, danger]) => (
+            <button
+              key={action}
+              type="button"
+              onClick={() => {
+                setBulk(action)
+                setConfirmCount('')
+              }}
+              className={cn(
+                'h-[26px] shrink-0 rounded-[6px] border bg-field px-[10px] text-[11.5px] font-medium hover:bg-hover',
+                danger ? 'border-destructive text-destructive' : 'border-border text-fg',
+              )}
+            >
+              {label}
+            </button>
+          ))}
+
+          <span className="min-w-0 flex-1" />
+          <button
+            type="button"
+            onClick={() => setSelected([])}
+            className="h-[26px] shrink-0 rounded-[6px] bg-transparent px-[9px] text-[11.5px] text-muted-fg hover:text-fg"
+          >
+            {t.bulkClear}
+          </button>
+        </div>
+      ) : null}
+
+      <div
+        className={cn(
+          'min-w-0 rounded-[12px] border border-border',
+          isMobile ? 'overflow-hidden' : 'overflow-x-auto',
+        )}
+      >
+        {!isMobile ? (
+          <div
+            className="grid h-[31px] items-center gap-[10px] border-b border-border bg-surface px-3 font-mono text-[8.5px] tracking-[0.12em] text-muted-fg"
+            style={{ gridTemplateColumns: cols, minWidth: selectable ? 926 : 900 }}
+          >
+            {selectable ? (
+              <input
+                type="checkbox"
+                checked={allSelected}
+                // Some-but-not-all reads as a dash rather than a tick, so the
+                // header never claims a state the page is not in.
+                ref={(el) => {
+                  if (el) el.indeterminate = selectedOnPage.length > 0 && !allSelected
+                }}
+                onChange={toggleAll}
+                aria-label={t.bulkSelectAll}
+                className="h-[13px] w-[13px] cursor-pointer"
+                style={{ accentColor: 'var(--dt-brand)' }}
+              />
+            ) : null}
+            {headers.map((header, index) => (
+              <button
+                key={`${header.label}-${index}`}
+                type="button"
+                disabled={header.key === null}
+                onClick={() => header.key && toggleSort(header.key)}
+                className="flex items-center gap-1 bg-transparent text-left disabled:opacity-100"
+              >
+                <Caps>{header.label}</Caps>
+                {header.key && sort === header.key ? (
+                  direction === 'asc' ? (
+                    <ChevronUp
+                      className="h-[10px] w-[10px] shrink-0 text-brand-fg"
+                      strokeWidth={3}
+                    />
+                  ) : (
+                    <ChevronDown
+                      className="h-[10px] w-[10px] shrink-0 text-brand-fg"
+                      strokeWidth={3}
+                    />
+                  )
+                ) : null}
+              </button>
+            ))}
+          </div>
+        ) : null}
+
+        {state === 'loading' ? <SkeletonRows isMobile={isMobile} /> : null}
+
+        {state === 'error' ? (
+          <div className="flex flex-col items-center gap-2 px-4 py-10">
+            <AlertTriangle className="h-[22px] w-[22px] text-destructive" strokeWidth={1.7} />
+            <span className="text-[12.5px] font-semibold">{t.loadFailedTitle}</span>
+            <span className="max-w-[340px] text-center text-[11.5px] text-muted-fg text-pretty">
+              {errorText ?? t.loadFailedLead}
+            </span>
+            <button
+              type="button"
+              onClick={() => void load()}
+              className="mt-1 h-7 rounded-[8px] border border-input bg-field px-3 text-[11.5px] font-medium text-fg hover:bg-hover"
+            >
+              {t.retry}
+            </button>
+          </div>
+        ) : null}
+
+        {state === 'ready' && users.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 px-4 py-10">
+            <Search className="h-[22px] w-[22px] text-muted-fg" strokeWidth={1.6} />
+            <span className="text-[12.5px] font-semibold">{t.noUsersMatch}</span>
+            <span className="text-center text-[11.5px] text-muted-fg">{t.emptyHint}</span>
+            <button
+              type="button"
+              onClick={() => {
+                setSearch('')
+                setRoleFilter('All')
+              }}
+              className="mt-1 h-7 rounded-[8px] border border-input bg-field px-3 text-[11.5px] font-medium text-fg hover:bg-hover"
+            >
+              {t.clearFilters}
+            </button>
+          </div>
+        ) : null}
+
+        {state === 'ready' &&
+          users.map((user) =>
+            isMobile ? (
+              <UserCard
+                key={user.id}
+                user={user}
+                onOpen={() => setDrawerId(user.id)}
+                selectable={selectable}
+                checked={selected.includes(user.id)}
+                onToggle={() => toggleOne(user.id)}
+              />
+            ) : (
+              <UserRow
+                key={user.id}
+                user={user}
+                onOpen={() => setDrawerId(user.id)}
+                selectable={selectable}
+                checked={selected.includes(user.id)}
+                onToggle={() => toggleOne(user.id)}
+              />
+            ),
+          )}
+
+        {state === 'ready' && users.length > 0 ? (
+          <div className="flex flex-wrap items-center gap-3 border-t border-border px-3 py-2">
+            <Caps className="whitespace-nowrap font-mono text-[9.5px] tracking-[0.08em] text-muted-fg">
+              {`${(page - 1) * pageSize + 1}–${Math.min(page * pageSize, total)} ${t.c.of} ${total} ${t.c.accounts}`}
+            </Caps>
+            <span className="min-w-0 flex-1" />
+
+            <div className="flex shrink-0 items-center gap-[6px]">
+              <Caps className="font-mono text-[9px] tracking-[0.1em] text-muted-fg">
+                {t.c.rows}
+              </Caps>
+              <SegBar>
+                {[10, 20, 50].map((size) => (
+                  <SegButton
+                    key={size}
+                    active={pageSize === size}
+                    onClick={() => setPageSize(size)}
+                  >
+                    {String(size)}
+                  </SegButton>
+                ))}
+              </SegBar>
+            </div>
+
+            <div className="flex shrink-0 items-center gap-[6px]">
+              <button
+                type="button"
+                disabled={page <= 1}
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                className="flex h-[26px] w-[26px] items-center justify-center rounded-[7px] border border-border bg-field text-fg hover:bg-hover"
+                aria-label={t.a11yPrevPage}
+              >
+                <ChevronLeft className="h-3 w-3" strokeWidth={2.5} />
+              </button>
+              <span className="whitespace-nowrap font-mono text-[10.5px] text-fg">
+                {page} / {pageCount}
+              </span>
+              <button
+                type="button"
+                disabled={page >= pageCount}
+                onClick={() => setPage((p) => Math.min(pageCount, p + 1))}
+                className="flex h-[26px] w-[26px] items-center justify-center rounded-[7px] border border-border bg-field text-fg hover:bg-hover"
+                aria-label={t.a11yNextPage}
+              >
+                <ChevronRight className="h-3 w-3" strokeWidth={2.5} />
+              </button>
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      {drawerId ? (
+        <UserDrawer
+          userId={drawerId}
+          onClose={() => setDrawerId(null)}
+          onChanged={() => void load()}
+          notify={notify}
+        />
+      ) : null}
+
+      {approving ? (
+        <AssignDialog
+          request={approving}
+          roles={data?.roles ?? []}
+          sites={data?.sites ?? []}
+          onCancel={() => setApproving(null)}
+          onDone={(email, mailDelivered) => {
+            setRequests((prev) => prev.filter((r) => r.id !== approving.id))
+            setApproving(null)
+            // The account exists either way; saying "invited" when the message
+            // never left would leave an administrator waiting for a reply that
+            // cannot come.
+            notify(
+              mailDelivered ? `${email} ${t.invitedToast}` : `${email} — ${t.inviteMailFailed}`,
+              mailDelivered ? 'success' : 'error',
+            )
+            void load()
+          }}
+          onError={(message) => notify(message, 'error')}
+        />
+      ) : null}
+
+      {bulk ? (
+        <Dialog
+          role="alertdialog"
+          labelledBy="dt-bulk-title"
+          width={396}
+          onClose={bulkBusy ? undefined : () => setBulk(null)}
+        >
+          <h2 id="dt-bulk-title" className="m-0 text-[15px] font-semibold tracking-[-0.01em]">
+            {format(t.bulkConfirmTitle, { count: selectedOnPage.length })}
+          </h2>
+          <p className="m-0 text-[12.5px] leading-[1.55] text-muted-fg text-pretty">
+            {bulk === 'roleViewer'
+              ? t.bulkRoleViewerLead
+              : bulk === 'revokeSessions'
+                ? t.bulkRevokeLead
+                : bulk === 'deactivate'
+                  ? t.bulkDeactivateLead
+                  : t.bulkDeleteLead}
+          </p>
+          <p className="m-0 text-[11.5px] leading-[1.5] text-muted-fg text-pretty">
+            {t.bulkSkipNote}
+          </p>
+
+          {/* Delete is the only irreversible one, so it asks for the count to be
+              typed. A number rather than a word: it is the same in both
+              languages, and it forces the user to read how many rows they
+              picked before confirming. */}
+          {bulk === 'delete' ? (
+            <label className="flex flex-col gap-[6px]">
+              <span className="text-[11.5px] text-muted-fg">
+                {format(t.bulkTypeCount, { count: selectedOnPage.length })}
+              </span>
+              <input
+                type="text"
+                inputMode="numeric"
+                value={confirmCount}
+                onChange={(e) => setConfirmCount(e.target.value)}
+                className="h-[34px] rounded-[8px] border border-input bg-field px-[10px] font-mono text-[13px] text-fg outline-none focus:border-ring"
+              />
+            </label>
+          ) : null}
+
+          <div className="flex flex-col gap-[9px]">
+            <Button
+              variant={bulk === 'delete' || bulk === 'deactivate' ? 'destructive' : 'primary'}
+              disabled={
+                bulkBusy ||
+                (bulk === 'delete' && confirmCount.trim() !== String(selectedOnPage.length))
+              }
+              onClick={() => void runBulk()}
+            >
+              {bulk === 'roleViewer'
+                ? t.bulkRoleViewer
+                : bulk === 'revokeSessions'
+                  ? t.bulkRevoke
+                  : bulk === 'deactivate'
+                    ? t.bulkDeactivate
+                    : t.bulkDelete}
+            </Button>
+            <Button variant="secondary" disabled={bulkBusy} onClick={() => setBulk(null)}>
+              {t.cancel}
+            </Button>
+          </div>
+        </Dialog>
+      ) : null}
+
+      {toast ? <Toast message={toast.message} tone={toast.tone} /> : null}
+    </section>
+  )
+}
+
+function initialsOf(name: string): string {
+  return name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0] ?? '')
+    .join('')
+    .toLocaleUpperCase('tr')
+}
+
+function UserRow({
+  user,
+  onOpen,
+  selectable,
+  checked,
+  onToggle,
+}: {
+  user: UserV3
+  onOpen: () => void
+  selectable: boolean
+  checked: boolean
+  onToggle: () => void
+}) {
+  const { t } = useApp()
+
+  return (
+    <div
+      className={cn(
+        'grid items-center gap-[10px] border-b border-border-soft px-3 py-[9px] last:border-b-0',
+        checked && 'bg-hover',
+      )}
+      style={{
+        gridTemplateColumns: selectable ? COLS_SELECTABLE : COLS,
+        minWidth: selectable ? 926 : 900,
+      }}
+    >
+      {selectable ? (
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={onToggle}
+          aria-label={format(t.bulkSelectOne, { name: user.name })}
+          className="h-[13px] w-[13px] cursor-pointer"
+          style={{ accentColor: 'var(--dt-brand)' }}
+        />
+      ) : null}
+      <button
+        type="button"
+        onClick={onOpen}
+        title={t.a11yUserDetail}
+        className="flex min-w-0 items-center gap-2 bg-transparent text-left hover:opacity-75"
+      >
+        <span className="flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-[6px] bg-hover text-[9px] font-semibold text-fg">
+          {initialsOf(user.name)}
+        </span>
+        <span className="truncate text-[12.5px] font-medium underline decoration-transparent underline-offset-[3px]">
+          {user.name}
+        </span>
+        {user.org === 'external' ? (
+          <Caps className="shrink-0 rounded-[4px] border border-border bg-field px-[5px] py-px font-mono text-[8px] tracking-[0.1em] text-muted-fg">
+            {t.orgExternal.split(' ')[0] ?? t.orgExternal}
+          </Caps>
+        ) : null}
+      </button>
+
+      <span className="truncate font-mono text-[11px] text-muted-fg">{user.email}</span>
+      <span className="truncate font-mono text-[11px] text-muted-fg">{user.username}</span>
+      <span className="truncate text-[11.5px]">{user.role}</span>
+      <span
+        className={cn('font-mono text-[10px]', user.mfa === 'On' ? 'text-fg' : 'text-muted-fg')}
+      >
+        {user.mfa === 'On' ? t.c.mfaOn : t.c.mfaOff}
+      </span>
+      <StatusBadge user={user} />
+      <InviteBadge user={user} />
+    </div>
+  )
+}
+
+/** Below 700 px the row becomes a labelled card — values never read unlabelled. */
+function UserCard({
+  user,
+  onOpen,
+  selectable,
+  checked,
+  onToggle,
+}: {
+  user: UserV3
+  onOpen: () => void
+  selectable: boolean
+  checked: boolean
+  onToggle: () => void
+}) {
+  const { t } = useApp()
+
+  return (
+    // The card used to be one big <button>. A checkbox cannot live inside a
+    // button — clicking it would open the drawer — so the row is a flex
+    // container now and only the text half is the button. Selection works the
+    // same on a phone as it does on a desktop.
+    <div
+      className={cn(
+        'flex items-start gap-2 border-b border-border-soft px-3 py-3 last:border-b-0',
+        checked && 'bg-hover',
+      )}
+    >
+      {selectable ? (
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={onToggle}
+          aria-label={format(t.bulkSelectOne, { name: user.name })}
+          // 20 px on touch: the 13 px desktop box is under the minimum target.
+          className="mt-[3px] h-5 w-5 shrink-0 cursor-pointer"
+          style={{ accentColor: 'var(--dt-brand)' }}
+        />
+      ) : null}
+      <button
+        type="button"
+        onClick={onOpen}
+        className="flex min-w-0 flex-1 flex-col gap-2 bg-transparent text-left"
+      >
+        <div className="flex items-center gap-2">
+          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] bg-hover text-[10px] font-semibold text-fg">
+            {initialsOf(user.name)}
+          </span>
+          <span className="min-w-0 flex-1 truncate text-sm font-medium">{user.name}</span>
+          <StatusBadge user={user} />
+        </div>
+        <span className="w-full truncate font-mono text-[11px] text-muted-fg">{user.email}</span>
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-muted-fg">
+          <span>
+            {t.c.colUsername} <span className="font-mono text-fg">{user.username}</span>
+          </span>
+          <span>
+            {t.c.colRole} <span className="text-fg">{user.role}</span>
+          </span>
+          <span>
+            {t.c.col2fa}{' '}
+            <span className="text-fg">{user.mfa === 'On' ? t.c.mfaOn : t.c.mfaOff}</span>
+          </span>
+        </div>
+      </button>
+    </div>
+  )
+}
+
+/** Why the server left an account alone, in the reader's language. */
+function reasonLabel(
+  t: Dictionary,
+  reason: BulkUsersResponse['skipped'][number]['reason'],
+): string {
+  switch (reason) {
+    case 'primaryAdmin':
+      return t.bulkReasonPrimaryAdmin
+    case 'self':
+      return t.bulkReasonSelf
+    case 'notFound':
+      return t.bulkReasonNotFound
+    case 'noop':
+      return t.bulkReasonNoop
+  }
+}
+
+function StatusBadge({ user }: { user: UserV3 }) {
+  const { t } = useApp()
+  const label =
+    user.status === 'Invited'
+      ? t.invitedLbl
+      : user.status === 'Active'
+        ? t.c.statusActive
+        : t.c.statusInactive
+
+  return (
+    <span
+      className={cn(
+        'flex w-fit shrink-0 items-center gap-[6px] rounded-[5px] border px-[6px] py-px text-[10.5px]',
+        user.status === 'Invited'
+          ? 'border-brand text-brand-fg'
+          : user.status === 'Active'
+            ? 'border-border text-fg'
+            : 'border-border text-muted-fg',
+      )}
+    >
+      <span
+        className={cn(
+          'h-[5px] w-[5px] rounded-full',
+          user.status === 'Invited'
+            ? 'bg-brand'
+            : user.status === 'Active'
+              ? 'bg-ok'
+              : 'bg-muted-fg',
+        )}
+        style={user.status === 'Active' ? { animation: 'dtPulse 2s ease infinite' } : undefined}
+      />
+      {label}
+    </span>
+  )
+}
+
+/** Days-left badge on an invited row, so an expired invite is visible in the list. */
+function InviteBadge({ user }: { user: UserV3 }) {
+  const { t } = useApp()
+  if (user.status !== 'Invited' || !user.invitation) return <span />
+
+  const days = Math.max(
+    0,
+    Math.ceil((new Date(user.invitation.expiresAt).getTime() - Date.now()) / 86_400_000),
+  )
+  const expired = user.invitation.state === 'expired'
+
+  return (
+    <span className={cn('font-mono text-[10px]', expired ? 'text-destructive' : 'text-muted-fg')}>
+      {expired ? t.invExpired : `${days} ${t.invLeftFmt}`}
+    </span>
+  )
+}
+
+function SkeletonRows({ isMobile }: { isMobile: boolean }) {
+  return (
+    <div className="flex flex-col">
+      {Array.from({ length: 6 }, (_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-4 border-b border-border-soft px-3"
+          style={{ height: isMobile ? 64 : 44 }}
+        >
+          {[140, 200, 90].map((width) => (
+            <span
+              key={width}
+              className="h-[9px] rounded bg-hover"
+              style={{ width, animation: 'dtShimmer 1.4s ease infinite' }}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/editor/panel/components/error-reporter.tsx b/apps/editor/panel/components/error-reporter.tsx
new file mode 100644
index 000000000..9abc63926
--- /dev/null
+++ b/apps/editor/panel/components/error-reporter.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import { useEffect } from 'react'
+
+/**
+ * Browser error catcher. `window.onerror` plus unhandled promise rejections go
+ * to /api/telemetry, which records them against actor_label 'browser'.
+ *
+ * Two guards, both learned from the old panel:
+ *
+ * - 5 s suppression per identical message. A render loop throwing the same
+ *   error 60 times a second would otherwise write 60 rows a second.
+ * - `keepalive` on the POST, so an error thrown during navigation still gets
+ *   reported instead of being cancelled with the page.
+ *
+ * It reports and does nothing else — no swallowing, no re-throwing. The console
+ * still shows the error to whoever has devtools open.
+ */
+const SUPPRESS_MS = 5000
+const recent = new Map<string, number>()
+
+function shouldReport(key: string): boolean {
+  const now = Date.now()
+  const last = recent.get(key)
+  if (last !== undefined && now - last < SUPPRESS_MS) return false
+
+  recent.set(key, now)
+  // The map is bounded so a page throwing unique messages cannot grow it forever.
+  if (recent.size > 50) {
+    for (const [entry, at] of recent) {
+      if (now - at > SUPPRESS_MS) recent.delete(entry)
+    }
+  }
+  return true
+}
+
+function report(payload: Record<string, unknown>): void {
+  try {
+    void fetch('/api/telemetry', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+      credentials: 'same-origin',
+      keepalive: true,
+    }).catch(() => {
+      /* the sink being down must never itself throw */
+    })
+  } catch {
+    /* ignore */
+  }
+}
+
+export function ErrorReporter() {
+  useEffect(() => {
+    const onError = (event: ErrorEvent) => {
+      // A failed resource load fires an error event with no message on the
+      // element, not on window — not a JS error, and not worth a row.
+      if (!event.message && !event.error) return
+      if (!shouldReport(event.message)) return
+
+      report({
+        message: event.message || 'Unknown error',
+        source: event.filename || undefined,
+        line: Number.isFinite(event.lineno) ? event.lineno : undefined,
+        column: Number.isFinite(event.colno) ? event.colno : undefined,
+        stack: event.error instanceof Error ? event.error.stack : undefined,
+      })
+    }
+
+    const onRejection = (event: PromiseRejectionEvent) => {
+      const reason = event.reason
+      const message =
+        reason instanceof Error
+          ? reason.message
+          : typeof reason === 'string'
+            ? reason
+            : 'Unhandled rejection'
+      if (!shouldReport(message)) return
+
+      report({
+        message: `Unhandled rejection: ${message}`,
+        stack: reason instanceof Error ? reason.stack : undefined,
+      })
+    }
+
+    window.addEventListener('error', onError)
+    window.addEventListener('unhandledrejection', onRejection)
+
+    return () => {
+      window.removeEventListener('error', onError)
+      window.removeEventListener('unhandledrejection', onRejection)
+    }
+  }, [])
+
+  return null
+}
diff --git a/apps/editor/panel/components/ui/backdrop.tsx b/apps/editor/panel/components/ui/backdrop.tsx
new file mode 100644
index 000000000..7fa68df6a
--- /dev/null
+++ b/apps/editor/panel/components/ui/backdrop.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import { cn } from '@panel/lib/cn';
+
+/**
+ * The signature 3D perspective grid. `rotateX(60deg)` on an oversized plane,
+ * scrolled by dtGridScroll, with a radial vignette painted over it.
+ *
+ * `paused` freezes the animation while a form is submitting — the prototype does
+ * the same, and it is the difference between "the page is working" and "the page
+ * is decorative".
+ */
+export function GridBackdrop({ paused = false, className }: { paused?: boolean; className?: string }) {
+  return (
+    <div
+      aria-hidden
+      className={cn('pointer-events-none absolute inset-0 z-0 overflow-hidden', className)}
+    >
+      <div
+        className="absolute -inset-x-1/2 -inset-y-1/2 will-change-transform"
+        style={{
+          backgroundImage:
+            'linear-gradient(var(--dt-grid-line) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--dt-grid-line) 1.5px, transparent 1.5px)',
+          backgroundSize: '50px 50px',
+          transform: 'perspective(500px) rotateX(60deg) translateY(-100px)',
+          transformOrigin: 'center',
+          opacity: 0.85,
+          backfaceVisibility: 'hidden',
+          animation: paused ? undefined : 'dtGridScroll 45s linear infinite',
+        }}
+      />
+      <div
+        className="absolute inset-0"
+        style={{
+          background: 'radial-gradient(circle at center, transparent 15%, var(--dt-bg) 78%)',
+        }}
+      />
+    </div>
+  );
+}
+
+/**
+ * Ambient indigo/teal glow blobs. Kept as the data/functional colour layer the
+ * brand decision reserved them for — the yellow stays the single brand accent.
+ */
+export function GlowBlobs() {
+  return (
+    <>
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -right-[120px] -top-[120px] z-0 h-[440px] w-[440px] rounded-full"
+        style={{ background: 'rgba(129,140,248,0.06)', filter: 'blur(130px)' }}
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -bottom-[140px] left-[38%] z-0 h-[420px] w-[420px] rounded-full"
+        style={{ background: 'rgba(45,212,191,0.05)', filter: 'blur(120px)' }}
+      />
+    </>
+  );
+}
+
+/** The hero pane's own grid — same transform, but vignetted onto --dt-hero. */
+export function HeroGrid({ paused = false }: { paused?: boolean }) {
+  return (
+    <>
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -inset-x-1/2 -inset-y-1/2 z-0 will-change-transform"
+        style={{
+          backgroundImage:
+            'linear-gradient(var(--dt-grid-line) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--dt-grid-line) 1.5px, transparent 1.5px)',
+          backgroundSize: '50px 50px',
+          transform: 'perspective(500px) rotateX(60deg) translateY(-100px)',
+          transformOrigin: 'center',
+          opacity: 0.85,
+          backfaceVisibility: 'hidden',
+          animation: paused ? undefined : 'dtGridScroll 45s linear infinite',
+        }}
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{ background: 'radial-gradient(circle at center, transparent 15%, var(--dt-hero) 80%)' }}
+      />
+    </>
+  );
+}
diff --git a/apps/editor/panel/components/ui/caps.tsx b/apps/editor/panel/components/ui/caps.tsx
new file mode 100644
index 000000000..63239e8ea
--- /dev/null
+++ b/apps/editor/panel/components/ui/caps.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { useApp } from '@panel/components/app-providers';
+import { toCaps } from '@panel/lib/casing';
+
+/**
+ * Locale-aware uppercase, done in JavaScript rather than with CSS.
+ *
+ * `text-transform: uppercase` is supposed to follow the document language, and
+ * `<html lang="tr">` is set — but Chromium still renders "SONRAKI GELIYOR"
+ * instead of "SONRAKİ GELİYOR", so the dotted-İ rule silently does not survive
+ * the CSS path. Every uppercase label in this UI is dictionary text, and half of
+ * it is Turkish, so the transform has to happen where the locale is guaranteed:
+ * `String.prototype.toLocaleUpperCase(locale)`.
+ *
+ * Strings that mix brand names with Turkish (the footer signature, the console
+ * meta line) are not routed through here at all — they are written with the
+ * glyphs they need, because no single locale is right for both halves.
+ */
+export function Caps({
+  children,
+  className,
+  invariant = false,
+}: {
+  children: string;
+  className?: string;
+  /**
+   * Set for identifiers rather than prose — role names, permission keys, brand
+   * words. They are data, not UI copy, and the Turkish rule turns "Admin" into
+   * "ADMİN" and "Editor" into "EDİTOR". Same trap as the missing İ, in reverse.
+   */
+  invariant?: boolean;
+}) {
+  const { lang } = useApp();
+  return <span className={className}>{toCaps(children, lang, invariant)}</span>;
+}
+
+/** Same rule for callers that need a string rather than an element. */
+export function useCaps(): (value: string) => string {
+  const { lang } = useApp();
+  return (value: string) => toCaps(value, lang);
+}
diff --git a/apps/editor/panel/components/ui/controls.tsx b/apps/editor/panel/components/ui/controls.tsx
new file mode 100644
index 000000000..c18b5cd86
--- /dev/null
+++ b/apps/editor/panel/components/ui/controls.tsx
@@ -0,0 +1,257 @@
+'use client';
+
+import { forwardRef, type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react';
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useApp } from '@panel/components/app-providers';
+import { Caps } from '@panel/components/ui/caps';
+import { useBreakpoint } from '@panel/lib/hooks/use-breakpoint';
+import { cn } from '@panel/lib/cn';
+
+/* Height pairs are the prototype's: 38 px desktop / 48 px touch for full-width
+   actions, 28 / 44 for header controls. Touch sizing is gated on mobile portrait
+   only, which is what stopped controls from ballooning in mobile landscape. */
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
+  full?: boolean;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { variant = 'primary', full = true, className, children, ...rest },
+  ref,
+) {
+  const { touch, isMobile } = useBreakpoint();
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(
+        'flex items-center justify-center gap-2 rounded-[8px] font-semibold',
+        touch ? 'h-12' : 'h-[38px]',
+        isMobile ? 'text-sm' : 'text-[13px]',
+        full ? 'w-full' : 'px-4',
+        variant === 'primary' && 'bg-primary text-primary-fg shadow-e2 hover:opacity-92',
+        variant === 'secondary' && 'border border-border bg-field font-medium text-fg hover:bg-hover',
+        variant === 'ghost' && 'bg-transparent font-medium text-muted-fg hover:text-fg',
+        variant === 'destructive' &&
+          'border border-destructive bg-field font-medium text-destructive hover:bg-hover',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});
+
+/** Uppercase mono field label — the pattern used on every form row. */
+export function FieldLabel({ htmlFor, children }: { htmlFor?: string; children: string }) {
+  return (
+    <label htmlFor={htmlFor} className="text-[10px] font-medium tracking-[0.12em] text-muted-fg">
+      <Caps>{children}</Caps>
+    </label>
+  );
+}
+
+type FieldProps = InputHTMLAttributes<HTMLInputElement> & {
+  icon?: ReactNode;
+  /** Extra right padding when a trailing control sits inside the field. */
+  trailing?: ReactNode;
+  invalid?: boolean;
+  valid?: boolean;
+};
+
+export const Field = forwardRef<HTMLInputElement, FieldProps>(function Field(
+  { icon, trailing, invalid, valid, className, ...rest },
+  ref,
+) {
+  const { touch } = useBreakpoint();
+
+  return (
+    <div className="relative flex min-w-0 items-center">
+      {icon ? (
+        <span className="pointer-events-none absolute left-[11px] flex h-[15px] w-[15px] items-center text-muted-fg">
+          {icon}
+        </span>
+      ) : null}
+      <input
+        ref={ref}
+        className={cn(
+          'w-full min-w-0 rounded-[8px] bg-field text-[13px] text-fg outline-none',
+          'border focus:shadow-[0_0_0_3px_var(--dt-hover)]',
+          invalid ? 'border-destructive' : valid ? 'border-ring' : 'border-input focus:border-ring',
+          touch ? 'h-[46px]' : 'h-[38px]',
+          icon ? 'pl-[34px]' : 'pl-[11px]',
+          trailing ? (touch ? 'pr-[52px]' : 'pr-[44px]') : 'pr-[11px]',
+          className,
+        )}
+        {...rest}
+      />
+      {trailing}
+    </div>
+  );
+});
+
+/** Card shell shared by every single-column auth screen: 376 px, 14 px radius. */
+export function AuthCard({
+  children,
+  width = 376,
+  gap = 20,
+}: {
+  children: ReactNode;
+  width?: number;
+  gap?: number;
+}) {
+  return (
+    <div
+      className="relative flex w-full flex-col rounded-[14px] border border-border bg-sidebar p-7 shadow-e4"
+      style={{ maxWidth: width, gap, animation: 'dtFade 0.25s ease' }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * One button, cycling System → Light → Dark. System is the default and keeps
+ * following the OS; picking Light or Dark pins it until the cycle comes round
+ * again. Three separate controls for one setting was one too many.
+ */
+export function ThemeToggle() {
+  const { t, themeChoice, setThemeChoice } = useApp();
+  const { touch, isMobile } = useBreakpoint();
+
+  const order = ['system', 'light', 'dark'] as const;
+  const next = order[(order.indexOf(themeChoice) + 1) % order.length] ?? 'system';
+  const label =
+    themeChoice === 'system' ? t.themeSystem : themeChoice === 'light' ? t.themeLight : t.themeDark;
+
+  return (
+    <button
+      type="button"
+      onClick={() => setThemeChoice(next)}
+      title={label}
+      aria-label={label}
+      className={cn(
+        'flex shrink-0 items-center justify-center border border-border bg-field text-fg hover:bg-hover',
+        touch ? 'h-11 w-11' : 'h-7 w-7',
+        isMobile ? 'rounded-[10px]' : 'rounded-[8px]',
+      )}
+    >
+      {themeChoice === 'system' ? (
+        <Monitor className="block h-[15px] w-[15px]" strokeWidth={2.5} />
+      ) : themeChoice === 'light' ? (
+        <Sun className="block h-[15px] w-[15px]" strokeWidth={2.5} />
+      ) : (
+        <Moon className="block h-[15px] w-[15px]" strokeWidth={2.5} />
+      )}
+    </button>
+  );
+}
+
+export function LangToggle() {
+  const { lang, toggleLang } = useApp();
+  const { touch, isMobile } = useBreakpoint();
+
+  return (
+    <button
+      type="button"
+      onClick={toggleLang}
+      title={lang === 'en' ? 'Türkçeye geç' : 'Switch to English'}
+      className={cn(
+        'flex shrink-0 items-center justify-center border border-border bg-field font-mono tracking-[0.06em] text-fg hover:bg-hover',
+        touch ? 'h-11 w-11' : 'h-7 w-7',
+        isMobile ? 'rounded-[10px] text-[11px]' : 'rounded-[8px] text-[9.5px]',
+      )}
+    >
+      {/* Shows the language you would switch TO, matching the prototype. */}
+      {lang === 'en' ? 'TR' : 'EN'}
+    </button>
+  );
+}
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden
+      className={cn('inline-block h-[13px] w-[13px] rounded-full border-2', className)}
+      style={{
+        borderColor: 'rgba(10,10,10,0.25)',
+        borderTopColor: 'var(--dt-primary-fg)',
+        animation: 'dtSpin 0.7s linear infinite',
+      }}
+    />
+  );
+}
+
+/** Segmented control — the seg() helper, 44 px minimum on touch. */
+export function SegBar({ children }: { children: ReactNode }) {
+  const { isMobile } = useBreakpoint();
+  return (
+    <div
+      className={cn(
+        'dt-scroll-x flex max-w-full shrink-0 items-center gap-[2px] border border-border bg-panel',
+        isMobile ? 'h-12 rounded-[12px] p-1' : 'h-[30px] rounded-[8px] p-[2px]',
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SegButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  const { isMobile } = useBreakpoint();
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={cn(
+        'whitespace-nowrap rounded-[6px] px-[10px] text-[11px] font-medium',
+        isMobile ? 'h-11' : 'h-[26px]',
+        active ? 'bg-panel-hi text-fg shadow-e2' : 'bg-transparent text-muted-fg',
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function Checkbox({
+  checked,
+  onChange,
+  children,
+  align = 'center',
+}: {
+  checked: boolean;
+  onChange: (next: boolean) => void;
+  children: ReactNode;
+  align?: 'center' | 'start';
+}) {
+  return (
+    <label
+      className={cn(
+        'flex cursor-pointer select-none gap-[9px]',
+        align === 'center' ? 'items-center' : 'items-start',
+      )}
+    >
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className={cn('h-[14px] w-[14px] shrink-0 cursor-pointer', align === 'start' && 'mt-[2px]')}
+        style={{ accentColor: 'var(--dt-primary)' }}
+      />
+      <span className="text-[12.5px] leading-[1.5] text-muted-fg">{children}</span>
+    </label>
+  );
+}
diff --git a/apps/editor/panel/components/ui/feedback.tsx b/apps/editor/panel/components/ui/feedback.tsx
new file mode 100644
index 000000000..6c95e3ef6
--- /dev/null
+++ b/apps/editor/panel/components/ui/feedback.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { useRef, type ReactNode } from 'react';
+import { Check, ShieldAlert, ShieldCheck } from 'lucide-react';
+import { Caps } from '@panel/components/ui/caps';
+import { useModalFocus } from '@panel/components/ui/modal-focus';
+import { useEscapeLayer } from '@panel/lib/escape-layers';
+import { cn } from '@panel/lib/cn';
+
+/** Destructive inline error box — shakes once, as the prototype does. */
+export function ErrorBox({ children, shield = true }: { children: ReactNode; shield?: boolean }) {
+  return (
+    <div
+      role="alert"
+      className="flex items-start gap-2 rounded-[8px] border border-destructive bg-field px-[11px] py-[9px]"
+      style={{ animation: 'dtShake 0.3s ease' }}
+    >
+      {shield ? (
+        <ShieldAlert className="mt-px block h-[15px] w-[15px] shrink-0 text-destructive" strokeWidth={2.2} />
+      ) : (
+        <span className="mt-[6px] h-[5px] w-[5px] shrink-0 rounded-full bg-destructive" />
+      )}
+      <span className="text-xs leading-[1.45] text-destructive">{children}</span>
+    </div>
+  );
+}
+
+/** Brand-accented notice — SSO enforcement, security banner, invite state. */
+export function NoticeBox({
+  title,
+  children,
+  icon,
+  accent = true,
+}: {
+  title?: ReactNode;
+  children: ReactNode;
+  icon?: ReactNode;
+  accent?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-[9px] rounded-[8px] border border-border bg-field px-3 py-[10px]',
+        accent && 'border-l-2 border-l-brand',
+      )}
+    >
+      <span className="mt-px block h-[15px] w-[15px] shrink-0 text-brand-fg">
+        {icon ?? <ShieldCheck className="h-[15px] w-[15px]" strokeWidth={2.1} />}
+      </span>
+      <div className="flex min-w-0 flex-col gap-[2px]">
+        {title ? <span className="text-xs font-semibold text-fg">{title}</span> : null}
+        <span className="text-[11.5px] leading-[1.45] text-muted-fg text-pretty">{children}</span>
+      </div>
+    </div>
+  );
+}
+
+/** The 32 px yellow tick that opens every "done" state in the auth flows. */
+export function SuccessMark() {
+  return (
+    <div className="flex h-8 w-8 items-center justify-center rounded-[9px] border border-brand bg-field text-brand-fg">
+      <Check className="block h-4 w-4" strokeWidth={2.5} />
+    </div>
+  );
+}
+
+export function Kicker({ children }: { children: string }) {
+  return <Caps className="font-mono text-[9px] tracking-[0.14em] text-muted-fg">{children}</Caps>;
+}
+
+export function ScreenTitle({ title, lead }: { title: ReactNode; lead?: ReactNode }) {
+  return (
+    <>
+      <h1 className="m-0 mt-1 text-[18px] font-semibold tracking-[-0.01em]">{title}</h1>
+      {lead ? (
+        <p className="m-0 mt-[2px] text-[12.5px] leading-[1.55] text-muted-fg text-pretty">{lead}</p>
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * Modal shell. Traps nothing by itself — each caller wires Escape into the
+ * layer chain (menu → palette → drawer → dialog → inline edit) so Escape only
+ * ever closes the topmost layer.
+ */
+export function Dialog({
+  labelledBy,
+  role = 'dialog',
+  width = 344,
+  onClose,
+  children,
+}: {
+  labelledBy?: string;
+  role?: 'dialog' | 'alertdialog';
+  width?: number;
+  /**
+   * Dismissal. Pass it and the dialog joins the Escape chain as its topmost
+   * layer; leave it out only for a dialog the user genuinely must answer.
+   */
+  onClose?: () => void;
+  children: ReactNode;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useModalFocus(ref);
+  useEscapeLayer(Boolean(onClose), onClose ?? noop);
+
+  return (
+    <div
+      className="fixed inset-0 z-[120] flex items-center justify-center p-6 backdrop-blur-[3px]"
+      style={{ background: 'rgba(0,0,0,0.6)', animation: 'dtFade 0.15s ease' }}
+    >
+      <div
+        ref={ref}
+        role={role}
+        aria-modal="true"
+        aria-labelledby={labelledBy}
+        // Focusable as a last resort: a dialog whose controls are all disabled
+        // still has to be able to receive focus, or it receives nothing.
+        tabIndex={-1}
+        className="flex w-full flex-col gap-[14px] rounded-[12px] border border-border bg-popover p-[22px] shadow-e4 outline-none"
+        style={{ maxWidth: width, animation: 'dtScale 0.18s ease' }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function noop(): void {}
+
+/** Live-region toast. Success and error share one surface, per O6. */
+export function Toast({ message, tone }: { message: string; tone: 'success' | 'error' }) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={cn(
+        'fixed bottom-5 left-1/2 z-[140] -translate-x-1/2 rounded-[10px] border px-4 py-[10px] text-[12.5px] font-medium shadow-e4',
+        tone === 'success' ? 'border-border bg-popover text-fg' : 'border-destructive bg-popover text-destructive',
+      )}
+      style={{ animation: 'dtFade 0.18s ease' }}
+    >
+      {message}
+    </div>
+  );
+}
diff --git a/apps/editor/panel/components/ui/modal-focus.ts b/apps/editor/panel/components/ui/modal-focus.ts
new file mode 100644
index 000000000..d70f9c929
--- /dev/null
+++ b/apps/editor/panel/components/ui/modal-focus.ts
@@ -0,0 +1,127 @@
+'use client';
+
+import { useEffect, type RefObject } from 'react';
+
+/**
+ * What makes a modal usable from the keyboard.
+ *
+ * `aria-modal="true"` tells assistive technology the rest of the page is
+ * unavailable; it does not stop Tab from walking straight out of the dialog into
+ * the page behind it. Without the trap below, tabbing through a confirmation
+ * dialog put focus on the table underneath while the overlay still covered it —
+ * the focus ring was invisible and Enter activated something the user could not
+ * see.
+ *
+ * Three obligations, all of them WCAG 2.4.3:
+ *
+ * 1. move focus into the dialog when it opens,
+ * 2. keep Tab and Shift+Tab inside it,
+ * 3. put focus back where it came from when it closes.
+ */
+const FOCUSABLE = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+function focusableWithin(node: HTMLElement): HTMLElement[] {
+  return [...node.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(
+    // offsetParent is null for anything display:none — a collapsed section's
+    // controls must not become a stop in the tab order.
+    (el) => el.offsetParent !== null || el === document.activeElement,
+  );
+}
+
+/**
+ * `ready` exists because a panel can mount before it has anything to focus. The
+ * user drawer renders null until its fetch resolves, so an effect keyed only on
+ * the ref runs once against an empty ref and never again — the trap silently
+ * never engages. Pass the same condition that gates the render.
+ */
+export function useModalFocus(ref: RefObject<HTMLElement | null>, ready = true): void {
+  useEffect(() => {
+    const node = ref.current;
+    if (!ready || !node) return;
+
+    const returnTo = document.activeElement as HTMLElement | null;
+    const restoreInert = makeRestInert(node);
+
+    // After the background goes inert, not before: marking an ancestor of the
+    // focused element inert blurs it, and we want to land somewhere deliberate.
+    const first = focusableWithin(node)[0];
+    (first ?? node).focus();
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Tab') return;
+
+      const items = focusableWithin(node);
+      if (items.length === 0) {
+        // A dialog with nothing focusable still must not leak focus outward.
+        event.preventDefault();
+        return;
+      }
+
+      const first = items[0]!;
+      const last = items[items.length - 1]!;
+      const active = document.activeElement;
+
+      if (event.shiftKey && (active === first || active === node)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    node.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      node.removeEventListener('keydown', onKeyDown);
+      restoreInert();
+      // The trigger may have unmounted with the dialog — a delete confirmation
+      // closes over a row that no longer exists — so this is best-effort.
+      if (returnTo?.isConnected) returnTo.focus();
+    };
+  }, [ref, ready]);
+}
+
+/**
+ * Marks everything outside `node` inert, and returns the undo.
+ *
+ * The focus trap keeps Tab inside a dialog; it does nothing about a screen
+ * reader's virtual cursor, which walks the DOM and will happily read the table
+ * behind an overlay. `aria-modal` is supposed to cover that and is unevenly
+ * honoured; `inert` removes the subtree from focus, hit-testing and the
+ * accessibility tree at once.
+ *
+ * The dialog renders inside the app tree, so there is no single ancestor to
+ * mark. Walk up from the dialog and inert each ancestor's *other* children:
+ * that is the whole document minus the dialog's own branch. Only elements this
+ * call changed are restored, so nesting a dialog inside a drawer unwinds in the
+ * right order and anything already inert stays that way.
+ */
+function makeRestInert(node: HTMLElement): () => void {
+  const changed: HTMLElement[] = [];
+
+  let current: HTMLElement | null = node;
+  while (current && current !== document.body) {
+    const parent: HTMLElement | null = current.parentElement;
+    if (!parent) break;
+
+    const siblings: Element[] = Array.from(parent.children);
+    for (const sibling of siblings) {
+      if (sibling === current || !(sibling instanceof HTMLElement) || sibling.inert) continue;
+      sibling.inert = true;
+      changed.push(sibling);
+    }
+    current = parent;
+  }
+
+  return () => {
+    for (const el of changed) el.inert = false;
+  };
+}
diff --git a/apps/editor/panel/components/ui/netlog-logo.tsx b/apps/editor/panel/components/ui/netlog-logo.tsx
new file mode 100644
index 000000000..44183a4d9
--- /dev/null
+++ b/apps/editor/panel/components/ui/netlog-logo.tsx
@@ -0,0 +1,121 @@
+/**
+ * Netlog brand assets, path for path from the corporate file `nlg.svg` — not a
+ * redraw. That file carries four variants on one canvas (Turkish and English
+ * wording, each plain and reversed-out of a navy box); what is here is the
+ * Turkish plain variant, the one the console needs because its wordmark can
+ * take the theme.
+ *
+ * The source file is not kept in the tree — nothing loads it at runtime, and
+ * these paths are the whole of what the app uses. Recover it from git when a
+ * variant that is not here is needed:
+ *
+ *     git show b06626e:nlg.svg > nlg.svg
+ *
+ * Colours are `fill` attributes rather than the classes the source file uses.
+ * An SVG `<style>` block inside an HTML document is **not** scoped to its own
+ * svg — it applies document-wide, so two logos on one page would fight over
+ * `.cls-3` and the last one drawn would win. Attributes cannot leak.
+ *
+ * The colour rule: the mark is #FFC629 in both themes because it is the brand
+ * mark, not a themed accent. The wordmark follows --dt-wordmark (#F0F0F0 dark /
+ * #002D74 light), which is the reversed-out and plain treatments the brand file
+ * already ships.
+ */
+
+/** Tight box around the mark alone, measured from the asset. */
+const MARK_VIEW = '111.3 65.6 94.9 69.8';
+/** Tight box around mark + wordmark. */
+const LOCKUP_VIEW = '111.3 65.6 181.8 69.8';
+
+const MARK_PATHS = [
+  'M149.5,65.7s-46.7,13.2-36.8,38.8c0,0,7.5,20.8,36.5,30.9,0,0-36.5-26.2-22.1-48.7,0,0,3.5-6.8,22.4-21.1Z',
+  'M169.5,77.6s-42.2,8.2-36.8,25.3c0,0,4.6,13.6,36.5,23.5,0,0-34.6-20.1-21.8-33.6,0,0,3.6-5.6,22.2-15.2Z',
+  'M188.8,86s-38.7,4.8-33.6,17.7c0,0,1.2,9.3,33.7,16.7,0,0-32.6-11.9-19.3-23.4,0,0,7.2-7,19.2-11Z',
+  'M183.2,103.6c0-4.6,5.1-8.2,11.5-8.2s11.5,3.7,11.5,8.2-5.1,8.2-11.5,8.2-11.5-3.7-11.5-8.2Z',
+];
+
+const WORDMARK_PATHS = [
+  'M226.6,86.7h-3.6l-5.8-10.1h0c.1,1.8.2,3,.2,3.8v6.3h-2.5v-13.3h3.6l5.8,10h0c0-1.7-.1-3-.1-3.7v-6.3h2.5v13.3Z',
+  'M238,86.7h-7.7v-13.3h7.7v2.3h-4.8v2.9h4.5v2.3h-4.5v3.4h4.8v2.3Z',
+  'M246.3,86.7h-2.8v-11h-3.6v-2.3h10v2.3h-3.6v11Z',
+  'M252.3,86.7v-13.3h2.8v11h5.4v2.3h-8.2Z',
+  'M275.3,80c0,2.2-.5,3.9-1.6,5.1s-2.7,1.8-4.7,1.8-3.6-.6-4.7-1.8-1.6-2.9-1.6-5.1.5-3.9,1.6-5.1c1.1-1.2,2.7-1.8,4.7-1.8s3.6.6,4.7,1.8c1.1,1.2,1.6,2.9,1.6,5.1ZM265.6,80c0,1.5.3,2.6.8,3.4.6.8,1.4,1.1,2.5,1.1,2.2,0,3.4-1.5,3.4-4.5s-1.1-4.5-3.4-4.5-2,.4-2.5,1.1c-.6.8-.9,1.9-.9,3.4Z',
+  'M283.5,79.2h5.3v6.9c-.9.3-1.7.5-2.4.6s-1.5.2-2.3.2c-2,0-3.5-.6-4.6-1.8-1.1-1.2-1.6-2.9-1.6-5.1s.6-3.8,1.8-5c1.2-1.2,2.9-1.8,5.1-1.8s2.7.3,3.9.8l-.9,2.3c-1-.5-2-.7-3-.7s-2.2.4-2.9,1.2c-.7.8-1.1,1.9-1.1,3.3s.3,2.5.9,3.3,1.5,1.1,2.6,1.1,1.2,0,1.8-.2v-2.8h-2.5v-2.3Z',
+  'M214.8,107.3v-13.3h2.8v11h5.4v2.3h-8.2Z',
+  'M237.8,100.6c0,2.2-.5,3.9-1.6,5.1-1.1,1.2-2.7,1.8-4.7,1.8s-3.6-.6-4.7-1.8c-1.1-1.2-1.6-2.9-1.6-5.1s.5-3.9,1.6-5.1c1.1-1.2,2.7-1.8,4.7-1.8s3.6.6,4.7,1.8c1.1,1.2,1.6,2.9,1.6,5.1ZM228.1,100.6c0,1.5.3,2.6.8,3.4.6.8,1.4,1.1,2.5,1.1,2.2,0,3.4-1.5,3.4-4.5s-1.1-4.5-3.4-4.5-2,.4-2.5,1.1c-.6.8-.9,1.9-.9,3.4Z',
+  'M239.5,111.2c-.6,0-1.2,0-1.7-.2v-2.3c.5.1.9.2,1.3.2.6,0,1.1-.2,1.3-.6s.4-1,.4-1.8v-12.5h2.8v12.4c0,1.6-.4,2.7-1.1,3.5s-1.8,1.2-3.1,1.2Z',
+  'M247.4,91.4c0-.9.5-1.4,1.5-1.4s1.5.5,1.5,1.4-.1.8-.4,1c-.3.2-.6.4-1.1.4-1,0-1.5-.5-1.5-1.4ZM247.5,107.3v-13.3h2.8v13.3h-2.8Z',
+  'M261.9,103.6c0,1.2-.4,2.1-1.3,2.8s-2.1,1-3.6,1-2.7-.3-3.8-.8v-2.6c.9.4,1.7.7,2.3.8.6.2,1.2.2,1.7.2s1.1-.1,1.4-.4c.3-.2.5-.6.5-1.1s0-.5-.2-.7c-.1-.2-.4-.4-.6-.6-.3-.2-.9-.5-1.7-.9-.8-.4-1.4-.7-1.8-1.1-.4-.4-.7-.8-1-1.2-.2-.5-.4-1-.4-1.6,0-1.2.4-2.1,1.2-2.8s1.9-1,3.3-1,1.4,0,2,.2c.6.2,1.3.4,2,.7l-.9,2.2c-.7-.3-1.3-.5-1.8-.6s-.9-.2-1.4-.2-.9.1-1.2.4c-.3.2-.4.6-.4,1s0,.5.2.6c.1.2.3.4.6.5.3.2.8.5,1.8.9,1.2.6,2.1,1.2,2.6,1.8.5.6.7,1.3.7,2.2Z',
+  'M269.8,107.3h-2.8v-11h-3.6v-2.3h10v2.3h-3.6v11Z',
+  'M275.7,91.4c0-.9.5-1.4,1.5-1.4s1.5.5,1.5,1.4-.1.8-.4,1c-.3.2-.6.4-1.1.4-1,0-1.5-.5-1.5-1.4ZM275.8,107.3v-13.3h2.8v13.3h-2.8Z',
+  'M293.1,107.3h-3.2l-3.5-5.6-1.2.9v4.7h-2.8v-13.3h2.8v6.1l1.1-1.6,3.6-4.5h3.1l-4.6,5.9,4.7,7.4Z',
+  'M219.9,120.4h5.3v6.9c-.9.3-1.7.5-2.4.6-.8.1-1.5.2-2.3.2-2,0-3.5-.6-4.6-1.8s-1.6-2.9-1.6-5.1.6-3.8,1.8-5,2.9-1.8,5.1-1.8,2.7.3,3.9.8l-.9,2.3c-1-.5-2-.7-3-.7s-2.2.4-2.9,1.2c-.7.8-1.1,1.9-1.1,3.3s.3,2.5.9,3.3,1.5,1.1,2.6,1.1,1.2,0,1.8-.2v-2.8h-2.5v-2.3Z',
+  'M231.5,122.8v5.1h-2.8v-13.3h3.9c1.8,0,3.1.3,4,1,.9.7,1.3,1.7,1.3,3s-.2,1.5-.6,2.1c-.4.6-1,1.1-1.8,1.4,2,3,3.3,4.9,3.9,5.8h-3.1l-3.2-5.1h-1.5ZM231.5,120.5h.9c.9,0,1.5-.1,2-.4.4-.3.6-.8.6-1.4s-.2-1.1-.7-1.3-1.1-.4-2-.4h-.9v3.6Z',
+  'M252.2,114.6v8.6c0,1-.2,1.8-.7,2.6-.4.7-1.1,1.3-1.9,1.7s-1.8.6-2.9.6c-1.7,0-3-.4-4-1.3-.9-.9-1.4-2.1-1.4-3.6v-8.6h2.8v8.1c0,1,.2,1.8.6,2.3.4.5,1.1.7,2,.7s1.6-.2,2-.7c.4-.5.6-1.2.6-2.3v-8.1h2.8Z',
+  'M255.8,114.6h4.1c1.9,0,3.3.3,4.1.8.9.5,1.3,1.4,1.3,2.6s-.2,1.4-.6,2-.9.8-1.5.9h0c.8.3,1.5.6,1.8,1.1.4.5.6,1.2.6,2.1,0,1.2-.4,2.2-1.3,2.8-.9.7-2.1,1-3.6,1h-5v-13.3ZM258.7,119.8h1.6c.8,0,1.3-.1,1.7-.4.3-.2.5-.6.5-1.2s-.2-.9-.6-1.1c-.4-.2-1-.3-1.8-.3h-1.5v3ZM258.7,122.1v3.5h1.8c.8,0,1.3-.1,1.7-.4s.6-.8.6-1.4c0-1.1-.8-1.7-2.4-1.7h-1.7Z',
+  'M279.5,114.6v8.6c0,1-.2,1.8-.7,2.6-.4.7-1.1,1.3-1.9,1.7s-1.8.6-2.9.6c-1.7,0-3-.4-4-1.3-.9-.9-1.4-2.1-1.4-3.6v-8.6h2.8v8.1c0,1,.2,1.8.6,2.3.4.5,1.1.7,2,.7s1.6-.2,2-.7c.4-.5.6-1.2.6-2.3v-8.1h2.8Z',
+];
+
+/**
+ * The mark on its own.
+ *
+ * Used wherever the row is around 25–30 px tall — the console header, the auth
+ * screens. The full lockup stacks its wordmark on three lines, which at that
+ * height leaves roughly 7 px per line; the mark stays legible and the product
+ * name sits beside it anyway.
+ */
+export function NetlogMark({ className, title = 'Netlog' }: { className?: string; title?: string }) {
+  return (
+    <svg viewBox={MARK_VIEW} role="img" aria-label={title} className={className} style={{ display: 'block' }}>
+      <g fill="#FFC629" fillRule="evenodd">
+        {MARK_PATHS.map((d) => (
+          <path key={d} d={d} />
+        ))}
+      </g>
+    </svg>
+  );
+}
+
+/** Mark plus the three-line wordmark. For places with vertical room. */
+export function NetlogLogo({ className, title = 'Netlog Lojistik Grubu' }: { className?: string; title?: string }) {
+  return (
+    <svg viewBox={LOCKUP_VIEW} role="img" aria-label={title} className={className} style={{ display: 'block' }}>
+      <g fill="#FFC629" fillRule="evenodd">
+        {MARK_PATHS.map((d) => (
+          <path key={d} d={d} />
+        ))}
+      </g>
+      <g fill="var(--dt-wordmark, rgb(240,240,240))">
+        {WORDMARK_PATHS.map((d) => (
+          <path key={d} d={d} />
+        ))}
+      </g>
+    </svg>
+  );
+}
+
+/** Logo + hairline divider + product name — the lockup used in every header. */
+export function BrandLockup({
+  label,
+  meta,
+  // Height-driven: the mark is 94.9 × 69.8 in the asset, so a fixed width and
+  // height would letterbox it inside its own box.
+  logoClassName = 'h-[28px] w-auto',
+  labelClassName = 'text-sm font-semibold tracking-[-0.01em]',
+}: {
+  label: string;
+  meta?: string;
+  logoClassName?: string;
+  labelClassName?: string;
+}) {
+  return (
+    <div className="flex min-w-0 items-center gap-[10px] overflow-hidden">
+      <NetlogMark className={`${logoClassName} shrink-0`} />
+      <span className="h-5 w-px shrink-0 bg-border" />
+      <span className={`${labelClassName} whitespace-nowrap text-fg`}>{label}</span>
+      {meta ? (
+        <span className="whitespace-nowrap font-mono text-[9px] tracking-[0.14em] text-muted-fg">{meta}</span>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/editor/panel/env.ts b/apps/editor/panel/env.ts
new file mode 100644
index 000000000..12a356d8e
--- /dev/null
+++ b/apps/editor/panel/env.ts
@@ -0,0 +1,29 @@
+/** Minimal .env / .env.local reader for the standalone CLI scripts. */
+import { existsSync, readFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..')
+
+export function loadEnv(): void {
+  for (const file of ['.env', '.env.local']) {
+    const path = join(ROOT, file)
+    if (!existsSync(path)) continue
+    for (const rawLine of readFileSync(path, 'utf8').split('\n')) {
+      const line = rawLine.trim()
+      if (!line || line.startsWith('#')) continue
+      const eq = line.indexOf('=')
+      if (eq === -1) continue
+      const key = line.slice(0, eq).trim()
+      let value = line.slice(eq + 1).trim()
+      if (
+        (value.startsWith('"') && value.endsWith('"')) ||
+        (value.startsWith("'") && value.endsWith("'"))
+      ) {
+        value = value.slice(1, -1)
+      }
+      // .env.local wins over .env, and a real environment variable wins over both.
+      if (file === '.env.local' || process.env[key] === undefined) process.env[key] = value
+    }
+  }
+}
diff --git a/apps/editor/panel/globals.css b/apps/editor/panel/globals.css
new file mode 100644
index 000000000..dec886e5f
--- /dev/null
+++ b/apps/editor/panel/globals.css
@@ -0,0 +1,308 @@
+@import 'tailwindcss';
+
+/*
+ * Token scale lifted verbatim from the prototype's <helmet> block, which itself
+ * came from apps/editor/app/globals.css + styles/elevation.css. The raw --dt-*
+ * variables stay as the source of truth so a value can be traced straight back
+ * to the design file; @theme inline republishes them as Tailwind utilities.
+ */
+
+@custom-variant dark (&:where([data-dt-theme='dark'], [data-dt-theme='dark'] *));
+
+:root {
+  /* Document-level rules (links, scrollbar) must always resolve, even before a
+     [data-dt-theme] ancestor exists — hence these fallbacks. */
+  --dt-fg: oklch(0.985 0 0);
+  --dt-brand: #ffc629;
+  --dt-scroll: rgba(255, 255, 255, 0.15);
+  --dt-wordmark: rgb(240, 240, 240);
+}
+
+[data-dt-theme='dark'] {
+  --dt-bg: oklch(0.205 0 0);
+  --dt-fg: oklch(0.985 0 0);
+  --dt-sidebar: oklch(0.205 0 0);
+  --dt-popover: oklch(0.205 0 0);
+  --dt-muted: oklch(0.269 0 0);
+  --dt-muted-fg: oklch(0.708 0 0);
+  --dt-accent: oklch(0.235 0 0);
+  --dt-primary: #ffc629;
+  --dt-primary-fg: #0a0a0a;
+  --dt-navy: #002d74;
+  --dt-hero: #0a1b3d;
+  --dt-grid-line: rgba(255, 255, 255, 0.16);
+  --dt-border: oklch(1 0 0 / 10%);
+  --dt-border-soft: oklch(1 0 0 / 6%);
+  --dt-input: oklch(1 0 0 / 15%);
+  --dt-ring: #ffc629;
+  --dt-destructive: oklch(0.704 0.191 22.216);
+  --dt-panel: #2c2c2e;
+  --dt-panel-hi: #3e3e3e;
+  --dt-hover: rgba(255, 255, 255, 0.08);
+  --dt-field: rgba(255, 255, 255, 0.04);
+  --dt-surface: rgba(255, 255, 255, 0.02);
+  --dt-grid: rgba(255, 255, 255, 0.06);
+  --dt-scroll: rgba(255, 255, 255, 0.15);
+  /* Placeholder text is still text. Was 0.55, which measured 2.98:1 on the field
+     surface — the sample URL in the webhook form was the one screen where a hint
+     the user is meant to read was the least readable thing on the page. */
+  --dt-placeholder: oklch(0.6 0 0);
+  --dt-wordmark: rgb(240, 240, 240);
+  --dt-brand: #ffc629;
+  /* Brand as *text*. On the dark theme the brand colour already clears 4.5:1,
+     so the two are the same value here; see the light block for why they split. */
+  --dt-brand-fg: #ffc629;
+  --dt-shell: #0a0a0a;
+  --dt-warn: #e0b44a;
+  --dt-ok: #4ade80;
+  --dt-e2: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 1px -0.5px rgba(0, 0, 0, 0.18),
+    0 3px 3px -1.5px rgba(0, 0, 0, 0.18);
+  --dt-e4: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04),
+    0 6px 6px -3px rgba(0, 0, 0, 0.18), 0 12px 12px -6px rgba(0, 0, 0, 0.18);
+}
+
+[data-dt-theme='light'] {
+  --dt-bg: oklch(0.998 0 0);
+  --dt-fg: oklch(0.145 0 0);
+  --dt-sidebar: oklch(0.985 0 0);
+  --dt-popover: oklch(0.998 0 0);
+  --dt-muted: oklch(0.97 0 0);
+  /* Was 0.556 (#737373). Secondary copy in this UI runs down to 8 px, and at
+     that size #737373 measured 4.08:1 on the hover surface — under AA. Darkened
+     until the smallest muted text clears 4.5:1 on the lightest background it
+     ever sits on. */
+  --dt-muted-fg: oklch(0.52 0 0);
+  --dt-accent: oklch(0.97 0 0);
+  --dt-primary: #ffc629;
+  --dt-primary-fg: #0a0a0a;
+  --dt-navy: #002d74;
+  --dt-hero: oklch(0.965 0.012 265);
+  --dt-grid-line: rgba(0, 45, 116, 0.16);
+  --dt-border: oklch(0.922 0 0);
+  --dt-border-soft: oklch(0.95 0 0);
+  --dt-input: oklch(0.922 0 0);
+  --dt-ring: #002d74;
+  --dt-destructive: oklch(0.577 0.245 27.325);
+  --dt-panel: oklch(0.97 0 0);
+  --dt-panel-hi: oklch(0.93 0 0);
+  --dt-hover: rgba(0, 0, 0, 0.05);
+  --dt-field: oklch(0.985 0 0);
+  --dt-surface: oklch(0.985 0 0);
+  --dt-grid: rgba(0, 0, 0, 0.06);
+  --dt-scroll: rgba(0, 0, 0, 0.15);
+  /* Same rule, other direction: 0.72 was 2.2:1 on the light field surface. */
+  --dt-placeholder: oklch(0.55 0 0);
+  --dt-wordmark: rgb(0, 45, 116);
+  --dt-brand: #b98800;
+  /* Amber on a near-white surface is 1.35:1 — brand text was effectively
+     unreadable in this theme, and axe failed every screen that used it. This is
+     the same hue carried down to 5.4:1 on the lightest surface in the UI.
+     `--dt-brand` keeps its lighter value for dots, fills and borders, which
+     carry no text and are not held to the contrast rule. */
+  --dt-brand-fg: #7a5a00;
+  --dt-shell: oklch(0.94 0 0);
+  --dt-warn: #b07d0a;
+  --dt-ok: #1a7f45;
+  --dt-e2: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06),
+    0 3px 3px -1.5px rgba(0, 0, 0, 0.06);
+  --dt-e4: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06),
+    0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.06);
+}
+
+@theme inline {
+  --color-bg: var(--dt-bg);
+  --color-fg: var(--dt-fg);
+  --color-sidebar: var(--dt-sidebar);
+  --color-popover: var(--dt-popover);
+  --color-muted: var(--dt-muted);
+  --color-muted-fg: var(--dt-muted-fg);
+  --color-accent: var(--dt-accent);
+  --color-primary: var(--dt-primary);
+  --color-primary-fg: var(--dt-primary-fg);
+  --color-navy: var(--dt-navy);
+  --color-hero: var(--dt-hero);
+  --color-border: var(--dt-border);
+  --color-border-soft: var(--dt-border-soft);
+  --color-input: var(--dt-input);
+  --color-ring: var(--dt-ring);
+  --color-destructive: var(--dt-destructive);
+  --color-panel: var(--dt-panel);
+  --color-panel-hi: var(--dt-panel-hi);
+  --color-hover: var(--dt-hover);
+  --color-field: var(--dt-field);
+  --color-surface: var(--dt-surface);
+  --color-shell: var(--dt-shell);
+  --color-brand: var(--dt-brand);
+  --color-brand-fg: var(--dt-brand-fg);
+  --color-warn: var(--dt-warn);
+  --color-ok: var(--dt-ok);
+  --color-wordmark: var(--dt-wordmark);
+
+  --font-sans: var(--font-barlow), system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
+
+  /* 6 px inputs/badges · 10 px buttons/lists · 14 px cards/dialogs */
+  --radius-field: 6px;
+  --radius-control: 10px;
+  --radius-card: 14px;
+
+  --shadow-e2: var(--dt-e2);
+  --shadow-e4: var(--dt-e4);
+
+  --animate-dt-fade: dtFade 0.25s ease;
+  --animate-dt-scale: dtScale 0.16s ease;
+  --animate-dt-drop: dtDrop 0.2s ease;
+  --animate-dt-shake: dtShake 0.4s ease;
+  --animate-dt-slide-r: dtSlideR 0.26s cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-dt-spin: dtSpin 0.7s linear infinite;
+  --animate-dt-pulse: dtPulse 2s ease infinite;
+  --animate-dt-shimmer: dtShimmer 1.4s ease infinite;
+  --animate-dt-grid: dtGridScroll 45s linear infinite;
+}
+
+@keyframes dtFade {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes dtScale {
+  from { opacity: 0; transform: scale(0.97); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes dtDrop {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes dtShake {
+  0%, 100% { transform: none; }
+  25% { transform: translateX(-3px); }
+  75% { transform: translateX(3px); }
+}
+@keyframes dtSpin {
+  to { transform: rotate(360deg); }
+}
+@keyframes dtShimmer {
+  0%, 100% { opacity: 0.35; }
+  50% { opacity: 0.8; }
+}
+@keyframes dtPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+@keyframes dtSlideR {
+  from { opacity: 0; transform: translateX(26px); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes dtDash {
+  from { stroke-dashoffset: 220; }
+  to { stroke-dashoffset: 0; }
+}
+@keyframes dtGridScroll {
+  0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
+  100% { transform: perspective(500px) rotateX(60deg) translateY(50px); }
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--dt-shell);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--font-barlow), system-ui, sans-serif;
+}
+
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+}
+
+a {
+  color: var(--dt-fg);
+  text-decoration: none;
+}
+a:hover {
+  color: var(--dt-brand);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--dt-placeholder);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--dt-scroll);
+  border-radius: 9999px;
+}
+
+/* Horizontal strips scroll without a visible bar overlapping their content —
+   the fix for the overlap reported on the mobile tab strip and filter rows. */
+.dt-scroll-x {
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.dt-scroll-x::-webkit-scrollbar {
+  display: none;
+  height: 0;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+label:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--dt-ring);
+  outline-offset: 2px;
+}
+
+button {
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    opacity 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.1s ease;
+}
+button:not(:disabled):active {
+  transform: scale(0.97);
+}
+
+input,
+select,
+textarea {
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/apps/editor/panel/lib/api-contract.ts b/apps/editor/panel/lib/api-contract.ts
new file mode 100644
index 000000000..382b178b6
--- /dev/null
+++ b/apps/editor/panel/lib/api-contract.ts
@@ -0,0 +1,564 @@
+/**
+ * Request/response shape for every endpoint reachable in steps 3–5, plus the
+ * zod schemas the route handlers validate against. Section 08 asks for exactly
+ * this: "no code in this step, types — every later step compiles against them."
+ *
+ * Error envelope is uniform: `{ error: { code, message, details? } }`. `code` is
+ * stable and machine-readable; `message` is an i18n key the client resolves, so
+ * the server never ships user-facing prose.
+ */
+import { z } from 'zod'
+import type {
+  AccessRequest,
+  ApiKey,
+  AuthState,
+  Invitation,
+  Job,
+  OrgSettings,
+  Permission,
+  Role,
+  SessionInfo,
+  SessionUser,
+  Site,
+  UserV3,
+  Webhook,
+} from './types'
+
+export type ApiErrorCode =
+  | 'invalid_credentials'
+  | 'account_locked'
+  | 'account_inactive'
+  | 'account_suspended'
+  | 'sso_required'
+  | 'mfa_required'
+  | 'mfa_invalid'
+  | 'mfa_not_enrolled'
+  | 'recovery_invalid'
+  | 'token_invalid'
+  | 'token_expired'
+  | 'invite_expired'
+  | 'invite_revoked'
+  | 'password_policy'
+  | 'password_mismatch'
+  | 'unauthenticated'
+  | 'forbidden'
+  | 'not_found'
+  | 'conflict'
+  | 'validation'
+  | 'rate_limited'
+  | 'server_error'
+
+export interface ApiError {
+  error: {
+    code: ApiErrorCode
+    /** i18n key, e.g. `err.credentials`. Never pre-translated prose. */
+    message: string
+    details?: Record<string, unknown>
+  }
+}
+
+export type ApiResult<T> = T | ApiError
+
+export function isApiError(value: unknown): value is ApiError {
+  return typeof value === 'object' && value !== null && 'error' in value
+}
+
+/* ——— POST /api/auth/signin ——— */
+
+export const signInSchema = z.object({
+  /** Username, local part, or full work address — resolved server-side. */
+  identifier: z.string().trim().min(1).max(320),
+  password: z.string().min(1).max(512),
+  keepSignedIn: z.boolean().default(false),
+})
+export type SignInRequest = z.infer<typeof signInSchema>
+
+export interface SignInResponse {
+  state: Extract<AuthState, 'mfaRequired' | 'firstSignIn' | 'signedIn'>
+  /** Present once the session is fully established (state === 'signedIn'). */
+  user?: SessionUser
+  /** Masked identity shown on the OTP screen while the session is half-open. */
+  pendingLabel?: string
+  /** True when the account has no confirmed TOTP secret and MFA is mandatory. */
+  enrolmentRequired?: boolean
+}
+
+/* ——— GET /api/auth/session ——— */
+
+export interface SessionResponse {
+  state: AuthState
+  user: SessionUser | null
+  /** Idle countdown source of truth. Seconds remaining before forced sign-out. */
+  expiresInSeconds: number
+  /** settings.session_minutes, so the client can render "20 min idle ends…". */
+  sessionMinutes: number
+}
+
+/* ——— POST /api/auth/signout ——— */
+
+export const signOutSchema = z.object({ allDevices: z.boolean().default(false) })
+export type SignOutRequest = z.infer<typeof signOutSchema>
+export interface SignOutResponse {
+  revoked: number
+}
+
+/* ——— POST /api/auth/session/touch — idle-warning "stay signed in" ——— */
+
+export interface TouchResponse {
+  expiresInSeconds: number
+}
+
+/* ——— GET /api/auth/sessions · DELETE /api/auth/sessions/:id ——— */
+
+export interface SessionsResponse {
+  sessions: SessionInfo[]
+}
+
+/* ——— MFA ——— */
+
+export interface MfaSetupResponse {
+  /** otpauth:// URI rendered as a data-URL QR by the server. */
+  qrDataUrl: string
+  /** Grouped manual-entry key, e.g. "NETL OG7K Q2VD 8XT4 J9RM". */
+  manualKey: string
+}
+
+export const mfaVerifySchema = z.object({
+  code: z.string().regex(/^\d{6}$/),
+  /** Only meaningful during enrolment; the sign-in step reads trustDevice. */
+  trustDevice: z.boolean().default(false),
+})
+export type MfaVerifyRequest = z.infer<typeof mfaVerifySchema>
+
+export interface MfaVerifyResponse {
+  state: Extract<AuthState, 'signedIn' | 'firstSignIn'>
+  user?: SessionUser
+  /** Returned once, on enrolment confirmation. Shown then never again. */
+  recoveryCodes?: string[]
+}
+
+export const mfaRecoverySchema = z.object({
+  code: z
+    .string()
+    .trim()
+    .toUpperCase()
+    .regex(/^[A-Z0-9]{4}-[A-Z0-9]{4}$/),
+})
+export type MfaRecoveryRequest = z.infer<typeof mfaRecoverySchema>
+
+export interface MfaRecoveryResponse {
+  state: Extract<AuthState, 'signedIn' | 'firstSignIn'>
+  user?: SessionUser
+  /** How many unused codes are left, so the UI can nudge a regeneration. */
+  codesRemaining: number
+}
+
+/* ——— Password reset & first sign-in ——— */
+
+export const resetRequestSchema = z.object({
+  email: z.string().trim().email().max(320),
+})
+export type ResetRequestBody = z.infer<typeof resetRequestSchema>
+
+/** Always 202 with the same body — existence of an address is never disclosed. */
+export interface ResetRequestResponse {
+  accepted: true
+}
+
+export const resetConfirmSchema = z
+  .object({
+    token: z.string().min(16).max(256),
+    password: z.string().min(10).max(512),
+    passwordAgain: z.string().min(10).max(512),
+    revokeOtherSessions: z.boolean().default(true),
+    /** Required on the `welcome` (first sign-in) variant of the screen. */
+    acceptPolicy: z.boolean().default(false),
+  })
+  .refine((v) => v.password === v.passwordAgain, {
+    path: ['passwordAgain'],
+    params: { code: 'password_mismatch' },
+    message: 'err.passwordMismatch',
+  })
+export type ResetConfirmRequest = z.infer<typeof resetConfirmSchema>
+
+export interface ResetConfirmResponse {
+  state: Extract<AuthState, 'anonymous' | 'signedIn' | 'mfaRequired'>
+  /** Where the screen should continue: sign-in, MFA enrolment, or the console. */
+  next: 'signin' | 'mfa-setup' | 'console'
+  revokedSessions: number
+}
+
+/** Server-side mirror of the five policy rules the strength meter renders. */
+export interface PasswordPolicyResult {
+  minLength: boolean
+  mixedCase: boolean
+  digit: boolean
+  symbol: boolean
+  noIdentity: boolean
+  ok: boolean
+  /** 0–3, matching the four meter segments. */
+  strength: 0 | 1 | 2 | 3
+}
+
+/* ——— Invitations ——— */
+
+export interface InvitationResponse {
+  invitation: Invitation
+}
+
+export const invitationResendSchema = z.object({}).default({})
+
+/** GET /api/invitations/:token/preview — powers the `#/welcome` screen. */
+export interface InvitationPreviewResponse {
+  state: Invitation['state']
+  fullName: string
+  email: string
+  expiresAt: string
+}
+
+/* ——— Access requests ——— */
+
+export const accessRequestSchema = z.object({
+  fullName: z.string().trim().min(2).max(160),
+  /** Local part only; the domain suffix is fixed by the form and the server. */
+  username: z
+    .string()
+    .trim()
+    .toLowerCase()
+    .min(2)
+    .max(64)
+    .regex(/^[a-z0-9](?:[a-z0-9._-]*[a-z0-9])?$/, 'err.usernameChars'),
+  department: z.string().trim().min(1).max(64),
+  requestedRole: z.string().trim().min(1).max(48),
+  note: z.string().trim().max(1024).optional(),
+})
+export type AccessRequestBody = z.infer<typeof accessRequestSchema>
+
+export interface AccessRequestResponse {
+  request: Pick<AccessRequest, 'id' | 'email' | 'status'>
+}
+
+/* ——— Roles (read side is needed by the console shell guard) ——— */
+
+export interface RolesResponse {
+  roles: Array<{ name: Role; permissions: Permission[]; isSystem: boolean }>
+}
+
+/* ——— Step 6 · Users, assignments and roles ——— */
+
+/** GET /api/users — server-side slicing; the total is always returned. */
+export interface UsersListResponse {
+  users: UserV3[]
+  total: number
+  totalUnfiltered: number
+  page: number
+  pageSize: number
+  without2fa: number
+  /** Site names the assign dialog and drawer offer. */
+  sites: string[]
+  /** Role names, ordered Admin → Supervisor → Editor → Viewer → custom. */
+  roles: string[]
+  /** Whether the caller may mutate — drives the read-only banner. */
+  canEdit: boolean
+}
+
+export const createUserSchema = z.object({
+  fullName: z.string().trim().min(2).max(160),
+  /** Local part or full address; a foreign domain is rejected, not rewritten. */
+  username: z
+    .string()
+    .trim()
+    .toLowerCase()
+    .min(2)
+    .max(64)
+    .regex(/^[a-z0-9](?:[a-z0-9._-]*[a-z0-9])?$/, 'err.usernameChars'),
+  role: z.string().trim().min(1).max(48),
+  org: z.enum(['internal', 'external']).default('internal'),
+  siteNames: z.array(z.string().trim().min(1)).default([]),
+})
+export type CreateUserRequest = z.infer<typeof createUserSchema>
+
+export interface CreateUserResponse {
+  user: UserV3
+  invitation: Invitation
+}
+
+export const updateUserSchema = z.object({
+  fullName: z.string().trim().min(2).max(160).optional(),
+  email: z.string().trim().email().max(320).optional(),
+  username: z
+    .string()
+    .trim()
+    .toLowerCase()
+    .min(2)
+    .max(64)
+    .regex(/^[a-z0-9](?:[a-z0-9._-]*[a-z0-9])?$/, 'err.usernameChars')
+    .optional(),
+  role: z.string().trim().min(1).max(48).optional(),
+  status: z.enum(['Active', 'Inactive', 'Invited']).optional(),
+})
+export type UpdateUserRequest = z.infer<typeof updateUserSchema>
+
+/**
+ * POST /api/users/bulk — the selection toolbar.
+ *
+ * `ids` is capped at 200 because the endpoint applies each account in its own
+ * statement and writes one audit row per account: the trail is per-account
+ * history, and collapsing it into a single "12 accounts changed" line would
+ * lose exactly the record the trail exists for.
+ *
+ * `requireMfa` from the prototype is deliberately absent — see the response
+ * type below.
+ */
+export const bulkUsersSchema = z.object({
+  action: z.enum(['roleViewer', 'revokeSessions', 'deactivate', 'delete']),
+  ids: z.array(z.string().trim().min(1)).min(1).max(200),
+})
+export type BulkUsersRequest = z.infer<typeof bulkUsersSchema>
+
+export interface BulkUsersResponse {
+  /** Accounts the action actually changed. */
+  applied: number
+  /**
+   * Accounts deliberately left alone, with the reason. The primary
+   * administrator and your own account are always skipped; the UI names them
+   * rather than silently reporting a smaller number than the user selected.
+   */
+  skipped: Array<{
+    id: string
+    label: string
+    reason: 'primaryAdmin' | 'self' | 'notFound' | 'noop'
+  }>
+}
+
+export interface UserDetailResponse {
+  user: UserV3 & {
+    effectivePermissions: Permission[]
+    isPrimaryAdmin: boolean
+    createdAt: string
+    passwordSetAt: string | null
+    activeSessions: number
+  }
+  sites: string[]
+  roles: string[]
+  canEdit: boolean
+}
+
+/** PUT /api/users/:id/assignments — `null` role removes access to that site. */
+export const assignmentsSchema = z.object({
+  siteRoles: z.record(z.string(), z.string().nullable()),
+})
+export type AssignmentsRequest = z.infer<typeof assignmentsSchema>
+
+/** POST /api/users/:id/temp-password — the raw password is returned once. */
+export interface TempPasswordResponse {
+  temporaryPassword: string
+}
+
+/* ——— Access request review ——— */
+
+export interface PendingRequestsResponse {
+  requests: AccessRequest[]
+}
+
+export const approveRequestSchema = z.object({
+  role: z.string().trim().min(1).max(48),
+  siteNames: z.array(z.string().trim().min(1)).min(1, 'err.siteRequired'),
+  org: z.enum(['internal', 'external']).default('internal'),
+})
+export type ApproveRequestBody = z.infer<typeof approveRequestSchema>
+
+export interface ApproveRequestResponse {
+  user: UserV3
+  invitation: Invitation
+  /**
+   * False when the invitation email could not be handed to the mail server.
+   * The account still exists and the invitation is still valid — it just has
+   * to be resent, or the link delivered another way.
+   */
+  mailDelivered: boolean
+}
+
+/* ——— Roles ——— */
+
+export const createRoleSchema = z.object({
+  name: z.string().trim().min(2).max(48),
+})
+export type CreateRoleRequest = z.infer<typeof createRoleSchema>
+
+export const updateRoleSchema = z.object({
+  permissions: z.array(z.string()).max(32),
+})
+export type UpdateRoleRequest = z.infer<typeof updateRoleSchema>
+
+export interface RolesFullResponse {
+  roles: Array<{ name: Role; permissions: Permission[]; isSystem: boolean; userCount: number }>
+  canEdit: boolean
+}
+
+/** DELETE /api/roles/:name — the role's users fall back to Viewer. */
+export interface DeleteRoleResponse {
+  reassigned: number
+}
+
+/* ——— Step 7 · Sites, jobs, integrations and settings ——— */
+
+export const createSiteSchema = z.object({
+  name: z.string().trim().min(2).max(120),
+  /** Where provisioning starts from; carried in the job payload. */
+  template: z.enum(['empty', 'ifc', 'copy']).default('empty'),
+  footprintM2: z.number().int().min(0).max(10_000_000).nullable().optional(),
+})
+export type CreateSiteRequest = z.infer<typeof createSiteSchema>
+
+export interface SitesResponse {
+  sites: Site[]
+  canEdit: boolean
+}
+
+export interface JobsResponse {
+  jobs: Job[]
+}
+
+/* ——— API keys ——— */
+
+export const createKeySchema = z.object({
+  name: z.string().trim().min(2).max(120),
+  scope: z.enum(['read', 'read_write']).default('read'),
+  /** Site name, or null for "every site". */
+  siteName: z.string().trim().min(1).nullable().optional(),
+})
+export type CreateKeyRequest = z.infer<typeof createKeySchema>
+
+export interface KeysResponse {
+  keys: ApiKey[]
+  sites: string[]
+  canEdit: boolean
+}
+
+/** The raw key is present exactly once, in this response, and never stored. */
+export interface CreateKeyResponse {
+  key: ApiKey & { secret: string }
+}
+
+/* ——— Webhooks ——— */
+
+export const createWebhookSchema = z.object({
+  url: z.string().trim().url().max(2048).startsWith('https://', 'err.hookHttps'),
+  events: z.array(z.string().trim().min(1)).min(1, 'err.eventRequired').max(32),
+})
+export type CreateWebhookRequest = z.infer<typeof createWebhookSchema>
+
+export const patchWebhookSchema = z.object({
+  status: z.enum(['active', 'paused']),
+})
+export type PatchWebhookRequest = z.infer<typeof patchWebhookSchema>
+
+export interface WebhooksResponse {
+  webhooks: Webhook[]
+  events: string[]
+  canEdit: boolean
+}
+
+export interface WebhookTestResponse {
+  delivered: boolean
+  status: Webhook['status']
+  /** HTTP status the endpoint answered with, or null if it never responded. */
+  responseStatus: number | null
+}
+
+/* ——— Org settings ——— */
+
+export const updateSettingsSchema = z.object({
+  sessionMinutes: z.number().int().min(5).max(1440).optional(),
+  keepSignedInAllowed: z.boolean().optional(),
+  keepSignedInDays: z.number().int().min(1).max(90).optional(),
+  trustedDeviceDays: z.number().int().min(1).max(365).optional(),
+  concurrentSessionLimit: z.number().int().min(1).max(50).optional(),
+  mfaRequired: z.boolean().optional(),
+  ssoEnforcedDomains: z.array(z.string().trim().min(2).max(190)).max(20).optional(),
+  externalUsersAllowed: z.boolean().optional(),
+  inviteExpiryDays: z.number().int().min(1).max(90).optional(),
+})
+export type UpdateSettingsRequest = z.infer<typeof updateSettingsSchema>
+
+export interface SettingsResponse {
+  settings: OrgSettings
+  canEdit: boolean
+}
+
+/* ——— Step 8 · Diagnostics, telemetry and changelog ——— */
+
+export const telemetrySchema = z.object({
+  message: z.string().trim().min(1).max(1024),
+  source: z.string().trim().max(512).optional(),
+  line: z.number().int().min(0).max(10_000_000).optional(),
+  column: z.number().int().min(0).max(10_000_000).optional(),
+  stack: z.string().trim().max(4000).optional(),
+})
+export type TelemetryRequest = z.infer<typeof telemetrySchema>
+
+export interface HealthResponse {
+  cpuPercent: number
+  heapGb: number
+  systemUsedGb: number
+  systemTotalGb: number
+  loadAverage1m: number
+  cores: number
+  uptimeSeconds: number
+  at: string
+}
+
+export interface LogsResponse {
+  entries: Array<{
+    id: string
+    level: 'info' | 'warn' | 'error'
+    kind: string | null
+    actor: string
+    message: string
+    meta: Record<string, unknown> | null
+    createdAt: string
+    permanent: boolean
+  }>
+  nextCursor: string | null
+  actors: string[]
+  counts: { info: number; warn: number; error: number }
+  canClear?: boolean
+  kinds?: string[]
+}
+
+export interface OverviewResponse {
+  health: HealthResponse
+  counts: {
+    users: number
+    activeUsers: number
+    sites: number
+    activeSites: number
+    signedIn: number
+    without2fa: number
+    queuedJobs: number
+  }
+  connected: Array<{ actor: string; lastAction: string; at: string }>
+  incidents: LogsResponse['entries']
+}
+
+/** One changelog entry, source-agnostic — the UI never names the upstream repo. */
+export interface ReleaseEntry {
+  id: string
+  title: string
+  summary: string
+  version: string | null
+  date: string
+  tags: string[]
+  authors: string[]
+  /** Which product line the entry belongs to. */
+  channel: 'editor' | 'plugin' | 'console'
+}
+
+export interface ChangelogResponse {
+  entries: ReleaseEntry[]
+  nextCursor: string | null
+  /** Whether the payload came from upstream or the bundled snapshot. */
+  live: boolean
+  fetchedAt: string
+}
diff --git a/apps/editor/panel/lib/api.ts b/apps/editor/panel/lib/api.ts
new file mode 100644
index 000000000..a5c9671dc
--- /dev/null
+++ b/apps/editor/panel/lib/api.ts
@@ -0,0 +1,96 @@
+import { NextResponse } from 'next/server'
+import { ZodError, type ZodType } from 'zod'
+import type { ApiError, ApiErrorCode } from './api-contract'
+
+const STATUS: Record<ApiErrorCode, number> = {
+  invalid_credentials: 401,
+  account_locked: 423,
+  account_inactive: 403,
+  account_suspended: 403,
+  sso_required: 403,
+  mfa_required: 401,
+  mfa_invalid: 401,
+  mfa_not_enrolled: 409,
+  recovery_invalid: 401,
+  token_invalid: 400,
+  token_expired: 410,
+  invite_expired: 410,
+  invite_revoked: 410,
+  password_policy: 422,
+  password_mismatch: 422,
+  unauthenticated: 401,
+  forbidden: 403,
+  not_found: 404,
+  conflict: 409,
+  validation: 422,
+  rate_limited: 429,
+  server_error: 500,
+}
+
+export function ok<T>(body: T, init?: ResponseInit): NextResponse<T> {
+  return NextResponse.json(body, init)
+}
+
+export function fail(
+  code: ApiErrorCode,
+  message: string,
+  details?: Record<string, unknown>,
+): NextResponse<ApiError> {
+  return NextResponse.json(
+    { error: { code, message, ...(details ? { details } : {}) } },
+    { status: STATUS[code] },
+  )
+}
+
+/**
+ * Parses a JSON body against a schema. Returns a discriminated result so the
+ * handler stays flat — no try/catch around every route.
+ */
+export async function parseBody<T>(
+  request: Request,
+  schema: ZodType<T>,
+): Promise<{ ok: true; data: T } | { ok: false; response: NextResponse<ApiError> }> {
+  let raw: unknown
+  try {
+    raw = await request.json()
+  } catch {
+    return { ok: false, response: fail('validation', 'err.badJson') }
+  }
+
+  try {
+    return { ok: true, data: schema.parse(raw) }
+  } catch (err) {
+    if (err instanceof ZodError) {
+      const first = err.issues[0]
+      // A schema-level refine can carry a specific code (password_mismatch);
+      // anything else is a plain validation failure.
+      const params = (first as { params?: { code?: ApiErrorCode } } | undefined)?.params
+      const code = params?.code ?? 'validation'
+      return {
+        ok: false,
+        response: fail(
+          code,
+          first?.message?.startsWith('err.') ? first.message : 'err.validation',
+          {
+            field: first?.path.join('.') ?? null,
+          },
+        ),
+      }
+    }
+    return { ok: false, response: fail('validation', 'err.validation') }
+  }
+}
+
+/** Wraps a handler so an unexpected throw becomes a 500 envelope, not an HTML page. */
+export function handler<A extends unknown[]>(
+  fn: (...args: A) => Promise<NextResponse>,
+): (...args: A) => Promise<NextResponse> {
+  return async (...args: A) => {
+    try {
+      return await fn(...args)
+    } catch (err) {
+      console.error('[api]', err)
+      return fail('server_error', 'err.server')
+    }
+  }
+}
diff --git a/apps/editor/panel/lib/audit-events.ts b/apps/editor/panel/lib/audit-events.ts
new file mode 100644
index 000000000..0cc1dee89
--- /dev/null
+++ b/apps/editor/panel/lib/audit-events.ts
@@ -0,0 +1,110 @@
+/**
+ * Structured audit events.
+ *
+ * The trail stores English prose in `audit_log.message` and always will: it is
+ * an immutable record, and rewriting stored history so it reads differently to
+ * different people is the one thing an audit trail must not do. Exports,
+ * forensics and grep all want that column stable.
+ *
+ * What a *reader* wants is their own language. So every write also carries an
+ * event key and its parameters, and the screens render from those. The stored
+ * sentence is the record; the rendered sentence is the presentation.
+ *
+ * The key lives inside the existing `meta` JSON rather than in a new column —
+ * no migration, and rows written before this existed simply fall back to their
+ * stored message. That fallback is permanent, not transitional: history written
+ * by an older build stays readable exactly as it was written.
+ *
+ * This module must stay free of Node imports; both the server writer and the
+ * client renderer pull it in.
+ */
+
+export type AuditEventKey =
+  | 'signedOut'
+  | 'signedOutAll'
+  | 'signInUnknown'
+  | 'signInSuspended'
+  | 'signInWrongPassword'
+  | 'signInAwaitingMfa'
+  | 'signedIn'
+  | 'signedInMfaCleared'
+  | 'sessionRevoked'
+  | 'allSessionsRevoked'
+  | 'sessionsRevokedFor'
+  | 'resetIssued'
+  | 'resetUnroutable'
+  | 'passwordChanged'
+  | 'passwordChangedFirst'
+  | 'inviteAccepted'
+  | 'inviteRevoked'
+  | 'inviteResent'
+  | 'mfaEnrolStarted'
+  | 'mfaEnrolled'
+  | 'mfaCodeRejected'
+  | 'recoveryUsed'
+  | 'recoveryRejected'
+  | 'userInvited'
+  | 'userUpdated'
+  | 'userUpdatedPlain'
+  | 'userDeleted'
+  | 'tempPassword'
+  | 'siteAccessChanged'
+  | 'roleCreated'
+  | 'rolePermissions'
+  | 'roleDeleted'
+  | 'siteCreated'
+  | 'siteArchived'
+  | 'siteRestored'
+  | 'jobRequeued'
+  | 'jobCancelled'
+  | 'apiKeyCreated'
+  | 'apiKeyRevoked'
+  | 'webhookAdded'
+  | 'webhookPaused'
+  | 'webhookResumed'
+  | 'webhookDeleted'
+  | 'webhookTestDelivered'
+  | 'webhookTestFailed'
+  | 'settingsChanged'
+  | 'diagnosticsCleared'
+  | 'accountRequested'
+  | 'requestIgnoredExists'
+  | 'requestIgnoredPending'
+  | 'requestApproved'
+  | 'requestRejected'
+  | 'browserError'
+
+export interface AuditEvent {
+  /** Key into the `audit` dictionary block. */
+  k: AuditEventKey
+  /** Placeholder values, already formatted. */
+  p?: Record<string, string | number>
+}
+
+/** Reserved slot inside `audit_log.meta`. */
+export const AUDIT_EVENT_FIELD = 'event'
+
+/**
+ * Pulls the event back out of a stored `meta` blob.
+ *
+ * Deliberately forgiving: a row whose meta is missing, malformed, or written by
+ * an older build returns null and the caller falls back to the stored message.
+ * A log screen that throws because one row is odd is worse than one line of
+ * English.
+ */
+export function readAuditEvent(
+  meta: Record<string, unknown> | null | undefined,
+): AuditEvent | null {
+  if (!meta) return null
+  const raw = meta[AUDIT_EVENT_FIELD]
+  if (!raw || typeof raw !== 'object') return null
+
+  const candidate = raw as { k?: unknown; p?: unknown }
+  if (typeof candidate.k !== 'string') return null
+
+  return {
+    k: candidate.k as AuditEventKey,
+    p:
+      candidate.p && typeof candidate.p === 'object' ? (candidate.p as AuditEvent['p']) : undefined,
+  }
+}
diff --git a/apps/editor/panel/lib/auth/audit.ts b/apps/editor/panel/lib/auth/audit.ts
new file mode 100644
index 000000000..f730e20e1
--- /dev/null
+++ b/apps/editor/panel/lib/auth/audit.ts
@@ -0,0 +1,45 @@
+import { AUDIT_EVENT_FIELD, type AuditEvent } from '../audit-events'
+import { exec } from '../db'
+
+export type AuditLevel = 'info' | 'warn' | 'error'
+
+/**
+ * Append-only trail. Every mutation writes one row; clearing diagnostics never
+ * touches this table (section 08). Failures here must not break the request that
+ * triggered them — a lost log line is bad, a 500 on a successful sign-in is worse.
+ *
+ * `message` is the stored record and stays English. `event` is what the screens
+ * render from, so a Turkish reader sees Turkish without the stored history ever
+ * changing. See `src/lib/audit-events.ts` for why those are separate.
+ */
+export async function audit(entry: {
+  actorUserId?: number | null
+  actorLabel: string
+  level: AuditLevel
+  kind: string
+  message: string
+  event?: AuditEvent
+  meta?: Record<string, unknown> | null
+}): Promise<void> {
+  // The event rides inside meta; callers keep using meta for anything else.
+  const meta = entry.event
+    ? { ...(entry.meta ?? {}), [AUDIT_EVENT_FIELD]: entry.event }
+    : entry.meta
+
+  try {
+    await exec(
+      `INSERT INTO audit_log (actor_user_id, actor_label, level, kind, message, meta)
+       VALUES (?, ?, ?, ?, ?, ?)`,
+      [
+        entry.actorUserId ?? null,
+        entry.actorLabel.slice(0, 64),
+        entry.level,
+        entry.kind.slice(0, 48),
+        entry.message.slice(0, 1024),
+        meta ? JSON.stringify(meta) : null,
+      ],
+    )
+  } catch (err) {
+    console.error('[audit] write failed:', err)
+  }
+}
diff --git a/apps/editor/panel/lib/auth/crypto.ts b/apps/editor/panel/lib/auth/crypto.ts
new file mode 100644
index 000000000..eccc75f68
--- /dev/null
+++ b/apps/editor/panel/lib/auth/crypto.ts
@@ -0,0 +1,61 @@
+import {
+  createCipheriv,
+  createDecipheriv,
+  createHash,
+  randomBytes,
+  timingSafeEqual,
+} from 'node:crypto'
+
+/**
+ * AES-256-GCM at-rest encryption for the two secrets the schema marks as
+ * "encrypted in the app layer": two_factor.totp_secret and webhooks.secret.
+ * Layout: [12-byte IV][16-byte auth tag][ciphertext].
+ */
+const IV_BYTES = 12
+const TAG_BYTES = 16
+
+function key(): Buffer {
+  const raw = process.env.SECRET_ENCRYPTION_KEY
+  if (!raw) {
+    throw new Error(
+      'SECRET_ENCRYPTION_KEY is not set. Generate one with:\n' +
+        "  node -e \"console.log(require('crypto').randomBytes(32).toString('base64'))\"",
+    )
+  }
+  const buf = Buffer.from(raw, 'base64')
+  if (buf.length !== 32) throw new Error('SECRET_ENCRYPTION_KEY must decode to exactly 32 bytes.')
+  return buf
+}
+
+export function encryptSecret(plain: string): Buffer {
+  const iv = randomBytes(IV_BYTES)
+  const cipher = createCipheriv('aes-256-gcm', key(), iv)
+  const ciphertext = Buffer.concat([cipher.update(plain, 'utf8'), cipher.final()])
+  return Buffer.concat([iv, cipher.getAuthTag(), ciphertext])
+}
+
+export function decryptSecret(packed: Buffer): string {
+  if (packed.length <= IV_BYTES + TAG_BYTES) throw new Error('encrypted payload is truncated')
+  const iv = packed.subarray(0, IV_BYTES)
+  const tag = packed.subarray(IV_BYTES, IV_BYTES + TAG_BYTES)
+  const ciphertext = packed.subarray(IV_BYTES + TAG_BYTES)
+  const decipher = createDecipheriv('aes-256-gcm', key(), iv)
+  decipher.setAuthTag(tag)
+  return Buffer.concat([decipher.update(ciphertext), decipher.final()]).toString('utf8')
+}
+
+/** SHA-256, the hash the schema stores for invite tokens and recovery codes. */
+export function sha256(value: string): Buffer {
+  return createHash('sha256').update(value, 'utf8').digest()
+}
+
+/** Constant-time compare that tolerates length mismatch without throwing. */
+export function safeEqual(a: Buffer, b: Buffer): boolean {
+  if (a.length !== b.length) return false
+  return timingSafeEqual(a, b)
+}
+
+/** URL-safe single-use token for invitations and password-reset links. */
+export function newToken(): string {
+  return randomBytes(32).toString('base64url')
+}
diff --git a/apps/editor/panel/lib/auth/guard.ts b/apps/editor/panel/lib/auth/guard.ts
new file mode 100644
index 000000000..0664776c3
--- /dev/null
+++ b/apps/editor/panel/lib/auth/guard.ts
@@ -0,0 +1,30 @@
+import type { Permission } from '../types'
+import { type ActiveSession, getSession } from './session'
+
+export type GuardFailure = 'unauthenticated' | 'mfa_required' | 'forbidden'
+
+export type GuardResult = { ok: true; session: ActiveSession } | { ok: false; reason: GuardFailure }
+
+/**
+ * Server-side permission gate. Section 08's rule, restated: the console only
+ * edits, the server enforces. Client-side permission checks exist to hide UI —
+ * they are never the thing that stops a request.
+ *
+ * An mfaPending session is treated as not-signed-in for every purpose except the
+ * MFA endpoints themselves, which read the session directly.
+ */
+export async function requirePermission(...required: Permission[]): Promise<GuardResult> {
+  const session = await getSession()
+  if (!session) return { ok: false, reason: 'unauthenticated' }
+  if (session.mfaPending) return { ok: false, reason: 'mfa_required' }
+
+  const granted = new Set(session.user.permissions)
+  if (required.every((perm) => granted.has(perm))) return { ok: true, session }
+
+  return { ok: false, reason: 'forbidden' }
+}
+
+/** Signed-in, MFA cleared, no particular permission needed. */
+export async function requireSession(): Promise<GuardResult> {
+  return requirePermission()
+}
diff --git a/apps/editor/panel/lib/auth/invitations.ts b/apps/editor/panel/lib/auth/invitations.ts
new file mode 100644
index 000000000..769963db2
--- /dev/null
+++ b/apps/editor/panel/lib/auth/invitations.ts
@@ -0,0 +1,176 @@
+import { ulid } from 'ulid'
+import { exec, query, queryOne, type RowDataPacket, transaction } from '../db'
+import { getSettings } from '../settings'
+import type { Invitation } from '../types'
+import { newToken, sha256 } from './crypto'
+
+interface InvitationRow extends RowDataPacket {
+  id: number
+  public_id: string
+  user_id: number
+  user_public_id: string
+  invited_by_email: string | null
+  expires_at: Date
+  resent_count: number
+  accepted_at: Date | null
+  revoked_at: Date | null
+}
+
+/**
+ * LEFT JOIN on the inviter, not INNER: migration 006 lets `invited_by` go NULL
+ * when the administrator who sent the invitation is deleted. An INNER JOIN
+ * would match nothing, and `resolveInvitationToken` would answer "this link is
+ * not valid" to somebody holding a perfectly good invitation.
+ */
+const SELECT = `
+  SELECT i.id, i.public_id, i.user_id, u.public_id AS user_public_id,
+         b.email AS invited_by_email, i.expires_at, i.resent_count,
+         i.accepted_at, i.revoked_at
+    FROM invitations i
+    JOIN users u ON u.id = i.user_id
+    LEFT JOIN users b ON b.id = i.invited_by
+`
+
+/**
+ * Derived state, never stored. `expired` is a function of the clock, so keeping
+ * a column for it would need a cron job to stay honest.
+ */
+function stateOf(row: InvitationRow): Invitation['state'] {
+  if (row.revoked_at) return 'revoked'
+  if (row.accepted_at) return 'accepted'
+  return row.expires_at.getTime() <= Date.now() ? 'expired' : 'pending'
+}
+
+function toInvitation(row: InvitationRow): Invitation {
+  return {
+    id: row.public_id,
+    userId: row.user_public_id,
+    invitedBy: row.invited_by_email ?? '—',
+    expiresAt: row.expires_at.toISOString(),
+    resentCount: row.resent_count,
+    acceptedAt: row.accepted_at ? row.accepted_at.toISOString() : null,
+    revokedAt: row.revoked_at ? row.revoked_at.toISOString() : null,
+    state: stateOf(row),
+  }
+}
+
+export interface IssuedInvitation {
+  invitation: Invitation
+  /** Raw token — belongs in the invite email and nowhere else. */
+  token: string
+}
+
+/**
+ * Issues an invite. Any earlier live invite for the same user is revoked first,
+ * so exactly one token can ever open an account.
+ */
+export async function issueInvitation(
+  userId: number,
+  invitedBy: number,
+): Promise<IssuedInvitation> {
+  const { inviteExpiryDays } = await getSettings()
+  const token = newToken()
+  const publicId = ulid()
+
+  await transaction(async (cx) => {
+    await cx.execute(
+      'UPDATE invitations SET revoked_at = NOW() WHERE user_id = ? AND accepted_at IS NULL AND revoked_at IS NULL',
+      [userId],
+    )
+    await cx.execute(
+      `INSERT INTO invitations (public_id, user_id, token_hash, invited_by, expires_at)
+       VALUES (?, ?, ?, ?, DATE_ADD(NOW(), INTERVAL ? DAY))`,
+      [publicId, userId, sha256(token), invitedBy, inviteExpiryDays],
+    )
+  })
+
+  const row = await queryOne<InvitationRow>(`${SELECT} WHERE i.public_id = ?`, [publicId])
+  if (!row) throw new Error('invitation insert did not round-trip')
+  return { invitation: toInvitation(row), token }
+}
+
+/**
+ * Renews an invite: new token, resent_count + 1, expiry pushed out from now.
+ * A revoked or already-accepted invite is not renewable — issue a new one.
+ */
+export async function resendInvitation(publicId: string): Promise<IssuedInvitation | null> {
+  const row = await queryOne<InvitationRow>(`${SELECT} WHERE i.public_id = ?`, [publicId])
+  if (!row || row.accepted_at || row.revoked_at) return null
+
+  const { inviteExpiryDays } = await getSettings()
+  const token = newToken()
+
+  await exec(
+    `UPDATE invitations
+        SET token_hash = ?, resent_count = resent_count + 1,
+            expires_at = DATE_ADD(NOW(), INTERVAL ? DAY)
+      WHERE id = ?`,
+    [sha256(token), inviteExpiryDays, row.id],
+  )
+
+  const fresh = await queryOne<InvitationRow>(`${SELECT} WHERE i.id = ?`, [row.id])
+  return fresh ? { invitation: toInvitation(fresh), token } : null
+}
+
+export async function revokeInvitation(publicId: string): Promise<Invitation | null> {
+  const row = await queryOne<InvitationRow>(`${SELECT} WHERE i.public_id = ?`, [publicId])
+  if (!row || row.accepted_at) return null
+
+  await exec('UPDATE invitations SET revoked_at = NOW() WHERE id = ? AND revoked_at IS NULL', [
+    row.id,
+  ])
+  const fresh = await queryOne<InvitationRow>(`${SELECT} WHERE i.id = ?`, [row.id])
+  return fresh ? toInvitation(fresh) : null
+}
+
+export interface ResolvedInvitation {
+  invitationId: number
+  userId: number
+  fullName: string
+  email: string
+  expiresAt: Date
+  state: Invitation['state']
+}
+
+/** Looks an invite up by its raw token. Expiry is enforced here, at sign-in. */
+export async function resolveInvitationToken(token: string): Promise<ResolvedInvitation | null> {
+  const row = await queryOne<InvitationRow & { full_name: string; email: string }>(
+    `SELECT i.id, i.public_id, i.user_id, u.public_id AS user_public_id,
+            b.email AS invited_by_email, i.expires_at, i.resent_count,
+            i.accepted_at, i.revoked_at, u.full_name, u.email
+       FROM invitations i
+       JOIN users u ON u.id = i.user_id
+       LEFT JOIN users b ON b.id = i.invited_by
+      WHERE i.token_hash = ?`,
+    [sha256(token)],
+  )
+  if (!row) return null
+
+  return {
+    invitationId: row.id,
+    userId: row.user_id,
+    fullName: row.full_name,
+    email: row.email,
+    expiresAt: row.expires_at,
+    state: stateOf(row),
+  }
+}
+
+export async function markInvitationAccepted(invitationId: number): Promise<void> {
+  await exec('UPDATE invitations SET accepted_at = NOW() WHERE id = ? AND accepted_at IS NULL', [
+    invitationId,
+  ])
+}
+
+export async function invitationForUser(userId: number): Promise<Invitation | null> {
+  const rows = await query<InvitationRow>(
+    `${SELECT} WHERE i.user_id = ? ORDER BY i.created_at DESC LIMIT 1`,
+    [userId],
+  )
+  return rows[0] ? toInvitation(rows[0]) : null
+}
+
+/** Whole days left, floored at 0 — the "N days left" badge in the list and drawer. */
+export function daysLeft(expiresAt: string): number {
+  return Math.max(0, Math.ceil((new Date(expiresAt).getTime() - Date.now()) / 86_400_000))
+}
diff --git a/apps/editor/panel/lib/auth/lockout.ts b/apps/editor/panel/lib/auth/lockout.ts
new file mode 100644
index 000000000..56185d8dc
--- /dev/null
+++ b/apps/editor/panel/lib/auth/lockout.ts
@@ -0,0 +1,76 @@
+import { exec, queryOne, type RowDataPacket } from '../db'
+
+/**
+ * Failed-attempt policy. The prototype locks for 30 s after 3 misses and shows a
+ * countdown on the button; the panel report (Y2) asks for a wider window before
+ * a longer lock. Both are honoured: a short lock at 3, a long one at 10.
+ */
+export const SOFT_LOCK_AFTER = 3
+export const SOFT_LOCK_SECONDS = 30
+export const HARD_LOCK_AFTER = 10
+export const HARD_LOCK_SECONDS = 15 * 60
+
+export interface LockState {
+  locked: boolean
+  /** Whole seconds until sign-in reopens; 0 when not locked. */
+  retryAfterSeconds: number
+  failedAttempts: number
+  /** Misses left before the next lock kicks in. */
+  attemptsLeft: number
+}
+
+export function lockStateFrom(failedAttempts: number, lockedUntil: Date | null): LockState {
+  const now = Date.now()
+  const locked = lockedUntil !== null && lockedUntil.getTime() > now
+  const threshold = failedAttempts >= HARD_LOCK_AFTER ? HARD_LOCK_AFTER : SOFT_LOCK_AFTER
+
+  return {
+    locked,
+    retryAfterSeconds: locked ? Math.ceil((lockedUntil!.getTime() - now) / 1000) : 0,
+    failedAttempts,
+    attemptsLeft: Math.max(0, threshold - failedAttempts),
+  }
+}
+
+export async function readLockState(userId: number): Promise<LockState> {
+  const row = await queryOne<
+    RowDataPacket & { failed_attempts: number; locked_until: Date | null }
+  >('SELECT failed_attempts, locked_until FROM users WHERE id = ?', [userId])
+  return lockStateFrom(row?.failed_attempts ?? 0, row?.locked_until ?? null)
+}
+
+/** Records a miss and applies the lock once a threshold is crossed. */
+export async function registerFailure(userId: number): Promise<LockState> {
+  await exec('UPDATE users SET failed_attempts = failed_attempts + 1 WHERE id = ?', [userId])
+
+  const row = await queryOne<
+    RowDataPacket & { failed_attempts: number; locked_until: Date | null }
+  >('SELECT failed_attempts, locked_until FROM users WHERE id = ?', [userId])
+  const attempts = row?.failed_attempts ?? 1
+
+  // Re-lock on every miss past a threshold, so hammering a locked account keeps
+  // pushing the window out instead of waiting it down.
+  const seconds =
+    attempts >= HARD_LOCK_AFTER
+      ? HARD_LOCK_SECONDS
+      : attempts >= SOFT_LOCK_AFTER
+        ? SOFT_LOCK_SECONDS
+        : 0
+
+  if (seconds > 0) {
+    await exec('UPDATE users SET locked_until = DATE_ADD(NOW(), INTERVAL ? SECOND) WHERE id = ?', [
+      seconds,
+      userId,
+    ])
+    return lockStateFrom(attempts, new Date(Date.now() + seconds * 1000))
+  }
+
+  return lockStateFrom(attempts, row?.locked_until ?? null)
+}
+
+export async function clearFailures(userId: number): Promise<void> {
+  await exec(
+    'UPDATE users SET failed_attempts = 0, locked_until = NULL, last_seen_at = NOW() WHERE id = ?',
+    [userId],
+  )
+}
diff --git a/apps/editor/panel/lib/auth/password.ts b/apps/editor/panel/lib/auth/password.ts
new file mode 100644
index 000000000..7df3b63d1
--- /dev/null
+++ b/apps/editor/panel/lib/auth/password.ts
@@ -0,0 +1,84 @@
+import { hash, verify } from '@node-rs/argon2'
+
+/**
+ * argon2id at the OWASP second-recommended setting (19 MiB, t=2, p=1). Kept in
+ * one place so a future cost bump is a single edit and old hashes still verify —
+ * the parameters travel inside the encoded hash string.
+ */
+// 2 is Algorithm.Argon2id. Spelled numerically because the exported enum is an
+// ambient const enum, which isolatedModules cannot read at runtime.
+const ARGON2ID = 2
+
+const OPTS = {
+  algorithm: ARGON2ID,
+  memoryCost: 19456,
+  timeCost: 2,
+  parallelism: 1,
+} as const
+
+export async function hashPassword(plain: string): Promise<Buffer> {
+  return Buffer.from(await hash(plain, OPTS), 'utf8')
+}
+
+/**
+ * Verifies a password against a stored hash. Returns false rather than throwing
+ * on a malformed hash so a corrupt row reads as "wrong password", not a 500.
+ */
+export async function verifyPassword(stored: Buffer | null, plain: string): Promise<boolean> {
+  if (!stored || stored.length === 0) return false
+  try {
+    return await verify(stored.toString('utf8'), plain, OPTS)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Burns roughly one hash's worth of time on a miss. Without it, an unknown
+ * username answers measurably faster than a known one with a wrong password,
+ * which is exactly the disclosure the generic error message exists to prevent.
+ */
+export async function fakeVerify(): Promise<void> {
+  await hash('dt-timing-equaliser', OPTS)
+}
+
+/**
+ * Re-exported, not redefined: the rules live in a Node-free module so the
+ * strength meter and this server-side check can never drift apart.
+ */
+export { checkPasswordPolicy } from '../password-policy'
+
+/**
+ * Temporary password handed to an invited user. Deliberately satisfies the
+ * policy so the first sign-in is never blocked by its own bootstrap credential.
+ */
+export function generateTempPassword(): string {
+  const upper = 'ABCDEFGHJKLMNPQRSTUVWXYZ'
+  const lower = 'abcdefghijkmnpqrstuvwxyz'
+  const digits = '23456789'
+  const symbols = '!@#$%&*?'
+  const all = upper + lower + digits + symbols
+
+  const pick = (set: string) => set[randomInt(set.length)]
+  const chars = [pick(upper), pick(lower), pick(digits), pick(symbols)]
+  while (chars.length < 14) chars.push(pick(all))
+
+  // Fisher–Yates so the guaranteed classes are not always in positions 0–3.
+  for (let i = chars.length - 1; i > 0; i--) {
+    const j = randomInt(i + 1)
+    ;[chars[i], chars[j]] = [chars[j], chars[i]]
+  }
+  return chars.join('')
+}
+
+function randomInt(maxExclusive: number): number {
+  // Rejection sampling — plain `% max` skews toward the low end of the range.
+  const limit = Math.floor(0xffffffff / maxExclusive) * maxExclusive
+  const buf = new Uint32Array(1)
+  let value: number
+  do {
+    crypto.getRandomValues(buf)
+    value = buf[0] ?? 0
+  } while (value >= limit)
+  return value % maxExclusive
+}
diff --git a/apps/editor/panel/lib/auth/reset.ts b/apps/editor/panel/lib/auth/reset.ts
new file mode 100644
index 000000000..585579736
--- /dev/null
+++ b/apps/editor/panel/lib/auth/reset.ts
@@ -0,0 +1,77 @@
+import { exec, queryOne, type RowDataPacket } from '../db'
+import { newToken, sha256 } from './crypto'
+import { packIp } from './session'
+
+/** The reset screen promises "expires in 30 minutes" — that copy is the contract. */
+export const RESET_TTL_MINUTES = 30
+
+export interface IssuedReset {
+  token: string
+  expiresAt: Date
+}
+
+/**
+ * Issues a reset link. Any outstanding unused link for the account is burned
+ * first, so the newest email is always the only one that works.
+ */
+export async function issueReset(userId: number, ip: string | null): Promise<IssuedReset> {
+  const token = newToken()
+  const expiresAt = new Date(Date.now() + RESET_TTL_MINUTES * 60 * 1000)
+
+  await exec('UPDATE password_resets SET used_at = NOW() WHERE user_id = ? AND used_at IS NULL', [
+    userId,
+  ])
+  await exec(
+    'INSERT INTO password_resets (user_id, token_hash, expires_at, requested_ip) VALUES (?, ?, ?, ?)',
+    [userId, sha256(token), expiresAt, packIp(ip)],
+  )
+
+  return { token, expiresAt }
+}
+
+export type ResetTokenState = 'valid' | 'expired' | 'used' | 'unknown'
+
+export interface ResolvedReset {
+  state: ResetTokenState
+  resetId?: number
+  userId?: number
+  email?: string
+  username?: string
+}
+
+export async function resolveResetToken(token: string): Promise<ResolvedReset> {
+  const row = await queryOne<
+    RowDataPacket & {
+      id: number
+      user_id: number
+      expires_at: Date
+      used_at: Date | null
+      email: string
+      username: string
+    }
+  >(
+    `SELECT r.id, r.user_id, r.expires_at, r.used_at, u.email, u.username
+       FROM password_resets r
+       JOIN users u ON u.id = r.user_id
+      WHERE r.token_hash = ?`,
+    [sha256(token)],
+  )
+
+  if (!row) return { state: 'unknown' }
+  if (row.used_at) return { state: 'used' }
+  if (row.expires_at.getTime() <= Date.now()) return { state: 'expired' }
+
+  return {
+    state: 'valid',
+    resetId: row.id,
+    userId: row.user_id,
+    email: row.email,
+    username: row.username,
+  }
+}
+
+export async function markResetUsed(resetId: number): Promise<void> {
+  await exec('UPDATE password_resets SET used_at = NOW() WHERE id = ? AND used_at IS NULL', [
+    resetId,
+  ])
+}
diff --git a/apps/editor/panel/lib/auth/roles.ts b/apps/editor/panel/lib/auth/roles.ts
new file mode 100644
index 000000000..177a78937
--- /dev/null
+++ b/apps/editor/panel/lib/auth/roles.ts
@@ -0,0 +1,104 @@
+import { query, type RowDataPacket } from '../db'
+import { PERMISSIONS, type Permission, type Role, type RoleDefinition } from '../types'
+
+/**
+ * System roles are constants in code (section 10). The `roles` table only has to
+ * answer for custom roles, but the seed writes the system three as well so the
+ * Roles tab renders one uniform list. Code wins if the two ever disagree.
+ */
+const SYSTEM: Record<string, Permission[]> = {
+  Admin: [...PERMISSIONS],
+  Supervisor: [
+    'edit_projects',
+    'create_projects',
+    'delete_projects',
+    'access_settings',
+    'view_projects',
+    'edit_users',
+    'view_logs',
+  ],
+  Editor: [
+    'edit_projects',
+    'create_projects',
+    'delete_projects',
+    'access_settings',
+    'view_projects',
+  ],
+  Viewer: ['view_projects'],
+}
+
+let cache: { value: Map<string, RoleDefinition>; at: number } | null = null
+const TTL_MS = 5_000
+
+function isPermission(value: unknown): value is Permission {
+  return typeof value === 'string' && (PERMISSIONS as readonly string[]).includes(value)
+}
+
+async function loadRoles(): Promise<Map<string, RoleDefinition>> {
+  if (cache && Date.now() - cache.at < TTL_MS) return cache.value
+
+  const map = new Map<string, RoleDefinition>()
+  for (const [name, permissions] of Object.entries(SYSTEM)) {
+    map.set(name, { name, permissions, isSystem: true })
+  }
+
+  try {
+    const rows = await query<
+      RowDataPacket & { name: string; permissions: unknown; is_system: number }
+    >('SELECT name, permissions, is_system FROM roles')
+    for (const row of rows) {
+      if (SYSTEM[row.name]) continue // code definition wins for system roles
+      const raw = typeof row.permissions === 'string' ? safeParse(row.permissions) : row.permissions
+      const permissions = Array.isArray(raw) ? raw.filter(isPermission) : []
+      map.set(row.name, { name: row.name, permissions, isSystem: row.is_system === 1 })
+    }
+  } catch {
+    // Roles table not migrated yet — the system three are enough to sign in.
+  }
+
+  cache = { value: map, at: Date.now() }
+  return map
+}
+
+function safeParse(raw: string): unknown {
+  try {
+    return JSON.parse(raw)
+  } catch {
+    return null
+  }
+}
+
+export function invalidateRolesCache(): void {
+  cache = null
+}
+
+export async function permissionsForRole(role: string): Promise<Permission[]> {
+  const roles = await loadRoles()
+  // An unknown role grants nothing rather than falling back to Viewer — a typo
+  // in a role name must not silently hand out read access.
+  return roles.get(role)?.permissions ?? []
+}
+
+export async function allRoles(): Promise<RoleDefinition[]> {
+  const roles = await loadRoles()
+  const order = ['Admin', 'Supervisor', 'Editor', 'Viewer']
+  return [...roles.values()].sort((a, b) => {
+    const ai = order.indexOf(a.name)
+    const bi = order.indexOf(b.name)
+    if (ai !== -1 || bi !== -1) return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi)
+    // Custom roles alphabetically, with the Turkish collator so İ/ı sort right.
+    return new Intl.Collator('tr').compare(a.name, b.name)
+  })
+}
+
+export function hasPermission(permissions: Permission[], required: Permission): boolean {
+  return permissions.includes(required)
+}
+
+/**
+ * External accounts (org = 'external') cap out at Viewer globally — real access
+ * only ever arrives through a site assignment (section 08, external user rule).
+ */
+export function clampExternalRole(org: 'internal' | 'external', role: Role): Role {
+  return org === 'external' ? 'Viewer' : role
+}
diff --git a/apps/editor/panel/lib/auth/session.ts b/apps/editor/panel/lib/auth/session.ts
new file mode 100644
index 000000000..c5ae9aebc
--- /dev/null
+++ b/apps/editor/panel/lib/auth/session.ts
@@ -0,0 +1,385 @@
+import { randomBytes } from 'node:crypto'
+import { isIP } from 'node:net'
+import { cookies, headers } from 'next/headers'
+import { exec, query, queryOne, type RowDataPacket } from '../db'
+import { getSettings } from '../settings'
+import type { AuthState, Permission, Role, SessionInfo, SessionUser, UserStatus } from '../types'
+import { permissionsForRole } from './roles'
+
+export const SESSION_COOKIE = 'dt_session'
+
+/** 128 random bits, stored as BINARY(16) and handed out as 32 hex chars. */
+function newSessionId(): Buffer {
+  return randomBytes(16)
+}
+
+function cookieSecure(): boolean {
+  return process.env.SESSION_COOKIE_SECURE === '1'
+}
+
+interface SessionRow extends RowDataPacket {
+  sid: Buffer
+  user_id: number
+  device: string | null
+  ip: Buffer | null
+  trusted_until: Date | null
+  keep_signed_in: number
+  mfa_pending: number
+  created_at: Date
+  last_activity_at: Date
+  expires_at: Date
+  revoked_at: Date | null
+  public_id: string
+  email: string
+  username: string
+  full_name: string
+  org: 'internal' | 'external'
+  global_role: string
+  status: 'invited' | 'active' | 'inactive' | 'suspended'
+  must_change_password: number
+  mfa_confirmed_at: Date | null
+}
+
+export interface ActiveSession {
+  id: Buffer
+  userId: number
+  mfaPending: boolean
+  keepSignedIn: boolean
+  expiresAt: Date
+  lastActivityAt: Date
+  user: SessionUser
+  /** Mapped from users.status so the guard can answer without a second query. */
+  state: AuthState
+}
+
+const DB_STATUS_TO_UI: Record<SessionRow['status'], UserStatus> = {
+  invited: 'Invited',
+  active: 'Active',
+  inactive: 'Inactive',
+  suspended: 'Inactive',
+}
+
+/** Packs an IPv4/IPv6 literal into VARBINARY(16); anything unparseable is dropped. */
+export function packIp(raw: string | null): Buffer | null {
+  if (!raw) return null
+  const ip = (raw.split(',')[0] ?? raw).trim()
+  const kind = isIP(ip)
+  if (kind === 4) {
+    const parts = ip.split('.').map(Number)
+    if (parts.some((n) => !Number.isInteger(n) || n < 0 || n > 255)) return null
+    return Buffer.from(parts)
+  }
+  if (kind === 6) {
+    // Expand the :: shorthand, then pack the eight 16-bit groups.
+    const [head, tail = ''] = ip.split('::')
+    const headGroups = head ? head.split(':').filter(Boolean) : []
+    const tailGroups = tail ? tail.split(':').filter(Boolean) : []
+    const fill = 8 - headGroups.length - tailGroups.length
+    if (fill < 0) return null
+    const groups = [...headGroups, ...Array(ip.includes('::') ? fill : 0).fill('0'), ...tailGroups]
+    if (groups.length !== 8) return null
+    const buf = Buffer.alloc(16)
+    groups.forEach((g, i) => {
+      buf.writeUInt16BE(parseInt(g, 16) & 0xffff, i * 2)
+    })
+    return buf
+  }
+  return null
+}
+
+export function unpackIp(buf: Buffer | null): string | null {
+  if (!buf) return null
+  if (buf.length === 4) return Array.from(buf).join('.')
+  if (buf.length === 16) {
+    const groups: string[] = []
+    for (let i = 0; i < 16; i += 2) groups.push(buf.readUInt16BE(i).toString(16))
+    return groups.join(':')
+  }
+  return null
+}
+
+/** Best-effort device label from the UA string — enough for the session list. */
+export function describeDevice(ua: string | null): string | null {
+  if (!ua) return null
+  const browser = /Edg\//.test(ua)
+    ? 'Edge'
+    : /OPR\//.test(ua)
+      ? 'Opera'
+      : /Firefox\//.test(ua)
+        ? 'Firefox'
+        : /Chrome\//.test(ua)
+          ? 'Chrome'
+          : /Safari\//.test(ua)
+            ? 'Safari'
+            : 'Browser'
+  const os = /Windows NT 10/.test(ua)
+    ? 'Windows 10/11'
+    : /Windows/.test(ua)
+      ? 'Windows'
+      : /Android/.test(ua)
+        ? 'Android'
+        : /(iPhone|iPad|iPod)/.test(ua)
+          ? 'iOS'
+          : /Mac OS X/.test(ua)
+            ? 'macOS'
+            : /Linux/.test(ua)
+              ? 'Linux'
+              : 'unknown OS'
+  return `${browser} on ${os}`.slice(0, 160)
+}
+
+async function requestContext(): Promise<{ device: string | null; ip: Buffer | null }> {
+  const h = await headers()
+  return {
+    device: describeDevice(h.get('user-agent')),
+    ip: packIp(h.get('x-forwarded-for') ?? h.get('x-real-ip')),
+  }
+}
+
+/**
+ * Creates a session row and sets the cookie. `mfaPending` leaves the session
+ * half-open: the guard treats it as `mfaRequired` and no console route accepts it.
+ */
+export async function createSession(opts: {
+  userId: number
+  keepSignedIn: boolean
+  mfaPending: boolean
+  trustedUntil?: Date | null
+}): Promise<Buffer> {
+  const settings = await getSettings()
+  const { device, ip } = await requestContext()
+
+  const keepSignedIn = opts.keepSignedIn && settings.keepSignedInAllowed
+  const lifetimeMs = keepSignedIn
+    ? settings.keepSignedInDays * 24 * 60 * 60 * 1000
+    : settings.sessionMinutes * 60 * 1000
+
+  const id = newSessionId()
+  const expiresAt = new Date(Date.now() + lifetimeMs)
+
+  await exec(
+    `INSERT INTO sessions (id, user_id, device, ip, trusted_until, keep_signed_in, mfa_pending,
+                           last_activity_at, expires_at)
+     VALUES (?, ?, ?, ?, ?, ?, ?, NOW(), ?)`,
+    [
+      id,
+      opts.userId,
+      device,
+      ip,
+      opts.trustedUntil ?? null,
+      keepSignedIn ? 1 : 0,
+      opts.mfaPending ? 1 : 0,
+      expiresAt,
+    ],
+  )
+
+  // Concurrent-session limit is enforced here, not in the console: oldest first.
+  await enforceConcurrencyLimit(opts.userId, id, settings.concurrentSessionLimit)
+
+  const jar = await cookies()
+  jar.set(SESSION_COOKIE, id.toString('hex'), {
+    httpOnly: true,
+    sameSite: 'lax',
+    secure: cookieSecure(),
+    path: '/',
+    // A session cookie for the idle case; a dated cookie when "keep me signed in"
+    // is on, so the browser keeps it across restarts for the full window.
+    ...(keepSignedIn ? { expires: expiresAt } : {}),
+  })
+
+  return id
+}
+
+async function enforceConcurrencyLimit(
+  userId: number,
+  keepId: Buffer,
+  limit: number,
+): Promise<void> {
+  if (limit <= 0) return
+  const rows = await query<RowDataPacket & { id: Buffer }>(
+    `SELECT id FROM sessions
+      WHERE user_id = ? AND revoked_at IS NULL AND expires_at > NOW()
+      ORDER BY last_activity_at DESC`,
+    [userId],
+  )
+  const surplus = rows.slice(limit).filter((r) => !r.id.equals(keepId))
+  for (const row of surplus) {
+    await exec('UPDATE sessions SET revoked_at = NOW() WHERE id = ?', [row.id])
+  }
+}
+
+/** Reads and validates the cookie-bound session, sliding the idle window forward. */
+export async function getSession(opts: { touch?: boolean } = {}): Promise<ActiveSession | null> {
+  const jar = await cookies()
+  const raw = jar.get(SESSION_COOKIE)?.value
+  if (!raw || !/^[0-9a-f]{32}$/.test(raw)) return null
+
+  const id = Buffer.from(raw, 'hex')
+  const row = await queryOne<SessionRow>(
+    `SELECT s.id AS sid, s.user_id, s.device, s.ip, s.trusted_until, s.keep_signed_in,
+            s.mfa_pending, s.created_at, s.last_activity_at, s.expires_at, s.revoked_at,
+            u.public_id, u.email, u.username, u.full_name, u.org, u.global_role, u.status,
+            u.must_change_password, tf.confirmed_at AS mfa_confirmed_at
+       FROM sessions s
+       JOIN users u ON u.id = s.user_id
+       LEFT JOIN two_factor tf ON tf.user_id = u.id
+      WHERE s.id = ?`,
+    [id],
+  )
+
+  if (!row || row.revoked_at || row.expires_at.getTime() <= Date.now()) return null
+  if (row.status === 'suspended' || row.status === 'inactive') return null
+
+  const settings = await getSettings()
+
+  if (opts.touch !== false) {
+    // Sliding idle window. "Keep me signed in" sessions keep their absolute
+    // expiry — extending it on every request would make the setting unbounded.
+    const nextExpiry =
+      row.keep_signed_in === 1
+        ? row.expires_at
+        : new Date(Date.now() + settings.sessionMinutes * 60 * 1000)
+    await exec('UPDATE sessions SET last_activity_at = NOW(), expires_at = ? WHERE id = ?', [
+      nextExpiry,
+      id,
+    ])
+    row.expires_at = nextExpiry
+  }
+
+  const siteRoles = await loadSiteRoles(row.user_id)
+  const permissions = await effectivePermissions(row.global_role, siteRoles)
+
+  const user: SessionUser = {
+    id: row.public_id,
+    name: row.full_name,
+    email: row.email,
+    username: row.username,
+    role: row.global_role as Role,
+    org: row.org,
+    status: DB_STATUS_TO_UI[row.status],
+    mfa: row.mfa_confirmed_at ? 'On' : 'Off',
+    permissions,
+    mustChangePassword: row.must_change_password === 1,
+    siteRoles,
+  }
+
+  const state: AuthState =
+    row.mfa_pending === 1
+      ? 'mfaRequired'
+      : row.must_change_password === 1
+        ? 'firstSignIn'
+        : 'signedIn'
+
+  return {
+    id,
+    userId: row.user_id,
+    mfaPending: row.mfa_pending === 1,
+    keepSignedIn: row.keep_signed_in === 1,
+    expiresAt: row.expires_at,
+    lastActivityAt: row.last_activity_at,
+    user,
+    state,
+  }
+}
+
+/** Clears the pending flag once the OTP (or a recovery code) checks out. */
+export async function clearMfaPending(id: Buffer): Promise<void> {
+  await exec('UPDATE sessions SET mfa_pending = 0 WHERE id = ?', [id])
+}
+
+export async function revokeSession(id: Buffer): Promise<void> {
+  await exec('UPDATE sessions SET revoked_at = NOW() WHERE id = ? AND revoked_at IS NULL', [id])
+}
+
+/** Revokes every live session for a user, optionally sparing the current one. */
+export async function revokeAllSessions(userId: number, except?: Buffer | null): Promise<number> {
+  const res = except
+    ? await exec(
+        'UPDATE sessions SET revoked_at = NOW() WHERE user_id = ? AND id <> ? AND revoked_at IS NULL',
+        [userId, except],
+      )
+    : await exec(
+        'UPDATE sessions SET revoked_at = NOW() WHERE user_id = ? AND revoked_at IS NULL',
+        [userId],
+      )
+  return res.affectedRows
+}
+
+export async function clearSessionCookie(): Promise<void> {
+  const jar = await cookies()
+  jar.set(SESSION_COOKIE, '', {
+    httpOnly: true,
+    sameSite: 'lax',
+    secure: cookieSecure(),
+    path: '/',
+    maxAge: 0,
+  })
+}
+
+export async function listSessions(userId: number, currentId: Buffer): Promise<SessionInfo[]> {
+  const rows = await query<
+    RowDataPacket & {
+      id: Buffer
+      device: string | null
+      ip: Buffer | null
+      created_at: Date
+      last_activity_at: Date
+      expires_at: Date
+      trusted_until: Date | null
+    }
+  >(
+    `SELECT id, device, ip, created_at, last_activity_at, expires_at, trusted_until
+       FROM sessions
+      WHERE user_id = ? AND revoked_at IS NULL AND expires_at > NOW()
+      ORDER BY last_activity_at DESC`,
+    [userId],
+  )
+
+  return rows.map((r) => ({
+    id: r.id.toString('hex'),
+    device: r.device,
+    ip: unpackIp(r.ip),
+    current: r.id.equals(currentId),
+    createdAt: r.created_at.toISOString(),
+    lastActivityAt: r.last_activity_at.toISOString(),
+    expiresAt: r.expires_at.toISOString(),
+    trustedUntil: r.trusted_until ? r.trusted_until.toISOString() : null,
+  }))
+}
+
+/** Is there a live trusted-device grant for this user? Skips the OTP step. */
+export async function hasTrustedDevice(userId: number): Promise<boolean> {
+  const row = await queryOne<RowDataPacket & { n: number }>(
+    `SELECT COUNT(*) AS n FROM sessions
+      WHERE user_id = ? AND trusted_until IS NOT NULL AND trusted_until > NOW()`,
+    [userId],
+  )
+  return (row?.n ?? 0) > 0
+}
+
+async function loadSiteRoles(userId: number): Promise<Record<string, Role>> {
+  const rows = await query<RowDataPacket & { name: string; role: string }>(
+    `SELECT s.name, a.role
+       FROM assignments a
+       JOIN sites s ON s.id = a.site_id
+      WHERE a.user_id = ?`,
+    [userId],
+  )
+  return Object.fromEntries(rows.map((r) => [r.name, r.role as Role]))
+}
+
+/**
+ * Effective permission rule (WP3): global role ∪ every site assignment, widest
+ * wins. Resolved by union at read time — no materialised "effective" table.
+ */
+async function effectivePermissions(
+  globalRole: string,
+  siteRoles: Record<string, Role>,
+): Promise<Permission[]> {
+  const names = new Set<string>([globalRole, ...Object.values(siteRoles)])
+  const granted = new Set<Permission>()
+  for (const name of names) {
+    for (const perm of await permissionsForRole(name)) granted.add(perm)
+  }
+  return [...granted]
+}
diff --git a/apps/editor/panel/lib/auth/totp.ts b/apps/editor/panel/lib/auth/totp.ts
new file mode 100644
index 000000000..9e7c441c8
--- /dev/null
+++ b/apps/editor/panel/lib/auth/totp.ts
@@ -0,0 +1,183 @@
+import { Secret, TOTP } from 'otpauth'
+import QRCode from 'qrcode'
+import { exec, query, queryOne, type RowDataPacket, transaction } from '../db'
+import { decryptSecret, encryptSecret, safeEqual, sha256 } from './crypto'
+
+const ISSUER = 'DigitalTwin'
+const RECOVERY_CODE_COUNT = 8
+
+function totpFor(secretBase32: string, label: string): TOTP {
+  return new TOTP({
+    issuer: ISSUER,
+    label,
+    algorithm: 'SHA1',
+    digits: 6,
+    period: 30,
+    secret: Secret.fromBase32(secretBase32),
+  })
+}
+
+/** Groups the base32 secret into 4-char blocks, matching the prototype's key. */
+function groupKey(base32: string): string {
+  return (base32.match(/.{1,4}/g) ?? []).join(' ')
+}
+
+export interface EnrolmentStart {
+  qrDataUrl: string
+  manualKey: string
+}
+
+/**
+ * Starts (or restarts) enrolment: writes an unconfirmed secret and returns the
+ * QR plus the manual key. Re-running before confirmation replaces the secret, so
+ * a half-finished setup can never leave a stale one behind.
+ */
+export async function startEnrolment(
+  userId: number,
+  accountLabel: string,
+): Promise<EnrolmentStart> {
+  const secret = new Secret({ size: 20 }).base32
+
+  await exec(
+    `INSERT INTO two_factor (user_id, totp_secret, confirmed_at)
+     VALUES (?, ?, NULL)
+     ON DUPLICATE KEY UPDATE totp_secret = VALUES(totp_secret), confirmed_at = NULL`,
+    [userId, encryptSecret(secret)],
+  )
+
+  const uri = totpFor(secret, accountLabel).toString()
+  return {
+    qrDataUrl: await QRCode.toDataURL(uri, { margin: 0, width: 236, errorCorrectionLevel: 'M' }),
+    manualKey: groupKey(secret),
+  }
+}
+
+interface TwoFactorRow extends RowDataPacket {
+  totp_secret: Buffer
+  confirmed_at: Date | null
+}
+
+async function loadSecret(userId: number): Promise<{ secret: string; confirmed: boolean } | null> {
+  const row = await queryOne<TwoFactorRow>(
+    'SELECT totp_secret, confirmed_at FROM two_factor WHERE user_id = ?',
+    [userId],
+  )
+  if (!row) return null
+  try {
+    return { secret: decryptSecret(row.totp_secret), confirmed: row.confirmed_at !== null }
+  } catch {
+    // Undecryptable secret (rotated key, corrupt row) reads as "not enrolled"
+    // rather than locking the account out with a 500 on every sign-in.
+    return null
+  }
+}
+
+export async function isEnrolled(userId: number): Promise<boolean> {
+  return (await loadSecret(userId))?.confirmed ?? false
+}
+
+/**
+ * Validates a 6-digit code. `window: 1` accepts the neighbouring 30 s steps,
+ * which covers ordinary clock drift without widening the guess space much.
+ */
+export async function verifyTotp(
+  userId: number,
+  accountLabel: string,
+  code: string,
+): Promise<boolean> {
+  const entry = await loadSecret(userId)
+  if (!entry) return false
+  return totpFor(entry.secret, accountLabel).validate({ token: code, window: 1 }) !== null
+}
+
+/** Confirms enrolment and issues a fresh recovery set, replacing any old codes. */
+export async function confirmEnrolment(
+  userId: number,
+  accountLabel: string,
+  code: string,
+): Promise<string[] | null> {
+  const entry = await loadSecret(userId)
+  if (!entry) return null
+  if (totpFor(entry.secret, accountLabel).validate({ token: code, window: 1 }) === null) return null
+
+  const codes = generateRecoveryCodes()
+
+  await transaction(async (cx) => {
+    await cx.execute('UPDATE two_factor SET confirmed_at = NOW() WHERE user_id = ?', [userId])
+    await cx.execute('DELETE FROM recovery_codes WHERE user_id = ?', [userId])
+    for (const plain of codes) {
+      await cx.execute('INSERT INTO recovery_codes (user_id, code_hash) VALUES (?, ?)', [
+        userId,
+        sha256(normaliseRecoveryCode(plain)),
+      ])
+    }
+  })
+
+  return codes
+}
+
+/** XXXX-XXXX, the format the recovery screen validates and the .txt export lists. */
+export function generateRecoveryCodes(count = RECOVERY_CODE_COUNT): string[] {
+  const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789' // no O/0/I/1
+  const out: string[] = []
+  const buf = new Uint8Array(8)
+
+  while (out.length < count) {
+    crypto.getRandomValues(buf)
+    const chars = Array.from(buf, (b) => alphabet[b % alphabet.length])
+    const code = `${chars.slice(0, 4).join('')}-${chars.slice(4).join('')}`
+    if (!out.includes(code)) out.push(code)
+  }
+  return out
+}
+
+export function normaliseRecoveryCode(input: string): string {
+  return input.trim().toUpperCase()
+}
+
+/**
+ * Spends a recovery code. Marks it used inside a transaction so two concurrent
+ * requests cannot both consume the same one.
+ */
+export async function consumeRecoveryCode(
+  userId: number,
+  input: string,
+): Promise<{ ok: boolean; remaining: number }> {
+  const target = sha256(normaliseRecoveryCode(input))
+
+  return transaction(async (cx) => {
+    const [rows] = await cx.execute<Array<RowDataPacket & { id: number; code_hash: Buffer }>>(
+      'SELECT id, code_hash FROM recovery_codes WHERE user_id = ? AND used_at IS NULL FOR UPDATE',
+      [userId],
+    )
+
+    const match = rows.find((row) => safeEqual(row.code_hash, target))
+    if (match)
+      await cx.execute('UPDATE recovery_codes SET used_at = NOW() WHERE id = ?', [match.id])
+
+    return { ok: Boolean(match), remaining: rows.length - (match ? 1 : 0) }
+  })
+}
+
+export async function countUnusedRecoveryCodes(userId: number): Promise<number> {
+  const row = await queryOne<RowDataPacket & { n: number }>(
+    'SELECT COUNT(*) AS n FROM recovery_codes WHERE user_id = ? AND used_at IS NULL',
+    [userId],
+  )
+  return row?.n ?? 0
+}
+
+export async function disableTwoFactor(userId: number): Promise<void> {
+  await transaction(async (cx) => {
+    await cx.execute('DELETE FROM two_factor WHERE user_id = ?', [userId])
+    await cx.execute('DELETE FROM recovery_codes WHERE user_id = ?', [userId])
+  })
+}
+
+export async function hasAnyRecoveryCodes(userId: number): Promise<boolean> {
+  const rows = await query<RowDataPacket & { id: number }>(
+    'SELECT id FROM recovery_codes WHERE user_id = ? AND used_at IS NULL LIMIT 1',
+    [userId],
+  )
+  return rows.length > 0
+}
diff --git a/apps/editor/panel/lib/auth/users.ts b/apps/editor/panel/lib/auth/users.ts
new file mode 100644
index 000000000..c3a372252
--- /dev/null
+++ b/apps/editor/panel/lib/auth/users.ts
@@ -0,0 +1,67 @@
+import { queryOne, type RowDataPacket } from '../db'
+
+export const WORK_DOMAIN = '@netlog.com.tr'
+
+export interface UserRow extends RowDataPacket {
+  id: number
+  public_id: string
+  email: string
+  username: string
+  full_name: string
+  org: 'internal' | 'external'
+  global_role: string
+  status: 'invited' | 'active' | 'inactive' | 'suspended'
+  password_hash: Buffer | null
+  must_change_password: number
+  failed_attempts: number
+  locked_until: Date | null
+}
+
+/**
+ * Sign-in accepts three shapes for the same account, exactly as the prototype's
+ * hint line promises: the username (`Admin`, `r.ovur`), the local part of the
+ * work address, or the full address. Resolution is a single indexed query.
+ */
+export async function findUserByIdentifier(identifier: string): Promise<UserRow | null> {
+  const raw = identifier.trim()
+  if (!raw) return null
+
+  const asEmail = raw.includes('@') ? raw.toLowerCase() : `${raw.toLowerCase()}${WORK_DOMAIN}`
+
+  return queryOne<UserRow>(
+    `SELECT id, public_id, email, username, full_name, org, global_role, status,
+            password_hash, must_change_password, failed_attempts, locked_until
+       FROM users
+      WHERE username = ? OR email = ?
+      LIMIT 1`,
+    [raw, asEmail],
+  )
+}
+
+export async function findUserByEmail(email: string): Promise<UserRow | null> {
+  return queryOne<UserRow>(
+    `SELECT id, public_id, email, username, full_name, org, global_role, status,
+            password_hash, must_change_password, failed_attempts, locked_until
+       FROM users
+      WHERE email = ?
+      LIMIT 1`,
+    [email.trim().toLowerCase()],
+  )
+}
+
+export async function findUserById(id: number): Promise<UserRow | null> {
+  return queryOne<UserRow>(
+    `SELECT id, public_id, email, username, full_name, org, global_role, status,
+            password_hash, must_change_password, failed_attempts, locked_until
+       FROM users
+      WHERE id = ?`,
+    [id],
+  )
+}
+
+/** Label shown on the OTP screen: the username for accounts without a real inbox. */
+export function pendingLabel(user: UserRow): string {
+  return user.email.startsWith('admin@') && user.username.toLowerCase() === 'admin'
+    ? user.username
+    : user.email
+}
diff --git a/apps/editor/panel/lib/casing.ts b/apps/editor/panel/lib/casing.ts
new file mode 100644
index 000000000..bf0a54b07
--- /dev/null
+++ b/apps/editor/panel/lib/casing.ts
@@ -0,0 +1,28 @@
+import type { Lang } from './types'
+
+/**
+ * The locale each language formats and cases with.
+ *
+ * `en-GB` rather than `en-US` because dates elsewhere in the app are rendered
+ * day-first; the casing rules of the two are identical, so one constant serves
+ * both purposes.
+ */
+export const LOCALE: Record<Lang, string> = { en: 'en-GB', tr: 'tr-TR' }
+
+/**
+ * Locale-aware uppercase, extracted from the `<Caps>` component so the rule can
+ * be tested without rendering React.
+ *
+ * Two directions to the Turkish trap, and both bite:
+ *
+ * - dotted:   'i' → 'İ'  — "izmir" must become "İZMİR", not "IZMIR"
+ * - dotless:  'I' → 'ı'  in the *lower* direction, which is why identifiers
+ *             cannot be round-tripped through the Turkish locale at all
+ *
+ * `invariant` is for identifiers rather than prose — role names, permission
+ * keys, brand words. Under the Turkish rule "Admin" becomes "ADMİN" and
+ * "Editor" becomes "EDİTOR", which are not the names of those roles.
+ */
+export function toCaps(value: string, lang: Lang, invariant = false): string {
+  return value.toLocaleUpperCase(invariant ? LOCALE.en : LOCALE[lang])
+}
diff --git a/apps/editor/panel/lib/changelog.ts b/apps/editor/panel/lib/changelog.ts
new file mode 100644
index 000000000..df240cdf2
--- /dev/null
+++ b/apps/editor/panel/lib/changelog.ts
@@ -0,0 +1,323 @@
+import type { ReleaseEntry } from './api-contract'
+
+/**
+ * Changelog source.
+ *
+ * Two rules the design settled on, both load-bearing:
+ *
+ * 1. The client never calls the upstream API. The fetch happens here, behind a
+ *    60 s cache, because the anonymous rate limit (60 requests/hour per IP) was
+ *    hit in the prototype when every visitor fetched for themselves.
+ * 2. Upstream repository names never reach the UI. They live in this file and
+ *    nowhere else; entries carry a `channel` ('editor' | 'plugin') and the
+ *    screens render product wording from that.
+ */
+
+/**
+ * The three repositories this deployment is actually made of: the deploy
+ * repository receives the merged editor+console builds the host runs, the
+ * plugin and the console each live in their own repository. The deploy
+ * repository is private — its entries only appear when GITHUB_TOKEN is set.
+ */
+const SOURCES = {
+  deploy: { owner: 'ovurrsl', repo: 'Digitaltwin' },
+  plugin: { owner: 'ovurrsl', repo: 'plugin-warehouse' },
+  console: { owner: 'ovurrsl', repo: 'panel' },
+} as const
+
+const CACHE_TTL_MS = 300_000
+const FETCH_TIMEOUT_MS = 2500
+
+interface Cache {
+  entries: ReleaseEntry[]
+  live: boolean
+  fetchedAt: number
+}
+
+let cache: Cache | null = null
+let inFlight: Promise<Cache> | null = null
+
+/**
+ * Bundled fallback. Real content, taken from the same upstreams — so an offline
+ * console shows the right releases rather than an empty tab, and the only thing
+ * lost is freshness.
+ */
+const SNAPSHOT: ReleaseEntry[] = [
+  {
+    id: 'snapshot-deploy-2.1.2',
+    title: 'Home returns to the editor, mail gets its design',
+    summary:
+      'Navigation from scenes and admin lands back in the editor; transactional mail ships a designed HTML part in the console’s visual language.',
+    version: 'v2.1.2',
+    date: '2026-08-01T00:00:00.000Z',
+    tags: ['deploy', 'mail'],
+    authors: ['ovurrsl'],
+    channel: 'editor',
+  },
+  {
+    id: 'snapshot-deploy-2.0.0',
+    title: 'The console becomes the front door',
+    summary:
+      'Sign-in, two-factor, roles and the admin console own the root URL; the editor sits behind it and scenes belong to console accounts. The database self-migrates at boot.',
+    version: 'v2.0.0',
+    date: '2026-07-31T00:00:00.000Z',
+    tags: ['deploy', 'console', 'auth'],
+    authors: ['ovurrsl'],
+    channel: 'editor',
+  },
+  {
+    id: 'snapshot-console-0.9.1',
+    title: 'Real SMTP delivery',
+    summary:
+      'The console sends its reset, invitation and receipt mail through SMTP, with the console transport kept for development.',
+    version: 'v0.9.1',
+    date: '2026-07-31T00:00:00.000Z',
+    tags: ['mail', 'smtp'],
+    authors: ['ovurrsl'],
+    channel: 'console',
+  },
+  {
+    id: 'snapshot-plugin-0.1.0',
+    title: 'Warehouse equipment catalogue',
+    summary:
+      'Pallets (EPAL/GMA/plastic), pallet racking with per-bay tunnels, skips and picking levels, EN 15620 tables, roller conveyor modules and 45/90/180° curves, plus the capacity and clash panel.',
+    version: 'v0.1.0',
+    date: '2026-07-08T00:00:00.000Z',
+    tags: ['warehouse', 'racking', 'conveyor'],
+    authors: ['ovurrsl', 'claude'],
+    channel: 'plugin',
+  },
+]
+
+function githubHeaders(): HeadersInit {
+  const headers: Record<string, string> = {
+    accept: 'application/vnd.github+json',
+    'user-agent': 'digitaltwin-console',
+  }
+  // A token lifts the 60/hour anonymous limit. Optional — without it the cache
+  // and the snapshot between them keep the tab usable.
+  if (process.env.GITHUB_TOKEN) headers.authorization = `Bearer ${process.env.GITHUB_TOKEN}`
+  return headers
+}
+
+async function fetchJson<T>(url: string): Promise<T | null> {
+  try {
+    const response = await fetch(url, {
+      headers: githubHeaders(),
+      signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+      cache: 'no-store',
+    })
+    if (!response.ok) return null
+    return (await response.json()) as T
+  } catch {
+    return null
+  }
+}
+
+interface GhRelease {
+  id: number
+  name: string | null
+  tag_name: string
+  body: string | null
+  published_at: string | null
+  author: { login: string } | null
+}
+
+interface GhCommit {
+  sha: string
+  commit: { message: string; author: { name: string; date: string } | null }
+  author: { login: string } | null
+}
+
+function summarise(body: string | null, fallback: string): string {
+  if (!body) return fallback
+  const firstParagraph = body
+    .split(/\r?\n\r?\n/)
+    .map((p) => p.replace(/[#*`>-]/g, '').trim())
+    .find((p) => p.length > 20)
+  return (firstParagraph ?? fallback).slice(0, 320)
+}
+
+function commitsUrl(source: { owner: string; repo: string }): string {
+  return `https://api.github.com/repos/${source.owner}/${source.repo}/commits?per_page=20`
+}
+
+interface GhContent {
+  content?: string
+  encoding?: string
+}
+
+/**
+ * Each repository states its own version in its own package.json, and the
+ * three move independently — the editor, the console and the plugin are
+ * released separately. Reading it here is what lets every channel show its own
+ * number instead of borrowing the deploy repository's.
+ *
+ * Only the deploy repository writes the version into its commit subjects
+ * ("v2.8.0 — …"); for the other two this is the only place it exists.
+ */
+async function repoVersion(source: { owner: string; repo: string }): Promise<string | null> {
+  const body = await fetchJson<GhContent>(
+    `https://api.github.com/repos/${source.owner}/${source.repo}/contents/package.json`,
+  )
+  if (!body?.content || body.encoding !== 'base64') return null
+  try {
+    const parsed = JSON.parse(Buffer.from(body.content, 'base64').toString('utf8')) as {
+      version?: unknown
+    }
+    return typeof parsed.version === 'string' ? `v${parsed.version}` : null
+  } catch {
+    return null
+  }
+}
+
+function commitEntries(
+  commits: GhCommit[] | null,
+  opts: {
+    idPrefix: string
+    channel: ReleaseEntry['channel']
+    tags: string[]
+    fallback: string
+    /** That repository's own version, for entries whose subject omits one. */
+    channelVersion?: string | null
+  },
+): ReleaseEntry[] {
+  const entries: ReleaseEntry[] = []
+  for (const commit of commits ?? []) {
+    const [headline, ...rest] = commit.commit.message.split('\n')
+    const title = (headline ?? '').slice(0, 160)
+    // Deploy commits are titled "v2.1.2 — …"; surface that as the version chip.
+    // The other two repositories don't version their subjects, so they fall
+    // back to whatever their own package.json currently declares.
+    const version = /^v\d+\.\d+\.\d+/.exec(title)?.[0] ?? opts.channelVersion ?? null
+    entries.push({
+      id: `${opts.idPrefix}-${commit.sha.slice(0, 12)}`,
+      title,
+      summary: summarise(rest.join('\n').trim() || null, opts.fallback),
+      version,
+      date: commit.commit.author?.date ?? new Date(0).toISOString(),
+      tags: opts.tags,
+      authors: commit.author
+        ? [commit.author.login]
+        : commit.commit.author
+          ? [commit.commit.author.name]
+          : [],
+      channel: opts.channel,
+    })
+  }
+  return entries
+}
+
+async function loadUpstream(): Promise<Cache> {
+  const [deploy, plugin, console_, pluginVersion, consoleVersion] = await Promise.all([
+    fetchJson<GhCommit[]>(commitsUrl(SOURCES.deploy)),
+    fetchJson<GhCommit[]>(commitsUrl(SOURCES.plugin)),
+    fetchJson<GhCommit[]>(commitsUrl(SOURCES.console)),
+    repoVersion(SOURCES.plugin),
+    repoVersion(SOURCES.console),
+  ])
+
+  if (!deploy && !plugin && !console_) return snapshot()
+
+  const entries: ReleaseEntry[] = [
+    ...commitEntries(deploy, {
+      idPrefix: 'deploy',
+      channel: 'editor',
+      tags: ['deploy'],
+      fallback: 'Published to the server.',
+    }),
+    ...commitEntries(plugin, {
+      idPrefix: 'plugin',
+      channel: 'plugin',
+      tags: ['warehouse'],
+      fallback: 'Warehouse plugin change.',
+      channelVersion: pluginVersion,
+    }),
+    ...commitEntries(console_, {
+      idPrefix: 'console',
+      channel: 'console',
+      tags: ['console'],
+      fallback: 'Console change.',
+      channelVersion: consoleVersion,
+    }),
+  ]
+
+  return { entries: byNewest(entries), live: true, fetchedAt: Date.now() }
+}
+
+/** One chronological timeline across both channels, newest first. */
+function byNewest(entries: ReleaseEntry[]): ReleaseEntry[] {
+  return [...entries].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+}
+
+/**
+ * The offline path. Sorted through the same helper as the live one — returning
+ * SNAPSHOT verbatim left the plugin entry stranded at the bottom of the
+ * timeline, because the constant is grouped by channel rather than by date.
+ */
+function snapshot(): Cache {
+  return { entries: byNewest(SNAPSHOT), live: false, fetchedAt: Date.now() }
+}
+
+/**
+ * Cached upstream read that never makes a reader wait on GitHub.
+ *
+ * The page always renders from what is already here — the last good fetch, or
+ * the bundled snapshot — and a refresh happens behind it. Blocking was the
+ * wrong trade: three repositories, one of them private, each up to a couple of
+ * seconds when the network is unhappy, on a page a signed-out visitor opens
+ * from the sign-in screen.
+ *
+ * Concurrent callers share one in-flight refresh; without that, two components
+ * mounting together would fire two fetches and burn the rate limit twice as
+ * fast.
+ */
+export async function loadChangelog(): Promise<Cache> {
+  const current = cache ?? snapshot()
+  const stale = !cache || Date.now() - cache.fetchedAt >= CACHE_TTL_MS
+
+  if (stale && !inFlight) {
+    inFlight = loadUpstream()
+      .then((next) => {
+        cache = next
+        return next
+      })
+      .catch(() => {
+        const fallback = snapshot()
+        cache = fallback
+        return fallback
+      })
+      .finally(() => {
+        inFlight = null
+      })
+    // Deliberately not awaited: the refresh lands in the cache for the next
+    // reader. An unhandled rejection here would take the process down, so the
+    // promise still carries a catch.
+    void inFlight.catch(() => undefined)
+  }
+
+  return current
+}
+
+export interface ChangelogPage {
+  entries: ReleaseEntry[]
+  nextCursor: string | null
+  live: boolean
+  fetchedAt: string
+}
+
+/** Cursor is the index into the cached, already-sorted timeline. */
+export async function changelogPage(cursor: string | null, limit: number): Promise<ChangelogPage> {
+  const loaded = await loadChangelog()
+  const start = Math.max(0, Number(cursor ?? 0) || 0)
+  const size = Math.min(50, Math.max(1, limit))
+  const slice = loaded.entries.slice(start, start + size)
+  const next = start + size
+
+  return {
+    entries: slice,
+    nextCursor: next < loaded.entries.length ? String(next) : null,
+    live: loaded.live,
+    fetchedAt: new Date(loaded.fetchedAt).toISOString(),
+  }
+}
diff --git a/apps/editor/panel/lib/client-api.ts b/apps/editor/panel/lib/client-api.ts
new file mode 100644
index 000000000..86315ca65
--- /dev/null
+++ b/apps/editor/panel/lib/client-api.ts
@@ -0,0 +1,57 @@
+'use client'
+
+import { type ApiError, isApiError } from './api-contract'
+
+export interface CallFailure {
+  ok: false
+  code: ApiError['error']['code']
+  /** i18n key — resolve with resolveApiMessage before showing it. */
+  messageKey: string
+  details: Record<string, unknown>
+}
+
+export type CallResult<T> = { ok: true; data: T } | CallFailure
+
+/**
+ * Single fetch wrapper for every client call. Normalises three different failure
+ * shapes — an error envelope, a non-JSON response, and a dead network — into one
+ * result type, so screens never have to guess which one they got.
+ */
+export async function call<T>(
+  path: string,
+  init?: { method?: string; body?: unknown; signal?: AbortSignal },
+): Promise<CallResult<T>> {
+  let response: Response
+  try {
+    response = await fetch(path, {
+      method: init?.method ?? (init?.body ? 'POST' : 'GET'),
+      headers: init?.body ? { 'content-type': 'application/json' } : undefined,
+      body: init?.body ? JSON.stringify(init.body) : undefined,
+      credentials: 'same-origin',
+      signal: init?.signal,
+    })
+  } catch {
+    return { ok: false, code: 'server_error', messageKey: 'err.network', details: {} }
+  }
+
+  let payload: unknown = null
+  try {
+    payload = await response.json()
+  } catch {
+    payload = null
+  }
+
+  if (!response.ok || isApiError(payload)) {
+    if (isApiError(payload)) {
+      return {
+        ok: false,
+        code: payload.error.code,
+        messageKey: payload.error.message,
+        details: payload.error.details ?? {},
+      }
+    }
+    return { ok: false, code: 'server_error', messageKey: 'err.server', details: {} }
+  }
+
+  return { ok: true, data: payload as T }
+}
diff --git a/apps/editor/panel/lib/cn.ts b/apps/editor/panel/lib/cn.ts
new file mode 100644
index 000000000..c6366d972
--- /dev/null
+++ b/apps/editor/panel/lib/cn.ts
@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/** The shadcn/ui `cn` helper: conditional classes, last-wins on conflicts. */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}
diff --git a/apps/editor/panel/lib/console-tabs.ts b/apps/editor/panel/lib/console-tabs.ts
new file mode 100644
index 000000000..3d47d164f
--- /dev/null
+++ b/apps/editor/panel/lib/console-tabs.ts
@@ -0,0 +1,118 @@
+import type { Dictionary } from './i18n'
+import type { Permission } from './types'
+
+export const CONSOLE_TABS = [
+  'overview',
+  'logs',
+  'users',
+  'roles',
+  'audit',
+  'sessions',
+  'sites',
+  'scenes',
+  'jobs',
+  'integrations',
+  'updates',
+  'guides',
+  'settings',
+] as const
+
+export type ConsoleTab = (typeof CONSOLE_TABS)[number]
+
+export function isConsoleTab(value: string): value is ConsoleTab {
+  return (CONSOLE_TABS as readonly string[]).includes(value)
+}
+
+export interface TabMeta {
+  /** Permission the tab needs; absent means every signed-in user may see it. */
+  permission?: Permission
+  /** Dictionary key under `c` for the rail label. */
+  labelKey: keyof Dictionary['c']
+}
+
+/**
+ * Single source of truth for what a tab requires and where its label comes from.
+ * Kept free of the dictionary so the route guard can consult it on the server
+ * without dragging translations into the decision.
+ *
+ * Two notes on the gates:
+ *
+ * The old panel put the whole console behind `admin_access`. v3 does not — it
+ * has an explicit read-only state ("your role does not carry edit_users, so
+ * accounts are listed but not editable"), which only means anything if a
+ * non-admin can open the console at all. So the shell is open to any signed-in
+ * user and each tab carries its own gate.
+ *
+ * Settings and Integrations ask for `admin_access` rather than `access_settings`.
+ * `access_settings` is an Editor-level permission about the editor's own
+ * settings; the org settings row (session length, MFA requirement, invite
+ * expiry) and raw API keys are a different blast radius entirely.
+ */
+export const TAB_META: Record<ConsoleTab, TabMeta> = {
+  overview: { labelKey: 'overview' },
+  logs: { labelKey: 'diagnostics', permission: 'view_logs' },
+  users: { labelKey: 'users' },
+  roles: { labelKey: 'roles' },
+  audit: { labelKey: 'audit', permission: 'view_logs' },
+  sessions: { labelKey: 'sessions' },
+  sites: { labelKey: 'sites' },
+  // Scene ownership moves data between accounts — same blast radius as the
+  // org settings, so the same gate.
+  scenes: { labelKey: 'scenes', permission: 'admin_access' },
+  jobs: { labelKey: 'jobs' },
+  integrations: { labelKey: 'integrations', permission: 'admin_access' },
+  updates: { labelKey: 'changelog' },
+  // The manual is for everyone signed in, not just admins.
+  guides: { labelKey: 'guides' },
+  settings: { labelKey: 'settings', permission: 'admin_access' },
+}
+
+export interface RailEntry {
+  kind: 'heading' | 'item'
+  id?: ConsoleTab
+  label: string
+  permission?: Permission
+}
+
+/**
+ * The rail's three groups, in the order the design fixes them: Monitor, Access,
+ * Platform. Labels resolve through the dictionary so the rail switches language
+ * with everything else.
+ */
+export function railEntries(t: Dictionary): RailEntry[] {
+  const item = (id: ConsoleTab): RailEntry => ({
+    kind: 'item',
+    id,
+    label: t.c[TAB_META[id].labelKey] as string,
+    permission: TAB_META[id].permission,
+  })
+
+  return [
+    { kind: 'heading', label: t.c.monitor },
+    item('overview'),
+    item('logs'),
+
+    { kind: 'heading', label: t.c.access },
+    item('users'),
+    item('roles'),
+    item('audit'),
+    item('sessions'),
+
+    { kind: 'heading', label: t.c.platform },
+    item('sites'),
+    item('scenes'),
+    item('jobs'),
+    item('integrations'),
+    item('updates'),
+    item('guides'),
+    item('settings'),
+  ]
+}
+
+export function tabLabel(t: Dictionary, tab: ConsoleTab): string {
+  return (t.c[TAB_META[tab].labelKey] as string) ?? tab
+}
+
+export function tabPermission(tab: ConsoleTab): Permission | undefined {
+  return TAB_META[tab].permission
+}
diff --git a/apps/editor/panel/lib/db.ts b/apps/editor/panel/lib/db.ts
new file mode 100644
index 000000000..0407b8160
--- /dev/null
+++ b/apps/editor/panel/lib/db.ts
@@ -0,0 +1,136 @@
+import type { Pool, PoolConnection, ResultSetHeader, RowDataPacket } from 'mysql2/promise'
+import mysql from 'mysql2/promise'
+
+let pool: Pool | undefined
+
+/**
+ * Integration shim: inside the editor the database is configured through the
+ * DIGITALTWIN_MYSQL_* variables, so those are honoured first and the panel's
+ * own DATABASE_* names stay as the fallback for standalone runs.
+ */
+function env(...names: string[]): string | undefined {
+  for (const name of names) {
+    const value = process.env[name]?.trim()
+    if (value) return value
+  }
+  return undefined
+}
+
+/**
+ * The scene store accepts a single connection URL as well as the discrete
+ * variables, so this side has to read it too — otherwise a deployment
+ * configured that way would point its scenes at one database and its accounts
+ * at the built-in defaults, and the mismatch would only surface as a confusing
+ * "access denied" at boot.
+ */
+function fromUrl(): Partial<Record<'host' | 'port' | 'user' | 'password' | 'database', string>> {
+  const raw = env('DIGITALTWIN_MYSQL_URL', 'PASCAL_MYSQL_URL', 'DATABASE_URL')
+  if (!raw) return {}
+  try {
+    const url = new URL(raw)
+    return {
+      host: url.hostname || undefined,
+      port: url.port || undefined,
+      user: decodeURIComponent(url.username) || undefined,
+      password: decodeURIComponent(url.password) || undefined,
+      database: url.pathname.replace(/^\//, '') || undefined,
+    }
+  } catch {
+    // A malformed URL falls through to the discrete variables, which then
+    // report their own missing pieces.
+    return {}
+  }
+}
+
+export function dbConfig() {
+  const url = fromUrl()
+  return {
+    host:
+      env('DIGITALTWIN_MYSQL_HOST', 'PASCAL_MYSQL_HOST', 'DATABASE_HOST') ??
+      url.host ??
+      '127.0.0.1',
+    port: Number(
+      env('DIGITALTWIN_MYSQL_PORT', 'PASCAL_MYSQL_PORT', 'DATABASE_PORT') ?? url.port ?? 3306,
+    ),
+    user: env('DIGITALTWIN_MYSQL_USER', 'PASCAL_MYSQL_USER', 'DATABASE_USER') ?? url.user ?? 'root',
+    password:
+      env('DIGITALTWIN_MYSQL_PASSWORD', 'PASCAL_MYSQL_PASSWORD', 'DATABASE_PASSWORD') ??
+      url.password ??
+      '',
+    database:
+      env('DIGITALTWIN_MYSQL_DATABASE', 'PASCAL_MYSQL_DATABASE', 'DATABASE_NAME') ??
+      url.database ??
+      'digitaltwin',
+    charset: 'utf8mb4_unicode_ci',
+    timezone: 'Z',
+    dateStrings: false,
+    supportBigNumbers: true,
+  }
+}
+
+export function db(): Pool {
+  if (!pool) {
+    pool = mysql.createPool({
+      ...dbConfig(),
+      waitForConnections: true,
+      connectionLimit: 10,
+      maxIdle: 10,
+      enableKeepAlive: true,
+      namedPlaceholders: false,
+    })
+  }
+  return pool
+}
+
+/** SELECT returning rows. */
+export async function query<T extends RowDataPacket>(
+  sql: string,
+  params: unknown[] = [],
+): Promise<T[]> {
+  // mysql2's overloads cannot infer through a caller-supplied generic, and its
+  // value parameter is typed loosely, so both ends are asserted here. Every call
+  // site declares its own row interface — that is where the real checking is.
+  const [rows] = (await db().execute(sql, params as never)) as unknown as [T[], unknown]
+  return rows
+}
+
+/** SELECT returning the first row, or null. */
+export async function queryOne<T extends RowDataPacket>(
+  sql: string,
+  params: unknown[] = [],
+): Promise<T | null> {
+  const rows = await query<T>(sql, params)
+  return rows[0] ?? null
+}
+
+/** INSERT / UPDATE / DELETE. */
+export async function exec(sql: string, params: unknown[] = []): Promise<ResultSetHeader> {
+  const [res] = (await db().execute(sql, params as never)) as unknown as [ResultSetHeader, unknown]
+  return res
+}
+
+/**
+ * Runs `fn` inside a transaction on a dedicated connection. Rolls back on throw.
+ * Used wherever a mutation spans more than one table — invite issuing, password
+ * reset with session revocation, MFA enrolment with recovery codes.
+ */
+export async function transaction<T>(fn: (cx: PoolConnection) => Promise<T>): Promise<T> {
+  const cx = await db().getConnection()
+  try {
+    await cx.beginTransaction()
+    const out = await fn(cx)
+    await cx.commit()
+    return out
+  } catch (err) {
+    try {
+      await cx.rollback()
+    } catch {
+      /* connection already gone — the original error is the useful one */
+    }
+    throw err
+  } finally {
+    cx.release()
+  }
+}
+
+export type { PoolConnection, ResultSetHeader, RowDataPacket }
diff --git a/apps/editor/panel/lib/escape-layers.ts b/apps/editor/panel/lib/escape-layers.ts
new file mode 100644
index 000000000..e3e5ad63f
--- /dev/null
+++ b/apps/editor/panel/lib/escape-layers.ts
@@ -0,0 +1,77 @@
+'use client'
+
+import { useEffect } from 'react'
+
+/**
+ * The Escape chain, as a stack.
+ *
+ * The design specifies one order — menu → command palette → drawer → dialog →
+ * inline edit — and one rule: a single press closes the topmost layer only.
+ *
+ * That rule was previously left to each screen, with a `window` keydown listener
+ * per layer. It cannot work: every listener sees every press, so opening a
+ * dialog from inside the drawer and pressing Escape closed both at once, and
+ * five of the eight dialogs registered no listener at all and could not be
+ * closed from the keyboard.
+ *
+ * A stack fixes the ordering by construction. Layers push on open and pop on
+ * close; only the last entry is called. Mounting order is the nesting order, so
+ * the chain is whatever the component tree already says it is — no layer needs
+ * to know what is above or below it.
+ */
+const layers: Array<() => void> = []
+let listening = false
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (event.key !== 'Escape' || layers.length === 0) return
+
+  const top = layers[layers.length - 1]
+  event.preventDefault()
+  // Stops a native listener further out from treating the same press as its own.
+  event.stopPropagation()
+  top?.()
+}
+
+/**
+ * Registers a layer imperatively and returns its removal function. Exported for
+ * the tests, which exercise the ordering rule without mounting React.
+ */
+export function pushEscapeLayer(close: () => void): () => void {
+  layers.push(close)
+
+  if (!listening) {
+    // Capture phase, so the chain sees the press before anything inside the
+    // dialog can swallow it.
+    window.addEventListener('keydown', onKeyDown, true)
+    listening = true
+  }
+
+  return () => {
+    const index = layers.lastIndexOf(close)
+    if (index !== -1) layers.splice(index, 1)
+
+    if (layers.length === 0 && listening) {
+      window.removeEventListener('keydown', onKeyDown, true)
+      listening = false
+    }
+  }
+}
+
+/**
+ * Registers a dismissible layer while `active` is true.
+ *
+ * `onClose` is read through a ref-like closure on every render so a stale
+ * handler is never called — the stack stores the identity, the effect keeps it
+ * current by re-registering when it changes.
+ */
+export function useEscapeLayer(active: boolean, onClose: () => void): void {
+  useEffect(() => {
+    if (!active) return
+    return pushEscapeLayer(onClose)
+  }, [active, onClose])
+}
+
+/** Test seam: how many layers are currently open. */
+export function openLayerCount(): number {
+  return layers.length
+}
diff --git a/apps/editor/panel/lib/health.ts b/apps/editor/panel/lib/health.ts
new file mode 100644
index 000000000..ba7222207
--- /dev/null
+++ b/apps/editor/panel/lib/health.ts
@@ -0,0 +1,65 @@
+import { cpus, freemem, loadavg, totalmem } from 'node:os'
+import { cpuUsage, memoryUsage } from 'node:process'
+
+/**
+ * Real runtime measurement, replacing the prototype's simulated metrics.
+ *
+ * CPU is a delta, not an instant: `process.cpuUsage()` is cumulative, so a
+ * single reading says nothing. The percentage is (cpu time used) / (wall time ×
+ * cores) between two polls, clamped to 5–95 like the old panel — a flat 0 or
+ * 100 reads as "the probe is broken" rather than as a measurement.
+ */
+
+interface Sample {
+  cpu: ReturnType<typeof cpuUsage>
+  at: number
+}
+
+let previous: Sample | null = null
+
+export interface HealthReading {
+  /** 0–100, clamped to 5–95. */
+  cpuPercent: number
+  /** Resident heap in GB, two decimals. */
+  heapGb: number
+  /** System memory in use, GB. */
+  systemUsedGb: number
+  systemTotalGb: number
+  loadAverage1m: number
+  cores: number
+  uptimeSeconds: number
+  at: string
+}
+
+export function readHealth(): HealthReading {
+  const now = Date.now()
+  const cpu = cpuUsage()
+
+  let cpuPercent = 5
+  if (previous) {
+    const elapsedMs = Math.max(1, now - previous.at)
+    const usedMs = (cpu.user - previous.cpu.user + (cpu.system - previous.cpu.system)) / 1000
+    const cores = Math.max(1, cpus().length)
+    cpuPercent = Math.round((usedMs / (elapsedMs * cores)) * 100)
+  }
+  previous = { cpu, at: now }
+
+  const memory = memoryUsage()
+  const total = totalmem()
+  const free = freemem()
+
+  return {
+    cpuPercent: Math.min(95, Math.max(5, cpuPercent)),
+    heapGb: round2(memory.heapUsed / 1024 ** 3),
+    systemUsedGb: round2((total - free) / 1024 ** 3),
+    systemTotalGb: round2(total / 1024 ** 3),
+    loadAverage1m: round2(loadavg()[0] ?? 0),
+    cores: cpus().length,
+    uptimeSeconds: Math.round(process.uptime()),
+    at: new Date(now).toISOString(),
+  }
+}
+
+function round2(value: number): number {
+  return Math.round(value * 100) / 100
+}
diff --git a/apps/editor/panel/lib/hooks/use-breakpoint.ts b/apps/editor/panel/lib/hooks/use-breakpoint.ts
new file mode 100644
index 000000000..478f420fd
--- /dev/null
+++ b/apps/editor/panel/lib/hooks/use-breakpoint.ts
@@ -0,0 +1,69 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+/**
+ * Breakpoints are measured in JS against the real viewport, not declared in CSS
+ * (section 08). That decision came out of a concrete bug: layout was keyed off a
+ * simulated device rather than the actual window, so a narrow window in "desktop"
+ * mode kept the two-pane layout and the content overlapped.
+ *
+ *   desktop  >= 1080   two-pane sign-in, 208 px console rail
+ *   wide     >= 700    rail visible, full table header
+ *   narrow   <  1080
+ *   mobile   <   700   stacked layout, bottom tab strip
+ *
+ * Touch sizing (44 px targets) follows `mobile` only — not tablet, and not
+ * mobile landscape, both of which produced oversized controls when it did.
+ */
+export interface Breakpoint {
+  width: number
+  isDesktop: boolean
+  isWide: boolean
+  isNarrow: boolean
+  isMobile: boolean
+  /** Touch sizing gate — mobile portrait only. */
+  touch: boolean
+  /** False until the first measurement, so SSR and hydration agree. */
+  ready: boolean
+}
+
+const SSR: Breakpoint = {
+  width: 1920,
+  isDesktop: true,
+  isWide: true,
+  isNarrow: false,
+  isMobile: false,
+  touch: false,
+  ready: false,
+}
+
+function measure(width: number): Breakpoint {
+  const isDesktop = width >= 1080
+  const isMobile = width < 700
+  return {
+    width,
+    isDesktop,
+    isWide: width >= 700,
+    isNarrow: !isDesktop,
+    isMobile,
+    touch: isMobile,
+    ready: true,
+  }
+}
+
+export function useBreakpoint(): Breakpoint {
+  const [state, setState] = useState<Breakpoint>(SSR)
+
+  useEffect(() => {
+    const update = () => setState(measure(window.innerWidth))
+    update()
+
+    // resize covers orientation changes on every browser that matters; a
+    // dedicated orientationchange listener would just fire a duplicate.
+    window.addEventListener('resize', update, { passive: true })
+    return () => window.removeEventListener('resize', update)
+  }, [])
+
+  return state
+}
diff --git a/apps/editor/panel/lib/i18n/en.ts b/apps/editor/panel/lib/i18n/en.ts
new file mode 100644
index 000000000..51a5b6872
--- /dev/null
+++ b/apps/editor/panel/lib/i18n/en.ts
@@ -0,0 +1,727 @@
+/**
+ * English dictionary — the default. Key names are carried over one-to-one from
+ * the prototype's STR/L dictionaries so a string can be traced between the two
+ * without a lookup table; `c.*` is console chrome, exactly as it was there.
+ */
+export const en = {
+  /* ——— sign-in ——— */
+  heroTitle: 'Every warehouse, modelled to the millimetre.',
+  heroLead:
+    'Parametric racking, 2D floorplans and 3D walkthroughs of your logistics sites — in one editor. Sign in to open a site or the system console.',
+  liveTwin: 'Live twin',
+  storage: 'Storage',
+  picking: 'Picking',
+  footprint: 'Footprint',
+  pallets: 'pallets',
+  positions: 'positions',
+  signIn: 'Sign in',
+  signInLead: 'Enter credentials to reach the 3D editor or the system console.',
+  identifier: 'Username or work email',
+  identifierHint: 'Username alone resolves to @netlog.com.tr',
+  password: 'Password',
+  forgot: 'Forgot password?',
+  show: 'SHOW',
+  hide: 'HIDE',
+  showTitle: 'Show password',
+  hideTitle: 'Hide password',
+  remember: 'Keep me signed in on this device',
+  or: 'or',
+  ssoNetlog: 'Sign in with your Netlog account',
+  ssoTitle: 'Single sign-on is enforced',
+  ssoNotice: 'Password sign-in is off for this domain. Continue with your Netlog account.',
+  resources: 'Platform resources',
+  qlProjects: 'Editor projects',
+  qlViewer: 'Viewer mode',
+  qlGuides: 'User guides',
+  qlChangelog: 'Changelog',
+  noAccount: 'No account yet?',
+  requestAccount: 'Request an account',
+  internalOnly: 'Internal system — authorised personnel only',
+  lastSignIn: 'Last sign-in',
+  protected: 'DigitalTwin Editor v0.9.1 · Protected connection',
+  protectedUpper: 'DIGITALTWIN EDITOR V0.9.1 · PROTECTED CONNECTION',
+  signature: 'NETLOG LOJİSTİK HİZMETLERİ A.Ş. · BUILT BY RESUL ÖVÜR & CENGİZ TUNA',
+  sessionExpiredTitle: 'Session expired',
+  sessionExpiredLead:
+    'Your session was suspended after {minutes} minutes of inactivity. Sign in again to resume your work.',
+  okLabel: 'OK',
+
+  /* ——— permission labels ——— */
+  perm: {
+    admin_access: 'Admin access',
+    edit_projects: 'Edit projects',
+    create_projects: 'Create projects',
+    delete_projects: 'Delete projects',
+    access_settings: 'Access settings',
+    view_projects: 'View projects',
+    edit_users: 'Edit users',
+    edit_roles: 'Edit roles',
+    view_logs: 'View logs',
+  },
+
+  /* ——— two-factor ——— */
+  step2: 'Step 2 of 2',
+  verifyTitle: 'Verification code',
+  verifyLead: 'Enter the 6-digit code from your authenticator app.',
+  trustDevice: 'Trust this device for 30 days',
+  verifyCta: 'Verify and continue',
+  resend: 'Resend code',
+  resent: 'Code sent — check your app',
+  otherAccount: 'Use another account',
+  recovery: 'Lost your device? Use a recovery code',
+  vLost: 'Lost your device?',
+  vSetup: 'Set up authenticator',
+
+  /* ——— password reset ——— */
+  resetTitle: 'Reset password',
+  resetLead: 'We will email a single-use link to your work address.',
+  emailLabel: 'Email address',
+  resetCta: 'Send reset link',
+  backToSignIn: 'Back to sign in',
+  inboxTitle: 'Check your inbox',
+  inboxLead:
+    'A single-use reset link is on its way. It expires in 30 minutes, and the request is recorded for the administrators.',
+  openLink: 'Open the emailed link (prototype)',
+
+  /* ——— account request ——— */
+  reqTitle: 'Request an account',
+  reqLead: 'Only Netlog work addresses can be registered. An administrator approves every request.',
+  fullName: 'Full name',
+  workEmail: 'Work email',
+  usernameHint: 'This also becomes your username',
+  department: 'Department',
+  accessNeeded: 'Access needed',
+  whichSites: 'Which sites do you need?',
+  submitRequest: 'Submit request',
+  reqSentTitle: 'Request submitted',
+  reqSentLead:
+    'An administrator reviews new accounts in the console. Either way you will get an email — if it is approved, with a link to set your password.',
+
+  /* ——— errors ——— */
+  lockedPrefix: 'Locked',
+  errFields: 'Please fill in all fields.',
+  errCreds: 'Username or password is incorrect.',
+  errAttemptsLeft: 'attempts left before a temporary lock.',
+  errAttemptLeft: 'attempt left before a temporary lock.',
+  errLocked: 'Too many failed attempts. Sign-in is locked for {seconds} seconds.',
+  errCode: 'Enter all six digits of your verification code.',
+  errSuspended: 'This account is suspended. Contact an administrator.',
+  errInactive: 'This account is inactive. Contact an administrator.',
+  errSsoRequired: 'Password sign-in is off for this domain — use your Netlog account.',
+  errServer: 'Something went wrong on our side. Try again, or quote this reference to support.',
+  errNetwork: 'Cannot reach the server. Check your connection and try again.',
+  errTokenInvalid: 'This link is not valid.',
+  errTokenExpired: 'This link has expired. Request a new one.',
+  errTokenUsed: 'This link has already been used.',
+  errInviteExpired: 'This invitation has expired. Ask an administrator to resend it.',
+  errInviteRevoked: 'This invitation was revoked.',
+  errPasswordPolicy: 'The password does not meet every rule below.',
+  errPasswordMismatch: 'Passwords do not match.',
+  errPolicyRequired: 'Accept the internal use policy to continue.',
+  errValidation: 'Check the highlighted field and try again.',
+  errUsernameChars: 'Use letters, digits, dot, dash or underscore only.',
+  errForbidden: 'Your role does not carry the permission for this action.',
+  errPrimaryAdminProtected:
+    'The primary administrator cannot be deleted, deactivated, or have its role changed. Locking out the only account that can grant permissions is not a recoverable mistake.',
+  errCannotDeleteSelf: 'You cannot delete the account you are signed in with.',
+  errUserReferenced:
+    'Records in the system still point at this account (sites it created, invitations it sent). The database has not applied the migration that lets those survive a deletion — restart the application so migrations run, then try again.',
+  inviteMailFailed:
+    'the account was created, but the invitation email could not be sent. Use Resend on the account once mail is working.',
+  errExternalNotAllowed:
+    'External accounts are switched off. Enable them in Settings → Identity, or approve this person as internal.',
+  errInviteNotResendable:
+    'This invitation can no longer be resent — it has already been accepted, or it was revoked.',
+  errInviteNotRevocable:
+    'This invitation can no longer be revoked — it has already been accepted, or it was revoked.',
+  errJobNotCancellable: 'Only a queued or running job can be cancelled.',
+  errJobNotRetryable: 'Only a failed or cancelled job can be retried.',
+  errKeyNotRevocable: 'This API key has already been revoked.',
+  errMfaAlreadyEnrolled:
+    'Two-factor authentication is already set up on this account. Remove it before enrolling again.',
+  errNotFound: 'That record no longer exists — it may have been deleted in another session.',
+  errRequestDecided: 'This access request has already been decided by another administrator.',
+  errRoleExists: 'A role with that name already exists.',
+  errSiteStateUnchanged: 'That site is already in this state.',
+  errSystemRoleLocked: 'Built-in roles cannot be edited or deleted.',
+  errUserExists: 'That email address or username is already taken.',
+  errMailFailed:
+    'The message could not be delivered. Check the SMTP host, port and credentials — the reason is in the server log.',
+  capsLock: 'Caps Lock is on',
+  holdToShow: 'Hold to show password',
+
+  /* ——— set password / first sign-in ——— */
+  spKickReset: 'Password reset · Step 2 / 2',
+  spKickFirst: 'First sign-in · Account setup',
+  spTitle: 'Set a new password',
+  spTitleFirst: 'Set up your account',
+  spLead: 'Link verified. Your new password must meet the rules below.',
+  spLeadFirst: 'You signed in with a temporary password. Set a permanent one to continue.',
+  spNew: 'New password',
+  spAgain: 'New password (again)',
+  spMismatch: 'Passwords do not match.',
+  spRevoke: 'Sign out all other sessions',
+  spConsent: 'I have read and accept the internal use policy.',
+  spCta: 'Save password',
+  spCtaFirst: 'Set up and continue',
+  spDoneTitle: 'Password updated',
+  spDoneLead: 'Your new password is saved and other sessions were signed out. You can sign in now.',
+  spDoneCta: 'Back to sign in',
+  spDoneCtaFirst: 'Continue to console',
+  strength: ['Weak', 'Fair', 'Good', 'Strong'] as [string, string, string, string],
+  c1: 'At least 10 characters',
+  c2: 'Upper and lower case',
+  c3: 'At least one digit',
+  c4: 'At least one symbol',
+  c5: 'No name or “netlog” inside',
+
+  /* ——— MFA enrolment ——— */
+  muKick: 'Two-factor · Setup',
+  muTitleScan: 'Set up your authenticator',
+  muTitleVerify: 'Verify the code',
+  muTitleCodes: 'Your recovery codes',
+  muLeadScan: 'Scan the QR code with your authenticator app, or enter the key manually.',
+  muLeadVerify: 'Enter the 6-digit code your app generates.',
+  muLeadCodes: 'Use these codes if you lose access to your device. Each code works once.',
+  muQr: 'QR code',
+  muManual: 'Manual entry key',
+  muCopy: 'Copy',
+  muCopied: 'Copied ✓',
+  muContinue: 'Continue',
+  muVerify: 'Verify',
+  muBack: 'Back to QR code',
+  muDownload: 'Download codes (.txt)',
+  muSavedLbl: 'I stored these codes somewhere safe',
+  muFinish: 'Finish setup',
+  muDone: 'Two-factor authentication is set up',
+  muCodeErr: 'Enter the full 6-digit code.',
+
+  /* ——— recovery sign-in ——— */
+  recKick: 'Recovery',
+  recTitle: 'Sign in with a recovery code',
+  recLead:
+    'If you cannot reach your authenticator device, enter one of the codes you downloaded during setup.',
+  recLabel: 'Recovery code',
+  recCta: 'Verify and sign in',
+  recBack: 'Back to code entry',
+  recErr: 'Code not recognized. Enter it as XXXX-XXXX, dash included.',
+  recDoneTitle: 'Signed in',
+  recDoneLead:
+    'That recovery code is now spent. We recommend generating a fresh code set from the console.',
+  recGoConsole: 'Continue to console',
+
+  /* ——— idle warning ——— */
+  idleTitle: 'Still there?',
+  idleLead: 'Your session is about to end due to inactivity. Time left:',
+  idleStay: 'Stay signed in',
+  idleOut: 'Sign out',
+  idleExtended: 'Session extended',
+
+  inviteUser: 'Invite user',
+  inviteFullName: 'Full name',
+  inviteEmail: 'Email address',
+  inviteRole: 'Access role',
+  inviteOrg: 'Organization',
+  orgInternal: 'Internal',
+  orgExternal: 'External (3PL partner)',
+  inviteSites: 'Site access',
+  save: 'Save',
+  cancel: 'Cancel',
+  clearFilters: 'Clear filters',
+
+  /* Accessible names for controls that show only an icon, plus the "e.g."
+     prefixes on sample values. All of it is prose, and all of it was reaching
+     the screen in English regardless of the selected language. */
+  /* Command palette (⌘K). */
+  cpPlaceholder: 'Search commands, tabs and people…',
+  cpActions: 'Actions',
+  cpInvite: 'Invite a user',
+  cpNewRole: 'Create a role',
+  cpThemeLight: 'Switch to the light theme',
+  cpThemeDark: 'Switch to the dark theme',
+  cpClearLogs: 'Clear diagnostics',
+  cpEmpty: 'Nothing matches that.',
+
+  a11yTheme: 'Toggle day/night mode',
+  themeSystem: 'Theme: system',
+  themeLight: 'Theme: light',
+  themeDark: 'Theme: dark',
+  a11yPalette: 'Open command palette',
+  a11yUserDetail: 'Open user detail',
+  a11yPrevPage: 'Previous page',
+  a11yNextPage: 'Next page',
+  /* Selection toolbar. */
+  bulkSelected: '{count} of {total} selected',
+  bulkSelectAll: 'Select every account on this page',
+  bulkSelectOne: 'Select {name}',
+  bulkClear: 'Clear selection',
+  bulkRoleViewer: 'Set role to Viewer',
+  bulkRevoke: 'Revoke sessions',
+  bulkDeactivate: 'Deactivate',
+  bulkDelete: 'Delete',
+  bulkConfirmTitle: 'Apply to {count} account(s)?',
+  bulkRoleViewerLead:
+    'Every selected account drops to Viewer. Site-level assignments are untouched.',
+  bulkRevokeLead: 'Every selected account is signed out on all devices and must sign in again.',
+  bulkDeactivateLead:
+    'Deactivated accounts cannot sign in, and their live sessions end immediately.',
+  bulkDeleteLead:
+    'Accounts, their site assignments and their sessions are removed. This cannot be undone.',
+  bulkSkipNote: 'The primary administrator and your own account are skipped automatically.',
+  bulkTypeCount: 'Type {count} to confirm',
+  bulkApplied: '{count} account(s) updated',
+  bulkSkipped: '{count} skipped',
+  bulkNothing: 'Nothing to apply — every selected account already matches.',
+  bulkReasonPrimaryAdmin: 'primary administrator',
+  bulkReasonSelf: 'your own account',
+  bulkReasonNotFound: 'no longer exists',
+  bulkReasonNoop: 'already in that state',
+
+  egName: 'e.g. Yusuf Aydın',
+  egRole: 'e.g. Supervisor',
+  egReason: 'e.g. Sakarya LM1 racking layout for the Q4 expansion',
+
+  noUsersMatch: 'No users match these filters',
+  emptyHint: 'Try a different search term, or clear the role filter.',
+  loadFailedTitle: 'Could not load accounts',
+  loadFailedLead: 'The request failed. Retry, or quote this reference to support.',
+  retry: 'Retry',
+  page: 'Page',
+  colInvite: 'Invite',
+  invitedLbl: 'Invited',
+  inviteOpen: 'Open invite',
+  dwResend: 'Resend invite',
+  dwRevokeInvite: 'Revoke invite',
+  invLeftFmt: 'days left',
+  invExpired: 'Expired',
+  invRenewToast: 'invite renewed — link valid again',
+  invRevokeToast: 'invite revoked',
+  dwSiteAccess: 'Site access',
+  dwSiteHint: 'Click a role to change it',
+  dwNoSites: 'No sites to assign yet — create one under Sites & Projects.',
+  dwPermsLbl: 'Effective permissions',
+  dwNoAccess: 'No access',
+  dwActions: 'Actions',
+  dwUsername: 'Username',
+  dwLastSeen: 'Last seen',
+  dwSessions: 'Active sessions',
+  dwMfaLbl: 'Two-factor auth',
+  dwOrgLbl: 'Organization',
+  dwResetPass: 'Generate temp password',
+  dwSignout: 'Sign out all sessions',
+  dwDeactivate: 'Deactivate',
+  dwActivate: 'Activate',
+  dwDelete: 'Delete account',
+  dwPassToast: 'got a new temporary password',
+  dwSignoutToast: 'sessions signed out',
+  dwPrimaryAdmin: 'Primary administrator — cannot be deleted or deactivated.',
+  tempPassTitle: 'Temporary password',
+  tempPassLead: 'Shown once. Copy it now — it cannot be retrieved again.',
+  copy: 'Copy',
+  copied: 'Copied',
+  close: 'Close',
+  asgTitle: 'Approve & assign',
+  asgLead:
+    'Pick the role and site access — the user is added as invited and an invite link is emailed.',
+  asgRole: 'Role',
+  asgSites: 'Site access',
+  asgNeedSite: 'Select at least one site.',
+  asgConfirm: 'Approve & send invite',
+  invitedToast: 'invited — invite link emailed',
+  confirmDeleteTitle: 'Delete this account?',
+  confirmDeleteLead:
+    'The account, its site assignments and its sessions are removed. The audit trail keeps the record.',
+  confirmDelete: 'Delete',
+  newRoleName: 'New role name',
+  roleDeleteConfirm: 'Delete this custom role?',
+  roleDeleteLead: 'Accounts holding it fall back to Viewer.',
+  roleNoMatch: 'No role matches this search',
+  roleNoMatchHint: 'The four built-in roles are always here — clear the search to see them.',
+  systemRole: 'System role',
+  systemRoleLocked: 'System roles are defined in code and cannot be edited.',
+  permEnabled: 'enabled',
+  thisDevice: 'This device',
+  revokeSession: 'Revoke',
+  noOtherSessions: 'No other devices are signed in.',
+  sessionPolicy: 'Session policy',
+  sessionPolicyLead: 'Idle timeout and device limits are enforced by the server.',
+  polIdle: 'Idle timeout',
+  polLimit: 'Concurrent sessions',
+  polKeep: 'Keep me signed in',
+  polMfa: 'Two-factor required',
+  polMin: 'min',
+  on: 'On',
+  off: 'Off',
+
+  stLead: 'Warehouses and their projects — provisioning starts here, without opening the editor.',
+  stNew: '+ New warehouse',
+  stNameLbl: 'Warehouse name',
+  stTplLbl: 'Start from',
+  stFpLbl: 'Footprint (m²)',
+  stTplEmpty: 'Empty',
+  stTplIfc: 'Import IFC',
+  stTplCopy: 'Duplicate site',
+  stHint: 'Provisioning is queued as a job; the site shows "Setting up" until it completes.',
+  stCreate: 'Create warehouse',
+  stOpen: 'Open in editor',
+  stArch: 'Archive',
+  stRestore: 'Restore',
+  stActive: 'Active',
+  stSetup: 'Setting up',
+  stArchived: 'Archived',
+  stStorage: 'Storage slots',
+  stPicking: 'Picking slots',
+  stFp2: 'Footprint (m²)',
+  stUsers: 'People',
+  stEmptyTitle: 'No sites yet',
+  stEmptyLead:
+    'Create the first warehouse — its card appears here and provisioning is tracked in the job queue.',
+  stQueuedToast: 'provisioning queued',
+  stOpenNote: 'The site opens in the running editor app — not part of this console.',
+  jbLead: 'Imports, report exports and backups — the queue streams live.',
+  jbQueued: 'Queued',
+  jbRunning: 'Running',
+  jbFailed: 'Failed',
+  jbDone: 'Done',
+  jbCancelled: 'Cancelled',
+  jbRetry: 'Retry',
+  jbCancel: 'Cancel',
+  jbBy: 'queued by',
+  jbEmptyTitle: 'The queue is empty',
+  jbEmptyLead: 'No job matches this filter — IFC imports, reports and backups are listed here.',
+  jbLive: 'Live',
+  jbPolling: 'Polling',
+  igKeysTitle: 'API keys',
+  igKeysLead: 'Site-scoped access to the scene API — the raw key is shown once and never again.',
+  igNewKey: '+ New key',
+  igKeyNameLbl: 'Key name',
+  igScopeLbl: 'Scope',
+  igSiteLbl: 'Site',
+  igAllSites: 'All sites',
+  igCreateKey: 'Generate key',
+  igScopeRead: 'Read',
+  igScopeWrite: 'Read + write',
+  igSecretTitle: 'Key generated — copy it now',
+  igSecretNote:
+    'For security it is never shown again; if it is lost, revoke it and generate a new one.',
+  igRevoke: 'Revoke',
+  igRevoked: 'Revoked',
+  igNever: 'Never used',
+  igNoKeys: 'No API keys yet.',
+  igHooksTitle: 'Webhooks',
+  igHooksLead: 'Events are delivered to external systems as signed POSTs; failures are retried.',
+  igAddHook: '+ Add webhook',
+  igEventsLbl: 'Events',
+  igCreateHook: 'Add webhook',
+  igTest: 'Send test',
+  igPause: 'Pause',
+  igResume: 'Resume',
+  igStActive: 'Active',
+  igStPaused: 'Paused',
+  igStFailing: 'Failing',
+  igTestOk: 'test event delivered',
+  igTestFail: 'test event failed',
+  igNoHooks: 'No webhooks yet.',
+  igLastDelivery: 'Last delivery',
+  seLead:
+    'Session policy, identity rules and appearance — every change is written to the audit trail.',
+  seSecurity: 'Security',
+  seIdentity: 'Identity and invites',
+  seAppearance: 'Appearance',
+  seSessLen: 'Session length',
+  seSessLenD: 'The session ends after this long without activity.',
+  seKeep: '"Keep me signed in" allowed',
+  seKeepD: 'Users may ask the browser to remember the session at sign-in.',
+  seKeepDays: 'Remember for',
+  seKeepDaysD: 'Lifetime of a remembered session.',
+  seTrust: 'Trusted device',
+  seTrustD: 'Two-factor is not asked again on the same device for this long.',
+  seConc: 'Concurrent session limit',
+  seConcD: 'Past the limit the oldest session is signed out.',
+  seMfa: 'Two-factor required',
+  seMfaD: 'Every account must enrol two-factor authentication.',
+  seSso: 'Single sign-on domains',
+  seSsoD: 'These domains sign in with SSO instead of a password.',
+  seSsoNone: 'None — password sign-in is open',
+  seInvite: 'Invite validity',
+  seInviteD: 'An expired invite is refused at sign-in and renewed from the console.',
+  seExternal: 'Allow external users',
+  seExternalD: 'External (3PL) accounts reach only assigned sites, with an "External" badge.',
+  seTheme: 'Theme',
+  seThemeD: 'Default appearance of the console.',
+  seSystem: 'System',
+  seMail: 'Mail',
+  seMailTest: 'Test message',
+  seMailTestD:
+    'Sends one sample message to your own address, so delivery and design can be checked.',
+  seMailSend: 'Send',
+  seMailSending: 'Sending…',
+  seMailSent: 'Sent to {email}',
+  seDark: 'Dark',
+  seLight: 'Light',
+  seLang: 'Language',
+  seLangD: 'Interface language and number/date formats.',
+  seDays: 'days',
+  seSaved: 'Setting saved',
+  errSiteExists: 'A site with that name already exists.',
+  errHookHttps: 'Enter a valid https:// URL.',
+  errEventRequired: 'Select at least one event.',
+
+  ovCpu: 'CPU',
+  ovMemory: 'Heap',
+  ovSystemMem: 'System memory',
+  ovLoad: 'Load average',
+  ovUptime: 'Uptime',
+  ovCores: 'cores',
+  ovAccounts: 'Accounts',
+  ovSites: 'Sites',
+  ovSignedIn: 'Signed in',
+  ovQueue: 'Queue',
+  ovNoConnected: 'Nobody has been active in the last 20 minutes.',
+  ovNoIncidents: 'No warnings or errors recorded.',
+  lgLead: 'Runtime diagnostics — sign-ins, sessions and captured browser errors.',
+  lgClear: 'Clear diagnostics',
+  lgClearTitle: 'Clear diagnostics?',
+  lgClearLead:
+    'Info-level runtime entries are removed. Warnings, errors and the audit trail are kept, and the clear itself is recorded.',
+  lgCleared: 'entries removed',
+  lgEmpty: 'No entries match these filters.',
+  lgLoadMore: 'Load more',
+  lgAllLevels: 'All levels',
+  lgActor: 'Actor',
+  auLead: 'Who changed what, and when. Append-only — clearing diagnostics does not touch it.',
+  auEmpty: 'No changes recorded yet.',
+  auKindUser: 'Accounts',
+  auKindRole: 'Roles',
+  auKindInvite: 'Invites',
+  auKindRequest: 'Requests',
+  auKindSite: 'Sites',
+  auKindKey: 'API keys',
+  auKindHook: 'Webhooks',
+  auKindSettings: 'Settings',
+  clLead: 'Platform and warehouse plugin releases, newest first.',
+  clLive: 'Live',
+  clSnapshot: 'Snapshot',
+  clEditor: 'DigitalTwin editor release',
+  clPlugin: 'DigitalTwin warehouse plugin',
+  clConsole: 'DigitalTwin console',
+
+  /* ——— 3D scenes tab ——— */
+  scTitle: '3D scenes',
+  scLead:
+    'Every scene on the server. Drafts belong to whoever drew them; publishing puts a project on Sites & Projects.',
+  scScene: 'Scene',
+  scOwner: 'Owner',
+  scNodes: 'Nodes',
+  scUpdated: 'Updated',
+  scOpen: 'Open',
+  scUnowned: 'unowned',
+  scStatus: 'Status',
+  scPublished: 'Published',
+  scDraft: 'Draft',
+  scPublish: 'Publish',
+  scUnpublish: 'Withdraw',
+  scRename: 'Rename',
+  scRenamePrompt: 'New project name',
+  scDuplicate: 'Duplicate',
+  scDelete: 'Delete',
+  scDeleteConfirm: 'Delete “{name}” and everything in it? This cannot be undone.',
+  scAdopt: 'Adopt unowned scenes',
+  scSaved: 'Saved.',
+  scSaveFailed: 'Could not save — try again.',
+  scEmpty: 'No scenes on the server yet.',
+  clFetched: 'Fetched',
+  clEmpty: 'No release notes available.',
+
+  /* ——— console chrome ——— */
+  c: {
+    monitor: 'Monitor',
+    access: 'Access',
+    platform: 'Platform',
+    overview: 'Overview',
+    diagnostics: 'Diagnostics',
+    users: 'Users',
+    roles: 'Roles',
+    audit: 'Audit trail',
+    sessions: 'Sessions',
+    changelog: 'Changelog',
+    sites: 'Sites & Projects',
+    scenes: '3D scenes',
+    openEditor: 'Editor',
+    jobs: 'Job queue',
+    integrations: 'API & Webhooks',
+    settings: 'Settings',
+    overviewLead: 'Runtime health and access activity across the platform.',
+    rolesTitle: 'Roles and permissions',
+    rolesLead:
+      'A permission matrix instead of nested accordions — scan a whole role in one glance.',
+    auditLead: 'Who changed what, and when. Separate from runtime diagnostics.',
+    sessionsTitle: 'Active sessions',
+    sysStatus: 'System status',
+    sysStatusLead: 'Runtime health and access activity, polled every 4 s.',
+    userAccounts: 'User accounts',
+    incidentLog: 'Diagnostic incident log',
+    rolePerms: 'Role permissions',
+    changelogLead: 'Same entries as the public page, kept here for admins reviewing a rollout.',
+    addUser: 'Add user',
+    addRole: 'Add role',
+    clearLogs: 'Clear logs',
+    closeForm: 'Close form',
+    search: 'Search',
+    signOut: 'Sign out',
+    signOutShort: 'Exit',
+    guides: 'Guides',
+    cpu: 'CPU diagnostics',
+    memory: 'Allocated memory',
+    activeSites: 'Active sites',
+    userSearchPh: 'Search name, email or role',
+    readOnly: 'Read-only',
+    readOnlyLead:
+      'Your role does not carry the edit_users permission, so accounts are listed but not editable.',
+    goTo: 'Go to',
+    colUser: 'Name',
+    colEmail: 'Email',
+    colUsername: 'Username',
+    colPassword: 'Password',
+    colRole: 'Role',
+    col2fa: '2FA',
+    colStatus: 'Status',
+    colActions: 'Actions',
+    live: 'Live',
+    endSession: 'End session',
+    revoke: 'Revoke',
+    signedInUsers: 'Signed-in users',
+    connectedUsers: 'Connected users',
+    last20: 'last 20 min',
+    recentIncidents: 'Recent incidents',
+    viewAll: 'View all',
+    devModeTitle: 'Diagnostic mode is active',
+    devModeLead:
+      'Full monitoring stays on in production builds to trace React fiber states, WebGPU pipelines and layout rendering.',
+    enforced: 'Enforced',
+    filterAll: 'All',
+    edit: 'Edit',
+    reject: 'Reject',
+    approveAs: 'Approve as',
+    buildLabel: 'Build v0.9.1',
+    webgpuHealthy: 'WebGPU healthy',
+    accounts: 'accounts',
+    without2fa: 'without 2FA',
+    viewingAs: 'viewing as',
+    of: 'of',
+    del: 'Delete',
+    rows: 'Rows',
+    showing: 'Showing',
+    requestsAwaiting: 'account requests awaiting approval',
+    statusActive: 'Active',
+    statusInactive: 'Inactive',
+    mfaOn: 'On',
+    mfaOff: 'Off',
+    events: 'events',
+    errorsCaptured: 'errors captured',
+    logSearchPh: 'Search message or actor',
+    lastHour: 'Last hour',
+    today: 'Today',
+    days7: '7 days',
+    lvInfo: 'Info',
+    lvWarn: 'Warn',
+    lvError: 'Error',
+    userPrefix: 'User:',
+    allUsers: 'All users',
+    logsRestricted: 'View logs restricted',
+    logsRestrictedLead: 'Your role does not carry the view_logs permission.',
+    rolesCount: 'roles',
+    permsCount: 'permissions',
+    roleSearchPh: 'Search roles',
+    viewMatrix: 'Matrix',
+    viewList: 'List',
+    colPermission: 'Permission',
+    appendOnly: 'append-only',
+    auditBanner:
+      'Append-only record of account and role changes. Entries cannot be edited or removed — clearing diagnostics does not touch this trail.',
+    rolesFootnote:
+      'Changes write straight to the permissions API. Deleting a custom role reassigns its users to Viewer.',
+    protectedUpper: 'DIGITALTWIN EDITOR V0.9.1 · PROTECTED CONNECTION',
+    platformNoteTitle: 'Built in house',
+    platformNoteBody:
+      'DigitalTwin is developed and maintained by Resul Övür and Cengiz Tuna for Netlog. Feature announcements land in the',
+    changelogWord: 'changelog',
+    auCreated: 'Created',
+    auUpdated: 'Updated',
+    auDeleted: 'Deleted',
+    auAccess: 'Access',
+    openFullPage: 'Open full page',
+    backToConsole: 'Back to console',
+  },
+
+  /**
+   * Audit and diagnostics lines, rendered from the stored event key. The English
+   * text here matches what the row stores in `audit_log.message` — a reader
+   * comparing the screen against a raw export should see the same sentence.
+   */
+  audit: {
+    signedOut: 'Signed out',
+    signedOutAll: 'Signed out of all devices',
+    signInUnknown: 'Sign-in failed — unknown identifier',
+    signInSuspended: 'Sign-in refused — account suspended',
+    signInWrongPassword: 'Sign-in failed — wrong password (attempt {attempt})',
+    signInAwaitingMfa: 'Password accepted — awaiting two-factor',
+    signedIn: 'Signed in',
+    signedInMfaCleared: 'Signed in — two-factor cleared',
+    sessionRevoked: 'Session revoked',
+    allSessionsRevoked: 'All sessions revoked for {email}',
+    sessionsRevokedFor: 'Sessions revoked: {email} ({count})',
+    resetIssued: 'Password reset link issued',
+    resetUnroutable: 'Password reset requested for an address that cannot receive one',
+    passwordChanged: 'Password changed',
+    passwordChangedFirst: 'Password changed on first sign-in',
+    inviteAccepted: 'Invite accepted — password set',
+    inviteRevoked: 'Invitation revoked',
+    inviteResent: 'Invitation resent to {email}',
+    mfaEnrolStarted: 'Two-factor enrolment started',
+    mfaEnrolled: 'Two-factor enrolled',
+    mfaCodeRejected: 'Two-factor code rejected (attempt {attempt})',
+    recoveryUsed: 'Recovery code used — code retired',
+    recoveryRejected: 'Recovery code rejected (attempt {attempt})',
+    userInvited: 'User invited: {email} as {role}',
+    userUpdated: 'User updated: {email} ({changes})',
+    userUpdatedPlain: 'User updated: {email}',
+    userDeleted: 'User deleted: {email}',
+    tempPassword: 'Temporary password issued for {email}',
+    siteAccessChanged: 'Site access changed for {email}: {changes}',
+    roleCreated: 'Role created: {name}',
+    rolePermissions: 'Permissions updated for {name}{changes}',
+    roleDeleted: 'Role deleted: {name} — {count} account(s) reassigned to Viewer',
+    siteCreated: 'Site created: {name} ({template}) — provisioning queued as {jobId}',
+    siteArchived: 'Site archived: {name}',
+    siteRestored: 'Site restored: {name}',
+    jobRequeued: 'Job re-queued: {id} ({kind}), attempt {attempt}',
+    jobCancelled: 'Job cancelled: {id} ({kind})',
+    apiKeyCreated: 'API key created: {name} ({scope}) · {site}',
+    apiKeyRevoked: 'API key revoked: {name} ({prefix}…)',
+    webhookAdded: 'Webhook added: {url} · {events}',
+    webhookPaused: 'Webhook paused: {url}',
+    webhookResumed: 'Webhook resumed: {url}',
+    webhookDeleted: 'Webhook deleted: {id}',
+    webhookTestDelivered: 'Webhook test delivered: {url}{status}',
+    webhookTestFailed: 'Webhook test failed: {url}{status}',
+    settingsChanged: 'Settings changed — {changes}',
+    diagnosticsCleared:
+      'Diagnostics cleared — {removed} info-level entries removed (warnings, errors and change records kept)',
+    accountRequested: 'Account requested — {department} / {role}',
+    requestIgnoredExists: 'Account request ignored — an account already exists',
+    requestIgnoredPending: 'Account request ignored — a request is already pending',
+    requestApproved: 'Access request approved: {email} as {role}',
+    requestRejected: 'Access request rejected: {email}',
+    browserError: 'Browser error captured: {message}',
+  },
+}
+
+/**
+ * Deliberately not `as const`: literal types here would make every Turkish
+ * string a type error against its English counterpart. Widened to string, the
+ * type still enforces the thing that matters — that both dictionaries carry
+ * exactly the same key set.
+ */
+
+export type Dictionary = typeof en
diff --git a/apps/editor/panel/lib/i18n/index.ts b/apps/editor/panel/lib/i18n/index.ts
new file mode 100644
index 000000000..bf0e41de0
--- /dev/null
+++ b/apps/editor/panel/lib/i18n/index.ts
@@ -0,0 +1,139 @@
+import { type AuditEventKey, readAuditEvent } from '../audit-events'
+import { LOCALE } from '../casing'
+import type { Lang } from '../types'
+import { type Dictionary, en } from './en'
+import { tr } from './tr'
+
+export const dictionaries: Record<Lang, Dictionary> = { en, tr }
+export const DEFAULT_LANG: Lang = 'en'
+export type { Dictionary }
+
+export function dictionaryFor(lang: Lang): Dictionary {
+  return dictionaries[lang] ?? en
+}
+
+/**
+ * Compile-time proof that every audit event the server can write has copy to
+ * render it. `tr` is typed as `Dictionary`, so satisfying this for English
+ * satisfies it for Turkish too.
+ */
+const _auditCoverage: Record<AuditEventKey, string> = en.audit
+void _auditCoverage
+
+/**
+ * The audit trail, in the reader's language.
+ *
+ * Falls back to the stored English sentence whenever there is no event to
+ * render from — rows written before events existed, and any row whose meta did
+ * not survive. That is a permanent fallback, not a migration step: history is
+ * not rewritten, it is read as it was written.
+ */
+export function auditText(
+  dict: Dictionary,
+  entry: { message: string; meta?: Record<string, unknown> | null },
+): string {
+  const event = readAuditEvent(entry.meta)
+  if (!event) return entry.message
+
+  const template = (dict.audit as Record<string, string | undefined>)[event.k]
+  if (!template) return entry.message
+
+  return format(template, event.p ?? {})
+}
+
+/** Replaces `{name}` placeholders. Anything unmatched is left as-is, visibly. */
+export function format(template: string, values: Record<string, string | number>): string {
+  return template.replace(/\{(\w+)\}/g, (whole, key: string) =>
+    key in values ? String(values[key]) : whole,
+  )
+}
+
+/**
+ * Number and date formatting are locale-bound (K8): 12.480 in Turkish, 12,480 in
+ * English. Going through Intl rather than hand-rolling separators is what keeps
+ * that true for every value, not just the ones someone remembered to convert.
+ *
+ * The locale table is shared with the casing helper — formatting and casing must
+ * never disagree about what "tr" means.
+ */
+
+export function formatNumber(lang: Lang, value: number): string {
+  return new Intl.NumberFormat(LOCALE[lang]).format(value)
+}
+
+export function formatDate(lang: Lang, value: string | Date): string {
+  const date = typeof value === 'string' ? new Date(value) : value
+  return new Intl.DateTimeFormat(LOCALE[lang], { dateStyle: 'short', timeStyle: 'short' }).format(
+    date,
+  )
+}
+
+export function formatDateOnly(lang: Lang, value: string | Date): string {
+  const date = typeof value === 'string' ? new Date(value) : value
+  return new Intl.DateTimeFormat(LOCALE[lang], { dateStyle: 'short' }).format(date)
+}
+
+/**
+ * Turkish sorting lives in the app layer, never in the database (section 10) —
+ * MySQL's utf8mb4_0900_ai_ci gets İ/ı wrong and moving the rule into a collation
+ * would make it invisible.
+ */
+export function collator(lang: Lang): Intl.Collator {
+  return new Intl.Collator(LOCALE[lang], { sensitivity: 'base', numeric: true })
+}
+
+/**
+ * Resolves an `err.*` key from the API into display text. Unknown keys fall back
+ * to the generic server error rather than rendering the raw key at the user.
+ */
+export function resolveApiMessage(
+  dict: Dictionary,
+  key: string,
+  values: Record<string, string | number> = {},
+): string {
+  const map: Record<string, string> = {
+    'err.credentials': dict.errCreds,
+    'err.locked': dict.errLocked,
+    'err.suspended': dict.errSuspended,
+    'err.inactive': dict.errInactive,
+    'err.ssoRequired': dict.errSsoRequired,
+    'err.mfaInvalid': dict.errCode,
+    'err.recoveryInvalid': dict.recErr,
+    'err.sessionExpired': dict.sessionExpiredTitle,
+    'err.tokenInvalid': dict.errTokenInvalid,
+    'err.tokenExpired': dict.errTokenExpired,
+    'err.tokenUsed': dict.errTokenUsed,
+    'err.inviteExpired': dict.errInviteExpired,
+    'err.inviteRevoked': dict.errInviteRevoked,
+    'err.passwordPolicy': dict.errPasswordPolicy,
+    'err.passwordMismatch': dict.errPasswordMismatch,
+    'err.policyRequired': dict.errPolicyRequired,
+    'err.validation': dict.errValidation,
+    'err.usernameChars': dict.errUsernameChars,
+    'err.forbidden': dict.errForbidden,
+    'err.primaryAdminProtected': dict.errPrimaryAdminProtected,
+    'err.cannotDeleteSelf': dict.errCannotDeleteSelf,
+    'err.userReferenced': dict.errUserReferenced,
+    'err.externalNotAllowed': dict.errExternalNotAllowed,
+    'err.inviteNotResendable': dict.errInviteNotResendable,
+    'err.inviteNotRevocable': dict.errInviteNotRevocable,
+    'err.jobNotCancellable': dict.errJobNotCancellable,
+    'err.jobNotRetryable': dict.errJobNotRetryable,
+    'err.keyNotRevocable': dict.errKeyNotRevocable,
+    'err.mfaAlreadyEnrolled': dict.errMfaAlreadyEnrolled,
+    'err.notFound': dict.errNotFound,
+    'err.requestDecided': dict.errRequestDecided,
+    'err.roleExists': dict.errRoleExists,
+    'err.siteStateUnchanged': dict.errSiteStateUnchanged,
+    'err.systemRoleLocked': dict.errSystemRoleLocked,
+    'err.userExists': dict.errUserExists,
+    'err.mailFailed': dict.errMailFailed,
+    'err.logsRestricted': dict.c.logsRestrictedLead,
+    'err.siteExists': dict.errSiteExists,
+    'err.hookHttps': dict.errHookHttps,
+    'err.eventRequired': dict.errEventRequired,
+    'err.badJson': dict.errValidation,
+    'err.server': dict.errServer,
+  }
+  return format(map[key] ?? dict.errServer, values)
+}
diff --git a/apps/editor/panel/lib/i18n/tr.ts b/apps/editor/panel/lib/i18n/tr.ts
new file mode 100644
index 000000000..16422877b
--- /dev/null
+++ b/apps/editor/panel/lib/i18n/tr.ts
@@ -0,0 +1,704 @@
+import type { Dictionary } from './en'
+
+/**
+ * Turkish dictionary — full parity with `en`, not a subset. Typed as Dictionary
+ * so a key added to English but forgotten here is a compile error, which is the
+ * only reliable way to keep two dictionaries honest.
+ */
+export const tr: Dictionary = {
+  /* ——— sign-in ——— */
+  heroTitle: 'Her depo, milimetrik modellenir.',
+  heroLead:
+    'Parametrik raf sistemleri, 2B yerleşim planları ve 3B gezintiler — tek editörde. Bir sahayı veya sistem konsolunu açmak için giriş yapın.',
+  liveTwin: 'Canlı ikiz',
+  storage: 'Depolama',
+  picking: 'Toplama',
+  footprint: 'Taban alanı',
+  pallets: 'palet',
+  positions: 'pozisyon',
+  signIn: 'Giriş yap',
+  signInLead: '3B editöre veya sistem konsoluna erişmek için bilgilerinizi girin.',
+  identifier: 'Kullanıcı adı veya kurumsal e-posta',
+  identifierHint: 'Yalnız kullanıcı adı @netlog.com.tr olarak tamamlanır',
+  password: 'Şifre',
+  forgot: 'Şifremi unuttum',
+  show: 'GÖSTER',
+  hide: 'GİZLE',
+  showTitle: 'Şifreyi göster',
+  hideTitle: 'Şifreyi gizle',
+  remember: 'Bu cihazda oturumumu açık tut',
+  or: 'veya',
+  ssoNetlog: 'Netlog hesabınızla giriş yapın',
+  ssoTitle: 'Tek oturum açma zorunlu',
+  ssoNotice: 'Bu alan adı için şifreyle giriş kapalı. Netlog hesabınızla devam edin.',
+  resources: 'Platform kaynakları',
+  qlProjects: 'Editör projeleri',
+  qlViewer: 'Görüntüleyici modu',
+  qlGuides: 'Kullanım kılavuzları',
+  qlChangelog: 'Sürüm notları',
+  noAccount: 'Hesabınız yok mu?',
+  requestAccount: 'Hesap talebi oluştur',
+  internalOnly: 'Dahili sistem — yalnızca yetkili personel',
+  lastSignIn: 'Son giriş',
+  protected: 'DigitalTwin Editör v0.9.1 · Korumalı bağlantı',
+  protectedUpper: 'DIGITALTWIN EDITÖR V0.9.1 · KORUMALI BAĞLANTI',
+  signature: 'NETLOG LOJİSTİK HİZMETLERİ A.Ş. · BUILT BY RESUL ÖVÜR & CENGİZ TUNA',
+  sessionExpiredTitle: 'Oturum sona erdi',
+  sessionExpiredLead:
+    '{minutes} dakika işlem yapılmadığı için oturumunuz askıya alındı. Kaldığınız yerden devam etmek için tekrar giriş yapın.',
+  okLabel: 'Tamam',
+
+  /* ——— izin etiketleri ——— */
+  perm: {
+    admin_access: 'Yönetici erişimi',
+    edit_projects: 'Projeleri düzenle',
+    create_projects: 'Proje oluştur',
+    delete_projects: 'Proje sil',
+    access_settings: 'Ayarlara eriş',
+    view_projects: 'Projeleri görüntüle',
+    edit_users: 'Kullanıcıları düzenle',
+    edit_roles: 'Rolleri düzenle',
+    view_logs: 'Günlükleri görüntüle',
+  },
+
+  /* ——— iki adımlı doğrulama ——— */
+  step2: '2. adım / 2',
+  verifyTitle: 'Doğrulama kodu',
+  verifyLead: 'Doğrulayıcı uygulamanızdaki 6 haneli kodu girin.',
+  trustDevice: 'Bu cihaza 30 gün boyunca güven',
+  verifyCta: 'Doğrula ve devam et',
+  resend: 'Kodu yeniden gönder',
+  resent: 'Kod gönderildi — uygulamanızı kontrol edin',
+  otherAccount: 'Başka hesap kullan',
+  recovery: 'Cihazınızı mı kaybettiniz? Kurtarma kodu kullanın',
+  vLost: 'Cihazınızı mı kaybettiniz?',
+  vSetup: 'Doğrulayıcıyı kur',
+
+  /* ——— şifre sıfırlama ——— */
+  resetTitle: 'Şifre sıfırlama',
+  resetLead: 'Kurumsal adresinize tek kullanımlık bir bağlantı göndereceğiz.',
+  emailLabel: 'E-posta adresi',
+  resetCta: 'Sıfırlama bağlantısı gönder',
+  backToSignIn: 'Girişe dön',
+  inboxTitle: 'Gelen kutunuzu kontrol edin',
+  inboxLead:
+    'Tek kullanımlık sıfırlama bağlantısı yolda. 30 dakika içinde geçersiz olur ve istek yöneticiler için kayda geçer.',
+  openLink: 'E-postadaki bağlantıyı aç (prototip)',
+
+  /* ——— hesap talebi ——— */
+  reqTitle: 'Hesap talebi',
+  reqLead: 'Yalnızca Netlog kurumsal adresleri kayıt edilebilir. Her talebi bir yönetici onaylar.',
+  fullName: 'Ad soyad',
+  workEmail: 'Kurumsal e-posta',
+  usernameHint: 'Bu aynı zamanda kullanıcı adınız olur',
+  department: 'Departman',
+  accessNeeded: 'Gereken erişim',
+  whichSites: 'Hangi sahalara ihtiyacınız var?',
+  submitRequest: 'Talebi gönder',
+  reqSentTitle: 'Talep iletildi',
+  reqSentLead:
+    'Yeni hesapları bir yönetici konsolda inceler. Sonuç ne olursa olsun size e-posta gelir; onaylanırsa parolanızı belirleyeceğiniz bağlantıyla birlikte.',
+
+  /* ——— hatalar ——— */
+  lockedPrefix: 'Kilitli',
+  errFields: 'Lütfen tüm alanları doldurun.',
+  errCreds: 'Kullanıcı adı veya şifre hatalı.',
+  errAttemptsLeft: 'deneme kaldı, sonrasında geçici kilit uygulanır.',
+  errAttemptLeft: 'deneme kaldı, sonrasında geçici kilit uygulanır.',
+  errLocked: 'Çok fazla başarısız deneme. Giriş {seconds} saniye kilitlendi.',
+  errCode: 'Doğrulama kodunun altı hanesini de girin.',
+  errSuspended: 'Bu hesap askıya alınmış. Bir yöneticiyle görüşün.',
+  errInactive: 'Bu hesap pasif durumda. Bir yöneticiyle görüşün.',
+  errSsoRequired: 'Bu alan adı için şifreyle giriş kapalı — Netlog hesabınızı kullanın.',
+  errServer:
+    'Bizim tarafımızda bir şeyler ters gitti. Tekrar deneyin ya da bu referansı desteğe iletin.',
+  errNetwork: 'Sunucuya ulaşılamıyor. Bağlantınızı kontrol edip tekrar deneyin.',
+  errTokenInvalid: 'Bu bağlantı geçerli değil.',
+  errTokenExpired: 'Bu bağlantının süresi doldu. Yenisini talep edin.',
+  errTokenUsed: 'Bu bağlantı zaten kullanılmış.',
+  errInviteExpired: 'Bu davetin süresi doldu. Bir yöneticiden yenilemesini isteyin.',
+  errInviteRevoked: 'Bu davet iptal edilmiş.',
+  errPasswordPolicy: 'Şifre aşağıdaki kuralların tamamını sağlamıyor.',
+  errPasswordMismatch: 'Şifreler eşleşmiyor.',
+  errPolicyRequired: 'Devam etmek için dahili kullanım politikasını kabul edin.',
+  errValidation: 'İşaretli alanı kontrol edip tekrar deneyin.',
+  errUsernameChars: 'Yalnızca harf, rakam, nokta, tire ve alt çizgi kullanın.',
+  errForbidden: 'Rolünüzde bu işlem için gereken izin bulunmuyor.',
+  errPrimaryAdminProtected:
+    'Birincil yönetici silinemez, devre dışı bırakılamaz ve rolü değiştirilemez. İzin verebilen tek hesabı kilitlemek geri dönüşü olmayan bir hatadır.',
+  errCannotDeleteSelf: 'Oturum açtığınız hesabı silemezsiniz.',
+  errUserReferenced:
+    'Sistemde hâlâ bu hesaba işaret eden kayıtlar var (oluşturduğu sahalar, gönderdiği davetler). Veritabanı, bu kayıtların silmeden sonra da yaşamasını sağlayan göçü henüz uygulamamış — göçlerin çalışması için uygulamayı yeniden başlatıp tekrar deneyin.',
+  inviteMailFailed:
+    'hesap oluşturuldu, ancak davet e-postası gönderilemedi. Posta çalışır hâle geldiğinde hesaptaki Yeniden gönder düğmesini kullanın.',
+  errExternalNotAllowed:
+    'Dış hesaplar kapalı. Ayarlar → Kimlik bölümünden açın ya da bu kişiyi kurum içi olarak onaylayın.',
+  errInviteNotResendable:
+    'Bu davet artık yeniden gönderilemez — ya kabul edilmiş ya da iptal edilmiş.',
+  errInviteNotRevocable:
+    'Bu davet artık iptal edilemez — ya kabul edilmiş ya da zaten iptal edilmiş.',
+  errJobNotCancellable: 'Yalnızca kuyruktaki veya çalışan bir iş iptal edilebilir.',
+  errJobNotRetryable: 'Yalnızca başarısız veya iptal edilmiş bir iş yeniden denenebilir.',
+  errKeyNotRevocable: 'Bu API anahtarı zaten iptal edilmiş.',
+  errMfaAlreadyEnrolled:
+    'Bu hesapta iki adımlı doğrulama zaten kurulu. Yeniden kurmak için önce kaldırın.',
+  errNotFound: 'Bu kayıt artık yok — başka bir oturumda silinmiş olabilir.',
+  errRequestDecided: 'Bu erişim talebi başka bir yönetici tarafından zaten sonuçlandırılmış.',
+  errRoleExists: 'Bu adda bir rol zaten var.',
+  errSiteStateUnchanged: 'Bu saha zaten bu durumda.',
+  errSystemRoleLocked: 'Yerleşik roller düzenlenemez veya silinemez.',
+  errUserExists: 'Bu e-posta adresi veya kullanıcı adı zaten kullanımda.',
+  errMailFailed:
+    'İleti gönderilemedi. SMTP sunucusunu, kapısını ve kimlik bilgilerini denetleyin — nedeni sunucu günlüğünde.',
+  capsLock: 'Caps Lock açık',
+  holdToShow: 'Şifreyi görmek için basılı tutun',
+
+  /* ——— yeni şifre / ilk giriş ——— */
+  spKickReset: 'Şifre sıfırlama · Adım 2 / 2',
+  spKickFirst: 'İlk giriş · Hesap kurulumu',
+  spTitle: 'Yeni şifre belirleyin',
+  spTitleFirst: 'Hesabınızı kurun',
+  spLead: 'Bağlantı doğrulandı. Yeni şifreniz aşağıdaki kurallara uymalı.',
+  spLeadFirst: 'Geçici şifreyle giriş yaptınız. Devam etmek için kalıcı bir şifre belirleyin.',
+  spNew: 'Yeni şifre',
+  spAgain: 'Yeni şifre (tekrar)',
+  spMismatch: 'Şifreler eşleşmiyor.',
+  spRevoke: 'Diğer tüm oturumları kapat',
+  spConsent: 'Dahili kullanım politikasını okudum ve kabul ediyorum.',
+  spCta: 'Şifreyi kaydet',
+  spCtaFirst: 'Kur ve devam et',
+  spDoneTitle: 'Şifre güncellendi',
+  spDoneLead: 'Yeni şifreniz kaydedildi ve diğer oturumlar kapatıldı. Şimdi giriş yapabilirsiniz.',
+  spDoneCta: 'Girişe dön',
+  spDoneCtaFirst: 'Konsola devam et',
+  strength: ['Zayıf', 'Orta', 'İyi', 'Güçlü'],
+  c1: 'En az 10 karakter',
+  c2: 'Büyük ve küçük harf',
+  c3: 'En az bir rakam',
+  c4: 'En az bir özel karakter',
+  c5: 'Ad veya “netlog” içermiyor',
+
+  /* ——— 2FA kurulumu ——— */
+  muKick: 'İki adımlı doğrulama · Kurulum',
+  muTitleScan: 'Doğrulayıcıyı kurun',
+  muTitleVerify: 'Kodu doğrulayın',
+  muTitleCodes: 'Kurtarma kodlarınız',
+  muLeadScan: 'Authenticator uygulamanızla QR kodu tarayın ya da anahtarı elle girin.',
+  muLeadVerify: 'Uygulamanın ürettiği 6 haneli kodu girin.',
+  muLeadCodes: 'Cihazınıza erişemezseniz bu kodlarla giriş yapın. Her kod bir kez kullanılır.',
+  muQr: 'QR kod',
+  muManual: 'Elle giriş anahtarı',
+  muCopy: 'Kopyala',
+  muCopied: 'Kopyalandı ✓',
+  muContinue: 'Devam et',
+  muVerify: 'Doğrula',
+  muBack: 'QR koduna dön',
+  muDownload: 'Kodları indir (.txt)',
+  muSavedLbl: 'Kodları güvenli bir yere kaydettim',
+  muFinish: 'Kurulumu bitir',
+  muDone: 'İki adımlı doğrulama kuruldu',
+  muCodeErr: '6 haneli kodu eksiksiz girin.',
+
+  /* ——— kurtarma ile giriş ——— */
+  recKick: 'Kurtarma',
+  recTitle: 'Kurtarma koduyla giriş',
+  recLead: 'Doğrulayıcı cihazınıza erişemiyorsanız, kurulumda indirdiğiniz kodlardan birini girin.',
+  recLabel: 'Kurtarma kodu',
+  recCta: 'Doğrula ve gir',
+  recBack: 'Kod girişine dön',
+  recErr: 'Kod tanınmadı. XXXX-XXXX biçiminde, tire dahil girin.',
+  recDoneTitle: 'Giriş yapıldı',
+  recDoneLead:
+    'Bu kurtarma kodu artık geçersiz. Konsoldan yeni bir kod seti oluşturmanızı öneririz.',
+  recGoConsole: 'Konsola devam et',
+
+  /* ——— boşta kalma uyarısı ——— */
+  idleTitle: 'Hâlâ orada mısınız?',
+  idleLead: 'İşlem yapılmadığı için oturumunuz kapanmak üzere. Kalan süre:',
+  idleStay: 'Oturumu sürdür',
+  idleOut: 'Çıkış yap',
+  idleExtended: 'Oturum uzatıldı',
+
+  inviteUser: 'Kullanıcı davet et',
+  inviteFullName: 'Ad soyad',
+  inviteEmail: 'E-posta adresi',
+  inviteRole: 'Erişim rolü',
+  inviteOrg: 'Kurum',
+  orgInternal: 'İç',
+  orgExternal: 'Dış (3PL ortağı)',
+  inviteSites: 'Site erişimi',
+  save: 'Kaydet',
+  cancel: 'Vazgeç',
+  clearFilters: 'Filtreleri temizle',
+
+  cpPlaceholder: 'Komut, sekme ve kişi ara…',
+  cpActions: 'Eylemler',
+  cpInvite: 'Kullanıcı davet et',
+  cpNewRole: 'Rol oluştur',
+  cpThemeLight: 'Açık temaya geç',
+  cpThemeDark: 'Koyu temaya geç',
+  cpClearLogs: 'Tanılamayı temizle',
+  cpEmpty: 'Buna uyan bir şey yok.',
+
+  a11yTheme: 'Gündüz/gece modunu değiştir',
+  themeSystem: 'Tema: sistem',
+  themeLight: 'Tema: açık',
+  themeDark: 'Tema: koyu',
+  a11yPalette: 'Komut paletini aç',
+  a11yUserDetail: 'Kullanıcı ayrıntısını aç',
+  a11yPrevPage: 'Önceki sayfa',
+  a11yNextPage: 'Sonraki sayfa',
+  bulkSelected: '{total} hesaptan {count} tanesi seçili',
+  bulkSelectAll: 'Bu sayfadaki tüm hesapları seç',
+  bulkSelectOne: '{name} hesabını seç',
+  bulkClear: 'Seçimi temizle',
+  bulkRoleViewer: 'Rolü Viewer yap',
+  bulkRevoke: 'Oturumları kapat',
+  bulkDeactivate: 'Pasifleştir',
+  bulkDelete: 'Sil',
+  bulkConfirmTitle: '{count} hesaba uygulansın mı?',
+  bulkRoleViewerLead: 'Seçili her hesap Viewer rolüne düşer. Site bazlı atamalar değişmez.',
+  bulkRevokeLead:
+    'Seçili her hesap tüm cihazlarda oturumdan çıkar ve yeniden giriş yapmak zorunda kalır.',
+  bulkDeactivateLead: 'Pasifleştirilen hesaplar giriş yapamaz ve açık oturumları anında kapanır.',
+  bulkDeleteLead: 'Hesaplar, site atamaları ve oturumları silinir. Bu işlem geri alınamaz.',
+  bulkSkipNote: 'Birincil yönetici ve kendi hesabınız otomatik olarak atlanır.',
+  bulkTypeCount: 'Onaylamak için {count} yazın',
+  bulkApplied: '{count} hesap güncellendi',
+  bulkSkipped: '{count} atlandı',
+  bulkNothing: 'Uygulanacak bir şey yok — seçili hesapların tümü zaten bu durumda.',
+  bulkReasonPrimaryAdmin: 'birincil yönetici',
+  bulkReasonSelf: 'kendi hesabınız',
+  bulkReasonNotFound: 'artık mevcut değil',
+  bulkReasonNoop: 'zaten bu durumda',
+
+  egName: 'ör. Yusuf Aydın',
+  egRole: 'ör. Supervisor',
+  egReason: 'ör. Sakarya LM1 raf yerleşimi, 4. çeyrek genişlemesi için',
+
+  noUsersMatch: 'Bu filtrelere uyan kullanıcı yok',
+  emptyHint: 'Farklı bir arama deneyin ya da rol filtresini kaldırın.',
+  loadFailedTitle: 'Hesaplar yüklenemedi',
+  loadFailedLead: 'İstek başarısız oldu. Tekrar deneyin ya da bu referansı desteğe iletin.',
+  retry: 'Tekrar dene',
+  page: 'Sayfa',
+  colInvite: 'Davet',
+  invitedLbl: 'Davetli',
+  inviteOpen: 'Daveti aç',
+  dwResend: 'Daveti yenile',
+  dwRevokeInvite: 'Daveti iptal et',
+  invLeftFmt: 'gün kaldı',
+  invExpired: 'Süresi doldu',
+  invRenewToast: 'davet yenilendi — bağlantı yeniden geçerli',
+  invRevokeToast: 'davet iptal edildi',
+  dwSiteAccess: 'Site erişimi',
+  dwSiteHint: 'Rolü değiştirmek için tıklayın',
+  dwNoSites: 'Atanacak site yok — Siteler ve Projeler sekmesinden bir tane oluşturun.',
+  dwPermsLbl: 'Etkin izinler',
+  dwNoAccess: 'Erişim yok',
+  dwActions: 'İşlemler',
+  dwUsername: 'Kullanıcı adı',
+  dwLastSeen: 'Son görülme',
+  dwSessions: 'Etkin oturumlar',
+  dwMfaLbl: 'İki adımlı doğrulama',
+  dwOrgLbl: 'Kurum',
+  dwResetPass: 'Geçici şifre oluştur',
+  dwSignout: 'Tüm oturumları kapat',
+  dwDeactivate: 'Pasifleştir',
+  dwActivate: 'Aktifleştir',
+  dwDelete: 'Hesabı sil',
+  dwPassToast: 'için yeni geçici şifre oluşturuldu',
+  dwSignoutToast: 'oturumları kapatıldı',
+  dwPrimaryAdmin: 'Birincil yönetici — silinemez ve pasifleştirilemez.',
+  tempPassTitle: 'Geçici şifre',
+  tempPassLead: 'Yalnızca bir kez gösterilir. Şimdi kopyalayın — tekrar görüntülenemez.',
+  copy: 'Kopyala',
+  copied: 'Kopyalandı',
+  close: 'Kapat',
+  asgTitle: 'Onayla ve ata',
+  asgLead:
+    'Rol ve site erişimini seçin — kullanıcı davetli olarak eklenir ve davet bağlantısı e-postayla gönderilir.',
+  asgRole: 'Rol',
+  asgSites: 'Site erişimi',
+  asgNeedSite: 'En az bir site seçin.',
+  asgConfirm: 'Onayla ve davet gönder',
+  invitedToast: 'davet edildi — davet bağlantısı gönderildi',
+  confirmDeleteTitle: 'Bu hesap silinsin mi?',
+  confirmDeleteLead: 'Hesap, site atamaları ve oturumları kaldırılır. Denetim izi kaydı korur.',
+  confirmDelete: 'Sil',
+  newRoleName: 'Yeni rol adı',
+  roleDeleteConfirm: 'Bu özel rol silinsin mi?',
+  roleDeleteLead: 'Bu role sahip hesaplar Viewer rolüne düşer.',
+  roleNoMatch: 'Bu aramaya uyan rol yok',
+  roleNoMatchHint: 'Dört yerleşik rol her zaman burada — görmek için aramayı temizleyin.',
+  systemRole: 'Sistem rolü',
+  systemRoleLocked: 'Sistem rolleri kodda tanımlıdır ve düzenlenemez.',
+  permEnabled: 'izin açık',
+  thisDevice: 'Bu cihaz',
+  revokeSession: 'Kaldır',
+  noOtherSessions: 'Başka cihazda açık oturum yok.',
+  sessionPolicy: 'Oturum politikası',
+  sessionPolicyLead: 'Boşta kalma süresi ve cihaz limitleri sunucuda uygulanır.',
+  polIdle: 'Boşta kalma süresi',
+  polLimit: 'Eşzamanlı oturum',
+  polKeep: 'Oturumu açık tut',
+  polMfa: 'İki adımlı doğrulama zorunlu',
+  polMin: 'dk',
+  on: 'Açık',
+  off: 'Kapalı',
+
+  stLead: 'Depolar ve bağlı projeler — kurulum editöre girmeden burada başlar.',
+  stNew: '+ Yeni depo',
+  stNameLbl: 'Depo adı',
+  stTplLbl: 'Başlangıç',
+  stFpLbl: 'Alan (m²)',
+  stTplEmpty: 'Boş',
+  stTplIfc: 'IFC içe aktar',
+  stTplCopy: 'Siteyi kopyala',
+  stHint: 'Kurulum bir iş olarak kuyruğa alınır; site hazır olana dek “Kuruluyor” görünür.',
+  stCreate: 'Depoyu kur',
+  stOpen: 'Editörde aç',
+  stArch: 'Arşivle',
+  stRestore: 'Geri al',
+  stActive: 'Aktif',
+  stSetup: 'Kuruluyor',
+  stArchived: 'Arşiv',
+  stStorage: 'Depolama gözü',
+  stPicking: 'Toplama gözü',
+  stFp2: 'Alan (m²)',
+  stUsers: 'Kişi',
+  stEmptyTitle: 'Henüz site yok',
+  stEmptyLead: 'İlk depoyu kurun — kartı burada görünür ve kurulum iş kuyruğunda izlenir.',
+  stQueuedToast: 'kurulum kuyruğa alındı',
+  stOpenNote: 'Site çalışan editör uygulamasında açılır — bu konsolun parçası değil.',
+  jbLead: 'İçe aktarma, rapor ve yedek işleri — kuyruk canlı akar.',
+  jbQueued: 'Kuyrukta',
+  jbRunning: 'Çalışıyor',
+  jbFailed: 'Hatalı',
+  jbDone: 'Bitti',
+  jbCancelled: 'İptal',
+  jbRetry: 'Tekrar dene',
+  jbCancel: 'İptal et',
+  jbBy: 'başlatan',
+  jbEmptyTitle: 'Kuyruk boş',
+  jbEmptyLead: 'Filtreye uyan iş yok — IFC içe aktarma, rapor ve yedekler burada listelenir.',
+  jbLive: 'Canlı',
+  jbPolling: 'Yoklama',
+  igKeysTitle: 'API anahtarları',
+  igKeysLead: 'Sahne API’sine site kapsamlı erişim — ham anahtar yalnız bir kez gösterilir.',
+  igNewKey: '+ Yeni anahtar',
+  igKeyNameLbl: 'Anahtar adı',
+  igScopeLbl: 'Kapsam',
+  igSiteLbl: 'Site',
+  igAllSites: 'Tüm siteler',
+  igCreateKey: 'Anahtar üret',
+  igScopeRead: 'Okuma',
+  igScopeWrite: 'Okuma + yazma',
+  igSecretTitle: 'Anahtar üretildi — şimdi kopyalayın',
+  igSecretNote: 'Güvenlik gereği bir daha gösterilmez; kaybolursa iptal edip yenisini üretin.',
+  igRevoke: 'İptal et',
+  igRevoked: 'İptal edildi',
+  igNever: 'Hiç kullanılmadı',
+  igNoKeys: 'Henüz API anahtarı yok.',
+  igHooksTitle: 'Webhook’lar',
+  igHooksLead: 'Olaylar dış sistemlere imzalı POST ile iletilir; başarısızlıkta yeniden denenir.',
+  igAddHook: '+ Webhook ekle',
+  igEventsLbl: 'Olaylar',
+  igCreateHook: 'Webhook ekle',
+  igTest: 'Test gönder',
+  igPause: 'Duraklat',
+  igResume: 'Sürdür',
+  igStActive: 'Aktif',
+  igStPaused: 'Duraklatıldı',
+  igStFailing: 'Hata veriyor',
+  igTestOk: 'test olayı gönderildi',
+  igTestFail: 'test olayı başarısız',
+  igNoHooks: 'Henüz webhook yok.',
+  igLastDelivery: 'Son gönderim',
+  seLead: 'Oturum politikası, kimlik kuralları ve görünüm — değişiklikler denetim izine yazılır.',
+  seSecurity: 'Güvenlik',
+  seIdentity: 'Kimlik ve davet',
+  seAppearance: 'Görünüm',
+  seSessLen: 'Oturum süresi',
+  seSessLenD: 'Bu süre boyunca işlem yapılmazsa oturum kapanır.',
+  seKeep: '“Oturumu açık tut” izni',
+  seKeepD: 'Kullanıcılar girişte oturumun hatırlanmasını isteyebilir.',
+  seKeepDays: 'Hatırlama süresi',
+  seKeepDaysD: 'Açık tutulan oturumun ömrü.',
+  seTrust: 'Güvenilen cihaz',
+  seTrustD: 'Bu süre boyunca aynı cihazda 2FA tekrar sorulmaz.',
+  seConc: 'Eşzamanlı oturum sınırı',
+  seConcD: 'Limit aşılınca en eski oturum kapatılır.',
+  seMfa: '2FA zorunlu',
+  seMfaD: 'Tüm hesaplar iki adımlı doğrulama kurmak zorunda.',
+  seSso: 'Kurumsal giriş (SSO) alan adları',
+  seSsoD: 'Bu alan adları şifre yerine SSO ile girer.',
+  seSsoNone: 'Yok — şifreyle giriş açık',
+  seInvite: 'Davet geçerlilik süresi',
+  seInviteD: 'Süresi dolan davet girişte reddedilir; konsoldan yenilenir.',
+  seExternal: 'Dış kullanıcılara izin',
+  seExternalD: 'Dış (3PL) hesaplar yalnız atanmış sitelere, “Dış” rozetiyle erişir.',
+  seTheme: 'Tema',
+  seThemeD: 'Konsolun varsayılan görünümü.',
+  seSystem: 'Sistem',
+  seMail: 'Posta',
+  seMailTest: 'Deneme iletisi',
+  seMailTestD: 'Kendi adresinize bir örnek ileti gönderir; gönderim ve tasarım böyle denenir.',
+  seMailSend: 'Gönder',
+  seMailSending: 'Gönderiliyor…',
+  seMailSent: '{email} adresine gönderildi',
+  seDark: 'Koyu',
+  seLight: 'Açık',
+  seLang: 'Dil',
+  seLangD: 'Arayüz dili ve sayı/tarih biçimleri.',
+  seDays: 'gün',
+  seSaved: 'Ayar kaydedildi',
+  errSiteExists: 'Bu adla bir site zaten var.',
+  errHookHttps: 'Geçerli bir https:// URL girin.',
+  errEventRequired: 'En az bir olay seçin.',
+
+  ovCpu: 'İşlemci',
+  ovMemory: 'Yığın',
+  ovSystemMem: 'Sistem belleği',
+  ovLoad: 'Yük ortalaması',
+  ovUptime: 'Çalışma süresi',
+  ovCores: 'çekirdek',
+  ovAccounts: 'Hesaplar',
+  ovSites: 'Siteler',
+  ovSignedIn: 'Oturum açanlar',
+  ovQueue: 'Kuyruk',
+  ovNoConnected: 'Son 20 dakikada kimse işlem yapmadı.',
+  ovNoIncidents: 'Kayıtlı uyarı veya hata yok.',
+  lgLead: 'Çalışma zamanı kayıtları — girişler, oturumlar ve yakalanan tarayıcı hataları.',
+  lgClear: 'Kayıtları temizle',
+  lgClearTitle: 'Kayıtlar temizlensin mi?',
+  lgClearLead:
+    'Yalnızca bilgi seviyesindeki kayıtlar silinir. Uyarılar, hatalar ve denetim izi korunur; temizleme işleminin kendisi de kaydedilir.',
+  lgCleared: 'kayıt silindi',
+  lgEmpty: 'Bu filtrelere uyan kayıt yok.',
+  lgLoadMore: 'Daha fazla yükle',
+  lgAllLevels: 'Tüm seviyeler',
+  lgActor: 'Kullanıcı',
+  auLead: 'Kim neyi ne zaman değiştirdi. Yalnızca eklenir — kayıtları temizlemek bu izi etkilemez.',
+  auEmpty: 'Henüz kayıtlı değişiklik yok.',
+  auKindUser: 'Hesaplar',
+  auKindRole: 'Roller',
+  auKindInvite: 'Davetler',
+  auKindRequest: 'Talepler',
+  auKindSite: 'Siteler',
+  auKindKey: 'API anahtarları',
+  auKindHook: 'Webhook’lar',
+  auKindSettings: 'Ayarlar',
+  clLead: 'Platform ve depo eklentisi sürümleri, en yeni üstte.',
+  clLive: 'Canlı',
+  clSnapshot: 'Anlık görüntü',
+  clEditor: 'DigitalTwin editör sürümü',
+  clPlugin: 'DigitalTwin depo eklentisi',
+  clConsole: 'DigitalTwin konsol paneli',
+
+  /* ——— Sahneler sekmesi ——— */
+  scTitle: 'Sahneler',
+  scLead:
+    'Sunucudaki tüm sahneler. Taslaklar çizen kişiye aittir; yayınlamak projeyi Siteler ve Projeler ekranına taşır.',
+  scScene: 'Sahne',
+  scOwner: 'Sahip',
+  scNodes: 'Düğüm',
+  scUpdated: 'Güncellenme',
+  scOpen: 'Aç',
+  scUnowned: 'sahipsiz',
+  scStatus: 'Durum',
+  scPublished: 'Yayında',
+  scDraft: 'Taslak',
+  scPublish: 'Yayınla',
+  scUnpublish: 'Geri çek',
+  scRename: 'Yeniden adlandır',
+  scRenamePrompt: 'Yeni proje adı',
+  scDuplicate: 'Kopyala',
+  scDelete: 'Sil',
+  scDeleteConfirm: '“{name}” ve içindeki her şey silinsin mi? Bu geri alınamaz.',
+  scAdopt: 'Sahipsiz sahneleri devral',
+  scSaved: 'Kaydedildi.',
+  scSaveFailed: 'Kaydedilemedi — tekrar deneyin.',
+  scEmpty: 'Sunucuda henüz sahne yok.',
+  clFetched: 'Çekildi',
+  clEmpty: 'Sürüm notu bulunamadı.',
+
+  /* ——— konsol kabuğu ——— */
+  c: {
+    monitor: 'İzleme',
+    access: 'Erişim',
+    platform: 'Platform',
+    overview: 'Genel bakış',
+    diagnostics: 'Tanılama',
+    users: 'Kullanıcılar',
+    roles: 'Roller',
+    audit: 'Denetim izi',
+    sessions: 'Oturumlar',
+    changelog: 'Sürüm notları',
+    sites: 'Siteler ve Projeler',
+    scenes: 'Sahneler',
+    openEditor: 'Editör',
+    jobs: 'İş kuyruğu',
+    integrations: 'API ve Webhook',
+    settings: 'Ayarlar',
+    overviewLead: 'Platform genelinde çalışma sağlığı ve erişim hareketleri.',
+    rolesTitle: 'Roller ve izinler',
+    rolesLead: 'İç içe akordeon yerine izin matrisi — bir rolü tek bakışta okuyun.',
+    auditLead: 'Kim neyi ne zaman değiştirdi. Çalışma zamanı kayıtlarından ayrı.',
+    sessionsTitle: 'Etkin oturumlar',
+    sysStatus: 'Sistem durumu',
+    sysStatusLead: 'Çalışma sağlığı ve erişim hareketleri, 4 saniyede bir güncellenir.',
+    userAccounts: 'Kullanıcı hesapları',
+    incidentLog: 'Tanılama olay kaydı',
+    rolePerms: 'Rol izinleri',
+    changelogLead:
+      'Kamuya açık sayfadaki girişlerin aynısı; dağıtımı inceleyen yöneticiler için burada tutulur.',
+    addUser: 'Kullanıcı ekle',
+    addRole: 'Rol ekle',
+    clearLogs: 'Kayıtları temizle',
+    closeForm: 'Formu kapat',
+    search: 'Ara',
+    signOut: 'Çıkış',
+    signOutShort: 'Çık',
+    guides: 'Kılavuzlar',
+    cpu: 'İşlemci tanılama',
+    memory: 'Ayrılan bellek',
+    activeSites: 'Etkin sahalar',
+    userSearchPh: 'Ad, e-posta veya rol ara',
+    readOnly: 'Salt okunur',
+    readOnlyLead:
+      'Rolünüzde edit_users izni bulunmadığı için hesaplar listelenir ama düzenlenemez.',
+    goTo: 'Git',
+    colUser: 'Ad soyad',
+    colEmail: 'E-posta',
+    colUsername: 'Kullanıcı adı',
+    colPassword: 'Şifre',
+    colRole: 'Rol',
+    col2fa: '2FA',
+    colStatus: 'Durum',
+    colActions: 'İşlemler',
+    live: 'Canlı',
+    endSession: 'Oturumu bitir',
+    revoke: 'Kaldır',
+    signedInUsers: 'Oturum açanlar',
+    connectedUsers: 'Bağlı kullanıcılar',
+    last20: 'son 20 dk',
+    recentIncidents: 'Son olaylar',
+    viewAll: 'Tümünü gör',
+    devModeTitle: 'Tanılama modu etkin',
+    devModeLead:
+      'Üretim sürümlerinde tam izleme açık kalır; React fiber durumları, WebGPU hatları ve yerleşim renderı izlenir.',
+    enforced: 'Zorunlu',
+    filterAll: 'Tümü',
+    edit: 'Düzenle',
+    reject: 'Reddet',
+    approveAs: 'Onayla:',
+    buildLabel: 'Sürüm v0.9.1',
+    webgpuHealthy: 'WebGPU sağlıklı',
+    accounts: 'hesap',
+    without2fa: '2FA’sız',
+    viewingAs: 'görüntüleyen rol',
+    of: '/',
+    del: 'Sil',
+    rows: 'Satır',
+    showing: 'Gösterilen',
+    requestsAwaiting: 'hesap talebi onay bekliyor',
+    statusActive: 'Etkin',
+    statusInactive: 'Pasif',
+    mfaOn: 'Açık',
+    mfaOff: 'Kapalı',
+    events: 'olay',
+    errorsCaptured: 'hata kaydedildi',
+    logSearchPh: 'Mesaj veya kullanıcı ara',
+    lastHour: 'Son bir saat',
+    today: 'Bugün',
+    days7: '7 gün',
+    lvInfo: 'Bilgi',
+    lvWarn: 'Uyarı',
+    lvError: 'Hata',
+    userPrefix: 'Kullanıcı:',
+    allUsers: 'Tüm kullanıcılar',
+    logsRestricted: 'Kayıt görüntüleme kısıtlı',
+    logsRestrictedLead: 'Rolünüzde view_logs izni bulunmuyor.',
+    rolesCount: 'rol',
+    permsCount: 'izin',
+    roleSearchPh: 'Rol ara',
+    viewMatrix: 'Matris',
+    viewList: 'Liste',
+    colPermission: 'İzin',
+    appendOnly: 'yalnızca eklenir',
+    auditBanner:
+      'Hesap ve rol değişikliklerinin yalnızca eklenen kaydı. Girdiler düzenlenemez veya silinemez — tanılama kayıtlarını temizlemek bu izi etkilemez.',
+    rolesFootnote:
+      'Değişiklikler doğrudan izin API’sine yazılır. Özel bir rol silindiğinde kullanıcıları Viewer rolüne atanır.',
+    protectedUpper: 'DIGITALTWIN EDITÖR V0.9.1 · KORUMALI BAĞLANTI',
+    platformNoteTitle: 'İçeride geliştirildi',
+    platformNoteBody:
+      'DigitalTwin, Netlog için Resul Övür ve Cengiz Tuna tarafından geliştirilip sürdürülüyor. Yeni özellik duyuruları',
+    changelogWord: 'sürüm notlarında yayınlanır',
+    auCreated: 'Oluşturma',
+    auUpdated: 'Güncelleme',
+    auDeleted: 'Silme',
+    auAccess: 'Erişim',
+    openFullPage: 'Tam sayfada aç',
+    backToConsole: 'Konsola dön',
+  },
+
+  audit: {
+    signedOut: 'Oturum kapatıldı',
+    signedOutAll: 'Tüm cihazlarda oturum kapatıldı',
+    signInUnknown: 'Giriş başarısız — tanınmayan kimlik',
+    signInSuspended: 'Giriş reddedildi — hesap askıya alınmış',
+    signInWrongPassword: 'Giriş başarısız — hatalı şifre ({attempt}. deneme)',
+    signInAwaitingMfa: 'Şifre kabul edildi — iki adımlı doğrulama bekleniyor',
+    signedIn: 'Giriş yapıldı',
+    signedInMfaCleared: 'Giriş yapıldı — iki adımlı doğrulama geçildi',
+    sessionRevoked: 'Oturum kapatıldı',
+    allSessionsRevoked: '{email} için tüm oturumlar kapatıldı',
+    sessionsRevokedFor: 'Oturumlar kapatıldı: {email} ({count})',
+    resetIssued: 'Şifre sıfırlama bağlantısı gönderildi',
+    resetUnroutable: 'Şifre sıfırlama, bağlantı alamayacak bir adres için istendi',
+    passwordChanged: 'Şifre değiştirildi',
+    passwordChangedFirst: 'İlk girişte şifre değiştirildi',
+    inviteAccepted: 'Davet kabul edildi — şifre belirlendi',
+    inviteRevoked: 'Davet iptal edildi',
+    inviteResent: 'Davet yeniden gönderildi: {email}',
+    mfaEnrolStarted: 'İki adımlı doğrulama kaydı başlatıldı',
+    mfaEnrolled: 'İki adımlı doğrulama kaydedildi',
+    mfaCodeRejected: 'İki adımlı doğrulama kodu reddedildi ({attempt}. deneme)',
+    recoveryUsed: 'Kurtarma kodu kullanıldı — kod geçersizleştirildi',
+    recoveryRejected: 'Kurtarma kodu reddedildi ({attempt}. deneme)',
+    userInvited: 'Kullanıcı davet edildi: {email}, {role} rolüyle',
+    userUpdated: 'Kullanıcı güncellendi: {email} ({changes})',
+    userUpdatedPlain: 'Kullanıcı güncellendi: {email}',
+    userDeleted: 'Kullanıcı silindi: {email}',
+    tempPassword: '{email} için geçici şifre verildi',
+    siteAccessChanged: '{email} için site erişimi değişti: {changes}',
+    roleCreated: 'Rol oluşturuldu: {name}',
+    rolePermissions: '{name} rolünün izinleri güncellendi{changes}',
+    roleDeleted: 'Rol silindi: {name} — {count} hesap Viewer rolüne alındı',
+    siteCreated:
+      'Site oluşturuldu: {name} ({template}) — kurulum {jobId} işi olarak kuyruğa alındı',
+    siteArchived: 'Site arşivlendi: {name}',
+    siteRestored: 'Site geri alındı: {name}',
+    jobRequeued: 'İş yeniden kuyruğa alındı: {id} ({kind}), {attempt}. deneme',
+    jobCancelled: 'İş iptal edildi: {id} ({kind})',
+    apiKeyCreated: 'API anahtarı oluşturuldu: {name} ({scope}) · {site}',
+    apiKeyRevoked: 'API anahtarı iptal edildi: {name} ({prefix}…)',
+    webhookAdded: 'Webhook eklendi: {url} · {events}',
+    webhookPaused: 'Webhook duraklatıldı: {url}',
+    webhookResumed: 'Webhook sürdürüldü: {url}',
+    webhookDeleted: 'Webhook silindi: {id}',
+    webhookTestDelivered: 'Webhook testi iletildi: {url}{status}',
+    webhookTestFailed: 'Webhook testi başarısız: {url}{status}',
+    settingsChanged: 'Ayarlar değişti — {changes}',
+    diagnosticsCleared:
+      'Tanılama temizlendi — {removed} bilgi düzeyinde kayıt silindi (uyarılar, hatalar ve değişiklik kayıtları korundu)',
+    accountRequested: 'Hesap talep edildi — {department} / {role}',
+    requestIgnoredExists: 'Hesap talebi yok sayıldı — böyle bir hesap zaten var',
+    requestIgnoredPending: 'Hesap talebi yok sayıldı — bekleyen bir talep zaten var',
+    requestApproved: 'Erişim talebi onaylandı: {email}, {role} rolüyle',
+    requestRejected: 'Erişim talebi reddedildi: {email}',
+    browserError: 'Tarayıcı hatası yakalandı: {message}',
+  },
+}
diff --git a/apps/editor/panel/lib/integrations.ts b/apps/editor/panel/lib/integrations.ts
new file mode 100644
index 000000000..fc8f352df
--- /dev/null
+++ b/apps/editor/panel/lib/integrations.ts
@@ -0,0 +1,236 @@
+import { randomBytes } from 'node:crypto'
+import { ulid } from 'ulid'
+import { encryptSecret, sha256 } from './auth/crypto'
+import { exec, query, queryOne, type RowDataPacket } from './db'
+import type { ApiKey, Webhook } from './types'
+
+export const HOOK_EVENTS = [
+  'user.invited',
+  'user.deactivated',
+  'site.created',
+  'job.failed',
+  'release.published',
+] as const
+
+/* ——— API keys ——— */
+
+interface KeyRow extends RowDataPacket {
+  public_id: string
+  name: string
+  prefix: string
+  scope: 'read' | 'read_write'
+  site_name: string | null
+  created_by_email: string | null
+  created_at: Date
+  last_used_at: Date | null
+  revoked_at: Date | null
+}
+
+const KEY_SELECT = `
+  SELECT k.public_id, k.name, k.prefix, k.scope, s.name AS site_name,
+         u.email AS created_by_email, k.created_at, k.last_used_at, k.revoked_at
+    FROM api_keys k
+    LEFT JOIN users u ON u.id = k.created_by
+    LEFT JOIN sites s ON s.id = k.site_id
+`
+
+function toKey(row: KeyRow): ApiKey {
+  return {
+    id: row.public_id,
+    name: row.name,
+    prefix: row.prefix,
+    scope: row.scope,
+    siteId: row.site_name,
+    createdBy: row.created_by_email ?? '—',
+    createdAt: row.created_at.toISOString(),
+    lastUsedAt: row.last_used_at ? row.last_used_at.toISOString() : null,
+    revokedAt: row.revoked_at ? row.revoked_at.toISOString() : null,
+  }
+}
+
+export async function listKeys(): Promise<ApiKey[]> {
+  const rows = await query<KeyRow>(`${KEY_SELECT} ORDER BY k.created_at DESC`)
+  return rows.map(toKey)
+}
+
+/**
+ * Mints a key. Only the SHA-256 goes to the database; the raw value is returned
+ * once and is unrecoverable afterwards — the same discipline as the temporary
+ * password, and the reason the list can only ever show the 8-char prefix.
+ */
+export async function createKey(opts: {
+  name: string
+  scope: 'read' | 'read_write'
+  siteName: string | null
+  createdBy: number
+}): Promise<ApiKey & { secret: string }> {
+  const publicId = ulid()
+  const secret = `dt_${randomBytes(24).toString('base64url')}`
+  const prefix = secret.slice(0, 8)
+
+  const site = opts.siteName
+    ? await queryOne<RowDataPacket & { id: number }>('SELECT id FROM sites WHERE name = ?', [
+        opts.siteName,
+      ])
+    : null
+
+  await exec(
+    `INSERT INTO api_keys (public_id, name, prefix, key_hash, scope, site_id, created_by)
+     VALUES (?, ?, ?, ?, ?, ?, ?)`,
+    [publicId, opts.name, prefix, sha256(secret), opts.scope, site?.id ?? null, opts.createdBy],
+  )
+
+  const row = await queryOne<KeyRow>(`${KEY_SELECT} WHERE k.public_id = ?`, [publicId])
+  if (!row) throw new Error('api key insert did not round-trip')
+  return { ...toKey(row), secret }
+}
+
+export async function revokeKey(publicId: string): Promise<ApiKey | null> {
+  const row = await queryOne<KeyRow>(`${KEY_SELECT} WHERE k.public_id = ?`, [publicId])
+  if (!row || row.revoked_at) return null
+
+  await exec('UPDATE api_keys SET revoked_at = NOW() WHERE public_id = ?', [publicId])
+  const fresh = await queryOne<KeyRow>(`${KEY_SELECT} WHERE k.public_id = ?`, [publicId])
+  return fresh ? toKey(fresh) : null
+}
+
+/* ——— Webhooks ——— */
+
+interface HookRow extends RowDataPacket {
+  public_id: string
+  url: string
+  events: unknown
+  status: 'active' | 'paused' | 'failing'
+  fail_count: number
+  last_delivery_at: Date | null
+  created_at: Date
+}
+
+function toHook(row: HookRow): Webhook {
+  const raw = typeof row.events === 'string' ? safeParse(row.events) : row.events
+  return {
+    id: row.public_id,
+    url: row.url,
+    events: Array.isArray(raw) ? raw.map(String) : [],
+    status: row.status,
+    failCount: row.fail_count,
+    lastDeliveryAt: row.last_delivery_at ? row.last_delivery_at.toISOString() : null,
+    createdAt: row.created_at.toISOString(),
+  }
+}
+
+function safeParse(raw: string): unknown {
+  try {
+    return JSON.parse(raw)
+  } catch {
+    return null
+  }
+}
+
+export async function listWebhooks(): Promise<Webhook[]> {
+  const rows = await query<HookRow>('SELECT * FROM webhooks ORDER BY created_at DESC')
+  return rows.map(toHook)
+}
+
+export async function createWebhook(url: string, events: string[]): Promise<Webhook> {
+  const publicId = ulid()
+  // Signing secret, encrypted at rest like the TOTP secret. Deliveries carry an
+  // HMAC of the body so a receiver can tell a real event from a replayed one.
+  const secret = encryptSecret(`whsec_${randomBytes(24).toString('base64url')}`)
+
+  await exec('INSERT INTO webhooks (public_id, url, events, secret) VALUES (?, ?, ?, ?)', [
+    publicId,
+    url,
+    JSON.stringify(events),
+    secret,
+  ])
+
+  const row = await queryOne<HookRow>('SELECT * FROM webhooks WHERE public_id = ?', [publicId])
+  if (!row) throw new Error('webhook insert did not round-trip')
+  return toHook(row)
+}
+
+export async function setWebhookStatus(
+  publicId: string,
+  status: 'active' | 'paused',
+): Promise<Webhook | null> {
+  const row = await queryOne<HookRow>('SELECT * FROM webhooks WHERE public_id = ?', [publicId])
+  if (!row) return null
+
+  // Resuming clears the failure counter — otherwise a hook that was fixed still
+  // reads as "failing" until it happens to fail again.
+  await exec(
+    status === 'active'
+      ? "UPDATE webhooks SET status = 'active', fail_count = 0 WHERE public_id = ?"
+      : "UPDATE webhooks SET status = 'paused' WHERE public_id = ?",
+    [publicId],
+  )
+
+  const fresh = await queryOne<HookRow>('SELECT * FROM webhooks WHERE public_id = ?', [publicId])
+  return fresh ? toHook(fresh) : null
+}
+
+export async function deleteWebhook(publicId: string): Promise<boolean> {
+  const res = await exec('DELETE FROM webhooks WHERE public_id = ?', [publicId])
+  return res.affectedRows > 0
+}
+
+export interface DeliveryResult {
+  delivered: boolean
+  responseStatus: number | null
+  hook: Webhook | null
+}
+
+/**
+ * Sends one test event and records the outcome.
+ *
+ * A 5-second timeout is deliberate: a receiver that hangs must not hold this
+ * request open, and "no answer" is a failure like any other. Three consecutive
+ * failures flip the hook to `failing` so the tab can show it without waiting for
+ * someone to read a log.
+ */
+export async function deliverTest(publicId: string): Promise<DeliveryResult> {
+  const row = await queryOne<HookRow>('SELECT * FROM webhooks WHERE public_id = ?', [publicId])
+  if (!row) return { delivered: false, responseStatus: null, hook: null }
+
+  const body = JSON.stringify({
+    event: 'ping',
+    id: ulid(),
+    sentAt: new Date().toISOString(),
+    data: { message: 'DigitalTwin webhook test' },
+  })
+
+  let responseStatus: number | null = null
+  let delivered = false
+
+  try {
+    const response = await fetch(row.url, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', 'x-digitaltwin-event': 'ping' },
+      body,
+      signal: AbortSignal.timeout(5000),
+    })
+    responseStatus = response.status
+    delivered = response.ok
+  } catch {
+    delivered = false
+  }
+
+  if (delivered) {
+    await exec(
+      "UPDATE webhooks SET last_delivery_at = NOW(), fail_count = 0, status = CASE WHEN status = 'failing' THEN 'active' ELSE status END WHERE public_id = ?",
+      [publicId],
+    )
+  } else {
+    await exec(
+      `UPDATE webhooks
+          SET last_delivery_at = NOW(), fail_count = fail_count + 1,
+              status = CASE WHEN fail_count + 1 >= 3 AND status <> 'paused' THEN 'failing' ELSE status END
+        WHERE public_id = ?`,
+      [publicId],
+    )
+  }
+
+  const fresh = await queryOne<HookRow>('SELECT * FROM webhooks WHERE public_id = ?', [publicId])
+  return { delivered, responseStatus, hook: fresh ? toHook(fresh) : null }
+}
diff --git a/apps/editor/panel/lib/jobs.ts b/apps/editor/panel/lib/jobs.ts
new file mode 100644
index 000000000..f8cb95eb3
--- /dev/null
+++ b/apps/editor/panel/lib/jobs.ts
@@ -0,0 +1,201 @@
+import { ulid } from 'ulid'
+import { exec, query, queryOne, type RowDataPacket, transaction } from './db'
+import type { Job, JobStatus } from './types'
+
+interface JobRow extends RowDataPacket {
+  public_id: string
+  kind: string
+  site_name: string | null
+  status: JobStatus
+  progress: number
+  error_text: string | null
+  attempts: number
+  queued_by_email: string | null
+  queued_at: Date
+  started_at: Date | null
+  finished_at: Date | null
+}
+
+const SELECT = `
+  SELECT j.public_id, j.kind, s.name AS site_name, j.status, j.progress, j.error_text,
+         j.attempts, u.email AS queued_by_email, j.queued_at, j.started_at, j.finished_at
+    FROM jobs j
+    LEFT JOIN users u ON u.id = j.queued_by
+    LEFT JOIN sites s ON s.id = j.site_id
+`
+
+function toJob(row: JobRow): Job {
+  return {
+    id: row.public_id,
+    kind: row.kind,
+    siteId: row.site_name,
+    status: row.status,
+    progress: row.progress,
+    errorText: row.error_text,
+    attempts: row.attempts,
+    queuedBy: row.queued_by_email ?? '—',
+    queuedAt: row.queued_at.toISOString(),
+    startedAt: row.started_at ? row.started_at.toISOString() : null,
+    finishedAt: row.finished_at ? row.finished_at.toISOString() : null,
+  }
+}
+
+export async function listJobs(status?: string): Promise<Job[]> {
+  const rows =
+    status && status !== 'All'
+      ? await query<JobRow>(`${SELECT} WHERE j.status = ? ORDER BY j.queued_at DESC LIMIT 100`, [
+          status,
+        ])
+      : await query<JobRow>(`${SELECT} ORDER BY j.queued_at DESC LIMIT 100`)
+  return rows.map(toJob)
+}
+
+export async function getJob(publicId: string): Promise<Job | null> {
+  const row = await queryOne<JobRow>(`${SELECT} WHERE j.public_id = ?`, [publicId])
+  return row ? toJob(row) : null
+}
+
+export async function enqueueJob(opts: {
+  kind: string
+  siteId?: number | null
+  payload?: Record<string, unknown> | null
+  queuedBy: number
+}): Promise<string> {
+  const publicId = ulid()
+  await exec(
+    `INSERT INTO jobs (public_id, kind, payload, site_id, queued_by) VALUES (?, ?, ?, ?, ?)`,
+    [
+      publicId,
+      opts.kind,
+      opts.payload ? JSON.stringify(opts.payload) : null,
+      opts.siteId ?? null,
+      opts.queuedBy,
+    ],
+  )
+  return publicId
+}
+
+export async function retryJob(publicId: string): Promise<Job | null> {
+  const job = await getJob(publicId)
+  if (!job || (job.status !== 'failed' && job.status !== 'cancelled')) return null
+
+  await exec(
+    `UPDATE jobs
+        SET status = 'queued', progress = 0, error_text = NULL,
+            started_at = NULL, finished_at = NULL, queued_at = NOW()
+      WHERE public_id = ?`,
+    [publicId],
+  )
+  return getJob(publicId)
+}
+
+export async function cancelJob(publicId: string): Promise<Job | null> {
+  const job = await getJob(publicId)
+  if (!job || (job.status !== 'queued' && job.status !== 'running')) return null
+
+  await exec("UPDATE jobs SET status = 'cancelled', finished_at = NOW() WHERE public_id = ?", [
+    publicId,
+  ])
+  return getJob(publicId)
+}
+
+/* ——— worker ———
+ *
+ * FIFO on a single worker, as the contract assumes. Claiming uses
+ * `SELECT ... FOR UPDATE SKIP LOCKED` over the (status, queued_at) index, so
+ * adding a second worker later needs no change here — two of them simply never
+ * hand out the same row.
+ *
+ * The loop lives in-process because this app is a single Node server. On more
+ * than one instance it must move to its own process, or every instance will run
+ * its own timer; the claim itself stays correct either way, only the wasted
+ * wake-ups multiply.
+ */
+
+const TICK_MS = 1500
+const PROVISION_STEPS = 5
+
+let worker: ReturnType<typeof setInterval> | undefined
+
+export function startJobWorker(): void {
+  if (worker) return
+  worker = setInterval(() => {
+    void tick().catch((err) => console.error('[jobs] worker tick failed:', err))
+  }, TICK_MS)
+  // Never hold the process open for the sake of the queue.
+  worker.unref?.()
+}
+
+async function tick(): Promise<void> {
+  await advanceRunning()
+  await claimNext()
+}
+
+/** Moves one queued job into `running`, oldest first. */
+async function claimNext(): Promise<void> {
+  const running = await queryOne<RowDataPacket & { n: number }>(
+    "SELECT COUNT(*) AS n FROM jobs WHERE status = 'running'",
+  )
+  if ((running?.n ?? 0) > 0) return // single worker: one job at a time
+
+  await transaction(async (cx) => {
+    const [rows] = await cx.execute<Array<RowDataPacket & { id: number }>>(
+      `SELECT id FROM jobs
+        WHERE status = 'queued'
+        ORDER BY queued_at
+        LIMIT 1
+        FOR UPDATE SKIP LOCKED`,
+    )
+    if (!rows[0]) return
+    await cx.execute(
+      "UPDATE jobs SET status = 'running', progress = 0, started_at = NOW(), attempts = attempts + 1 WHERE id = ?",
+      [rows[0].id],
+    )
+  })
+}
+
+/**
+ * Advances the running job's progress. Real work would report its own progress;
+ * this stands in for it so the queue, its progress bar and the site "Setting up"
+ * state are observable end to end without an editor attached.
+ */
+async function advanceRunning(): Promise<void> {
+  const row = await queryOne<
+    RowDataPacket & {
+      id: number
+      public_id: string
+      progress: number
+      kind: string
+      site_id: number | null
+    }
+  >(
+    "SELECT id, public_id, progress, kind, site_id FROM jobs WHERE status = 'running' ORDER BY started_at LIMIT 1",
+  )
+  if (!row) return
+
+  const next = Math.min(100, row.progress + Math.ceil(100 / PROVISION_STEPS))
+
+  if (next < 100) {
+    await exec('UPDATE jobs SET progress = ? WHERE id = ?', [next, row.id])
+    return
+  }
+
+  await exec("UPDATE jobs SET status = 'done', progress = 100, finished_at = NOW() WHERE id = ?", [
+    row.id,
+  ])
+
+  // A finished provisioning job is what flips its site out of `setup`.
+  if (row.kind === 'site_provision' && row.site_id) {
+    await exec("UPDATE sites SET status = 'active' WHERE id = ? AND status = 'setup'", [
+      row.site_id,
+    ])
+  }
+}
+
+/** Cheap change token for the SSE stream — avoids re-sending an identical list. */
+export async function jobsFingerprint(): Promise<string> {
+  const row = await queryOne<RowDataPacket & { n: number; sum: number | null; last: Date | null }>(
+    'SELECT COUNT(*) AS n, SUM(progress) AS sum, MAX(queued_at) AS last FROM jobs',
+  )
+  return `${row?.n ?? 0}:${row?.sum ?? 0}:${row?.last?.getTime() ?? 0}`
+}
diff --git a/apps/editor/panel/lib/logs.ts b/apps/editor/panel/lib/logs.ts
new file mode 100644
index 000000000..08ce1d849
--- /dev/null
+++ b/apps/editor/panel/lib/logs.ts
@@ -0,0 +1,235 @@
+import { exec, query, queryOne, type RowDataPacket } from './db'
+
+/**
+ * One table, two views.
+ *
+ * `audit_log` holds everything; `kind` decides which surface a row belongs to.
+ * Change records (who altered an account, a role, a site, the settings) are the
+ * audit trail. Everything else — sign-ins, sessions, browser errors — is runtime
+ * diagnostics.
+ *
+ * The contract says clearing diagnostics must not touch the audit trail, and
+ * the schema has one table, so the separation is enforced here rather than by
+ * two tables. CHANGE_KINDS is the whole of that rule.
+ */
+export const CHANGE_KINDS = [
+  'user',
+  'role_change',
+  'invite',
+  'request',
+  'site',
+  'api_key',
+  'webhook',
+  'settings',
+] as const
+
+export type LogLevel = 'info' | 'warn' | 'error'
+
+export interface LogEntry {
+  id: string
+  level: LogLevel
+  kind: string | null
+  actor: string
+  message: string
+  meta: Record<string, unknown> | null
+  createdAt: string
+  /** True when the row belongs to the audit trail and survives a clear. */
+  permanent: boolean
+}
+
+interface LogRow extends RowDataPacket {
+  id: number
+  level: LogLevel
+  kind: string | null
+  actor_label: string
+  message: string
+  meta: unknown
+  created_at: Date
+}
+
+function toEntry(row: LogRow): LogEntry {
+  const raw = typeof row.meta === 'string' ? safeParse(row.meta) : row.meta
+  return {
+    id: String(row.id),
+    level: row.level,
+    kind: row.kind,
+    actor: row.actor_label,
+    message: row.message,
+    meta: raw && typeof raw === 'object' ? (raw as Record<string, unknown>) : null,
+    createdAt: row.created_at.toISOString(),
+    permanent: isChangeKind(row.kind),
+  }
+}
+
+function safeParse(raw: string): unknown {
+  try {
+    return JSON.parse(raw)
+  } catch {
+    return null
+  }
+}
+
+export function isChangeKind(kind: string | null): boolean {
+  return kind !== null && (CHANGE_KINDS as readonly string[]).includes(kind)
+}
+
+export type LogRange = 'hour' | 'today' | 'week' | 'all'
+
+export interface LogQuery {
+  /** `audit` restricts to change records; `diagnostics` is everything else. */
+  view: 'diagnostics' | 'audit'
+  search?: string
+  level?: LogLevel | 'All'
+  actor?: string
+  kind?: string
+  range?: LogRange
+  /** Opaque cursor — the id to read backwards from. */
+  cursor?: string
+  limit?: number
+}
+
+export interface LogPage {
+  entries: LogEntry[]
+  /** Pass back as `cursor` to fetch the next page; null when exhausted. */
+  nextCursor: string | null
+  /** Distinct actors, for the actor dropdown. */
+  actors: string[]
+  counts: { info: number; warn: number; error: number }
+}
+
+const RANGE_SQL: Record<LogRange, string> = {
+  hour: 'AND created_at >= NOW() - INTERVAL 1 HOUR',
+  today: 'AND created_at >= CURDATE()',
+  week: 'AND created_at >= NOW() - INTERVAL 7 DAY',
+  all: '',
+}
+
+export async function listLogs(opts: LogQuery): Promise<LogPage> {
+  const limit = Math.min(200, Math.max(1, opts.limit ?? 50))
+  const placeholders = CHANGE_KINDS.map(() => '?').join(',')
+
+  const where: string[] = ['1 = 1']
+  const params: unknown[] = []
+
+  if (opts.view === 'audit') {
+    where.push(`kind IN (${placeholders})`)
+    params.push(...CHANGE_KINDS)
+  } else {
+    where.push(`(kind IS NULL OR kind NOT IN (${placeholders}))`)
+    params.push(...CHANGE_KINDS)
+  }
+
+  if (opts.level && opts.level !== 'All') {
+    where.push('level = ?')
+    params.push(opts.level)
+  }
+  if (opts.actor && opts.actor !== 'All') {
+    where.push('actor_label = ?')
+    params.push(opts.actor)
+  }
+  if (opts.kind && opts.kind !== 'All') {
+    where.push('kind = ?')
+    params.push(opts.kind)
+  }
+  if (opts.search?.trim()) {
+    where.push('(message LIKE ? OR actor_label LIKE ?)')
+    const like = `%${opts.search.trim()}%`
+    params.push(like, like)
+  }
+
+  const range = RANGE_SQL[opts.range ?? 'all']
+  const clause = `WHERE ${where.join(' AND ')} ${range}`
+
+  // Keyset pagination on the primary key. OFFSET would drift as new rows arrive
+  // — and on a log that is being written to while you read it, that means
+  // duplicated or skipped entries rather than a stable page.
+  const cursorClause = opts.cursor ? 'AND id < ?' : ''
+  const rows = await query<LogRow>(
+    `SELECT id, level, kind, actor_label, message, meta, created_at
+       FROM audit_log ${clause} ${cursorClause}
+      ORDER BY id DESC
+      LIMIT ${limit + 1}`,
+    opts.cursor ? [...params, opts.cursor] : params,
+  )
+
+  const hasMore = rows.length > limit
+  const page = hasMore ? rows.slice(0, limit) : rows
+
+  const counts = await queryOne<RowDataPacket & { info: number; warn: number; error: number }>(
+    `SELECT SUM(level = 'info') AS info, SUM(level = 'warn') AS warn, SUM(level = 'error') AS error
+       FROM audit_log ${clause}`,
+    params,
+  )
+
+  const actorRows = await query<RowDataPacket & { actor_label: string }>(
+    `SELECT DISTINCT actor_label FROM audit_log ${clause} ORDER BY actor_label LIMIT 50`,
+    params,
+  )
+
+  const last = page[page.length - 1]
+  return {
+    entries: page.map(toEntry),
+    nextCursor: hasMore && last ? String(last.id) : null,
+    actors: actorRows.map((r) => r.actor_label),
+    counts: {
+      info: Number(counts?.info ?? 0),
+      warn: Number(counts?.warn ?? 0),
+      error: Number(counts?.error ?? 0),
+    },
+  }
+}
+
+/**
+ * Clears diagnostics.
+ *
+ * Two things survive on purpose: change records (they are the audit trail) and
+ * anything at warn or error (a failed sign-in or a lockout is the exact record
+ * someone clearing logs would most want gone). Info-level noise is what goes.
+ */
+export async function clearDiagnostics(): Promise<number> {
+  const placeholders = CHANGE_KINDS.map(() => '?').join(',')
+  const res = await exec(
+    `DELETE FROM audit_log
+      WHERE (kind IS NULL OR kind NOT IN (${placeholders}))
+        AND level = 'info'`,
+    [...CHANGE_KINDS],
+  )
+  return res.affectedRows
+}
+
+/** Distinct `kind` values present in the audit view, for its filter chips. */
+export async function auditKinds(): Promise<string[]> {
+  const placeholders = CHANGE_KINDS.map(() => '?').join(',')
+  const rows = await query<RowDataPacket & { kind: string }>(
+    `SELECT DISTINCT kind FROM audit_log WHERE kind IN (${placeholders}) ORDER BY kind`,
+    [...CHANGE_KINDS],
+  )
+  return rows.map((r) => r.kind)
+}
+
+/** Actors seen in the last 20 minutes — the "connected users" panel. */
+export async function recentActors(
+  minutes = 20,
+): Promise<Array<{ actor: string; lastAction: string; at: string }>> {
+  const rows = await query<
+    RowDataPacket & { actor_label: string; message: string; created_at: Date }
+  >(
+    `SELECT a.actor_label, a.message, a.created_at
+       FROM audit_log a
+       JOIN (
+         SELECT actor_label, MAX(id) AS last_id
+           FROM audit_log
+          WHERE created_at >= NOW() - INTERVAL ? MINUTE
+            AND actor_label NOT IN ('system', 'browser')
+          GROUP BY actor_label
+       ) latest ON latest.last_id = a.id
+      ORDER BY a.created_at DESC
+      LIMIT 20`,
+    [minutes],
+  )
+  return rows.map((r) => ({
+    actor: r.actor_label,
+    lastAction: r.message,
+    at: r.created_at.toISOString(),
+  }))
+}
diff --git a/apps/editor/panel/lib/mail-template.test.ts b/apps/editor/panel/lib/mail-template.test.ts
new file mode 100644
index 000000000..08d09d78d
--- /dev/null
+++ b/apps/editor/panel/lib/mail-template.test.ts
@@ -0,0 +1,83 @@
+import { expect, test } from 'bun:test'
+import { escapeHtml, renderMail } from './mail-template'
+
+const base = {
+  origin: 'https://opex.help',
+  lang: 'en' as const,
+  label: 'Password reset',
+  heading: 'Set a new password',
+  intro: 'Use the button below.',
+  preheader: 'Valid for 30 minutes.',
+  footer: 'DigitalTwin\nhttps://opex.help/',
+}
+
+test('escapes text that reaches the markup', () => {
+  expect(escapeHtml('<script>alert("x")</script> & co')).toBe(
+    '&lt;script&gt;alert(&quot;x&quot;)&lt;/script&gt; &amp; co',
+  )
+})
+
+test('a name from the database cannot inject markup', () => {
+  const html = renderMail({ ...base, intro: '<img src=x onerror=alert(1)> Övür, hello.' })
+  expect(html).not.toContain('<img src=x')
+  expect(html).toContain('&lt;img src=x')
+  // Non-ASCII must survive intact — the charset is declared, not escaped away.
+  expect(html).toContain('Övür')
+})
+
+test('the action renders for Outlook, for everyone else, and as a pasteable address', () => {
+  const url = 'https://opex.help/reset/abc123'
+  const html = renderMail({ ...base, action: { label: 'Set a new password', url } })
+  // The VML rectangle Outlook uses, the ordinary anchor, and the fallback box.
+  expect(html.split(url).length - 1).toBe(3)
+  expect(html).toContain('href="https://opex.help/reset/abc123"')
+  expect(html).toContain('v:roundrect')
+})
+
+test('omitting the action drops the button and its fallback box', () => {
+  const html = renderMail(base)
+  expect(html).not.toContain('Or paste this address')
+  expect(html).not.toContain('<a href')
+  expect(html).not.toContain('v:roundrect')
+})
+
+test('the footer breaks across lines rather than printing an escape', () => {
+  const html = renderMail(base)
+  expect(html).toContain('DigitalTwin<br>https://opex.help/')
+})
+
+test('the frame speaks the recipient’s language', () => {
+  const tr = renderMail({
+    ...base,
+    lang: 'tr',
+    action: { label: 'Aç', url: 'https://opex.help/x' },
+  })
+  expect(tr).toContain('<html lang="tr">')
+  expect(tr).toContain('Ya da bu adresi tarayıcınıza yapıştırın')
+  expect(tr).toContain('Bu ileti otomatik olarak gönderildi')
+
+  const en = renderMail({ ...base, action: { label: 'Open', url: 'https://opex.help/x' } })
+  expect(en).toContain('<html lang="en">')
+  expect(en).toContain('Or paste this address into your browser')
+})
+
+test('a callout value carries its own dark-mode class', () => {
+  // Without dt-fg the inline near-black colour wins in dark mode and a
+  // temporary password renders invisible — the one failure nobody can report,
+  // because the reader cannot see there is anything to report.
+  const html = renderMail({ ...base, callout: { label: 'Temporary password', value: 'S3cret!x' } })
+  expect(html).toMatch(/class="dt-fg"[^>]*>S3cret!x</)
+})
+
+test('facts render as labelled rows', () => {
+  const html = renderMail({
+    ...base,
+    facts: [
+      { label: 'Account', value: 'a@b.c' },
+      { label: 'When', value: '01/08/2026' },
+    ],
+  })
+  expect(html).toContain('Account')
+  expect(html).toContain('a@b.c')
+  expect(html).toContain('01/08/2026')
+})
diff --git a/apps/editor/panel/lib/mail-template.ts b/apps/editor/panel/lib/mail-template.ts
new file mode 100644
index 000000000..6d85bdeb2
--- /dev/null
+++ b/apps/editor/panel/lib/mail-template.ts
@@ -0,0 +1,305 @@
+import type { Lang } from './types'
+
+/**
+ * The house style for transactional mail, as one function.
+ *
+ * Mail clients are not browsers: no external stylesheet survives, Outlook lays
+ * out with Word, and Gmail drops anything it does not recognise. So this is
+ * table-based with inline styles — the two things every client agrees on. The
+ * only `<style>` block carries the dark-scheme and small-screen overrides,
+ * which the clients that support them honour and everyone else ignores.
+ *
+ * The palette and the rhythm are the console's: hairline borders, a quiet mono
+ * micro-label, amber reserved for the single action, and facts set as labelled
+ * rows rather than buried in a sentence. Colours are hex rather than the app's
+ * oklch tokens because mail clients do not parse oklch.
+ */
+
+const BRAND = '#ffc629'
+
+/**
+ * The console's own tokens, converted from oklch to hex because mail clients do
+ * not parse oklch. Every one of them is chroma-zero — the earlier set was
+ * Tailwind zinc, which carries a blue cast, so the message read subtly cooler
+ * than the product it came from.
+ *
+ * `page` is --dt-shell, `card` is --dt-sidebar: the same pairing the console
+ * uses behind its own cards, which is what gives the card an edge rather than
+ * leaving it floating on near-white.
+ */
+const LIGHT = {
+  page: '#ebebeb',
+  card: '#fafafa',
+  border: '#e5e5e5',
+  hairline: '#efefef',
+  fg: '#0a0a0a',
+  muted: '#696969',
+  field: '#f4f4f4',
+}
+
+const DARK = {
+  page: '#0a0a0a',
+  card: '#171717',
+  border: '#2e2e2e',
+  hairline: '#242424',
+  fg: '#fafafa',
+  muted: '#a1a1a1',
+  field: '#121212',
+}
+
+/**
+ * One 4 px scale for every vertical gap. The previous eleven ad-hoc values had
+ * no relationship to each other, and two were outright wrong — the last fact
+ * row kept its bottom padding, and the button used a gap nothing else used.
+ */
+const GAP = { tight: 8, snug: 12, block: 20, wide: 28 }
+
+/** Four sizes, all whole pixels: Word converts px to pt and rounds half-pixels unpredictably. */
+const SIZE = { heading: 21, body: 15, meta: 13, micro: 10 }
+
+const SANS = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
+const MONO = "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace"
+
+export function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+/** Copy that belongs to the frame rather than to any one message. */
+const CHROME: Record<Lang, { paste: string; automated: string }> = {
+  en: {
+    paste: 'Or paste this address into your browser',
+    automated: 'This message was sent automatically. Please do not reply.',
+  },
+  tr: {
+    paste: 'Ya da bu adresi tarayıcınıza yapıştırın',
+    automated: 'Bu ileti otomatik olarak gönderildi. Lütfen yanıtlamayın.',
+  },
+}
+
+export interface MailFact {
+  label: string
+  value: string
+}
+
+export interface MailPage {
+  /** Absolute origin, so the logo and footer link resolve in a mail client. */
+  origin: string
+  /** Drives the `lang` attribute and the frame's own wording. */
+  lang: Lang
+  /** Mono micro-label above the heading — the console's `Caps` treatment. */
+  label: string
+  heading: string
+  /** Lead paragraph. Plain text; it is escaped here. */
+  intro: string
+  action?: { label: string; url: string }
+  /**
+   * Labelled rows under the lead — when, which account, which device. A
+   * security notice is only useful if the reader can check it against what
+   * they remember doing, and prose hides those details.
+   */
+  facts?: MailFact[]
+  /** Small print under the button — validity window, and what to do if unexpected. */
+  note?: string
+  /** Shown in a bordered box, e.g. a temporary password. */
+  callout?: { label: string; value: string }
+  /** Preview line shown by inboxes before the message is opened. */
+  preheader: string
+  footer: string
+}
+
+/**
+ * Outlook on Windows renders with Word, which ignores padding on an anchor —
+ * a styled button collapses to bare underlined text. The VML rectangle behind
+ * this conditional comment is the standard remedy; every other client skips it.
+ */
+function button(action: { label: string; url: string }): string {
+  const href = escapeHtml(action.url)
+  const label = escapeHtml(action.label)
+  return `
+              <tr>
+                <td style="padding: ${GAP.block}px 0 0 0;">
+                  <!--[if mso]>
+                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
+                               href="${href}" style="height:42px;v-text-anchor:middle;width:230px;" arcsize="24%" stroke="f" fillcolor="${BRAND}">
+                    <w:anchorlock/>
+                    <center style="color:#18181b;font-family:${SANS};font-size:14px;font-weight:600;">${label}</center>
+                  </v:roundrect>
+                  <![endif]-->
+                  <!--[if !mso]><!-- -->
+                  <table role="presentation" cellpadding="0" cellspacing="0" border="0">
+                    <tr>
+                      <td bgcolor="${BRAND}" style="border-radius: 8px;">
+                        <a href="${href}"
+                           style="display: inline-block; padding: 12px 20px; font-family: ${SANS}; font-size: 14px; font-weight: 600; line-height: 1; color: #18181b; text-decoration: none; border-radius: 8px;">${label}</a>
+                      </td>
+                    </tr>
+                  </table>
+                  <!--<![endif]-->
+                </td>
+              </tr>`
+}
+
+function factRows(facts: MailFact[]): string {
+  // width="1" on the label cell is what stops the browser splitting a
+  // width="100%" table near-evenly: a five-character label was followed by
+  // ~180 px of nothing before its value began. Both cells share one
+  // line-height so the mono label sits on the value's baseline instead of
+  // floating above it.
+  const rows = facts
+    .map((fact, index) => {
+      const top = index === 0 ? 0 : GAP.snug
+      // The last row carries no bottom padding: the block's own gap follows it,
+      // and keeping both made facts → button wider than every other gap.
+      const bottom = index === facts.length - 1 ? 0 : GAP.snug
+      const rule = index === 0 ? '' : `border-top: 1px solid ${LIGHT.hairline};`
+      return `
+                      <tr>
+                        <td width="1" class="dt-rule dt-hint" style="padding: ${top}px 14px ${bottom}px 0; ${rule} font-family: ${MONO}; font-size: ${SIZE.micro}px; line-height: 20px; letter-spacing: 0.12em; text-transform: uppercase; color: ${LIGHT.muted}; white-space: nowrap; vertical-align: top;">${escapeHtml(fact.label)}</td>
+                        <td class="dt-rule dt-fg" style="padding: ${top}px 0 ${bottom}px 0; ${rule} font-family: ${SANS}; font-size: ${SIZE.meta}px; line-height: 20px; color: ${LIGHT.fg}; vertical-align: top;">${escapeHtml(fact.value)}</td>
+                      </tr>`
+    })
+    .join('')
+
+  return `
+              <tr>
+                <td style="padding: ${GAP.block}px 0 0 0;">
+                  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">${rows}
+                  </table>
+                </td>
+              </tr>`
+}
+
+export function renderMail(page: MailPage): string {
+  const chrome = CHROME[page.lang] ?? CHROME.en
+
+  const action = page.action ? button(page.action) : ''
+
+  // Clients that strip the button still need a usable link, and a long URL has
+  // to be allowed to break or it widens the whole table on a phone.
+  const fallback = page.action
+    ? `
+              <tr>
+                <td style="padding: ${GAP.block}px 0 0 0;">
+                  <div class="dt-hint" style="font-family: ${SANS}; font-size: ${SIZE.meta}px; line-height: 1.5; color: ${LIGHT.muted}; padding-bottom: ${GAP.tight}px;">${chrome.paste}</div>
+                  <div class="dt-field" style="font-family: ${MONO}; font-size: 12px; line-height: 1.6; color: ${LIGHT.fg}; background: ${LIGHT.field}; border: 1px solid ${LIGHT.border}; border-radius: 8px; padding: 10px 12px; word-break: break-all;">${escapeHtml(page.action.url)}</div>
+                </td>
+              </tr>`
+    : ''
+
+  const callout = page.callout
+    ? `
+              <tr>
+                <td style="padding: ${GAP.block}px 0 0 0;">
+                  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="dt-field"
+                         style="background: ${LIGHT.field}; border: 1px solid ${LIGHT.border}; border-radius: 8px;">
+                    <tr>
+                      <td style="padding: 13px 15px;">
+                        <div class="dt-hint" style="font-family: ${MONO}; font-size: ${SIZE.micro}px; letter-spacing: 0.12em; text-transform: uppercase; color: ${LIGHT.muted}; padding-bottom: 6px;">${escapeHtml(page.callout.label)}</div>
+                        <!-- dt-fg, not just the box's dt-field: an inline colour on this
+                             element beats the colour it would otherwise inherit, and a
+                             temporary password rendered near-black on near-black is a
+                             message that cannot be read at all in dark mode. -->
+                        <div class="dt-fg" style="font-family: ${MONO}; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: ${LIGHT.fg}; word-break: break-all;">${escapeHtml(page.callout.value)}</div>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>`
+    : ''
+
+  const facts = page.facts?.length ? factRows(page.facts) : ''
+
+  const note = page.note
+    ? `
+              <tr>
+                <td class="dt-hint" style="padding: ${GAP.block}px 0 0 0; font-family: ${SANS}; font-size: ${SIZE.meta}px; line-height: 1.6; color: ${LIGHT.muted};">${escapeHtml(page.note)}</td>
+              </tr>`
+    : ''
+
+  return `<!doctype html>
+<html lang="${page.lang}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<meta name="supported-color-schemes" content="light dark">
+<title>${escapeHtml(page.heading)}</title>
+<!--[if mso]><style>body,table,td,a{font-family:Arial,Helvetica,sans-serif !important}</style><![endif]-->
+<style>
+  @media (prefers-color-scheme: dark) {
+    .dt-page { background: ${DARK.page} !important; }
+    .dt-card { background: ${DARK.card} !important; border-color: ${DARK.border} !important; }
+    .dt-fg { color: ${DARK.fg} !important; }
+    .dt-hint { color: ${DARK.muted} !important; }
+    .dt-rule { border-color: ${DARK.border} !important; }
+    .dt-divider { background: ${DARK.border} !important; }
+    .dt-field { background: ${DARK.field} !important; border-color: ${DARK.border} !important; color: ${DARK.fg} !important; }
+  }
+  @media only screen and (max-width: 600px) {
+    .dt-card-pad { padding: 24px 20px !important; }
+  }
+</style>
+</head>
+<body class="dt-page" style="margin: 0; padding: 0; background: ${LIGHT.page}; -webkit-text-size-adjust: 100%;">
+  <div style="display: none; max-height: 0; overflow: hidden; opacity: 0;">${escapeHtml(page.preheader)}</div>
+  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="dt-page" style="background: ${LIGHT.page};">
+    <tr>
+      <td align="center" style="padding: 32px 16px;">
+        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="dt-card"
+               style="max-width: 520px; background: ${LIGHT.card}; border: 1px solid ${LIGHT.border}; border-radius: 14px;">
+          <tr>
+            <td class="dt-card-pad" style="padding: ${GAP.wide}px;">
+              <!-- The console's lockup, cell for cell: mark, 1 px hairline, product
+                   name. The divider is the signature — without it the mark reads as
+                   the DigitalTwin logo; with it, correctly, as Netlog's mark carrying
+                   DigitalTwin's name. alt is "Netlog" for the same reason: with images
+                   blocked (Outlook's default) alt="DigitalTwin" beside the wordmark
+                   rendered the header as "DigitalTwin DigitalTwin". -->
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0">
+                <tr>
+                  <td style="padding-right: 10px; line-height: 0;">
+                    <img src="${escapeHtml(page.origin)}/brand/digitaltwin-mark.png"
+                         width="30" height="22" alt="Netlog"
+                         style="display: block; width: 30px; height: 22px; border: 0;">
+                  </td>
+                  <td class="dt-divider" width="1" style="width: 1px; padding: 0; background: ${LIGHT.border}; font-size: 0; line-height: 0;">&nbsp;</td>
+                  <td class="dt-fg" style="padding-left: 10px; font-family: ${SANS}; font-size: 14px; font-weight: 600; color: ${LIGHT.fg}; letter-spacing: -0.01em;">DigitalTwin</td>
+                </tr>
+              </table>
+
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
+                <tr>
+                  <td class="dt-rule" style="padding: ${GAP.block}px 0 0 0; border-bottom: 1px solid ${LIGHT.border}; font-size: 0; line-height: 0;">&nbsp;</td>
+                </tr>
+                <tr>
+                  <td class="dt-hint" style="padding: ${GAP.block}px 0 0 0; font-family: ${MONO}; font-size: ${SIZE.micro}px; letter-spacing: 0.12em; text-transform: uppercase; color: ${LIGHT.muted};">${escapeHtml(page.label)}</td>
+                </tr>
+                <tr>
+                  <td class="dt-fg" style="padding: ${GAP.tight}px 0 0 0; font-family: ${SANS}; font-size: ${SIZE.heading}px; font-weight: 600; line-height: 1.3; color: ${LIGHT.fg}; letter-spacing: -0.015em;">${escapeHtml(page.heading)}</td>
+                </tr>
+                <!-- The lead reads in the foreground colour and the small print below
+                     stays muted. Both were grey, separated by a point and a half of
+                     size, which left the card one flat slab with no hierarchy. -->
+                <tr>
+                  <td class="dt-fg" style="padding: ${GAP.snug}px 0 0 0; font-family: ${SANS}; font-size: ${SIZE.body}px; line-height: 1.6; color: ${LIGHT.fg};">${escapeHtml(page.intro)}</td>
+                </tr>${facts}${callout}${action}${fallback}${note}
+              </table>
+            </td>
+          </tr>
+        </table>
+
+        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 520px;">
+          <tr>
+            <td class="dt-hint" align="center" style="padding: ${GAP.block}px 8px 0 8px; font-family: ${MONO}; font-size: 9.5px; line-height: 1.8; letter-spacing: 0.06em; color: ${LIGHT.muted};">${escapeHtml(page.footer).replace(/\n/g, '<br>')}<br>${chrome.automated}</td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`
+}
diff --git a/apps/editor/panel/lib/mail.ts b/apps/editor/panel/lib/mail.ts
new file mode 100644
index 000000000..044252481
--- /dev/null
+++ b/apps/editor/panel/lib/mail.ts
@@ -0,0 +1,740 @@
+import nodemailer, { type Transporter } from 'nodemailer'
+import { queryOne, type RowDataPacket } from './db'
+import { formatDate } from './i18n'
+import { type MailFact, type MailPage, renderMail } from './mail-template'
+import type { Lang } from './types'
+
+/**
+ * Delivery for every transactional message the system owes a person.
+ *
+ * Two transports, chosen by `MAIL_TRANSPORT`:
+ *
+ * - `console` (default) prints the message with its link, so every flow is
+ *   exercisable end to end without a mail server.
+ * - `smtp` sends through SMTP.
+ *
+ * Raw tokens and temporary passwords appear here and nowhere else: not in the
+ * API response, not in the audit trail, not in the database.
+ *
+ * Two rules the set follows:
+ *
+ * 1. Every promise the copy makes is kept by code. The access-request receipt
+ *    says another message will follow — so approval AND rejection both send
+ *    one.
+ * 2. Anything that changes how an account can be signed into tells its owner,
+ *    unprompted. A password change, a new second factor, a forced sign-out and
+ *    a suspension are all things a person must be able to notice.
+ */
+
+export function appUrl(path: string): string {
+  const base = process.env.APP_URL ?? 'http://localhost:3000'
+  return new URL(path, base).toString()
+}
+
+function origin(): string {
+  return appUrl('/').replace(/\/$/, '')
+}
+
+/**
+ * Signature under every message, mirroring the sign-in screen's notice. Read per
+ * send rather than at import: the deploy bundle loads its .env in the boot hook,
+ * which can run after this module is first evaluated.
+ */
+function footer(lang: Lang): string {
+  const line =
+    lang === 'tr'
+      ? 'DigitalTwin — kurum içi sistem, yalnızca yetkili personel'
+      : 'DigitalTwin — internal system, authorised personnel only'
+  return `${line}\n${appUrl('/')}`
+}
+
+/**
+ * The language to write to somebody in.
+ *
+ * Recorded from their own session when they sign in. Anyone who has never
+ * signed in — an invitation's recipient, an outside access request — has no
+ * preference yet, and English is the system default.
+ */
+export async function localeFor(email: string): Promise<Lang> {
+  try {
+    const row = await queryOne<RowDataPacket & { locale: string }>(
+      'SELECT locale FROM users WHERE email = ? LIMIT 1',
+      [email],
+    )
+    return row?.locale === 'tr' ? 'tr' : 'en'
+  } catch {
+    // A console-transport development database may predate the column.
+    return 'en'
+  }
+}
+
+interface Envelope {
+  to: string
+  subject: string
+  /** text/plain part. Always sent — it is what the console transport prints. */
+  body: string
+  html?: string
+}
+
+let transporter: Transporter | null = null
+
+/**
+ * One connection pool for the process. Built on first use rather than at import
+ * so a console-transport deployment never opens a socket, and so a missing
+ * SMTP_HOST is reported when someone actually asks for SMTP.
+ */
+function smtp(): Transporter {
+  if (transporter) return transporter
+
+  const host = process.env.SMTP_HOST
+  if (!host) throw new Error('MAIL_TRANSPORT="smtp" needs SMTP_HOST.')
+
+  const port = Number(process.env.SMTP_PORT ?? 587)
+  const user = process.env.SMTP_USER
+  const pass = process.env.SMTP_PASSWORD
+
+  transporter = nodemailer.createTransport({
+    host,
+    port,
+    // Implicit TLS on 465, STARTTLS elsewhere — the usual split, overridable.
+    secure: process.env.SMTP_SECURE ? process.env.SMTP_SECURE === '1' : port === 465,
+    auth: user ? { user, pass } : undefined,
+    // Deliberately unpooled (nodemailer's default; `pool: true` was removed).
+    // This system sends a handful of messages a day, and a pooled socket kept
+    // open between them is the classic shared-hosting failure: the provider
+    // drops the idle connection, the pool does not notice, and the next send
+    // fails on a socket that looks alive — which is exactly the shape of "the
+    // receipt arrived but the invitation never did". A fresh connection per
+    // message costs a TLS handshake nobody will ever feel.
+    //
+    // Without these timeouts a hung mail server holds the HTTP request open until the
+    // platform's own timeout kills it, turning a slow mail server into a slow
+    // console.
+    connectionTimeout: 10_000,
+    greetingTimeout: 10_000,
+    socketTimeout: 20_000,
+  })
+
+  return transporter
+}
+
+/**
+ * Sends, and never throws.
+ *
+ * Every caller awaits this inline in a request handler, and two of them must not
+ * be able to fail: `POST /api/auth/reset` deliberately answers the same way
+ * whether or not the address exists, so letting a dead mail server turn one case
+ * into a 500 would hand out an account-enumeration oracle. A failure is loud in
+ * the logs and invisible to the caller — which is the same thing a queue would
+ * do, one retry later.
+ */
+async function send(envelope: Envelope, opts: { rethrow?: boolean } = {}): Promise<boolean> {
+  const transport = process.env.MAIL_TRANSPORT ?? 'console'
+
+  if (transport === 'console') {
+    console.info(
+      `\n─── mail ───────────────────────────────────\n` +
+        `To:      ${envelope.to}\n` +
+        `Subject: ${envelope.subject}\n\n` +
+        `${envelope.body}\n` +
+        `────────────────────────────────────────────\n`,
+    )
+    return true
+  }
+
+  if (transport !== 'smtp') {
+    console.error(`[mail] MAIL_TRANSPORT="${transport}" is not a transport; nothing was sent.`)
+    return false
+  }
+
+  try {
+    await smtp().sendMail({
+      from: process.env.MAIL_FROM ?? 'DigitalTwin <no-reply@netlog.com.tr>',
+      to: envelope.to,
+      subject: envelope.subject,
+      text: envelope.body,
+      html: envelope.html,
+    })
+    return true
+  } catch (err) {
+    // The address is logged, the body is not — it carries a single-use token.
+    console.error(`[mail] delivery to ${envelope.to} failed:`, err)
+    // Transactional mail swallows this on purpose: a mail server having a bad
+    // afternoon must not fail the password reset or invitation that triggered
+    // it. The test message is the exception — it exists only to prove delivery,
+    // so reporting success when nothing was delivered is the one answer it
+    // must never give.
+    if (opts.rethrow) throw err
+    return false
+  }
+}
+
+/**
+ * One composer for every message: the plain-text part is derived from the same
+ * fields as the HTML, so the two can never drift into saying different things.
+ */
+async function compose(
+  to: string,
+  lang: Lang,
+  subject: string,
+  page: Omit<MailPage, 'origin' | 'lang' | 'footer'>,
+  opts: { rethrow?: boolean } = {},
+): Promise<boolean> {
+  const lines: string[] = [page.heading, '', page.intro]
+  if (page.facts?.length) {
+    lines.push('')
+    for (const fact of page.facts) lines.push(`${fact.label}: ${fact.value}`)
+  }
+  if (page.callout) {
+    lines.push('', `${page.callout.label}: ${page.callout.value}`)
+  }
+  if (page.action) {
+    lines.push('', page.action.label, page.action.url)
+  }
+  if (page.note) lines.push('', page.note)
+  lines.push('', footer(lang))
+
+  return send(
+    {
+      to,
+      subject,
+      body: lines.join('\n'),
+      html: renderMail({ ...page, lang, origin: origin(), footer: footer(lang) }),
+    },
+    opts,
+  )
+}
+
+/** "DigitalTwin — <what happened>", the shape every subject line takes. */
+function subject(what: string): string {
+  return `DigitalTwin — ${what}`
+}
+
+function when(lang: Lang, at: Date = new Date()): MailFact {
+  return { label: lang === 'tr' ? 'Zaman' : 'When', value: formatDate(lang, at) }
+}
+
+function account(lang: Lang, email: string): MailFact {
+  return { label: lang === 'tr' ? 'Hesap' : 'Account', value: email }
+}
+
+/* ── Access ──────────────────────────────────────────────────────────────── */
+
+export async function deliverResetLink(opts: {
+  email: string
+  fullName: string
+  token: string
+  expiresAt: Date
+  lang?: Lang
+}): Promise<void> {
+  const lang = opts.lang ?? (await localeFor(opts.email))
+  const minutes = Math.max(1, Math.round((opts.expiresAt.getTime() - Date.now()) / 60_000))
+  const url = appUrl(`/reset/${opts.token}`)
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: 'parola sıfırlama',
+          label: 'Parola sıfırlama',
+          heading: 'Yeni bir parola belirleyin',
+          intro: `${opts.fullName}, DigitalTwin hesabınız için yeni bir parola seçmek üzere aşağıdaki düğmeyi kullanın.`,
+          action: 'Yeni parola belirle',
+          note: `Bağlantı tek kullanımlıktır ve ${minutes} dakika sonra geçersiz olur. Bu isteği siz yapmadıysanız bu iletiyi yok sayın; parolanız değişmez ve istek yöneticilere kaydedilir.`,
+          preheader: `Sıfırlama bağlantınız ${minutes} dakika geçerli.`,
+        }
+      : {
+          subject: 'password reset',
+          label: 'Password reset',
+          heading: 'Set a new password',
+          intro: `${opts.fullName}, use the button below to choose a new password for your DigitalTwin account.`,
+          action: 'Set a new password',
+          note: `The link is single-use and expires in ${minutes} minutes. If you did not ask for it, ignore this message — your password stays as it is, and the request is recorded for the administrators.`,
+          preheader: `Your reset link is valid for ${minutes} minutes.`,
+        }
+
+  await compose(opts.email, lang, subject(copy.subject), {
+    label: copy.label,
+    heading: copy.heading,
+    intro: copy.intro,
+    facts: [account(lang, opts.email), when(lang)],
+    action: { label: copy.action, url },
+    note: copy.note,
+    preheader: copy.preheader,
+  })
+}
+
+/**
+ * Returns whether the message actually reached the mail server. An invitation
+ * that is not delivered leaves an account nobody can activate, so the caller
+ * has to be able to say so rather than reporting a silent success.
+ */
+export async function deliverInvite(opts: {
+  email: string
+  fullName: string
+  token: string
+  expiresAt: string
+  lang?: Lang
+}): Promise<boolean> {
+  const lang = opts.lang ?? (await localeFor(opts.email))
+  const days = Math.max(
+    1,
+    Math.ceil((new Date(opts.expiresAt).getTime() - Date.now()) / 86_400_000),
+  )
+  const url = appUrl(`/welcome?token=${opts.token}`)
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: 'hesabınız hazır',
+          label: 'Hesap oluşturuldu',
+          heading: 'Hesabınız hazır',
+          intro: `${opts.fullName}, bir yönetici sizin için bir DigitalTwin hesabı oluşturdu. Başlamak için parolanızı belirleyin ve iki adımlı doğrulamayı kurun.`,
+          action: 'Hesabımı etkinleştir',
+          note: `Bağlantı ${days} gün geçerlidir. İlk girişte kendi parolanızı belirlemeniz istenecek.`,
+          preheader: 'Parolanızı belirleyin ve iki adımlı doğrulamayı kurun.',
+        }
+      : {
+          subject: 'your account is ready',
+          label: 'Account created',
+          heading: 'Your account is ready',
+          intro: `${opts.fullName}, an administrator created a DigitalTwin account for you. Set your password and enrol two-factor authentication to get started.`,
+          action: 'Activate my account',
+          note: `The link is valid for ${days} day(s). You will be asked to set your own password on first sign-in.`,
+          preheader: 'Set your password and enrol two-factor authentication.',
+        }
+
+  return compose(opts.email, lang, subject(copy.subject), {
+    label: copy.label,
+    heading: copy.heading,
+    intro: copy.intro,
+    facts: [account(lang, opts.email)],
+    action: { label: copy.action, url },
+    note: copy.note,
+    preheader: copy.preheader,
+  })
+}
+
+export async function deliverRequestReceipt(opts: {
+  email: string
+  fullName: string
+  lang?: Lang
+}): Promise<void> {
+  const lang = opts.lang ?? 'en'
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: 'hesap talebiniz alındı',
+          label: 'Talep alındı',
+          heading: 'Talebiniz inceleniyor',
+          intro: `${opts.fullName}, erişim talebiniz yöneticilere iletildi. Karar verildiğinde — olumlu ya da olumsuz — size bir ileti daha göndereceğiz.`,
+          preheader: 'Bir yönetici erişim talebinizi inceleyecek.',
+        }
+      : {
+          subject: 'account request received',
+          label: 'Request received',
+          heading: 'Your request is under review',
+          intro: `${opts.fullName}, your access request is with the administrators. You will get another message once it has been decided, either way.`,
+          preheader: 'An administrator will review your access request.',
+        }
+
+  await compose(opts.email, lang, subject(copy.subject), {
+    label: copy.label,
+    heading: copy.heading,
+    intro: copy.intro,
+    facts: [account(lang, opts.email), when(lang)],
+    preheader: copy.preheader,
+  })
+}
+
+/** The other half of the receipt's promise. Silence is not an answer. */
+export async function deliverRequestRejected(opts: {
+  email: string
+  fullName?: string
+  lang?: Lang
+}): Promise<void> {
+  const lang = opts.lang ?? (await localeFor(opts.email))
+  const name = opts.fullName ? `${opts.fullName}, ` : ''
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: 'hesap talebiniz hakkında',
+          label: 'Talep sonuçlandı',
+          heading: 'Erişim talebiniz onaylanmadı',
+          intro: `${name}DigitalTwin erişim talebiniz şu an için onaylanmadı. Bu bir hata olduğunu düşünüyorsanız kurum içinde ilgili yöneticiyle görüşün; talebiniz yeniden değerlendirilebilir.`,
+          preheader: 'Erişim talebiniz bu sefer onaylanmadı.',
+        }
+      : {
+          subject: 'about your account request',
+          label: 'Request closed',
+          heading: 'Your access request was not approved',
+          intro: `${name}your request for DigitalTwin access was not approved at this time. If you believe that is a mistake, speak to the administrator responsible for your team — a request can be reconsidered.`,
+          preheader: 'Your access request was not approved this time.',
+        }
+
+  await compose(opts.email, lang, subject(copy.subject), {
+    label: copy.label,
+    heading: copy.heading,
+    intro: copy.intro,
+    facts: [account(lang, opts.email), when(lang)],
+    preheader: copy.preheader,
+  })
+}
+
+/* ── Security notices ────────────────────────────────────────────────────── */
+
+/**
+ * A password changed — by a reset link, or on a forced first sign-in. The
+ * point is that the owner finds out even when it was not them who did it.
+ */
+export async function deliverPasswordChanged(opts: {
+  email: string
+  fullName: string
+  via: 'reset' | 'first-sign-in'
+  lang?: Lang
+}): Promise<void> {
+  const lang = opts.lang ?? (await localeFor(opts.email))
+
+  const howTr = {
+    reset: 'Sıfırlama bağlantısı',
+    self: 'Hesap ayarları',
+    'first-sign-in': 'İlk giriş',
+  }
+  const howEn = { reset: 'Reset link', self: 'Account settings', 'first-sign-in': 'First sign-in' }
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: 'parolanız değiştirildi',
+          label: 'Güvenlik bildirimi',
+          heading: 'Parolanız değiştirildi',
+          intro: `${opts.fullName}, DigitalTwin hesabınızın parolası az önce değiştirildi.`,
+          howLabel: 'Yöntem',
+          how: howTr[opts.via],
+          note: 'Bunu siz yaptıysanız yapmanız gereken bir şey yok. Yapmadıysanız hemen parolanızı sıfırlayın ve bir yöneticiye haber verin.',
+          preheader: 'Hesabınızın parolası değiştirildi.',
+        }
+      : {
+          subject: 'your password was changed',
+          label: 'Security notice',
+          heading: 'Your password was changed',
+          intro: `${opts.fullName}, the password on your DigitalTwin account has just been changed.`,
+          howLabel: 'Method',
+          how: howEn[opts.via],
+          note: 'If that was you, there is nothing to do. If it was not, reset your password immediately and tell an administrator.',
+          preheader: 'The password on your account was changed.',
+        }
+
+  await compose(opts.email, lang, subject(copy.subject), {
+    label: copy.label,
+    heading: copy.heading,
+    intro: copy.intro,
+    facts: [account(lang, opts.email), { label: copy.howLabel, value: copy.how }, when(lang)],
+    note: copy.note,
+    preheader: copy.preheader,
+  })
+}
+
+/**
+ * An administrator issued a temporary password. Without this message the
+ * password only exists on the administrator's screen, and gets read out over
+ * a phone — which is the worst way to move a credential.
+ */
+export async function deliverTemporaryPassword(opts: {
+  email: string
+  fullName: string
+  temporaryPassword: string
+  lang?: Lang
+}): Promise<void> {
+  const lang = opts.lang ?? (await localeFor(opts.email))
+  const url = appUrl('/signin')
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: 'geçici parolanız',
+          label: 'Geçici parola',
+          heading: 'Geçici bir parola verildi',
+          intro: `${opts.fullName}, bir yönetici hesabınıza geçici bir parola tanımladı. Bununla giriş yapın; sistem hemen kendi parolanızı belirlemenizi isteyecek.`,
+          calloutLabel: 'Geçici parola',
+          action: 'Giriş yap',
+          note: 'Bu parola yalnızca bir kez, kendi parolanızı belirlemeniz için geçerlidir. Böyle bir talebiniz olmadıysa bir yöneticiye haber verin.',
+          preheader: 'Giriş yapın ve kendi parolanızı belirleyin.',
+        }
+      : {
+          subject: 'your temporary password',
+          label: 'Temporary password',
+          heading: 'A temporary password was issued',
+          intro: `${opts.fullName}, an administrator set a temporary password on your account. Sign in with it and you will be asked to choose your own straight away.`,
+          calloutLabel: 'Temporary password',
+          action: 'Sign in',
+          note: 'This password works once, to let you set your own. If you did not ask for it, tell an administrator.',
+          preheader: 'Sign in and choose your own password.',
+        }
+
+  await compose(opts.email, lang, subject(copy.subject), {
+    label: copy.label,
+    heading: copy.heading,
+    intro: copy.intro,
+    facts: [account(lang, opts.email), when(lang)],
+    callout: { label: copy.calloutLabel, value: opts.temporaryPassword },
+    action: { label: copy.action, url },
+    note: copy.note,
+    preheader: copy.preheader,
+  })
+}
+
+/** Two-factor authentication was enrolled — or taken away. */
+export async function deliverTwoFactorChanged(opts: {
+  email: string
+  fullName: string
+  enabled: boolean
+  lang?: Lang
+}): Promise<void> {
+  const lang = opts.lang ?? (await localeFor(opts.email))
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: opts.enabled ? 'iki adımlı doğrulama açıldı' : 'iki adımlı doğrulama kapatıldı',
+          label: 'Güvenlik bildirimi',
+          heading: opts.enabled ? 'İki adımlı doğrulama açıldı' : 'İki adımlı doğrulama kapatıldı',
+          intro: opts.enabled
+            ? `${opts.fullName}, hesabınızda iki adımlı doğrulama kuruldu. Bundan sonra her girişte doğrulayıcı uygulamanızdaki kod istenecek.`
+            : `${opts.fullName}, hesabınızdaki iki adımlı doğrulama kaldırıldı. Girişte artık yalnızca parolanız istenecek.`,
+          note: 'Bunu siz yapmadıysanız hemen bir yöneticiye haber verin.',
+          preheader: opts.enabled
+            ? 'Hesabınıza ikinci bir doğrulama adımı eklendi.'
+            : 'Hesabınızdaki ikinci doğrulama adımı kaldırıldı.',
+        }
+      : {
+          subject: opts.enabled
+            ? 'two-factor authentication enabled'
+            : 'two-factor authentication removed',
+          label: 'Security notice',
+          heading: opts.enabled
+            ? 'Two-factor authentication is on'
+            : 'Two-factor authentication was removed',
+          intro: opts.enabled
+            ? `${opts.fullName}, a second step was added to your account. From now on every sign-in asks for the code from your authenticator app.`
+            : `${opts.fullName}, the second step was removed from your account. Sign-in now asks for your password alone.`,
+          note: 'If that was not you, tell an administrator immediately.',
+          preheader: opts.enabled
+            ? 'A second sign-in step was added to your account.'
+            : 'The second sign-in step was removed from your account.',
+        }
+
+  await compose(opts.email, lang, subject(copy.subject), {
+    label: copy.label,
+    heading: copy.heading,
+    intro: copy.intro,
+    facts: [account(lang, opts.email), when(lang)],
+    note: copy.note,
+    preheader: copy.preheader,
+  })
+}
+
+/** Every session was ended — by the owner, or by an administrator. */
+export async function deliverSessionsRevoked(opts: {
+  email: string
+  fullName: string
+  byAdmin: boolean
+  lang?: Lang
+}): Promise<void> {
+  const lang = opts.lang ?? (await localeFor(opts.email))
+  const url = appUrl('/signin')
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: 'tüm oturumlarınız kapatıldı',
+          label: 'Güvenlik bildirimi',
+          heading: 'Tüm cihazlardan çıkış yapıldı',
+          intro: opts.byAdmin
+            ? `${opts.fullName}, bir yönetici hesabınızın açık tüm oturumlarını kapattı. Devam etmek için yeniden giriş yapmanız gerekir.`
+            : `${opts.fullName}, hesabınızın açık tüm oturumları kapatıldı. Devam etmek için yeniden giriş yapmanız gerekir.`,
+          action: 'Yeniden giriş yap',
+          note: 'Bunu beklemiyorduysanız parolanızı değiştirin ve bir yöneticiye haber verin.',
+          preheader: 'Açık tüm oturumlarınız sonlandırıldı.',
+        }
+      : {
+          subject: 'you were signed out everywhere',
+          label: 'Security notice',
+          heading: 'Signed out on every device',
+          intro: opts.byAdmin
+            ? `${opts.fullName}, an administrator ended every open session on your account. You will need to sign in again to carry on.`
+            : `${opts.fullName}, every open session on your account has been ended. You will need to sign in again to carry on.`,
+          action: 'Sign in again',
+          note: 'If you were not expecting this, change your password and tell an administrator.',
+          preheader: 'Every open session on your account was ended.',
+        }
+
+  await compose(opts.email, lang, subject(copy.subject), {
+    label: copy.label,
+    heading: copy.heading,
+    intro: copy.intro,
+    facts: [account(lang, opts.email), when(lang)],
+    action: { label: copy.action, url },
+    note: copy.note,
+    preheader: copy.preheader,
+  })
+}
+
+/** Access suspended or restored. A sign-in that simply fails explains nothing. */
+export async function deliverAccessChanged(opts: {
+  email: string
+  fullName: string
+  active: boolean
+  lang?: Lang
+}): Promise<void> {
+  const lang = opts.lang ?? (await localeFor(opts.email))
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: opts.active ? 'erişiminiz yeniden açıldı' : 'erişiminiz durduruldu',
+          label: 'Hesap durumu',
+          heading: opts.active ? 'Erişiminiz yeniden açıldı' : 'Erişiminiz durduruldu',
+          intro: opts.active
+            ? `${opts.fullName}, DigitalTwin hesabınız yeniden etkin. Her zamanki gibi giriş yapabilirsiniz.`
+            : `${opts.fullName}, DigitalTwin hesabınız bir yönetici tarafından devre dışı bırakıldı. Şu an giriş yapamazsınız; çizimleriniz olduğu gibi duruyor.`,
+          note: opts.active
+            ? undefined
+            : 'Bunun nedenini öğrenmek için ekibinizden sorumlu yöneticiyle görüşün.',
+          preheader: opts.active ? 'Hesabınız yeniden etkin.' : 'Hesabınız şu an devre dışı.',
+        }
+      : {
+          subject: opts.active ? 'your access was restored' : 'your access was suspended',
+          label: 'Account status',
+          heading: opts.active ? 'Your access was restored' : 'Your access was suspended',
+          intro: opts.active
+            ? `${opts.fullName}, your DigitalTwin account is active again. You can sign in as usual.`
+            : `${opts.fullName}, an administrator has deactivated your DigitalTwin account. You cannot sign in for now; your work is untouched.`,
+          note: opts.active
+            ? undefined
+            : 'Speak to the administrator responsible for your team to find out why.',
+          preheader: opts.active ? 'Your account is active again.' : 'Your account is inactive.',
+        }
+
+  await compose(opts.email, lang, subject(copy.subject), {
+    label: copy.label,
+    heading: copy.heading,
+    intro: copy.intro,
+    facts: [account(lang, opts.email), when(lang)],
+    note: copy.note,
+    preheader: copy.preheader,
+  })
+}
+
+/* ── Product ─────────────────────────────────────────────────────────────── */
+
+/** An administrator published somebody's project as a site. */
+export async function deliverScenePublished(opts: {
+  email: string
+  fullName: string
+  sceneName: string
+  sceneId: string
+  lang?: Lang
+}): Promise<void> {
+  const lang = opts.lang ?? (await localeFor(opts.email))
+  const url = appUrl(`/scene/${opts.sceneId}`)
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: 'projeniz yayınlandı',
+          label: 'Proje yayınlandı',
+          heading: 'Projeniz yayınlandı',
+          intro: `${opts.fullName}, çiziminiz bir yönetici tarafından onaylandı ve saha olarak yayınlandı. Artık erişimi olan herkes tarafından görülebilir.`,
+          projectLabel: 'Proje',
+          action: 'Projeyi aç',
+          preheader: 'Çiziminiz saha olarak yayınlandı.',
+        }
+      : {
+          subject: 'your project was published',
+          label: 'Project published',
+          heading: 'Your project was published',
+          intro: `${opts.fullName}, an administrator approved your drawing and published it as a site. It is now visible to everyone with access.`,
+          projectLabel: 'Project',
+          action: 'Open the project',
+          preheader: 'Your drawing was published as a site.',
+        }
+
+  await compose(opts.email, lang, subject(copy.subject), {
+    label: copy.label,
+    heading: copy.heading,
+    intro: copy.intro,
+    facts: [{ label: copy.projectLabel, value: opts.sceneName }, when(lang)],
+    action: { label: copy.action, url },
+    preheader: copy.preheader,
+  })
+}
+
+/* ── Diagnostics ─────────────────────────────────────────────────────────── */
+
+/**
+ * A message with nothing behind it, for checking that delivery and rendering
+ * work from the console's Settings screen. It carries every element the set
+ * uses — facts, a callout, a button, a note — so one send proves the lot.
+ */
+export async function deliverTestMessage(opts: {
+  email: string
+  fullName?: string
+  lang?: Lang
+}): Promise<void> {
+  const lang = opts.lang ?? (await localeFor(opts.email))
+  const name = opts.fullName ?? opts.email
+
+  const copy =
+    lang === 'tr'
+      ? {
+          subject: 'deneme',
+          label: 'Deneme',
+          heading: 'Bu bir deneme iletisidir',
+          intro: `${name}, bu ileti DigitalTwin'in posta ayarlarını denemek için gönderildi. Arkasında bir işlem yok ve yapmanız gereken bir şey yok.`,
+          calloutLabel: 'Örnek kod',
+          action: 'Konsolu aç',
+          note: 'Bu iletiyi düzgün okuyabiliyorsanız — logo, başlık, alanlar ve düğme yerli yerindeyse — posta ayarları çalışıyor demektir.',
+          preheader: 'Posta ayarlarını denemek için gönderilen örnek ileti.',
+          facts: [
+            { label: 'Ortam', value: origin() },
+            { label: 'Aktarım', value: process.env.MAIL_TRANSPORT ?? 'console' },
+          ],
+        }
+      : {
+          subject: 'test message',
+          label: 'Test',
+          heading: 'This is a test message',
+          intro: `${name}, this message was sent to check DigitalTwin's mail settings. Nothing happened behind it and there is nothing for you to do.`,
+          calloutLabel: 'Sample code',
+          action: 'Open the console',
+          note: 'If this reads properly — logo, heading, fields and button all in place — mail delivery is working.',
+          preheader: 'A sample message, sent to check mail delivery.',
+          facts: [
+            { label: 'Environment', value: origin() },
+            { label: 'Transport', value: process.env.MAIL_TRANSPORT ?? 'console' },
+          ],
+        }
+
+  const facts: MailFact[] = [...copy.facts, when(lang)]
+
+  await compose(
+    opts.email,
+    lang,
+    subject(copy.subject),
+    {
+      label: copy.label,
+      heading: copy.heading,
+      intro: copy.intro,
+      facts,
+      callout: { label: copy.calloutLabel, value: '482 913' },
+      action: { label: copy.action, url: appUrl('/console/overview') },
+      note: copy.note,
+      preheader: copy.preheader,
+    },
+    // The one message whose whole job is to prove delivery: a failure has to
+    // reach the administrator who pressed the button.
+    { rethrow: true },
+  )
+}
diff --git a/apps/editor/panel/lib/password-policy.ts b/apps/editor/panel/lib/password-policy.ts
new file mode 100644
index 000000000..7eac43c8a
--- /dev/null
+++ b/apps/editor/panel/lib/password-policy.ts
@@ -0,0 +1,57 @@
+import type { PasswordPolicyResult } from './api-contract'
+
+/**
+ * The five policy rules, as one pure function shared by both sides.
+ *
+ * The client renders it live under the field; the server re-runs it on submit.
+ * Keeping a single implementation here — rather than a copy in each — is what
+ * stops the meter from saying "Strong" on a password the API then rejects.
+ * This module must stay free of Node imports so the client can pull it in.
+ *
+ * `identity` is the username or local part; rule 5 rejects a password that
+ * contains it, or the word "netlog".
+ */
+export function checkPasswordPolicy(password: string, identity = ''): PasswordPolicyResult {
+  const parts = identityParts(identity)
+  const lower = password.toLowerCase()
+
+  const minLength = password.length >= 10
+  const mixedCase = /[a-z]/.test(password) && /[A-Z]/.test(password)
+  const digit = /\d/.test(password)
+  const symbol = /[^A-Za-z0-9]/.test(password)
+  const noIdentity =
+    password.length > 0 && !lower.includes('netlog') && !parts.some((part) => lower.includes(part))
+
+  const passed = [minLength, mixedCase, digit, symbol, noIdentity].filter(Boolean).length
+
+  return {
+    minLength,
+    mixedCase,
+    digit,
+    symbol,
+    noIdentity,
+    ok: passed === 5,
+    // Same mapping as the prototype: ceil(passed * 4 / 5) - 1, clamped to 0..3.
+    strength: Math.max(0, Math.min(3, Math.ceil((passed * 4) / 5) - 1)) as 0 | 1 | 2 | 3,
+  }
+}
+
+/**
+ * Every meaningful piece of the identity, lowercased.
+ *
+ * This used to be `identity.split('@')[0].split('.')[0]` — the first segment
+ * only. That is exactly wrong for this product's username format: "r.ovur"
+ * reduced to "r", which is under the three-character floor, so rule 5 was
+ * skipped altogether and "R.ovur-2026!" scored full marks. Both segments count
+ * now, plus the joined form, so neither "ovur" nor "rovur" gets through.
+ *
+ * The three-character floor stays: a user named "ab" must not be barred from
+ * every password containing those two letters.
+ */
+function identityParts(identity: string): string[] {
+  const local = (identity.split('@')[0] ?? '').toLowerCase()
+  const segments = local.split(/[^a-z0-9]+/i).filter((part) => part.length >= 3)
+  const joined = local.replace(/[^a-z0-9]+/gi, '')
+
+  return joined.length >= 3 ? [...new Set([...segments, joined])] : segments
+}
diff --git a/apps/editor/panel/lib/settings.ts b/apps/editor/panel/lib/settings.ts
new file mode 100644
index 000000000..6d8290d69
--- /dev/null
+++ b/apps/editor/panel/lib/settings.ts
@@ -0,0 +1,95 @@
+import { exec, queryOne, type RowDataPacket } from './db'
+import type { OrgSettings } from './types'
+
+interface SettingsRow extends RowDataPacket {
+  session_minutes: number
+  keep_signed_in_allowed: number
+  keep_signed_in_days: number
+  trusted_device_days: number
+  concurrent_session_limit: number
+  mfa_required: number
+  sso_enforced_domains: string[] | string | null
+  external_users_allowed: number
+  invite_expiry_days: number
+  updated_by: number | null
+  updated_at: Date
+}
+
+/** Defaults mirror the DDL, so a missing row degrades to the documented values. */
+const FALLBACK: OrgSettings = {
+  sessionMinutes: 20,
+  keepSignedInAllowed: true,
+  keepSignedInDays: 14,
+  trustedDeviceDays: 30,
+  concurrentSessionLimit: 3,
+  mfaRequired: true,
+  ssoEnforcedDomains: [],
+  externalUsersAllowed: true,
+  inviteExpiryDays: 7,
+  updatedBy: null,
+  updatedAt: new Date(0).toISOString(),
+}
+
+let cache: { value: OrgSettings; at: number } | null = null
+const TTL_MS = 5_000
+
+function parseDomains(raw: SettingsRow['sso_enforced_domains']): string[] {
+  if (Array.isArray(raw)) return raw
+  if (typeof raw === 'string') {
+    try {
+      const parsed = JSON.parse(raw)
+      return Array.isArray(parsed) ? parsed : []
+    } catch {
+      return []
+    }
+  }
+  return []
+}
+
+/**
+ * Reads the single settings row. Enforcement lives on the server — session
+ * length, invite expiry and the MFA requirement are all read from here, never
+ * from anything the client sends.
+ */
+export async function getSettings(): Promise<OrgSettings> {
+  if (cache && Date.now() - cache.at < TTL_MS) return cache.value
+
+  const row = await queryOne<SettingsRow>('SELECT * FROM settings WHERE id = 1')
+  const value: OrgSettings = row
+    ? {
+        sessionMinutes: row.session_minutes,
+        keepSignedInAllowed: row.keep_signed_in_allowed === 1,
+        keepSignedInDays: row.keep_signed_in_days,
+        trustedDeviceDays: row.trusted_device_days,
+        concurrentSessionLimit: row.concurrent_session_limit,
+        mfaRequired: row.mfa_required === 1,
+        ssoEnforcedDomains: parseDomains(row.sso_enforced_domains),
+        externalUsersAllowed: row.external_users_allowed === 1,
+        inviteExpiryDays: row.invite_expiry_days,
+        updatedBy: row.updated_by ? String(row.updated_by) : null,
+        updatedAt: row.updated_at.toISOString(),
+      }
+    : FALLBACK
+
+  cache = { value, at: Date.now() }
+  return value
+}
+
+export function invalidateSettingsCache(): void {
+  cache = null
+}
+
+/** True when the address falls under an SSO-enforced domain (password sign-in off). */
+export async function isSsoEnforced(email: string): Promise<boolean> {
+  const { ssoEnforcedDomains } = await getSettings()
+  const lower = email.toLowerCase()
+  return ssoEnforcedDomains.some((domain) => {
+    const suffix = domain.startsWith('@') ? domain.toLowerCase() : `@${domain.toLowerCase()}`
+    return lower.endsWith(suffix)
+  })
+}
+
+export async function touchSettingsUpdatedBy(userId: number): Promise<void> {
+  await exec('UPDATE settings SET updated_by = ? WHERE id = 1', [userId])
+  invalidateSettingsCache()
+}
diff --git a/apps/editor/panel/lib/types.ts b/apps/editor/panel/lib/types.ts
new file mode 100644
index 000000000..13cbcb2c8
--- /dev/null
+++ b/apps/editor/panel/lib/types.ts
@@ -0,0 +1,198 @@
+/**
+ * Core domain types — section 08 of the rebuild plan, verbatim where the document
+ * spells them out. These are the types every later step compiles against.
+ *
+ * At the API boundary `id` is always the CHAR(26) ULID `public_id`; the internal
+ * BIGINT primary key never leaves the server. Timestamps are ISO-8601 UTC
+ * strings and are formatted in the i18n layer, never in the query.
+ */
+
+export type AuthState =
+  | 'anonymous'
+  | 'verifying'
+  | 'mfaRequired'
+  | 'mfaLocked'
+  | 'firstSignIn'
+  | 'passwordExpired'
+  | 'signedIn'
+  | 'idleWarning'
+  | 'expired'
+  | 'suspended'
+
+export type Role = 'Admin' | 'Supervisor' | 'Editor' | 'Viewer' | (string & {})
+export type UserStatus = 'Active' | 'Inactive' | 'Invited'
+
+export interface User {
+  name: string
+  email: string
+  username: string
+  role: Role
+  mfa: 'On' | 'Off'
+  status: UserStatus
+  lastSeen: string
+  siteRoles?: Record<string, Role | null>
+}
+
+export interface Assignment {
+  user: string
+  site: string
+  role: Role
+  grantedBy: string
+  grantedAt: string
+}
+
+export type Scenario = 'happy' | 'locked' | 'sso' | 'error' | 'empty' | 'slow'
+
+/* ——— v3 types · one-to-one with the tables in section 10 ——— */
+
+export type Org = 'internal' | 'external'
+export type SiteStatus = 'active' | 'setup' | 'archived'
+export type JobStatus = 'queued' | 'running' | 'done' | 'failed' | 'cancelled'
+export type KeyScope = 'read' | 'read_write'
+export type HookStatus = 'active' | 'paused' | 'failing'
+
+export interface Site {
+  id: string
+  name: string
+  status: SiteStatus
+  storageSlots?: number
+  pickingSlots?: number
+  footprintM2?: number
+  createdBy: string
+  createdAt: string
+  userCount?: number
+  /** The 3D scene representing this site, once the editor has created it. */
+  sceneId?: string | null
+}
+
+export interface Invitation {
+  id: string
+  userId: string
+  invitedBy: string
+  expiresAt: string
+  resentCount: number
+  acceptedAt?: string | null
+  revokedAt?: string | null
+  state: 'pending' | 'expired' | 'accepted' | 'revoked'
+}
+
+export interface Job {
+  id: string
+  kind: string
+  siteId?: string | null
+  status: JobStatus
+  progress: number
+  errorText?: string | null
+  attempts: number
+  queuedBy: string
+  queuedAt: string
+  startedAt?: string | null
+  finishedAt?: string | null
+}
+
+export interface ApiKey {
+  id: string
+  name: string
+  prefix: string
+  scope: KeyScope
+  siteId?: string | null // null = every site
+  createdBy: string
+  createdAt: string
+  lastUsedAt?: string | null
+  revokedAt?: string | null
+  secret?: string // populated ONLY in the POST /api/keys response
+}
+
+export interface Webhook {
+  id: string
+  url: string
+  events: string[]
+  status: HookStatus
+  failCount: number
+  lastDeliveryAt?: string | null
+  createdAt: string
+}
+
+export interface OrgSettings {
+  sessionMinutes: number
+  keepSignedInAllowed: boolean
+  keepSignedInDays: number
+  trustedDeviceDays: number
+  concurrentSessionLimit: number
+  mfaRequired: boolean
+  ssoEnforcedDomains: string[]
+  externalUsersAllowed: boolean
+  inviteExpiryDays: number
+  updatedBy?: string | null
+  updatedAt: string
+}
+
+export interface UserV3 extends User {
+  id: string
+  org: Org
+  invitation?: Invitation | null
+}
+
+/* ——— supporting types the screens in steps 3–5 need ——— */
+
+export const PERMISSIONS = [
+  'admin_access',
+  'edit_projects',
+  'create_projects',
+  'delete_projects',
+  'access_settings',
+  'view_projects',
+  'edit_users',
+  'edit_roles',
+  'view_logs',
+] as const
+
+export type Permission = (typeof PERMISSIONS)[number]
+
+export interface RoleDefinition {
+  name: Role
+  permissions: Permission[]
+  isSystem: boolean
+}
+
+export interface SessionInfo {
+  id: string
+  device: string | null
+  ip: string | null
+  current: boolean
+  createdAt: string
+  lastActivityAt: string
+  expiresAt: string
+  trustedUntil?: string | null
+}
+
+/** What `GET /api/auth/session` hands the client. Never carries a password hash. */
+export interface SessionUser {
+  id: string
+  name: string
+  email: string
+  username: string
+  role: Role
+  org: Org
+  status: UserStatus
+  mfa: 'On' | 'Off'
+  permissions: Permission[]
+  mustChangePassword: boolean
+  siteRoles: Record<string, Role>
+}
+
+export interface AccessRequest {
+  id: string
+  fullName: string
+  email: string
+  username: string
+  department: string
+  requestedRole: Role
+  note?: string | null
+  status: 'pending' | 'approved' | 'rejected'
+  createdAt: string
+}
+
+export type ListState = 'ready' | 'loading' | 'error' | 'empty'
+export type Lang = 'en' | 'tr'
+export type Theme = 'dark' | 'light'
diff --git a/apps/editor/panel/lib/users.ts b/apps/editor/panel/lib/users.ts
new file mode 100644
index 000000000..c3759956a
--- /dev/null
+++ b/apps/editor/panel/lib/users.ts
@@ -0,0 +1,359 @@
+import { ulid } from 'ulid'
+import { invitationForUser } from './auth/invitations'
+import { permissionsForRole } from './auth/roles'
+import { exec, query, queryOne, type RowDataPacket, transaction } from './db'
+import { collator } from './i18n'
+import type { Lang, Permission, Role, UserStatus, UserV3 } from './types'
+
+/**
+ * The account the console must never let anyone delete or deactivate. The old
+ * panel hard-coded `admin@netlog.com.tr`; the rule survives, but it is anchored
+ * on the seeded username so a renamed address cannot orphan the tenant.
+ */
+export const PRIMARY_ADMIN_USERNAME = process.env.SEED_ADMIN_USERNAME ?? 'Admin'
+
+const DB_TO_UI: Record<'invited' | 'active' | 'inactive' | 'suspended', UserStatus> = {
+  invited: 'Invited',
+  active: 'Active',
+  inactive: 'Inactive',
+  suspended: 'Inactive',
+}
+
+const UI_TO_DB: Record<UserStatus, 'invited' | 'active' | 'inactive'> = {
+  Invited: 'invited',
+  Active: 'active',
+  Inactive: 'inactive',
+}
+
+interface UserListRow extends RowDataPacket {
+  id: number
+  public_id: string
+  email: string
+  username: string
+  full_name: string
+  org: 'internal' | 'external'
+  global_role: string
+  status: 'invited' | 'active' | 'inactive' | 'suspended'
+  last_seen_at: Date | null
+  mfa_confirmed_at: Date | null
+}
+
+const LIST_SELECT = `
+  SELECT u.id, u.public_id, u.email, u.username, u.full_name, u.org,
+         u.global_role, u.status, u.last_seen_at, tf.confirmed_at AS mfa_confirmed_at
+    FROM users u
+    LEFT JOIN two_factor tf ON tf.user_id = u.id
+`
+
+export type UserSortKey = 'name' | 'email' | 'username' | 'role' | 'status'
+
+export interface UserQuery {
+  search?: string
+  role?: string
+  sort?: UserSortKey
+  direction?: 'asc' | 'desc'
+  page?: number
+  pageSize?: number
+  lang?: Lang
+}
+
+export interface UserListResult {
+  users: UserV3[]
+  total: number
+  /** Total before search/role filtering — drives "no users at all" vs "no matches". */
+  totalUnfiltered: number
+  page: number
+  pageSize: number
+  without2fa: number
+}
+
+function toUser(row: UserListRow, siteRoles: Record<string, Role> = {}): UserV3 {
+  return {
+    id: row.public_id,
+    name: row.full_name,
+    email: row.email,
+    username: row.username,
+    role: row.global_role as Role,
+    org: row.org,
+    mfa: row.mfa_confirmed_at ? 'On' : 'Off',
+    status: DB_TO_UI[row.status],
+    lastSeen: row.last_seen_at ? row.last_seen_at.toISOString() : '',
+    siteRoles,
+  }
+}
+
+/**
+ * Lists users with search, role filter, sorting and paging.
+ *
+ * Sorting is done in the application, not in SQL: MySQL's utf8mb4_0900_ai_ci
+ * gets Turkish İ/ı wrong, and section 10 is explicit that the collation stays
+ * out of the database. `Intl.Collator('tr')` is the only place that rule lives.
+ * The row count here is small enough (an internal tenant) that reading the set
+ * and slicing it in memory is honest; if it ever is not, the fix is a generated
+ * sort-key column, not a collation change.
+ */
+export async function listUsers(opts: UserQuery = {}): Promise<UserListResult> {
+  const rows = await query<UserListRow>(LIST_SELECT)
+
+  const totalUnfiltered = rows.length
+  const without2fa = rows.filter((r) => !r.mfa_confirmed_at).length
+
+  const search = opts.search?.trim().toLocaleLowerCase(opts.lang === 'tr' ? 'tr' : 'en') ?? ''
+  const filtered = rows.filter((row) => {
+    if (opts.role && opts.role !== 'All' && row.global_role !== opts.role) return false
+    if (!search) return true
+    const haystack =
+      `${row.full_name} ${row.email} ${row.username} ${row.global_role}`.toLocaleLowerCase(
+        opts.lang === 'tr' ? 'tr' : 'en',
+      )
+    return haystack.includes(search)
+  })
+
+  const compare = collator(opts.lang ?? 'en')
+  const key = opts.sort ?? 'name'
+  const sign = opts.direction === 'desc' ? -1 : 1
+
+  filtered.sort((a, b) => {
+    const pick = (row: UserListRow) =>
+      key === 'email'
+        ? row.email
+        : key === 'username'
+          ? row.username
+          : key === 'role'
+            ? row.global_role
+            : key === 'status'
+              ? row.status
+              : row.full_name
+    return sign * compare.compare(pick(a), pick(b))
+  })
+
+  const pageSize = Math.min(100, Math.max(1, opts.pageSize ?? 10))
+  const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize))
+  const page = Math.min(Math.max(1, opts.page ?? 1), pageCount)
+  const slice = filtered.slice((page - 1) * pageSize, page * pageSize)
+
+  // Site roles and invitations are only loaded for the visible page — the list
+  // shows a badge, not the full assignment set.
+  const users = await Promise.all(
+    slice.map(async (row) => {
+      const user = toUser(row, await siteRolesFor(row.id))
+      return row.status === 'invited'
+        ? { ...user, invitation: await invitationForUser(row.id) }
+        : user
+    }),
+  )
+
+  return { users, total: filtered.length, totalUnfiltered, page, pageSize, without2fa }
+}
+
+export async function siteRolesFor(userId: number): Promise<Record<string, Role>> {
+  const rows = await query<RowDataPacket & { name: string; role: string }>(
+    `SELECT s.name, a.role
+       FROM assignments a
+       JOIN sites s ON s.id = a.site_id
+      WHERE a.user_id = ?`,
+    [userId],
+  )
+  return Object.fromEntries(rows.map((r) => [r.name, r.role as Role]))
+}
+
+export interface UserDetail extends UserV3 {
+  /** Widest permission set the account actually holds, global ∪ site roles. */
+  effectivePermissions: Permission[]
+  isPrimaryAdmin: boolean
+  createdAt: string
+  passwordSetAt: string | null
+  activeSessions: number
+}
+
+export async function getUserDetail(publicId: string): Promise<UserDetail | null> {
+  // Its own SELECT, not LIST_SELECT plus a WHERE: the detail view needs two
+  // columns the list does not, and asserting them onto the list row type is how
+  // `created_at.toISOString()` ends up called on undefined at runtime.
+  const row = await queryOne<UserListRow & { created_at: Date; password_set_at: Date | null }>(
+    `SELECT u.id, u.public_id, u.email, u.username, u.full_name, u.org,
+            u.global_role, u.status, u.last_seen_at, u.created_at, u.password_set_at,
+            tf.confirmed_at AS mfa_confirmed_at
+       FROM users u
+       LEFT JOIN two_factor tf ON tf.user_id = u.id
+      WHERE u.public_id = ?`,
+    [publicId],
+  )
+  if (!row) return null
+
+  const siteRoles = await siteRolesFor(row.id)
+  const granted = new Set<Permission>()
+  for (const name of new Set([row.global_role, ...Object.values(siteRoles)])) {
+    for (const perm of await permissionsForRole(name)) granted.add(perm)
+  }
+
+  const sessions = await queryOne<RowDataPacket & { n: number }>(
+    'SELECT COUNT(*) AS n FROM sessions WHERE user_id = ? AND revoked_at IS NULL AND expires_at > NOW()',
+    [row.id],
+  )
+
+  return {
+    ...toUser(row, siteRoles),
+    invitation: row.status === 'invited' ? await invitationForUser(row.id) : null,
+    effectivePermissions: [...granted],
+    isPrimaryAdmin: row.username === PRIMARY_ADMIN_USERNAME,
+    createdAt: row.created_at.toISOString(),
+    passwordSetAt: row.password_set_at ? row.password_set_at.toISOString() : null,
+    activeSessions: sessions?.n ?? 0,
+  }
+}
+
+export async function findInternalId(publicId: string): Promise<number | null> {
+  const row = await queryOne<RowDataPacket & { id: number }>(
+    'SELECT id FROM users WHERE public_id = ?',
+    [publicId],
+  )
+  return row?.id ?? null
+}
+
+/**
+ * External accounts cap out at Viewer globally (section 08). Real access for a
+ * 3PL partner arrives through site assignments, never through the global role —
+ * so this clamp is applied on write, not merely hidden in the UI.
+ */
+export function clampRole(org: 'internal' | 'external', role: string): string {
+  return org === 'external' && role !== 'Viewer' ? 'Viewer' : role
+}
+
+export interface CreateUserInput {
+  fullName: string
+  username: string
+  email: string
+  role: string
+  org: 'internal' | 'external'
+  siteNames: string[]
+}
+
+/** Creates an invited account plus its site assignments in one transaction. */
+export async function createInvitedUser(
+  input: CreateUserInput,
+  actorId: number,
+): Promise<{ userId: number; publicId: string }> {
+  const publicId = ulid()
+
+  return transaction(async (cx) => {
+    await cx.execute(
+      `INSERT INTO users (public_id, email, username, full_name, org, global_role, status, must_change_password)
+       VALUES (?, ?, ?, ?, ?, ?, 'invited', 1)`,
+      [
+        publicId,
+        input.email,
+        input.username,
+        input.fullName,
+        input.org,
+        clampRole(input.org, input.role),
+      ],
+    )
+
+    const [rows] = await cx.execute<Array<RowDataPacket & { id: number }>>(
+      'SELECT id FROM users WHERE public_id = ?',
+      [publicId],
+    )
+    const userId = rows[0]?.id
+    if (userId === undefined) throw new Error('user row vanished after insert')
+
+    for (const siteName of input.siteNames) {
+      const [siteRows] = await cx.execute<Array<RowDataPacket & { id: number }>>(
+        'SELECT id FROM sites WHERE name = ?',
+        [siteName],
+      )
+      if (!siteRows[0]) continue
+      await cx.execute(
+        `INSERT INTO assignments (user_id, site_id, role, granted_by) VALUES (?, ?, ?, ?)
+         ON DUPLICATE KEY UPDATE role = VALUES(role), granted_by = VALUES(granted_by)`,
+        [userId, siteRows[0].id, clampRole(input.org, input.role), actorId],
+      )
+    }
+
+    return { userId, publicId }
+  })
+}
+
+/** Replaces a user's site assignments wholesale. `null` role means no access. */
+export async function setAssignments(
+  userId: number,
+  org: 'internal' | 'external',
+  siteRoles: Record<string, string | null>,
+  actorId: number,
+): Promise<void> {
+  await transaction(async (cx) => {
+    for (const [siteName, role] of Object.entries(siteRoles)) {
+      const [siteRows] = await cx.execute<Array<RowDataPacket & { id: number }>>(
+        'SELECT id FROM sites WHERE name = ?',
+        [siteName],
+      )
+      const siteId = siteRows[0]?.id
+      if (!siteId) continue
+
+      if (role === null) {
+        await cx.execute('DELETE FROM assignments WHERE user_id = ? AND site_id = ?', [
+          userId,
+          siteId,
+        ])
+        continue
+      }
+      await cx.execute(
+        `INSERT INTO assignments (user_id, site_id, role, granted_by) VALUES (?, ?, ?, ?)
+         ON DUPLICATE KEY UPDATE role = VALUES(role), granted_by = VALUES(granted_by), granted_at = NOW()`,
+        [userId, siteId, clampRole(org, role), actorId],
+      )
+    }
+  })
+}
+
+export async function updateUser(
+  userId: number,
+  patch: {
+    fullName?: string
+    email?: string
+    username?: string
+    role?: string
+    status?: UserStatus
+  },
+  org: 'internal' | 'external',
+): Promise<void> {
+  const sets: string[] = []
+  const params: unknown[] = []
+
+  if (patch.fullName !== undefined) {
+    sets.push('full_name = ?')
+    params.push(patch.fullName)
+  }
+  if (patch.email !== undefined) {
+    sets.push('email = ?')
+    params.push(patch.email.toLowerCase())
+  }
+  if (patch.username !== undefined) {
+    sets.push('username = ?')
+    params.push(patch.username)
+  }
+  if (patch.role !== undefined) {
+    sets.push('global_role = ?')
+    params.push(clampRole(org, patch.role))
+  }
+  if (patch.status !== undefined) {
+    sets.push('status = ?')
+    params.push(UI_TO_DB[patch.status])
+  }
+  if (sets.length === 0) return
+
+  params.push(userId)
+  await exec(`UPDATE users SET ${sets.join(', ')} WHERE id = ?`, params)
+}
+
+export async function deleteUser(userId: number): Promise<void> {
+  // assignments, sessions, invitations, two_factor and recovery_codes all cascade.
+  await exec('DELETE FROM users WHERE id = ?', [userId])
+}
+
+export async function siteNames(): Promise<string[]> {
+  const rows = await query<RowDataPacket & { name: string }>(
+    "SELECT name FROM sites WHERE status <> 'archived' ORDER BY name",
+  )
+  return rows.map((r) => r.name)
+}
diff --git a/apps/editor/panel/migrate.ts b/apps/editor/panel/migrate.ts
new file mode 100644
index 000000000..ff2e9ed14
--- /dev/null
+++ b/apps/editor/panel/migrate.ts
@@ -0,0 +1,160 @@
+/**
+ * Applies every db/migrations/*.sql not yet recorded in schema_migrations.
+ * Creates the database if it is missing, so a fresh MySQL 8 needs no manual step.
+ *
+ *   node --experimental-strip-types scripts/migrate.ts
+ */
+import { readdir, readFile } from 'node:fs/promises'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import mysql from 'mysql2/promise'
+import { loadEnv } from './env'
+
+const HERE = dirname(fileURLToPath(import.meta.url))
+const MIGRATIONS_DIR = join(HERE, 'migrations')
+
+/**
+ * Splits a migration into statements on semicolons that sit outside string
+ * literals, comments and BEGIN...END blocks. Naive `split(';')` breaks on the
+ * functional index in 002, whose CASE expression contains no semicolon but whose
+ * surrounding parentheses matter for readability of the error if it ever does.
+ */
+function splitStatements(sql: string): string[] {
+  const out: string[] = []
+  let buf = ''
+  let quote: string | null = null
+  let lineComment = false
+  let blockComment = false
+
+  for (let i = 0; i < sql.length; i++) {
+    const ch = sql[i]
+    const next = sql[i + 1]
+
+    if (lineComment) {
+      if (ch === '\n') lineComment = false
+      buf += ch
+      continue
+    }
+    if (blockComment) {
+      if (ch === '*' && next === '/') {
+        blockComment = false
+        buf += '*/'
+        i++
+        continue
+      }
+      buf += ch
+      continue
+    }
+    if (quote) {
+      buf += ch
+      if (ch === '\\') {
+        if (next !== undefined) {
+          buf += next
+          i++
+        }
+        continue
+      }
+      if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '-' && next === '-') {
+      lineComment = true
+      buf += '--'
+      i++
+      continue
+    }
+    if (ch === '/' && next === '*') {
+      blockComment = true
+      buf += '/*'
+      i++
+      continue
+    }
+    if (ch === "'" || ch === '"' || ch === '`') {
+      quote = ch
+      buf += ch
+      continue
+    }
+    if (ch === ';') {
+      out.push(buf)
+      buf = ''
+      continue
+    }
+    buf += ch
+  }
+  out.push(buf)
+
+  return out
+    .map((s) =>
+      s
+        .split('\n')
+        .filter((line) => !line.trim().startsWith('--'))
+        .join('\n')
+        .trim(),
+    )
+    .filter((s) => s.length > 0)
+}
+
+async function main() {
+  loadEnv()
+
+  const host = process.env.DATABASE_HOST ?? '127.0.0.1'
+  const port = Number(process.env.DATABASE_PORT ?? 3306)
+  const user = process.env.DATABASE_USER ?? 'root'
+  const password = process.env.DATABASE_PASSWORD ?? ''
+  const database = process.env.DATABASE_NAME ?? 'digitaltwin'
+
+  const bootstrap = await mysql.createConnection({
+    host,
+    port,
+    user,
+    password,
+    multipleStatements: false,
+  })
+  await bootstrap.query(
+    `CREATE DATABASE IF NOT EXISTS \`${database.replace(/`/g, '')}\` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci`,
+  )
+  await bootstrap.end()
+
+  const cx = await mysql.createConnection({ host, port, user, password, database })
+  await cx.query(`
+    CREATE TABLE IF NOT EXISTS schema_migrations (
+      name VARCHAR(190) PRIMARY KEY,
+      applied_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
+  `)
+
+  const [appliedRows] = await cx.query<mysql.RowDataPacket[]>('SELECT name FROM schema_migrations')
+  const applied = new Set(appliedRows.map((r) => r.name as string))
+
+  const files = (await readdir(MIGRATIONS_DIR)).filter((f) => f.endsWith('.sql')).sort()
+  let ran = 0
+
+  for (const file of files) {
+    if (applied.has(file)) continue
+    const sql = await readFile(join(MIGRATIONS_DIR, file), 'utf8')
+    const statements = splitStatements(sql)
+
+    await cx.beginTransaction()
+    try {
+      for (const statement of statements) await cx.query(statement)
+      await cx.query('INSERT INTO schema_migrations (name) VALUES (?)', [file])
+      await cx.commit()
+    } catch (err) {
+      // MySQL 8 commits DDL implicitly, so a rollback here cannot undo half a
+      // migration. Report loudly instead of pretending it was clean.
+      await cx.rollback().catch(() => {})
+      console.error(`\n  ✗ ${file} failed. DDL already executed in this file is NOT rolled back.`)
+      throw err
+    }
+    console.log(`  ✓ ${file} (${statements.length} statements)`)
+    ran++
+  }
+
+  await cx.end()
+  console.log(ran === 0 ? 'Schema already up to date.' : `Applied ${ran} migration(s).`)
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})
diff --git a/apps/editor/panel/migrations/001_init.sql b/apps/editor/panel/migrations/001_init.sql
new file mode 100644
index 000000000..9c0dc32a6
--- /dev/null
+++ b/apps/editor/panel/migrations/001_init.sql
@@ -0,0 +1,171 @@
+-- 001_init — DigitalTwin core schema
+-- Contract: "DigitalTwin Rebuild Plan" section 10 (MySQL 8, InnoDB, utf8mb4).
+-- Two-layer identity: internal BIGINT UNSIGNED PK never leaves the process;
+-- CHAR(26) ULID public_id is the only id that appears in URLs, APIs and logs.
+-- Collation utf8mb4_unicode_ci; Turkish name ordering is done in the app layer
+-- with Intl.Collator('tr') so the I/ı trap never reaches the database.
+-- All timestamps are stored UTC and formatted per locale on display.
+
+CREATE TABLE users (
+  id            BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  public_id     CHAR(26) NOT NULL UNIQUE,
+  email         VARCHAR(320) NOT NULL UNIQUE,
+  username      VARCHAR(64)  NOT NULL UNIQUE,
+  full_name     VARCHAR(160) NOT NULL,
+  org           ENUM('internal','external') NOT NULL DEFAULT 'internal',
+  global_role   VARCHAR(48)  NOT NULL DEFAULT 'Viewer',
+  status        ENUM('invited','active','inactive','suspended') NOT NULL,
+  password_hash VARBINARY(255) NULL,           -- argon2id; NULL while invited
+  password_set_at   TIMESTAMP NULL,
+  must_change_password TINYINT(1) NOT NULL DEFAULT 0,
+  failed_attempts   TINYINT UNSIGNED NOT NULL DEFAULT 0,
+  locked_until      TIMESTAMP NULL,
+  last_seen_at      TIMESTAMP NULL,
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  KEY idx_users_status (status), KEY idx_users_org (org)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE sites (
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  public_id CHAR(26) NOT NULL UNIQUE,
+  name VARCHAR(120) NOT NULL UNIQUE,            -- 'Sakarya LM1'
+  status ENUM('active','setup','archived') NOT NULL DEFAULT 'setup',
+  storage_slots INT UNSIGNED NULL, picking_slots INT UNSIGNED NULL,
+  footprint_m2  INT UNSIGNED NULL,
+  created_by BIGINT UNSIGNED NOT NULL,
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_sites_creator FOREIGN KEY (created_by) REFERENCES users(id)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE assignments (                       -- user x site x role
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  user_id BIGINT UNSIGNED NOT NULL,
+  site_id BIGINT UNSIGNED NOT NULL,
+  role VARCHAR(48) NOT NULL,
+  granted_by BIGINT UNSIGNED NOT NULL,
+  granted_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  UNIQUE KEY uq_user_site (user_id, site_id),
+  CONSTRAINT fk_asg_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_asg_site FOREIGN KEY (site_id) REFERENCES sites(id) ON DELETE CASCADE,
+  CONSTRAINT fk_asg_by   FOREIGN KEY (granted_by) REFERENCES users(id)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE invitations (                       -- invite lifecycle
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  public_id CHAR(26) NOT NULL UNIQUE,
+  user_id BIGINT UNSIGNED NOT NULL,
+  token_hash BINARY(32) NOT NULL UNIQUE,         -- SHA-256; raw token only in the email
+  invited_by BIGINT UNSIGNED NOT NULL,
+  expires_at TIMESTAMP NOT NULL,                 -- default +7 days
+  resent_count TINYINT UNSIGNED NOT NULL DEFAULT 0,
+  accepted_at TIMESTAMP NULL, revoked_at TIMESTAMP NULL,
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  KEY idx_inv_user (user_id),
+  CONSTRAINT fk_inv_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_inv_by   FOREIGN KEY (invited_by) REFERENCES users(id)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE sessions (
+  id BINARY(16) PRIMARY KEY,                     -- random 128 bit
+  user_id BIGINT UNSIGNED NOT NULL,
+  device VARCHAR(160) NULL, ip VARBINARY(16) NULL,
+  trusted_until TIMESTAMP NULL,                  -- trusted device
+  keep_signed_in TINYINT(1) NOT NULL DEFAULT 0,
+  mfa_pending TINYINT(1) NOT NULL DEFAULT 0,     -- set until the OTP step clears
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  last_activity_at TIMESTAMP NOT NULL,
+  expires_at TIMESTAMP NOT NULL,
+  revoked_at TIMESTAMP NULL,
+  KEY idx_sess_user (user_id), KEY idx_sess_exp (expires_at),
+  CONSTRAINT fk_sess_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE two_factor (
+  user_id BIGINT UNSIGNED PRIMARY KEY,
+  totp_secret VARBINARY(255) NOT NULL,           -- encrypted in the app layer
+  confirmed_at TIMESTAMP NULL,
+  CONSTRAINT fk_2fa_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE recovery_codes (
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  user_id BIGINT UNSIGNED NOT NULL,
+  code_hash BINARY(32) NOT NULL,
+  used_at TIMESTAMP NULL,
+  KEY idx_rc_user (user_id),
+  CONSTRAINT fk_rc_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE api_keys (
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  public_id CHAR(26) NOT NULL UNIQUE,
+  name VARCHAR(120) NOT NULL,
+  prefix CHAR(8) NOT NULL,                       -- the part shown in the list
+  key_hash BINARY(32) NOT NULL UNIQUE,           -- raw key returned once, at creation
+  scope ENUM('read','read_write') NOT NULL DEFAULT 'read',
+  site_id BIGINT UNSIGNED NULL,                  -- NULL = all sites
+  created_by BIGINT UNSIGNED NOT NULL,
+  last_used_at TIMESTAMP NULL, revoked_at TIMESTAMP NULL,
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_key_site FOREIGN KEY (site_id) REFERENCES sites(id) ON DELETE CASCADE,
+  CONSTRAINT fk_key_by FOREIGN KEY (created_by) REFERENCES users(id)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE webhooks (
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  public_id CHAR(26) NOT NULL UNIQUE,
+  url VARCHAR(2048) NOT NULL,
+  events JSON NOT NULL,                          -- ['user.invited','site.created',...]
+  secret VARBINARY(255) NOT NULL,                -- signing secret, encrypted
+  status ENUM('active','paused','failing') NOT NULL DEFAULT 'active',
+  fail_count INT UNSIGNED NOT NULL DEFAULT 0,
+  last_delivery_at TIMESTAMP NULL,
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE jobs (                              -- job queue
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  public_id CHAR(26) NOT NULL UNIQUE,
+  kind VARCHAR(64) NOT NULL,                     -- ifc_import, report_export, backup...
+  payload JSON NULL,
+  site_id BIGINT UNSIGNED NULL,
+  status ENUM('queued','running','done','failed','cancelled') NOT NULL DEFAULT 'queued',
+  progress TINYINT UNSIGNED NOT NULL DEFAULT 0,
+  error_text TEXT NULL,
+  attempts TINYINT UNSIGNED NOT NULL DEFAULT 0,
+  queued_by BIGINT UNSIGNED NOT NULL,
+  queued_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  started_at TIMESTAMP NULL, finished_at TIMESTAMP NULL,
+  KEY idx_jobs_status (status, queued_at),
+  CONSTRAINT fk_jobs_site FOREIGN KEY (site_id) REFERENCES sites(id) ON DELETE SET NULL,
+  CONSTRAINT fk_jobs_by FOREIGN KEY (queued_by) REFERENCES users(id)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE audit_log (
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  actor_user_id BIGINT UNSIGNED NULL,            -- NULL = system / browser
+  actor_label VARCHAR(64) NOT NULL,              -- 'system', 'browser', email
+  level ENUM('info','warn','error') NOT NULL,
+  kind VARCHAR(48) NULL,                         -- auth, role_change, invite...
+  message VARCHAR(1024) NOT NULL,
+  meta JSON NULL,
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  KEY idx_audit_time (created_at), KEY idx_audit_actor (actor_label),
+  CONSTRAINT fk_audit_user FOREIGN KEY (actor_user_id) REFERENCES users(id) ON DELETE SET NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE settings (                          -- single-row org settings
+  id TINYINT UNSIGNED PRIMARY KEY DEFAULT 1,
+  session_minutes SMALLINT UNSIGNED NOT NULL DEFAULT 20,
+  keep_signed_in_allowed TINYINT(1) NOT NULL DEFAULT 1,
+  keep_signed_in_days TINYINT UNSIGNED NOT NULL DEFAULT 14,
+  trusted_device_days TINYINT UNSIGNED NOT NULL DEFAULT 30,
+  concurrent_session_limit TINYINT UNSIGNED NOT NULL DEFAULT 3,
+  mfa_required TINYINT(1) NOT NULL DEFAULT 1,
+  sso_enforced_domains JSON NULL,                -- ['@netlog.com.tr']
+  external_users_allowed TINYINT(1) NOT NULL DEFAULT 1,
+  invite_expiry_days TINYINT UNSIGNED NOT NULL DEFAULT 7,
+  updated_by BIGINT UNSIGNED NULL,
+  updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
diff --git a/apps/editor/panel/migrations/002_roles_and_requests.sql b/apps/editor/panel/migrations/002_roles_and_requests.sql
new file mode 100644
index 000000000..21acaa792
--- /dev/null
+++ b/apps/editor/panel/migrations/002_roles_and_requests.sql
@@ -0,0 +1,50 @@
+-- 002_roles_and_requests
+--
+-- Two additions on top of the contract's 12 tables. Both are called for by the
+-- document but left without a DDL block there, so they are kept in their own
+-- migration rather than smuggled into 001.
+--
+--   roles            — section 10 closing note: "system roles (Admin, Editor,
+--                      Viewer) are constants in code; custom roles can move into
+--                      roles(name, permissions JSON)". This is the counterpart of
+--                      the prototype's `perms` dictionary and backs the Roles tab.
+--   access_requests  — the `#/request` screen (section 03, "Account request") and
+--                      the request -> invite loop (WP7) need somewhere to park a
+--                      self-service request until an administrator approves it.
+--                      Approval writes users + invitations; this table only holds
+--                      the pending ask.
+
+CREATE TABLE roles (
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  name VARCHAR(48) NOT NULL UNIQUE,
+  permissions JSON NOT NULL,                     -- ['view_projects','edit_users',...]
+  is_system TINYINT(1) NOT NULL DEFAULT 0,       -- system roles cannot be deleted
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE access_requests (
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  public_id CHAR(26) NOT NULL UNIQUE,
+  full_name VARCHAR(160) NOT NULL,
+  email VARCHAR(320) NOT NULL,
+  username VARCHAR(64) NOT NULL,
+  department VARCHAR(64) NOT NULL,
+  requested_role VARCHAR(48) NOT NULL,
+  note VARCHAR(1024) NULL,
+  status ENUM('pending','approved','rejected') NOT NULL DEFAULT 'pending',
+  decided_by BIGINT UNSIGNED NULL,
+  decided_at TIMESTAMP NULL,
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  KEY idx_req_status (status, created_at),
+  CONSTRAINT fk_req_decider FOREIGN KEY (decided_by) REFERENCES users(id) ON DELETE SET NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- One pending request per address; a rejected/approved row must not block a
+-- retry. Written as a generated column + unique prefix key rather than a
+-- functional index: MariaDB (what shared hosting runs) has no expression
+-- indexes, and the 191 prefix keeps the key under the 767-byte row cap.
+ALTER TABLE access_requests
+  ADD COLUMN pending_email VARCHAR(320)
+    GENERATED ALWAYS AS (CASE WHEN status = 'pending' THEN email ELSE NULL END) STORED,
+  ADD UNIQUE KEY uq_req_pending_email (pending_email(191));
diff --git a/apps/editor/panel/migrations/003_password_resets.sql b/apps/editor/panel/migrations/003_password_resets.sql
new file mode 100644
index 000000000..7b7068b0c
--- /dev/null
+++ b/apps/editor/panel/migrations/003_password_resets.sql
@@ -0,0 +1,22 @@
+-- 003_password_resets
+--
+-- Section 08 lists `reset` among the step-4 endpoints but section 10 has no
+-- table behind it. The `invitations` table is the obvious near-fit — same
+-- token_hash / expires_at / user_id shape — but its columns mean invite things
+-- (resent_count, accepted_at) and overloading them would make "how many invites
+-- are pending" unanswerable. A reset link is its own object, so it gets its own
+-- table with the same hashing discipline: SHA-256 stored, raw token only ever in
+-- the email.
+
+CREATE TABLE password_resets (
+  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+  user_id BIGINT UNSIGNED NOT NULL,
+  token_hash BINARY(32) NOT NULL UNIQUE,
+  expires_at TIMESTAMP NOT NULL,             -- 30 minutes, per the reset screen copy
+  used_at TIMESTAMP NULL,
+  requested_ip VARBINARY(16) NULL,
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  KEY idx_pwr_user (user_id),
+  KEY idx_pwr_expiry (expires_at),
+  CONSTRAINT fk_pwr_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
diff --git a/apps/editor/panel/migrations/004_site_scene.sql b/apps/editor/panel/migrations/004_site_scene.sql
new file mode 100644
index 000000000..8fd970e8c
--- /dev/null
+++ b/apps/editor/panel/migrations/004_site_scene.sql
@@ -0,0 +1,4 @@
+-- A site is represented in the editor by a 3D scene. The column stays NULL in
+-- a standalone console deployment (nothing there creates scenes); in the
+-- combined app the editor's site-scene worker fills it in after provisioning.
+ALTER TABLE sites ADD COLUMN scene_id VARCHAR(64) NULL;
diff --git a/apps/editor/panel/migrations/005_user_locale.sql b/apps/editor/panel/migrations/005_user_locale.sql
new file mode 100644
index 000000000..813ee203a
--- /dev/null
+++ b/apps/editor/panel/migrations/005_user_locale.sql
@@ -0,0 +1,7 @@
+-- Which language to write to a person in.
+--
+-- The console already renders in English or Turkish per reader, but mail is
+-- composed with nobody present to ask — so the preference has to be stored.
+-- It is recorded from the reader's own cookie when they sign in, which keeps
+-- it true without anyone having to maintain it.
+ALTER TABLE users ADD COLUMN locale VARCHAR(5) NOT NULL DEFAULT 'en';
diff --git a/apps/editor/panel/migrations/006_provenance_survives_deletion.sql b/apps/editor/panel/migrations/006_provenance_survives_deletion.sql
new file mode 100644
index 000000000..b6c89dc1e
--- /dev/null
+++ b/apps/editor/panel/migrations/006_provenance_survives_deletion.sql
@@ -0,0 +1,37 @@
+-- Deleting a user must not be blocked by what they once did.
+--
+-- Five columns record who performed an action — created a site, granted an
+-- assignment, sent an invitation, created an API key, queued a job. All five
+-- were NOT NULL with a bare FOREIGN KEY, whose default rule is RESTRICT: the
+-- moment an account had created anything, DELETE FROM users failed with a
+-- constraint error the UI could only report as "something went wrong".
+--
+-- Provenance is history, not ownership. The site outlives its creator; the
+-- record of *who* becomes NULL, exactly as audit_log.actor_user_id already
+-- does. (The readers were flipped to LEFT JOIN in the same change, so rows
+-- with a deleted actor keep appearing in every list.)
+
+ALTER TABLE sites DROP FOREIGN KEY fk_sites_creator;
+ALTER TABLE sites MODIFY created_by BIGINT UNSIGNED NULL;
+ALTER TABLE sites ADD CONSTRAINT fk_sites_creator
+  FOREIGN KEY (created_by) REFERENCES users(id) ON DELETE SET NULL;
+
+ALTER TABLE assignments DROP FOREIGN KEY fk_asg_by;
+ALTER TABLE assignments MODIFY granted_by BIGINT UNSIGNED NULL;
+ALTER TABLE assignments ADD CONSTRAINT fk_asg_by
+  FOREIGN KEY (granted_by) REFERENCES users(id) ON DELETE SET NULL;
+
+ALTER TABLE invitations DROP FOREIGN KEY fk_inv_by;
+ALTER TABLE invitations MODIFY invited_by BIGINT UNSIGNED NULL;
+ALTER TABLE invitations ADD CONSTRAINT fk_inv_by
+  FOREIGN KEY (invited_by) REFERENCES users(id) ON DELETE SET NULL;
+
+ALTER TABLE api_keys DROP FOREIGN KEY fk_key_by;
+ALTER TABLE api_keys MODIFY created_by BIGINT UNSIGNED NULL;
+ALTER TABLE api_keys ADD CONSTRAINT fk_key_by
+  FOREIGN KEY (created_by) REFERENCES users(id) ON DELETE SET NULL;
+
+ALTER TABLE jobs DROP FOREIGN KEY fk_jobs_by;
+ALTER TABLE jobs MODIFY queued_by BIGINT UNSIGNED NULL;
+ALTER TABLE jobs ADD CONSTRAINT fk_jobs_by
+  FOREIGN KEY (queued_by) REFERENCES users(id) ON DELETE SET NULL;
diff --git a/apps/editor/panel/migrations/007_indexes_for_the_hot_paths.sql b/apps/editor/panel/migrations/007_indexes_for_the_hot_paths.sql
new file mode 100644
index 000000000..276d3a0a5
--- /dev/null
+++ b/apps/editor/panel/migrations/007_indexes_for_the_hot_paths.sql
@@ -0,0 +1,44 @@
+-- Indexes for the three lookups that run on pages everyone opens.
+--
+-- `sites.scene_id` was added by 004 with no index, so `publishedSceneIds()`
+-- and `unpublishScene()` — which run on the console's scenes tab, on every
+-- publish and on every scene delete — scan the whole table. It is also the
+-- column the sign-in showcase joins on.
+--
+-- `users.created_at` is the ORDER BY of the account list and had no index, so
+-- every listing filesorted the table.
+--
+-- `audit_log.created_at` orders the audit trail, which is the fastest-growing
+-- table in the schema and the one most likely to be read with a LIMIT.
+--
+-- CREATE INDEX is not idempotent on MariaDB 10.11 (no IF NOT EXISTS for
+-- indexes in every version), so each one is guarded against information_schema
+-- and executed only when missing. The runner splits on semicolons outside
+-- strings, so each guard is one statement.
+
+SET @sql := IF(
+  (SELECT COUNT(*) FROM information_schema.STATISTICS
+    WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = 'sites' AND INDEX_NAME = 'idx_sites_scene') = 0,
+  'ALTER TABLE sites ADD KEY idx_sites_scene (scene_id)',
+  'DO 0');
+PREPARE stmt FROM @sql;
+EXECUTE stmt;
+DEALLOCATE PREPARE stmt;
+
+SET @sql := IF(
+  (SELECT COUNT(*) FROM information_schema.STATISTICS
+    WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = 'users' AND INDEX_NAME = 'idx_users_created') = 0,
+  'ALTER TABLE users ADD KEY idx_users_created (created_at)',
+  'DO 0');
+PREPARE stmt FROM @sql;
+EXECUTE stmt;
+DEALLOCATE PREPARE stmt;
+
+SET @sql := IF(
+  (SELECT COUNT(*) FROM information_schema.STATISTICS
+    WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = 'audit_log' AND INDEX_NAME = 'idx_audit_created') = 0,
+  'ALTER TABLE audit_log ADD KEY idx_audit_created (created_at)',
+  'DO 0');
+PREPARE stmt FROM @sql;
+EXECUTE stmt;
+DEALLOCATE PREPARE stmt;
diff --git a/apps/editor/panel/seed.ts b/apps/editor/panel/seed.ts
new file mode 100644
index 000000000..9e1dc2944
--- /dev/null
+++ b/apps/editor/panel/seed.ts
@@ -0,0 +1,169 @@
+/**
+ * Seeds the acceptance baseline named in the handover order, step 1:
+ * "1 admin, 3 sites, the single settings row" — plus the three system roles,
+ * which the Roles tab reads and which no other step creates.
+ *
+ *   node --experimental-strip-types scripts/seed.ts
+ *   node --experimental-strip-types scripts/seed.ts --dev   # + the two supervisors
+ *
+ * Idempotent: every insert is guarded, so re-running never duplicates a row.
+ */
+
+import { hash as argon2Hash } from '@node-rs/argon2'
+import mysql from 'mysql2/promise'
+import { ulid } from 'ulid'
+import { loadEnv } from './env'
+
+const ARGON2ID = 2
+const ARGON2_OPTS = { algorithm: ARGON2ID, memoryCost: 19456, timeCost: 2, parallelism: 1 } as const
+
+const PERMISSIONS = [
+  'admin_access',
+  'edit_projects',
+  'create_projects',
+  'delete_projects',
+  'access_settings',
+  'view_projects',
+  'edit_users',
+  'edit_roles',
+  'view_logs',
+] as const
+
+const SYSTEM_ROLES: Array<{ name: string; permissions: string[] }> = [
+  { name: 'Admin', permissions: [...PERMISSIONS] },
+  {
+    name: 'Editor',
+    permissions: [
+      'edit_projects',
+      'create_projects',
+      'delete_projects',
+      'access_settings',
+      'view_projects',
+    ],
+  },
+  { name: 'Viewer', permissions: ['view_projects'] },
+]
+
+// Figures lifted from the prototype's SITES constant. The contract asks for
+// three; the remaining two (Torbalı CX, Kocaeli LM2) are created in the console.
+const SITES = [
+  { name: 'Sakarya LM1', status: 'active', storage: 12480, picking: 1840, footprint: 42000 },
+  { name: 'Esenyurt DC2', status: 'active', storage: 8120, picking: 2260, footprint: 28400 },
+  { name: 'Gebze LM3', status: 'setup', storage: 19650, picking: 1120, footprint: 61800 },
+] as const
+
+const DEV_USERS = [
+  {
+    name: 'Resul Övür',
+    username: 'r.ovur',
+    email: 'resul.ovur@netlog.com.tr',
+    password: 'ro12345',
+  },
+  {
+    name: 'Cengiz Tuna',
+    username: 'c.tuna',
+    email: 'cengiz.tuna@netlog.com.tr',
+    password: 'ct12345',
+  },
+] as const
+
+async function main() {
+  loadEnv()
+  const withDev = process.argv.includes('--dev')
+
+  const cx = await mysql.createConnection({
+    host: process.env.DATABASE_HOST ?? '127.0.0.1',
+    port: Number(process.env.DATABASE_PORT ?? 3306),
+    user: process.env.DATABASE_USER ?? 'root',
+    password: process.env.DATABASE_PASSWORD ?? '',
+    database: process.env.DATABASE_NAME ?? 'digitaltwin',
+    charset: 'utf8mb4_unicode_ci',
+    timezone: 'Z',
+  })
+
+  for (const role of SYSTEM_ROLES) {
+    await cx.execute(
+      `INSERT INTO roles (name, permissions, is_system) VALUES (?, ?, 1)
+       ON DUPLICATE KEY UPDATE permissions = VALUES(permissions), is_system = 1`,
+      [role.name, JSON.stringify(role.permissions)],
+    )
+  }
+  console.log(`  ✓ roles (${SYSTEM_ROLES.map((r) => r.name).join(', ')})`)
+
+  // The prototype signs the primary admin in as username `Admin` with no email
+  // address. The schema makes email NOT NULL UNIQUE and the document wins over
+  // the prototype, so the account carries the old panel's protected address.
+  // The password is a bootstrap credential: must_change_password forces the
+  // first sign-in through /welcome before anything else is reachable.
+  const adminUsername = process.env.SEED_ADMIN_USERNAME ?? 'Admin'
+  const adminEmail = process.env.SEED_ADMIN_EMAIL ?? 'admin@netlog.com.tr'
+  const adminPassword = process.env.SEED_ADMIN_PASSWORD ?? 'Admin'
+  const adminHash = await argon2Hash(adminPassword, ARGON2_OPTS)
+
+  await cx.execute(
+    `INSERT INTO users (public_id, email, username, full_name, org, global_role, status,
+                        password_hash, password_set_at, must_change_password)
+     VALUES (?, ?, ?, ?, 'internal', 'Admin', 'active', ?, NOW(), 1)
+     ON DUPLICATE KEY UPDATE id = id`,
+    [ulid(), adminEmail, adminUsername, 'System Administrator', Buffer.from(adminHash, 'utf8')],
+  )
+
+  const [adminRows] = await cx.execute<mysql.RowDataPacket[]>(
+    'SELECT id FROM users WHERE username = ?',
+    [adminUsername],
+  )
+  const adminId = adminRows[0]?.id as number | undefined
+  if (!adminId) throw new Error('admin seed did not resolve an id')
+  console.log(
+    `  ✓ admin (${adminUsername} / ${adminEmail}) — must change password on first sign-in`,
+  )
+
+  for (const site of SITES) {
+    await cx.execute(
+      `INSERT INTO sites (public_id, name, status, storage_slots, picking_slots, footprint_m2, created_by)
+       VALUES (?, ?, ?, ?, ?, ?, ?)
+       ON DUPLICATE KEY UPDATE id = id`,
+      [ulid(), site.name, site.status, site.storage, site.picking, site.footprint, adminId],
+    )
+  }
+  console.log(`  ✓ sites (${SITES.map((s) => s.name).join(', ')})`)
+
+  // sso_enforced_domains starts empty on purpose. The DDL comment shows the
+  // shape (['@netlog.com.tr']), not a default — seeding the domain would switch
+  // password sign-in off for the whole organisation before anyone can sign in.
+  await cx.execute(
+    `INSERT INTO settings (id, sso_enforced_domains, updated_by)
+     VALUES (1, '[]', ?)
+     ON DUPLICATE KEY UPDATE id = id`,
+    [adminId],
+  )
+  console.log('  ✓ settings (single row, defaults from section 10)')
+
+  if (withDev) {
+    for (const user of DEV_USERS) {
+      const pwd = await argon2Hash(user.password, ARGON2_OPTS)
+      await cx.execute(
+        `INSERT INTO users (public_id, email, username, full_name, org, global_role, status,
+                            password_hash, password_set_at, must_change_password)
+         VALUES (?, ?, ?, ?, 'internal', 'Supervisor', 'active', ?, NOW(), 1)
+         ON DUPLICATE KEY UPDATE id = id`,
+        [ulid(), user.email, user.username, user.name, Buffer.from(pwd, 'utf8')],
+      )
+    }
+    console.log(`  ✓ dev users (${DEV_USERS.map((u) => u.username).join(', ')})`)
+  }
+
+  await cx.execute(
+    `INSERT INTO audit_log (actor_user_id, actor_label, level, kind, message)
+     VALUES (?, 'system', 'info', 'seed', ?)`,
+    [adminId, withDev ? 'Database seeded (with dev users)' : 'Database seeded'],
+  )
+
+  await cx.end()
+  console.log('\nSeed complete.')
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})
diff --git a/apps/editor/public/.gitignore b/apps/editor/public/.gitignore
new file mode 100644
index 000000000..681508c03
--- /dev/null
+++ b/apps/editor/public/.gitignore
@@ -0,0 +1,4 @@
+# Copied from node_modules/web-ifc/ by scripts/copy-web-ifc-wasm.mjs
+# (runs on predev / prebuild).
+web-ifc.wasm
+web-ifc-mt.wasm
diff --git a/apps/editor/public/brand/digitaltwin-mark-small.png b/apps/editor/public/brand/digitaltwin-mark-small.png
new file mode 100644
index 000000000..585d87eba
Binary files /dev/null and b/apps/editor/public/brand/digitaltwin-mark-small.png differ
diff --git a/apps/editor/public/brand/digitaltwin-mark.png b/apps/editor/public/brand/digitaltwin-mark.png
new file mode 100644
index 000000000..f91985097
Binary files /dev/null and b/apps/editor/public/brand/digitaltwin-mark.png differ
diff --git a/apps/editor/public/pascal-logo-full.svg b/apps/editor/public/pascal-logo-full.svg
deleted file mode 100644
index 313883578..000000000
--- a/apps/editor/public/pascal-logo-full.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="498" height="100" viewBox="0 0 498 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M498 8V99.648H486.084V8H498Z" fill="black"/>
-<path d="M435.895 99.56C429.074 99.56 423.591 97.768 419.446 94.184C415.302 90.6 413.229 86.0347 413.229 80.488C413.229 68.5413 421.691 61.928 438.615 60.648L457.525 59.24V57.192C457.525 52.84 456.1 49.4267 453.251 46.952C450.402 44.392 446.689 43.112 442.112 43.112H441.594C437.795 43.112 434.514 44.008 431.751 45.8C429.074 47.5067 427.39 49.8533 426.699 52.84H414.654C415.518 47.0373 418.41 42.3013 423.332 38.632C428.34 34.8773 434.6 33 442.112 33C451.006 33 457.827 35.304 462.576 39.912C467.325 44.52 469.7 50.4507 469.7 57.704V84.2C469.7 90.6 469.916 95.2933 470.348 98.28H458.95C458.691 97 458.475 95.4213 458.302 93.544C458.216 91.5813 458.173 89.96 458.173 88.68C456.273 91.6667 453.337 94.2267 449.365 96.36C445.393 98.4933 440.903 99.56 435.895 99.56ZM438.356 89.448C441.465 89.448 444.487 88.7653 447.423 87.4C450.358 86.0347 452.776 83.9867 454.676 81.256C456.575 78.5253 457.525 75.24 457.525 71.4V68.584L440.169 69.736C435.248 70.0773 431.535 71.144 429.031 72.936C426.527 74.6427 425.275 76.9893 425.275 79.976C425.275 82.7067 426.397 84.968 428.642 86.76C430.974 88.552 434.039 89.448 437.838 89.448H438.356Z" fill="black"/>
-<path d="M376.049 99.816C366.637 99.816 358.823 96.6587 352.606 90.344C346.475 83.8587 343.41 75.88 343.41 66.408C343.41 56.7653 346.475 48.7867 352.606 42.472C358.823 36.1573 366.637 33 376.049 33C382.525 33 388.181 34.6213 393.016 37.864C397.852 41.0213 401.478 45.416 403.896 51.048L393.016 55.528C389.649 47.6773 383.734 43.752 375.272 43.752C369.832 43.752 365.126 45.928 361.154 50.28C357.269 54.632 355.326 60.008 355.326 66.408C355.326 72.808 357.269 78.184 361.154 82.536C365.126 86.888 369.832 89.064 375.272 89.064C383.993 89.064 390.124 85.1387 393.664 77.288L404.284 81.768C401.953 87.4 398.283 91.8373 393.275 95.08C388.353 98.2373 382.611 99.816 376.049 99.816Z" fill="black"/>
-<path d="M334.4 80.36C334.4 85.8213 331.983 90.4293 327.147 94.184C322.312 97.9387 316.224 99.816 308.885 99.816C302.495 99.816 296.883 98.1947 292.047 94.952C287.212 91.624 283.758 87.272 281.686 81.896L292.307 77.416C293.861 81.1707 296.106 84.1147 299.042 86.248C302.064 88.296 305.345 89.32 308.885 89.32C312.684 89.32 315.836 88.5093 318.34 86.888C320.93 85.2667 322.226 83.3467 322.226 81.128C322.226 77.1173 319.117 74.1733 312.9 72.296L302.021 69.608C289.673 66.536 283.499 60.648 283.499 51.944C283.499 46.2267 285.831 41.6613 290.493 38.248C295.242 34.7493 301.287 33 308.626 33C314.239 33 319.29 34.3227 323.78 36.968C328.356 39.6133 331.551 43.1547 333.364 47.592L322.744 51.944C321.535 49.2987 319.549 47.2507 316.786 45.8C314.109 44.264 311.087 43.496 307.719 43.496C304.611 43.496 301.805 44.264 299.301 45.8C296.883 47.336 295.674 49.2133 295.674 51.432C295.674 55.016 299.085 57.576 305.906 59.112L315.491 61.544C328.097 64.616 334.4 70.888 334.4 80.36Z" fill="black"/>
-<path d="M237.568 99.56C230.747 99.56 225.264 97.768 221.119 94.184C216.975 90.6 214.902 86.0347 214.902 80.488C214.902 68.5413 223.364 61.928 240.288 60.648L259.198 59.24V57.192C259.198 52.84 257.773 49.4267 254.924 46.952C252.075 44.392 248.362 43.112 243.785 43.112H243.267C239.468 43.112 236.187 44.008 233.424 45.8C230.747 47.5067 229.063 49.8533 228.372 52.84H216.327C217.191 47.0373 220.083 42.3013 225.005 38.632C230.013 34.8773 236.273 33 243.785 33C252.679 33 259.5 35.304 264.249 39.912C268.998 44.52 271.373 50.4507 271.373 57.704V84.2C271.373 90.6 271.589 95.2933 272.021 98.28H260.623C260.364 97 260.148 95.4213 259.975 93.544C259.889 91.5813 259.846 89.96 259.846 88.68C257.946 91.6667 255.01 94.2267 251.038 96.36C247.066 98.4933 242.576 99.56 237.568 99.56ZM240.029 89.448C243.138 89.448 246.16 88.7653 249.096 87.4C252.031 86.0347 254.449 83.9867 256.349 81.256C258.248 78.5253 259.198 75.24 259.198 71.4V68.584L241.842 69.736C236.921 70.0773 233.208 71.144 230.704 72.936C228.2 74.6427 226.948 76.9893 226.948 79.976C226.948 82.7067 228.07 84.968 230.315 86.76C232.647 88.552 235.712 89.448 239.511 89.448H240.029Z" fill="black"/>
-<path d="M138 0H181.473C187.869 0 193.566 1.19048 198.562 3.57143C203.659 5.85715 207.657 9.28572 210.555 13.8571C213.453 18.3333 214.902 23.7143 214.902 30C214.902 36.2857 213.453 41.7143 210.555 46.2857C207.657 50.7619 203.659 54.1905 198.562 56.5714C193.566 58.8571 187.869 60 181.473 60H151.492V100H138V0ZM179.224 48.2857C186.22 48.2857 191.667 46.7619 195.564 43.7143C199.462 40.5714 201.411 36 201.411 30C201.411 24 199.462 19.4762 195.564 16.4286C191.667 13.2857 186.22 11.7143 179.224 11.7143H151.492V48.2857H179.224Z" fill="black"/>
-<rect y="60" width="20" height="40" fill="black"/>
-<rect x="40" y="30" width="20" height="40" fill="black"/>
-<rect x="80" width="20" height="40" fill="black"/>
-</svg>
diff --git a/apps/editor/public/pascal-logo-shape.svg b/apps/editor/public/pascal-logo-shape.svg
deleted file mode 100644
index 94b8e41e6..000000000
--- a/apps/editor/public/pascal-logo-shape.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="60" width="20" height="40" fill="black"/>
-<rect x="40" y="30" width="20" height="40" fill="black"/>
-<rect x="80" width="20" height="40" fill="black"/>
-</svg>
diff --git a/apps/editor/public/pascal.svg b/apps/editor/public/pascal.svg
deleted file mode 100644
index c50259df1..000000000
--- a/apps/editor/public/pascal.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="360" height="100" viewBox="0 0 360 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M360 8V99.648H348.084V8H360Z" fill="black"/>
-<path d="M297.895 99.56C291.074 99.56 285.591 97.768 281.446 94.184C277.302 90.6 275.229 86.0347 275.229 80.488C275.229 68.5413 283.691 61.928 300.615 60.648L319.525 59.24V57.192C319.525 52.84 318.1 49.4267 315.251 46.952C312.402 44.392 308.689 43.112 304.112 43.112H303.594C299.795 43.112 296.514 44.008 293.751 45.8C291.074 47.5067 289.39 49.8533 288.699 52.84H276.654C277.518 47.0373 280.41 42.3013 285.332 38.632C290.34 34.8773 296.6 33 304.112 33C313.006 33 319.827 35.304 324.576 39.912C329.325 44.52 331.7 50.4507 331.7 57.704V84.2C331.7 90.6 331.916 95.2933 332.348 98.28H320.95C320.691 97 320.475 95.4213 320.302 93.544C320.216 91.5813 320.173 89.96 320.173 88.68C318.273 91.6667 315.337 94.2267 311.365 96.36C307.393 98.4933 302.903 99.56 297.895 99.56ZM300.356 89.448C303.465 89.448 306.487 88.7653 309.423 87.4C312.358 86.0347 314.776 83.9867 316.676 81.256C318.575 78.5253 319.525 75.24 319.525 71.4V68.584L302.169 69.736C297.248 70.0773 293.535 71.144 291.031 72.936C288.527 74.6427 287.275 76.9893 287.275 79.976C287.275 82.7067 288.397 84.968 290.642 86.76C292.974 88.552 296.039 89.448 299.838 89.448H300.356Z" fill="black"/>
-<path d="M238.049 99.816C228.637 99.816 220.823 96.6587 214.606 90.344C208.475 83.8587 205.41 75.88 205.41 66.408C205.41 56.7653 208.475 48.7867 214.606 42.472C220.823 36.1573 228.637 33 238.049 33C244.525 33 250.181 34.6213 255.016 37.864C259.852 41.0213 263.478 45.416 265.896 51.048L255.016 55.528C251.649 47.6773 245.734 43.752 237.272 43.752C231.832 43.752 227.126 45.928 223.154 50.28C219.269 54.632 217.326 60.008 217.326 66.408C217.326 72.808 219.269 78.184 223.154 82.536C227.126 86.888 231.832 89.064 237.272 89.064C245.993 89.064 252.124 85.1387 255.664 77.288L266.284 81.768C263.953 87.4 260.283 91.8373 255.275 95.08C250.353 98.2373 244.611 99.816 238.049 99.816Z" fill="black"/>
-<path d="M196.4 80.36C196.4 85.8213 193.983 90.4293 189.147 94.184C184.312 97.9387 178.224 99.816 170.885 99.816C164.495 99.816 158.883 98.1947 154.047 94.952C149.212 91.624 145.758 87.272 143.686 81.896L154.307 77.416C155.861 81.1707 158.106 84.1147 161.042 86.248C164.064 88.296 167.345 89.32 170.885 89.32C174.684 89.32 177.836 88.5093 180.34 86.888C182.93 85.2667 184.226 83.3467 184.226 81.128C184.226 77.1173 181.117 74.1733 174.9 72.296L164.021 69.608C151.673 66.536 145.499 60.648 145.499 51.944C145.499 46.2267 147.831 41.6613 152.493 38.248C157.242 34.7493 163.287 33 170.626 33C176.239 33 181.29 34.3227 185.78 36.968C190.356 39.6133 193.551 43.1547 195.364 47.592L184.744 51.944C183.535 49.2987 181.549 47.2507 178.786 45.8C176.109 44.264 173.087 43.496 169.719 43.496C166.611 43.496 163.805 44.264 161.301 45.8C158.883 47.336 157.674 49.2133 157.674 51.432C157.674 55.016 161.085 57.576 167.906 59.112L177.491 61.544C190.097 64.616 196.4 70.888 196.4 80.36Z" fill="black"/>
-<path d="M99.5683 99.56C92.7469 99.56 87.2639 97.768 83.1193 94.184C78.9747 90.6 76.9023 86.0347 76.9023 80.488C76.9023 68.5413 85.3643 61.928 102.288 60.648L121.198 59.24V57.192C121.198 52.84 119.773 49.4267 116.924 46.952C114.075 44.392 110.362 43.112 105.785 43.112H105.267C101.468 43.112 98.1867 44.008 95.4237 45.8C92.7469 47.5067 91.0632 49.8533 90.3724 52.84H78.3271C79.1905 47.0373 82.0831 42.3013 87.0049 38.632C92.013 34.8773 98.2731 33 105.785 33C114.679 33 121.5 35.304 126.249 39.912C130.998 44.52 133.373 50.4507 133.373 57.704V84.2C133.373 90.6 133.589 95.2933 134.021 98.28H122.623C122.364 97 122.148 95.4213 121.975 93.544C121.889 91.5813 121.846 89.96 121.846 88.68C119.946 91.6667 117.01 94.2267 113.038 96.36C109.066 98.4933 104.576 99.56 99.5683 99.56ZM102.029 89.448C105.138 89.448 108.16 88.7653 111.096 87.4C114.031 86.0347 116.449 83.9867 118.349 81.256C120.248 78.5253 121.198 75.24 121.198 71.4V68.584L103.842 69.736C98.9207 70.0773 95.2078 71.144 92.7037 72.936C90.1997 74.6427 88.9477 76.9893 88.9477 79.976C88.9477 82.7067 90.0702 84.968 92.3152 86.76C94.6465 88.552 97.7118 89.448 101.511 89.448H102.029Z" fill="black"/>
-<path d="M0 0H43.4731C49.8691 0 55.5655 1.19048 60.5625 3.57143C65.6593 5.85715 69.6568 9.28572 72.555 13.8571C75.4532 18.3333 76.9023 23.7143 76.9023 30C76.9023 36.2857 75.4532 41.7143 72.555 46.2857C69.6568 50.7619 65.6593 54.1905 60.5625 56.5714C55.5655 58.8571 49.8691 60 43.4731 60H13.4916V100H0V0ZM41.2244 48.2857C48.2201 48.2857 53.6667 46.7619 57.5643 43.7143C61.4619 40.5714 63.4107 36 63.4107 30C63.4107 24 61.4619 19.4762 57.5643 16.4286C53.6667 13.2857 48.2201 11.7143 41.2244 11.7143H13.4916V48.2857H41.2244Z" fill="black"/>
-</svg>
diff --git a/apps/editor/scripts/copy-web-ifc-wasm.mjs b/apps/editor/scripts/copy-web-ifc-wasm.mjs
new file mode 100644
index 000000000..3d589c269
--- /dev/null
+++ b/apps/editor/scripts/copy-web-ifc-wasm.mjs
@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+// web-ifc ships its WASM binaries inside node_modules. Next.js needs to
+// serve them at the app root URL (the library hardcodes `/web-ifc.wasm`
+// when no `wasmPath` override is set), so copy the three blobs into
+// `public/` so they're served from /web-ifc*.wasm.
+//
+// Run on `postinstall` and again on `predev` / `prebuild` so a forgotten
+// install step doesn't leave the dev server with a stale or missing
+// copy. Idempotent: skips files that already match by size.
+
+import { copyFileSync, existsSync, mkdirSync, statSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+
+// web-ifc's package.json doesn't expose subpath exports, so we can't use
+// require.resolve('web-ifc/package.json'). Walk up the script directory
+// looking for the package folder inside any node_modules along the way.
+function findWebIfcDir(startDir) {
+  let dir = startDir
+  while (dir && dir !== '/') {
+    const candidate = join(dir, 'node_modules', 'web-ifc')
+    if (existsSync(join(candidate, 'web-ifc.wasm'))) return candidate
+    dir = resolve(dir, '..')
+  }
+  return null
+}
+
+const webIfcDir = findWebIfcDir(import.meta.dirname)
+if (!webIfcDir) {
+  console.warn('[editor] web-ifc package not found — wasm copy skipped.')
+  process.exit(0)
+}
+const publicDir = join(import.meta.dirname, '..', 'public')
+
+mkdirSync(publicDir, { recursive: true })
+
+// Browser blobs only — `web-ifc-node.wasm` is never fetched by a page and
+// would add a megabyte of dead weight to the deployed bundle.
+const files = ['web-ifc.wasm', 'web-ifc-mt.wasm']
+for (const name of files) {
+  const src = join(webIfcDir, name)
+  const dst = join(publicDir, name)
+  try {
+    const srcSize = statSync(src).size
+    let dstSize = 0
+    try {
+      dstSize = statSync(dst).size
+    } catch {
+      /* not present yet */
+    }
+    if (srcSize === dstSize) {
+      continue
+    }
+    copyFileSync(src, dst)
+    console.log(`[editor] copied ${name} (${(srcSize / 1024).toFixed(0)} KB)`)
+  } catch (err) {
+    console.warn(`[editor] could not copy ${name}:`, err.message)
+  }
+}
diff --git a/apps/editor/tsconfig.json b/apps/editor/tsconfig.json
index 70924e110..85141bb2e 100644
--- a/apps/editor/tsconfig.json
+++ b/apps/editor/tsconfig.json
@@ -7,7 +7,12 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ],
+      "@panel/*": [
+        "./panel/*"
+      ]
     }
   },
   "include": [
@@ -17,9 +22,17 @@
     "next.config.js",
     ".next/types/**/*.ts"
   ],
-  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"],
+  "exclude": [
+    "node_modules",
+    "**/*.test.ts",
+    "**/*.test.tsx"
+  ],
   "references": [
-    { "path": "../../packages/core" },
-    { "path": "../../packages/viewer" }
+    {
+      "path": "../../packages/core"
+    },
+    {
+      "path": "../../packages/viewer"
+    }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/ifc-converter/next-env.d.ts b/apps/ifc-converter/next-env.d.ts
index c4b7818fb..9edff1c7c 100644
--- a/apps/ifc-converter/next-env.d.ts
+++ b/apps/ifc-converter/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/biome.jsonc b/biome.jsonc
index c72578720..6f522c22c 100644
--- a/biome.jsonc
+++ b/biome.jsonc
@@ -111,6 +111,19 @@
     ]
   },
   "overrides": [
+    {
+      // Vendored console sources (synced from ovurrsl/panel). Its hooks
+      // intentionally pin effect dependencies; re-deriving them here would
+      // change runtime behavior, so the rule is off for this subtree only.
+      "includes": ["apps/editor/panel/**"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "useExhaustiveDependencies": "off"
+          }
+        }
+      }
+    },
     {
       "includes": ["packages/editor/components/debug/react-scan.tsx"],
       "assist": {
diff --git a/bun.lock b/bun.lock
index d8ac1e9fe..27430400a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "editor",
@@ -28,9 +27,12 @@
       "version": "0.1.0",
       "dependencies": {
         "@iconify/react": "^6.0.2",
+        "@node-rs/argon2": "^2.0.2",
         "@number-flow/react": "^0.6.0",
+        "@ovurrsl/plugin-warehouse": "git+https://github.com/ovurrsl/plugin-warehouse.git#b53d9dee7623039a89fe3390716e96ad95af7164",
         "@pascal-app/core": "*",
         "@pascal-app/editor": "*",
+        "@pascal-app/ifc-converter": "*",
         "@pascal-app/mcp": "*",
         "@pascal-app/nodes": "*",
         "@pascal-app/plugin-trees": "github:pascalorg/plugin-trees#56d978cd9b409b716207b3f3d269455d3cd6f067",
@@ -42,19 +44,27 @@
         "clsx": "^2.1.1",
         "geist": "^1.7.0",
         "lucide-react": "^1.7.0",
+        "mysql2": "^3.15.4",
         "next": "16.2.9",
+        "nodemailer": "^9.0.3",
+        "otpauth": "^9.5.1",
         "postcss": "^8.5.6",
+        "qrcode": "^1.5.4",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.1",
         "three": "^0.185.0",
+        "ulid": "^3.0.2",
+        "web-ifc": "^0.0.77",
         "zod": "^4.3.5",
       },
       "devDependencies": {
         "@pascal/typescript-config": "*",
         "@types/howler": "^2.2.12",
         "@types/node": "^22.19.12",
+        "@types/nodemailer": "^8.0.1",
+        "@types/qrcode": "^1.5.6",
         "@types/react": "19.2.2",
         "@types/react-dom": "19.2.2",
         "agentation": "^3.0.2",
@@ -98,7 +108,7 @@
     },
     "packages/core": {
       "name": "@pascal-app/core",
-      "version": "0.9.2",
+      "version": "1.0.0-beta.1",
       "dependencies": {
         "dedent": "^1.7.1",
         "idb-keyval": "^6.2.2",
@@ -124,7 +134,7 @@
     },
     "packages/editor": {
       "name": "@pascal-app/editor",
-      "version": "0.9.2",
+      "version": "1.0.0-beta.1",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
@@ -161,8 +171,8 @@
         "zustand": "^5.0.11",
       },
       "devDependencies": {
-        "@pascal-app/core": "^0.9.2",
-        "@pascal-app/viewer": "^0.9.2",
+        "@pascal-app/core": "^1.0.0-beta.1",
+        "@pascal-app/viewer": "^1.0.0-beta.1",
         "@pascal/typescript-config": "*",
         "@types/blob-stream": "^0.1.33",
         "@types/bun": "^1.3.0",
@@ -174,8 +184,8 @@
         "typescript": "6.0.3",
       },
       "peerDependencies": {
-        "@pascal-app/core": "^0.9.2",
-        "@pascal-app/viewer": "^0.9.2",
+        "@pascal-app/core": "^1.0.0-beta.1",
+        "@pascal-app/viewer": "^1.0.0-beta.1",
         "@react-three/drei": "^10",
         "@react-three/fiber": "^9",
         "next": ">=15",
@@ -203,7 +213,7 @@
     },
     "packages/ifc-converter": {
       "name": "@pascal-app/ifc-converter",
-      "version": "0.1.2",
+      "version": "1.0.0-beta.1",
       "dependencies": {
         "@pascal-app/core": "*",
         "nanoid": "^5.1.6",
@@ -217,32 +227,33 @@
     },
     "packages/mcp": {
       "name": "@pascal-app/mcp",
-      "version": "0.3.2",
+      "version": "1.0.0-beta.1",
       "bin": {
         "pascal-mcp": "./dist/bin/pascal-mcp.js",
       },
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.29.0",
         "@pascal-app/lingo": "^0.2.0",
+        "mysql2": "^3.15.4",
         "zod": "^4.3.5",
       },
       "devDependencies": {
-        "@pascal-app/core": "^0.9.2",
+        "@pascal-app/core": "^1.0.0-beta.1",
         "@pascal/typescript-config": "*",
         "@types/node": "^22.19.20",
         "typescript": "6.0.3",
       },
       "peerDependencies": {
-        "@pascal-app/core": "^0.9.2",
+        "@pascal-app/core": "^1.0.0-beta.1",
       },
     },
     "packages/nodes": {
       "name": "@pascal-app/nodes",
-      "version": "0.1.1",
+      "version": "1.0.0-beta.1",
       "devDependencies": {
-        "@pascal-app/core": "^0.9.2",
-        "@pascal-app/editor": "^0.9.2",
-        "@pascal-app/viewer": "^0.9.2",
+        "@pascal-app/core": "^1.0.0-beta.1",
+        "@pascal-app/editor": "^1.0.0-beta.1",
+        "@pascal-app/viewer": "^1.0.0-beta.1",
         "@pascal/typescript-config": "*",
         "@types/bun": "^1.3.0",
         "@types/node": "^22.19.12",
@@ -251,9 +262,9 @@
         "typescript": "6.0.3",
       },
       "peerDependencies": {
-        "@pascal-app/core": "^0.9.2",
-        "@pascal-app/editor": "^0.9.2",
-        "@pascal-app/viewer": "^0.9.2",
+        "@pascal-app/core": "^1.0.0-beta.1",
+        "@pascal-app/editor": "^1.0.0-beta.1",
+        "@pascal-app/viewer": "^1.0.0-beta.1",
         "@react-three/drei": "^10",
         "@react-three/fiber": "^9",
         "lucide-react": "^1",
@@ -285,7 +296,7 @@
     },
     "packages/viewer": {
       "name": "@pascal-app/viewer",
-      "version": "0.9.2",
+      "version": "1.0.0-beta.1",
       "dependencies": {
         "three-bvh-csg": "^0.0.18",
         "three-mesh-bvh": "^0.9.8",
@@ -299,7 +310,7 @@
         "typescript": "6.0.3",
       },
       "peerDependencies": {
-        "@pascal-app/core": "^0.9.2",
+        "@pascal-app/core": "^1.0.0-beta.1",
         "@react-three/drei": "^10",
         "@react-three/fiber": "^9",
         "react": "^18 || ^19",
@@ -391,11 +402,11 @@
 
     "@effect/platform-node-shared": ["@effect/platform-node-shared@4.0.0-beta.70", "", { "dependencies": { "@types/ws": "^8.18.1", "ws": "^8.20.0" }, "peerDependencies": { "effect": "^4.0.0-beta.70" } }, "sha512-3VXuL63IDmq13We+ApRKn2JW3Rb9g5gj1YEmfb8u2b73norur1VsIJ/pRE4qjShevg19dQYi2JsLawSZ6gApug=="],
 
-    "@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" } }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
+    "@emnapi/core": ["@emnapi/core@1.11.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" } }, "sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@1.11.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg=="],
 
-    "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
+    "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.2", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA=="],
 
     "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.9.1", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ=="],
 
@@ -519,7 +530,7 @@
 
     "@msgpackr-extract/msgpackr-extract-win32-x64": ["@msgpackr-extract/msgpackr-extract-win32-x64@3.0.4", "", { "os": "win32", "cpu": "x64" }, "sha512-CmCXPQrkbwExx3j946/PtHWHbYJiCRBRDl4BlkRQcJB/YOwQxJRTpoo7aTsortjgoJ1x7opzTSxn7C+ASSLVjQ=="],
 
-    "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
+    "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@0.2.12", "", { "dependencies": { "@emnapi/core": "^1.4.3", "@emnapi/runtime": "^1.4.3", "@tybys/wasm-util": "^0.10.0" } }, "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ=="],
 
     "@next/env": ["@next/env@16.2.9", "", {}, "sha512-ki5VxxXfzD/9TDe13wyeTKIjQTAwBVpnr8KhRDUr8ltMUq1/NBpWNT5tiPoxiGl+PHM4X2ahSOiPk6iAimIzPg=="],
 
@@ -545,6 +556,36 @@
 
     "@noble/hashes": ["@noble/hashes@1.8.0", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
 
+    "@node-rs/argon2": ["@node-rs/argon2@2.0.2", "", { "optionalDependencies": { "@node-rs/argon2-android-arm-eabi": "2.0.2", "@node-rs/argon2-android-arm64": "2.0.2", "@node-rs/argon2-darwin-arm64": "2.0.2", "@node-rs/argon2-darwin-x64": "2.0.2", "@node-rs/argon2-freebsd-x64": "2.0.2", "@node-rs/argon2-linux-arm-gnueabihf": "2.0.2", "@node-rs/argon2-linux-arm64-gnu": "2.0.2", "@node-rs/argon2-linux-arm64-musl": "2.0.2", "@node-rs/argon2-linux-x64-gnu": "2.0.2", "@node-rs/argon2-linux-x64-musl": "2.0.2", "@node-rs/argon2-wasm32-wasi": "2.0.2", "@node-rs/argon2-win32-arm64-msvc": "2.0.2", "@node-rs/argon2-win32-ia32-msvc": "2.0.2", "@node-rs/argon2-win32-x64-msvc": "2.0.2" } }, "sha512-t64wIsPEtNd4aUPuTAyeL2ubxATCBGmeluaKXEMAFk/8w6AJIVVkeLKMBpgLW6LU2t5cQxT+env/c6jxbtTQBg=="],
+
+    "@node-rs/argon2-android-arm-eabi": ["@node-rs/argon2-android-arm-eabi@2.0.2", "", { "os": "android", "cpu": "arm" }, "sha512-DV/H8p/jt40lrao5z5g6nM9dPNPGEHL+aK6Iy/og+dbL503Uj0AHLqj1Hk9aVUSCNnsDdUEKp4TVMi0YakDYKw=="],
+
+    "@node-rs/argon2-android-arm64": ["@node-rs/argon2-android-arm64@2.0.2", "", { "os": "android", "cpu": "arm64" }, "sha512-1LKwskau+8O1ktKx7TbK7jx1oMOMt4YEXZOdSNIar1TQKxm6isZ0cRXgHLibPHEcNHgYRsJWDE9zvDGBB17QDg=="],
+
+    "@node-rs/argon2-darwin-arm64": ["@node-rs/argon2-darwin-arm64@2.0.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-3TTNL/7wbcpNju5YcqUrCgXnXUSbD7ogeAKatzBVHsbpjZQbNb1NDxDjqqrWoTt6XL3z9mJUMGwbAk7zQltHtA=="],
+
+    "@node-rs/argon2-darwin-x64": ["@node-rs/argon2-darwin-x64@2.0.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-vNPfkLj5Ij5111UTiYuwgxMqE7DRbOS2y58O2DIySzSHbcnu+nipmRKg+P0doRq6eKIJStyBK8dQi5Ic8pFyDw=="],
+
+    "@node-rs/argon2-freebsd-x64": ["@node-rs/argon2-freebsd-x64@2.0.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-M8vQZk01qojQfCqQU0/O1j1a4zPPrz93zc9fSINY7Q/6RhQRBCYwDw7ltDCZXg5JRGlSaeS8cUXWyhPGar3cGg=="],
+
+    "@node-rs/argon2-linux-arm-gnueabihf": ["@node-rs/argon2-linux-arm-gnueabihf@2.0.2", "", { "os": "linux", "cpu": "arm" }, "sha512-7EmmEPHLzcu0G2GDh30L6G48CH38roFC2dqlQJmtRCxs6no3tTE/pvgBGatTp/o2n2oyOJcfmgndVFcUpwMnww=="],
+
+    "@node-rs/argon2-linux-arm64-gnu": ["@node-rs/argon2-linux-arm64-gnu@2.0.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-6lsYh3Ftbk+HAIZ7wNuRF4SZDtxtFTfK+HYFAQQyW7Ig3LHqasqwfUKRXVSV5tJ+xTnxjqgKzvZSUJCAyIfHew=="],
+
+    "@node-rs/argon2-linux-arm64-musl": ["@node-rs/argon2-linux-arm64-musl@2.0.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-p3YqVMNT/4DNR67tIHTYGbedYmXxW9QlFmF39SkXyEbGQwpgSf6pH457/fyXBIYznTU/smnG9EH+C1uzT5j4hA=="],
+
+    "@node-rs/argon2-linux-x64-gnu": ["@node-rs/argon2-linux-x64-gnu@2.0.2", "", { "os": "linux", "cpu": "x64" }, "sha512-ZM3jrHuJ0dKOhvA80gKJqBpBRmTJTFSo2+xVZR+phQcbAKRlDMSZMFDiKbSTnctkfwNFtjgDdh5g1vaEV04AvA=="],
+
+    "@node-rs/argon2-linux-x64-musl": ["@node-rs/argon2-linux-x64-musl@2.0.2", "", { "os": "linux", "cpu": "x64" }, "sha512-of5uPqk7oCRF/44a89YlWTEfjsftPywyTULwuFDKyD8QtVZoonrJR6ZWvfFE/6jBT68S0okAkAzzMEdBVWdxWw=="],
+
+    "@node-rs/argon2-wasm32-wasi": ["@node-rs/argon2-wasm32-wasi@2.0.2", "", { "dependencies": { "@napi-rs/wasm-runtime": "^0.2.5" }, "cpu": "none" }, "sha512-U3PzLYKSQYzTERstgtHLd4ZTkOF9co57zTXT77r0cVUsleGZOrd6ut7rHzeWwoJSiHOVxxa0OhG1JVQeB7lLoQ=="],
+
+    "@node-rs/argon2-win32-arm64-msvc": ["@node-rs/argon2-win32-arm64-msvc@2.0.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-Eisd7/NM0m23ijrGr6xI2iMocdOuyl6gO27gfMfya4C5BODbUSP7ljKJ7LrA0teqZMdYHesRDzx36Js++/vhiQ=="],
+
+    "@node-rs/argon2-win32-ia32-msvc": ["@node-rs/argon2-win32-ia32-msvc@2.0.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-GsE2ezwAYwh72f9gIjbGTZOf4HxEksb5M2eCaj+Y5rGYVwAdt7C12Q2e9H5LRYxWcFvLH4m4jiSZpQQ4upnPAQ=="],
+
+    "@node-rs/argon2-win32-x64-msvc": ["@node-rs/argon2-win32-x64-msvc@2.0.2", "", { "os": "win32", "cpu": "x64" }, "sha512-cJxWXanH4Ew9CfuZ4IAEiafpOBCe97bzoKowHCGk5lG/7kR4WF/eknnBlHW9m8q7t10mKq75kruPLtbSDqgRTw=="],
+
     "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
 
     "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
@@ -567,6 +608,8 @@
 
     "@opentelemetry/semantic-conventions": ["@opentelemetry/semantic-conventions@1.41.1", "", {}, "sha512-/UhIkaZgPutTFmQ7RnIJGgDXZmtEJ7Dvi86xNTFWcnRxVRNk/aotsqDJYeEvDP+FSMB2SdW+pQzNMcWP0rwuNA=="],
 
+    "@ovurrsl/plugin-warehouse": ["@ovurrsl/plugin-warehouse@github:ovurrsl/plugin-warehouse#b53d9de", { "peerDependencies": { "@iconify/react": "^6", "@pascal-app/core": ">=1.0.0-beta.1 <2", "@pascal-app/editor": ">=1.0.0-beta.1 <2", "@pascal-app/viewer": ">=1.0.0-beta.1 <2", "@react-three/fiber": "^9", "react": "^18 || ^19", "react-dom": "^18 || ^19", "three": "^0.185", "zod": "^4", "zustand": "^5" } }, "ovurrsl-plugin-warehouse-b53d9de"],
+
     "@oxc-parser/binding-android-arm-eabi": ["@oxc-parser/binding-android-arm-eabi@0.132.0", "", { "os": "android", "cpu": "arm" }, "sha512-KrLaPWa5c9Y7LkW+rKkaUE3y7DBDrQtaf7rlsSDfv6KAHUjgzAIRA761Lrrp6//Yd/Rlie/yEOt9YENCoJnOcw=="],
 
     "@oxc-parser/binding-android-arm64": ["@oxc-parser/binding-android-arm64@0.132.0", "", { "os": "android", "cpu": "arm64" }, "sha512-SThDrSeamB/kG2+NxcJ5/wSLcV6dUqDknrPLqFYQ0ST/55mtBP4M7Q/f3QbubH6aAd11wpzZn/nwbVRSdobOpg=="],
@@ -697,7 +740,7 @@
 
     "@pascal-app/nodes": ["@pascal-app/nodes@workspace:packages/nodes"],
 
-    "@pascal-app/plugin-trees": ["@pascal-app/plugin-trees@github:pascalorg/plugin-trees#56d978c", { "dependencies": { "@dgreenheck/ez-tree": "^1.1.0" }, "peerDependencies": { "@pascal-app/core": ">=0.9.1 <1", "@pascal-app/editor": ">=0.9.1 <1", "@pascal-app/viewer": ">=0.9.1 <1", "@react-three/fiber": "^9", "react": "^18 || ^19", "three": "^0.185", "zod": "^4", "zustand": "^5" } }, "pascalorg-plugin-trees-56d978c", "sha512-16VzWot1oadvxCPqsRwMJbaP0a3u5FESFy7F7++pY5wAAFq9JTFwzHvKAsllrY5TZ5TJ7Y5vSqvbmQk8sy8HaA=="],
+    "@pascal-app/plugin-trees": ["@pascal-app/plugin-trees@github:pascalorg/plugin-trees#56d978c", { "dependencies": { "@dgreenheck/ez-tree": "^1.1.0" }, "peerDependencies": { "@pascal-app/core": ">=0.9.1 <1", "@pascal-app/editor": ">=0.9.1 <1", "@pascal-app/viewer": ">=0.9.1 <1", "@react-three/fiber": "^9", "react": "^18 || ^19", "three": "^0.185", "zod": "^4", "zustand": "^5" } }, "pascalorg-plugin-trees-56d978c"],
 
     "@pascal-app/viewer": ["@pascal-app/viewer@workspace:packages/viewer"],
 
@@ -875,10 +918,14 @@
 
     "@types/node": ["@types/node@22.19.20", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-6tELRwSDYWW9EdZhbeZmYGZ1/7Djkt+Ah3/ScEYT9cDord7UJzasR/4D3VONg9tQI5CDp+/CZC1AXj2pCFOvpw=="],
 
+    "@types/nodemailer": ["@types/nodemailer@8.0.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-PxpaInm8V1JQDd4j0ds5HfvWQk8JupS1C0Picb96QJsrrRDjBH+DlK7L4ZdNSqNULhiZRQHc40nLVShaGxXAMw=="],
+
     "@types/offscreencanvas": ["@types/offscreencanvas@2019.7.3", "", {}, "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="],
 
     "@types/pdfkit": ["@types/pdfkit@0.17.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-tIwzxk2uWKp0Cq9JIluQXJid77lYhF52EsIOwhsMF4iWLA6YneoBR1xVKYYdAysHuepUB0OX4tdwMiUDdGKmig=="],
 
+    "@types/qrcode": ["@types/qrcode@1.5.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw=="],
+
     "@types/react": ["@types/react@19.2.17", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw=="],
 
     "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
@@ -953,7 +1000,7 @@
 
     "ajv-formats": ["ajv-formats@3.0.1", "", { "dependencies": { "ajv": "^8.0.0" } }, "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ=="],
 
-    "ansi-regex": ["ansi-regex@6.2.2", "", {}, "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg=="],
+    "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
     "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
@@ -981,6 +1028,8 @@
 
     "available-typed-arrays": ["available-typed-arrays@1.0.7", "", { "dependencies": { "possible-typed-array-names": "^1.0.0" } }, "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ=="],
 
+    "aws-ssl-profiles": ["aws-ssl-profiles@1.1.2", "", {}, "sha512-NZKeq9AfyQvEeNlN0zSYAaWrmBffJh3IELMZfRpJVWgrpEbtEpnjvzqBPf+mxoI287JohRDoa+/nsfqqiZmF6g=="],
+
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
     "base64-js": ["base64-js@1.5.1", "", {}, "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="],
@@ -1021,6 +1070,8 @@
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
+    "camelcase": ["camelcase@5.3.1", "", {}, "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="],
+
     "camera-controls": ["camera-controls@3.1.2", "", { "peerDependencies": { "three": ">=0.126.1" } }, "sha512-xkxfpG2ECZ6Ww5/9+kf4mfg1VEYAoe9aDSY+IwF0UEs7qEzwy0aVRfs2grImIECs/PoBtWFrh7RXsQkwG922JA=="],
 
     "caniuse-lite": ["caniuse-lite@1.0.30001797", "", {}, "sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w=="],
@@ -1039,6 +1090,8 @@
 
     "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
 
+    "cliui": ["cliui@6.0.0", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", "wrap-ansi": "^6.2.0" } }, "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ=="],
+
     "clone": ["clone@2.1.2", "", {}, "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="],
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
@@ -1085,6 +1138,8 @@
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "decamelize": ["decamelize@1.2.0", "", {}, "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="],
+
     "dedent": ["dedent@1.7.2", "", { "peerDependencies": { "babel-plugin-macros": "^3.1.0" }, "optionalPeers": ["babel-plugin-macros"] }, "sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA=="],
 
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
@@ -1095,6 +1150,8 @@
 
     "define-properties": ["define-properties@1.2.1", "", { "dependencies": { "define-data-property": "^1.0.1", "has-property-descriptors": "^1.0.0", "object-keys": "^1.1.1" } }, "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg=="],
 
+    "denque": ["denque@2.1.0", "", {}, "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw=="],
+
     "depd": ["depd@2.0.0", "", {}, "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="],
 
     "deslop-js": ["deslop-js@0.0.21", "", { "dependencies": { "@oxc-project/types": "^0.132.0", "fast-glob": "^3.3.3", "minimatch": "^10.2.5", "oxc-parser": "^0.132.0", "oxc-resolver": "^11.19.1", "typescript": "^6.0.3" } }, "sha512-1fYusMl4tDaQ/xdHFtLfDe8kFrEeU0Vu0Pfiy2k/Gd4HSqYlQj1Z7iRqldNneRyuCzNMhwNBvhaL07Urbh5VOA=="],
@@ -1107,6 +1164,8 @@
 
     "dfa": ["dfa@1.2.0", "", {}, "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q=="],
 
+    "dijkstrajs": ["dijkstrajs@1.0.3", "", {}, "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="],
+
     "doctrine": ["doctrine@2.1.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw=="],
 
     "dot-prop": ["dot-prop@10.1.0", "", { "dependencies": { "type-fest": "^5.0.0" } }, "sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q=="],
@@ -1129,6 +1188,8 @@
 
     "electron-to-chromium": ["electron-to-chromium@1.5.370", "", {}, "sha512-D5tSHJReAb/Kf3Hu9F/GO4lJuSWzEWHwvQ/kKSUP7pimNgvxkSKj+gUQhHpKKACwrin7rS3byU7IxreF56rl5g=="],
 
+    "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
     "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],
 
     "enhanced-resolve": ["enhanced-resolve@5.23.0", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-yJN/BOOLxcOW2aQgeif9mSnaUB8KtvmMMp56oA1kx1CRfBKbhZm2pJ+NBY+3eOboHxix8lfjWpHE0Ei5U8RbSA=="],
@@ -1253,10 +1314,14 @@
 
     "geist": ["geist@1.7.2", "", { "peerDependencies": { "next": ">=13.2.0" } }, "sha512-Gu5lDFa3pLRyoBlBPf0QIFHVdWAnpco7fS1bJm41jyLPFoguBgiubseUN2oLXMgqZ7uxAxDoXcHMhCY/fOTTgg=="],
 
+    "generate-function": ["generate-function@2.3.1", "", { "dependencies": { "is-property": "^1.0.2" } }, "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ=="],
+
     "generator-function": ["generator-function@2.0.1", "", {}, "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g=="],
 
     "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
 
+    "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
+
     "get-east-asian-width": ["get-east-asian-width@1.6.0", "", {}, "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA=="],
 
     "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
@@ -1355,6 +1420,8 @@
 
     "is-finalizationregistry": ["is-finalizationregistry@1.1.1", "", { "dependencies": { "call-bound": "^1.0.3" } }, "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg=="],
 
+    "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
+
     "is-generator-function": ["is-generator-function@1.1.2", "", { "dependencies": { "call-bound": "^1.0.4", "generator-function": "^2.0.0", "get-proto": "^1.0.1", "has-tostringtag": "^1.0.2", "safe-regex-test": "^1.1.0" } }, "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA=="],
 
     "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
@@ -1371,6 +1438,8 @@
 
     "is-promise": ["is-promise@2.2.2", "", {}, "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="],
 
+    "is-property": ["is-property@1.0.2", "", {}, "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g=="],
+
     "is-regex": ["is-regex@1.2.1", "", { "dependencies": { "call-bound": "^1.0.2", "gopd": "^1.2.0", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g=="],
 
     "is-set": ["is-set@2.0.3", "", {}, "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg=="],
@@ -1467,10 +1536,14 @@
 
     "log-symbols": ["log-symbols@7.0.1", "", { "dependencies": { "is-unicode-supported": "^2.0.0", "yoctocolors": "^2.1.1" } }, "sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg=="],
 
+    "long": ["long@5.3.2", "", {}, "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA=="],
+
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
 
     "lru-cache": ["lru-cache@11.5.1", "", {}, "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A=="],
 
+    "lru.min": ["lru.min@1.1.4", "", {}, "sha512-DqC6n3QQ77zdFpCMASA1a3Jlb64Hv2N2DciFGkO/4L9+q/IpIAuRlKOvCXabtRW6cQf8usbmM6BE/TOPysCdIA=="],
+
     "lucide-react": ["lucide-react@1.17.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w=="],
 
     "maath": ["maath@0.10.8", "", { "peerDependencies": { "@types/three": ">=0.134.0", "three": ">=0.134.0" } }, "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g=="],
@@ -1523,6 +1596,10 @@
 
     "multipasta": ["multipasta@0.2.7", "", {}, "sha512-KPA58d68KgGil15oDqXjkUBEBYc00XvbPj5/X+dyzeo/lWm9Nc25pQRlf1D+gv4OpK7NM0J1odrbu9JNNGvynA=="],
 
+    "mysql2": ["mysql2@3.23.2", "", { "dependencies": { "aws-ssl-profiles": "^1.1.2", "denque": "^2.1.0", "generate-function": "^2.3.1", "iconv-lite": "^0.7.2", "long": "^5.3.2", "lru.min": "^1.1.4", "named-placeholders": "^1.1.6", "sql-escaper": "^1.5.1" }, "peerDependencies": { "@types/node": ">= 8" } }, "sha512-fxh3HpQ8vJtu/Mmnd4Xsur19jGjHGzRLMxptiDtOkbX7EVBgnafGSGDx1WGGVmJLClVh2LeeBMMo24IFv8wCyQ=="],
+
+    "named-placeholders": ["named-placeholders@1.1.6", "", { "dependencies": { "lru.min": "^1.1.0" } }, "sha512-Tz09sEL2EEuv5fFowm419c1+a/jSMiBjI9gHxVLrVdbUkkNUUfjsVYs9pVZu5oCon/kmRh9TfLEObFtkVxmY0w=="],
+
     "nanoid": ["nanoid@5.1.11", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-v+KEsUv2ps74PaSKv0gHTxTCgMXOIfBEbaqa6w6ISIGC7ZsvHN4N9oJ8d4cmf0n5oTzQz2SLmThbQWhjd/8eKg=="],
 
     "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
@@ -1537,6 +1614,8 @@
 
     "node-releases": ["node-releases@2.0.47", "", {}, "sha512-Uzmd6LXpouKo8EUK68IjH4+E01w/hXyV3R3g/geCJo+rXLNfh1xucB+LOzYEOQPSiUK3h/xZf0cQGcSsmyL2Og=="],
 
+    "nodemailer": ["nodemailer@9.0.3", "", {}, "sha512-n+YP+NKwR5zRWa60k3GiQ6Q3B4KXCoAw40dAKeCtYn020iNN74aWK2liXIC3ZEATeGql7we3tE3t8QwhY0eskw=="],
+
     "number-flow": ["number-flow@0.6.0", "", { "dependencies": { "esm-env": "^1.1.4" } }, "sha512-K8flNq2Wqus53vjp/btVo3qXFkagF8dIdYavreBfE7hlvFFG/b1HMGEH6nZL+mlrJ+4lbLP9OmPv3t2rmRkpSQ=="],
 
     "nypm": ["nypm@0.6.6", "", { "dependencies": { "citty": "^0.2.2", "pathe": "^2.0.3", "tinyexec": "^1.1.1" }, "bin": { "nypm": "dist/cli.mjs" } }, "sha512-vRyr0r4cbBapw07Xw8xrj9Teq3o7MUD35rSaTcanDbW+aK2XHDgJFiU6ZTj2GBw7Q12ysdsyFss+Vdz4hQ0Y6Q=="],
@@ -1565,6 +1644,8 @@
 
     "ora": ["ora@9.4.0", "", { "dependencies": { "chalk": "^5.6.2", "cli-cursor": "^5.0.0", "cli-spinners": "^3.2.0", "is-interactive": "^2.0.0", "is-unicode-supported": "^2.1.0", "log-symbols": "^7.0.1", "stdin-discarder": "^0.3.2", "string-width": "^8.1.0" } }, "sha512-84cglkRILFxdtA8hAvLNdMrtBpPNBTrQ9/ulg0FA7xLMnD6mifv+enAIeRmvtv+WgdCE+LPGOfQmtJRrVaIVhQ=="],
 
+    "otpauth": ["otpauth@9.5.1", "", { "dependencies": { "@noble/hashes": "2.2.0" } }, "sha512-fJmDAHc8wImfqqqOXIlBvT1dEKrZK0Cmb2VEgScpNTolCz0PHh6ExUZGv4sLtOsWNaHCQlD+rRqaPgnoxFoZjQ=="],
+
     "own-keys": ["own-keys@1.0.1", "", { "dependencies": { "get-intrinsic": "^1.2.6", "object-keys": "^1.1.1", "safe-push-apply": "^1.0.0" } }, "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg=="],
 
     "oxc-parser": ["oxc-parser@0.132.0", "", { "dependencies": { "@oxc-project/types": "^0.132.0" }, "optionalDependencies": { "@oxc-parser/binding-android-arm-eabi": "0.132.0", "@oxc-parser/binding-android-arm64": "0.132.0", "@oxc-parser/binding-darwin-arm64": "0.132.0", "@oxc-parser/binding-darwin-x64": "0.132.0", "@oxc-parser/binding-freebsd-x64": "0.132.0", "@oxc-parser/binding-linux-arm-gnueabihf": "0.132.0", "@oxc-parser/binding-linux-arm-musleabihf": "0.132.0", "@oxc-parser/binding-linux-arm64-gnu": "0.132.0", "@oxc-parser/binding-linux-arm64-musl": "0.132.0", "@oxc-parser/binding-linux-ppc64-gnu": "0.132.0", "@oxc-parser/binding-linux-riscv64-gnu": "0.132.0", "@oxc-parser/binding-linux-riscv64-musl": "0.132.0", "@oxc-parser/binding-linux-s390x-gnu": "0.132.0", "@oxc-parser/binding-linux-x64-gnu": "0.132.0", "@oxc-parser/binding-linux-x64-musl": "0.132.0", "@oxc-parser/binding-openharmony-arm64": "0.132.0", "@oxc-parser/binding-wasm32-wasi": "0.132.0", "@oxc-parser/binding-win32-arm64-msvc": "0.132.0", "@oxc-parser/binding-win32-ia32-msvc": "0.132.0", "@oxc-parser/binding-win32-x64-msvc": "0.132.0" } }, "sha512-+0LAPHaqtfQlvWdpaAa09SmOaZZgP8C552xosEkGJ4+ruEwP1Vgx+sqBgcBCNfR6KDCmagGOZTde8wmAvcI/Hg=="],
@@ -1579,6 +1660,8 @@
 
     "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
 
+    "p-try": ["p-try@2.2.0", "", {}, "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="],
+
     "package-manager-detector": ["package-manager-detector@1.6.0", "", {}, "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA=="],
 
     "pako": ["pako@0.2.9", "", {}, "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA=="],
@@ -1609,6 +1692,8 @@
 
     "png-js": ["png-js@1.1.0", "", { "dependencies": { "browserify-zlib": "^0.2.0" } }, "sha512-PM/uYGzGdNSzqeOgly68+6wKQDL1SY0a/N+OEa/+br6LnHWOAJB0Npiamnodfq3jd2LS/i2fMeOKSAILjA+m5Q=="],
 
+    "pngjs": ["pngjs@5.0.0", "", {}, "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="],
+
     "possible-typed-array-names": ["possible-typed-array-names@1.1.0", "", {}, "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="],
 
     "postcss": ["postcss@8.5.15", "", { "dependencies": { "nanoid": "^3.3.12", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A=="],
@@ -1631,6 +1716,8 @@
 
     "pure-rand": ["pure-rand@8.4.0", "", {}, "sha512-IoM8YF/jY0hiugFo/wOWqfmarlE6J0wc6fDK1PhftMk7MGhVZl88sZimmqBBFomLOCSmcCCpsfj7wXASCpvK9A=="],
 
+    "qrcode": ["qrcode@1.5.4", "", { "dependencies": { "dijkstrajs": "^1.0.1", "pngjs": "^5.0.0", "yargs": "^15.3.1" }, "bin": { "qrcode": "bin/qrcode" } }, "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg=="],
+
     "qs": ["qs@6.15.2", "", { "dependencies": { "side-channel": "^1.1.0" } }, "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw=="],
 
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
@@ -1663,10 +1750,14 @@
 
     "regexp.prototype.flags": ["regexp.prototype.flags@1.5.4", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-errors": "^1.3.0", "get-proto": "^1.0.1", "gopd": "^1.2.0", "set-function-name": "^2.0.2" } }, "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA=="],
 
+    "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
+
     "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
 
     "require-in-the-middle": ["require-in-the-middle@8.0.1", "", { "dependencies": { "debug": "^4.3.5", "module-details-from-path": "^1.0.3" } }, "sha512-QT7FVMXfWOYFbeRBF6nu+I6tr2Tf3u0q8RIEjNob/heKY/nh7drD/k7eeMFmSQgnTtCzLDcCu/XEnpW2wk4xCQ=="],
 
+    "require-main-filename": ["require-main-filename@2.0.0", "", {}, "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="],
+
     "resolve": ["resolve@2.0.0-next.7", "", { "dependencies": { "es-errors": "^1.3.0", "is-core-module": "^2.16.2", "node-exports-info": "^1.6.0", "object-keys": "^1.1.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-tqt+NBWwyaMgw3zDsnygx4CByWjQEJHOPMdslYhppaQSJUtL/D4JO9CcBBlhPoI8lz9oJIDXkwXfhF4aWqP8xQ=="],
 
     "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
@@ -1697,6 +1788,8 @@
 
     "serve-static": ["serve-static@2.2.1", "", { "dependencies": { "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "parseurl": "^1.3.3", "send": "^1.2.0" } }, "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw=="],
 
+    "set-blocking": ["set-blocking@2.0.0", "", {}, "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="],
+
     "set-function-length": ["set-function-length@1.2.2", "", { "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", "function-bind": "^1.1.2", "get-intrinsic": "^1.2.4", "gopd": "^1.0.1", "has-property-descriptors": "^1.0.2" } }, "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg=="],
 
     "set-function-name": ["set-function-name@2.0.2", "", { "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", "functions-have-names": "^1.2.3", "has-property-descriptors": "^1.0.2" } }, "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ=="],
@@ -1725,6 +1818,8 @@
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
+    "sql-escaper": ["sql-escaper@1.5.1", "", {}, "sha512-4toX5E1fQbBrpfXidaHnF0669nkAdETeIPTs2SUjxxD7RRIs9ICG4gtpmfc68JCEKehsdwLFqBu9VlQqZ1P1gg=="],
+
     "stats-gl": ["stats-gl@2.4.2", "", { "dependencies": { "@types/three": "*", "three": "^0.170.0" } }, "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ=="],
 
     "stats.js": ["stats.js@0.17.0", "", {}, "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw=="],
@@ -1735,7 +1830,7 @@
 
     "stop-iteration-iterator": ["stop-iteration-iterator@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "internal-slot": "^1.1.0" } }, "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ=="],
 
-    "string-width": ["string-width@8.2.1", "", { "dependencies": { "get-east-asian-width": "^1.5.0", "strip-ansi": "^7.1.2" } }, "sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA=="],
+    "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
     "string.prototype.matchall": ["string.prototype.matchall@4.0.12", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "define-properties": "^1.2.1", "es-abstract": "^1.23.6", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.6", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "internal-slot": "^1.1.0", "regexp.prototype.flags": "^1.5.3", "set-function-name": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA=="],
 
@@ -1747,7 +1842,7 @@
 
     "string.prototype.trimstart": ["string.prototype.trimstart@1.0.8", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" } }, "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg=="],
 
-    "strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
+    "strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
     "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
 
@@ -1827,6 +1922,8 @@
 
     "uint8array-extras": ["uint8array-extras@1.5.0", "", {}, "sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A=="],
 
+    "ulid": ["ulid@3.0.2", "", { "bin": { "ulid": "dist/cli.js" } }, "sha512-yu26mwteFYzBAot7KVMqFGCVpsF6g8wXfJzQUHvu1no3+rRRSFcSV2nKeYvNPLD2J4b08jYBDhHUjeH0ygIl9w=="],
+
     "ultracite": ["ultracite@7.8.2", "", { "dependencies": { "@clack/prompts": "^1.5.1", "commander": "^15.0.0", "cross-spawn": "^7.0.6", "deepmerge": "^4.3.1", "glob": "^13.0.6", "jsonc-parser": "^3.3.1", "nypm": "^0.6.6", "yaml": "^2.9.0", "zod": "^4.4.3" }, "peerDependencies": { "oxfmt": ">=0.1.0", "oxlint": "^1.0.0" }, "optionalPeers": ["oxfmt", "oxlint"], "bin": { "ultracite": "dist/index.js" } }, "sha512-+XeWzAEsewEr/kM686bOIWWt5DN+Pww4JUEOQUqOx4p/Pi58FWV+vPtEo2wi5WVWSgIkf8NzfTWGXmJjdqMl8g=="],
 
     "unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "has-bigints": "^1.0.2", "has-symbols": "^1.1.0", "which-boxed-primitive": "^1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
@@ -1887,18 +1984,28 @@
 
     "which-collection": ["which-collection@1.0.2", "", { "dependencies": { "is-map": "^2.0.3", "is-set": "^2.0.3", "is-weakmap": "^2.0.2", "is-weakset": "^2.0.3" } }, "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw=="],
 
+    "which-module": ["which-module@2.0.1", "", {}, "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="],
+
     "which-typed-array": ["which-typed-array@1.1.22", "", { "dependencies": { "available-typed-arrays": "^1.0.7", "call-bind": "^1.0.9", "call-bound": "^1.0.4", "for-each": "^0.3.5", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-tostringtag": "^1.0.2" } }, "sha512-fvO4ExWMFsqyhG3AiPAObMuY1lxaqgYcxbc49CNdWDDECOJNgQyvsOWVwbZc+qf3rzRtxojBK+CMEv0Ld5CYpw=="],
 
     "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
 
+    "wrap-ansi": ["wrap-ansi@6.2.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA=="],
+
     "wrappy": ["wrappy@1.0.2", "", {}, "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="],
 
     "ws": ["ws@8.21.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g=="],
 
+    "y18n": ["y18n@4.0.3", "", {}, "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="],
+
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
     "yaml": ["yaml@2.9.0", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA=="],
 
+    "yargs": ["yargs@15.4.1", "", { "dependencies": { "cliui": "^6.0.0", "decamelize": "^1.2.0", "find-up": "^4.1.0", "get-caller-file": "^2.0.1", "require-directory": "^2.1.1", "require-main-filename": "^2.0.0", "set-blocking": "^2.0.0", "string-width": "^4.2.0", "which-module": "^2.0.0", "y18n": "^4.0.0", "yargs-parser": "^18.1.2" } }, "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A=="],
+
+    "yargs-parser": ["yargs-parser@18.1.3", "", { "dependencies": { "camelcase": "^5.0.0", "decamelize": "^1.2.0" } }, "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ=="],
+
     "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
 
     "yoctocolors": ["yoctocolors@2.1.2", "", {}, "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug=="],
@@ -1921,10 +2028,18 @@
 
     "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
 
+    "@oxc-parser/binding-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" } }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
+
     "@oxc-parser/binding-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
 
+    "@oxc-parser/binding-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
+
+    "@oxc-resolver/binding-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" } }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
+
     "@oxc-resolver/binding-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
 
+    "@oxc-resolver/binding-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
+
     "@react-grab/cli/commander": ["commander@14.0.3", "", {}, "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw=="],
 
     "@react-grab/cli/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
@@ -1979,6 +2094,10 @@
 
     "ora/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
 
+    "ora/string-width": ["string-width@8.2.1", "", { "dependencies": { "get-east-asian-width": "^1.5.0", "strip-ansi": "^7.1.2" } }, "sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA=="],
+
+    "otpauth/@noble/hashes": ["@noble/hashes@2.2.0", "", {}, "sha512-IYqDGiTXab6FniAgnSdZwgWbomxpy9FtYvLKs7wCUs2a8RkITG+DFGO1DM9cr+E3/RgADRpFjrKVaJ1z6sjtEg=="],
+
     "oxlint-plugin-react-doctor/eslint-scope": ["eslint-scope@9.1.2", "", { "dependencies": { "@types/esrecurse": "^4.3.1", "@types/estree": "^1.0.8", "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ=="],
 
     "oxlint-plugin-react-doctor/eslint-visitor-keys": ["eslint-visitor-keys@5.0.1", "", {}, "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA=="],
@@ -2003,8 +2122,14 @@
 
     "type-is/content-type": ["content-type@2.0.0", "", {}, "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ=="],
 
+    "yargs/find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
+
     "@eslint/eslintrc/ajv/json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
 
+    "@oxc-parser/binding-wasm32-wasi/@emnapi/core/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
+
+    "@oxc-resolver/binding-wasm32-wasi/@emnapi/core/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
+
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@5.0.6", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g=="],
 
     "deslop-js/fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
@@ -2017,12 +2142,22 @@
 
     "next/postcss/nanoid": ["nanoid@3.3.12", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ=="],
 
+    "ora/string-width/strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
+
     "react-doctor/agent-install/commander": ["commander@14.0.3", "", {}, "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw=="],
 
+    "yargs/find-up/locate-path": ["locate-path@5.0.0", "", { "dependencies": { "p-locate": "^4.1.0" } }, "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g=="],
+
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
     "deslop-js/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
     "glob/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
+
+    "ora/string-width/strip-ansi/ansi-regex": ["ansi-regex@6.2.2", "", {}, "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg=="],
+
+    "yargs/find-up/locate-path/p-locate": ["p-locate@4.1.0", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],
+
+    "yargs/find-up/locate-path/p-locate/p-limit": ["p-limit@2.3.0", "", { "dependencies": { "p-try": "^2.0.0" } }, "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w=="],
   }
 }
diff --git a/package.json b/package.json
index 7c318deab..b2b496990 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "editor",
   "private": true,
   "scripts": {
-    "build": "turbo run build",
+    "build": "rm -rf node_modules apps/editor/node_modules apps/ifc-converter/node_modules packages/*/node_modules tooling/*/node_modules && bun install --linker=hoisted && chmod -R +x node_modules/.bin node_modules/@turbo && turbo run build --filter=editor && mkdir -p apps/editor/.next/standalone/apps/editor/public apps/editor/.next/standalone/apps/editor/.next/static && cp -r apps/editor/public/. apps/editor/.next/standalone/apps/editor/public/ && cp -r apps/editor/.next/static/. apps/editor/.next/standalone/apps/editor/.next/static/ && cp apps/editor/hostinger-server.js apps/editor/.next/standalone/server.js",
     "dev": "set -a && . ./.env 2>/dev/null; set +a; turbo run dev --env-mode=loose",
     "lint": "biome lint",
     "lint:fix": "biome lint --write",
@@ -11,6 +11,7 @@
     "check": "biome check",
     "check:fix": "biome check --write",
     "check-types": "turbo run check-types",
+    "sync-panel": "node scripts/sync-panel.mjs",
     "kill": "lsof -ti:3002 | xargs kill -9 2>/dev/null || echo 'No processes found on port 3002'",
     "clean:cache": "rm -rf apps/*/.next apps/*/.swc apps/*/.turbo packages/*/.turbo tooling/*/.turbo .turbo node_modules/.cache",
     "restart": "bun kill && bun clean:cache && bun dev",
diff --git a/packages/core/src/lib/asset-storage.ts b/packages/core/src/lib/asset-storage.ts
index 72f577a34..5681e4cb1 100644
--- a/packages/core/src/lib/asset-storage.ts
+++ b/packages/core/src/lib/asset-storage.ts
@@ -5,11 +5,28 @@ export const ASSET_PREFIX = 'asset_data:'
 // Cache for active object URLs to prevent leaks and flickering
 const urlCache = new Map<string, string>()
 
+/**
+ * `crypto.randomUUID` exists only in secure contexts, and an editor served
+ * over plain http on a LAN is not one — the first line of every upload threw
+ * `TypeError` and the user saw "Could not add that guide image" with no cause.
+ * `getRandomValues` is NOT secure-context-gated, so the fallback keeps the
+ * same entropy; the id only needs uniqueness, never secrecy.
+ */
+function randomAssetId(): string {
+  const webCrypto = globalThis.crypto
+  if (webCrypto?.randomUUID) return webCrypto.randomUUID()
+  const bytes = webCrypto?.getRandomValues?.(new Uint8Array(16))
+  if (bytes) {
+    return Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join('')
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`
+}
+
 /**
  * Save a file to IndexedDB and return a custom protocol URL
  */
 export async function saveAsset(file: File): Promise<string> {
-  const id = crypto.randomUUID()
+  const id = randomAssetId()
   await set(`${ASSET_PREFIX}${id}`, file)
   return `asset://${id}`
 }
diff --git a/packages/core/src/registry/subtree.ts b/packages/core/src/registry/subtree.ts
index e41cd114c..2d92b33af 100644
--- a/packages/core/src/registry/subtree.ts
+++ b/packages/core/src/registry/subtree.ts
@@ -31,7 +31,11 @@ export type Subtree = {
 }
 
 function extractIdPrefix(id: string): string {
-  const i = id.indexOf('_')
+  // The LAST underscore: `generateId` suffixes never contain one, so this
+  // recovers the exact prefix even when the prefix itself does — a plugin
+  // kind's `pallet_rack_<suffix>` must clone as `pallet_rack_*`, and the
+  // first-underscore split minted `pallet_*`, which its schema rejects.
+  const i = id.lastIndexOf('_')
   return i === -1 ? 'node' : id.slice(0, i)
 }
 
diff --git a/packages/core/src/utils/clone-scene-graph.ts b/packages/core/src/utils/clone-scene-graph.ts
index e48f13e83..27b602205 100644
--- a/packages/core/src/utils/clone-scene-graph.ts
+++ b/packages/core/src/utils/clone-scene-graph.ts
@@ -15,10 +15,16 @@ export type SceneGraph = {
 }
 
 /**
- * Extracts the type prefix from a node ID (e.g., "wall_abc123" -> "wall")
+ * Extracts the type prefix from a node ID (e.g., "wall_abc123" -> "wall").
+ *
+ * The LAST underscore, because `generateId` suffixes are drawn from `0-9a-z`
+ * and never contain one — so this recovers the exact prefix even when the
+ * prefix itself does (a plugin kind's `pallet_rack_abc123` -> `pallet_rack`).
+ * Splitting at the first underscore cloned those as `pallet_*`, which the
+ * kind's own schema rejects.
  */
 function extractIdPrefix(id: string): string {
-  const underscoreIndex = id.indexOf('_')
+  const underscoreIndex = id.lastIndexOf('_')
   return underscoreIndex === -1 ? 'node' : id.slice(0, underscoreIndex)
 }
 
diff --git a/packages/editor/src/components/tools/shared/drag-bounding-box.tsx b/packages/editor/src/components/tools/shared/drag-bounding-box.tsx
index f487fb405..92ad2a9aa 100644
--- a/packages/editor/src/components/tools/shared/drag-bounding-box.tsx
+++ b/packages/editor/src/components/tools/shared/drag-bounding-box.tsx
@@ -22,6 +22,70 @@ const NO_RAYCAST = () => null
 /** green-500 — matches the item placement box's "placeable" state. */
 const DEFAULT_COLOR = 0x22_c5_5e
 
+/**
+ * Module-level unit geometry, scaled per frame through the mesh transform —
+ * NEVER rebuilt or disposed mid-drag.
+ *
+ * The previous version minted a `BoxGeometry`/`PlaneGeometry` per dimension
+ * change and disposed the old one in an effect cleanup. During a resize drag
+ * that is once per frame, and WebGPU may still be executing the command
+ * buffer that references the disposed buffers — the renderer then drops the
+ * ENTIRE frame's command buffer ("Vertex buffer slot … was not set"), which
+ * blanks the whole scene for a frame, not just this overlay. Unit geometry +
+ * `scale` moves the per-frame change into the object matrix, where it
+ * belongs, and the shared buffers live for the session.
+ */
+const UNIT_EDGES = (() => {
+  const box = new BoxGeometry(1, 1, 1)
+  const edges = new EdgesGeometry(box)
+  box.dispose()
+  return edges
+})()
+
+const UNIT_PLANE = (() => {
+  const plane = new PlaneGeometry(1, 1)
+  plane.rotateX(-Math.PI / 2)
+  return plane
+})()
+
+/**
+ * Materials by colour — two in practice (placeable green / blocked red).
+ * Cached for the same reason the geometry is shared: disposing a material the
+ * in-flight pass still references is the same command-buffer drop, and a
+ * colour flip happens mid-drag by design.
+ */
+const edgeMaterials = new Map<number, LineBasicNodeMaterial>()
+const planeMaterials = new Map<number, MeshBasicNodeMaterial>()
+
+function getEdgeMaterial(color: number): LineBasicNodeMaterial {
+  let material = edgeMaterials.get(color)
+  if (!material) {
+    material = new LineBasicNodeMaterial({
+      color,
+      linewidth: 3,
+      depthTest: false,
+      depthWrite: false,
+    })
+    edgeMaterials.set(color, material)
+  }
+  return material
+}
+
+function getPlaneMaterial(color: number): MeshBasicNodeMaterial {
+  let material = planeMaterials.get(color)
+  if (!material) {
+    material = new MeshBasicNodeMaterial({
+      color,
+      transparent: true,
+      depthTest: false,
+      depthWrite: false,
+    })
+    material.opacityNode = smoothstep(0, 0.7, distance(uv(), vec2(0.5, 0.5))).mul(0.6)
+    planeMaterials.set(color, material)
+  }
+  return material
+}
+
 type LocalBounds = { size: [number, number, number]; center: [number, number, number] }
 
 /**
@@ -113,47 +177,8 @@ export function DragBoundingBox({
   const minY = cy - h / 2
   const groundY = minY + 0.01
 
-  const edgeGeometry = useMemo(() => {
-    const box = new BoxGeometry(w, h, d)
-    const edges = new EdgesGeometry(box)
-    box.dispose()
-    return edges
-  }, [w, h, d])
-
-  // Flat on the ground (XZ) at the box's base, nudged up 0.01m to avoid
-  // z-fighting with slabs.
-  const planeGeometry = useMemo(() => {
-    const plane = new PlaneGeometry(w, d)
-    plane.rotateX(-Math.PI / 2)
-    plane.translate(cx, groundY, cz)
-    return plane
-  }, [w, d, cx, groundY, cz])
-
-  const edgeMaterial = useMemo(
-    () => new LineBasicNodeMaterial({ color, linewidth: 3, depthTest: false, depthWrite: false }),
-    [color],
-  )
-
-  const planeMaterial = useMemo(() => {
-    const material = new MeshBasicNodeMaterial({
-      color,
-      transparent: true,
-      depthTest: false,
-      depthWrite: false,
-    })
-    material.opacityNode = smoothstep(0, 0.7, distance(uv(), vec2(0.5, 0.5))).mul(0.6)
-    return material
-  }, [color])
-
-  useEffect(
-    () => () => {
-      edgeGeometry.dispose()
-      planeGeometry.dispose()
-      edgeMaterial.dispose()
-      planeMaterial.dispose()
-    },
-    [edgeGeometry, planeGeometry, edgeMaterial, planeMaterial],
-  )
+  const edgeMaterial = getEdgeMaterial(color)
+  const planeMaterial = getPlaneMaterial(color)
 
   // Publish the facing pose to the editor-side overlay (the single triangle
   // renderer) rather than drawing it here. The node origin is `position`; the
@@ -176,19 +201,22 @@ export function DragBoundingBox({
   return (
     <group position={position} rotation={[0, rotationY, 0]}>
       <mesh
-        geometry={planeGeometry}
+        geometry={UNIT_PLANE}
         layers={EDITOR_LAYER}
         material={planeMaterial}
+        position={[cx, groundY, cz]}
         raycast={NO_RAYCAST}
         renderOrder={999}
+        scale={[w, 1, d]}
       />
       <lineSegments
-        geometry={edgeGeometry}
+        geometry={UNIT_EDGES}
         layers={EDITOR_LAYER}
         material={edgeMaterial}
         position={[cx, cy, cz]}
         raycast={NO_RAYCAST}
         renderOrder={999}
+        scale={[w, h, d]}
       />
     </group>
   )
diff --git a/packages/editor/src/components/ui/action-menu/view-toggles.tsx b/packages/editor/src/components/ui/action-menu/view-toggles.tsx
index e3023323c..aa9dd7ec1 100644
--- a/packages/editor/src/components/ui/action-menu/view-toggles.tsx
+++ b/packages/editor/src/components/ui/action-menu/view-toggles.tsx
@@ -119,8 +119,15 @@ function UploadButton({ onError }: { onError: (message: string | null) => void }
           setShowGuides(true)
           setSelectedReferenceId(guide.id)
           setSelection({ selectedIds: [], zoneId: null })
-        } catch {
-          onError('Could not add that guide image.')
+        } catch (error) {
+          // The reason must survive: this path swallowed a secure-context
+          // TypeError for a whole debugging session.
+          console.error('[guide-image]', error)
+          onError(
+            error instanceof Error && error.message
+              ? `Could not add that guide image: ${error.message}`
+              : 'Could not add that guide image.',
+          )
         } finally {
           setIsAddingGuide(false)
         }
diff --git a/packages/editor/src/components/ui/controls/material-picker.tsx b/packages/editor/src/components/ui/controls/material-picker.tsx
index 328a63d21..cf272cf56 100644
--- a/packages/editor/src/components/ui/controls/material-picker.tsx
+++ b/packages/editor/src/components/ui/controls/material-picker.tsx
@@ -30,7 +30,7 @@ export type MaterialPickerProps = {
 
 const SOURCE_FILTERS: { id: MaterialSourceFilter; label: string }[] = [
   { id: 'all', label: 'All' },
-  { id: 'pascal', label: 'Pascal' },
+  { id: 'pascal', label: 'DigitalTwin' },
   { id: 'mine', label: 'Mine' },
   { id: 'workspace', label: 'Workspace' },
   { id: 'community', label: 'Community' },
diff --git a/packages/editor/src/components/ui/sidebar/panels/plugins-panel.tsx b/packages/editor/src/components/ui/sidebar/panels/plugins-panel.tsx
index 6dd265c9a..787d4b2bd 100644
--- a/packages/editor/src/components/ui/sidebar/panels/plugins-panel.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/plugins-panel.tsx
@@ -151,7 +151,7 @@ export function PluginsPanel() {
             rel="noreferrer"
             target="_blank"
           >
-            Create a Pascal plugin
+            Create a DigitalTwin plugin
             <ExternalLink className="h-3.5 w-3.5" />
           </a>
         </div>
@@ -209,7 +209,7 @@ export function PluginsPanel() {
           rel="noreferrer"
           target="_blank"
         >
-          Create a Pascal plugin
+          Create a DigitalTwin plugin
           <ExternalLink className="h-3.5 w-3.5" />
         </a>
       </div>
diff --git a/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx
index e1ad6a8c6..284cbffa5 100644
--- a/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/settings-panel/index.tsx
@@ -9,6 +9,7 @@ import { TreeView, VisualJson } from '@visual-json/react'
 import { Camera, Download, Map as MapIcon, Save, Trash2, Upload } from 'lucide-react'
 import {
   type KeyboardEvent,
+  type ReactNode,
   type SyntheticEvent,
   useCallback,
   useMemo,
@@ -176,12 +177,19 @@ export interface SettingsPanelProps {
     field: 'isPrivate' | 'showScansPublic' | 'showGuidesPublic',
     value: boolean,
   ) => Promise<void>
+  /**
+   * Host-owned account section (who is signed in, their access, a way out) —
+   * rendered above everything else. The host owns identity and sessions, not
+   * this package, so it is a slot rather than a built-in section.
+   */
+  accountSection?: ReactNode
 }
 
 export function SettingsPanel({
   projectId,
   projectVisibility,
   onVisibilityChange,
+  accountSection,
 }: SettingsPanelProps = {}) {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const nodes = useScene((state) => state.nodes)
@@ -194,6 +202,7 @@ export function SettingsPanel({
   const shadows = useViewer((state) => state.shadows)
   const setPhase = useEditor((state) => state.setPhase)
   const floorplanMode = useFloorplanMode((state) => state.mode)
+  const setFloorplanMode = useFloorplanMode((state) => state.setMode)
   const [isGeneratingThumbnail, setIsGeneratingThumbnail] = useState(false)
   const [pendingImport, setPendingImport] = useState<PendingImport | null>(null)
   const sceneGraphValue = useMemo(
@@ -319,6 +328,8 @@ export function SettingsPanel({
 
   return (
     <div className="flex flex-col gap-6 p-3">
+      {accountSection}
+
       {/* Visibility Section (only for cloud projects) */}
       {projectId && !isLocalProject && (
         <div className="space-y-3">
@@ -403,7 +414,18 @@ export function SettingsPanel({
         <div className="space-y-2">
           <div className="flex items-center justify-between font-medium text-muted-foreground text-xs">
             <span>Floor plan</span>
-            <span>{floorplanMode === 'default' ? 'Default mode' : 'Expert mode'}</span>
+            <span className="flex items-center gap-2">
+              {floorplanMode === 'default' ? 'Default mode' : 'Expert mode'}
+              {floorplanMode === 'expert' && (
+                <Button
+                  className="h-auto w-auto justify-start p-0 font-medium text-primary text-xs underline"
+                  onClick={() => setFloorplanMode('default')}
+                  variant="link"
+                >
+                  Switch to Default
+                </Button>
+              )}
+            </span>
           </div>
           <Button
             className="w-full justify-start gap-2"
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
index 87a6352b4..fad8cfa74 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
@@ -493,8 +493,16 @@ const LevelReferences = memo(function LevelReferences({
         setSelection({ selectedIds: [], zoneId: null })
         useUploadStore.getState().setResult(levelId, guide.url)
         window.setTimeout(() => useUploadStore.getState().clearUpload(levelId), 600)
-      } catch {
-        useUploadStore.getState().setError(levelId, 'Could not add that guide image.')
+      } catch (error) {
+        console.error('[guide-image]', error)
+        useUploadStore
+          .getState()
+          .setError(
+            levelId,
+            error instanceof Error && error.message
+              ? `Could not add that guide image: ${error.message}`
+              : 'Could not add that guide image.',
+          )
       }
       return
     }
diff --git a/packages/editor/src/lib/scene-clipboard.test.ts b/packages/editor/src/lib/scene-clipboard.test.ts
index 9117e4857..2a33b50fb 100644
--- a/packages/editor/src/lib/scene-clipboard.test.ts
+++ b/packages/editor/src/lib/scene-clipboard.test.ts
@@ -1,6 +1,7 @@
-import { beforeEach, describe, expect, mock, test } from 'bun:test'
+import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test'
 import {
   type AnyNode,
+  type AnyNodeDefinition,
   type AnyNodeId,
   CabinetModuleNode,
   type CabinetModuleNode as CabinetModuleNodeType,
@@ -8,6 +9,8 @@ import {
   type CabinetNode as CabinetNodeType,
   type LevelNode,
   MeasurementNode,
+  nodeRegistry,
+  registerNode,
   SceneMaterial,
   type SceneMaterialId,
   useScene,
@@ -15,6 +18,7 @@ import {
   WindowNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
+import { z } from 'zod'
 import {
   copySelectedNodesToEditorClipboard,
   getEditorClipboardSnapshot,
@@ -104,6 +108,12 @@ describe('scene clipboard', () => {
     useScene.temporal.getState().clear()
   })
 
+  // The plugin-kind test registers a definition; drop it so it can't leak into
+  // any other test's registry lookups.
+  afterEach(() => {
+    nodeRegistry._reset()
+  })
+
   test('copies a selected cabinet run as one subtree instead of independent modules', () => {
     const copied = copySelectedNodesToEditorClipboard([runId, leftModuleId, rightModuleId])
 
@@ -294,6 +304,71 @@ describe('scene clipboard', () => {
     }
   })
 
+  test('duplicates a plugin-contributed kind that AnyNode cannot describe', () => {
+    // `AnyNode` is a hand-maintained union of built-in kinds, so a plugin kind
+    // can never be a member of it — the registry validates those against
+    // `def.schema` instead. Registering one here reproduces exactly what a
+    // plugin does at load time; before the registry fallback this copy threw
+    // `invalid_union / no matching discriminator` and duplicate silently failed
+    // for every plugin, including the first-party trees pack.
+    const PluginNode = z.object({
+      object: z.literal('node').default('node'),
+      id: z.string(),
+      type: z.literal('warehouse:pallet').default('warehouse:pallet'),
+      name: z.string().optional(),
+      parentId: z.string().nullable().default(null),
+      visible: z.boolean().optional().default(true),
+      metadata: z.json().optional().default({}),
+      position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
+      rotation: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
+      preset: z.string().default('epal-1'),
+    })
+    registerNode({
+      kind: 'warehouse:pallet',
+      schemaVersion: 1,
+      schema: PluginNode,
+      category: 'furnish',
+      defaults: () => ({}),
+      capabilities: { duplicable: true, deletable: true },
+    } as unknown as AnyNodeDefinition)
+
+    // Deliberately an id whose *prefix* contains an underscore. Plugin kinds
+    // routinely have one — `pallet_rack_<suffix>` — and `extractIdPrefix` split
+    // at the first underscore, so a pasted rack came back as `pallet_<suffix>`,
+    // matched no kind, and the paste failed with a bare console error.
+    const pluginNodeId = 'pallet_rack_clipboard' as AnyNodeId
+    const pluginNode = PluginNode.parse({
+      id: pluginNodeId,
+      parentId: sourceLevelId,
+      position: [2, 0, 1],
+      preset: 'epal-2',
+    }) as unknown as AnyNode
+    useScene.setState((state) => ({
+      nodes: {
+        ...state.nodes,
+        [sourceLevelId]: makeLevel(sourceLevelId, [pluginNodeId]),
+        [pluginNodeId]: pluginNode,
+      },
+    }))
+
+    expect(copySelectedNodesToEditorClipboard([pluginNodeId])).toBe(true)
+
+    const result = pasteEditorClipboardToLevel(targetLevelId)
+    expect(result?.pastedIds).toHaveLength(1)
+
+    const pastedId = result?.pastedIds[0]
+    const pasted = pastedId ? useScene.getState().nodes[pastedId] : undefined
+    // `type` is typed as the built-in union, which a plugin kind can never be a
+    // member of — that is the whole premise of this test.
+    expect(pasted?.type as string | undefined).toBe('warehouse:pallet')
+    expect(pasted?.id).not.toBe(pluginNodeId)
+    expect(pasted?.id.startsWith('pallet_rack_')).toBe(true)
+    expect(pasted?.parentId).toBe(targetLevelId)
+    // The registry schema — not `AnyNode` — is what validated it, so kind-owned
+    // fields have to survive the round trip.
+    expect((pasted as unknown as { preset?: string } | undefined)?.preset).toBe('epal-2')
+  })
+
   test('waits for an in-flight copy before reading the browser clipboard', async () => {
     let systemClipboardText = 'older clipboard contents'
     let finishWrite!: () => void
diff --git a/packages/editor/src/lib/scene-clipboard.ts b/packages/editor/src/lib/scene-clipboard.ts
index 081836c33..49d274da7 100644
--- a/packages/editor/src/lib/scene-clipboard.ts
+++ b/packages/editor/src/lib/scene-clipboard.ts
@@ -13,6 +13,27 @@ import {
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 
+/**
+ * Validate a node on its way through the clipboard.
+ *
+ * `AnyNode` is the hand-maintained union of built-in kinds, so a
+ * plugin-contributed kind can never be a member of it — the registry validates
+ * those against `def.schema` at runtime instead. Parsing with `AnyNode` alone
+ * therefore rejects every plugin node, which makes `capabilities.duplicable`
+ * unhonourable for plugins including the first-party `pascal:trees` pack.
+ *
+ * Built-in behaviour is unchanged: `AnyNode` is still tried first, and a type
+ * that is neither built-in nor registered still raises the original error.
+ */
+function parseClipboardNode(candidate: unknown): AnyNode {
+  const builtin = AnyNode.safeParse(candidate)
+  if (builtin.success) return builtin.data
+  const type = (candidate as { type?: unknown } | null)?.type
+  const definition = typeof type === 'string' ? nodeRegistry.get(type) : undefined
+  if (definition) return definition.schema.parse(candidate) as AnyNode
+  throw builtin.error
+}
+
 type ClipboardPayload = {
   copiedAt: number
   materials: SceneMaterial[]
@@ -73,7 +94,13 @@ export function hasEditorClipboard() {
 }
 
 function extractIdPrefix(id: string) {
-  const underscoreIndex = id.indexOf('_')
+  // The LAST underscore, not the first: `generateId` appends a suffix drawn
+  // from `0-9a-z` (never `_`), so everything before the last underscore is
+  // exactly the prefix — including prefixes that themselves contain one, like
+  // the plugin kind id `pallet_rack_<suffix>`. Splitting at the first
+  // underscore minted duplicates as `pallet_<suffix>`, which the kind's own
+  // schema then rejected, and every paste of that node was silently skipped.
+  const underscoreIndex = id.lastIndexOf('_')
   return underscoreIndex === -1 ? 'node' : id.slice(0, underscoreIndex)
 }
 
@@ -250,7 +277,7 @@ function remapNodeReferences(
   delete metadata.isTransient
   ;(clone as Record<string, unknown>).metadata = metadata
 
-  return AnyNode.parse(clone)
+  return parseClipboardNode(clone)
 }
 
 function remapSceneMaterialReferences(
@@ -374,7 +401,13 @@ function parseClipboardPayload(text: string): ClipboardPayload | null {
       return null
     }
 
-    const nodes = candidate.nodes.map((node) => AnyNode.safeParse(node))
+    const nodes = candidate.nodes.map((node) => {
+      try {
+        return { success: true as const, data: parseClipboardNode(node) }
+      } catch {
+        return { success: false as const, data: undefined }
+      }
+    })
     if (nodes.some((result) => !result.success)) return null
     const materials = Array.isArray(candidate.materials)
       ? candidate.materials.map((material) => SceneMaterial.safeParse(material))
diff --git a/packages/mcp/package.json b/packages/mcp/package.json
index bdfbe3ae1..133698326 100644
--- a/packages/mcp/package.json
+++ b/packages/mcp/package.json
@@ -16,6 +16,11 @@
       "import": "./dist/server.js",
       "default": "./dist/server.js"
     },
+    "./env": {
+      "types": "./dist/lib/env.d.ts",
+      "import": "./dist/lib/env.js",
+      "default": "./dist/lib/env.js"
+    },
     "./storage": {
       "types": "./dist/storage/index.d.ts",
       "import": "./dist/storage/index.js",
@@ -60,6 +65,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@pascal-app/lingo": "^0.2.0",
+    "mysql2": "^3.15.4",
     "zod": "^4.3.5"
   },
   "devDependencies": {
diff --git a/packages/mcp/src/lib/env.ts b/packages/mcp/src/lib/env.ts
new file mode 100644
index 000000000..12b191797
--- /dev/null
+++ b/packages/mcp/src/lib/env.ts
@@ -0,0 +1,13 @@
+/**
+ * Configuration is read as `DIGITALTWIN_<NAME>`, falling back to the older
+ * `PASCAL_<NAME>` so existing deployments keep working. Empty or whitespace
+ * values count as unset — control panels often save a blank field rather than
+ * omitting the variable.
+ */
+export function readEnv(env: NodeJS.ProcessEnv, name: string): string | undefined {
+  for (const key of [`DIGITALTWIN_${name}`, `PASCAL_${name}`]) {
+    const value = env[key]?.trim()
+    if (value) return value
+  }
+  return undefined
+}
diff --git a/packages/mcp/src/storage/index.ts b/packages/mcp/src/storage/index.ts
index 36e48835e..3e0f6d884 100644
--- a/packages/mcp/src/storage/index.ts
+++ b/packages/mcp/src/storage/index.ts
@@ -1,17 +1,59 @@
-import type { SceneStore } from './types'
+import { readEnv } from '../lib/env'
+import { resolveMysqlUrl } from './mysql-scene-store'
+import { SceneInvalidError, type SceneStore } from './types'
 
+export { readEnv } from '../lib/env'
+export * from './mysql-scene-store'
 export * from './slug'
 export * from './sqlite-scene-store'
 export * from './types'
 
 /**
- * Factory for Pascal's local-first scene store.
+ * Factory for the scene store.
  *
- * The store is backed by the runtime's built-in SQLite driver. By default it
- * writes to `~/.pascal/data/pascal.db`; set `PASCAL_DB_PATH` for an exact file
- * path or `PASCAL_DATA_DIR` for a directory containing `pascal.db`.
+ * Defaults to the local-first SQLite backend; set `DIGITALTWIN_DB_PATH` for an
+ * exact file path or `DIGITALTWIN_DATA_DIR` for a directory to hold it.
+ *
+ * Set `DIGITALTWIN_MYSQL_URL` (or the HOST/USER/DATABASE trio) to store scenes
+ * in MySQL. In production MySQL is required: a host's filesystem rarely
+ * survives a redeploy, so silently writing to a local file loses every scene.
+ * Set `DIGITALTWIN_ALLOW_SQLITE=1` to override for throwaway production runs.
  */
 export async function createSceneStore(env?: NodeJS.ProcessEnv): Promise<SceneStore> {
+  const resolved = env ?? process.env
+  const mysqlUrl = resolveMysqlUrl(resolved)
+  if (mysqlUrl) {
+    const mod = await import('./mysql-scene-store')
+    const store = new mod.MysqlSceneStore({ env })
+    console.log(`[digitaltwin:storage] backend=mysql ${describeMysqlTarget(mysqlUrl)}`)
+    return store
+  }
+
+  if (resolved.NODE_ENV === 'production' && readEnv(resolved, 'ALLOW_SQLITE') !== '1') {
+    throw new SceneInvalidError(
+      'No MySQL configuration found, and the SQLite fallback is disabled in production ' +
+        'because scenes written to the local filesystem are lost on redeploy. ' +
+        'Set DIGITALTWIN_MYSQL_URL (mysql://user:password@host:3306/database) or all of ' +
+        'DIGITALTWIN_MYSQL_HOST, DIGITALTWIN_MYSQL_USER and DIGITALTWIN_MYSQL_DATABASE ' +
+        '(plus DIGITALTWIN_MYSQL_PASSWORD/_PORT as needed). ' +
+        'Only set DIGITALTWIN_ALLOW_SQLITE=1 for a throwaway local production run.',
+    )
+  }
+
   const mod = await import('./sqlite-scene-store')
-  return new mod.SqliteSceneStore({ env })
+  const store = new mod.SqliteSceneStore({ env })
+  console.log(
+    `[digitaltwin:storage] backend=sqlite path=${store.databasePath} (set DIGITALTWIN_MYSQL_URL to use MySQL)`,
+  )
+  return store
+}
+
+/** Host and database only — the URL carries a password. */
+function describeMysqlTarget(url: string): string {
+  try {
+    const parsed = new URL(url)
+    return `host=${parsed.hostname}:${parsed.port || '3306'} database=${parsed.pathname.replace(/^\//, '')}`
+  } catch {
+    return 'target=unparseable'
+  }
 }
diff --git a/packages/mcp/src/storage/mysql-scene-store.test.ts b/packages/mcp/src/storage/mysql-scene-store.test.ts
new file mode 100644
index 000000000..79630527e
--- /dev/null
+++ b/packages/mcp/src/storage/mysql-scene-store.test.ts
@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'bun:test'
+import { createSceneStore } from './index'
+import { resolveMysqlUrl } from './mysql-scene-store'
+import { SceneInvalidError } from './types'
+
+describe('resolveMysqlUrl', () => {
+  it('returns undefined when nothing is configured', () => {
+    expect(resolveMysqlUrl({})).toBeUndefined()
+  })
+
+  it('treats an empty or whitespace URL as unset', () => {
+    expect(resolveMysqlUrl({ DIGITALTWIN_MYSQL_URL: '' })).toBeUndefined()
+    expect(resolveMysqlUrl({ DIGITALTWIN_MYSQL_URL: '   ' })).toBeUndefined()
+  })
+
+  it('passes a URL through', () => {
+    expect(resolveMysqlUrl({ DIGITALTWIN_MYSQL_URL: 'mysql://u:p@h:3306/d' })).toBe(
+      'mysql://u:p@h:3306/d',
+    )
+  })
+
+  it('still accepts the older PASCAL_ names', () => {
+    expect(resolveMysqlUrl({ PASCAL_MYSQL_URL: 'mysql://u:p@h:3306/d' })).toBe(
+      'mysql://u:p@h:3306/d',
+    )
+    expect(
+      resolveMysqlUrl({
+        PASCAL_MYSQL_HOST: 'h',
+        PASCAL_MYSQL_USER: 'u',
+        PASCAL_MYSQL_DATABASE: 'd',
+      }),
+    ).toBe('mysql://u:@h:3306/d')
+  })
+
+  it('prefers the DIGITALTWIN_ name when both are set', () => {
+    expect(
+      resolveMysqlUrl({
+        DIGITALTWIN_MYSQL_URL: 'mysql://new:p@h:3306/d',
+        PASCAL_MYSQL_URL: 'mysql://old:p@h:3306/d',
+      }),
+    ).toBe('mysql://new:p@h:3306/d')
+  })
+
+  it('composes the discrete fields, percent-encoding credentials', () => {
+    const url = resolveMysqlUrl({
+      DIGITALTWIN_MYSQL_HOST: 'db.example',
+      DIGITALTWIN_MYSQL_USER: 'user',
+      DIGITALTWIN_MYSQL_PASSWORD: 'p@ss:w/rd',
+      DIGITALTWIN_MYSQL_DATABASE: 'scenes',
+    })
+    expect(url).toBe('mysql://user:p%40ss%3Aw%2Frd@db.example:3306/scenes')
+  })
+
+  it('defaults the port to 3306', () => {
+    const url = resolveMysqlUrl({
+      DIGITALTWIN_MYSQL_HOST: 'h',
+      DIGITALTWIN_MYSQL_USER: 'u',
+      DIGITALTWIN_MYSQL_DATABASE: 'd',
+    })
+    expect(url).toContain('@h:3306/d')
+  })
+
+  it('throws, rather than silently falling back, on a partial trio', () => {
+    expect(() =>
+      resolveMysqlUrl({ DIGITALTWIN_MYSQL_HOST: 'h', DIGITALTWIN_MYSQL_USER: 'u' }),
+    ).toThrow(SceneInvalidError)
+    try {
+      resolveMysqlUrl({ DIGITALTWIN_MYSQL_HOST: 'h', DIGITALTWIN_MYSQL_USER: 'u' })
+    } catch (err) {
+      expect((err as Error).message).toContain('DIGITALTWIN_MYSQL_DATABASE')
+    }
+  })
+})
+
+describe('createSceneStore production gate', () => {
+  it('refuses to fall back to SQLite in production', async () => {
+    await expect(createSceneStore({ NODE_ENV: 'production', HOME: '/tmp' })).rejects.toThrow(
+      SceneInvalidError,
+    )
+  })
+
+  it('allows SQLite in production with the explicit escape hatch', async () => {
+    const store = await createSceneStore({
+      NODE_ENV: 'production',
+      DIGITALTWIN_ALLOW_SQLITE: '1',
+      HOME: '/tmp/dt-gate-test',
+    })
+    expect(store.backend).toBe('sqlite')
+    await store.close?.()
+  })
+
+  it('uses SQLite in development without configuration', async () => {
+    const store = await createSceneStore({ NODE_ENV: 'development', HOME: '/tmp/dt-gate-test' })
+    expect(store.backend).toBe('sqlite')
+    await store.close?.()
+  })
+})
diff --git a/packages/mcp/src/storage/mysql-scene-store.ts b/packages/mcp/src/storage/mysql-scene-store.ts
new file mode 100644
index 000000000..c34dc9035
--- /dev/null
+++ b/packages/mcp/src/storage/mysql-scene-store.ts
@@ -0,0 +1,737 @@
+import type { SceneGraph } from '@pascal-app/core/clone-scene-graph'
+import { readEnv } from '../lib/env'
+import {
+  assertValidName,
+  DEFAULT_LIST_LIMIT,
+  editorUrlForScene,
+  hashGraphJson,
+  parseGraph,
+  resolveMaxSceneBytes,
+  serializeGraph,
+} from './scene-store-shared'
+import { generateSlug, isValidSlug, sanitizeSlug } from './slug'
+import {
+  type ProjectCreateOptions,
+  type ProjectStatus,
+  type SceneEvent,
+  type SceneEventAppendOptions,
+  type SceneEventListOptions,
+  SceneInvalidError,
+  type SceneListOptions,
+  type SceneMeta,
+  type SceneMutateOptions,
+  SceneNotFoundError,
+  type SceneSaveOptions,
+  type SceneStore,
+  SceneTooLargeError,
+  SceneVersionConflictError,
+  type SceneWithGraph,
+} from './types'
+
+export interface MysqlSceneStoreOptions {
+  /** Connection URL, e.g. `mysql://user:pass@host:3306/database`. Falls back to env. */
+  url?: string
+  /** Optional env override for URL and size-limit resolution. */
+  env?: NodeJS.ProcessEnv
+  /** Maximum UTF-8 byte length of graph JSON. Defaults to 10 MB. */
+  maxSceneBytes?: number
+}
+
+interface SceneRow {
+  id: string
+  name: string
+  project_id: string | null
+  owner_id: string | null
+  thumbnail_url: string | null
+  version: number
+  created_at: string
+  updated_at: string
+  size_bytes: number
+  node_count: number
+  graph_hash: string
+}
+
+interface SceneRowWithGraph extends SceneRow {
+  graph_json: string
+}
+
+interface SceneEventRow {
+  event_id: number
+  scene_id: string
+  version: number
+  kind: string
+  created_at: string
+  graph_json: string
+}
+
+interface ProjectPlaceholder {
+  id: string
+  name: string
+  ownerId: string | null
+  thumbnailUrl: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+/** The slice of `mysql2/promise` this store uses, so the driver stays a dynamic import. */
+interface MysqlQueryable {
+  query(sql: string, values?: unknown[]): Promise<[unknown, unknown]>
+  execute(sql: string, values?: unknown[]): Promise<[unknown, unknown]>
+}
+
+interface MysqlConnection extends MysqlQueryable {
+  beginTransaction(): Promise<void>
+  commit(): Promise<void>
+  rollback(): Promise<void>
+  release(): void
+}
+
+interface MysqlPool extends MysqlQueryable {
+  getConnection(): Promise<MysqlConnection>
+  end(): Promise<void>
+}
+
+const SCENE_COLUMNS =
+  'id, name, project_id, owner_id, thumbnail_url, version, created_at, updated_at, size_bytes, node_count, graph_hash'
+
+/**
+ * Reads the connection target from `DIGITALTWIN_MYSQL_URL`, or assembles one
+ * from `DIGITALTWIN_MYSQL_HOST`/`_USER`/`_PASSWORD`/`_DATABASE`/`_PORT`. The
+ * separate variables exist because control panels hand out those fields
+ * individually, and some mangle a value containing `://` and `@`.
+ *
+ * A partially configured trio throws instead of returning undefined: someone
+ * clearly meant to point at MySQL, and silently falling back to SQLite loses
+ * their data on the next release.
+ */
+export function resolveMysqlUrl(env: NodeJS.ProcessEnv = process.env): string | undefined {
+  const read = (name: string) => readEnv(env, name)
+
+  const raw = read('MYSQL_URL')
+  if (raw) return raw
+
+  const host = read('MYSQL_HOST')
+  const user = read('MYSQL_USER')
+  const database = read('MYSQL_DATABASE')
+  if (!host && !user && !database) return undefined
+  if (!host || !user || !database) {
+    const missing = [
+      !host && 'DIGITALTWIN_MYSQL_HOST',
+      !user && 'DIGITALTWIN_MYSQL_USER',
+      !database && 'DIGITALTWIN_MYSQL_DATABASE',
+    ].filter(Boolean)
+    throw new SceneInvalidError(
+      `Incomplete MySQL configuration: missing ${missing.join(', ')}. ` +
+        'Set all of DIGITALTWIN_MYSQL_HOST, DIGITALTWIN_MYSQL_USER and ' +
+        'DIGITALTWIN_MYSQL_DATABASE (plus DIGITALTWIN_MYSQL_PASSWORD/_PORT as ' +
+        'needed), or a single DIGITALTWIN_MYSQL_URL.',
+    )
+  }
+
+  const password = read('MYSQL_PASSWORD') ?? ''
+  const port = read('MYSQL_PORT') ?? '3306'
+  return `mysql://${encodeURIComponent(user)}:${encodeURIComponent(password)}@${host}:${port}/${database}`
+}
+
+function rows(result: unknown): Record<string, unknown>[] {
+  return Array.isArray(result) ? (result as Record<string, unknown>[]) : []
+}
+
+function firstRow<T>(result: unknown): T | null {
+  const list = rows(result)
+  return list.length > 0 ? (list[0] as T) : null
+}
+
+function rowToMeta(row: SceneRow): SceneMeta {
+  const editorUrl = editorUrlForScene(row.id)
+  return {
+    id: row.id,
+    name: row.name,
+    projectId: row.project_id,
+    ownerId: row.owner_id,
+    thumbnailUrl: row.thumbnail_url,
+    version: Number(row.version),
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+    sizeBytes: Number(row.size_bytes),
+    nodeCount: Number(row.node_count),
+    editorUrl,
+    url: editorUrl,
+    published: true,
+    graphHash: row.graph_hash,
+  }
+}
+
+function rowToProjectStatus(row: SceneRow): ProjectStatus {
+  const editorUrl = editorUrlForScene(row.id)
+  const version = Number(row.version)
+  return {
+    id: row.id,
+    projectId: row.project_id ?? row.id,
+    name: row.name,
+    editorUrl,
+    url: editorUrl,
+    ownerId: row.owner_id,
+    thumbnailUrl: row.thumbnail_url,
+    publishedVersion: version,
+    latestVersion: version,
+    draftVersion: null,
+    browserVisibleVersion: version,
+    version,
+    isEmpty: Number(row.node_count) === 0,
+    sizeBytes: Number(row.size_bytes),
+    nodeCount: Number(row.node_count),
+    graphHash: row.graph_hash,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+  }
+}
+
+function placeholderToProjectStatus(project: ProjectPlaceholder): ProjectStatus {
+  const editorUrl = editorUrlForScene(project.id)
+  return {
+    id: project.id,
+    projectId: project.id,
+    name: project.name,
+    editorUrl,
+    url: editorUrl,
+    ownerId: project.ownerId,
+    thumbnailUrl: project.thumbnailUrl,
+    publishedVersion: null,
+    latestVersion: null,
+    draftVersion: null,
+    browserVisibleVersion: null,
+    version: 0,
+    isEmpty: true,
+    sizeBytes: 0,
+    nodeCount: 0,
+    graphHash: null,
+    createdAt: project.createdAt,
+    updatedAt: project.updatedAt,
+  }
+}
+
+function rowToSceneEvent(row: SceneEventRow): SceneEvent {
+  return {
+    eventId: Number(row.event_id),
+    sceneId: row.scene_id,
+    version: Number(row.version),
+    kind: row.kind,
+    createdAt: row.created_at,
+    graph: parseGraph(row.graph_json, `${row.scene_id}@${row.version}`),
+  }
+}
+
+/**
+ * MySQL-backed implementation of `SceneStore`, for deployments where the
+ * filesystem is not durable across releases.
+ *
+ * Timestamps are stored as ISO 8601 strings rather than DATETIME so values
+ * round-trip identically to the SQLite store regardless of server timezone,
+ * and `graph_hash` is persisted so listing scenes never has to pull whole
+ * graph payloads over the wire.
+ */
+export class MysqlSceneStore implements SceneStore {
+  readonly backend = 'mysql' as const
+
+  private readonly url: string
+  private readonly maxSceneBytes: number
+  private pool: MysqlPool | null = null
+  private poolPromise: Promise<MysqlPool> | null = null
+
+  constructor(opts: MysqlSceneStoreOptions = {}) {
+    const env = opts.env ?? process.env
+    const url = opts.url ?? resolveMysqlUrl(env)
+    if (!url) {
+      throw new SceneInvalidError(
+        'MySQL scene store requires a connection URL (DIGITALTWIN_MYSQL_URL)',
+      )
+    }
+    this.url = url
+    this.maxSceneBytes = resolveMaxSceneBytes(env, opts.maxSceneBytes)
+  }
+
+  async createProject(opts: ProjectCreateOptions): Promise<ProjectStatus> {
+    const pool = await this.database()
+    assertValidName(opts.name)
+    const id = opts.id ? sanitizeSlug(opts.id) : await this.generateUniqueId(pool)
+    if (!isValidSlug(id)) {
+      throw new SceneInvalidError(`Invalid project id after sanitization: "${id}"`)
+    }
+    if (await this.getRow(pool, id)) {
+      throw new SceneInvalidError(`Project with id "${id}" already exists`)
+    }
+    const now = new Date().toISOString()
+    const project: ProjectPlaceholder = {
+      id,
+      name: opts.name,
+      ownerId: opts.ownerId ?? null,
+      thumbnailUrl: null,
+      createdAt: now,
+      updatedAt: now,
+    }
+    try {
+      await pool.execute(
+        `INSERT INTO project_placeholders (id, name, owner_id, thumbnail_url, created_at, updated_at)
+         VALUES (?, ?, ?, ?, ?, ?)`,
+        [id, project.name, project.ownerId, project.thumbnailUrl, now, now],
+      )
+    } catch (err) {
+      if ((err as { code?: string })?.code === 'ER_DUP_ENTRY') {
+        throw new SceneInvalidError(`Project with id "${id}" already exists`)
+      }
+      throw err
+    }
+    return placeholderToProjectStatus(project)
+  }
+
+  async getProjectStatus(id: string): Promise<ProjectStatus | null> {
+    const pool = await this.database()
+    const safeId = sanitizeSlug(id)
+    const row = await this.getRow(pool, safeId)
+    if (row) return rowToProjectStatus(row)
+    const placeholder = await this.getPlaceholder(pool, safeId)
+    return placeholder ? placeholderToProjectStatus(placeholder) : null
+  }
+
+  async save(opts: SceneSaveOptions): Promise<SceneMeta> {
+    return this.withWriteTransaction(async (conn) => {
+      assertValidName(opts.name)
+      if (!opts.graph || typeof opts.graph !== 'object') {
+        throw new SceneInvalidError('graph is required')
+      }
+
+      const providedId = opts.id
+      const id = providedId ? sanitizeSlug(providedId) : await this.generateUniqueId(conn)
+      if (!isValidSlug(id)) {
+        throw new SceneInvalidError(`Invalid scene id after sanitization: "${id}"`)
+      }
+
+      const existing = await this.getRow(conn, id, { forUpdate: true })
+      const placeholder = await this.getPlaceholder(conn, id, { forUpdate: true })
+
+      if (existing && providedId !== undefined && opts.expectedVersion === undefined) {
+        throw new SceneInvalidError(
+          `Scene with id "${id}" already exists. Pass a different id or provide expectedVersion to overwrite.`,
+        )
+      }
+
+      if (opts.expectedVersion !== undefined) {
+        const currentVersion = existing ? Number(existing.version) : 0
+        if (currentVersion !== opts.expectedVersion) {
+          throw new SceneVersionConflictError(
+            `Scene "${id}" version mismatch: expected ${opts.expectedVersion}, got ${currentVersion}`,
+          )
+        }
+      }
+
+      const graphJson = serializeGraph(opts.graph)
+      const sizeBytes = Buffer.byteLength(graphJson, 'utf8')
+      if (sizeBytes > this.maxSceneBytes) {
+        throw new SceneTooLargeError(
+          `Scene "${id}" is ${sizeBytes} bytes, exceeds cap of ${this.maxSceneBytes} bytes`,
+        )
+      }
+
+      const now = new Date().toISOString()
+      const version = (existing ? Number(existing.version) : 0) + 1
+      const createdAt = existing?.created_at ?? placeholder?.createdAt ?? now
+      const nodeCount = Object.keys(opts.graph.nodes ?? {}).length
+      const projectId = opts.projectId ?? existing?.project_id ?? (placeholder ? id : null)
+      const ownerId = opts.ownerId ?? existing?.owner_id ?? placeholder?.ownerId ?? null
+      const thumbnailUrl =
+        opts.thumbnailUrl ?? existing?.thumbnail_url ?? placeholder?.thumbnailUrl ?? null
+      const graphHash = hashGraphJson(graphJson)
+
+      if (existing) {
+        await conn.execute(
+          `UPDATE scenes
+              SET name = ?,
+                  project_id = ?,
+                  owner_id = ?,
+                  thumbnail_url = ?,
+                  version = ?,
+                  updated_at = ?,
+                  size_bytes = ?,
+                  node_count = ?,
+                  graph_json = ?,
+                  graph_hash = ?
+            WHERE id = ?`,
+          [
+            opts.name,
+            projectId,
+            ownerId,
+            thumbnailUrl,
+            version,
+            now,
+            sizeBytes,
+            nodeCount,
+            graphJson,
+            graphHash,
+            id,
+          ],
+        )
+      } else {
+        await conn.execute(
+          `INSERT INTO scenes (
+             id, name, project_id, owner_id, thumbnail_url, version,
+             created_at, updated_at, size_bytes, node_count, graph_json, graph_hash
+           ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+          [
+            id,
+            opts.name,
+            projectId,
+            ownerId,
+            thumbnailUrl,
+            version,
+            createdAt,
+            now,
+            sizeBytes,
+            nodeCount,
+            graphJson,
+            graphHash,
+          ],
+        )
+      }
+
+      await conn.execute(
+        `INSERT INTO scene_revisions (
+           scene_id, version, graph_json, author_kind, author_id, created_at
+         ) VALUES (?, ?, ?, ?, ?, ?)`,
+        [id, version, graphJson, 'mcp', ownerId, now],
+      )
+
+      await conn.execute('DELETE FROM project_placeholders WHERE id = ?', [id])
+
+      return {
+        id,
+        name: opts.name,
+        projectId,
+        ownerId,
+        thumbnailUrl,
+        version,
+        createdAt,
+        updatedAt: now,
+        sizeBytes,
+        nodeCount,
+        editorUrl: editorUrlForScene(id),
+        url: editorUrlForScene(id),
+        published: true,
+        graphHash,
+      }
+    })
+  }
+
+  async load(id: string): Promise<SceneWithGraph | null> {
+    const pool = await this.database()
+    const [result] = await pool.execute(
+      `SELECT ${SCENE_COLUMNS}, graph_json FROM scenes WHERE id = ?`,
+      [sanitizeSlug(id)],
+    )
+    const row = firstRow<SceneRowWithGraph>(result)
+    if (!row) return null
+    return {
+      ...rowToMeta(row),
+      graph: parseGraph(row.graph_json, row.id),
+    }
+  }
+
+  async list(opts: SceneListOptions = {}): Promise<SceneMeta[]> {
+    const clauses: string[] = []
+    const bindings: Array<string | number> = []
+
+    if (opts.projectId !== undefined) {
+      clauses.push('project_id = ?')
+      bindings.push(opts.projectId)
+    }
+    if (opts.ownerId !== undefined) {
+      clauses.push('owner_id = ?')
+      bindings.push(opts.ownerId)
+    }
+
+    const requestedLimit = opts.limit ?? DEFAULT_LIST_LIMIT
+    const limit = Number.isInteger(requestedLimit) && requestedLimit >= 0 ? requestedLimit : 0
+
+    const where = clauses.length > 0 ? `WHERE ${clauses.join(' AND ')}` : ''
+    const pool = await this.database()
+    // LIMIT is interpolated because the driver binds placeholders as strings,
+    // which MySQL rejects there; `limit` is an integer by the check above.
+    const [result] = await pool.execute(
+      `SELECT ${SCENE_COLUMNS}
+         FROM scenes
+         ${where}
+        ORDER BY updated_at DESC, id ASC
+        LIMIT ${limit}`,
+      bindings,
+    )
+
+    return rows(result).map((row) => rowToMeta(row as unknown as SceneRow))
+  }
+
+  async delete(id: string, opts: SceneMutateOptions = {}): Promise<boolean> {
+    return this.withWriteTransaction(async (conn) => {
+      const safeId = sanitizeSlug(id)
+      const existing = await this.getRow(conn, safeId, { forUpdate: true })
+      if (!existing) return false
+      if (opts.expectedVersion !== undefined && Number(existing.version) !== opts.expectedVersion) {
+        throw new SceneVersionConflictError(
+          `Scene "${safeId}" version mismatch: expected ${opts.expectedVersion}, got ${existing.version}`,
+        )
+      }
+      await conn.execute('DELETE FROM scenes WHERE id = ?', [safeId])
+      return true
+    })
+  }
+
+  async rename(id: string, newName: string, opts: SceneMutateOptions = {}): Promise<SceneMeta> {
+    return this.withWriteTransaction(async (conn) => {
+      assertValidName(newName)
+      const safeId = sanitizeSlug(id)
+      const existing = await this.getRow(conn, safeId, { forUpdate: true })
+      if (!existing) {
+        throw new SceneNotFoundError(`Scene "${safeId}" not found`)
+      }
+      if (opts.expectedVersion !== undefined && Number(existing.version) !== opts.expectedVersion) {
+        throw new SceneVersionConflictError(
+          `Scene "${safeId}" version mismatch: expected ${opts.expectedVersion}, got ${existing.version}`,
+        )
+      }
+
+      const now = new Date().toISOString()
+      const nextVersion = Number(existing.version) + 1
+      await conn.execute('UPDATE scenes SET name = ?, version = ?, updated_at = ? WHERE id = ?', [
+        newName,
+        nextVersion,
+        now,
+        safeId,
+      ])
+
+      const [graphResult] = await conn.execute('SELECT graph_json FROM scenes WHERE id = ?', [
+        safeId,
+      ])
+      const graphRow = firstRow<{ graph_json: string }>(graphResult)
+      await conn.execute(
+        `INSERT INTO scene_revisions (
+           scene_id, version, graph_json, author_kind, author_id, created_at
+         ) VALUES (?, ?, ?, ?, ?, ?)`,
+        [safeId, nextVersion, graphRow?.graph_json ?? '', 'mcp', existing.owner_id, now],
+      )
+
+      return {
+        ...rowToMeta(existing),
+        name: newName,
+        version: nextVersion,
+        updatedAt: now,
+      }
+    })
+  }
+
+  async appendSceneEvent(opts: SceneEventAppendOptions): Promise<SceneEvent> {
+    return this.withWriteTransaction(async (conn) => {
+      const safeId = sanitizeSlug(opts.sceneId)
+      const existing = await this.getRow(conn, safeId)
+      if (!existing) {
+        throw new SceneNotFoundError(`Scene "${safeId}" not found`)
+      }
+
+      const graphJson = serializeGraph(opts.graph)
+      const now = new Date().toISOString()
+      const [result] = await conn.execute(
+        `INSERT INTO scene_events (
+           scene_id, version, kind, created_at, graph_json
+         ) VALUES (?, ?, ?, ?, ?)`,
+        [safeId, opts.version, opts.kind, now, graphJson],
+      )
+
+      return {
+        eventId: Number((result as { insertId?: number })?.insertId ?? 0),
+        sceneId: safeId,
+        version: opts.version,
+        kind: opts.kind,
+        createdAt: now,
+        graph: opts.graph as SceneGraph,
+      }
+    })
+  }
+
+  async listSceneEvents(sceneId: string, opts: SceneEventListOptions = {}): Promise<SceneEvent[]> {
+    const afterEventId = Math.max(0, opts.afterEventId ?? 0)
+    const requestedLimit = opts.limit ?? 100
+    const limit = Number.isInteger(requestedLimit) && requestedLimit > 0 ? requestedLimit : 100
+    const pool = await this.database()
+    const [result] = await pool.execute(
+      `SELECT event_id, scene_id, version, kind, created_at, graph_json
+         FROM scene_events
+        WHERE scene_id = ?
+          AND event_id > ?
+        ORDER BY event_id ASC
+        LIMIT ${limit}`,
+      [sanitizeSlug(sceneId), afterEventId],
+    )
+
+    return rows(result).map((row) => rowToSceneEvent(row as unknown as SceneEventRow))
+  }
+
+  async close(): Promise<void> {
+    await this.pool?.end()
+    this.pool = null
+    this.poolPromise = null
+  }
+
+  private async database(): Promise<MysqlPool> {
+    if (this.pool) return this.pool
+    if (!this.poolPromise) {
+      this.poolPromise = (async () => {
+        const mod = (await import('mysql2/promise')) as unknown as {
+          createPool: (config: { uri: string; connectionLimit: number }) => MysqlPool
+        }
+        const pool = mod.createPool({ uri: this.url, connectionLimit: 5 })
+        try {
+          await this.migrate(pool)
+        } catch (err) {
+          // Don't cache the failure: a database that was briefly unreachable
+          // at boot would otherwise poison the store until the process
+          // restarts. Drop the pool and let the next call retry.
+          this.poolPromise = null
+          await pool.end().catch(() => {})
+          throw err
+        }
+        this.pool = pool
+        return pool
+      })()
+    }
+    return this.poolPromise
+  }
+
+  private async migrate(pool: MysqlPool): Promise<void> {
+    await pool.query(`
+      CREATE TABLE IF NOT EXISTS scenes (
+        id VARCHAR(64) NOT NULL PRIMARY KEY,
+        name VARCHAR(200) NOT NULL,
+        project_id VARCHAR(200) NULL,
+        owner_id VARCHAR(64) NULL,
+        thumbnail_url TEXT NULL,
+        version INT UNSIGNED NOT NULL,
+        created_at VARCHAR(32) NOT NULL,
+        updated_at VARCHAR(32) NOT NULL,
+        size_bytes INT UNSIGNED NOT NULL,
+        node_count INT UNSIGNED NOT NULL,
+        graph_json LONGTEXT NOT NULL,
+        graph_hash CHAR(64) NOT NULL,
+        -- project_id is indexed by prefix: servers still defaulting to the
+        -- COMPACT row format cap an index key at 767 bytes, and the whole
+        -- column is 800 under utf8mb4.
+        INDEX scenes_project_updated_idx (project_id(150), updated_at),
+        INDEX scenes_owner_updated_idx (owner_id, updated_at)
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+    `)
+
+    await pool.query(`
+      CREATE TABLE IF NOT EXISTS scene_revisions (
+        scene_id VARCHAR(64) NOT NULL,
+        version INT UNSIGNED NOT NULL,
+        graph_json LONGTEXT NOT NULL,
+        author_kind VARCHAR(32) NOT NULL,
+        author_id VARCHAR(64) NULL,
+        created_at VARCHAR(32) NOT NULL,
+        PRIMARY KEY (scene_id, version),
+        CONSTRAINT scene_revisions_scene_fk FOREIGN KEY (scene_id)
+          REFERENCES scenes(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+    `)
+
+    await pool.query(`
+      CREATE TABLE IF NOT EXISTS project_placeholders (
+        id VARCHAR(64) NOT NULL PRIMARY KEY,
+        name VARCHAR(200) NOT NULL,
+        owner_id VARCHAR(64) NULL,
+        thumbnail_url TEXT NULL,
+        created_at VARCHAR(32) NOT NULL,
+        updated_at VARCHAR(32) NOT NULL
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+    `)
+
+    await pool.query(`
+      CREATE TABLE IF NOT EXISTS scene_events (
+        event_id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
+        scene_id VARCHAR(64) NOT NULL,
+        version INT UNSIGNED NOT NULL,
+        kind VARCHAR(64) NOT NULL,
+        created_at VARCHAR(32) NOT NULL,
+        graph_json LONGTEXT NOT NULL,
+        INDEX scene_events_scene_event_idx (scene_id, event_id),
+        CONSTRAINT scene_events_scene_fk FOREIGN KEY (scene_id)
+          REFERENCES scenes(id) ON DELETE CASCADE
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+    `)
+  }
+
+  private async withWriteTransaction<T>(fn: (conn: MysqlConnection) => Promise<T>): Promise<T> {
+    const pool = await this.database()
+    const conn = await pool.getConnection()
+    await conn.beginTransaction()
+    try {
+      const result = await fn(conn)
+      await conn.commit()
+      return result
+    } catch (err) {
+      try {
+        await conn.rollback()
+      } catch {
+        // Ignore rollback errors so the original failure is preserved.
+      }
+      throw err
+    } finally {
+      conn.release()
+    }
+  }
+
+  private async getPlaceholder(
+    queryable: MysqlQueryable,
+    id: string,
+    opts: { forUpdate?: boolean } = {},
+  ): Promise<ProjectPlaceholder | null> {
+    const [result] = await queryable.execute(
+      `SELECT id, name, owner_id, thumbnail_url, created_at, updated_at
+         FROM project_placeholders WHERE id = ?${opts.forUpdate ? ' FOR UPDATE' : ''}`,
+      [id],
+    )
+    const row = firstRow<{
+      id: string
+      name: string
+      owner_id: string | null
+      thumbnail_url: string | null
+      created_at: string
+      updated_at: string
+    }>(result)
+    if (!row) return null
+    return {
+      id: row.id,
+      name: row.name,
+      ownerId: row.owner_id,
+      thumbnailUrl: row.thumbnail_url,
+      createdAt: row.created_at,
+      updatedAt: row.updated_at,
+    }
+  }
+
+  private async getRow(
+    queryable: MysqlQueryable,
+    id: string,
+    opts: { forUpdate?: boolean } = {},
+  ): Promise<SceneRow | null> {
+    const [result] = await queryable.execute(
+      `SELECT ${SCENE_COLUMNS} FROM scenes WHERE id = ?${opts.forUpdate ? ' FOR UPDATE' : ''}`,
+      [id],
+    )
+    return firstRow<SceneRow>(result)
+  }
+
+  private async generateUniqueId(queryable: MysqlQueryable): Promise<string> {
+    for (let attempt = 0; attempt < 20; attempt++) {
+      const id = generateSlug()
+      if (!(await this.getRow(queryable, id))) return id
+    }
+    throw new SceneInvalidError('Failed to generate a unique scene id')
+  }
+}
diff --git a/packages/mcp/src/storage/scene-store-shared.ts b/packages/mcp/src/storage/scene-store-shared.ts
new file mode 100644
index 000000000..1b1bb3c1b
--- /dev/null
+++ b/packages/mcp/src/storage/scene-store-shared.ts
@@ -0,0 +1,91 @@
+import { createHash } from 'node:crypto'
+import type { SceneGraph } from '@pascal-app/core/clone-scene-graph'
+import { z } from 'zod'
+import { readEnv } from '../lib/env'
+import { SceneInvalidError } from './types'
+
+export const DEFAULT_MAX_SCENE_BYTES = 10 * 1024 * 1024
+export const DEFAULT_LIST_LIMIT = 100
+export const MAX_NAME_LENGTH = 200
+export const MIN_NAME_LENGTH = 1
+
+const GraphSchema = z.object({
+  nodes: z.record(z.string(), z.unknown()),
+  rootNodeIds: z.array(z.string()),
+  collections: z.record(z.string(), z.unknown()).optional(),
+})
+
+export function resolveMaxSceneBytes(
+  env: NodeJS.ProcessEnv | undefined,
+  explicit: number | undefined,
+): number {
+  if (explicit !== undefined) {
+    if (!Number.isInteger(explicit) || explicit <= 0) {
+      throw new SceneInvalidError('maxSceneBytes must be a positive integer')
+    }
+    return explicit
+  }
+
+  const raw = env ? readEnv(env, 'MAX_SCENE_BYTES') : undefined
+  if (raw === undefined) return DEFAULT_MAX_SCENE_BYTES
+  const parsed = Number.parseInt(raw, 10)
+  if (!Number.isInteger(parsed) || parsed <= 0) {
+    throw new SceneInvalidError('DIGITALTWIN_MAX_SCENE_BYTES must be a positive integer')
+  }
+  return parsed
+}
+
+export function editorUrlForScene(id: string): string {
+  return `/editor/${id}`
+}
+
+export function hashGraphJson(graphJson: string): string {
+  return createHash('sha256').update(graphJson).digest('hex')
+}
+
+export function assertValidName(name: string): void {
+  if (typeof name !== 'string') {
+    throw new SceneInvalidError('Scene name must be a string')
+  }
+  const trimmed = name.trim()
+  if (trimmed.length < MIN_NAME_LENGTH || name.length > MAX_NAME_LENGTH) {
+    throw new SceneInvalidError(
+      `Scene name must be ${MIN_NAME_LENGTH}-${MAX_NAME_LENGTH} characters (got ${name.length})`,
+    )
+  }
+}
+
+export function serializeGraph(graph: SceneGraph): string {
+  return JSON.stringify(graph)
+}
+
+export function parseGraph(raw: string, context: string): SceneGraph {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(raw)
+  } catch (err) {
+    throw new SceneInvalidError(
+      `Failed to parse scene graph for ${context}: ${err instanceof Error ? err.message : String(err)}`,
+    )
+  }
+
+  const result = GraphSchema.safeParse(parsed)
+  if (!result.success) {
+    throw new SceneInvalidError(`Scene graph for ${context} has invalid shape: ${result.error}`)
+  }
+
+  const graph = result.data
+  for (const [nodeId, node] of Object.entries(graph.nodes)) {
+    if (!node || typeof node !== 'object' || Array.isArray(node)) {
+      throw new SceneInvalidError(`Scene graph for ${context} has non-object node at "${nodeId}"`)
+    }
+    const typeField = (node as { type?: unknown }).type
+    if (typeof typeField !== 'string' || typeField.length === 0) {
+      throw new SceneInvalidError(
+        `Scene graph for ${context} has node "${nodeId}" missing a string "type"`,
+      )
+    }
+  }
+
+  return graph as SceneGraph
+}
diff --git a/packages/mcp/src/storage/sqlite-scene-store.test.ts b/packages/mcp/src/storage/sqlite-scene-store.test.ts
index c97c2011a..ef467d94b 100644
--- a/packages/mcp/src/storage/sqlite-scene-store.test.ts
+++ b/packages/mcp/src/storage/sqlite-scene-store.test.ts
@@ -52,12 +52,14 @@ function createStore(rootDir: string, opts: Partial<SqliteSceneStoreOptions> = {
 }
 
 describe('resolveDefaultDatabasePath', () => {
-  test('respects PASCAL_DB_PATH when set', () => {
-    expect(resolveDefaultDatabasePath({ PASCAL_DB_PATH: '/tmp/custom.db' })).toBe('/tmp/custom.db')
+  test('respects DIGITALTWIN_DB_PATH when set', () => {
+    expect(resolveDefaultDatabasePath({ DIGITALTWIN_DB_PATH: '/tmp/custom.db' })).toBe(
+      '/tmp/custom.db',
+    )
   })
 
-  test('resolves PASCAL_DATA_DIR to pascal.db', () => {
-    expect(resolveDefaultDatabasePath({ PASCAL_DATA_DIR: '/tmp/pascal-data' })).toBe(
+  test('resolves DIGITALTWIN_DATA_DIR to pascal.db', () => {
+    expect(resolveDefaultDatabasePath({ DIGITALTWIN_DATA_DIR: '/tmp/pascal-data' })).toBe(
       path.join('/tmp/pascal-data', 'pascal.db'),
     )
   })
diff --git a/packages/mcp/src/storage/sqlite-scene-store.ts b/packages/mcp/src/storage/sqlite-scene-store.ts
index f705a8793..280717afa 100644
--- a/packages/mcp/src/storage/sqlite-scene-store.ts
+++ b/packages/mcp/src/storage/sqlite-scene-store.ts
@@ -1,9 +1,16 @@
-import { createHash } from 'node:crypto'
 import { mkdirSync } from 'node:fs'
 import * as os from 'node:os'
 import * as path from 'node:path'
-import type { SceneGraph } from '@pascal-app/core/clone-scene-graph'
-import { z } from 'zod'
+import { readEnv } from '../lib/env'
+import {
+  assertValidName,
+  DEFAULT_LIST_LIMIT,
+  editorUrlForScene,
+  hashGraphJson,
+  parseGraph,
+  resolveMaxSceneBytes,
+  serializeGraph,
+} from './scene-store-shared'
 import { generateSlug, isValidSlug, sanitizeSlug } from './slug'
 import { openSqliteDatabase, type SqliteDatabase } from './sqlite-driver'
 import {
@@ -24,11 +31,6 @@ import {
   type SceneWithGraph,
 } from './types'
 
-const DEFAULT_MAX_SCENE_BYTES = 10 * 1024 * 1024
-const DEFAULT_LIST_LIMIT = 100
-const MAX_NAME_LENGTH = 200
-const MIN_NAME_LENGTH = 1
-
 export interface SqliteSceneStoreOptions {
   /** Exact SQLite database file path. If omitted, resolved from env. */
   databasePath?: string
@@ -70,29 +72,23 @@ interface ProjectPlaceholder {
   updatedAt: string
 }
 
-const GraphSchema = z.object({
-  nodes: z.record(z.string(), z.unknown()),
-  rootNodeIds: z.array(z.string()),
-  collections: z.record(z.string(), z.unknown()).optional(),
-})
-
 /**
- * Resolves Pascal's local SQLite database path.
+ * Resolves the local SQLite database path. Only the two configuration
+ * variables are renamed; the default locations keep their historical names so
+ * an existing local database is still found.
  *
  * Precedence:
- * 1. `PASCAL_DB_PATH`
- * 2. `PASCAL_DATA_DIR/pascal.db`
+ * 1. `DIGITALTWIN_DB_PATH`
+ * 2. `DIGITALTWIN_DATA_DIR/pascal.db`
  * 3. On Windows: `%APPDATA%/Pascal/data/pascal.db`
  * 4. `$XDG_DATA_HOME/pascal/data/pascal.db`
  * 5. `$HOME/.pascal/data/pascal.db`
  */
 export function resolveDefaultDatabasePath(env: NodeJS.ProcessEnv = process.env): string {
-  if (env.PASCAL_DB_PATH && env.PASCAL_DB_PATH.length > 0) {
-    return env.PASCAL_DB_PATH
-  }
-  if (env.PASCAL_DATA_DIR && env.PASCAL_DATA_DIR.length > 0) {
-    return path.join(env.PASCAL_DATA_DIR, 'pascal.db')
-  }
+  const dbPath = readEnv(env, 'DB_PATH')
+  if (dbPath) return dbPath
+  const dataDir = readEnv(env, 'DATA_DIR')
+  if (dataDir) return path.join(dataDir, 'pascal.db')
   if (process.platform === 'win32') {
     const appData = env.APPDATA
     if (appData && appData.length > 0) {
@@ -107,26 +103,6 @@ export function resolveDefaultDatabasePath(env: NodeJS.ProcessEnv = process.env)
   return path.join(os.homedir(), '.pascal', 'data', 'pascal.db')
 }
 
-function resolveMaxSceneBytes(
-  env: NodeJS.ProcessEnv | undefined,
-  explicit: number | undefined,
-): number {
-  if (explicit !== undefined) {
-    if (!Number.isInteger(explicit) || explicit <= 0) {
-      throw new SceneInvalidError('maxSceneBytes must be a positive integer')
-    }
-    return explicit
-  }
-
-  const raw = env?.PASCAL_MAX_SCENE_BYTES
-  if (raw === undefined || raw === '') return DEFAULT_MAX_SCENE_BYTES
-  const parsed = Number.parseInt(raw, 10)
-  if (!Number.isInteger(parsed) || parsed <= 0) {
-    throw new SceneInvalidError('PASCAL_MAX_SCENE_BYTES must be a positive integer')
-  }
-  return parsed
-}
-
 function rowToMeta(row: SceneRow): SceneMeta {
   const editorUrl = editorUrlForScene(row.id)
   return {
@@ -147,14 +123,6 @@ function rowToMeta(row: SceneRow): SceneMeta {
   }
 }
 
-function editorUrlForScene(id: string): string {
-  return `/editor/${id}`
-}
-
-function hashGraphJson(graphJson: string): string {
-  return createHash('sha256').update(graphJson).digest('hex')
-}
-
 function rowToProjectStatus(row: SceneRow): ProjectStatus {
   const editorUrl = editorUrlForScene(row.id)
   return {
@@ -203,53 +171,6 @@ function placeholderToProjectStatus(project: ProjectPlaceholder): ProjectStatus
   }
 }
 
-function assertValidName(name: string): void {
-  if (typeof name !== 'string') {
-    throw new SceneInvalidError('Scene name must be a string')
-  }
-  const trimmed = name.trim()
-  if (trimmed.length < MIN_NAME_LENGTH || name.length > MAX_NAME_LENGTH) {
-    throw new SceneInvalidError(
-      `Scene name must be ${MIN_NAME_LENGTH}-${MAX_NAME_LENGTH} characters (got ${name.length})`,
-    )
-  }
-}
-
-function serializeGraph(graph: SceneGraph): string {
-  return JSON.stringify(graph)
-}
-
-function parseGraph(raw: string, context: string): SceneGraph {
-  let parsed: unknown
-  try {
-    parsed = JSON.parse(raw)
-  } catch (err) {
-    throw new SceneInvalidError(
-      `Failed to parse scene graph for ${context}: ${err instanceof Error ? err.message : String(err)}`,
-    )
-  }
-
-  const result = GraphSchema.safeParse(parsed)
-  if (!result.success) {
-    throw new SceneInvalidError(`Scene graph for ${context} has invalid shape: ${result.error}`)
-  }
-
-  const graph = result.data
-  for (const [nodeId, node] of Object.entries(graph.nodes)) {
-    if (!node || typeof node !== 'object' || Array.isArray(node)) {
-      throw new SceneInvalidError(`Scene graph for ${context} has non-object node at "${nodeId}"`)
-    }
-    const typeField = (node as { type?: unknown }).type
-    if (typeof typeField !== 'string' || typeField.length === 0) {
-      throw new SceneInvalidError(
-        `Scene graph for ${context} has node "${nodeId}" missing a string "type"`,
-      )
-    }
-  }
-
-  return graph as SceneGraph
-}
-
 function asSceneRow(value: unknown): SceneRow | null {
   if (!value || typeof value !== 'object') return null
   return value as SceneRow
@@ -278,7 +199,6 @@ export class SqliteSceneStore implements SceneStore {
   readonly databasePath: string
 
   private readonly maxSceneBytes: number
-  private readonly projectPlaceholders = new Map<string, ProjectPlaceholder>()
   private db: SqliteDatabase | null = null
   private dbPromise: Promise<SqliteDatabase> | null = null
 
@@ -307,7 +227,10 @@ export class SqliteSceneStore implements SceneStore {
       createdAt: now,
       updatedAt: now,
     }
-    this.projectPlaceholders.set(id, project)
+    db.query(
+      `INSERT INTO project_placeholders (id, name, owner_id, thumbnail_url, created_at, updated_at)
+       VALUES (?, ?, ?, ?, ?, ?)`,
+    ).run(id, project.name, project.ownerId, project.thumbnailUrl, now, now)
     return placeholderToProjectStatus(project)
   }
 
@@ -316,7 +239,7 @@ export class SqliteSceneStore implements SceneStore {
     const safeId = sanitizeSlug(id)
     const row = this.getRow(db, safeId)
     if (row) return rowToProjectStatus(row)
-    const placeholder = this.projectPlaceholders.get(safeId)
+    const placeholder = this.getPlaceholder(db, safeId)
     return placeholder ? placeholderToProjectStatus(placeholder) : null
   }
 
@@ -334,7 +257,7 @@ export class SqliteSceneStore implements SceneStore {
       }
 
       const existing = this.getRow(db, id)
-      const placeholder = this.projectPlaceholders.get(id)
+      const placeholder = this.getPlaceholder(db, id)
 
       if (existing && providedId !== undefined && opts.expectedVersion === undefined) {
         throw new SceneInvalidError(
@@ -420,7 +343,7 @@ export class SqliteSceneStore implements SceneStore {
          ) VALUES (?, ?, ?, ?, ?, ?)`,
       ).run(id, version, graphJson, 'mcp', ownerId, now)
 
-      this.projectPlaceholders.delete(id)
+      db.query('DELETE FROM project_placeholders WHERE id = ?').run(id)
 
       return {
         id,
@@ -641,6 +564,15 @@ export class SqliteSceneStore implements SceneStore {
         FOREIGN KEY (scene_id) REFERENCES scenes(id) ON DELETE CASCADE
       );
 
+      CREATE TABLE IF NOT EXISTS project_placeholders (
+        id TEXT PRIMARY KEY,
+        name TEXT NOT NULL,
+        owner_id TEXT,
+        thumbnail_url TEXT,
+        created_at TEXT NOT NULL,
+        updated_at TEXT NOT NULL
+      );
+
       CREATE TABLE IF NOT EXISTS scene_events (
         event_id INTEGER PRIMARY KEY AUTOINCREMENT,
         scene_id TEXT NOT NULL,
@@ -673,6 +605,32 @@ export class SqliteSceneStore implements SceneStore {
     }
   }
 
+  private getPlaceholder(db: SqliteDatabase, id: string): ProjectPlaceholder | null {
+    const row = db
+      .query(
+        `SELECT id, name, owner_id, thumbnail_url, created_at, updated_at
+           FROM project_placeholders
+          WHERE id = ?`,
+      )
+      .get(id) as {
+      id: string
+      name: string
+      owner_id: string | null
+      thumbnail_url: string | null
+      created_at: string
+      updated_at: string
+    } | null
+    if (!row) return null
+    return {
+      id: row.id,
+      name: row.name,
+      ownerId: row.owner_id,
+      thumbnailUrl: row.thumbnail_url,
+      createdAt: row.created_at,
+      updatedAt: row.updated_at,
+    }
+  }
+
   private getRow(db: SqliteDatabase, id: string): SceneRow | null {
     return asSceneRow(
       db
diff --git a/packages/mcp/src/storage/types.ts b/packages/mcp/src/storage/types.ts
index 0780684a2..22539be1f 100644
--- a/packages/mcp/src/storage/types.ts
+++ b/packages/mcp/src/storage/types.ts
@@ -119,7 +119,7 @@ export interface ProjectStatus {
 }
 
 export interface SceneStore {
-  readonly backend: 'sqlite' | 'supabase'
+  readonly backend: 'sqlite' | 'mysql' | 'supabase'
   createProject?(opts: ProjectCreateOptions): Promise<ProjectStatus>
   getProjectStatus?(id: SceneId): Promise<ProjectStatus | null>
   save(opts: SceneSaveOptions): Promise<SceneMeta>
diff --git a/packages/viewer/src/components/viewer/index.tsx b/packages/viewer/src/components/viewer/index.tsx
index 2de9cade6..f581a40bb 100644
--- a/packages/viewer/src/components/viewer/index.tsx
+++ b/packages/viewer/src/components/viewer/index.tsx
@@ -111,8 +111,8 @@ function UnsupportedGpuViewerFallback() {
       <div className="max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm">
         <h2 className="font-semibold text-lg">3D viewer unavailable</h2>
         <p className="mt-2 text-neutral-600 text-sm">
-          This browser or environment does not expose WebGPU or WebGL, so Pascal cannot render the
-          3D scene here. Try opening the editor in a browser with hardware acceleration enabled.
+          This browser or environment does not expose WebGPU or WebGL, so DigitalTwin cannot render
+          the 3D scene here. Try opening the editor in a browser with hardware acceleration enabled.
         </p>
       </div>
     </div>
diff --git a/scripts/migrate-legacy-scene.mjs b/scripts/migrate-legacy-scene.mjs
new file mode 100644
index 000000000..47a88b25f
--- /dev/null
+++ b/scripts/migrate-legacy-scene.mjs
@@ -0,0 +1,416 @@
+#!/usr/bin/env bun
+/**
+ * Migrates a scene from the legacy desktop build ("Digital Twin V2" / Pascal,
+ * scenes in a local `pascal.db` SQLite file or per-scene JSON backups) into
+ * the current graph format accepted by `POST /api/scenes`.
+ *
+ * The legacy build had no warehouse plugin: racking was a generic `item` node
+ * carrying `asset.src === "asset://procedural/<kind>"` plus a bounding-box
+ * `dimensions` triple. The current build models those as parametric
+ * `warehouse:*` nodes, so this is a representation change, not a rename —
+ * each procedural item is rebuilt as the matching plugin node and everything
+ * else passes through untouched.
+ *
+ * Safety contract: an unrecognised procedural kind ABORTS the migration with
+ * a report — nodes are never silently dropped, because a skipped rack is a
+ * rack missing from the customer's floor. The output graph is validated with
+ * the same `apiGraphSchema` the server enforces, so a migration that prints
+ * "ok" is one the API will accept.
+ *
+ * Usage:
+ *   bun scripts/migrate-legacy-scene.mjs --json <backup.json> [--out <file>]
+ *   bun scripts/migrate-legacy-scene.mjs --db <pascal.db> --scene <id> [--out <file>]
+ *   bun scripts/migrate-legacy-scene.mjs --db <pascal.db> --list
+ *   bun scripts/migrate-legacy-scene.mjs ... --drop-transient
+ */
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { apiGraphSchema, parseNodeWithDefaults } from '../apps/editor/lib/graph-schema.ts'
+
+const WAREHOUSE_PLUGIN_ID = 'ovurrsl:warehouse'
+
+/** Effective size after folding a legacy node's scale into its asset box. */
+function effectiveDimensions(node) {
+  const dims = Array.isArray(node.asset?.dimensions) ? node.asset.dimensions : [1, 1, 1]
+  const scale = Array.isArray(node.scale) ? node.scale : [1, 1, 1]
+  return [0, 1, 2].map((i) => (Number(dims[i]) || 1) * (Number(scale[i]) || 1))
+}
+
+function clampWithNote(value, lo, hi, label, notes) {
+  if (value < lo || value > hi) {
+    notes.push(`${label}=${value} şema sınırına kırpıldı [${lo}, ${hi}]`)
+    return Math.min(hi, Math.max(lo, value))
+  }
+  return value
+}
+
+function migratedId(oldId, prefix) {
+  const suffix = oldId.includes('_') ? oldId.slice(oldId.indexOf('_') + 1) : oldId
+  return `${prefix}_${suffix}`
+}
+
+function baseFields(node) {
+  return {
+    object: 'node',
+    id: node.id,
+    name: node.name,
+    parentId: node.parentId ?? null,
+    visible: node.visible ?? true,
+    metadata: stripTransient(node.metadata),
+    position: node.position ?? [0, 0, 0],
+    rotation: node.rotation ?? [0, 0, 0],
+  }
+}
+
+/** A migrated object is a real placed object, not an in-progress preview. */
+function stripTransient(metadata) {
+  if (!metadata || typeof metadata !== 'object') return {}
+  const { isTransient, ...rest } = metadata
+  return rest
+}
+
+/**
+ * Legacy procedural kind → converter. The migration target side; extend this
+ * table as the legacy inventory surfaces more kinds. Every converter maps the
+ * legacy bounding box onto the parametric fields whose defaults produce the
+ * closest visual match, and leaves every other parameter to the schema's
+ * defaults.
+ */
+function toPalletRack(node, notes) {
+  const [w, h, d] = effectiveDimensions(node)
+  return {
+    ...baseFields(node),
+    id: migratedId(node.id, 'pallet-rack'),
+    type: 'warehouse:pallet-rack',
+    bayClearWidth: clampWithNote(w, 0.6, 6, `${node.id} genişlik`, notes),
+    uprightHeight: clampWithNote(h, 1, 20, `${node.id} yükseklik`, notes),
+    depth: clampWithNote(d, 0.4, 2.5, `${node.id} derinlik`, notes),
+  }
+}
+
+const toPallet = (cargo) => (node) => ({
+  ...baseFields(node),
+  id: migratedId(node.id, 'pallet'),
+  type: 'warehouse:pallet',
+  preset: 'epal-1',
+  cargo,
+})
+
+/** Length is rollers × pitch; 100 mm pitch spans 2.7–20 m in whole rollers. */
+function toConveyorRoller(node, notes) {
+  const [length, , height] = effectiveDimensions(node)
+  const rollers = Math.min(200, Math.max(27, Math.round(length * 10)))
+  if (Math.abs(rollers / 10 - length) > 0.05) {
+    notes.push(`${node.id} konveyör uzunluğu ${length} m → ${rollers / 10} m (rulo adımına yuvarlandı)`)
+  }
+  return {
+    ...baseFields(node),
+    id: migratedId(node.id, 'conveyor-roller'),
+    type: 'warehouse:conveyor-roller',
+    rollerPitch: '100',
+    rollers,
+    usefulWidth: '600',
+    transportHeight: clampWithNote(height, 0.37, 3, `${node.id} taşıma yüksekliği`, notes),
+  }
+}
+
+const PROCEDURAL_CONVERTERS = {
+  'asset://procedural/rack': toPalletRack,
+}
+
+/**
+ * The later legacy vintage stored equipment as library items whose models
+ * lived in the desktop build's own IndexedDB — unreachable from any server
+ * deployment, so these MUST be rebuilt as parametric nodes to stay visible.
+ * Handles deliberately left out (dispatch-packing-table, tote) pass through
+ * unchanged by owner decision and are listed in the report as invisible until
+ * a real model is uploaded for them.
+ */
+const LIBRARY_CONVERTERS = {
+  'asset://rack': toPalletRack,
+  'asset://euro-pallet': toPallet('none'),
+  'asset://loaded-euro-pallet': toPallet('carton'),
+  'asset://flat-wire-mesh-conveyor': toConveyorRoller,
+}
+
+/**
+ * Id prefixes the current plugin schemas no longer accept; seen on
+ * warehouse:* nodes written by the late legacy vintage (`palletrack_…`).
+ */
+const LEGACY_WAREHOUSE_ID_PREFIXES = {
+  'warehouse:pallet-rack': [['palletrack', 'pallet-rack']],
+  'warehouse:conveyor-roller': [['conveyorroller', 'conveyor-roller']],
+}
+
+function isLegacyProceduralItem(node) {
+  return (
+    node?.type === 'item' &&
+    typeof node.asset?.src === 'string' &&
+    node.asset.src.startsWith('asset://procedural/')
+  )
+}
+
+function isLegacyLibraryEquipment(node) {
+  return node?.type === 'item' && typeof node.asset?.src === 'string' && node.asset.src in LIBRARY_CONVERTERS
+}
+
+/** Mutates the node's id to the current prefix; returns whether it changed. */
+function normaliseWarehouseId(node) {
+  for (const [legacy, current] of LEGACY_WAREHOUSE_ID_PREFIXES[node?.type] ?? []) {
+    if (node.id.startsWith(`${legacy}_`)) {
+      node.id = `${current}_${node.id.slice(legacy.length + 1)}`
+      return true
+    }
+  }
+  return false
+}
+
+/**
+ * Converts a legacy graph in place-of (returns a new graph plus a report).
+ * Throws MigrationError when a procedural kind has no converter.
+ */
+export class MigrationError extends Error {
+  constructor(message, details) {
+    super(message)
+    this.details = details
+  }
+}
+
+export function migrateLegacyGraph(legacyGraph, { dropTransient = false } = {}) {
+  const report = {
+    converted: [],
+    passedThrough: 0,
+    invisible: [],
+    renamedIds: 0,
+    droppedTransient: [],
+    repairedParentIds: 0,
+    notes: [],
+  }
+
+  const nodes = structuredClone(legacyGraph.nodes ?? {})
+  let rootNodeIds = [...(legacyGraph.rootNodeIds ?? [])]
+
+  if (dropTransient) {
+    for (const [id, node] of Object.entries(nodes)) {
+      if (node?.metadata?.isTransient === true) {
+        delete nodes[id]
+        report.droppedTransient.push(id)
+      }
+    }
+  }
+
+  const unknown = []
+  const idMap = new Map()
+  for (const [id, node] of Object.entries(nodes)) {
+    let converter
+    if (isLegacyProceduralItem(node)) {
+      converter = PROCEDURAL_CONVERTERS[node.asset.src]
+      if (!converter) {
+        unknown.push({ id, src: node.asset.src, name: node.name })
+        continue
+      }
+    } else if (isLegacyLibraryEquipment(node)) {
+      converter = LIBRARY_CONVERTERS[node.asset.src]
+    } else {
+      // A plain asset:// handle resolved from the desktop build's IndexedDB —
+      // valid to keep (owner's call), but it has no model on a server.
+      if (node?.type === 'item' && node.asset?.src?.startsWith('asset://')) {
+        report.invisible.push({ id, src: node.asset.src, name: node.name })
+      }
+      const renamed = normaliseWarehouseId(node)
+      if (renamed) {
+        delete nodes[id]
+        nodes[node.id] = node
+        idMap.set(id, node.id)
+        report.renamedIds++
+      }
+      report.passedThrough++
+      continue
+    }
+    // Parse through the owning schema so every defaulted field materialises.
+    // `setScene` stores nodes verbatim, and kind systems crash on synthesised
+    // nodes that lack fields editor-created ones always carry (found the hard
+    // way: a pallet without `supportSlabId` emptied the scene on load the
+    // moment a slab stood under it).
+    const migrated = parseNodeWithDefaults(converter(node, report.notes))
+    delete nodes[id]
+    nodes[migrated.id] = migrated
+    idMap.set(id, migrated.id)
+    report.converted.push({ from: id, to: migrated.id, type: migrated.type })
+  }
+
+  if (unknown.length > 0) {
+    throw new MigrationError(
+      `Eşlemesi tanımsız ${unknown.length} eski tip bulundu — taşıma durduruldu, hiçbir düğüm atlanmadı`,
+      unknown,
+    )
+  }
+
+  const mapId = (id) => idMap.get(id) ?? id
+  rootNodeIds = rootNodeIds.map(mapId).filter((id) => id in nodes)
+  for (const node of Object.values(nodes)) {
+    if (Array.isArray(node.children)) {
+      node.children = node.children.map(mapId).filter((id) => id in nodes)
+    }
+    if (typeof node.parentId === 'string') node.parentId = mapId(node.parentId)
+  }
+
+  // The legacy writer left `parentId: null` on nodes their parents list as
+  // children; the children arrays are the authoritative record.
+  for (const node of Object.values(nodes)) {
+    for (const childId of node.children ?? []) {
+      const child = nodes[childId]
+      if (child && child.parentId !== node.id) {
+        child.parentId = node.id
+        report.repairedParentIds++
+      }
+    }
+  }
+
+  const graph = { nodes, rootNodeIds }
+  if (Object.values(nodes).some((n) => typeof n?.type === 'string' && n.type.startsWith('warehouse:'))) {
+    const installed = new Set(legacyGraph.installedPlugins ?? [])
+    installed.add(WAREHOUSE_PLUGIN_ID)
+    graph.installedPlugins = [...installed]
+  } else if (legacyGraph.installedPlugins) {
+    graph.installedPlugins = [...legacyGraph.installedPlugins]
+  }
+
+  return { graph, report }
+}
+
+/** Node-type + procedural-kind frequency count, for the migration inventory. */
+export function inventory(legacyGraph) {
+  const counts = {}
+  for (const node of Object.values(legacyGraph.nodes ?? {})) {
+    const key = isLegacyProceduralItem(node) ? `item → ${node.asset.src}` : (node?.type ?? '?')
+    counts[key] = (counts[key] ?? 0) + 1
+  }
+  return counts
+}
+
+// ── CLI ────────────────────────────────────────────────────────────────────
+
+function parseArgs(argv) {
+  const args = { _: [] }
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]
+    if (a === '--json' || a === '--db' || a === '--scene' || a === '--out') args[a.slice(2)] = argv[++i]
+    else if (a === '--list') args.list = true
+    else if (a === '--drop-transient') args.dropTransient = true
+    else args._.push(a)
+  }
+  return args
+}
+
+/**
+ * The legacy sqlite schema is discovered, not assumed: the table holding
+ * scenes is whichever has both an id-like and a JSON/graph-like column.
+ * Refuses loudly when nothing matches, printing what it saw instead.
+ */
+function openLegacyScenes(dbPath) {
+  const { Database } = require('bun:sqlite')
+  const db = new Database(dbPath, { readonly: true })
+  const tables = db.query("SELECT name FROM sqlite_master WHERE type='table'").all()
+  const candidates = []
+  for (const { name } of tables) {
+    const cols = db.query(`PRAGMA table_info(${JSON.stringify(name).slice(1, -1)})`).all()
+    const colNames = cols.map((c) => c.name.toLowerCase())
+    const idCol = cols[colNames.indexOf('id')]
+    const graphCol = cols.find((c) => /graph|json|data|content/.test(c.name.toLowerCase()))
+    if (idCol && graphCol) candidates.push({ table: name, idCol: idCol.name, graphCol: graphCol.name, cols })
+  }
+  if (candidates.length === 0) {
+    const seen = tables.map((t) => t.name).join(', ') || '(hiç tablo yok)'
+    throw new Error(`pascal.db içinde sahne tablosu bulunamadı. Görülen tablolar: ${seen}`)
+  }
+  return { db, ...candidates[0] }
+}
+
+function loadLegacySceneFromDb(dbPath, sceneId) {
+  const { db, table, idCol, graphCol, cols } = openLegacyScenes(dbPath)
+  const row = db.query(`SELECT * FROM ${table} WHERE ${idCol} = ?`).get(sceneId)
+  if (!row) throw new Error(`Sahne '${sceneId}' ${table} tablosunda yok`)
+  const parsed = JSON.parse(row[graphCol])
+  // Some writers store the whole scene envelope in the JSON column, some just
+  // the graph; accept either.
+  const graph = parsed.graph ?? parsed
+  const nameCol = cols.find((c) => c.name.toLowerCase() === 'name')
+  return { id: sceneId, name: row[nameCol?.name] ?? parsed.name ?? 'Untitled scene', graph }
+}
+
+function listScenesInDb(dbPath) {
+  const { db, table, idCol, graphCol, cols } = openLegacyScenes(dbPath)
+  const nameCol = cols.find((c) => c.name.toLowerCase() === 'name')
+  const rows = db.query(`SELECT * FROM ${table}`).all()
+  return rows.map((row) => {
+    let counts = {}
+    try {
+      const parsed = JSON.parse(row[graphCol])
+      counts = inventory(parsed.graph ?? parsed)
+    } catch {
+      counts = { '!graf çözümlenemedi': 1 }
+    }
+    return { id: row[idCol], name: row[nameCol?.name], table, counts }
+  })
+}
+
+function main() {
+  const args = parseArgs(process.argv.slice(2))
+
+  if (args.list) {
+    const scenes = args.db
+      ? listScenesInDb(args.db)
+      : [(({ id, name, graph }) => ({ id, name, counts: inventory(graph) }))(readJsonScene(args.json))]
+    for (const s of scenes) {
+      console.log(`\n${s.id}  ${s.name ?? ''}`)
+      for (const [k, v] of Object.entries(s.counts)) console.log(`  ${v.toString().padStart(4)}  ${k}`)
+    }
+    return
+  }
+
+  const legacy = args.db ? loadLegacySceneFromDb(args.db, requireArg(args, 'scene')) : readJsonScene(args.json)
+  const { graph, report } = migrateLegacyGraph(legacy.graph, { dropTransient: args.dropTransient })
+
+  console.log(`Sahne: ${legacy.id} (${legacy.name})`)
+  console.log(`  dönüştürülen: ${report.converted.length}, olduğu gibi geçen: ${report.passedThrough}`)
+  for (const c of report.converted) console.log(`    ${c.from} → ${c.to} (${c.type})`)
+  if (report.droppedTransient.length) console.log(`  atılan geçici düğümler: ${report.droppedTransient.join(', ')}`)
+  if (report.repairedParentIds) console.log(`  onarılan parentId: ${report.repairedParentIds}`)
+  if (report.renamedIds) console.log(`  yeni öneke taşınan id: ${report.renamedIds}`)
+  if (report.invisible.length) {
+    const bySrc = {}
+    for (const item of report.invisible) bySrc[item.src] = (bySrc[item.src] ?? 0) + 1
+    console.log(`  UYARI — modeli sunucuda olmayan ${report.invisible.length} öğe (görünmez kalır):`)
+    for (const [src, count] of Object.entries(bySrc)) console.log(`    ${count}× ${src}`)
+  }
+  for (const n of report.notes) console.log(`  not: ${n}`)
+
+  // Same validation the server runs — a green migration is an accepted POST.
+  const result = apiGraphSchema.safeParse(graph)
+  if (!result.success) {
+    console.error('\nŞema doğrulaması BAŞARISIZ — çıktı yazılmadı:')
+    for (const issue of result.error.issues) {
+      console.error(`  ${issue.path.join('.')}: ${issue.message}`)
+    }
+    process.exit(1)
+  }
+  const body = { id: legacy.id, name: legacy.name, graph }
+  const out = args.out ?? `${legacy.id}.migrated.json`
+  fs.writeFileSync(out, JSON.stringify(body, null, 2))
+  console.log(`\nŞema doğrulaması geçti ✓ → ${path.resolve(out)}`)
+}
+
+function readJsonScene(file) {
+  if (!file) throw new Error('--json <dosya> veya --db <pascal.db> --scene <id> gerekli')
+  const parsed = JSON.parse(fs.readFileSync(file, 'utf8'))
+  return { id: parsed.id, name: parsed.name ?? 'Untitled scene', graph: parsed.graph ?? parsed }
+}
+
+function requireArg(args, name) {
+  if (!args[name]) throw new Error(`--${name} gerekli`)
+  return args[name]
+}
+
+if (import.meta.main) main()
diff --git a/scripts/migrate-legacy-scene.test.ts b/scripts/migrate-legacy-scene.test.ts
new file mode 100644
index 000000000..779d7dd9a
--- /dev/null
+++ b/scripts/migrate-legacy-scene.test.ts
@@ -0,0 +1,261 @@
+import { describe, expect, test } from 'bun:test'
+import { apiGraphSchema } from '../apps/editor/lib/graph-schema'
+import { MigrationError, inventory, migrateLegacyGraph } from './migrate-legacy-scene.mjs'
+
+/**
+ * Mirrors a real backup from the legacy desktop build (scene 0d18a76c12c4,
+ * v17): a site → building → level chain whose building and level carry the
+ * legacy writer's `parentId: null` bug, one library item, and one procedural
+ * rack item — the shape every legacy scene is expected to share.
+ */
+function legacyGraph() {
+  return {
+    nodes: {
+      site_a: {
+        object: 'node',
+        id: 'site_a',
+        type: 'site',
+        parentId: null,
+        visible: true,
+        metadata: {},
+        polygon: {
+          type: 'polygon',
+          points: [
+            [-15, -15],
+            [15, -15],
+            [15, 15],
+            [-15, 15],
+          ],
+        },
+        children: ['building_b'],
+      },
+      building_b: {
+        object: 'node',
+        id: 'building_b',
+        type: 'building',
+        parentId: null,
+        visible: true,
+        metadata: {},
+        children: ['level_c'],
+        position: [0, 0, 0],
+        rotation: [0, 0, 0],
+      },
+      level_c: {
+        object: 'node',
+        id: 'level_c',
+        type: 'level',
+        parentId: null,
+        visible: true,
+        metadata: {},
+        children: ['item_lib', 'item_rack'],
+        level: 0,
+      },
+      item_lib: {
+        object: 'node',
+        id: 'item_lib',
+        type: 'item',
+        name: 'Cactus',
+        parentId: 'level_c',
+        visible: true,
+        metadata: { isTransient: true },
+        position: [0, 0, 0],
+        rotation: [0, 0, 0],
+        scale: [1, 1, 1],
+        children: [],
+        asset: {
+          id: 'cactus',
+          category: 'furniture',
+          name: 'Cactus',
+          thumbnail: 'https://byrpxoiotywskoojsrzd.supabase.co/storage/v1/object/public/items/system/cactus/thumbnail.png',
+          source: 'library',
+          src: 'https://byrpxoiotywskoojsrzd.supabase.co/storage/v1/object/public/items/system/cactus/model.glb',
+          dimensions: [0.34, 0.39, 0.27],
+          tags: ['cactus'],
+          offset: [-0.0039, 0, 0],
+          rotation: [0, 0, 0],
+          scale: [1, 1, 1],
+        },
+      },
+      item_rack: {
+        object: 'node',
+        id: 'item_rack',
+        type: 'item',
+        name: 'Rack',
+        parentId: 'level_c',
+        visible: true,
+        metadata: { isTransient: true },
+        position: [3, 0, -2],
+        rotation: [0, Math.PI / 2, 0],
+        scale: [1, 1, 1],
+        children: [],
+        asset: {
+          id: 'rack',
+          category: 'asset',
+          name: 'Rack',
+          thumbnail: '/icons/box.png',
+          source: 'library',
+          src: 'asset://procedural/rack',
+          dimensions: [2.5, 4, 1.2],
+          tags: ['floor', 'rack', 'warehouse', 'storage'],
+          offset: [0, 0, 0],
+          rotation: [0, 0, 0],
+          scale: [1, 1, 1],
+        },
+      },
+    },
+    rootNodeIds: ['site_a'],
+  }
+}
+
+describe('migrateLegacyGraph', () => {
+  test('converts a procedural rack item into a warehouse:pallet-rack node', () => {
+    const { graph, report } = migrateLegacyGraph(legacyGraph())
+
+    expect(graph.nodes.item_rack).toBeUndefined()
+    const rack = graph.nodes['pallet-rack_rack']
+    expect(rack).toMatchObject({
+      type: 'warehouse:pallet-rack',
+      parentId: 'level_c',
+      position: [3, 0, -2],
+      bayClearWidth: 2.5,
+      uprightHeight: 4,
+      depth: 1.2,
+    })
+    expect(rack.metadata.isTransient).toBeUndefined()
+    expect(report.converted).toEqual([
+      { from: 'item_rack', to: 'pallet-rack_rack', type: 'warehouse:pallet-rack' },
+    ])
+  })
+
+  test('updates children references and repairs legacy null parentIds', () => {
+    const { graph, report } = migrateLegacyGraph(legacyGraph())
+
+    expect(graph.nodes.level_c.children).toEqual(['item_lib', 'pallet-rack_rack'])
+    expect(graph.nodes.building_b.parentId).toBe('site_a')
+    expect(graph.nodes.level_c.parentId).toBe('building_b')
+    expect(report.repairedParentIds).toBe(2)
+  })
+
+  test('clamps out-of-range legacy dimensions into schema bounds, with a note', () => {
+    const legacy = legacyGraph()
+    legacy.nodes.item_rack.asset.dimensions = [8, 30, 0.1]
+    const { graph, report } = migrateLegacyGraph(legacy)
+
+    const rack = graph.nodes['pallet-rack_rack']
+    expect(rack.bayClearWidth).toBe(6)
+    expect(rack.uprightHeight).toBe(20)
+    expect(rack.depth).toBe(0.4)
+    expect(report.notes).toHaveLength(3)
+  })
+
+  test('marks the warehouse plugin installed once a warehouse node exists', () => {
+    const { graph } = migrateLegacyGraph(legacyGraph())
+    expect(graph.installedPlugins).toEqual(['ovurrsl:warehouse'])
+  })
+
+  test('stops on an unmapped procedural kind instead of skipping the node', () => {
+    const legacy = legacyGraph()
+    legacy.nodes.item_rack.asset.src = 'asset://procedural/antigravity-shelf'
+
+    expect(() => migrateLegacyGraph(legacy)).toThrow(MigrationError)
+    try {
+      migrateLegacyGraph(legacy)
+    } catch (error) {
+      expect((error as MigrationError).details).toEqual([
+        { id: 'item_rack', src: 'asset://procedural/antigravity-shelf', name: 'Rack' },
+      ])
+    }
+  })
+
+  test('--drop-transient removes flagged nodes and their references', () => {
+    const { graph, report } = migrateLegacyGraph(legacyGraph(), { dropTransient: true })
+
+    expect(report.droppedTransient.sort()).toEqual(['item_lib', 'item_rack'])
+    expect(graph.nodes.level_c.children).toEqual([])
+    expect(report.converted).toHaveLength(0)
+  })
+
+  test('migrated graph passes the exact schema the API enforces', () => {
+    const { graph } = migrateLegacyGraph(legacyGraph())
+    const result = apiGraphSchema.safeParse(graph)
+    expect(result.success).toBe(true)
+  })
+
+  test('converts the late-vintage library equipment handles', () => {
+    const legacy = legacyGraph()
+    legacy.nodes.item_rack.asset.src = 'asset://rack'
+    legacy.nodes.item_lib.asset = {
+      ...legacy.nodes.item_lib.asset,
+      id: 'loaded-euro-pallet',
+      src: 'asset://loaded-euro-pallet',
+      dimensions: [0.8, 1.15, 1.2],
+    }
+    legacy.nodes.item_conv = {
+      ...structuredClone(legacy.nodes.item_rack),
+      id: 'item_conv',
+      name: 'Flat Wire Mesh Conveyor',
+      asset: { id: 'flat-wire-mesh-conveyor', src: 'asset://flat-wire-mesh-conveyor', dimensions: [7.3, 0.8, 0.6] },
+    }
+    legacy.nodes.level_c.children.push('item_conv')
+
+    const { graph, report } = migrateLegacyGraph(legacy)
+
+    expect(graph.nodes['pallet-rack_rack'].type).toBe('warehouse:pallet-rack')
+    expect(graph.nodes.pallet_lib).toMatchObject({ type: 'warehouse:pallet', preset: 'epal-1', cargo: 'carton' })
+    expect(graph.nodes['conveyor-roller_conv']).toMatchObject({
+      type: 'warehouse:conveyor-roller',
+      rollerPitch: '100',
+      rollers: 73,
+      transportHeight: 0.6,
+    })
+    expect(report.converted).toHaveLength(3)
+    expect(apiGraphSchema.safeParse(graph).success).toBe(true)
+  })
+
+  test('renames legacy warehouse id prefixes the current schema refuses', () => {
+    const legacy = legacyGraph()
+    legacy.nodes.palletrack_x = {
+      object: 'node',
+      id: 'palletrack_x',
+      type: 'warehouse:pallet-rack',
+      parentId: 'level_c',
+      visible: true,
+      metadata: {},
+      position: [0, 0, 0],
+      rotation: [0, 0, 0],
+    }
+    legacy.nodes.level_c.children.push('palletrack_x')
+
+    const { graph, report } = migrateLegacyGraph(legacy)
+
+    expect(graph.nodes.palletrack_x).toBeUndefined()
+    expect(graph.nodes['pallet-rack_x'].type).toBe('warehouse:pallet-rack')
+    expect(graph.nodes.level_c.children).toContain('pallet-rack_x')
+    expect(report.renamedIds).toBe(1)
+    expect(apiGraphSchema.safeParse(graph).success).toBe(true)
+  })
+
+  test('keeps unmapped asset:// items but reports them as invisible', () => {
+    const legacy = legacyGraph()
+    legacy.nodes.item_rack.asset.src = 'asset://dispatch-packing-table'
+
+    const { graph, report } = migrateLegacyGraph(legacy)
+
+    expect(graph.nodes.item_rack.asset.src).toBe('asset://dispatch-packing-table')
+    expect(report.invisible).toEqual([
+      { id: 'item_rack', src: 'asset://dispatch-packing-table', name: 'Rack' },
+    ])
+  })
+})
+
+describe('inventory', () => {
+  test('counts node types and procedural kinds separately', () => {
+    expect(inventory(legacyGraph())).toEqual({
+      site: 1,
+      building: 1,
+      level: 1,
+      item: 1,
+      'item → asset://procedural/rack': 1,
+    })
+  })
+})
diff --git a/scripts/sync-panel.mjs b/scripts/sync-panel.mjs
new file mode 100644
index 000000000..1dccda83c
--- /dev/null
+++ b/scripts/sync-panel.mjs
@@ -0,0 +1,242 @@
+#!/usr/bin/env node
+/**
+ * Pushes the vendored console back to its own repository.
+ *
+ * The console lives here as a copy (`apps/editor/panel/`, imported as
+ * `@panel/*`), so fixes made while integrating it — MariaDB portability, the
+ * stricter null handling this repo's TypeScript demands, the mail templates —
+ * would otherwise be stranded. This walks the copy, undoes the two
+ * integration-time transformations (import prefix, directory layout) and writes
+ * the result into a checkout of ovurrsl/panel.
+ *
+ * Two sync rules, deliberately different:
+ *
+ *   library  — `panel/{lib,components,migrations}` and the three scripts are
+ *              the console itself. New files here are created upstream.
+ *   routes   — `app/(panel)` and `app/api` hold console routes mixed with the
+ *              editor's own. A file is updated only if the same path already
+ *              exists upstream; anything else is an editor route and is left
+ *              alone. That rule needs no list to maintain.
+ *
+ * Usage:
+ *   node scripts/sync-panel.mjs --panel <path-to-panel-checkout> [--check]
+ *
+ * `--check` writes nothing and exits 1 when the two sides differ, which is what
+ * CI runs to notice that a sync is owed.
+ */
+import { existsSync, mkdirSync, readFileSync, readdirSync, statSync, writeFileSync } from 'node:fs'
+import { dirname, join, relative, resolve } from 'node:path'
+
+const REPO = resolve(import.meta.dirname, '..')
+const EDITOR = join(REPO, 'apps/editor')
+
+/** [source under apps/editor, destination in the panel repo, create-new?] */
+const LIBRARY = [
+  ['panel/lib', 'src/lib', true],
+  ['panel/components', 'src/components', true],
+  ['panel/migrations', 'db/migrations', true],
+  ['panel/globals.css', 'src/app/globals.css', true],
+  ['panel/env.ts', 'scripts/env.ts', true],
+  ['panel/migrate.ts', 'scripts/migrate.ts', true],
+  ['panel/seed.ts', 'scripts/seed.ts', true],
+]
+
+const ROUTES = [
+  ['app/(panel)', 'src/app', false],
+  ['app/api', 'src/app/api', false],
+]
+
+/**
+ * Files the console cannot use, by destination path.
+ *
+ * Two groups, for two different reasons.
+ *
+ * The shell (`layout.tsx`, `page.tsx`) exists upstream but the editor's copies
+ * are deliberately different, because the editor owns the shell and bridges
+ * identity into its own session type.
+ *
+ * The scenes and guides tabs are integration-only. Their backing endpoints
+ * cannot exist upstream: `/api/guides` imports the editor's own
+ * `@/lib/guides-content` and `@/lib/scene-api-security`, and `/api/admin/scenes`
+ * reads a `scenes` table that no migration in this set creates — the console's
+ * schema only carries `sites.scene_id`. `ROUTES` already declines to push those
+ * endpoints (create-new is `false` there), so syncing the tabs would give the
+ * standalone console two rail entries whose fetches 404, and `console-tabs.ts`
+ * is what registers them.
+ *
+ * `tab-content.tsx` joins them because it imports both tabs and switches on
+ * their names: holding the tabs back while pushing their only caller is what
+ * turns a missing feature into a repository that does not compile.
+ *
+ * `api/health/route.ts` is the same shape one layer down — the editor's copy
+ * reaches for `@/lib/auth/db` and `@/lib/scene-store-server`, neither of which
+ * exists upstream.
+ *
+ * The cost of holding `console-tabs.ts` back is that changes to the SHARED
+ * tabs' metadata no longer reach upstream either. That is the price of a file
+ * that must legitimately differ between the two deployments; splitting the list
+ * into a base the console owns and an extension the editor adds would remove
+ * the conflict properly, and is the real fix when someone has the appetite.
+ *
+ * Every entry here was found by running `tsc --noEmit` in a checkout of
+ * ovurrsl/panel with the sync applied. The test suite passed with all of them
+ * still missing, so the type checker is the only thing that catches this class
+ * of breakage — keep using it when this list changes.
+ */
+const EDITOR_OWNED = new Set([
+  'src/app/layout.tsx',
+  'src/app/page.tsx',
+  'src/app/api/health/route.ts',
+  'src/lib/console-tabs.ts',
+  'src/components/console/tab-content.tsx',
+  'src/components/console/scenes-tab.tsx',
+  'src/components/console/guides-tab.tsx',
+])
+
+const SYNCABLE = /\.(ts|tsx|css|sql)$/
+
+/**
+ * Tests do not cross. The two repositories run different runners — this one is
+ * on `bun:test`, the console is on vitest — so a test file pushed upstream is
+ * one vitest cannot execute and `tsc` cannot resolve (`Cannot find module
+ * 'bun:test'`). The console's own suite lives in `tests/`, outside every
+ * mapping in this file, so nothing here can reach it either way.
+ */
+const TEST_FILE = /\.(test|spec)\.[jt]sx?$/
+
+function files(root) {
+  if (!existsSync(root)) return []
+  if (statSync(root).isFile()) return [root]
+  const out = []
+  for (const entry of readdirSync(root)) {
+    const path = join(root, entry)
+    if (statSync(path).isDirectory()) out.push(...files(path))
+    else if (SYNCABLE.test(entry) && !TEST_FILE.test(entry)) out.push(path)
+  }
+  return out
+}
+
+/** Undo the import rewrite the vendoring applied. Nothing else is touched. */
+function toUpstream(source) {
+  return source.replace(/@panel\//g, '@/')
+}
+
+/**
+ * Reapply it.
+ *
+ * The forward rewrite is LOSSY: `@panel/x` and a literal `@/x` both leave as
+ * `@/x`, so this direction cannot tell them apart and turns every `@/` into
+ * `@panel/`. That is correct for a console file, where `@/` can only mean the
+ * console's own `src`, and it constrains the vendored copy: a synced file under
+ * `apps/editor/panel/` must never contain a bare `@/`, in an import OR in
+ * prose. One did — a comment naming `@/lib/escape-layers` — and it would have
+ * ping-ponged forever, each direction "fixing" what the other just wrote.
+ *
+ * That mistake has a signature worth knowing: `--check` says in sync one way
+ * and names a file the other way. If you see it, the file has a bare `@/`.
+ */
+function toVendored(source) {
+  return source.replace(/@\//g, '@panel/')
+}
+
+/**
+ * The pairs to walk, for one direction.
+ *
+ * Pull inverts the same tables rather than declaring its own, so the two
+ * directions cannot drift apart — a mapping added for one is a mapping the
+ * other gets for free.
+ *
+ * Inverting is not a swap, because the console's tree nests where the editor's
+ * does not: `src/app/api` and `src/app/globals.css` both live INSIDE `src/app`.
+ * Walking `src/app` naively would drag the console's endpoints into
+ * `app/(panel)/api/` and its stylesheet into `app/(panel)/globals.css`, both
+ * wrong and both silent. Longest source path first, and the first pair to claim
+ * a file keeps it.
+ *
+ * `create` is dropped on pull, i.e. every pair creates. Its `false` on `ROUTES`
+ * protects the CONSOLE from receiving editor-only routes; the mirror risk —
+ * the editor receiving a console route it does not have — is not a risk but
+ * the entire point, since a new console endpoint is exactly what the editor
+ * needs to pick up.
+ */
+function pairsFor(pull) {
+  const declared = [...LIBRARY, ...ROUTES]
+  if (!pull) return declared.map(([from, to, create]) => ({ from, to, create }))
+  return declared
+    .map(([from, to]) => ({ from: to, to: from, create: true }))
+    .sort((a, b) => b.from.length - a.from.length)
+}
+
+function plan(panelRoot, pull) {
+  const actions = []
+  const claimed = new Set()
+  const sourceRoot = pull ? panelRoot : EDITOR
+  const destRoot = pull ? EDITOR : panelRoot
+
+  for (const { from, to, create } of pairsFor(pull)) {
+    const source = join(sourceRoot, from)
+    const isFile = existsSync(source) && statSync(source).isFile()
+    for (const file of files(source)) {
+      const rel = isFile ? '' : relative(source, file)
+      const origin = isFile ? from : join(from, rel)
+      // A file the console owns can be reached by two pairs; the longer one
+      // already took it.
+      if (claimed.has(origin)) continue
+      claimed.add(origin)
+      const target = isFile ? to : join(to, rel)
+      // `EDITOR_OWNED` holds console-side paths, so it is the origin on pull
+      // and the target on push. Either way it means the same thing: the
+      // editor's copy is the authority and must not be written over.
+      if (EDITOR_OWNED.has(pull ? origin : target)) continue
+      const absolute = join(destRoot, target)
+      if (!create && !existsSync(absolute)) continue
+      const body = readFileSync(file, 'utf8')
+      const next = pull ? toVendored(body) : toUpstream(body)
+      const current = existsSync(absolute) ? readFileSync(absolute, 'utf8') : null
+      if (current === next) continue
+      actions.push({ target, absolute, next, kind: current === null ? 'new' : 'changed' })
+    }
+  }
+  return actions.sort((a, b) => a.target.localeCompare(b.target))
+}
+
+const args = process.argv.slice(2)
+const panelRoot = args[args.indexOf('--panel') + 1]
+const checkOnly = args.includes('--check')
+const pull = args.includes('--pull')
+
+if (!panelRoot || panelRoot.startsWith('--')) {
+  console.error('usage: node scripts/sync-panel.mjs --panel <path> [--pull] [--check]')
+  process.exit(2)
+}
+if (!existsSync(join(panelRoot, 'src/lib'))) {
+  console.error(`${panelRoot} does not look like a checkout of ovurrsl/panel (no src/lib).`)
+  process.exit(2)
+}
+
+const actions = plan(panelRoot, pull)
+
+if (actions.length === 0) {
+  console.log(pull ? 'the vendored copy is current — nothing to pull' : 'panel is in sync — nothing to push')
+  process.exit(0)
+}
+
+for (const action of actions) {
+  console.log(`${action.kind === 'new' ? 'new    ' : 'changed'}  ${action.target}`)
+}
+console.log(`\n${actions.length} file(s)`)
+
+if (checkOnly) {
+  console.error(
+    pull
+      ? '\nthe console has moved ahead of the vendored copy; run the sync'
+      : '\nthe console copy has moved ahead of its repository; run the sync',
+  )
+  process.exit(1)
+}
+
+for (const action of actions) {
+  mkdirSync(dirname(action.absolute), { recursive: true })
+  writeFileSync(action.absolute, action.next)
+}
+console.log('written')