Deploy delivery robot app

.env.example

@@ -0,0 +1,3 @@
+SUPABASE_URL=https://pecfsoviamtjirugasmh.supabase.co
+SUPABASE_KEY=your_anon_key_here
+TELEGRAM_BOT_TOKEN=your_bot_token_here

.gitignore

@@ -0,0 +1,30 @@
+# Environment
+.env
+.env.local
+.env.*.local
+config.h
+
+# Python
+__pycache__/
+*.py[cod]
+*.pyo
+.venv/
+venv/
+*.egg-info/
+dist/
+build/
+
+# Arduino
+ESP_Code/build/
+*.hex
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+.claude/
+*.pgm
+*.yaml

ARCHITECTURE.md

@@ -0,0 +1,57 @@
+# Architecture Notes
+
+## Long-Poll Pattern (ESP32 ↔ Server)
+
+The ESP32 polls `GET /api/elevator/command` when IDLE. Instead of returning immediately with "no command", the server *holds* the HTTP connection open for up to 10 seconds using `asyncio.wait_for`:
+
+```
+ESP32                          Server
+  |---GET /api/elevator/command-->|
+  |                               | await event.wait() (up to 10s)
+  |                               |
+  |   (dashboard sends POST)      |
+  |                               | event.set() → command available
+  |<------{"cmd":"CALL_3"}---------| returns immediately
+  |                               |
+  |---GET /api/elevator/command-->| (next cycle after move completes)
+  |                               | no command → timeout after 10s
+  |<------{"cmd":"NONE"}-----------| returns after 10s
+```
+
+**Why this matters:** The naive approach polls every 500 ms — 120 requests/minute. Long-poll reduces this to ~6 requests/minute (one per timeout cycle), and delivers commands with near-zero latency when they do arrive.
+
+**Implementation detail:** A single `asyncio.Event` guards a single command slot. After the ESP32 reads the command, both the slot and the Event are cleared so the next poll cycle starts clean. The ESP32 sets `http.setTimeout(15000)` to ensure the socket stays open past the 10-second server hold.
+
+## SSE Pattern (Server → Dashboard)
+
+The dashboard opens one persistent HTTP connection to `GET /api/events`. The server keeps this connection alive and pushes JSON-encoded events whenever elevator or robot state changes:
+
+```
+Browser                          Server
+  |---GET /api/events------------>|
+  |                               | registers asyncio.Queue
+  |<--data:{"type":"elevator"...}-| on ESP32 POST /status
+  |<--data:{"type":"robot"...}----| on Jetson POST /status
+  |                               |
+  | (client disconnects)          |
+  |                               | queue removed from set (finally block)
+```
+
+**Why this matters:** Polling every 500 ms from the browser creates 120 requests/minute regardless of whether anything changed. SSE pushes updates only when state changes, with zero polling overhead and no perceptible latency.
+
+**Implementation detail:** Each connected browser gets its own `asyncio.Queue`. The `broadcast()` function in `state.py` pushes a copy of every state change to every registered queue. When the browser disconnects (tab closed, network drop), the `finally` block in the async generator removes the queue from the set, preventing memory leaks.
+
+## Component Interaction Summary
+
+```
+[ESP32]                [Jetson / ROS2]         [Browser]
+   |                         |                     |
+   |--POST /api/elevator/status-->            SSE <--|
+   |<--GET /api/elevator/command-- (long-poll)       |
+   |                         |--POST /api/robot/status-->
+   |                         |<--GET /api/robot/goal-- (long-poll)
+   |                                    POST /api/robot/goal <--|
+   |<-- (elevator_cmd_event set by robot/goal handler)          |
+```
+
+`POST /api/robot/goal` is the single mission-dispatch entry point. It sets both the robot nav goal and the elevator call command in one atomic operation, ensuring the elevator is already summoned when the robot arrives.

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.11-slim
+
+WORKDIR /code
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

PLAN.md

@@ -0,0 +1,125 @@
+# Delivery Robot System — Implementation Plan
+
+## Architecture Overview
+ESP32 (elevator) + Jetson/ROS2 (robot) + FastAPI server (HF Spaces) + Supabase (orders DB) + Telegram Bot (notifications) + Browser dashboards
+
+---
+
+## Phase 1 — Supabase: Order schema & connection [ ]
+- [ ] Create Supabase project
+- [ ] Create `orders` table
+- [ ] Add `supabase-py` to requirements.txt
+- [ ] Add Supabase client singleton to `app/supabase_client.py`
+- [ ] Add env vars: `SUPABASE_URL`, `SUPABASE_KEY`
+
+### orders table schema
+```sql
+create table orders (
+  id          uuid primary key default gen_random_uuid(),
+  floor       int  not null check (floor between 1 and 5),
+  pin         text not null,           -- 4-digit, stored as bcrypt hash
+  telegram_id text,                    -- optional, for notification
+  status      text not null default 'pending'
+                   check (status in ('pending','assigned','delivering','delivered','cancelled')),
+  created_at  timestamptz default now(),
+  delivered_at timestamptz
+);
+```
+
+---
+
+## Phase 2 — Order API endpoints [ ]
+- [ ] `POST /api/orders` — create order, generate PIN, send Telegram noti, return order_id + PIN
+- [ ] `GET  /api/orders` — list all orders (admin dashboard)
+- [ ] `GET  /api/orders/next` — return oldest pending order (used by queue logic)
+- [ ] `POST /api/orders/{id}/confirm` — verify PIN, mark delivered, send Telegram noti
+- [ ] `POST /api/orders/{id}/cancel` — admin cancel
+
+Add `app/routers/orders.py` + update `app/main.py`.
+
+---
+
+## Phase 3 — Telegram Bot [ ]
+- [ ] Create bot via @BotFather, get token
+- [ ] Add `app/telegram.py` — thin wrapper around Telegram sendMessage API (httpx, no heavy lib)
+- [ ] Trigger on order created: send PIN to customer
+- [ ] Trigger on delivering: "Robot đang đến tầng X"
+- [ ] Trigger on delivered: "Đã giao thành công. Cảm ơn!"
+- [ ] Env var: `TELEGRAM_BOT_TOKEN`
+
+---
+
+## Phase 4 — Customer interface (`/order` page) [ ]
+- [ ] Serve `customer_order.html` at `GET /order`
+- [ ] Form: chọn tầng (1-5), nhập Telegram username
+- [ ] Submit → POST /api/orders → hiển thị "Đơn hàng đã tạo, kiểm tra Telegram để nhận PIN"
+- [ ] PIN entry page: nhập PIN khi robot đến → POST /api/orders/{id}/confirm
+
+---
+
+## Phase 5 — Queue logic & auto-dispatch [ ]
+- [ ] `app/queue.py` — background task (asyncio loop) runs every 5s
+- [ ] When robot state == IDLE and orders queue non-empty:
+  - Pick oldest pending order
+  - Update order status → assigned
+  - Dispatch robot goal (POST /api/robot/goal) + elevator command
+  - Update Telegram "Robot đang đến"
+- [ ] On robot ARRIVED + PIN confirmed → mark delivered, pick next order
+
+---
+
+## Phase 6 — Floor map & Robot position [ ]
+Map file: `my_khu_vuc_2.pgm` + `my_khu_vuc_2.yaml`
+- resolution: 0.05 m/px, origin: [-33.9, -22.3, 0]
+- 10 floors share this map (floors 11-15 not scanned yet, demo with 10)
+- Convert formula: `px = (world_x - (-33.9)) / 0.05`, `py = img_height - (world_y - (-22.3)) / 0.05`
+
+Tasks:
+- [ ] Convert PGM → PNG on startup using Pillow, serve via StaticFiles
+- [ ] Add map panel to dashboard: `<img>` of PNG + `<canvas>` overlay for robot dot
+- [ ] On SSE robot event: update canvas dot position using pose x/y → pixel conversion
+- [ ] Add Pillow to requirements.txt
+
+---
+
+## Phase 7 — Admin dashboard polish [ ]
+- [ ] Order queue panel: list pending/assigned orders, cancel button
+- [ ] Order history table: completed orders with timestamp
+- [ ] System status bar: elevator state + robot state at a glance
+
+---
+
+## Env vars needed (add to HF Spaces Secrets)
+| Key | Description | Status |
+|-----|-------------|--------|
+| `SUPABASE_URL` | `https://pecfsoviamtjirugasmh.supabase.co` | set |
+| `SUPABASE_KEY` | anon key from Supabase dashboard | set |
+| `TELEGRAM_BOT_TOKEN` | From @BotFather | set |
+| `TELEGRAM_PROXY_URL` | Cloudflare Worker URL proxying api.telegram.org | set |
+
+## Pages
+| URL | Purpose |
+|-----|---------|
+| `/` | Admin dashboard — create orders, start delivery run, monitor elevator + robot |
+| `/order` | Customer self-service order page |
+| `/robot` | Robot screen — PIN keypad for compartment unlock |
+| `/docs` | Auto-generated FastAPI OpenAPI docs |
+
+---
+
+## Current status
+- [x] ESP32 FSM + long-poll working
+- [x] FastAPI server deployed on HF Spaces
+- [x] Dashboard with SSE + elevator animation
+- [x] Floor buttons dispatch elevator commands
+- [x] Phase 1 (Supabase) — table created on pecfsoviamtjirugasmh
+- [x] Phase 2 (Order API) — app/routers/orders.py with full CRUD + dispatch + confirm
+- [x] Phase 3 (Telegram) — app/telegram.py, Cloudflare Worker proxy (cloudflare_worker.js)
+- [x] Phase 4 (Customer UI) — customer_order.html at /order (English)
+- [x] Phase 5 (Queue logic) — batch delivery run via POST /api/orders/start_run
+  - All pending orders picked at once, dispatched FIFO
+  - Auto-advance to next order after each PIN confirm
+  - delivery_queue + current_order tracked in state.py
+- [x] Phase 7 (Admin polish) — full English, order queue with status badges,
+  Start Delivery Run button (disabled during active run), live SSE updates
+- [ ] Phase 6 (Floor map) — pending, needs map PNG + coordinate overlay

app/main.py

@@ -0,0 +1,83 @@
+import asyncio
+import json
+from contextlib import asynccontextmanager
+from pathlib import Path
+
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, Response
+from sse_starlette.sse import EventSourceResponse
+
+import app.state as state
+from app.routers import elevator, orders, robot, locker
+from app.simulator import run_elevator_simulator
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    # Start the virtual elevator simulator in the background
+    simulator_task = asyncio.create_task(run_elevator_simulator())
+    yield
+    # Cleanup: Cancel the task on shutdown
+    simulator_task.cancel()
+    try:
+        await simulator_task
+    except asyncio.CancelledError:
+        pass
+
+
+app = FastAPI(
+    title="Elevator & Robot Mission Coordinator",
+    version="1.0.0",
+    lifespan=lifespan,
+)
+
+app.include_router(elevator.router)
+app.include_router(robot.router)
+app.include_router(orders.router)
+app.include_router(locker.router)
+
+_HTML_PATH = Path(__file__).parent.parent / "elevator_panel.html"
+_ORDER_HTML_PATH = Path(__file__).parent.parent / "customer_order.html"
+_STATIC_DIR = Path(__file__).parent.parent / "static"
+
+
+_NO_CACHE = {"Cache-Control": "no-store"}
+
+app.mount("/static", StaticFiles(directory=_STATIC_DIR), name="static")
+
+
+@app.get("/", response_class=HTMLResponse, include_in_schema=False)
+async def serve_dashboard() -> Response:
+    return HTMLResponse(_HTML_PATH.read_text(encoding="utf-8"), headers=_NO_CACHE)
+
+
+@app.get("/order", response_class=HTMLResponse, include_in_schema=False)
+async def serve_order_page() -> Response:
+    return HTMLResponse(_ORDER_HTML_PATH.read_text(encoding="utf-8"), headers=_NO_CACHE)
+
+
+@app.get("/robot", response_class=HTMLResponse, include_in_schema=False)
+async def serve_robot_panel() -> Response:
+    return HTMLResponse(_ORDER_HTML_PATH.read_text(encoding="utf-8"), headers=_NO_CACHE)
+
+
+@app.get("/api/events", include_in_schema=False)
+async def sse_events():
+    queue: asyncio.Queue = asyncio.Queue()
+    state.sse_queues.add(queue)
+
+    async def event_generator():
+        try:
+            while True:
+                payload = await queue.get()
+                yield {"data": json.dumps(payload)}
+        finally:
+            state.sse_queues.discard(queue)
+
+    return EventSourceResponse(event_generator())
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("app.main:app", host="0.0.0.0", port=7860, reload=False)

app/models.py

@@ -0,0 +1,60 @@
+from pydantic import BaseModel, Field
+
+
+class ElevatorStatusUpdate(BaseModel):
+    Floor: int = Field(..., description="Current floor (1-10)", ge=1, le=10)
+    Dir: str = Field(..., description="Direction: UP, DOWN, or IDLE")
+    Doors: str = Field(..., description="Door state: CLOSED, OPENING, OPEN, CLOSING")
+    State: str = Field(..., description="FSM state: IDLE, MOVING, DOORS_OPENING, DOORS_OPEN, DOORS_CLOSING")
+
+
+class ElevatorCommandRequest(BaseModel):
+    floor: int = Field(..., description="Target floor (1-10)", ge=1, le=10)
+
+
+class ElevatorCommandResponse(BaseModel):
+    cmd: str = Field(..., description="Command string e.g. CALL_3, or NONE")
+
+
+class ElevatorStateResponse(BaseModel):
+    Floor: int = Field(..., description="Current floor")
+    Dir: str = Field(..., description="Direction")
+    Doors: str = Field(..., description="Door state")
+    State: str = Field(..., description="FSM state")
+
+
+class RobotPose(BaseModel):
+    x: float = Field(..., description="X position in meters")
+    y: float = Field(..., description="Y position in meters")
+    theta: float = Field(..., description="Heading in radians")
+
+
+class RobotStatusUpdate(BaseModel):
+    state: str = Field(..., description="Nav state: IDLE, NAVIGATING, ARRIVED, ERROR")
+    floor: int = Field(..., description="Robot's current floor", ge=1, le=10)
+    pose: RobotPose = Field(..., description="Current robot pose")
+
+
+class RobotGoalRequest(BaseModel):
+    floor: int = Field(..., description="Target floor (1-10)", ge=1, le=10)
+    pose: RobotPose = Field(..., description="Target pose on the floor")
+
+
+class RobotGoalResponse(BaseModel):
+    goal: RobotGoalRequest | None = Field(..., description="Nav goal or null on timeout")
+
+
+class RobotStateResponse(BaseModel):
+    state: str = Field(..., description="Nav state")
+    floor: int = Field(..., description="Robot's current floor")
+    pose: RobotPose = Field(..., description="Current robot pose")
+    
+class LockerCommandRequest(BaseModel):
+    locker_id: int = Field(..., description="Locker number", ge=1)
+    action: str = Field(..., description="open, close, or pulse")
+    duration_ms: int = Field(3000, description="Pulse duration in milliseconds", ge=100, le=60000)
+
+
+class LockerCommandResponse(BaseModel):
+    ok: bool = Field(..., description="Whether command was accepted")
+    command: dict | None = Field(None, description="Command payload for Jetson, or null on timeout")

app/routers/elevator.py

@@ -0,0 +1,90 @@
+import asyncio
+
+from fastapi import APIRouter, Depends, HTTPException
+
+import app.state as state
+from app.models import (
+    ElevatorCommandRequest,
+    ElevatorCommandResponse,
+    ElevatorStateResponse,
+    ElevatorStatusUpdate,
+)
+from app.security import require_api_key
+
+router = APIRouter(prefix="/api/elevator", tags=["elevator"])
+
+LONG_POLL_TIMEOUT = 10.0
+
+
+@router.post("/status", status_code=200, dependencies=[Depends(require_api_key)])
+async def receive_elevator_status(body: ElevatorStatusUpdate) -> dict:
+    """
+    ESP32/hardware elevator reports state.
+
+    Protected because a fake client could otherwise spoof elevator state.
+    """
+    state.elevator_state.Floor = body.Floor
+    state.elevator_state.Dir = body.Dir
+    state.elevator_state.Doors = body.Doors
+    state.elevator_state.State = body.State
+
+    await state.broadcast("elevator", {
+        "Floor": body.Floor,
+        "Dir": body.Dir,
+        "Doors": body.Doors,
+        "State": body.State,
+    })
+    return {"ok": True}
+
+
+@router.get("/command", response_model=ElevatorCommandResponse, dependencies=[Depends(require_api_key)])
+async def poll_elevator_command() -> ElevatorCommandResponse:
+    """
+    ESP32/hardware elevator long-polls for elevator command.
+
+    Protected so random internet clients cannot consume elevator commands.
+    """
+    if state.elevator_cmd is not None:
+        cmd = state.elevator_cmd
+        state.elevator_cmd = None
+        state.elevator_cmd_event.clear()
+        return ElevatorCommandResponse(cmd=cmd)
+
+    try:
+        await asyncio.wait_for(state.elevator_cmd_event.wait(), timeout=LONG_POLL_TIMEOUT)
+    except asyncio.TimeoutError:
+        return ElevatorCommandResponse(cmd="NONE")
+
+    cmd = state.elevator_cmd
+    state.elevator_cmd = None
+    state.elevator_cmd_event.clear()
+
+    if cmd is None:
+        return ElevatorCommandResponse(cmd="NONE")
+    return ElevatorCommandResponse(cmd=cmd)
+
+
+@router.post("/command", status_code=200, dependencies=[Depends(require_api_key)])
+async def dispatch_elevator_command(body: ElevatorCommandRequest) -> dict:
+    """
+    Dashboard/admin sends an elevator command.
+
+    Protected because this can command real elevator hardware later.
+    """
+    if not 1 <= body.floor <= 10:
+        raise HTTPException(status_code=422, detail="Floor must be between 1 and 10")
+
+    state.elevator_cmd = f"CALL_{body.floor}"
+    state.elevator_cmd_event.set()
+    return {"ok": True, "cmd": state.elevator_cmd}
+
+
+@router.get("/state", response_model=ElevatorStateResponse)
+async def get_elevator_state() -> ElevatorStateResponse:
+    s = state.elevator_state
+    return ElevatorStateResponse(
+        Floor=s.Floor,
+        Dir=s.Dir,
+        Doors=s.Doors,
+        State=s.State,
+    )

app/routers/locker.py

@@ -0,0 +1,112 @@
+import asyncio
+import os
+
+from fastapi import APIRouter, Depends, HTTPException
+
+import app.state as state
+from app.models import LockerCommandRequest, LockerCommandResponse
+from app.security import require_api_key
+
+
+router = APIRouter(prefix="/api/locker", tags=["locker"])
+
+# 5-lock system:
+#   locker_id 1 = BASE lock
+#   locker_id 2-5 = delivery lockers 1-4
+LOCKER_COUNT = int(os.environ.get("LOCKER_COUNT", "5"))
+DEFAULT_LOCKER_PULSE_MS = int(os.environ.get("DEFAULT_LOCKER_PULSE_MS", "3000"))
+MAX_LOCKER_PULSE_MS = int(os.environ.get("MAX_LOCKER_PULSE_MS", "10000"))
+
+
+@router.post("/command", response_model=LockerCommandResponse, dependencies=[Depends(require_api_key)])
+async def post_locker_command(req: LockerCommandRequest):
+    """
+    Dashboard/admin creates a locker command for Jetson.
+
+    Protected because this can unlock physical locks.
+    """
+    action = req.action.strip().lower()
+
+    if req.locker_id < 1 or req.locker_id > LOCKER_COUNT:
+        raise HTTPException(
+            status_code=400,
+            detail=f"locker_id must be between 1 and {LOCKER_COUNT}"
+        )
+
+    if action not in ["open", "close", "pulse"]:
+        raise HTTPException(
+            status_code=400,
+            detail="action must be one of: open, close, pulse"
+        )
+
+    duration_ms = req.duration_ms
+
+    if action == "open":
+        # Safer web meaning: open = timed pulse, not permanent energize.
+        duration_ms = DEFAULT_LOCKER_PULSE_MS
+        action = "pulse"
+
+    if action == "pulse":
+        duration_ms = max(100, min(duration_ms, MAX_LOCKER_PULSE_MS))
+
+    cmd = {
+        "locker_id": req.locker_id,
+        "action": action,
+        "duration_ms": duration_ms,
+    }
+
+    state.locker_cmd = cmd
+    state.locker_cmd_event.set()
+
+    await state.broadcast("locker", {
+        "event": "command_created",
+        "locker_id": req.locker_id,
+        "action": action,
+        "duration_ms": duration_ms,
+    })
+
+    return LockerCommandResponse(ok=True, command=cmd)
+
+
+@router.get("/command", response_model=LockerCommandResponse, dependencies=[Depends(require_api_key)])
+async def get_locker_command():
+    """
+    Jetson long-polls this endpoint.
+    If no command exists, wait up to 10 seconds.
+
+    Protected so random clients cannot consume locker commands.
+    """
+    try:
+        await asyncio.wait_for(state.locker_cmd_event.wait(), timeout=10.0)
+    except asyncio.TimeoutError:
+        return LockerCommandResponse(ok=True, command=None)
+
+    cmd = state.locker_cmd
+
+    # Consume command after Jetson receives it.
+    state.locker_cmd = None
+    state.locker_cmd_event.clear()
+
+    return LockerCommandResponse(ok=True, command=cmd)
+
+
+@router.get("/state")
+async def get_locker_state():
+    return {
+        "locker_count": LOCKER_COUNT,
+        "mapping": {
+            "1": "BASE",
+            "2": "LOCKER 1",
+            "3": "LOCKER 2",
+            "4": "LOCKER 3",
+            "5": "LOCKER 4",
+        },
+        "lockers": [
+            {
+                "locker_id": i,
+                "label": "BASE" if i == 1 else f"LOCKER {i - 1}",
+                "state": "unknown"
+            }
+            for i in range(1, LOCKER_COUNT + 1)
+        ]
+    }

app/routers/orders.py

@@ -0,0 +1,398 @@
+import logging
+import os
+import random
+import string
+from datetime import datetime, timezone
+
+from fastapi import APIRouter, Depends, HTTPException
+from pydantic import BaseModel, Field
+
+import app.state as state
+from app.models import RobotGoalRequest, RobotPose
+from app.security import require_api_key
+from app.supabase_client import get_supabase
+from app.telegram import send_message
+
+logger = logging.getLogger(__name__)
+router = APIRouter(prefix="/api/orders", tags=["orders"])
+
+ACTIVE_STATUSES = ["pending", "assigned", "delivering", "arrived"]
+
+# Waypoints per floor — tune x/y/theta to match actual Nav2 map.
+# IMPORTANT: These are placeholders until you map real delivery points per floor.
+FLOOR_WAYPOINTS: dict[int, tuple[float, float, float]] = {
+    1:  (0.0,  0.0,  0.0),
+    2:  (0.0,  5.0,  0.0),
+    3:  (0.0, 10.0,  0.0),
+    4:  (0.0, 15.0,  0.0),
+    5:  (0.0, 20.0,  0.0),
+    6:  (0.0, 25.0,  0.0),
+    7:  (0.0, 30.0,  0.0),
+    8:  (0.0, 35.0,  0.0),
+    9:  (0.0, 40.0,  0.0),
+    10: (0.0, 45.0,  0.0),
+}
+
+
+def _use_supabase() -> bool:
+    return bool(os.getenv("SUPABASE_URL") and os.getenv("SUPABASE_KEY"))
+
+
+def _gen_pin() -> str:
+    return "".join(random.choices(string.digits, k=6))
+
+
+def _gen_short_id(existing: set[str]) -> str:
+    """4-digit numeric ID unique among currently active orders."""
+    for _ in range(100):
+        candidate = f"{random.randint(1000, 9999)}"
+        if candidate not in existing:
+            return candidate
+    return f"{random.randint(1000, 9999)}"
+
+
+def _now_iso() -> str:
+    return datetime.now(timezone.utc).isoformat()
+
+
+def _get_active_short_ids_from_supabase() -> set[str]:
+    db = get_supabase()
+    result = (
+        db.table("orders")
+        .select("short_id")
+        .in_("status", ACTIVE_STATUSES)
+        .execute()
+    )
+    return {r["short_id"] for r in (result.data or []) if r.get("short_id")}
+
+
+def _order_to_waypoint(order: dict) -> dict:
+    x, y, theta = FLOOR_WAYPOINTS.get(order["floor"], (0.0, 0.0, 0.0))
+    return {
+        "order_id": order["id"],
+        "floor": order["floor"],
+        "x": x,
+        "y": y,
+        "theta": theta,
+    }
+
+
+async def _dispatch_order(order: dict) -> None:
+    state.current_order = order
+    floor = int(order["floor"])
+    x, y, theta = FLOOR_WAYPOINTS.get(floor, (0.0, 0.0, 0.0))
+
+    order["status"] = "delivering"
+    order["dispatched_at"] = _now_iso()
+
+    if _use_supabase() and order.get("id"):
+        try:
+            db = get_supabase()
+            db.table("orders").update({
+                "status": "delivering",
+                "dispatched_at": order["dispatched_at"],
+            }).eq("id", order["id"]).execute()
+        except Exception as exc:
+            logger.warning("Supabase dispatch update failed: %s", exc)
+
+    state.robot_goal = RobotGoalRequest(
+        floor=floor,
+        pose=RobotPose(x=x, y=y, theta=theta),
+    )
+    state.robot_goal_event.set()
+
+    state.elevator_cmd = f"CALL_{floor}"
+    state.elevator_cmd_event.set()
+
+    if order.get("telegram_id"):
+        short = order.get("short_id", "")
+        pin = order.get("pin", "")
+        text = (
+            f"🤖 Your delivery is on the way to floor {floor}\!\n\n"
+            f"Order ID: `{short}`\n"
+            f"PIN \(tap to reveal\): ||{pin}||"
+        )
+        try:
+            await send_message(order["telegram_id"], text, parse_mode="MarkdownV2")
+        except Exception as exc:
+            logger.warning("Telegram send failed: %s", exc)
+
+    await state.broadcast("order_dispatched", {
+        "id": order["id"],
+        "short_id": order.get("short_id"),
+        "floor": floor,
+        "status": "delivering",
+        "queue_remaining": len(state.delivery_queue),
+    })
+
+    logger.info(
+        "Dispatched order %s to floor %s (%d remaining)",
+        order["id"], floor, len(state.delivery_queue)
+    )
+
+
+class OrderCreate(BaseModel):
+    floor: int = Field(..., ge=1, le=10)
+    room: str | None = Field(None, description="Room ID, e.g. R01")
+    telegram_id: str | None = Field(None, description="Telegram chat_id")
+
+
+class OrderConfirm(BaseModel):
+    order_short_id: str = Field(..., description="4-digit numeric order ID")
+    pin: str = Field(..., description="6-digit PIN")
+
+
+@router.post("", status_code=201)
+async def create_order(body: OrderCreate) -> dict:
+    """Public customer endpoint."""
+    pin = _gen_pin()
+
+    if not _use_supabase():
+        existing = {o.get("short_id") for o in state.dev_orders if o.get("short_id")}
+        short = _gen_short_id(existing)
+        state.dev_order_seq += 1
+
+        order = {
+            "id": f"dev-{state.dev_order_seq}",
+            "floor": body.floor,
+            "room": body.room,
+            "pin": pin,
+            "short_id": short,
+            "telegram_id": body.telegram_id,
+            "status": "pending",
+            "created_at": _now_iso(),
+        }
+
+        state.dev_orders.insert(0, order)
+        logger.info("Dev order created: %s short_id=%s floor=%s", order["id"], short, body.floor)
+
+    else:
+        existing = _get_active_short_ids_from_supabase()
+        short = _gen_short_id(existing)
+
+        db = get_supabase()
+        result = (
+            db.table("orders")
+            .insert({
+                "floor": body.floor,
+                "room": body.room,
+                "pin": pin,
+                "short_id": short,
+                "telegram_id": body.telegram_id,
+                "status": "pending",
+            })
+            .execute()
+        )
+
+        if not result.data:
+            raise HTTPException(status_code=500, detail="Supabase insert returned no data")
+
+        order = result.data[0]
+        logger.info("Order created: %s short_id=%s floor=%s", order["id"], short, body.floor)
+
+    if body.telegram_id:
+        text = (
+            f"✅ Order placed\! Floor: {body.floor}\n\n"
+            f"Order ID: `{short}`\n"
+            f"PIN \(tap to reveal\): ||{pin}||"
+        )
+        try:
+            await send_message(body.telegram_id, text, parse_mode="MarkdownV2")
+        except Exception as exc:
+            logger.warning("Telegram send failed: %s", exc)
+
+    await state.broadcast("order_created", {
+        "id": order["id"],
+        "short_id": short,
+        "floor": body.floor,
+        "room": body.room,
+        "status": "pending",
+    })
+
+    return {
+        "id": order["id"],
+        "short_id": short,
+        "floor": body.floor,
+        "room": body.room,
+        "pin": pin,
+        "status": "pending",
+    }
+
+
+@router.get("", dependencies=[Depends(require_api_key)])
+async def list_orders() -> dict:
+    """Admin/dashboard endpoint."""
+    if not _use_supabase():
+        return {"orders": list(state.dev_orders)}
+
+    db = get_supabase()
+    result = (
+        db.table("orders")
+        .select("*")
+        .order("created_at", desc=True)
+        .limit(100)
+        .execute()
+    )
+    return {"orders": result.data or []}
+
+
+@router.get("/active", dependencies=[Depends(require_api_key)])
+async def get_active_order() -> dict:
+    return {
+        "order": state.current_order,
+        "queue_remaining": len(state.delivery_queue),
+    }
+
+
+@router.get("/waypoints", dependencies=[Depends(require_api_key)])
+async def get_waypoints() -> dict:
+    waypoints = []
+    if state.current_order:
+        waypoints.append(_order_to_waypoint(state.current_order))
+    for o in state.delivery_queue:
+        waypoints.append(_order_to_waypoint(o))
+    return {"waypoints": waypoints}
+
+
+@router.post("/start_run", dependencies=[Depends(require_api_key)])
+async def start_delivery_run() -> dict:
+    """Admin endpoint. Protected because it dispatches robot/elevator commands."""
+    if state.current_order:
+        raise HTTPException(status_code=400, detail="A delivery run is already in progress")
+
+    if not _use_supabase():
+        pending = [o for o in state.dev_orders if o.get("status") == "pending"]
+    else:
+        db = get_supabase()
+        result = (
+            db.table("orders")
+            .select("*")
+            .eq("status", "pending")
+            .order("created_at")
+            .execute()
+        )
+        pending = result.data or []
+
+    if not pending:
+        raise HTTPException(status_code=400, detail="No pending orders")
+
+    if _use_supabase():
+        ids = [o["id"] for o in pending]
+        db = get_supabase()
+        db.table("orders").update({"status": "assigned"}).in_("id", ids).execute()
+
+    for o in pending:
+        o["status"] = "assigned"
+
+    state.delivery_queue = pending[1:]
+    await _dispatch_order(pending[0])
+
+    await state.broadcast("run_started", {
+        "total": len(pending),
+        "queue_remaining": len(state.delivery_queue),
+    })
+
+    logger.info("Delivery run started: %d orders", len(pending))
+    return {"ok": True, "total": len(pending), "first_floor": pending[0]["floor"]}
+
+
+@router.post("/{order_id}/confirm")
+async def confirm_order(order_id: str, body: OrderConfirm) -> dict:
+    """Customer confirmation endpoint."""
+    if not _use_supabase():
+        order = next((o for o in state.dev_orders if o.get("id") == order_id), None)
+        if not order:
+            raise HTTPException(status_code=404, detail="Order not found")
+    else:
+        db = get_supabase()
+        result = db.table("orders").select("*").eq("id", order_id).execute()
+        if not result.data:
+            raise HTTPException(status_code=404, detail="Order not found")
+        order = result.data[0]
+
+    if order["status"] == "delivered":
+        raise HTTPException(status_code=400, detail="Order already delivered")
+
+    if order.get("short_id") != body.order_short_id:
+        raise HTTPException(status_code=400, detail="Invalid order ID")
+    if order["pin"] != body.pin:
+        raise HTTPException(status_code=400, detail="Invalid PIN")
+
+    delivered_at = _now_iso()
+
+    if _use_supabase():
+        db = get_supabase()
+        db.table("orders").update({
+            "status": "delivered",
+            "delivered_at": delivered_at,
+        }).eq("id", order_id).execute()
+    else:
+        order["status"] = "delivered"
+        order["delivered_at"] = delivered_at
+
+    if order.get("telegram_id"):
+        try:
+            await send_message(
+                order["telegram_id"],
+                f"✅ Delivery confirmed\! Floor {order['floor']}\. Thank you\!",
+                parse_mode="MarkdownV2",
+            )
+        except Exception as exc:
+            logger.warning("Telegram send failed: %s", exc)
+
+    await state.broadcast("unlock", {"order_id": order_id, "floor": order["floor"]})
+
+    if state.delivery_queue:
+        next_order = state.delivery_queue.pop(0)
+        await _dispatch_order(next_order)
+    else:
+        state.current_order = None
+        await state.broadcast("run_complete", {})
+
+    return {"ok": True}
+
+
+@router.post("/{order_id}/cancel", dependencies=[Depends(require_api_key)])
+async def cancel_order(order_id: str) -> dict:
+    """Admin endpoint."""
+    if not _use_supabase():
+        order = next((o for o in state.dev_orders if o.get("id") == order_id), None)
+        if not order:
+            raise HTTPException(status_code=404, detail="Order not found")
+        if order.get("status") in ("delivered", "cancelled"):
+            raise HTTPException(status_code=400, detail="Cannot cancel this order")
+        order["status"] = "cancelled"
+        order["cancelled_at"] = _now_iso()
+        cancelled_order = order
+    else:
+        db = get_supabase()
+        result = db.table("orders").select("id,status,short_id,telegram_id").eq("id", order_id).execute()
+        if not result.data:
+            raise HTTPException(status_code=404, detail="Order not found")
+        if result.data[0]["status"] in ("delivered", "cancelled"):
+            raise HTTPException(status_code=400, detail="Cannot cancel this order")
+        db.table("orders").update({
+            "status": "cancelled",
+            "cancelled_at": _now_iso(),
+        }).eq("id", order_id).execute()
+        cancelled_order = result.data[0]
+
+    if state.current_order and state.current_order.get("id") == order_id:
+        state.current_order = None
+        state.delivery_queue.clear()
+
+    state.delivery_queue = [o for o in state.delivery_queue if o["id"] != order_id]
+
+    if cancelled_order.get("telegram_id"):
+        short = cancelled_order.get("short_id", "")
+        try:
+            await send_message(
+                cancelled_order["telegram_id"],
+                f"❌ Order `{short}` has been cancelled\. Please contact support if this was unexpected\.",
+                parse_mode="MarkdownV2",
+            )
+        except Exception as exc:
+            logger.warning("Telegram send failed: %s", exc)
+
+    await state.broadcast("order_cancelled", {"id": order_id})
+    return {"ok": True}

app/routers/robot.py

@@ -0,0 +1,162 @@
+import os
+from datetime import datetime, timezone
+
+from app.supabase_client import get_supabase
+from app.telegram import send_message
+
+import asyncio
+
+
+from fastapi import APIRouter, Depends, HTTPException
+
+import app.state as state
+from app.models import (
+    RobotGoalRequest,
+    RobotGoalResponse,
+    RobotStateResponse,
+    RobotStatusUpdate,
+)
+from app.security import require_api_key
+
+router = APIRouter(prefix="/api/robot", tags=["robot"])
+
+LONG_POLL_TIMEOUT = 10.0
+
+
+def _use_supabase() -> bool:
+    return bool(os.getenv("SUPABASE_URL") and os.getenv("SUPABASE_KEY"))
+
+
+async def notify_current_order_arrived() -> None:
+    order = state.current_order
+    if not order:
+        return
+
+    if order.get("_arrival_notified"):
+        return
+
+    order["_arrival_notified"] = True
+    order["status"] = "arrived"
+    order["arrived_at"] = datetime.now(timezone.utc).isoformat()
+
+    if _use_supabase() and order.get("id"):
+        try:
+            db = get_supabase()
+            db.table("orders").update({
+                "status": "arrived",
+                "arrived_at": order["arrived_at"],
+            }).eq("id", order["id"]).execute()
+        except Exception as exc:
+            # Do not break robot status reporting because DB update failed.
+            print("Supabase arrival update failed:", exc)
+
+    chat_id = order.get("telegram_id")
+    floor = order.get("floor")
+    room = order.get("room") or "your room"
+    short_id = order.get("short_id")
+    pin = order.get("pin")
+
+    if chat_id:
+        text = (
+            f"🤖 Your delivery robot has arrived at floor {floor}, {room}.\n\n"
+            f"Order ID: `{short_id}`\n"
+            f"PIN \(tap to reveal\): ||{pin}||"
+        )
+        await send_message(chat_id, text, parse_mode="MarkdownV2")
+
+    await state.broadcast("order_arrived", {
+        "order_id": order.get("id"),
+        "floor": floor,
+    })
+
+@router.post("/status", status_code=200, dependencies=[Depends(require_api_key)])
+async def receive_robot_status(body: RobotStatusUpdate) -> dict:
+    """
+    Jetson reports robot state.
+
+    Protected because a fake client could otherwise spoof robot state.
+    """
+    state.robot_state.state = body.state
+    state.robot_state.floor = body.floor
+    state.robot_state.pose = body.pose
+
+    await state.broadcast("robot", {
+        "state": body.state,
+        "floor": body.floor,
+        "pose": body.pose.model_dump(),
+    })
+
+    if body.state.upper() == "ARRIVED":
+        await notify_current_order_arrived()
+
+    return {"ok": True}
+
+
+@router.post("/simulate_arrival", status_code=200, dependencies=[Depends(require_api_key)])
+async def simulate_arrival() -> dict:
+    """Simulate robot arriving at destination — for demo/testing without a physical robot."""
+    if not state.current_order:
+        raise HTTPException(status_code=400, detail="No active delivery")
+    await notify_current_order_arrived()
+    return {"ok": True}
+
+
+@router.get("/goal", response_model=RobotGoalResponse, dependencies=[Depends(require_api_key)])
+async def poll_robot_goal() -> RobotGoalResponse:
+    """
+    Jetson long-polls for the next robot goal.
+
+    Protected so random internet clients cannot consume/steal pending robot goals.
+    """
+    if state.robot_goal is not None:
+        goal = state.robot_goal
+        state.robot_goal = None
+        state.robot_goal_event.clear()
+        return RobotGoalResponse(goal=goal)
+
+    try:
+        await asyncio.wait_for(state.robot_goal_event.wait(), timeout=LONG_POLL_TIMEOUT)
+    except asyncio.TimeoutError:
+        return RobotGoalResponse(goal=None)
+
+    goal = state.robot_goal
+    state.robot_goal = None
+    state.robot_goal_event.clear()
+
+    return RobotGoalResponse(goal=goal)
+
+
+@router.post("/goal", status_code=200, dependencies=[Depends(require_api_key)])
+async def dispatch_robot_goal(body: RobotGoalRequest) -> dict:
+    """
+    Dashboard/admin sends a Nav2 goal.
+
+    Protected because this directly commands robot navigation.
+    """
+    state.robot_goal = body
+    state.robot_goal_event.set()
+
+    state.elevator_cmd = f"CALL_{body.floor}"
+    state.elevator_cmd_event.set()
+
+    await state.broadcast("robot", {
+        "state": "DISPATCHED",
+        "floor": body.floor,
+        "pose": body.pose.model_dump(),
+    })
+    return {"ok": True}
+
+
+@router.get("/state", response_model=RobotStateResponse)
+async def get_robot_state() -> RobotStateResponse:
+    """
+    Public read-only state endpoint.
+
+    Keep open so the dashboard can render basic state and you can test with curl.
+    """
+    s = state.robot_state
+    return RobotStateResponse(
+        state=s.state,
+        floor=s.floor,
+        pose=s.pose,
+    )

app/security.py

@@ -0,0 +1,28 @@
+import os
+import secrets
+from fastapi import Header, HTTPException, status
+
+
+ROBOT_API_KEY = os.getenv("ROBOT_API_KEY", "")
+
+
+def require_api_key(x_api_key: str | None = Header(default=None)):
+    """
+    Simple API-key protection for dangerous robot endpoints.
+
+    Client must send:
+      X-API-Key: your_secret_key
+    """
+    if not ROBOT_API_KEY:
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Server ROBOT_API_KEY is not configured",
+        )
+
+    if not x_api_key or not secrets.compare_digest(x_api_key, ROBOT_API_KEY):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Invalid or missing API key",
+        )
+
+    return True

app/simulator.py

@@ -0,0 +1,136 @@
+import asyncio
+import logging
+import app.state as state
+
+logger = logging.getLogger(__name__)
+
+# Constants matching ESP_Code.ino FSM timings (in seconds)
+TIME_PER_FLOOR = 2.0
+TIME_DOOR_OPENING = 1.5
+TIME_DOORS_OPEN = 4.0
+TIME_DOOR_CLOSING = 1.5
+
+async def run_elevator_simulator():
+    """
+    Virtual Elevator Simulator that runs as a background task.
+    Monitors state.elevator_cmd_event, updates state.elevator_state,
+    and broadcasts state transitions via Server-Sent Events (SSE).
+    """
+    logger.info("Virtual Elevator Simulator started")
+    
+    # Initialize state
+    state.elevator_state.Floor = 1
+    state.elevator_state.Dir = "IDLE"
+    state.elevator_state.Doors = "CLOSED"
+    state.elevator_state.State = "IDLE"
+    
+    while True:
+        try:
+            # Wait until a command is set
+            await state.elevator_cmd_event.wait()
+            
+            cmd = state.elevator_cmd
+            if not cmd or not cmd.startswith("CALL_"):
+                state.elevator_cmd_event.clear()
+                await asyncio.sleep(0.1)
+                continue
+                
+            try:
+                target_floor = int(cmd.split("_")[1])
+            except (IndexError, ValueError):
+                logger.error("Invalid elevator command format: %s", cmd)
+                state.elevator_cmd = None
+                state.elevator_cmd_event.clear()
+                continue
+                
+            current_floor = state.elevator_state.Floor
+            if target_floor == current_floor:
+                logger.info("Elevator is already at target floor %d", target_floor)
+                state.elevator_cmd = None
+                state.elevator_cmd_event.clear()
+                continue
+                
+            # Consume the command
+            state.elevator_cmd = None
+            state.elevator_cmd_event.clear()
+            
+            # 1. State: MOVING
+            state.elevator_state.State = "MOVING"
+            state.elevator_state.Dir = "UP" if target_floor > current_floor else "DOWN"
+            state.elevator_state.Doors = "CLOSED"
+            
+            logger.info("Elevator moving from floor %d to %d (%s)", current_floor, target_floor, state.elevator_state.Dir)
+            await state.broadcast("elevator", {
+                "Floor": state.elevator_state.Floor,
+                "Dir": state.elevator_state.Dir,
+                "Doors": state.elevator_state.Doors,
+                "State": state.elevator_state.State,
+            })
+            
+            # Move floor-by-floor
+            step = 1 if target_floor > current_floor else -1
+            while state.elevator_state.Floor != target_floor:
+                await asyncio.sleep(TIME_PER_FLOOR)
+                state.elevator_state.Floor += step
+                logger.info("Elevator reached floor %d", state.elevator_state.Floor)
+                await state.broadcast("elevator", {
+                    "Floor": state.elevator_state.Floor,
+                    "Dir": state.elevator_state.Dir,
+                    "Doors": state.elevator_state.Doors,
+                    "State": state.elevator_state.State,
+                })
+                
+            # 2. State: DOORS_OPENING
+            state.elevator_state.Dir = "IDLE"
+            state.elevator_state.State = "DOORS_OPENING"
+            state.elevator_state.Doors = "OPENING"
+            logger.info("Elevator arrived at floor %d. Opening doors...", state.elevator_state.Floor)
+            await state.broadcast("elevator", {
+                "Floor": state.elevator_state.Floor,
+                "Dir": state.elevator_state.Dir,
+                "Doors": state.elevator_state.Doors,
+                "State": state.elevator_state.State,
+            })
+            await asyncio.sleep(TIME_DOOR_OPENING)
+            
+            # 3. State: DOORS_OPEN
+            state.elevator_state.State = "DOORS_OPEN"
+            state.elevator_state.Doors = "OPEN"
+            logger.info("Elevator doors are OPEN at floor %d", state.elevator_state.Floor)
+            await state.broadcast("elevator", {
+                "Floor": state.elevator_state.Floor,
+                "Dir": state.elevator_state.Dir,
+                "Doors": state.elevator_state.Doors,
+                "State": state.elevator_state.State,
+            })
+            await asyncio.sleep(TIME_DOORS_OPEN)
+            
+            # 4. State: DOORS_CLOSING
+            state.elevator_state.State = "DOORS_CLOSING"
+            state.elevator_state.Doors = "CLOSING"
+            logger.info("Elevator doors are CLOSING at floor %d", state.elevator_state.Floor)
+            await state.broadcast("elevator", {
+                "Floor": state.elevator_state.Floor,
+                "Dir": state.elevator_state.Dir,
+                "Doors": state.elevator_state.Doors,
+                "State": state.elevator_state.State,
+            })
+            await asyncio.sleep(TIME_DOOR_CLOSING)
+            
+            # 5. State: IDLE / CLOSED
+            state.elevator_state.State = "IDLE"
+            state.elevator_state.Doors = "CLOSED"
+            logger.info("Elevator is now IDLE at floor %d", state.elevator_state.Floor)
+            await state.broadcast("elevator", {
+                "Floor": state.elevator_state.Floor,
+                "Dir": state.elevator_state.Dir,
+                "Doors": state.elevator_state.Doors,
+                "State": state.elevator_state.State,
+            })
+            
+        except asyncio.CancelledError:
+            logger.info("Elevator simulator task cancelled")
+            break
+        except Exception as e:
+            logger.error("Exception in elevator simulator: %s", e, exc_info=True)
+            await asyncio.sleep(1.0)

app/state.py

@@ -0,0 +1,49 @@
+import asyncio
+from dataclasses import dataclass, field
+
+from app.models import RobotGoalRequest, RobotPose
+
+
+@dataclass
+class ElevatorState:
+    Floor: int = 1
+    Dir: str = "IDLE"
+    Doors: str = "CLOSED"
+    State: str = "IDLE"
+
+
+@dataclass
+class RobotState:
+    state: str = "IDLE"
+    floor: int = 1
+    pose: RobotPose = field(default_factory=lambda: RobotPose(x=0.0, y=0.0, theta=0.0))
+
+
+elevator_state = ElevatorState()
+robot_state = RobotState()
+
+elevator_cmd: str | None = None
+robot_goal: RobotGoalRequest | None = None
+locker_cmd: dict | None = None
+
+elevator_cmd_event = asyncio.Event()
+robot_goal_event = asyncio.Event()
+locker_cmd_event = asyncio.Event()
+
+sse_queues: set[asyncio.Queue] = set()
+
+# Active order being delivered right now
+current_order: dict | None = None
+
+# Remaining orders queued for this delivery run (FIFO)
+delivery_queue: list[dict] = []
+
+# Dev-mode in-memory orders (used when Supabase env is missing)
+dev_orders: list[dict] = []
+dev_order_seq: int = 0
+
+
+async def broadcast(event_type: str, data: dict) -> None:
+    payload = {"type": event_type, **data}
+    for q in list(sse_queues):
+        await q.put(payload)

app/supabase_client.py

@@ -0,0 +1,14 @@
+import os
+
+from supabase import Client, create_client
+
+_client: Client | None = None
+
+
+def get_supabase() -> Client:
+    global _client
+    if _client is None:
+        url = os.environ["SUPABASE_URL"]
+        key = os.environ["SUPABASE_KEY"]
+        _client = create_client(url, key)
+    return _client

app/telegram.py

@@ -0,0 +1,45 @@
+import logging
+import os
+
+import httpx
+
+logger = logging.getLogger(__name__)
+
+_TOKEN: str | None = None
+_BASE_URL: str | None = None
+
+
+def _setup() -> tuple[str | None, str | None]:
+    global _TOKEN, _BASE_URL
+    if _TOKEN is None:
+        _TOKEN = os.environ.get("TELEGRAM_BOT_TOKEN")
+    if _BASE_URL is None:
+        proxy = os.environ.get("TELEGRAM_PROXY_URL", "").rstrip("/")
+        _BASE_URL = proxy if proxy else "https://api.telegram.org"
+    return _TOKEN, _BASE_URL
+
+
+async def send_message(chat_id: str, text: str, parse_mode: str | None = None) -> None:
+    token, base_url = _setup()
+    if not token:
+        logger.warning("TELEGRAM_BOT_TOKEN not set — skipping")
+        return
+    if not chat_id:
+        logger.warning("No chat_id — skipping")
+        return
+
+    url = f"{base_url}/bot{token}/sendMessage"
+    payload: dict = {"chat_id": chat_id, "text": text}
+    if parse_mode:
+        payload["parse_mode"] = parse_mode
+
+    logger.info("Sending Telegram via %s to %s", base_url, chat_id)
+    async with httpx.AsyncClient() as client:
+        try:
+            resp = await client.post(url, json=payload, timeout=10)
+            if resp.is_success:
+                logger.info("Telegram OK → %s", chat_id)
+            else:
+                logger.error("Telegram API error %s: %s", resp.status_code, resp.text)
+        except Exception as e:
+            logger.error("Telegram send failed: %s — %s", type(e).__name__, e)

cloudflare_worker.js

@@ -0,0 +1,27 @@
+// Deploy this as a Cloudflare Worker.
+// It proxies all requests to api.telegram.org.
+//
+// Steps:
+//   1. Go to https://dash.cloudflare.com → Workers & Pages → Create Worker
+//   2. Paste this code, click Deploy
+//   3. Copy the worker URL (e.g. https://tg-proxy.yourname.workers.dev)
+//   4. Add TELEGRAM_PROXY_URL=https://tg-proxy.yourname.workers.dev
+//      to HuggingFace Spaces secrets
+
+export default {
+  async fetch(request) {
+    const url = new URL(request.url);
+    const target = new URL("https://api.telegram.org");
+    target.pathname = url.pathname;
+    target.search   = url.search;
+
+    const proxied = new Request(target.toString(), {
+      method:  request.method,
+      headers: request.headers,
+      body:    request.method !== "GET" && request.method !== "HEAD"
+               ? request.body : undefined,
+    });
+
+    return fetch(proxied);
+  },
+};

customer_order.html

@@ -0,0 +1,672 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920">
+<title>UEH B1 — Delivery Robot</title>
+<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Space+Grotesk:wght@300;400;500;600&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body {
+    width: 100%; height: 100%; overflow: hidden;
+    background: #000;
+    margin: 0; padding: 0;
+  }
+  #root {
+    width: 1920px; height: 1080px; overflow: hidden;
+    background: #020810;
+    font-family: 'Space Grotesk', sans-serif;
+    color: #c8dce8;
+    transform-origin: top left;
+  }
+
+  @keyframes scanline {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(100vh); }
+  }
+  @keyframes pulse-ring {
+    0% { transform: scale(0.8); opacity: 0.8; }
+    50% { transform: scale(1.15); opacity: 0.3; }
+    100% { transform: scale(0.8); opacity: 0.8; }
+  }
+  @keyframes blink-cursor {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+  }
+  @keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes glitch {
+    0%,100% { clip-path: none; transform: none; }
+    5% { clip-path: inset(20% 0 60% 0); transform: translateX(-4px); }
+    10% { clip-path: inset(50% 0 20% 0); transform: translateX(4px); }
+    15% { clip-path: none; transform: none; }
+  }
+  @keyframes rotateRing {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  @keyframes rotateRingRev {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(-360deg); }
+  }
+  @keyframes float {
+    0%,100% { transform: translateY(0px); }
+    50% { transform: translateY(-12px); }
+  }
+  @keyframes successBurst {
+    0% { transform: scale(0); opacity: 0; }
+    60% { transform: scale(1.2); opacity: 1; }
+    100% { transform: scale(1); opacity: 1; }
+  }
+  @keyframes countdownShrink {
+    from { width: 100%; }
+    to { width: 0%; }
+  }
+  @keyframes gridFade {
+    0%,100% { opacity: 0.04; }
+    50% { opacity: 0.08; }
+  }
+  @keyframes shake {
+    0%,100% { transform: translateX(0); }
+    20% { transform: translateX(-12px); }
+    40% { transform: translateX(12px); }
+    60% { transform: translateX(-8px); }
+    80% { transform: translateX(8px); }
+  }
+  @keyframes neonFlicker {
+    0%,100% { text-shadow: 0 0 20px #00c8e8, 0 0 40px #00c8e880; }
+    50% { text-shadow: 0 0 30px #00c8e8, 0 0 60px #00c8e8, 0 0 80px #00c8e840; }
+  }
+  @keyframes compBlink {
+    0%,100% { opacity: 0.25; }
+    50%     { opacity: 0.6; }
+  }
+
+  .screen { width: 1920px; height: 1080px; position: relative; overflow: hidden; }
+  
+  /* Grid background */
+  .grid-bg {
+    position: absolute; inset: 0;
+    background-image:
+      linear-gradient(rgba(0,200,232,0.05) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,200,232,0.05) 1px, transparent 1px);
+    background-size: 80px 80px;
+    animation: gridFade 4s ease-in-out infinite;
+  }
+
+  /* Corner decorations */
+  .corner {
+    position: absolute; width: 80px; height: 80px;
+    border-color: #00c8e8; border-style: solid; opacity: 0.5;
+  }
+  .corner-tl { top: 32px; left: 32px; border-width: 3px 0 0 3px; }
+  .corner-tr { top: 32px; right: 32px; border-width: 3px 3px 0 0; }
+  .corner-bl { bottom: 32px; left: 32px; border-width: 0 0 3px 3px; }
+  .corner-br { bottom: 32px; right: 32px; border-width: 0 3px 3px 0; }
+
+  /* Scan line effect */
+  .scanline {
+    position: absolute; left: 0; right: 0; height: 2px;
+    background: linear-gradient(90deg, transparent, rgba(0,200,232,0.4), transparent);
+    animation: scanline 6s linear infinite;
+    pointer-events: none;
+  }
+
+  /* Status bar top */
+  .status-bar {
+    position: absolute; top: 0; left: 0; right: 0; height: 64px;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0 60px;
+    background: linear-gradient(180deg, rgba(0,200,232,0.08) 0%, transparent 100%);
+    border-bottom: 1px solid rgba(0,200,232,0.15);
+  }
+  .status-bar .brand {
+    font-family: 'Orbitron', monospace; font-size: 18px; font-weight: 700;
+    letter-spacing: 4px; color: #00c8e8;
+  }
+  .status-indicators { display: flex; gap: 32px; align-items: center; }
+  .status-item {
+    display: flex; align-items: center; gap: 8px;
+    font-size: 13px; font-weight: 500; letter-spacing: 1px; color: #7ab0c8;
+  }
+  .status-dot {
+    width: 8px; height: 8px; border-radius: 50%; background: #00e676;
+    box-shadow: 0 0 8px #00e676;
+  }
+  .status-dot.warn { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
+
+  /* Clock */
+  .clock {
+    font-family: 'Orbitron', monospace; font-size: 20px;
+    color: #00c8e8; letter-spacing: 3px;
+  }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const { useState, useEffect, useRef, useCallback } = React;
+
+function useTime() {
+  const [t, setT] = useState(new Date());
+  useEffect(() => {
+    const id = setInterval(() => setT(new Date()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  return t;
+}
+
+/* ─── Idle Screen ─── */
+function IdleScreen({ onEnter }) {
+  const time = useTime();
+  const [glitch, setGlitch] = useState(false);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setGlitch(true);
+      setTimeout(() => setGlitch(false), 300);
+    }, 8000);
+    return () => clearInterval(id);
+  }, []);
+
+  useEffect(() => {
+    const handler = (e) => { if (e.key === 'Enter') onEnter(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onEnter]);
+
+  const hh = String(time.getHours()).padStart(2,'0');
+  const mm = String(time.getMinutes()).padStart(2,'0');
+  const ss = String(time.getSeconds()).padStart(2,'0');
+  const dateStr = time.toLocaleDateString('vi-VN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+
+  return (
+    <div className="screen" style={{ background: 'linear-gradient(135deg, #020810 0%, #040d18 50%, #020810 100%)' }}>
+      <div className="grid-bg" />
+      <div className="scanline" />
+
+      {/* Corners */}
+      <div className="corner corner-tl" />
+      <div className="corner corner-tr" />
+      <div className="corner corner-bl" />
+      <div className="corner corner-br" />
+
+      {/* Status bar */}
+      <div className="status-bar">
+        <div className="brand">UEH B1 · DELIVERY ROBOT</div>
+        <div className="status-indicators">
+          <div className="status-item"><div className="status-dot" /><span>ONLINE</span></div>
+          <div className="status-item"><div className="status-dot" /><span>ROS2 CONNECTED</span></div>
+          <div className="status-item"><div className="status-dot warn" /><span>FLOOR G</span></div>
+          <div className="status-item">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00e676" strokeWidth="2">
+              <rect x="2" y="7" width="18" height="11" rx="2"/><path d="M22 11v3"/>
+              <rect x="4" y="9" width="12" height="7" rx="1" fill="#00e676"/>
+            </svg>
+            <span style={{color:'#00e676'}}>87%</span>
+          </div>
+        </div>
+        <div className="clock">{hh}:{mm}:{ss}</div>
+      </div>
+
+      {/* Main center */}
+      <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:0 }}>
+
+        {/* Robot Icon — animated rings */}
+        <div style={{ position:'relative', width:320, height:320, display:'flex', alignItems:'center', justifyContent:'center', animation:'float 4s ease-in-out infinite' }}>
+          {/* Outer ring */}
+          <svg style={{ position:'absolute', inset:0, animation:'rotateRing 8s linear infinite' }} width="320" height="320" viewBox="0 0 320 320">
+            <circle cx="160" cy="160" r="148" fill="none" stroke="#00c8e820" strokeWidth="1" strokeDasharray="8 16" />
+            <circle cx="160" cy="160" r="148" fill="none" stroke="#00c8e8" strokeWidth="2" strokeDasharray="40 250" />
+          </svg>
+          {/* Inner ring */}
+          <svg style={{ position:'absolute', inset:0, animation:'rotateRingRev 5s linear infinite' }} width="320" height="320" viewBox="0 0 320 320">
+            <circle cx="160" cy="160" r="120" fill="none" stroke="#00c8e840" strokeWidth="1" strokeDasharray="4 20" />
+            <circle cx="160" cy="160" r="120" fill="none" stroke="#00c8e8" strokeWidth="1.5" strokeDasharray="20 80" />
+          </svg>
+          {/* Pulse ring */}
+          <div style={{ position:'absolute', width:200, height:200, borderRadius:'50%', border:'2px solid #00c8e840', animation:'pulse-ring 3s ease-in-out infinite' }} />
+          {/* Robot body */}
+          <div style={{ position:'relative', zIndex:2 }}>
+            <svg width="160" height="190" viewBox="0 0 160 190" fill="none">
+              {/* Antenna */}
+              <line x1="80" y1="18" x2="80" y2="6" stroke="#00c8e8" strokeWidth="2"/>
+              <circle cx="80" cy="5" r="4" fill="#00c8e8" style={{filter:'drop-shadow(0 0 8px #00c8e8)'}}/>
+              {/* Head */}
+              <rect x="45" y="18" width="70" height="38" rx="10" fill="#0d1e2d" stroke="#00c8e8" strokeWidth="2"/>
+              {/* Eyes */}
+              <rect x="56" y="28" width="18" height="11" rx="4" fill="#00c8e8" style={{filter:'drop-shadow(0 0 6px #00c8e8)'}}/>
+              <rect x="86" y="28" width="18" height="11" rx="4" fill="#00c8e8" style={{filter:'drop-shadow(0 0 6px #00c8e8)'}}/>
+              {/* Neck */}
+              <line x1="80" y1="56" x2="80" y2="62" stroke="#1a3a55" strokeWidth="3"/>
+              {/* Body frame */}
+              <rect x="26" y="62" width="108" height="100" rx="12" fill="#0d1e2d" stroke="#00c8e8" strokeWidth="2"/>
+              {/* 4 Compartments stacked */}
+              {[0,1,2,3].map(i => (
+                <g key={i}>
+                  <rect x="34" y={67+i*23} width="92" height="19" rx="4"
+                    fill="#050e1a" stroke="#1a3a55" strokeWidth="1.5"
+                    style={{animation:`compBlink 2.4s ease-in-out infinite`, animationDelay:`${i*0.5}s`}}
+                  />
+                  {/* Compartment number */}
+                  <text x="42" y={67+i*23+13} fill="#1a3a55" fontSize="9" fontFamily="Orbitron" fontWeight="600">{i+1}</text>
+                  {/* Lock icon */}
+                  <rect x="112" y={67+i*23+4} width="8" height="7" rx="1" fill="none" stroke="#1a3a55" strokeWidth="1"/>
+                  <path d={`M${113} ${67+i*23+4} Q${116} ${67+i*23} ${119} ${67+i*23+4}`} fill="none" stroke="#1a3a55" strokeWidth="1"/>
+                  {/* Divider line */}
+                  <line x1="52" y1={67+i*23+10} x2="108" y2={67+i*23+10} stroke="#1a3a5520" strokeWidth="1"/>
+                </g>
+              ))}
+              {/* Side struts */}
+              <rect x="8" y="72" width="18" height="82" rx="5" fill="#0a1828" stroke="#1a3a55" strokeWidth="1.5"/>
+              <rect x="134" y="72" width="18" height="82" rx="5" fill="#0a1828" stroke="#1a3a55" strokeWidth="1.5"/>
+              {/* Wheels */}
+              <circle cx="42" cy="172" r="13" fill="#0d1e2d" stroke="#00c8e8" strokeWidth="2"/>
+              <circle cx="118" cy="172" r="13" fill="#0d1e2d" stroke="#00c8e8" strokeWidth="2"/>
+              <circle cx="42" cy="172" r="5" fill="#00c8e830"/>
+              <circle cx="118" cy="172" r="5" fill="#00c8e830"/>
+            </svg>
+          </div>
+        </div>
+
+        {/* Title */}
+        <div style={{ marginTop: 40, textAlign:'center' }}>
+          <div style={{
+            fontFamily:'Orbitron', fontSize: 56, fontWeight: 900, letterSpacing: 8,
+            color: '#00c8e8', lineHeight: 1,
+            textShadow: '0 0 30px #00c8e880, 0 0 60px #00c8e840',
+            animation: glitch ? 'glitch 0.3s steps(1) forwards' : 'neonFlicker 3s ease-in-out infinite',
+          }}>
+            UEH B1
+          </div>
+          <div style={{ fontFamily:'Space Grotesk', fontSize: 18, fontWeight: 500, letterSpacing: 6, color:'#7ab0c8', marginTop: 12, textTransform:'uppercase' }}>
+            Autonomous Delivery System
+          </div>
+        </div>
+
+        {/* Press Enter prompt */}
+        <div style={{ marginTop: 64, display:'flex', flexDirection:'column', alignItems:'center', gap: 16 }}>
+          <div style={{
+            fontFamily:'Orbitron', fontSize: 22, fontWeight: 600, letterSpacing: 5,
+            color: '#ffffff', animation: 'blink-cursor 1.8s ease-in-out infinite',
+          }}>
+            PRESS  ENTER  TO  RECEIVE  PACKAGE
+          </div>
+          <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
+            {[...Array(5)].map((_,i) => (
+              <div key={i} style={{ width: i===2?24:8, height: 3, borderRadius: 2, background: i===2?'#00c8e8':'#1a3a55' }} />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom info bar */}
+      <div style={{
+        position:'absolute', bottom:0, left:0, right:0, height:52,
+        display:'flex', alignItems:'center', justifyContent:'space-between',
+        padding:'0 60px',
+        background: 'linear-gradient(0deg, rgba(0,200,232,0.06) 0%, transparent 100%)',
+        borderTop: '1px solid rgba(0,200,232,0.12)',
+        fontSize: 13, color: '#3a6070', letterSpacing: 2, fontFamily:'Orbitron',
+      }}>
+        <span>SYS v2.4.1 · ROS2 HUMBLE</span>
+        <span>{dateStr.toUpperCase()}</span>
+        <span>BASE STATION · FLOOR G</span>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Digit Input Box ─── */
+function DigitInput({ value, active, error }) {
+  return (
+    <div style={{
+      width: 100, height: 120,
+      border: `3px solid ${error ? '#ff4444' : active ? '#00c8e8' : value ? '#00c8e840' : '#1a3a55'}`,
+      borderRadius: 12, display:'flex', alignItems:'center', justifyContent:'center',
+      background: error ? 'rgba(255,68,68,0.08)' : active ? 'rgba(0,200,232,0.06)' : '#040d18',
+      boxShadow: active ? '0 0 24px rgba(0,200,232,0.3), inset 0 0 20px rgba(0,200,232,0.05)' : error ? '0 0 24px rgba(255,68,68,0.3)' : 'none',
+      transition: 'all 0.2s',
+      position: 'relative', overflow: 'hidden',
+    }}>
+      {active && !value && (
+        <div style={{ width: 3, height: 60, background: '#00c8e8', borderRadius: 2, animation:'blink-cursor 1s ease-in-out infinite' }} />
+      )}
+      {value && (
+        <span style={{
+          fontFamily:'Orbitron', fontSize: 52, fontWeight: 700,
+          color: error ? '#ff6666' : '#00c8e8',
+          textShadow: error ? '0 0 20px #ff444480' : '0 0 20px #00c8e880',
+          animation: 'fadeInUp 0.15s ease-out',
+        }}>{value}</span>
+      )}
+    </div>
+  );
+}
+
+/* ─── Input Screen (shared for ID and Passcode) ─── */
+function InputScreen({ title, subtitle, length, onComplete, onBack, hint }) {
+  const [digits, setDigits] = useState([]);
+  const [error, setError] = useState(false);
+  const [shake, setShake] = useState(false);
+
+  const triggerError = useCallback(() => {
+    setError(true); setShake(true);
+    setTimeout(() => { setError(false); setShake(false); setDigits([]); }, 900);
+  }, []);
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === 'Escape') { onBack(); return; }
+      if (e.key === 'Backspace') { setDigits(d => d.slice(0,-1)); setError(false); return; }
+      if (/^[0-9]$/.test(e.key) && digits.length < length) {
+        const next = [...digits, e.key];
+        setDigits(next);
+        if (next.length === length) {
+          setTimeout(() => onComplete(next.join('')), 150);
+        }
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [digits, length, onComplete, onBack]);
+
+  // expose triggerError
+  useEffect(() => { window.__triggerInputError = triggerError; }, [triggerError]);
+
+  return (
+    <div className="screen" style={{ background: 'linear-gradient(135deg, #020810 0%, #04101e 50%, #020810 100%)' }}>
+      <div className="grid-bg" />
+      <div className="scanline" />
+      <div className="corner corner-tl" /><div className="corner corner-tr" />
+      <div className="corner corner-bl" /><div className="corner corner-br" />
+
+      <div style={{
+        position:'absolute', inset:0, display:'flex', flexDirection:'column',
+        alignItems:'center', justifyContent:'center', gap:0,
+        animation: 'fadeInUp 0.3s ease-out',
+      }}>
+        {/* Header */}
+        <div style={{ textAlign:'center', marginBottom: 60 }}>
+          <div style={{ fontFamily:'Orbitron', fontSize: 13, letterSpacing: 6, color:'#3a6070', marginBottom: 16 }}>
+            UEH B1 · DELIVERY SYSTEM
+          </div>
+          <div style={{ fontFamily:'Orbitron', fontSize: 48, fontWeight: 700, color:'#fff', letterSpacing: 4 }}>
+            {title}
+          </div>
+          <div style={{ fontFamily:'Space Grotesk', fontSize: 18, color:'#7ab0c8', marginTop: 12, letterSpacing: 2 }}>
+            {subtitle}
+          </div>
+        </div>
+
+        {/* Digit boxes */}
+        <div style={{
+          display:'flex', gap: 24,
+          animation: shake ? 'shake 0.5s ease-in-out' : 'none',
+        }}>
+          {Array.from({length}).map((_,i) => (
+            <DigitInput key={i} value={digits[i] || ''} active={i === digits.length} error={error} />
+          ))}
+        </div>
+
+        {hint && (
+          <div style={{ marginTop: 32, fontFamily:'Space Grotesk', fontSize: 15, color:'#3a6070', letterSpacing: 2 }}>
+            {hint}
+          </div>
+        )}
+
+        {/* Keyboard hint */}
+        <div style={{ marginTop: 60, display:'flex', gap: 16, alignItems:'center' }}>
+          <kbd style={{ padding:'6px 14px', border:'1px solid #1a3a55', borderRadius:6, fontFamily:'Orbitron', fontSize:12, color:'#3a6070', background:'#040d18' }}>0-9</kbd>
+          <span style={{ color:'#1a3a55', fontSize:13 }}>type digits</span>
+          <kbd style={{ padding:'6px 14px', border:'1px solid #1a3a55', borderRadius:6, fontFamily:'Orbitron', fontSize:12, color:'#3a6070', background:'#040d18' }}>⌫</kbd>
+          <span style={{ color:'#1a3a55', fontSize:13 }}>delete</span>
+          <kbd style={{ padding:'6px 14px', border:'1px solid #1a3a55', borderRadius:6, fontFamily:'Orbitron', fontSize:12, color:'#3a6070', background:'#040d18' }}>ESC</kbd>
+          <span style={{ color:'#1a3a55', fontSize:13 }}>cancel</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Success Screen ─── */
+function SuccessScreen({ orderId, onDone }) {
+  const [countdown, setCountdown] = useState(8);
+  const compIdx = orderId ? (parseInt(orderId, 10) % 4) : 0;
+  const compColors = ['#00c8e8','#f59e0b','#ff6b2b','#a855f7'];
+  const compColor = compColors[compIdx];
+
+  useEffect(() => {
+    const id = setInterval(() => setCountdown(c => { if(c<=1){ onDone(); return 0; } return c-1; }), 1000);
+    return () => clearInterval(id);
+  }, [onDone]);
+
+  return (
+    <div className="screen" style={{ background: 'linear-gradient(135deg, #020e08 0%, #041208 50%, #020e08 100%)' }}>
+      <div style={{
+        position:'absolute', inset:0,
+        background: 'radial-gradient(ellipse at center, rgba(0,230,118,0.08) 0%, transparent 70%)',
+      }} />
+      <div className="corner corner-tl" style={{borderColor:'#00e676'}} />
+      <div className="corner corner-tr" style={{borderColor:'#00e676'}} />
+      <div className="corner corner-bl" style={{borderColor:'#00e676'}} />
+      <div className="corner corner-br" style={{borderColor:'#00e676'}} />
+
+      <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap: 0 }}>
+        {/* Success icon */}
+        <div style={{ position:'relative', animation:'successBurst 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards' }}>
+          <div style={{ position:'absolute', inset:-40, borderRadius:'50%', border:'2px solid #00e67630', animation:'pulse-ring 2s ease-in-out infinite' }} />
+          <div style={{ position:'absolute', inset:-20, borderRadius:'50%', border:'1px solid #00e67620', animation:'pulse-ring 2s ease-in-out infinite 0.5s' }} />
+          <div style={{
+            width: 160, height: 160, borderRadius:'50%',
+            background: 'radial-gradient(circle, rgba(0,230,118,0.15) 0%, rgba(0,230,118,0.05) 100%)',
+            border: '3px solid #00e676',
+            display:'flex', alignItems:'center', justifyContent:'center',
+            boxShadow: '0 0 40px rgba(0,230,118,0.4), inset 0 0 30px rgba(0,230,118,0.1)',
+          }}>
+            <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
+              <polyline points="16,42 32,58 64,22" stroke="#00e676" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" style={{filter:'drop-shadow(0 0 8px #00e676)'}}/>
+            </svg>
+          </div>
+        </div>
+
+        <div style={{ marginTop: 48, textAlign:'center' }}>
+          <div style={{ fontFamily:'Orbitron', fontSize: 52, fontWeight: 900, color:'#00e676', letterSpacing: 6, textShadow:'0 0 30px #00e67680' }}>
+            UNLOCKED
+          </div>
+          <div style={{ fontFamily:'Space Grotesk', fontSize: 22, color:'#7ab0c8', marginTop: 16, letterSpacing: 2 }}>
+            Ngăn hàng đã mở · Vui lòng lấy kiện hàng
+          </div>
+          <div style={{ fontFamily:'Orbitron', fontSize: 16, color:'#3a6070', marginTop: 12, letterSpacing: 3 }}>
+            ORDER #{orderId}
+          </div>
+        </div>
+
+        {/* Compartment visualization */}
+        <div style={{ marginTop: 48, display:'flex', alignItems:'center', gap: 32 }}>
+          <div style={{ textAlign:'center' }}>
+            <div style={{ fontSize:12, color:'#3a6070', letterSpacing:2, marginBottom:12, fontFamily:'Orbitron' }}>OPEN COMPARTMENT</div>
+            <svg width="120" height="200" viewBox="0 0 120 200" fill="none">
+              {/* Body */}
+              <rect x="10" y="10" width="100" height="160" rx="8" fill="#0a1828" stroke="#1c3a55" strokeWidth="2"/>
+              {[0,1,2,3].map(i => {
+                const active = i === compIdx;
+                return (
+                  <g key={i}>
+                    <rect x="16" y={18+i*38} width="88" height="32" rx="4"
+                      fill={active ? `${compColor}25` : '#050e1a'}
+                      stroke={active ? compColor : '#0d2238'}
+                      strokeWidth={active ? 2 : 1}
+                      style={{filter: active ? `drop-shadow(0 0 6px ${compColor}60)` : 'none'}}
+                    />
+                    <text x="26" y={18+i*38+19} fill={active ? compColor : '#1a3050'} fontSize="11" fontFamily="Orbitron" fontWeight="700">
+                      {i+1}
+                    </text>
+                    {active ? (
+                      <>
+                        <text x="55" y={18+i*38+14} fill={compColor} fontSize="9" fontFamily="Space Grotesk">UNLOCKED</text>
+                        <text x="55" y={18+i*38+26} fill={compColor} fontSize="16">🔓</text>
+                      </>
+                    ) : (
+                      <text x="88" y={18+i*38+20} fill="#0d2238" fontSize="14">🔒</text>
+                    )}
+                  </g>
+                );
+              })}
+              {/* Wheels */}
+              <circle cx="28" cy="178" r="10" fill="#0a1828" stroke="#1c3a55" strokeWidth="1.5"/>
+              <circle cx="92" cy="178" r="10" fill="#0a1828" stroke="#1c3a55" strokeWidth="1.5"/>
+            </svg>
+          </div>
+          <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
+            <div style={{ padding:'16px 24px', borderRadius:8, border:`1px solid ${compColor}40`, background:`${compColor}0d` }}>
+              <div style={{ fontFamily:'Orbitron', fontSize:13, color:compColor, letterSpacing:2, marginBottom:4 }}>COMPARTMENT {compIdx+1}</div>
+              <div style={{ fontFamily:'Space Grotesk', fontSize:14, color:'#7ab0c8' }}>Nhấc hàng và đóng ngăn lại</div>
+            </div>
+            <div style={{ padding:'12px 24px', borderRadius:8, border:'1px solid #00e67630', background:'rgba(0,230,118,0.05)' }}>
+              <div style={{ fontFamily:'Space Grotesk', fontSize:13, color:'#00e676' }}>✓ Passcode xác nhận thành công</div>
+              <div style={{ fontFamily:'Space Grotesk', fontSize:12, color:'#3a6070', marginTop:4 }}>Order #{orderId}</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Countdown bar */}
+        <div style={{ marginTop: 56, width: 400, textAlign:'center' }}>
+          <div style={{ fontFamily:'Space Grotesk', fontSize: 14, color:'#3a6070', letterSpacing: 2, marginBottom: 12 }}>
+            TỰ ĐỘNG KHÓA SAU {countdown} GIÂY
+          </div>
+          <div style={{ height: 4, borderRadius: 2, background:'#0d1e2d', overflow:'hidden' }}>
+            <div style={{
+              height:'100%', background:'#00e676', borderRadius: 2,
+              animation: `countdownShrink ${countdown}s linear forwards`,
+              boxShadow: '0 0 8px #00e676',
+            }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Error Screen ─── */
+function ErrorScreen({ onBack }) {
+  useEffect(() => {
+    const t = setTimeout(onBack, 3000);
+    const h = (e) => { if(e.key==='Enter'||e.key==='Escape') onBack(); };
+    window.addEventListener('keydown', h);
+    return () => { clearTimeout(t); window.removeEventListener('keydown', h); };
+  }, [onBack]);
+  return (
+    <div className="screen" style={{ background: 'linear-gradient(135deg, #0e0202 0%, #140404 50%, #0e0202 100%)' }}>
+      <div style={{ position:'absolute', inset:0, background:'radial-gradient(ellipse at center, rgba(255,68,68,0.1) 0%, transparent 70%)' }} />
+      <div className="corner corner-tl" style={{borderColor:'#ff4444'}} />
+      <div className="corner corner-tr" style={{borderColor:'#ff4444'}} />
+      <div className="corner corner-bl" style={{borderColor:'#ff4444'}} />
+      <div className="corner corner-br" style={{borderColor:'#ff4444'}} />
+      <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap: 24 }}>
+        <div style={{ width:120, height:120, borderRadius:'50%', border:'3px solid #ff4444', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 0 40px rgba(255,68,68,0.4)', animation:'successBurst 0.4s ease-out' }}>
+          <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
+            <line x1="16" y1="16" x2="44" y2="44" stroke="#ff4444" strokeWidth="6" strokeLinecap="round" style={{filter:'drop-shadow(0 0 6px #ff4444)'}}/>
+            <line x1="44" y1="16" x2="16" y2="44" stroke="#ff4444" strokeWidth="6" strokeLinecap="round" style={{filter:'drop-shadow(0 0 6px #ff4444)'}}/>
+          </svg>
+        </div>
+        <div style={{ fontFamily:'Orbitron', fontSize:48, fontWeight:900, color:'#ff4444', letterSpacing:6, textShadow:'0 0 30px #ff444480' }}>SAI MÃ</div>
+        <div style={{ fontFamily:'Space Grotesk', fontSize:20, color:'#7a4040', letterSpacing:2 }}>Passcode không đúng · Thử lại sau</div>
+        <div style={{ fontFamily:'Orbitron', fontSize:14, color:'#3a2020', letterSpacing:3, marginTop:8 }}>TỰ ĐỘNG QUAY LẠI SAU 3 GIÂY</div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── App ─── */
+function App() {
+  const [screen, setScreen] = useState('idle');
+  const [orderId, setOrderId] = useState('');
+  const [currentOrder, setCurrentOrder] = useState(null);
+
+  useEffect(() => {
+    const poll = async () => {
+      try {
+        const d = await fetch('/api/orders/active').then(r => r.json());
+        setCurrentOrder(d.order || null);
+      } catch {}
+    };
+    poll();
+    const id = setInterval(poll, 5000);
+    return () => clearInterval(id);
+  }, []);
+
+  const handleIdComplete = (id) => {
+    if (!currentOrder) { window.__triggerInputError?.(); return; }
+    if (id !== currentOrder.short_id) { window.__triggerInputError?.(); return; }
+    setOrderId(id);
+    setScreen('enter_pass');
+  };
+
+  const handlePassComplete = async (pass) => {
+    if (!currentOrder) { window.__triggerInputError?.(); return; }
+    try {
+      const res = await fetch(`/api/orders/${currentOrder.id}/confirm`, {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ order_short_id: orderId, pin: pass }),
+      });
+      if (res.ok) { setScreen('success'); }
+      else { window.__triggerInputError?.(); }
+    } catch { setScreen('error'); }
+  };
+
+  return (
+    <div>
+      {screen === 'idle' && (
+        <IdleScreen onEnter={() => setScreen('enter_id')} />
+      )}
+      {screen === 'enter_id' && (
+        <InputScreen
+          title="NHẬP MÃ ĐƠN"
+          subtitle="Enter your 4-digit order ID"
+          length={4}
+          hint="Mã đơn hàng trên phiếu giao hàng của bạn"
+          onComplete={handleIdComplete}
+          onBack={() => setScreen('idle')}
+        />
+      )}
+      {screen === 'enter_pass' && (
+        <InputScreen
+          title="NHẬP PASSCODE"
+          subtitle="Enter your 6-digit passcode"
+          length={6}
+          hint="Mã xác nhận đã gửi qua Telegram"
+          onComplete={handlePassComplete}
+          onBack={() => setScreen('enter_id')}
+        />
+      )}
+      {screen === 'success' && (
+        <SuccessScreen orderId={orderId} onDone={() => setScreen('idle')} />
+      )}
+      {screen === 'error' && (
+        <ErrorScreen onBack={() => setScreen('enter_pass')} />
+      )}
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+<script>
+function scaleRoot() {
+  const root = document.getElementById('root');
+  const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
+  root.style.transform = `scale(${scale})`;
+  root.style.marginLeft = `${(window.innerWidth - 1920 * scale) / 2}px`;
+  root.style.marginTop = `${(window.innerHeight - 1080 * scale) / 2}px`;
+}
+scaleRoot();
+window.addEventListener('resize', scaleRoot);
+</script>
+</body>
+</html>

elevator_panel.html

@@ -0,0 +1,1831 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1920">
+<title>UEH B1 — Admin Dashboard</title>
+<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"></script>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body {
+    width: 100%; height: 100%; overflow: hidden;
+    background: #000;
+    margin: 0; padding: 0;
+  }
+  #root {
+    width: 1920px; height: 1080px; overflow: hidden;
+    background: #050c14;
+    font-family: 'Space Grotesk', sans-serif;
+    color: #c8dce8;
+    transform-origin: top left;
+  }
+  ::-webkit-scrollbar { width: 4px; }
+  ::-webkit-scrollbar-track { background: #050c14; }
+  ::-webkit-scrollbar-thumb { background: #1a3a55; border-radius: 2px; }
+
+  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
+  @keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:0.6} }
+  @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
+  @keyframes pathDraw {
+    from { stroke-dashoffset: 2000; }
+    to   { stroke-dashoffset: 0; }
+  }
+  @keyframes robotMove { 0%{opacity:1} 100%{opacity:1} }
+  @keyframes elevatorMove {
+    0%   { top: var(--from-top); }
+    100% { top: var(--to-top); }
+  }
+  @keyframes scanH {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(200%); }
+  }
+  @keyframes toast {
+    0%   { opacity:0; transform:translateY(20px); }
+    15%  { opacity:1; transform:translateY(0); }
+    80%  { opacity:1; }
+    100% { opacity:0; }
+  }
+  @keyframes compBlink {
+    0%,100% { opacity: 0.28; }
+    50%     { opacity: 0.7; }
+  }
+
+  .grid-bg {
+    position: absolute; inset: 0; pointer-events: none;
+    background-image:
+      linear-gradient(rgba(0,200,232,0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,200,232,0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+  }
+
+  button { cursor: pointer; border: none; background: none; font-family: inherit; }
+
+  .tag {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 3px 10px; border-radius: 4px;
+    font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
+  }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<button id="admin-key-button" onclick="window.setAdminApiKey && window.setAdminApiKey()" style="
+  position:fixed;
+  top:12px;
+  right:12px;
+  z-index:99999;
+  padding:8px 12px;
+  border:1px solid #00c8e8;
+  border-radius:6px;
+  background:#071827;
+  color:#00c8e8;
+  font-family:Orbitron, monospace;
+  font-size:11px;
+  letter-spacing:1px;
+  box-shadow:0 0 12px rgba(0,200,232,0.25);
+">ADMIN KEY</button>
+<script type="text/babel">
+const { useState, useEffect, useRef, useCallback, useMemo } = React;
+
+const numToFloor = n => String(Math.max(1, Math.min(10, Number(n) || 1)));
+const floorToNum = f => Math.max(1, Math.min(10, parseInt(f, 10) || 1));
+
+const ADMIN_API_KEY_STORAGE = 'ROBOT_API_KEY';
+
+function getAdminApiKey(forcePrompt = false) {
+  let key = window.localStorage.getItem(ADMIN_API_KEY_STORAGE) || '';
+
+  if (forcePrompt || !key) {
+    key = window.prompt('Enter robot admin API key:') || '';
+    key = key.trim();
+
+    if (key) {
+      window.localStorage.setItem(ADMIN_API_KEY_STORAGE, key);
+      const btn = document.getElementById('admin-key-button');
+      if (btn) {
+        btn.textContent = 'KEY OK';
+        btn.style.borderColor = '#00e676';
+        btn.style.color = '#00e676';
+      }
+    }
+  }
+
+  return key;
+}
+
+function setAdminApiKey() {
+  const oldKey = window.localStorage.getItem(ADMIN_API_KEY_STORAGE) || '';
+  const key = window.prompt('Enter robot admin API key:', oldKey) || '';
+  const clean = key.trim();
+
+  if (clean) {
+    window.localStorage.setItem(ADMIN_API_KEY_STORAGE, clean);
+    const btn = document.getElementById('admin-key-button');
+    if (btn) {
+      btn.textContent = 'KEY OK';
+      btn.style.borderColor = '#00e676';
+      btn.style.color = '#00e676';
+    }
+    alert('Admin API key saved in this browser.');
+  }
+}
+
+function forgetAdminApiKey() {
+  window.localStorage.removeItem(ADMIN_API_KEY_STORAGE);
+  const btn = document.getElementById('admin-key-button');
+  if (btn) {
+    btn.textContent = 'ADMIN KEY';
+    btn.style.borderColor = '#00c8e8';
+    btn.style.color = '#00c8e8';
+  }
+}
+
+window.setAdminApiKey = setAdminApiKey;
+window.forgetAdminApiKey = forgetAdminApiKey;
+
+function authHeaders(extra = {}) {
+  const key = getAdminApiKey(false);
+  return {
+    ...extra,
+    ...(key ? { 'X-API-Key': key } : {}),
+  };
+}
+
+async function authFetch(url, options = {}) {
+  const opts = {
+    ...options,
+    headers: authHeaders(options.headers || {}),
+  };
+
+  let res = await fetch(url, opts);
+
+  if (res.status === 401) {
+    forgetAdminApiKey();
+    const retryKey = getAdminApiKey(true);
+
+    if (retryKey) {
+      const retryOpts = {
+        ...options,
+        headers: authHeaders(options.headers || {}),
+      };
+      res = await fetch(url, retryOpts);
+    }
+  }
+
+  return res;
+}
+
+
+/* ══════════════════════════════════════════
+   FLOOR MAP GEOMETRY
+   viewBox: 0 0 700 490
+   ══════════════════════════════════════════ */
+const CY = 110;   // corridor center Y (horizontal wing)
+const CX = 96;    // corridor center X (vertical wing)
+
+const FLOOR_MAPS = {
+  '1': {
+    // Floor: 1 — generated by Map Editor
+    walls: [
+      { x:0, y:0, w:700, h:220 },
+      { x:0, y:220, w:400, h:270 },
+      { x:495, y:220, w:205, h:270 },
+      { x:400, y:235, w:5, h:255 },
+      { x:490, y:235, w:5, h:255 },
+      { x:405, y:290, w:85, h:200 },
+    ],
+    corridors: [
+      { x:400, y:220, w:95, h:15 },
+      { x:415, y:235, w:75, h:55 },
+      { x:405, y:245, w:10, h:40 },
+    ],
+    rooms: [
+      { id:'R02', x:405, y:235, w:10, h:10, group:'top' },
+      { id:'R03', x:405, y:285, w:15, h:5, group:'top' },
+    ],
+    elevators: [],
+  },
+  '2': {
+    walls: [{ x:0, y:0, w:700, h:80 }, { x:0, y:80, w:120, h:70 }, { x:625, y:80, w:75, h:410 }, { x:0, y:150, w:10, h:340 }, { x:10, y:190, w:25, h:300 }, { x:65, y:190, w:5, h:300 }, { x:100, y:190, w:20, h:300 }, { x:210, y:210, w:415, h:280 }, { x:35, y:215, w:30, h:275 }, { x:70, y:215, w:30, h:275 }, { x:120, y:400, w:90, h:90 }],
+    corridors: [{ x:125, y:155, w:500, h:55 }, { x:120, y:80, w:90, h:320 }, { x:10, y:150, w:110, h:40 }],
+    rooms: [{ id:'R01', x:210, y:80, w:415, h:75, group:'vert-w' }],
+    elevators: [{ id:'E1', x:70, y:190, w:30, h:25 }, { id:'E2', x:35, y:190, w:30, h:25 }],
+  },
+  '3': {
+    walls: [{ x:0, y:0, w:700, h:80 }, { x:0, y:80, w:120, h:70 }, { x:625, y:80, w:75, h:410 }, { x:0, y:150, w:10, h:340 }, { x:10, y:190, w:25, h:300 }, { x:65, y:190, w:5, h:300 }, { x:100, y:190, w:20, h:300 }, { x:210, y:210, w:415, h:280 }, { x:35, y:215, w:30, h:275 }, { x:70, y:215, w:30, h:275 }, { x:120, y:400, w:90, h:90 }],
+    corridors: [{ x:10, y:150, w:110, h:40 }, { x:125, y:155, w:500, h:55 }, { x:120, y:80, w:90, h:320 }],
+    rooms: [{ id:'R01', x:210, y:80, w:415, h:75, group:'vert-w' }],
+    elevators: [{ id:'E1', x:70, y:190, w:30, h:25 }, { id:'E2', x:35, y:190, w:30, h:25 }],
+  },
+  '4': {
+    walls: [{ x:0, y:0, w:700, h:80 }, { x:0, y:80, w:120, h:70 }, { x:210, y:80, w:10, h:75 }, { x:655, y:80, w:45, h:75 }, { x:0, y:150, w:10, h:340 }, { x:695, y:155, w:5, h:335 }, { x:10, y:190, w:25, h:30 }, { x:65, y:190, w:5, h:30 }, { x:100, y:190, w:20, h:30 }, { x:600, y:210, w:95, h:280 }, { x:35, y:215, w:30, h:5 }, { x:70, y:215, w:30, h:5 }, { x:10, y:325, w:110, h:50 }, { x:210, y:350, w:290, h:140 }, { x:500, y:400, w:100, h:90 }, { x:10, y:450, w:200, h:40 }],
+    corridors: [{ x:120, y:80, w:90, h:320 }, { x:10, y:150, w:110, h:40 }, { x:210, y:155, w:485, h:55 }, { x:385, y:210, w:140, h:140 }, { x:500, y:350, w:25, h:50 }, { x:10, y:375, w:110, h:25 }],
+    rooms: [{ id:'R01', x:10, y:220, w:110, h:35, group:'vert' }, { id:'R02', x:10, y:255, w:110, h:35, group:'vert' }, { id:'R03', x:10, y:290, w:110, h:35, group:'vert' }, { id:'R04', x:525, y:210, w:75, h:90, group:'vert-w' }, { id:'R05', x:525, y:300, w:75, h:100, group:'vert-w' }, { id:'R06', x:210, y:210, w:175, h:140, group:'vert-w' }, { id:'R07', x:220, y:80, w:145, h:75, group:'top' }, { id:'R08', x:365, y:80, w:145, h:75, group:'top' }, { id:'R09', x:510, y:80, w:145, h:75, group:'top' }, { id:'R10', x:10, y:400, w:200, h:50, group:'bot' }],
+    elevators: [{ id:'E1', x:70, y:190, w:30, h:25 }, { id:'E2', x:35, y:190, w:30, h:25 }],
+  },
+  '5': {
+    walls: [{ x:0, y:0, w:700, h:80 }, { x:0, y:80, w:120, h:70 }, { x:210, y:80, w:10, h:75 }, { x:655, y:80, w:45, h:75 }, { x:0, y:150, w:10, h:340 }, { x:695, y:155, w:5, h:335 }, { x:10, y:190, w:25, h:30 }, { x:65, y:190, w:5, h:30 }, { x:100, y:190, w:20, h:30 }, { x:600, y:210, w:95, h:280 }, { x:35, y:215, w:30, h:5 }, { x:70, y:215, w:30, h:5 }, { x:10, y:325, w:110, h:50 }, { x:210, y:350, w:290, h:140 }, { x:500, y:400, w:100, h:90 }, { x:10, y:450, w:200, h:40 }],
+    corridors: [{ x:120, y:80, w:90, h:320 }, { x:10, y:150, w:110, h:40 }, { x:210, y:155, w:485, h:55 }, { x:385, y:210, w:140, h:140 }, { x:500, y:350, w:25, h:50 }, { x:10, y:375, w:110, h:25 }],
+    rooms: [{ id:'R01', x:10, y:220, w:110, h:35, group:'vert' }, { id:'R02', x:10, y:255, w:110, h:35, group:'vert' }, { id:'R03', x:10, y:290, w:110, h:35, group:'vert' }, { id:'R04', x:525, y:210, w:75, h:90, group:'vert-w' }, { id:'R05', x:525, y:300, w:75, h:100, group:'vert-w' }, { id:'R06', x:210, y:210, w:175, h:140, group:'vert-w' }, { id:'R07', x:220, y:80, w:145, h:75, group:'top' }, { id:'R08', x:365, y:80, w:145, h:75, group:'top' }, { id:'R09', x:510, y:80, w:145, h:75, group:'top' }, { id:'R10', x:10, y:400, w:200, h:50, group:'bot' }],
+    elevators: [{ id:'E1', x:70, y:190, w:30, h:25 }, { id:'E2', x:35, y:190, w:30, h:25 }],
+  },
+  '6': {
+    walls: [{ x:0, y:0, w:700, h:80 }, { x:0, y:80, w:120, h:70 }, { x:625, y:80, w:75, h:410 }, { x:0, y:150, w:10, h:340 }, { x:10, y:190, w:25, h:300 }, { x:65, y:190, w:5, h:300 }, { x:100, y:190, w:20, h:300 }, { x:35, y:215, w:30, h:275 }, { x:70, y:215, w:30, h:275 }, { x:120, y:400, w:505, h:90 }],
+    corridors: [{ x:120, y:80, w:90, h:320 }, { x:10, y:150, w:110, h:40 }],
+    rooms: [{ id:'R01', x:210, y:80, w:415, h:320, group:'vert-w' }],
+    elevators: [{ id:'E1', x:70, y:190, w:30, h:25 }, { id:'E2', x:35, y:190, w:30, h:25 }],
+  },
+  '7': {
+    walls: [{ x:0, y:0, w:700, h:80 }, { x:0, y:80, w:120, h:70 }, { x:210, y:80, w:10, h:75 }, { x:655, y:80, w:45, h:75 }, { x:0, y:150, w:10, h:340 }, { x:695, y:155, w:5, h:335 }, { x:10, y:190, w:25, h:30 }, { x:65, y:190, w:5, h:30 }, { x:100, y:190, w:20, h:30 }, { x:600, y:210, w:95, h:280 }, { x:35, y:215, w:30, h:5 }, { x:70, y:215, w:30, h:5 }, { x:10, y:325, w:110, h:50 }, { x:210, y:350, w:290, h:140 }, { x:500, y:400, w:100, h:90 }, { x:10, y:450, w:200, h:40 }],
+    corridors: [{ x:120, y:80, w:90, h:320 }, { x:10, y:150, w:110, h:40 }, { x:210, y:155, w:485, h:55 }, { x:10, y:375, w:110, h:25 }, { x:385, y:210, w:140, h:140 }, { x:500, y:350, w:25, h:50 }],
+    rooms: [{ id:'R01', x:10, y:220, w:110, h:35, group:'vert' }, { id:'R02', x:10, y:255, w:110, h:35, group:'vert' }, { id:'R03', x:10, y:290, w:110, h:35, group:'vert' }, { id:'R04', x:525, y:210, w:75, h:90, group:'vert-w' }, { id:'R05', x:525, y:300, w:75, h:100, group:'vert-w' }, { id:'R06', x:210, y:210, w:175, h:140, group:'vert-w' }, { id:'R07', x:220, y:80, w:145, h:75, group:'top' }, { id:'R08', x:365, y:80, w:145, h:75, group:'top' }, { id:'R09', x:510, y:80, w:145, h:75, group:'top' }, { id:'R10', x:10, y:400, w:200, h:50, group:'bot' }],
+    elevators: [{ id:'E1', x:70, y:190, w:30, h:25 }, { id:'E2', x:35, y:190, w:30, h:25 }],
+  },
+  '8': {
+    walls: [{ x:0, y:0, w:700, h:80 }, { x:0, y:80, w:120, h:70 }, { x:210, y:80, w:10, h:75 }, { x:655, y:80, w:45, h:75 }, { x:0, y:150, w:10, h:340 }, { x:695, y:155, w:5, h:335 }, { x:10, y:190, w:25, h:30 }, { x:65, y:190, w:5, h:30 }, { x:100, y:190, w:20, h:30 }, { x:600, y:210, w:95, h:280 }, { x:35, y:215, w:30, h:5 }, { x:70, y:215, w:30, h:5 }, { x:10, y:325, w:110, h:50 }, { x:210, y:350, w:290, h:140 }, { x:500, y:400, w:100, h:90 }, { x:10, y:450, w:200, h:40 }],
+    corridors: [{ x:120, y:80, w:90, h:320 }, { x:10, y:150, w:110, h:40 }, { x:210, y:155, w:485, h:55 }, { x:385, y:210, w:140, h:140 }, { x:500, y:350, w:25, h:50 }, { x:10, y:375, w:110, h:25 }],
+    rooms: [{ id:'R01', x:10, y:220, w:110, h:35, group:'vert' }, { id:'R02', x:10, y:255, w:110, h:35, group:'vert' }, { id:'R03', x:10, y:290, w:110, h:35, group:'vert' }, { id:'R04', x:525, y:210, w:75, h:90, group:'vert-w' }, { id:'R05', x:525, y:300, w:75, h:100, group:'vert-w' }, { id:'R06', x:210, y:210, w:175, h:140, group:'vert-w' }, { id:'R07', x:220, y:80, w:145, h:75, group:'top' }, { id:'R08', x:365, y:80, w:145, h:75, group:'top' }, { id:'R09', x:510, y:80, w:145, h:75, group:'top' }, { id:'R10', x:10, y:400, w:200, h:50, group:'bot' }],
+    elevators: [{ id:'E1', x:70, y:190, w:30, h:25 }, { id:'E2', x:35, y:190, w:30, h:25 }],
+  },
+  '9': {
+    walls: [{ x:0, y:0, w:700, h:80 }, { x:0, y:80, w:120, h:70 }, { x:210, y:80, w:10, h:75 }, { x:655, y:80, w:45, h:75 }, { x:0, y:150, w:10, h:340 }, { x:695, y:155, w:5, h:335 }, { x:10, y:190, w:25, h:30 }, { x:65, y:190, w:5, h:30 }, { x:100, y:190, w:20, h:30 }, { x:600, y:210, w:95, h:280 }, { x:35, y:215, w:30, h:5 }, { x:70, y:215, w:30, h:5 }, { x:10, y:325, w:110, h:50 }, { x:210, y:350, w:290, h:140 }, { x:500, y:400, w:100, h:90 }, { x:10, y:450, w:200, h:40 }],
+    corridors: [{ x:120, y:80, w:90, h:320 }, { x:10, y:150, w:110, h:40 }, { x:210, y:155, w:485, h:55 }, { x:385, y:210, w:140, h:140 }, { x:500, y:350, w:25, h:50 }, { x:10, y:375, w:110, h:25 }],
+    rooms: [{ id:'R01', x:10, y:220, w:110, h:35, group:'vert' }, { id:'R02', x:10, y:255, w:110, h:35, group:'vert' }, { id:'R03', x:10, y:290, w:110, h:35, group:'vert' }, { id:'R04', x:525, y:210, w:75, h:90, group:'vert-w' }, { id:'R05', x:525, y:300, w:75, h:100, group:'vert-w' }, { id:'R06', x:210, y:210, w:175, h:140, group:'vert-w' }, { id:'R07', x:220, y:80, w:145, h:75, group:'top' }, { id:'R08', x:365, y:80, w:145, h:75, group:'top' }, { id:'R09', x:510, y:80, w:145, h:75, group:'top' }, { id:'R10', x:10, y:400, w:200, h:50, group:'bot' }],
+    elevators: [{ id:'E1', x:70, y:190, w:30, h:25 }, { id:'E2', x:35, y:190, w:30, h:25 }],
+  },
+  '10': {
+    walls: [{ x:0, y:0, w:700, h:80 }, { x:0, y:80, w:120, h:70 }, { x:210, y:80, w:10, h:75 }, { x:655, y:80, w:45, h:75 }, { x:0, y:150, w:10, h:340 }, { x:695, y:155, w:5, h:335 }, { x:10, y:190, w:25, h:30 }, { x:65, y:190, w:5, h:30 }, { x:100, y:190, w:20, h:30 }, { x:600, y:210, w:95, h:280 }, { x:35, y:215, w:30, h:5 }, { x:70, y:215, w:30, h:5 }, { x:10, y:325, w:110, h:50 }, { x:210, y:350, w:290, h:140 }, { x:500, y:400, w:100, h:90 }, { x:10, y:450, w:200, h:40 }],
+    corridors: [{ x:120, y:80, w:90, h:320 }, { x:10, y:150, w:110, h:40 }, { x:210, y:155, w:485, h:55 }, { x:385, y:210, w:140, h:140 }, { x:500, y:350, w:25, h:50 }, { x:10, y:375, w:110, h:25 }],
+    rooms: [{ id:'R11', x:10, y:220, w:110, h:35, group:'vert' }, { id:'R12', x:10, y:255, w:110, h:35, group:'vert' }, { id:'R13', x:10, y:290, w:110, h:35, group:'vert' }, { id:'R14', x:525, y:210, w:75, h:90, group:'vert-w' }, { id:'R15', x:525, y:300, w:75, h:100, group:'vert-w' }, { id:'R16', x:210, y:210, w:175, h:140, group:'vert-w' }, { id:'R17', x:220, y:80, w:145, h:75, group:'top' }, { id:'R18', x:365, y:80, w:145, h:75, group:'top' }, { id:'R19', x:510, y:80, w:145, h:75, group:'top' }, { id:'R20', x:10, y:400, w:200, h:50, group:'bot' }],
+    elevators: [{ id:'E1', x:70, y:190, w:30, h:25 }, { id:'E2', x:35, y:190, w:30, h:25 }],
+  },
+};
+
+const DEFAULT_MAP = FLOOR_MAPS['3'];
+const mapForFloor = floor => FLOOR_MAPS[floor] || DEFAULT_MAP;
+
+const ELV_CORRIDOR = { x: 310, y: CY };
+
+const getDoor = (r) => {
+  if (r.group==='top')  return { x: r.x + r.w/2, y: r.y + r.h + 2 };
+  if (r.group==='bot')  return { x: r.x + r.w/2, y: r.y - 2 };
+  return { x: r.x + r.w + 2, y: r.y + r.h/2 };
+};
+
+const buildPath = (from, roomId, floor = '1') => {
+  const room = mapForFloor(floor).rooms.find(r => r.id === roomId);
+  if (!room) return '';
+  
+  if (floor === '1') {
+    const to = { x: room.x + room.w / 2, y: room.y + room.h / 2 };
+    const corridorY = 75;
+    const pts = [];
+    pts.push([from.x, from.y]);
+    if (Math.abs(from.x - to.x) > 2) {
+      pts.push([from.x, corridorY]);
+      pts.push([to.x, corridorY]);
+    }
+    pts.push([to.x, to.y]);
+    return pts.map((p,i) => (i===0?'M':'L')+p[0]+','+p[1]).join(' ');
+  }
+
+  const door = getDoor(room);
+  const pts = [];
+  // From position
+  pts.push([from.x, from.y]);
+  // If starting from vertical wing or below y=200, go up corridor
+  if (from.y > 200) {
+    pts.push([CX, from.y]);
+    pts.push([CX, CY]);
+  } else if (from.x < 150 && from.y > CY) {
+    pts.push([from.x, CY]);
+  } else {
+    pts.push([from.x, CY]);
+  }
+  // For vertical wing rooms, go differently
+  if (room.group === 'vert') {
+    pts.push([CX, CY]);
+    pts.push([CX, door.y]);
+    pts.push([door.x, door.y]);
+  } else {
+    // Navigate along corridor to door X
+    pts.push([door.x, CY]);
+    pts.push([door.x, door.y]);
+  }
+  return pts.map((p,i) => (i===0?'M':'L')+p[0]+','+p[1]).join(' ');
+};
+
+const pathLength = (d) => {
+  // Approximate length by summing segments
+  const parts = d.match(/[ML][\d.]+,[\d.]+/g) || [];
+  let len = 0, prev = null;
+  parts.forEach(p => {
+    const [x,y] = p.slice(1).split(',').map(Number);
+    if (prev) len += Math.hypot(x-prev[0], y-prev[1]);
+    prev = [x,y];
+  });
+  return len;
+};
+
+const FLOORS = ['1','2','3','4','5','6','7','8','9','10'];
+
+const roomLabel = (floor, room) => {
+  const n = room.id.slice(1);
+  return `${floor}${n}`;
+};
+
+const MAP_W = 700;
+const MAP_H = 490;
+
+const getBaseStationForFloor = (floor, map) => {
+  if (floor !== '1' || !map) return null;
+  if (map.corridors?.length) {
+    const c = map.corridors[0];
+    const w = Math.min(120, Math.max(80, c.w));
+    const h = 24;
+    const x = c.x + Math.max(0, (c.w - w) / 2);
+    const y = c.y + Math.max(0, (c.h - h) / 2);
+    return { x, y, w, h };
+  }
+  if (!map.elevators?.length) return null;
+  const elvs = map.elevators;
+  const maxX = Math.max(...elvs.map(e => e.x + e.w));
+  const centerY = Math.round(elvs.reduce((s, e) => s + e.y + e.h / 2, 0) / elvs.length);
+  const w = 110;
+  const h = 24;
+  const gap = 12;
+  const x = Math.min(MAP_W - w - 8, maxX + gap);
+  const y = Math.max(8, Math.min(MAP_H - h - 8, centerY - h / 2));
+  return { x, y, w, h };
+};
+
+const getRobotHomeForFloor = (floor, map) => {
+  const base = getBaseStationForFloor(floor, map);
+  if (base) {
+    return {
+      x: base.x + base.w / 2,
+      y: Math.min(MAP_H - 18, base.y + base.h / 2 + 8),
+    };
+  }
+  return { x: CX, y: 468 };
+};
+
+// Visual robot home on the SVG test map only. This is NOT the ROS/Nav2 pose.
+// It is placed near R02 so the web animation starts close to your current test area.
+const ROBOT_HOME = { x: 410, y: 240 };
+
+// Temporary real-robot test goals for Jetson/Nav2 through FastAPI /api/robot/goal.
+// ROS map-frame poses recorded on 2026-05-27 test map.
+const QUICK_ROBOT_GOALS = {
+  home: {
+    label: 'Home / Initial',
+    floor: 1,
+    pose: {
+      x: 0.870163506,
+      y: 0.729029868,
+      theta: 3.140028138,
+    },
+  },
+  dropoff_1: {
+    label: 'Spot 1 / Near Home',
+    floor: 1,
+    pose: {
+      x: 0.190865630,
+      y: 0.809709194,
+      theta: 3.037726853,
+    },
+  },
+  dropoff_2: {
+    label: 'Spot 2',
+    floor: 1,
+    pose: {
+      x: -0.352,
+      y: -0.965,
+      theta: -1.564,
+    },
+  },
+};
+
+// Locker test configuration.
+// Arduino command numbering:
+//   id 1 = BASE LOCK      -> old original lock
+//   id 2 = LOCKER 1       -> new delivery locker 1
+//   id 3 = LOCKER 2       -> new delivery locker 2
+//   id 4 = LOCKER 3       -> new delivery locker 3
+//   id 5 = LOCKER 4       -> new delivery locker 4
+const LOCKER_CONTROLS = [
+  { id: 1, label: 'BASE' },
+  { id: 2, label: 'LOCKER 1' },
+  { id: 3, label: 'LOCKER 2' },
+  { id: 4, label: 'LOCKER 3' },
+  { id: 5, label: 'LOCKER 4' },
+];
+const LOCKER_IDS = LOCKER_CONTROLS.map(l => l.id);
+const DEFAULT_LOCKER_OPEN_MS = 3000;
+
+/* ══════════════════════════════════════════
+   FLOOR MAP SVG
+   ══════════════════════════════════════════ */
+function FloorMap({ floor, orders, robotPos, activePath, highlightRoom, onRoomClick, elv1Floor, elv2Floor }) {
+  const map = mapForFloor(floor);
+  const rooms = map.rooms;
+  const elevators = map.elevators;
+  const baseStation = getBaseStationForFloor(floor, map);
+  return (
+    <svg viewBox="0 0 700 490" style={{ width:'100%', height:'100%' }} shapeRendering="crispEdges">
+      <defs>
+        <filter id="glow-cyan">
+          <feGaussianBlur stdDeviation="3" result="blur"/>
+          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+        <filter id="glow-green">
+          <feGaussianBlur stdDeviation="4" result="blur"/>
+          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+        <marker id="arrow" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
+          <path d="M0,0 L6,3 L0,6 Z" fill="#00c8e8" opacity="0.8"/>
+        </marker>
+      </defs>
+
+      {map.walls.map((w, i) => (
+        <rect key={`w-${i}`} x={w.x} y={w.y} width={w.w} height={w.h} fill="#0a1828"/>
+      ))}
+      {map.corridors.map((c, i) => (
+        <rect key={`c-${i}`} x={c.x} y={c.y} width={c.w} height={c.h} fill="#0d2238"/>
+      ))}
+
+      {/* ── Building outer walls ── */}
+      {/* Horizontal wing background */}
+      {/* Vertical wing background */}
+
+      {/* ── Corridor fills ── */}
+      {/* Junction */}
+
+      {/* Corridor center line */}
+
+      {/* ── Rooms ── */}
+      {rooms.map(room => {
+        const isHighlighted = highlightRoom === room.id;
+        const orderIdx = orders.findIndex(o => o.room === room.id && o.floor === floor);
+        const isInQueue = orderIdx >= 0;
+        const label = roomLabel(floor, room);
+
+        return (
+          <g key={room.id} onClick={() => onRoomClick(room.id)} style={{cursor:'pointer'}}>
+            <rect
+              x={room.x} y={room.y} width={room.w} height={room.h}
+              rx="3"
+              fill={isHighlighted ? 'rgba(0,200,232,0.18)' : isInQueue ? 'rgba(255,107,43,0.12)' : '#061220'}
+              stroke={isHighlighted ? '#00c8e8' : isInQueue ? '#ff6b2b' : '#1c3a55'}
+              strokeWidth={isHighlighted || isInQueue ? 2 : 1.5}
+              style={{ filter: (isHighlighted||isInQueue) ? 'url(#glow-cyan)' : 'none', transition:'all 0.2s' }}
+            />
+            {/* Room number */}
+            <text
+              x={room.x + room.w/2} y={room.y + room.h/2 - 6}
+              textAnchor="middle" dominantBaseline="middle"
+              fill={isHighlighted ? '#00c8e8' : isInQueue ? '#ff6b2b' : '#3a6070'}
+              fontSize="12" fontFamily="Orbitron" fontWeight="600"
+            >{label}</text>
+            {isInQueue && (
+              <text x={room.x+room.w/2} y={room.y+room.h/2+10} textAnchor="middle" fill="#ff6b2b" fontSize="9" fontFamily="Space Grotesk">ORDER {orderIdx+1}</text>
+            )}
+            {/* Door mark */}
+            {(() => {
+              const d = getDoor(room);
+              return <circle cx={d.x} cy={d.y} r="3" fill={isInQueue?'#ff6b2b':'#1c3a55'} />;
+            })()}
+          </g>
+        );
+      })}
+
+      {/* ── Elevators ── */}
+      {elevators.map((elv, i) => {
+        const currentF = i===0 ? elv1Floor : elv2Floor;
+        const isHere = currentF === floor;
+        return (
+          <g key={elv.id}>
+            <rect x={elv.x} y={elv.y} width={elv.w} height={elv.h} rx="4"
+              fill={isHere ? 'rgba(245,158,11,0.15)' : '#06111e'}
+              stroke={isHere ? '#f59e0b' : '#2a4a60'}
+              strokeWidth={isHere ? 2 : 1.5}
+            />
+            <text x={elv.x+elv.w/2} y={elv.y+elv.h/2-1} textAnchor="middle" fill={isHere?'#f59e0b':'#3a6070'} fontSize="9" fontFamily="Orbitron" fontWeight="700">{elv.id}</text>
+            <text x={elv.x+elv.w/2} y={elv.y+elv.h/2+9} textAnchor="middle" fill={isHere?'#f59e0b':'#2a4060'} fontSize="8" fontFamily="Space Grotesk">F{currentF}</text>
+          </g>
+        );
+      })}
+
+      {/* ── Active delivery path ── */}
+      {activePath && activePath.map((seg, i) => (
+        <path key={i} d={seg.d} fill="none"
+          stroke={i===0?'#00c8e8':'#ff6b2b'}
+          strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
+          strokeDasharray={seg.len + ' ' + seg.len}
+          style={{
+            strokeDashoffset: seg.len,
+            animation: `pathDraw ${Math.max(0.8, seg.len/200)}s ease-out ${seg.delay}s forwards`,
+          }}
+          markerEnd="url(#arrow)"
+          opacity="0.9"
+          filter="url(#glow-cyan)"
+        />
+      ))}
+
+      {/* ── Robot position ── */}
+      {robotPos && (() => {
+        const rx = robotPos.x ?? ROBOT_HOME.x;
+        const ry = robotPos.y ?? ROBOT_HOME.y;
+        return (
+          <g filter="url(#glow-green)" transform={`translate(${rx}, ${ry})`}>
+            <circle cx="0" cy="0" r="10" fill="#00e67640" stroke="#00e676" strokeWidth="2"/>
+            <text x="0" y="1" textAnchor="middle" dominantBaseline="middle" fontSize="8" fill="#00e676" fontWeight="700">R</text>
+            <text x="0" y="22" textAnchor="middle" fill="#00e67690" fontSize="9" fontFamily="Orbitron">ROBOT</text>
+          </g>
+        );
+      })()}
+
+      {/* ── Base station label (Floor 1 only) ── */}
+
+      {/* ── Compass ── */}
+      <g transform="translate(668,460)">
+        <circle cx="0" cy="0" r="18" fill="#030c18" stroke="#1a3a55" strokeWidth="1"/>
+        <text x="0" y="-8" textAnchor="middle" fill="#3a6070" fontSize="8" fontFamily="Orbitron">N</text>
+        <text x="0" y="12" textAnchor="middle" fill="#3a6070" fontSize="8" fontFamily="Orbitron">S</text>
+        <text x="-12" y="3" textAnchor="middle" fill="#3a6070" fontSize="8" fontFamily="Orbitron">W</text>
+        <text x="12" y="3" textAnchor="middle" fill="#3a6070" fontSize="8" fontFamily="Orbitron">E</text>
+        <line x1="0" y1="-12" x2="0" y2="12" stroke="#2a4a60" strokeWidth="1"/>
+        <line x1="-12" y1="0" x2="12" y2="0" stroke="#2a4a60" strokeWidth="1"/>
+        <polygon points="0,-12 -3,-2 3,-2" fill="#00c8e8" opacity="0.8"/>
+      </g>
+
+      {/* ── Scale bar ── */}
+      <g transform="translate(540,472)">
+        <line x1="0" y1="8" x2="80" y2="8" stroke="#2a4a60" strokeWidth="1"/>
+        <line x1="0" y1="4" x2="0" y2="12" stroke="#2a4a60" strokeWidth="1"/>
+        <line x1="80" y1="4" x2="80" y2="12" stroke="#2a4a60" strokeWidth="1"/>
+        <text x="40" y="4" textAnchor="middle" fill="#3a6070" fontSize="8" fontFamily="Space Grotesk">4 m</text>
+      </g>
+    </svg>
+  );
+}
+
+
+
+/* ══════════════════════════════════════════
+   COMPARTMENT PANEL
+   ══════════════════════════════════════════ */
+const COMP_COLORS = ['#00c8e8','#f59e0b','#ff6b2b','#a855f7'];
+
+function CompartmentPanel({ compartments }) {
+  return (
+    <div style={{ background:'#070f1a', border:'1px solid #1a3a55', borderRadius:8, padding:'12px', marginBottom:12 }}>
+      <div style={{ fontFamily:'Orbitron', fontSize:11, color:'#7ab0c8', letterSpacing:2, marginBottom:10 }}>
+        CARGO COMPARTMENTS
+      </div>
+
+      {/* Robot side-view with 4 stacked compartments */}
+      <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
+        {/* Mini robot schematic */}
+        <svg width="52" height="120" viewBox="0 0 52 120" fill="none" style={{flexShrink:0}}>
+          {/* Head */}
+          <rect x="11" y="2" width="30" height="20" rx="4" fill="#0d1e2d" stroke="#00c8e8" strokeWidth="1.5"/>
+          <rect x="16" y="7" width="7" height="5" rx="2" fill="#00c8e8"/>
+          <rect x="29" y="7" width="7" height="5" rx="2" fill="#00c8e8"/>
+          {/* Neck */}
+          <line x1="26" y1="22" x2="26" y2="26" stroke="#1a3a55" strokeWidth="2"/>
+          {/* Body frame */}
+          <rect x="6" y="26" width="40" height="80" rx="5" fill="#0a1828" stroke="#1c3a55" strokeWidth="1.5"/>
+          {/* 4 Compartments */}
+          {[0,1,2,3].map(i => {
+            const c = compartments[i];
+            const color = c ? COMP_COLORS[i] : null;
+            return (
+              <g key={i}>
+                <rect
+                  x="9" y={29 + i*19} width="34" height="16" rx="2"
+                  fill={c ? `${color}22` : '#1a3a55'}
+                  stroke={c ? color : '#1a3050'}
+                  strokeWidth={c ? 1.5 : 1}
+                  style={!c ? { animation:`compBlink 2s ease-in-out infinite`, animationDelay:`${i*0.4}s` } : {}}
+                />
+                {c && <circle cx="38" cy={29 + i*19 + 8} r="3" fill={color} style={{filter:`drop-shadow(0 0 3px ${color})`}}/>}
+                <text x="13" y={29 + i*19 + 10} fill={c ? color : '#1a3050'} fontSize="7" fontFamily="Orbitron">{i+1}</text>
+              </g>
+            );
+          })}
+          {/* Wheels */}
+          <circle cx="14" cy="112" r="6" fill="#0d1e2d" stroke="#1c3a55" strokeWidth="1.5"/>
+          <circle cx="38" cy="112" r="6" fill="#0d1e2d" stroke="#1c3a55" strokeWidth="1.5"/>
+          <circle cx="14" cy="112" r="2.5" fill="#1a3a55"/>
+          <circle cx="38" cy="112" r="2.5" fill="#1a3a55"/>
+        </svg>
+
+        {/* Compartment status list */}
+        <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
+          {[0,1,2,3].map(i => {
+            const c = compartments[i];
+            const color = COMP_COLORS[i];
+            return (
+              <div key={i} style={{
+                padding:'5px 8px', borderRadius:4,
+                border: `1px solid ${c ? color+'50' : '#0d2238'}`,
+                background: c ? `${color}0d` : '#040d18',
+                display:'flex', alignItems:'center', gap:7,
+                animation: !c ? `compBlink 2s ease-in-out infinite` : 'none',
+                animationDelay: `${i*0.4}s`,
+              }}>
+                <div style={{
+                  width:18, height:18, borderRadius:3, flexShrink:0,
+                  background: c ? `${color}25` : '#040d18',
+                  border: `1px solid ${c ? color : '#1a3050'}`,
+                  display:'flex', alignItems:'center', justifyContent:'center',
+                }}>
+                  <span style={{ fontFamily:'Orbitron', fontSize:9, color: c ? color : '#1a3050', fontWeight:700 }}>{i+1}</span>
+                </div>
+                <div style={{ flex:1, minWidth:0 }}>
+                  {c ? (
+                    <>
+                      <div style={{ fontSize:10, color, fontFamily:'Orbitron', fontWeight:600, letterSpacing:1 }}>
+                        F{c.floor} · R{c.roomDef.id.slice(1)}
+                      </div>
+                      <div style={{ fontSize:9, color:'#3a6070', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
+                        @{c.telegram}
+                      </div>
+                    </>
+                  ) : (
+                    <span style={{ fontSize:10, color:'#1a3050', fontFamily:'Space Grotesk', letterSpacing:1 }}>EMPTY</span>
+                  )}
+                </div>
+                {c && <div style={{ fontSize:9, color:'#3a6070', fontFamily:'Orbitron', letterSpacing:1 }}>IN USE</div>}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   ELEVATOR BUILDING PANEL
+   ══════════════════════════════════════════ */
+function ElevatorPanel({ elv1Floor, elv2Floor, robotFloor, onSimulate }) {
+  const floorH = 28;
+  const panelH = FLOORS.length * floorH + 20;
+
+  return (
+    <div style={{
+      background: '#070f1a', border: '1px solid #1a3a55', borderRadius: 8, padding: '12px',
+      marginBottom: 12,
+    }}>
+      <div style={{ marginBottom:10 }}>
+        <span style={{ fontFamily:'Orbitron', fontSize:11, color:'#7ab0c8', letterSpacing:2 }}>ELEVATORS</span>
+      </div>
+
+      <div style={{ display:'flex', gap:8 }}>
+        {/* Building cross-section */}
+        <div style={{ flex:1, position:'relative', height: panelH }}>
+          {/* Floor rows */}
+          {[...FLOORS].reverse().map((f, i) => (
+            <div key={f} style={{
+              position:'absolute', top: i*floorH+10, left:0, right:0, height:floorH-2,
+              display:'flex', alignItems:'center', gap:6,
+            }}>
+              <div style={{
+                width:24, fontFamily:'Orbitron', fontSize:9, color: f===robotFloor?'#00e676':'#2a4a60',
+                textAlign:'right', flexShrink:0,
+              }}>F{f}</div>
+              <div style={{
+                flex:1, height:floorH-6, background: '#061018',
+                border: `1px solid ${f===robotFloor?'#00e67630':'#0d2238'}`,
+                borderRadius:2, position:'relative', overflow:'visible',
+              }}>
+                {/* Shaft 1 */}
+                <div style={{ position:'absolute', left:6, top:'50%', transform:'translateY(-50%)' }}>
+                  <div style={{
+                    width:20, height:18, borderRadius:2,
+                    background: elv1Floor===f?'rgba(245,158,11,0.3)':'#030c18',
+                    border: `1px solid ${elv1Floor===f?'#f59e0b':'#1a3050'}`,
+                    display:'flex', alignItems:'center', justifyContent:'center',
+                  }}>
+                    {elv1Floor===f && <div style={{ width:6, height:6, borderRadius:'50%', background:'#f59e0b', boxShadow:'0 0 6px #f59e0b' }}/>}
+                  </div>
+                </div>
+                {/* Shaft 2 */}
+                <div style={{ position:'absolute', left:34, top:'50%', transform:'translateY(-50%)' }}>
+                  <div style={{
+                    width:20, height:18, borderRadius:2,
+                    background: elv2Floor===f?'rgba(245,158,11,0.3)':'#030c18',
+                    border: `1px solid ${elv2Floor===f?'#f59e0b':'#1a3050'}`,
+                    display:'flex', alignItems:'center', justifyContent:'center',
+                  }}>
+                    {elv2Floor===f && <div style={{ width:6, height:6, borderRadius:'50%', background:'#f59e0b', boxShadow:'0 0 6px #f59e0b' }}/>}
+                  </div>
+                </div>
+                {/* Robot indicator */}
+                {f===robotFloor && (
+                  <div style={{ position:'absolute', right:4, top:'50%', transform:'translateY(-50%)', width:12, height:12, borderRadius:'50%', background:'#00e676', boxShadow:'0 0 8px #00e676' }}/>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Labels */}
+        <div style={{ display:'flex', flexDirection:'column', gap:2, justifyContent:'flex-end', paddingBottom:10 }}>
+          <div style={{ display:'flex', gap:6, alignItems:'center' }}>
+            <div style={{ width:8, height:8, borderRadius:1, background:'#f59e0b' }}/>
+            <span style={{ fontSize:9, color:'#3a6070', fontFamily:'Space Grotesk' }}>E1  E2</span>
+          </div>
+          <div style={{ display:'flex', gap:6, alignItems:'center' }}>
+            <div style={{ width:8, height:8, borderRadius:'50%', background:'#00e676' }}/>
+            <span style={{ fontSize:9, color:'#3a6070', fontFamily:'Space Grotesk' }}>Robot</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   ORDER CARD (draggable)
+   ══════════════════════════════════════════ */
+function OrderCard({ order, index, total, onRemove, onDragStart, onDragOver, onDrop }) {
+  const colors = ['#00c8e8','#f59e0b','#ff6b2b','#a855f7'];
+  const c = colors[index % colors.length];
+
+  return (
+    <div
+      draggable
+      onDragStart={() => onDragStart(index)}
+      onDragOver={(e) => { e.preventDefault(); onDragOver(index); }}
+      onDrop={() => onDrop(index)}
+      style={{
+        background: '#070f1a', border: `1px solid ${c}40`,
+        borderLeft: `3px solid ${c}`,
+        borderRadius: 6, padding: '10px 12px',
+        display: 'flex', alignItems: 'center', gap: 10,
+        cursor: 'grab', animation: 'fadeIn 0.2s ease-out',
+        position: 'relative', overflow: 'hidden',
+      }}
+    >
+      {/* Scan shimmer */}
+      <div style={{
+        position:'absolute', inset:0, pointerEvents:'none',
+        background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent)',
+        animation: 'scanH 3s linear infinite',
+      }}/>
+
+      <div style={{
+        width:28, height:28, borderRadius:4, background:`${c}20`,
+        border:`1px solid ${c}60`, display:'flex', alignItems:'center', justifyContent:'center',
+        flexShrink:0,
+      }}>
+        <span style={{ fontFamily:'Orbitron', fontSize:12, fontWeight:700, color:c }}>{index+1}</span>
+      </div>
+
+      <div style={{ flex:1, minWidth:0 }}>
+        <div style={{ display:'flex', gap:8, alignItems:'center' }}>
+          <span style={{ fontFamily:'Orbitron', fontSize:14, fontWeight:700, color:'#e2e8f0' }}>
+            {order.floorLabel}{order.roomDef.id.slice(1)}
+          </span>
+          <span style={{ fontSize:10, color:'#3a6070', fontFamily:'Space Grotesk' }}>Floor {order.floor}</span>
+        </div>
+        <div style={{ fontSize:12, color:'#7ab0c8', marginTop:2, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
+          @{order.telegram || 'not set'}
+        </div>
+      </div>
+
+      <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:4, flexShrink:0 }}>
+        <div style={{ fontSize:9, color:'#2a4a60', fontFamily:'Orbitron', letterSpacing:1 }}>
+          {index===0?'PRIORITY':'QUEUED'}
+        </div>
+        <button onClick={() => onRemove(index)} style={{
+          width:20, height:20, borderRadius:3, border:'1px solid #ff444440',
+          background:'#ff444410', color:'#ff6666', fontSize:12,
+          display:'flex', alignItems:'center', justifyContent:'center',
+          lineHeight:1,
+        }}>×</button>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   ADD ORDER FORM
+   ══════════════════════════════════════════ */
+function AddOrderForm({ selectedRoom, selectedFloor, allFloors, onAdd, onClose, compartments }) {
+  const [floor, setFloor] = useState(selectedFloor || '1');
+  const [room, setRoom] = useState(selectedRoom || 'R01');
+  const [telegram, setTelegram] = useState('');
+  const [compartment, setCompartment] = useState(() => compartments.findIndex(c => c === null));
+  const [telegramError, setTelegramError] = useState(false);
+  const floorRooms = mapForFloor(floor).rooms;
+
+  // Sync floor when user changes map floor while form is open
+  useEffect(() => { if (selectedFloor) setFloor(selectedFloor); }, [selectedFloor]);
+  // Sync room when user clicks map while form is open
+  useEffect(() => { if (selectedRoom) setRoom(selectedRoom); }, [selectedRoom]);
+  useEffect(() => {
+    if (!floorRooms.some(r => r.id === room)) setRoom(floorRooms[0]?.id || 'R01');
+  }, [floor, floorRooms, room]);
+
+  const inputStyle = {
+    background:'#040d18', border:'1px solid #1a3a55', borderRadius:5,
+    color:'#c8dce8', fontFamily:'Space Grotesk', fontSize:13,
+    padding:'8px 10px', width:'100%', outline:'none',
+  };
+
+  return (
+    <div style={{
+      background:'#070f1a', border:'1px solid #00c8e840', borderRadius:8,
+      padding:'16px', marginBottom:12, animation:'fadeIn 0.2s ease-out',
+    }}>
+      <div style={{ fontFamily:'Orbitron', fontSize:11, color:'#7ab0c8', letterSpacing:2, marginBottom:12 }}>
+        ADD DELIVERY ORDER
+      </div>
+
+      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
+        <div style={{ display:'flex', gap:8 }}>
+          <div style={{ flex:1 }}>
+            <div style={{ fontSize:10, color:'#3a6070', marginBottom:4, letterSpacing:1 }}>FLOOR</div>
+            <select value={floor} onChange={e=>setFloor(e.target.value)} style={{...inputStyle, background:'#040d18'}}>
+              {allFloors.map(f => <option key={f} value={f}>{f}F</option>)}
+            </select>
+          </div>
+          <div style={{ flex:1 }}>
+            <div style={{ fontSize:10, color:'#3a6070', marginBottom:4, letterSpacing:1 }}>ROOM</div>
+            <select value={room} onChange={e=>setRoom(e.target.value)} style={{...inputStyle, background:'#040d18'}}>
+              {floorRooms.map(r => <option key={r.id} value={r.id}>Room {r.id.slice(1).padStart(2,'0')}</option>)}
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <div style={{ fontSize:10, color:'#3a6070', marginBottom:4, letterSpacing:1 }}>COMPARTMENT</div>
+          <div style={{ display:'flex', gap:6 }}>
+            {[0,1,2,3].map(i => {
+              const taken = compartments[i] !== null;
+              const active = compartment === i;
+              const color = COMP_COLORS[i];
+              return (
+                <button key={i} onClick={() => !taken && setCompartment(i)} disabled={taken} style={{
+                  flex:1, padding:'8px 0', borderRadius:5,
+                  border: `1px solid ${taken ? '#0d2238' : active ? color : color+'40'}`,
+                  background: taken ? '#030c18' : active ? `${color}20` : 'transparent',
+                  color: taken ? '#1a3050' : active ? color : color+'80',
+                  fontFamily:'Orbitron', fontSize:12, fontWeight:700,
+                  cursor: taken ? 'not-allowed' : 'pointer',
+                  position:'relative',
+                }}>
+                  {i+1}
+                  {taken && <div style={{ position:'absolute', top:1, right:4, fontSize:7, fontFamily:'Orbitron', color:'#3a6070', letterSpacing:0 }}>USED</div>}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div>
+          <div style={{ fontSize:10, color: telegramError?'#ff6b2b':'#3a6070', marginBottom:4, letterSpacing:1, transition:'color 0.2s' }}>
+            TELEGRAM USER ID {telegramError && '— required!'}
+          </div>
+          <div style={{ position:'relative' }}>
+            <input
+              value={telegram}
+              onChange={e=>{ setTelegram(e.target.value.replace(/\D/g, '')); setTelegramError(false); }}
+              placeholder="user id"
+              inputMode="numeric"
+              style={{...inputStyle, borderColor: telegramError?'#ff6b2b':'#1a3a55', boxShadow: telegramError?'0 0 8px rgba(255,107,43,0.3)':'none', transition:'all 0.2s'}}
+            />
+          </div>
+        </div>
+
+        <div style={{ display:'flex', gap:8, marginTop:4 }}>
+          <button onClick={onClose} style={{
+            flex:1, padding:'8px', borderRadius:5, border:'1px solid #1a3a55',
+            background:'transparent', color:'#7ab0c8', fontFamily:'Space Grotesk', fontSize:13,
+          }}>Cancel</button>
+          <button onClick={() => {
+            if (!telegram.trim()) { setTelegramError(true); setTimeout(()=>setTelegramError(false),1200); return; }
+            if (compartment === -1) return;
+            onAdd({ floor, room, telegram: telegram.trim(), compartment });
+          }} style={{
+            flex:2, padding:'8px', borderRadius:5, border:'1px solid #00c8e840',
+            background:'rgba(0,200,232,0.1)', color:'#00c8e8',
+            fontFamily:'Orbitron', fontSize:11, letterSpacing:2,
+          }}>+ ADD ORDER</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   DISPATCH MODAL
+   ════════════════════���═════════════════════ */
+function DispatchModal({ orders, onConfirm, onClose }) {
+  const total = orders.length;
+  return (
+    <div style={{
+      position:'fixed', inset:0, background:'rgba(0,0,0,0.7)', backdropFilter:'blur(4px)',
+      display:'flex', alignItems:'center', justifyContent:'center', zIndex:100,
+    }}>
+      <div style={{
+        background:'#070f1a', border:'1px solid #00c8e840', borderRadius:12,
+        padding:'32px', width:480, animation:'fadeIn 0.2s ease-out',
+      }}>
+        <div style={{ fontFamily:'Orbitron', fontSize:18, fontWeight:700, color:'#00c8e8', marginBottom:8, letterSpacing:3 }}>
+          DISPATCH PLAN
+        </div>
+        <div style={{ fontSize:13, color:'#3a6070', marginBottom:24, letterSpacing:1 }}>
+          {total} delivery {total>1?'stops':'stop'} — confirm to deploy robot
+        </div>
+
+        {/* Route visualization */}
+        <div style={{ display:'flex', flexDirection:'column', gap:6, marginBottom:24 }}>
+          {/* Base */}
+          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+            <div style={{ width:8, height:8, borderRadius:'50%', background:'#00e676', boxShadow:'0 0 6px #00e676' }}/>
+            <span style={{ fontSize:12, color:'#7ab0c8', fontFamily:'Space Grotesk' }}>Base Station — Floor 1</span>
+          </div>
+          {orders.map((o, i) => (
+            <React.Fragment key={i}>
+              <div style={{ marginLeft:3, width:2, height:16, background:'#1a3a55' }}/>
+              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+                <div style={{ width:8, height:8, borderRadius:2, background:'#f59e0b', boxShadow:'0 0 6px #f59e0b60' }}/>
+                <span style={{ fontSize:11, color:'#3a6070', fontFamily:'Space Grotesk' }}>Elevator → Floor {o.floor}</span>
+              </div>
+              <div style={{ marginLeft:3, width:2, height:16, background:'#1a3a55' }}/>
+              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+                <div style={{ width:8, height:8, borderRadius:2, background:'#ff6b2b' }}/>
+                <span style={{ fontSize:12, color:'#c8dce8', fontFamily:'Space Grotesk' }}>
+                  Room {o.floorLabel}{o.roomDef.id.slice(1)} — @{o.telegram}
+                </span>
+              </div>
+            </React.Fragment>
+          ))}
+          <div style={{ marginLeft:3, width:2, height:16, background:'#1a3a55' }}/>
+          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+            <div style={{ width:8, height:8, borderRadius:'50%', background:'#00e676', opacity:0.5 }}/>
+            <span style={{ fontSize:11, color:'#3a6070', fontFamily:'Space Grotesk' }}>Return to Base</span>
+          </div>
+        </div>
+
+        <div style={{ display:'flex', gap:10 }}>
+          <button onClick={onClose} style={{
+            flex:1, padding:'12px', borderRadius:6, border:'1px solid #1a3a55',
+            background:'transparent', color:'#7ab0c8', fontFamily:'Space Grotesk', fontSize:13,
+          }}>Cancel</button>
+          <button onClick={onConfirm} style={{
+            flex:2, padding:'12px', borderRadius:6, border:'1px solid #00c8e840',
+            background:'linear-gradient(135deg, rgba(0,200,232,0.15) 0%, rgba(0,200,232,0.05) 100%)',
+            color:'#00c8e8', fontFamily:'Orbitron', fontSize:12, fontWeight:700, letterSpacing:3,
+            boxShadow:'0 0 20px rgba(0,200,232,0.15)',
+          }}>▶ DEPLOY ROBOT</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════
+   MAIN APP
+   ══════════════════════════════════════════ */
+function App() {
+  const time = useTime();
+  const [viewFloor, setViewFloor] = useState('1');
+  const [robotFloor, setRobotFloor] = useState('1');
+  const [robotPos, setRobotPos] = useState(ROBOT_HOME);
+  const [elv1Floor, setElv1Floor] = useState('1');
+  const [elv2Floor, setElv2Floor] = useState('3');
+  const [orders, setOrders] = useState([]);
+  const [compartments, setCompartments] = useState([null, null, null, null]);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [showDispatch, setShowDispatch] = useState(false);
+  const [activePath, setActivePath] = useState(null);
+  const [highlightRoom, setHighlightRoom] = useState(null);
+  const [dispatching, setDispatching] = useState(false);
+  const [dispatchStatus, setDispatchStatus] = useState(null); // null | 'running' | 'done'
+  const [arrived, setArrived] = useState(false);
+  const [currentStop, setCurrentStop] = useState(0);
+  const [toast, setToast] = useState(null);
+  const [dragFrom, setDragFrom] = useState(null);
+  const [selectedRoomForAdd, setSelectedRoomForAdd] = useState(null);
+  const [sseConnected, setSseConnected] = useState(false);
+  const [selectedQuickGoal, setSelectedQuickGoal] = useState(null);
+
+  const showToast = useCallback((msg, type='info') => {
+    setToast({ msg, type });
+    setTimeout(() => setToast(null), 3200);
+  }, []);
+
+  const sendQuickRobotGoal = useCallback(async (goalKey) => {
+    const goal = QUICK_ROBOT_GOALS[goalKey];
+    if (!goal) {
+      showToast('Unknown robot goal', 'warn');
+      return;
+    }
+
+    try {
+      const res = await authFetch('/api/robot/goal', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          floor: goal.floor,
+          pose: goal.pose,
+        }),
+      });
+
+      if (!res.ok) {
+        const text = await res.text();
+        throw new Error(text || `HTTP ${res.status}`);
+      }
+
+      setRobotFloor(numToFloor(goal.floor));
+      setViewFloor(numToFloor(goal.floor));
+      showToast(`Sent robot to ${goal.label}`, 'success');
+    } catch (err) {
+      console.error(err);
+      showToast(`Failed to send ${goal.label}`, 'warn');
+    }
+  }, [showToast]);
+
+  const sendLockerCommand = useCallback(async (lockerId, action, durationMs = DEFAULT_LOCKER_OPEN_MS) => {
+    try {
+      const res = await authFetch('/api/locker/command', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          locker_id: lockerId,
+          action: action,
+          duration_ms: durationMs,
+        }),
+      });
+
+      if (!res.ok) {
+        const text = await res.text();
+        throw new Error(text || `HTTP ${res.status}`);
+      }
+
+      showToast(`Locker ${lockerId}: ${action.toUpperCase()}`, 'success');
+    } catch (err) {
+      console.error(err);
+      showToast(`Locker ${lockerId} command failed`, 'warn');
+    }
+  }, [showToast]);
+
+  const loadOrders = useCallback(async () => {
+    try {
+      const [ordersRes, activeRes] = await Promise.all([
+        authFetch('/api/orders').then(r => r.json()),
+        authFetch('/api/orders/active').then(r => r.json()),
+      ]);
+      const active = (ordersRes.orders || [])
+        .filter(o => !['delivered','cancelled'].includes(o.status))
+        .slice(0, 4);
+      const uiOrders = active.map((o, i) => {
+        const floorStr = numToFloor(o.floor);
+        const rooms = mapForFloor(floorStr).rooms;
+        const roomId = o.room || rooms[0]?.id || null;
+        const roomDef = rooms.find(r => r.id === roomId) || rooms[0] || null;
+        return {
+          floor: floorStr,
+          room: roomId,
+          telegram: o.telegram_id || '',
+          roomDef,
+          floorLabel: floorStr,
+          id: o.id,
+          short_id: o.short_id,
+          pin: o.pin || '',
+          compartment: i % 4,
+          status: o.status,
+        };
+      });
+      setOrders(uiOrders);
+      const comps = [null, null, null, null];
+      uiOrders.forEach((o, i) => {
+        comps[i] = { floor: o.floor, room: o.room, telegram: o.telegram, roomDef: o.roomDef, floorLabel: o.floorLabel };
+      });
+      setCompartments(comps);
+      if (activeRes.order) {
+        setDispatching(true);
+        setDispatchStatus('running');
+        setRobotFloor(numToFloor(activeRes.order.floor));
+        setViewFloor(numToFloor(activeRes.order.floor));
+        setElv1Floor(numToFloor(activeRes.order.floor));
+      }
+    } catch {}
+  }, []);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const [elev, robot] = await Promise.all([
+          fetch('/api/elevator/state').then(r => r.json()),
+          fetch('/api/robot/state').then(r => r.json()),
+        ]);
+        setElv1Floor(numToFloor(elev.Floor));
+        setRobotFloor(numToFloor(robot.floor));
+      } catch {}
+    })();
+    loadOrders();
+  }, [loadOrders]);
+
+  useEffect(() => {
+    const connect = () => {
+      const es = new EventSource('/api/events');
+      es.onopen = () => setSseConnected(true);
+      es.onmessage = evt => {
+        const d = JSON.parse(evt.data);
+        if (d.type === 'elevator') setElv1Floor(numToFloor(d.Floor));
+        if (d.type === 'robot') setRobotFloor(numToFloor(d.floor));
+        if (d.type === 'order_dispatched') {
+          const f = numToFloor(d.floor);
+          setRobotFloor(f); setViewFloor(f); setElv1Floor(f);
+          showToast(`Delivering to Floor ${f}`, 'info');
+        }
+        if (d.type === 'order_arrived') {
+          setArrived(true);
+          showToast(`Robot arrived at floor ${d.floor} — waiting for customer`, 'info');
+        }
+        if (d.type === 'run_complete') {
+          setDispatching(false); setDispatchStatus('done'); setArrived(false);
+          setRobotFloor('1'); setElv1Floor('1'); setViewFloor('1');
+          setOrders([]); setCompartments([null,null,null,null]); setActivePath(null);
+          showToast('All deliveries complete — robot returned to base', 'success');
+          setTimeout(() => setDispatchStatus(null), 3000);
+        }
+        if (d.type === 'unlock') showToast('Compartment unlocked — package collected', 'success');
+        if (['order_cancelled','run_started'].includes(d.type)) loadOrders();
+      };
+      es.onerror = () => { setSseConnected(false); es.close(); setTimeout(connect, 3000); };
+      return es;
+    };
+    const es = connect();
+    return () => es.close();
+  }, [loadOrders, showToast]);
+
+  // Handle room click on map
+  const handleRoomClick = (roomId) => {
+    if (dispatching) return;
+
+    // Quick Robot Test on Floor 1
+    const quickGoalMap = { 'R02': 'dropoff_1', 'R03': 'dropoff_2' };
+    if (viewFloor === '1' && quickGoalMap[roomId]) {
+      setSelectedQuickGoal(quickGoalMap[roomId]);
+      setHighlightRoom(roomId);
+      setShowAddForm(false);
+      
+      const p = buildPath(robotPos || ROBOT_HOME, roomId, '1');
+      if (p) {
+        setActivePath([{ d: p, len: pathLength(p), delay: 0, floor: '1' }]);
+      }
+      return;
+    }
+
+    if (showAddForm) {
+      setSelectedRoomForAdd(roomId);
+      setHighlightRoom(roomId);
+      return;
+    }
+    if (orders.length >= 4) { showToast('Maximum 4 orders reached!', 'warn'); return; }
+    setSelectedRoomForAdd(roomId);
+    setHighlightRoom(roomId);
+    setShowAddForm(true);
+  };
+
+  // Add order
+  const handleAddOrder = async ({ floor, room, telegram, compartment }) => {
+    if (orders.length >= 4) { showToast('Queue full!', 'warn'); return; }
+    const roomDef = mapForFloor(floor).rooms.find(r => r.id === room);
+    const floorLabel = floor;
+    try {
+      const res = await fetch('/api/orders', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ floor: floorToNum(floor), room, telegram_id: telegram || null }),
+      });
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      const newOrder = { floor, room, telegram, roomDef, floorLabel, id: data.id, short_id: data.short_id, pin: data.pin, compartment, status: 'pending' };
+      setCompartments(prev => { const n=[...prev]; n[compartment]={floor,room,telegram,roomDef,floorLabel}; return n; });
+      setOrders(prev => [...prev, newOrder]);
+      setShowAddForm(false);
+      setSelectedRoomForAdd(null);
+      setHighlightRoom(null);
+      showToast(`Order #${data.short_id} added · PIN: ${data.pin}`, 'success');
+    } catch {
+      showToast('Failed to create order', 'warn');
+    }
+  };
+
+  // Remove order
+  const removeOrder = async (idx) => {
+    const o = orders[idx];
+    if (o?.id) {
+      try { await authFetch(`/api/orders/${o.id}/cancel`, {method:'POST'}); } catch {}
+    }
+    if (o?.compartment != null) setCompartments(prev => { const n=[...prev]; n[o.compartment]=null; return n; });
+    setOrders(prev => prev.filter((_,i) => i!==idx));
+  };
+
+  // Drag & drop
+  const handleDragStart = (idx) => setDragFrom(idx);
+  const handleDragOver = (idx) => {};
+  const handleDrop = (idx) => {
+    if (dragFrom === null || dragFrom === idx) return;
+    const arr = [...orders];
+    const [item] = arr.splice(dragFrom, 1);
+    arr.splice(idx, 0, item);
+    setOrders(arr);
+    setDragFrom(null);
+  };
+
+  // Dispatch
+  const handleDispatchConfirm = async () => {
+    setShowDispatch(false);
+    try {
+      const res = await authFetch('/api/orders/start_run', {method:'POST'});
+      if (!res.ok) {
+        const e = await res.json();
+        showToast(e.detail || 'Failed to start delivery', 'warn');
+        return;
+      }
+      setDispatching(true);
+      setDispatchStatus('running');
+      setArrived(false);
+      if (orders.length > 0) {
+        const first = orders[0];
+        const elvPath = `M${ROBOT_HOME.x},${ROBOT_HOME.y} L${CX},${ROBOT_HOME.y} L${CX},${CY} L${ELV_CORRIDOR.x},${CY}`;
+        const len = pathLength(elvPath);
+        const delivPath = buildPath(ELV_CORRIDOR, first.room, first.floor);
+        const dLen = pathLength(delivPath);
+        setActivePath([
+          { d: elvPath, len, delay: 0, floor: '1' },
+          { d: delivPath, len: dLen, delay: 1.0, floor: first.floor },
+        ]);
+      }
+      showToast(`Delivery run started — ${orders.length} stop${orders.length>1?'s':''}`, 'info');
+    } catch {
+      showToast('Network error — could not start delivery', 'warn');
+    }
+  };
+
+  // Elevator command
+  const handleSimElev = async () => {
+    const next = floorToNum(elv1Floor) < 10 ? floorToNum(elv1Floor) + 1 : 1;
+    try {
+      await authFetch('/api/elevator/command', {
+        method:'POST', headers:{'Content-Type':'application/json'},
+        body: JSON.stringify({floor: next}),
+      });
+    } catch {}
+  };
+
+  const simulateArrival = useCallback(async () => {
+    try {
+      const res = await authFetch('/api/robot/simulate_arrival', { method: 'POST' });
+      if (!res.ok) {
+        const e = await res.json();
+        showToast(e.detail || 'Simulate arrival failed', 'warn');
+        return;
+      }
+      setArrived(true);
+      showToast('Simulated robot arrival — Telegram sent to customer', 'success');
+    } catch {
+      showToast('Network error', 'warn');
+    }
+  }, [showToast]);
+
+  const hh = String(time.getHours()).padStart(2,'0');
+  const mm = String(time.getMinutes()).padStart(2,'0');
+  const ss = String(time.getSeconds()).padStart(2,'0');
+
+  return (
+    <div style={{
+      width:1920, height:1080, display:'grid',
+      gridTemplateColumns:'280px 1fr 380px',
+      gridTemplateRows:'56px 1fr',
+      background:'#050c14', position:'relative',
+    }}>
+      <div className="grid-bg" />
+
+      {/* ── TOP BAR ── */}
+      <div style={{
+        gridColumn:'1/-1',
+        display:'flex', alignItems:'center', justifyContent:'space-between',
+        padding:'0 24px', height:56,
+        background:'linear-gradient(180deg, #06101e 0%, rgba(6,16,30,0.8) 100%)',
+        borderBottom:'1px solid #1a3a55',
+        position:'relative', zIndex:10,
+      }}>
+        <div style={{ display:'flex', alignItems:'center', gap:20 }}>
+          {/* Logo */}
+          <div style={{ fontFamily:'Orbitron', fontSize:20, fontWeight:900, color:'#00c8e8', letterSpacing:4, textShadow:'0 0 20px #00c8e840' }}>
+            UEH B1
+          </div>
+          <div style={{ width:1, height:28, background:'#1a3a55' }}/>
+          <div style={{ fontFamily:'Space Grotesk', fontSize:13, color:'#3a6070', letterSpacing:2 }}>
+            DELIVERY MANAGEMENT SYSTEM
+          </div>
+        </div>
+
+        <div style={{ display:'flex', gap:24, alignItems:'center' }}>
+          {/* Status chips */}
+          {[
+            { label: sseConnected ? 'LIVE' : 'CONNECTING', color: sseConnected ? '#00e676' : '#f59e0b' },
+            { label:`FLOOR ${robotFloor}`, color:'#f59e0b' },
+            { label:`${orders.length}/4 ORDERS`, color: orders.length>=4?'#ff6b2b':'#7ab0c8' },
+          ].map(s => (
+            <div key={s.label} style={{ display:'flex', alignItems:'center', gap:6 }}>
+              <div style={{ width:6, height:6, borderRadius:'50%', background:s.color, boxShadow:`0 0 6px ${s.color}` }}/>
+              <span style={{ fontFamily:'Orbitron', fontSize:10, color:s.color, letterSpacing:2 }}>{s.label}</span>
+            </div>
+          ))}
+          <div style={{ fontFamily:'Orbitron', fontSize:16, color:'#00c8e8', letterSpacing:3 }}>{hh}:{mm}:{ss}</div>
+        </div>
+      </div>
+
+      {/* ── LEFT SIDEBAR ── */}
+      <div style={{
+        background:'#06101e', borderRight:'1px solid #1a3a55',
+        padding:'16px 14px', display:'flex', flexDirection:'column', gap:10,
+        overflow:'auto', position:'relative', zIndex:1,
+      }}>
+        {/* Robot status */}
+        <div style={{ background:'#070f1a', border:'1px solid #1a3a55', borderRadius:8, padding:'12px' }}>
+          <div style={{ fontFamily:'Orbitron', fontSize:11, color:'#7ab0c8', letterSpacing:2, marginBottom:10 }}>ROBOT STATUS</div>
+          <div style={{ display:'flex', gap:10, alignItems:'center', marginBottom:10 }}>
+            <div style={{ position:'relative' }}>
+              <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+                <rect x="10" y="14" width="28" height="26" rx="4" fill="#0d1e2d" stroke="#00c8e8" strokeWidth="1.5"/>
+                <rect x="15" y="6" width="18" height="12" rx="3" fill="#0d1e2d" stroke="#00c8e8" strokeWidth="1.5"/>
+                <rect x="18" y="9" width="5" height="4" rx="1" fill="#00c8e8"/>
+                <rect x="25" y="9" width="5" height="4" rx="1" fill="#00c8e8"/>
+                <circle cx="14" cy="42" r="4" fill="#0d1e2d" stroke="#00c8e8" strokeWidth="1.5"/>
+                <circle cx="34" cy="42" r="4" fill="#0d1e2d" stroke="#00c8e8" strokeWidth="1.5"/>
+              </svg>
+              <div style={{ position:'absolute', bottom:-2, right:-2, width:10, height:10, borderRadius:'50%', background:dispatching?'#f59e0b':'#00e676', border:'1px solid #050c14', boxShadow:`0 0 6px ${dispatching?'#f59e0b':'#00e676'}`, animation:'pulse-dot 2s infinite' }}/>
+            </div>
+            <div>
+              <div style={{ fontFamily:'Orbitron', fontSize:13, color:'#e2e8f0', fontWeight:700 }}>B1-BOT-01</div>
+              <div style={{ fontSize:11, color: dispatching?'#f59e0b':'#00e676', marginTop:2 }}>
+                {dispatchStatus==='running'?'◉ DELIVERING':'◉ STANDBY'}
+              </div>
+            </div>
+          </div>
+
+          {[
+            { label:'BATTERY', value:'--', bar:null, color:'#3a6070' },
+            { label:'FLOOR', value:`F${robotFloor}`, bar:null, color:'#f59e0b' },
+            { label:'SPEED', value:'--', bar:null, color:'#3a6070' },
+          ].map(s => (
+            <div key={s.label} style={{ marginBottom:7 }}>
+              <div style={{ display:'flex', justifyContent:'space-between', marginBottom:3 }}>
+                <span style={{ fontSize:10, color:'#2a4a60', letterSpacing:1, fontFamily:'Orbitron' }}>{s.label}</span>
+                <span style={{ fontSize:10, color:s.color, fontFamily:'Orbitron' }}>{s.value}</span>
+              </div>
+              {s.bar !== null && (
+                <div style={{ height:3, background:'#0d2238', borderRadius:2 }}>
+                  <div style={{ width:`${s.bar*100}%`, height:'100%', background:s.color, borderRadius:2, boxShadow:`0 0 4px ${s.color}60` }}/>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Compartment panel */}
+        <CompartmentPanel compartments={compartments} />
+
+        {/* Locker manual control */}
+        <div style={{
+          background:'#070f1a',
+          border:'1px solid rgba(245,158,11,0.35)',
+          borderRadius:8,
+          padding:'12px',
+          boxShadow:'0 0 18px rgba(245,158,11,0.05)',
+        }}>
+          <div style={{
+            display:'flex',
+            alignItems:'center',
+            justifyContent:'space-between',
+            marginBottom:10,
+          }}>
+            <div style={{
+              fontFamily:'Orbitron',
+              fontSize:11,
+              color:'#f59e0b',
+              letterSpacing:2,
+            }}>
+              LOCKER MANUAL CONTROL
+            </div>
+            <div style={{
+              fontSize:9,
+              color:'#7a5b22',
+              fontFamily:'Orbitron',
+              letterSpacing:1,
+            }}>
+              {DEFAULT_LOCKER_OPEN_MS} ms
+            </div>
+          </div>
+
+          <div style={{ display:'flex', flexDirection:'column', gap:7 }}>
+            {LOCKER_CONTROLS.map(locker => (
+              <div key={`locker-${locker.id}`} style={{
+                display:'grid',
+                gridTemplateColumns:'92px 1fr 1fr',
+                gap:6,
+                alignItems:'center',
+              }}>
+                <div style={{
+                  color: locker.id === 1 ? '#f59e0b' : '#c8dce8',
+                  fontSize:11,
+                  fontFamily:'Orbitron',
+                  letterSpacing:1,
+                }}>
+                  {locker.label}
+                </div>
+
+                <button
+                  onClick={() => sendLockerCommand(locker.id, 'open', DEFAULT_LOCKER_OPEN_MS)}
+                  style={{
+                    padding:'8px',
+                    borderRadius:5,
+                    background:'rgba(22,163,74,0.16)',
+                    border:'1px solid #16a34a80',
+                    color:'#86efac',
+                    fontFamily:'Orbitron',
+                    fontSize:10,
+                    letterSpacing:1,
+                  }}>
+                  PULSE
+                </button>
+
+                <button
+                  onClick={() => sendLockerCommand(locker.id, 'close', 3000)}
+                  style={{
+                    padding:'8px',
+                    borderRadius:5,
+                    background:'rgba(220,38,38,0.16)',
+                    border:'1px solid #dc262680',
+                    color:'#fca5a5',
+                    fontFamily:'Orbitron',
+                    fontSize:10,
+                    letterSpacing:1,
+                  }}>
+                  LOCK
+                </button>
+              </div>
+            ))}
+          </div>
+
+          <div style={{
+            marginTop:8,
+            fontSize:10,
+            color:'#3a6070',
+            lineHeight:1.4,
+          }}>
+            PULSE sends a timed unlock pulse. LOCK forces the relay off. BASE uses Arduino locker id 1; delivery lockers use ids 2–5.
+          </div>
+        </div>
+
+        {/* Elevator panel */}
+        <ElevatorPanel elv1Floor={elv1Floor} elv2Floor={elv2Floor} robotFloor={robotFloor} onSimulate={handleSimElev}/>
+
+        {/* Floor selector */}
+        <div style={{ background:'#070f1a', border:'1px solid #1a3a55', borderRadius:8, padding:'12px' }}>
+          <div style={{ fontFamily:'Orbitron', fontSize:11, color:'#7ab0c8', letterSpacing:2, marginBottom:10 }}>VIEW FLOOR</div>
+          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:5 }}>
+            {FLOORS.map(f => (
+              <button key={f} onClick={() => setViewFloor(f)} style={{
+                padding:'6px 0', borderRadius:4,
+                background: viewFloor===f?'rgba(0,200,232,0.15)':robotFloor===f?'rgba(0,230,118,0.08)':'#040d18',
+                border: `1px solid ${viewFloor===f?'#00c8e8':robotFloor===f?'#00e67630':'#0d2238'}`,
+                color: viewFloor===f?'#00c8e8':robotFloor===f?'#00e676':'#3a6070',
+                fontFamily:'Orbitron', fontSize:11, letterSpacing:2,
+              }}>
+                {f}F
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ── CENTER MAP ── */}
+      <div style={{ position:'relative', background:'#050c14', display:'flex', flexDirection:'column', overflow:'hidden' }}>
+        {/* Header */}
+        <div style={{
+          display:'flex', alignItems:'center', justifyContent:'space-between',
+          padding:'10px 20px', borderBottom:'1px solid #0d2238', flexShrink:0,
+        }}>
+          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
+            <span style={{ fontFamily:'Orbitron', fontSize:12, color:'#7ab0c8', letterSpacing:3 }}>FLOOR MAP</span>
+            <div style={{
+              padding:'2px 10px', borderRadius:4,
+              background:'rgba(0,200,232,0.1)', border:'1px solid #00c8e840',
+              fontFamily:'Orbitron', fontSize:13, fontWeight:700, color:'#00c8e8',
+            }}>{viewFloor}F</div>
+          </div>
+          <div style={{ display:'flex', gap:14, fontSize:11, color:'#2a4a60' }}>
+            {[
+              { color:'#1c3a55', fill:'#061220', label:'Room' },
+              { color:'#f59e0b', fill:'rgba(245,158,11,0.15)', label:'Elevator' },
+              { color:'#ff6b2b', fill:'rgba(255,107,43,0.12)', label:'Queued' },
+              { color:'#00e676', label:'Robot', dot:true },
+            ].map(l => (
+              <div key={l.label} style={{ display:'flex', alignItems:'center', gap:5 }}>
+                {l.dot
+                  ? <div style={{ width:8, height:8, borderRadius:'50%', background:'#00e676', boxShadow:'0 0 5px #00e676' }}/>
+                  : <div style={{ width:12, height:8, borderRadius:2, background:l.fill, border:`1px solid ${l.color}` }}/>}
+                <span style={{ fontFamily:'Space Grotesk' }}>{l.label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 2D map — full width */}
+        <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center',
+          padding:'16px', minHeight:0, position:'relative' }}>
+          <div style={{
+            width:'100%', maxHeight:'100%', aspectRatio:'700/490',
+            background:'#050c14', border:'1px solid #0d2238', borderRadius:8,
+            overflow:'hidden', position:'relative',
+          }}>
+            <FloorMap
+              floor={viewFloor}
+              orders={orders}
+              robotPos={viewFloor===robotFloor?robotPos:null}
+              activePath={activePath?.filter(p=>p.floor===viewFloor)}
+              highlightRoom={highlightRoom}
+              onRoomClick={handleRoomClick}
+              elv1Floor={elv1Floor}
+              elv2Floor={elv2Floor}
+            />
+            {dispatching && (
+              <div style={{
+                position:'absolute', top:8, left:8, padding:'3px 10px', borderRadius:4,
+                background:'rgba(245,158,11,0.15)', border:'1px solid #f59e0b40',
+                fontFamily:'Orbitron', fontSize:10, color:'#f59e0b', letterSpacing:2,
+                animation:'blink 1s ease-in-out infinite',
+              }}>◉ DISPATCHING</div>
+            )}
+            {selectedQuickGoal && !dispatching && (
+              <div
+                onClick={() => {
+                  sendQuickRobotGoal(selectedQuickGoal);
+                  setSelectedQuickGoal(null);
+                  
+                  if (activePath && activePath[0] && activePath[0].d) {
+                    const pathStr = activePath[0].d;
+                    const pts = pathStr.split(/M|L/).map(s => s.trim()).filter(Boolean).map(s => {
+                      const [x,y] = s.split(',');
+                      return { x: parseFloat(x), y: parseFloat(y) };
+                    });
+                    if (pts.length > 1) {
+                      const startTime = performance.now();
+                      const duration = 3000; // 3 seconds
+                      let totalLen = 0;
+                      const segs = [];
+                      for (let i = 0; i < pts.length - 1; i++) {
+                        const dx = pts[i+1].x - pts[i].x;
+                        const dy = pts[i+1].y - pts[i].y;
+                        const len = Math.hypot(dx, dy);
+                        totalLen += len;
+                        segs.push({ len, dx, dy, start: pts[i] });
+                      }
+                      
+                      const animate = (time) => {
+                        let progress = (time - startTime) / duration;
+                        if (progress >= 1) {
+                          setRobotPos(pts[pts.length - 1]);
+                          return;
+                        }
+                        const targetLen = progress * totalLen;
+                        let currentLen = 0;
+                        for (let i = 0; i < segs.length; i++) {
+                          if (currentLen + segs[i].len >= targetLen || i === segs.length - 1) {
+                            const segProg = segs[i].len === 0 ? 1 : (targetLen - currentLen) / segs[i].len;
+                            setRobotPos({
+                              x: segs[i].start.x + segs[i].dx * segProg,
+                              y: segs[i].start.y + segs[i].dy * segProg,
+                            });
+                            break;
+                          }
+                          currentLen += segs[i].len;
+                        }
+                        requestAnimationFrame(animate);
+                      };
+                      requestAnimationFrame(animate);
+                    }
+                  }
+                }}
+                style={{
+                  position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)',
+                  background: 'rgba(0, 230, 118, 0.9)', border: '2px solid #00e676',
+                  padding: '12px 30px', borderRadius: 30, cursor: 'pointer',
+                  color: '#000', fontFamily: 'Orbitron', fontSize: 16, fontWeight: 800, letterSpacing: 2,
+                  boxShadow: '0 4px 15px rgba(0, 230, 118, 0.4)',
+                  transition: 'transform 0.1s', zIndex: 10
+                }}
+                onMouseOver={(e) => e.currentTarget.style.transform = 'translateX(-50%) scale(1.05)'}
+                onMouseOut={(e) => e.currentTarget.style.transform = 'translateX(-50%) scale(1)'}
+              >
+                ▶ START TO {QUICK_ROBOT_GOALS[selectedQuickGoal]?.label.toUpperCase()}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* ── RIGHT PANEL ── */}
+      <div style={{
+        background:'#06101e', borderLeft:'1px solid #1a3a55',
+        padding:'16px', display:'flex', flexDirection:'column', gap:12,
+        overflow:'auto', position:'relative', zIndex:1,
+      }}>
+        {/* Header */}
+        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
+          <span style={{ fontFamily:'Orbitron', fontSize:13, color:'#7ab0c8', letterSpacing:3 }}>ORDER QUEUE</span>
+          <div style={{ display:'flex', gap:6, alignItems:'center' }}>
+            <span style={{ fontFamily:'Orbitron', fontSize:12, color: orders.length>=4?'#ff6b2b':'#3a6070' }}>
+              {orders.length}/4
+            </span>
+            <div style={{
+              display:'flex', gap:4,
+            }}>
+              {[...Array(4)].map((_,i) => (
+                <div key={i} style={{ width:16, height:6, borderRadius:2, background: i<orders.length?'#00c8e8':'#0d2238' }}/>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Orders */}
+        <div style={{ display:'flex', flexDirection:'column', gap:6, minHeight:40 }}>
+          {orders.length === 0 && (
+            <div style={{
+              padding:'24px', textAlign:'center',
+              border:'1px dashed #0d2238', borderRadius:8,
+              color:'#2a4a60', fontFamily:'Space Grotesk', fontSize:13,
+            }}>
+              No orders yet<br/>
+              <span style={{ fontSize:11, color:'#1a3050' }}>Click rooms on map or press + to add</span>
+            </div>
+          )}
+          {orders.map((o, i) => (
+            <OrderCard
+              key={o.id} order={o} index={i} total={orders.length}
+              onRemove={removeOrder}
+              onDragStart={handleDragStart}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+            />
+          ))}
+        </div>
+
+        {/* Add form or button */}
+        {showAddForm ? (
+          <AddOrderForm
+            selectedRoom={selectedRoomForAdd}
+            selectedFloor={viewFloor}
+            allFloors={FLOORS}
+            compartments={compartments}
+            onAdd={handleAddOrder}
+            onClose={() => { setShowAddForm(false); setHighlightRoom(null); }}
+          />
+        ) : (
+          <button onClick={() => { if(orders.length<4){ setShowAddForm(true); setSelectedRoomForAdd(mapForFloor(viewFloor).rooms[0]?.id || 'R01'); } else showToast('Queue full!','warn'); }}
+            style={{
+              padding:'10px', borderRadius:6,
+              border: orders.length>=4?'1px dashed #1a3a55':'1px dashed #00c8e840',
+              background:'transparent',
+              color: orders.length>=4?'#2a4a60':'#00c8e8',
+              fontFamily:'Orbitron', fontSize:11, letterSpacing:3,
+              opacity: orders.length>=4?0.5:1,
+            }}>
+            + ADD ORDER
+          </button>
+        )}
+
+
+        {/* Dispatch */}
+        <div style={{ marginTop:'auto', display:'flex', flexDirection:'column', gap:8 }}>
+          {orders.length > 0 && !dispatching && (
+            <div style={{ fontSize:11, color:'#3a6070', fontFamily:'Space Grotesk', letterSpacing:1, textAlign:'center' }}>
+              Drag cards to reorder delivery priority
+            </div>
+          )}
+          <button
+            onClick={() => { if(orders.length>0 && !dispatching) setShowDispatch(true); }}
+            disabled={orders.length===0 || dispatching}
+            style={{
+              padding:'16px', borderRadius:8,
+              background: orders.length===0||dispatching
+                ? '#040d18'
+                : 'linear-gradient(135deg, rgba(0,200,232,0.2) 0%, rgba(0,200,232,0.08) 100%)',
+              border: `2px solid ${orders.length===0||dispatching?'#0d2238':'#00c8e860'}`,
+              color: orders.length===0||dispatching?'#1a3a55':'#00c8e8',
+              fontFamily:'Orbitron', fontSize:15, fontWeight:700, letterSpacing:4,
+              boxShadow: orders.length>0&&!dispatching?'0 0 30px rgba(0,200,232,0.15), inset 0 0 20px rgba(0,200,232,0.05)':'none',
+              transition:'all 0.2s',
+            }}
+          >
+            {dispatching ? '◉ DISPATCHING...' : `▶ DISPATCH (${orders.length})`}
+          </button>
+
+          {dispatching && (
+            <button
+              onClick={simulateArrival}
+              disabled={arrived}
+              style={{
+                padding:'12px', borderRadius:8,
+                background: arrived ? '#040d18' : 'linear-gradient(135deg, rgba(245,158,11,0.2) 0%, rgba(245,158,11,0.08) 100%)',
+                border: `2px solid ${arrived ? '#0d2238' : '#f59e0b60'}`,
+                color: arrived ? '#1a3a55' : '#f59e0b',
+                fontFamily:'Orbitron', fontSize:12, fontWeight:700, letterSpacing:3,
+                boxShadow: arrived ? 'none' : '0 0 20px rgba(245,158,11,0.1)',
+                transition:'all 0.2s',
+              }}
+            >
+              {arrived ? '✓ ARRIVED' : '⬡ SIMULATE ARRIVAL'}
+            </button>
+          )}
+
+          {dispatchStatus === 'done' && (
+            <div style={{
+              padding:'10px', borderRadius:6,
+              background:'rgba(0,230,118,0.08)', border:'1px solid #00e67640',
+              textAlign:'center', fontFamily:'Space Grotesk', fontSize:12, color:'#00e676',
+            }}>
+              ✓ All deliveries complete
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ── DISPATCH MODAL ── */}
+      {showDispatch && (
+        <DispatchModal orders={orders} onConfirm={handleDispatchConfirm} onClose={() => setShowDispatch(false)}/>
+      )}
+
+      {/* ── TOAST ── */}
+      {toast && (
+        <div style={{
+          position:'fixed', bottom:24, left:'50%', transform:'translateX(-50%)',
+          padding:'10px 24px', borderRadius:8, zIndex:200,
+          background: toast.type==='success'?'rgba(0,230,118,0.15)':toast.type==='warn'?'rgba(255,107,43,0.15)':'rgba(0,200,232,0.12)',
+          border: `1px solid ${toast.type==='success'?'#00e67660':toast.type==='warn'?'#ff6b2b60':'#00c8e840'}`,
+          color: toast.type==='success'?'#00e676':toast.type==='warn'?'#ff6b2b':'#00c8e8',
+          fontFamily:'Space Grotesk', fontSize:13, whiteSpace:'nowrap',
+          backdropFilter:'blur(8px)',
+          animation:'toast 3.2s ease-out forwards',
+          boxShadow:'0 4px 24px rgba(0,0,0,0.4)',
+        }}>
+          {toast.msg}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function useTime() {
+  const [t, setT] = useState(new Date());
+  useEffect(() => {
+    const id = setInterval(() => setT(new Date()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  return t;
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+<script>
+function scaleRoot() {
+  const root = document.getElementById('root');
+  const scaleX = window.innerWidth / 1920;
+  const scaleY = window.innerHeight / 1080;
+  const scale = Math.min(scaleX, scaleY);
+  root.style.transform = `scale(${scale})`;
+  root.style.marginLeft = `${(window.innerWidth - 1920 * scale) / 2}px`;
+  root.style.marginTop = `${(window.innerHeight - 1080 * scale) / 2}px`;
+}
+scaleRoot();
+window.addEventListener('resize', scaleRoot);
+</script>
+<script>
+  setTimeout(() => {
+    const key = window.localStorage.getItem('ROBOT_API_KEY');
+    const btn = document.getElementById('admin-key-button');
+    if (key && btn) {
+      btn.textContent = 'KEY OK';
+      btn.style.borderColor = '#00e676';
+      btn.style.color = '#00e676';
+    }
+  }, 500);
+</script>
+</body>
+</html>

map_editor.html

@@ -0,0 +1,1352 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Floor Map Editor — UEH B1</title>
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  background: #040c14; color: #c8dce8;
+  font-family: 'Segoe UI', sans-serif;
+  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
+}
+
+/* ── Top bar ── */
+.topbar {
+  height: 48px; background: #06101e;
+  border-bottom: 1px solid #1a3a55;
+  display: flex; align-items: center; gap: 10px;
+  padding: 0 14px; flex-shrink: 0; user-select: none;
+}
+.logo { font-family: monospace; font-size: 13px; font-weight: bold; color: #00c8e8; letter-spacing: 3px; }
+.sep  { width: 1px; height: 24px; background: #1a3a55; margin: 0 2px; }
+
+.floor-tabs { display: flex; gap: 3px; }
+.ftab {
+  padding: 4px 10px; border-radius: 4px;
+  border: 1px solid #1a3a55; background: transparent;
+  color: #7ab0c8; font-size: 11px; font-family: monospace; cursor: pointer;
+  transition: all 0.15s;
+}
+.ftab:hover  { border-color: #2a5a75; color: #c8dce8; }
+.ftab.active { background: rgba(0,200,232,0.12); border-color: #00c8e8; color: #00c8e8; }
+.ftab-add    { color: #3a6070; border-style: dashed; }
+
+.tools { display: flex; gap: 3px; }
+.tbtn {
+  padding: 5px 11px; border-radius: 4px;
+  border: 1px solid #1a3a55; background: transparent;
+  color: #7ab0c8; font-size: 11px; font-family: monospace;
+  cursor: pointer; display: flex; align-items: center; gap: 5px;
+  transition: all 0.15s;
+}
+.tbtn:hover  { border-color: #2a5a75; background: #061018; }
+.tbtn.active { background: rgba(0,200,232,0.12); border-color: #00c8e8; color: #00c8e8; }
+.tbtn.del    { color: #ff6b6b; border-color: #ff6b6b30; }
+.tbtn.del:hover { background: rgba(255,107,107,0.1); }
+.tbtn.green  { color: #00e676; border-color: #00e67630; }
+.tbtn.green:hover { background: rgba(0,230,118,0.1); }
+
+.snap-ctrl {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; color: #3a6070; font-family: monospace;
+  margin-left: auto;
+}
+.snap-ctrl input {
+  width: 40px; background: #040d18; border: 1px solid #1a3a55;
+  color: #c8dce8; padding: 3px 6px; border-radius: 3px;
+  font-size: 11px; font-family: monospace; text-align: center;
+}
+
+/* ── Main layout ── */
+.content { flex: 1; display: flex; overflow: hidden; }
+
+.canvas-wrap {
+  flex: 1; overflow: auto; background: #020810;
+  display: flex; align-items: flex-start;
+  justify-content: flex-start; padding: 24px;
+}
+
+#canvas { display: block; user-select: none; }
+
+/* ── Right panel ── */
+.panel {
+  width: 232px; background: #06101e;
+  border-left: 1px solid #1a3a55;
+  padding: 12px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: 12px;
+  flex-shrink: 0;
+}
+.panel h3 {
+  font-size: 10px; color: #3a6070;
+  letter-spacing: 2px; text-transform: uppercase;
+  margin-bottom: 7px; font-family: monospace;
+}
+.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
+.stat-box {
+  background: #040d18; border: 1px solid #0d2238;
+  border-radius: 4px; padding: 6px; text-align: center;
+}
+.stat-box .val { font-size: 20px; font-weight: bold; color: #00c8e8; font-family: monospace; }
+.stat-box .lbl { font-size: 9px; color: #3a6070; letter-spacing: 1px; }
+
+.prop-row { margin-bottom: 7px; }
+.prop-row label { display: block; font-size: 10px; color: #3a6070; margin-bottom: 3px; letter-spacing: 1px; font-family: monospace; }
+.prop-row input, .prop-row select {
+  width: 100%; background: #040d18; border: 1px solid #1a3a55;
+  color: #c8dce8; padding: 5px 8px; border-radius: 4px;
+  font-size: 12px; font-family: monospace;
+}
+.prop-row input:focus, .prop-row select:focus { outline: none; border-color: #00c8e8; }
+.prop-row .row2 { display: flex; gap: 5px; }
+.prop-row .row2 input { flex: 1; }
+
+/* ── Door picker ── */
+.door-picker {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 3px; margin: 4px 0;
+}
+.dpick-btn {
+  height: 26px; border-radius: 3px;
+  border: 1px solid #1a3a55; background: #040d18;
+  color: #7ab0c8; font-size: 15px; cursor: pointer;
+  transition: all 0.12s; display: flex; align-items: center; justify-content: center;
+}
+.dpick-btn:hover { border-color: #2a5a75; background: #061018; }
+.dpick-room {
+  background: rgba(0,200,232,0.05); border: 1px dashed #1a3a55;
+  border-radius: 2px; height: 26px;
+}
+
+.legend { display: flex; flex-direction: column; gap: 5px; }
+.legend-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #3a6070; }
+.legend-dot { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
+
+.xbtn {
+  width: 100%; padding: 8px; border-radius: 5px; cursor: pointer;
+  font-family: monospace; font-size: 11px; letter-spacing: 1px;
+  transition: all 0.15s;
+}
+.xbtn-primary {
+  border: 1px solid #00c8e840; background: rgba(0,200,232,0.08); color: #00c8e8;
+}
+.xbtn-primary:hover { background: rgba(0,200,232,0.16); }
+.xbtn-secondary {
+  border: 1px solid #1a3a55; background: transparent; color: #7ab0c8;
+}
+.xbtn-secondary:hover { background: #061018; }
+
+/* ── Status bar ── */
+.statusbar {
+  height: 26px; background: #030c14;
+  border-top: 1px solid #0d2238;
+  display: flex; align-items: center;
+  padding: 0 14px; font-size: 11px; color: #3a6070;
+  font-family: monospace; gap: 20px; flex-shrink: 0;
+}
+
+/* ── Modal ── */
+.overlay {
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,0.72); backdrop-filter: blur(3px);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 100;
+}
+.modal {
+  background: #070f1a; border: 1px solid #1a3a55;
+  border-radius: 10px; padding: 22px; width: 600px;
+  max-height: 80vh; overflow: auto;
+}
+.modal h2 { font-size: 13px; color: #00c8e8; font-family: monospace; letter-spacing: 2px; margin-bottom: 12px; }
+.modal p  { font-size: 11px; color: #3a6070; margin-bottom: 8px; }
+.modal textarea {
+  width: 100%; height: 320px;
+  background: #040d18; border: 1px solid #1a3a55;
+  color: #a0c8d8; font-family: monospace; font-size: 12px;
+  padding: 10px; border-radius: 5px; resize: vertical; outline: none;
+}
+.modal textarea:focus { border-color: #00c8e8; }
+.modal-actions { display: flex; gap: 8px; margin-top: 10px; }
+</style>
+</head>
+<body>
+
+<!-- ── TOP BAR ── -->
+<div class="topbar">
+  <span class="logo">MAP EDITOR</span>
+  <div class="sep"></div>
+
+  <div class="floor-tabs" id="floorTabs"></div>
+  <button class="ftab ftab-add" onclick="addFloor()">+ floor</button>
+
+  <div class="sep"></div>
+
+  <div class="tools">
+    <button class="tbtn active" id="tool-select"    onclick="setTool('select')"    title="S">◎ Select</button>
+    <button class="tbtn"        id="tool-room"      onclick="setTool('room')"      title="R">▬ Room</button>
+    <button class="tbtn"        id="tool-wall"      onclick="setTool('wall')"      title="W">■ Wall</button>
+    <button class="tbtn"        id="tool-corridor"  onclick="setTool('corridor')"  title="C">░ Corridor</button>
+    <button class="tbtn"        id="tool-elevator"  onclick="setTool('elevator')"  title="E">⬆ Elevator</button>
+    <button class="tbtn del"    onclick="deleteSelected()"                         title="Del">✕ Delete</button>
+    <div class="sep"></div>
+    <button class="tbtn"        onclick="autoBuildWalls()"                         title="Fill empty space with walls">Auto walls</button>
+    <button class="tbtn"        onclick="undo()"                                   title="Ctrl+Z">↩ Undo</button>
+    <button class="tbtn green"  onclick="openExport()">↓ Export JS</button>
+    <div class="sep"></div>
+    <button class="tbtn" onclick="document.getElementById('pgmInput').click()" title="Load PGM as background">🗺 Load PGM</button>
+    <input type="file" id="pgmInput" accept=".pgm" style="display:none" onchange="loadPGM(this)">
+  </div>
+
+  <div class="snap-ctrl">
+    SNAP<input id="snapInput" type="number" value="5" min="1" max="20" onchange="state.snap=+this.value">
+    GRID<input id="gridInput" type="number" value="10" min="5" max="50" onchange="state.gridSize=+this.value;render()">
+  </div>
+</div>
+
+<!-- ── MAIN ── -->
+<div class="content">
+  <div class="canvas-wrap" id="canvasWrap">
+    <svg id="canvas" xmlns="http://www.w3.org/2000/svg"></svg>
+  </div>
+
+  <div class="panel">
+    <div>
+      <h3>Stats</h3>
+      <div class="stat-grid">
+        <div class="stat-box"><div class="val" id="sRooms">0</div><div class="lbl">ROOMS</div></div>
+        <div class="stat-box"><div class="val" id="sElvs">0</div><div class="lbl">ELEV</div></div>
+        <div class="stat-box"><div class="val" id="sWalls">0</div><div class="lbl">WALLS</div></div>
+        <div class="stat-box"><div class="val" id="sCorr">0</div><div class="lbl">CORR</div></div>
+      </div>
+    </div>
+
+    <div id="propsSection" style="display:none">
+      <h3>Properties</h3>
+      <div id="propsForm"></div>
+    </div>
+
+    <div>
+      <h3>Room defaults</h3>
+      <div class="prop-row">
+        <label>DOOR POSITION</label>
+        <div id="defaultDoorPicker"></div>
+      </div>
+    </div>
+
+    <div>
+      <h3>Legend</h3>
+      <div class="legend">
+        <div class="legend-item"><div class="legend-dot" style="background:#0a1828;border:1.5px solid #1c3a55"></div>Wall</div>
+        <div class="legend-item"><div class="legend-dot" style="background:#0d2238;border:1px dashed #1a3a55"></div>Corridor</div>
+        <div class="legend-item"><div class="legend-dot" style="background:rgba(0,200,232,0.12);border:1.5px solid #00c8e8"></div>Room — top</div>
+        <div class="legend-item"><div class="legend-dot" style="background:rgba(0,230,118,0.12);border:1.5px solid #00e676"></div>Room — bot</div>
+        <div class="legend-item"><div class="legend-dot" style="background:rgba(255,107,43,0.12);border:1.5px solid #ff6b2b"></div>Room — East</div>
+        <div class="legend-item"><div class="legend-dot" style="background:rgba(232,58,140,0.12);border:1.5px solid #e83a8c"></div>Room — West</div>
+        <div class="legend-item"><div class="legend-dot" style="background:rgba(245,158,11,0.15);border:1.5px solid #f59e0b"></div>Elevator</div>
+      </div>
+    </div>
+
+    <div id="overlaySection" style="display:none">
+      <h3>Map Overlay</h3>
+      <div class="prop-row">
+        <label>OPACITY — <span id="opacityVal">0.35</span></label>
+        <input type="range" min="0" max="1" step="0.05" value="0.35"
+          style="width:100%;accent-color:#00c8e8;margin-top:4px"
+          oninput="state.overlay.opacity=+this.value;document.getElementById('opacityVal').textContent=(+this.value).toFixed(2);render()">
+      </div>
+      <div class="prop-row">
+        <label>OFFSET X / Y</label>
+        <div class="row2">
+          <input type="number" id="ovOX" value="0" placeholder="x" onchange="state.overlay.ox=+this.value;render()">
+          <input type="number" id="ovOY" value="0" placeholder="y" onchange="state.overlay.oy=+this.value;render()">
+        </div>
+      </div>
+      <div class="prop-row">
+        <label>SCALE X / Y</label>
+        <div class="row2">
+          <input type="number" id="ovSX" value="1" step="0.01" placeholder="sx" onchange="state.overlay.sx=+this.value;render()">
+          <input type="number" id="ovSY" value="1" step="0.01" placeholder="sy" onchange="state.overlay.sy=+this.value;render()">
+        </div>
+      </div>
+      <button class="xbtn xbtn-secondary" onclick="clearOverlay()" style="font-size:10px">✕ Remove overlay</button>
+    </div>
+
+    <div style="margin-top:auto;display:flex;flex-direction:column;gap:6px;">
+      <button class="xbtn xbtn-secondary" onclick="openImport()">↑ Import ROOMS_DEF</button>
+      <button class="xbtn xbtn-secondary" onclick="exportAllFloors()">↓ Export all floors</button>
+      <button class="xbtn xbtn-primary"   onclick="openExport()">↓ Export current floor</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── STATUS BAR ── -->
+<div class="statusbar">
+  <span id="coordDisp">x: —  y: —</span>
+  <span id="sizeDisp"></span>
+  <span style="margin-left:auto" id="hintDisp">S/R/W/C/E=tools · drag/Shift=multi-select · Auto walls fills empty space · Ctrl+Z=undo</span>
+</div>
+
+<!-- ── EXPORT MODAL ── -->
+<div class="overlay" id="exportModal" style="display:none">
+  <div class="modal">
+    <h2>EXPORT — JS CONSTANTS</h2>
+    <textarea id="exportText" readonly></textarea>
+    <div class="modal-actions">
+      <button class="xbtn xbtn-primary"    onclick="copyExport()" id="copyBtn">Copy to clipboard</button>
+      <button class="xbtn xbtn-secondary"  onclick="closeModal('exportModal')">Close</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── IMPORT MODAL ── -->
+<div class="overlay" id="importModal" style="display:none">
+  <div class="modal">
+    <h2>IMPORT — ROOMS_DEF</h2>
+    <p>Paste an existing ROOMS_DEF array (JS literal) to load into current floor:</p>
+    <textarea id="importText" placeholder="[&#10;  { id:'R01', x:2, y:2, w:90, h:76, group:'top' },&#10;  ...&#10;]"></textarea>
+    <div class="modal-actions">
+      <button class="xbtn xbtn-primary"   onclick="doImport()">Import</button>
+      <button class="xbtn xbtn-secondary" onclick="closeModal('importModal')">Cancel</button>
+    </div>
+  </div>
+</div>
+
+<script>
+// ──────────────────────────────────────────────────────────
+//  CONSTANTS
+// ──────────────────────────────────────────────────────────
+const MAP_W = 700, MAP_H = 490;
+let   SCALE  = 1.5;           // display scale (auto-fit on load)
+const FLOORS = ['1','2','3','4','5','6','7','8','9','10'];
+
+// ──────────────────────────────────────────────────────────
+//  STATE
+// ──────────────────────────────────────────────────────────
+const state = {
+  tool: 'select',
+  floor: '1',
+  floors: {},           // floorId → { rooms, walls, corridors, elevators }
+  selected: [],         // array of { type, floorId, idx }
+  drawing: null,        // { type, x0,y0,x1,y1 }
+  rubberBand: null,     // { x0,y0,x1,y1, add } drag-select box
+  snap: 5,
+  gridSize: 10,
+  history: [],
+  roomCtr: {},          // floorId → next number
+  elvCtr:  {},
+  clipboard: null,      // [{type, obj}] for cross-floor copy/paste
+  defaultGroup: 'top',
+  // drag state
+  _dragStart: null,     // { mx, my }
+  _dragOrigs: null,     // [{x,y}] original positions for multi-move
+  _dragging:  false,
+  overlay: { dataURL: null, opacity: 0.35, ox: 0, oy: 0, sx: 1, sy: 1 },
+};
+
+function fd(fid = state.floor) {
+  if (!state.floors[fid]) {
+    state.floors[fid] = { rooms:[], walls:[], corridors:[], elevators:[] };
+    state.roomCtr[fid] = 1;
+    state.elvCtr[fid]  = 1;
+  }
+  return state.floors[fid];
+}
+
+const snap = v => Math.round(v / state.snap) * state.snap;
+
+function isSelected(type, idx) {
+  return state.selected.some(s => s.type === type && s.idx === idx && s.floorId === state.floor);
+}
+
+function selectedObject(sel = state.selected[0]) {
+  if (!sel) return null;
+  return fd(sel.floorId)[sel.type + 's'][sel.idx];
+}
+
+function normRect(o) {
+  const x = Math.max(0, Math.min(MAP_W, snap(o.x)));
+  const y = Math.max(0, Math.min(MAP_H, snap(o.y)));
+  const x2 = Math.max(0, Math.min(MAP_W, snap(o.x + o.w)));
+  const y2 = Math.max(0, Math.min(MAP_H, snap(o.y + o.h)));
+  return { x: Math.min(x, x2), y: Math.min(y, y2), w: Math.abs(x2 - x), h: Math.abs(y2 - y) };
+}
+
+function rectsOverlap(a, b) {
+  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+
+function mergeRects(rects) {
+  const clean = rects.map(normRect).filter(r => r.w > 0 && r.h > 0);
+  if (!clean.length) return [];
+
+  const xs = [...new Set(clean.flatMap(r => [r.x, r.x + r.w]))].sort((a,b) => a-b);
+  const ys = [...new Set(clean.flatMap(r => [r.y, r.y + r.h]))].sort((a,b) => a-b);
+  const occupied = new Set();
+
+  for (let yi = 0; yi < ys.length - 1; yi++) {
+    for (let xi = 0; xi < xs.length - 1; xi++) {
+      const cell = { x: xs[xi], y: ys[yi], w: xs[xi + 1] - xs[xi], h: ys[yi + 1] - ys[yi] };
+      if (clean.some(r => rectsOverlap(cell, r))) occupied.add(`${xi},${yi}`);
+    }
+  }
+
+  const used = new Set();
+  const has = (xi, yi) => occupied.has(`${xi},${yi}`) && !used.has(`${xi},${yi}`);
+  const out = [];
+
+  for (let yi = 0; yi < ys.length - 1; yi++) {
+    for (let xi = 0; xi < xs.length - 1; xi++) {
+      if (!has(xi, yi)) continue;
+
+      let xEnd = xi;
+      while (xEnd < xs.length - 1 && has(xEnd, yi)) xEnd++;
+
+      let yEnd = yi + 1;
+      grow:
+      while (yEnd < ys.length - 1) {
+        for (let xj = xi; xj < xEnd; xj++) {
+          if (!has(xj, yEnd)) break grow;
+        }
+        yEnd++;
+      }
+
+      for (let yy = yi; yy < yEnd; yy++) {
+        for (let xx = xi; xx < xEnd; xx++) used.add(`${xx},${yy}`);
+      }
+      out.push({ x: xs[xi], y: ys[yi], w: xs[xEnd] - xs[xi], h: ys[yEnd] - ys[yi] });
+    }
+  }
+  return out;
+}
+
+// ──────────────────────────────────────────────────────────
+//  HISTORY
+// ──────────────────────────────────────────────────────────
+function saveHistory() {
+  state.history.push(JSON.stringify(state.floors));
+  if (state.history.length > 60) state.history.shift();
+}
+
+function undo() {
+  if (!state.history.length) return;
+  state.floors = JSON.parse(state.history.pop());
+  state.selected = [];
+  render(); updateStats(); updateProps();
+}
+
+// ──────────────────────────────────────────────────────────
+//  COORDINATE TRANSFORM
+// ──────────────────────────────────────────────────────────
+function svgXY(e) {
+  const r = document.getElementById('canvas').getBoundingClientRect();
+  return { x: (e.clientX - r.left) / SCALE, y: (e.clientY - r.top) / SCALE };
+}
+
+// ──────────────────────────────────────────────────────────
+//  TOOL SWITCHING
+// ──────────────────────────────────────────────────────────
+const HINTS = {
+  select:   'Click/drag to select · Shift=add/remove · Drag selected to move · Del=delete · Ctrl+C/V=copy/paste',
+  room:     'Drag to draw room · release to confirm',
+  wall:     'Drag to draw wall boundary rect',
+  corridor: 'Drag to draw corridor fill',
+  elevator: 'Drag to draw elevator shaft',
+};
+
+function setTool(t) {
+  state.tool = t; state.drawing = null;
+  document.querySelectorAll('.tbtn[id^="tool-"]').forEach(b => b.classList.remove('active'));
+  document.getElementById('tool-' + t)?.classList.add('active');
+  document.getElementById('hintDisp').textContent = HINTS[t] || '';
+  render();
+}
+
+// ──────────────────────────────────────────────────────────
+//  DELETE / DUPLICATE
+// ──────────────────────────────────────────────────────────
+function deleteSelected() {
+  if (!state.selected.length) return;
+  saveHistory();
+  const byFloorType = {};
+  state.selected.forEach(s => {
+    const key = `${s.floorId}:${s.type}`;
+    (byFloorType[key] = byFloorType[key] || []).push(s.idx);
+  });
+  for (const [key, idxs] of Object.entries(byFloorType)) {
+    const [floorId, type] = key.split(':');
+    idxs.sort((a,b) => b-a).forEach(i => fd(floorId)[type+'s'].splice(i,1));
+  }
+  state.selected = [];
+  render(); updateStats(); updateProps();
+}
+
+function duplicateSelected() {
+  if (!state.selected.length) return;
+  saveHistory();
+  const newSel = [];
+  state.selected.forEach(sel => {
+    const d = fd(sel.floorId);
+    const src = d[sel.type + 's'][sel.idx];
+    const copy = { ...src, x: src.x + 10, y: src.y + 10 };
+    if (sel.type === 'room')     copy.id = 'R' + String(state.roomCtr[state.floor]++).padStart(2,'0');
+    else if (sel.type === 'elevator') copy.id = 'E' + (state.elvCtr[state.floor]++);
+    d[sel.type + 's'].push(copy);
+    newSel.push({ ...sel, idx: d[sel.type+'s'].length - 1 });
+  });
+  state.selected = newSel;
+  render(); updateStats(); updateProps();
+}
+
+function copySelected() {
+  if (!state.selected.length) return;
+  state.clipboard = state.selected.map(s => ({
+    type: s.type,
+    obj: JSON.parse(JSON.stringify(fd(s.floorId)[s.type+'s'][s.idx])),
+  }));
+  flashHint(`${state.clipboard.length} item${state.clipboard.length>1?'s':''} copied — Ctrl+V to paste`);
+}
+
+function pasteClipboard() {
+  if (!state.clipboard || !state.clipboard.length) return;
+  saveHistory();
+  const newSel = [];
+  state.clipboard.forEach(({ type, obj }) => {
+    const copy = { ...obj, x: snap(obj.x + 10), y: snap(obj.y + 10) };
+    if (type === 'room') {
+      if (!state.roomCtr[state.floor]) state.roomCtr[state.floor] = 1;
+      copy.id = 'R' + String(state.roomCtr[state.floor]++).padStart(2,'0');
+    } else if (type === 'elevator') {
+      if (!state.elvCtr[state.floor]) state.elvCtr[state.floor] = 1;
+      copy.id = 'E' + (state.elvCtr[state.floor]++);
+    }
+    fd()[type+'s'].push(copy);
+    newSel.push({ type, floorId: state.floor, idx: fd()[type+'s'].length - 1 });
+  });
+  state.selected = newSel;
+  render(); updateStats(); updateProps();
+}
+
+function copyToFloor(targetFloor) {
+  if (!state.selected.length) return;
+  saveHistory();
+  state.selected.forEach(s => {
+    const { type } = s;
+    const copy = JSON.parse(JSON.stringify(fd(s.floorId)[type+'s'][s.idx]));
+    if (type === 'room') {
+      if (!state.roomCtr[targetFloor]) state.roomCtr[targetFloor] = 1;
+      copy.id = 'R' + String(state.roomCtr[targetFloor]++).padStart(2,'0');
+    } else if (type === 'elevator') {
+      if (!state.elvCtr[targetFloor]) state.elvCtr[targetFloor] = 1;
+      copy.id = 'E' + (state.elvCtr[targetFloor]++);
+    }
+    fd(targetFloor)[type+'s'].push(copy);
+  });
+  const n = state.selected.length;
+  flashHint(`${n} item${n>1?'s':''} copied to ${targetFloor}F`);
+  render(); updateStats();
+}
+
+function autoBuildWalls() {
+  const d = fd();
+  saveHistory();
+
+  d.rooms = d.rooms.map(normRect).map((r, i) => ({ ...d.rooms[i], ...r }));
+  d.elevators = d.elevators.map(normRect).map((r, i) => ({ ...d.elevators[i], ...r }));
+  d.corridors = mergeRects(d.corridors);
+
+  const solid = [...d.rooms, ...d.elevators, ...d.corridors].map(normRect).filter(r => r.w > 0 && r.h > 0);
+  const xs = [0, MAP_W], ys = [0, MAP_H];
+  solid.forEach(r => {
+    xs.push(r.x, r.x + r.w);
+    ys.push(r.y, r.y + r.h);
+  });
+
+  const xCuts = [...new Set(xs.map(snap))].filter(x => x >= 0 && x <= MAP_W).sort((a,b) => a-b);
+  const yCuts = [...new Set(ys.map(snap))].filter(y => y >= 0 && y <= MAP_H).sort((a,b) => a-b);
+  const walls = [];
+
+  for (let yi = 0; yi < yCuts.length - 1; yi++) {
+    for (let xi = 0; xi < xCuts.length - 1; xi++) {
+      const cell = {
+        x: xCuts[xi],
+        y: yCuts[yi],
+        w: xCuts[xi + 1] - xCuts[xi],
+        h: yCuts[yi + 1] - yCuts[yi],
+      };
+      if (cell.w <= 0 || cell.h <= 0) continue;
+      if (!solid.some(o => rectsOverlap(cell, o))) walls.push(cell);
+    }
+  }
+
+  d.walls = mergeRects(walls);
+  state.selected = [];
+  flashHint(`Auto walls: ${d.walls.length} merged wall block${d.walls.length === 1 ? '' : 's'}`);
+  render(); updateStats(); updateProps();
+}
+
+function flashHint(msg) {
+  const el = document.getElementById('hintDisp');
+  el.textContent = msg;
+  clearTimeout(flashHint._t);
+  flashHint._t = setTimeout(() => { el.textContent = HINTS[state.tool] || ''; }, 2000);
+}
+
+// ── Door picker ──────────────────────────────────────────────
+const DOOR_COLORS = { top:'#00c8e8', bot:'#00e676', vert:'#ff6b2b', 'vert-w':'#e83a8c' };
+const DOOR_DIRS = [
+  { g: 'bot',    sym: '↑', r: 0, c: 1, title: 'North' },
+  { g: 'vert-w', sym: '←', r: 1, c: 0, title: 'West'  },
+  { g: 'vert',   sym: '→', r: 1, c: 2, title: 'East'  },
+  { g: 'top',    sym: '↓', r: 2, c: 1, title: 'South' },
+];
+
+function doorPickerHTML(currentGroup, onchangeFn) {
+  const grid = Array(9).fill(null);
+  DOOR_DIRS.forEach(d => { grid[d.r * 3 + d.c] = d; });
+  return `<div class="door-picker">${grid.map((d, i) => {
+    if (i === 4) return `<div class="dpick-room"></div>`;
+    if (!d) return `<div></div>`;
+    const active = currentGroup === d.g;
+    const col = DOOR_COLORS[d.g] || '#7ab0c8';
+    const style = active ? `background:${col}22;border-color:${col};color:${col}` : '';
+    return `<button class="dpick-btn" style="${style}"
+      onclick="${onchangeFn}('${d.g}')" title="Door ${d.title}">${d.sym}</button>`;
+  }).join('')}</div>`;
+}
+
+function setDefaultGroup(g) {
+  state.defaultGroup = g;
+  const el = document.getElementById('defaultDoorPicker');
+  if (el) el.innerHTML = doorPickerHTML(g, 'setDefaultGroup');
+}
+
+function setPropGroup(g) { setProp('group', g); }
+
+// ──────────────────────────────────────────────────────────
+//  MOUSE EVENTS
+// ──────────────────────────────────────────────────────────
+const svg = document.getElementById('canvas');
+let mouseIsDown = false;
+
+svg.addEventListener('mousedown', e => {
+  if (e.button !== 0) return;
+  mouseIsDown = true;
+  const { x, y } = svgXY(e);
+
+  if (state.tool === 'select') {
+    const hit = hitTest(x, y);
+    if (hit) {
+      let canDrag = true;
+      if (e.shiftKey) {
+        const ei = state.selected.findIndex(s => s.type===hit.type && s.idx===hit.idx && s.floorId===hit.floorId);
+        if (ei >= 0) { state.selected.splice(ei, 1); canDrag = false; }
+        else state.selected.push(hit);
+      } else {
+        if (!isSelected(hit.type, hit.idx)) state.selected = [hit];
+      }
+      if (canDrag) {
+        state._dragStart = { mx: x, my: y };
+        state._dragOrigs = state.selected.map(s => {
+          const o = fd(s.floorId)[s.type+'s'][s.idx];
+          return { x: o.x, y: o.y };
+        });
+        state._dragging = false;
+      } else {
+        state._dragStart = null;
+        state._dragOrigs = null;
+        state._dragging = false;
+      }
+    } else {
+      if (!e.shiftKey) state.selected = [];
+      state.rubberBand = { x0: x, y0: y, x1: x, y1: y, add: e.shiftKey };
+    }
+    render(); updateProps();
+    return;
+  }
+
+  state.drawing = { type: state.tool, x0: snap(x), y0: snap(y), x1: snap(x), y1: snap(y) };
+  e.preventDefault();
+});
+
+svg.addEventListener('mousemove', e => {
+  const { x, y } = svgXY(e);
+  document.getElementById('coordDisp').textContent = `x: ${Math.round(x)}  y: ${Math.round(y)}`;
+  if (!mouseIsDown) return;
+
+  // Move selected
+  if (state.tool === 'select') {
+    if (state.selected.length && state._dragStart) {
+      const dx = x - state._dragStart.mx;
+      const dy = y - state._dragStart.my;
+      if (!state._dragging && (Math.abs(dx) > 2 || Math.abs(dy) > 2)) {
+        saveHistory(); state._dragging = true;
+      }
+      if (state._dragging) {
+        state.selected.forEach((s, i) => {
+          const obj = fd(s.floorId)[s.type+'s'][s.idx];
+          obj.x = snap(state._dragOrigs[i].x + dx);
+          obj.y = snap(state._dragOrigs[i].y + dy);
+        });
+        render(); updateProps();
+      }
+      return;
+    }
+    if (state.rubberBand) {
+      state.rubberBand.x1 = x; state.rubberBand.y1 = y;
+      render(); return;
+    }
+    return;
+  }
+
+  // Update drawing preview
+  if (state.drawing) {
+    state.drawing.x1 = snap(x);
+    state.drawing.y1 = snap(y);
+    const w = Math.abs(state.drawing.x1 - state.drawing.x0);
+    const h = Math.abs(state.drawing.y1 - state.drawing.y0);
+    document.getElementById('sizeDisp').textContent = w > 0 ? `${Math.round(w)} × ${Math.round(h)}` : '';
+    render();
+  }
+});
+
+document.addEventListener('mouseup', e => {
+  if (!mouseIsDown) return;
+  mouseIsDown = false;
+  state._dragStart = null; state._dragOrigs = null; state._dragging = false;
+
+  if (state.rubberBand) {
+    const rb = state.rubberBand;
+    state.rubberBand = null;
+    const rx = Math.min(rb.x0,rb.x1), ry = Math.min(rb.y0,rb.y1);
+    const rw = Math.abs(rb.x1-rb.x0), rh = Math.abs(rb.y1-rb.y0);
+    if (rw > 3 && rh > 3) {
+      const fdata = fd();
+      const hits = [];
+      for (const type of ['room','elevator','wall','corridor']) {
+        fdata[type+'s'].forEach((o, idx) => {
+          if (o.x < rx+rw && o.x+o.w > rx && o.y < ry+rh && o.y+o.h > ry)
+            hits.push({ type, floorId: state.floor, idx });
+        });
+      }
+      if (rb.add) {
+        hits.forEach(hit => {
+          if (!state.selected.some(s => s.type === hit.type && s.idx === hit.idx && s.floorId === hit.floorId))
+            state.selected.push(hit);
+        });
+      } else {
+        state.selected = hits;
+      }
+    }
+    render(); updateProps();
+  }
+
+  if (state.drawing) {
+    const d = state.drawing;
+    const x = Math.min(d.x0, d.x1), y = Math.min(d.y0, d.y1);
+    const w = Math.abs(d.x1 - d.x0), h = Math.abs(d.y1 - d.y0);
+
+    if (w > 4 && h > 4) {
+      saveHistory();
+      const fdata = fd();
+      if (d.type === 'room') {
+        const grp = state.defaultGroup;
+        const id  = 'R' + String(state.roomCtr[state.floor]++).padStart(2, '0');
+        fdata.rooms.push({ id, x, y, w, h, group: grp });
+      } else if (d.type === 'elevator') {
+        const id = 'E' + (state.elvCtr[state.floor]++);
+        fdata.elevators.push({ id, x, y, w, h });
+      } else if (d.type === 'wall') {
+        fdata.walls.push({ x, y, w, h });
+        fdata.walls = mergeRects(fdata.walls);
+      } else if (d.type === 'corridor') {
+        fdata.corridors.push({ x, y, w, h });
+        fdata.corridors = mergeRects(fdata.corridors);
+      }
+    }
+    state.drawing = null;
+    render(); updateStats();
+  }
+});
+
+// Double-click to rename room
+svg.addEventListener('dblclick', e => {
+  const { x, y } = svgXY(e);
+  const hit = hitTest(x, y);
+  if (!hit || hit.type !== 'room') return;
+  const obj = fd(hit.floorId).rooms[hit.idx];
+  const name = prompt('Room ID:', obj.id);
+  if (name && name.trim()) {
+    saveHistory();
+    obj.id = name.trim();
+    render(); updateProps();
+  }
+});
+
+// ──────────────────────────────────────────────────────────
+//  HIT TEST
+// ──────────────────────────────────────────────────────────
+function hitTest(x, y) {
+  const fdata = fd();
+  for (const type of ['room','elevator','wall','corridor']) {
+    const arr = fdata[type + 's'];
+    for (let i = arr.length - 1; i >= 0; i--) {
+      const o = arr[i];
+      if (x >= o.x && x <= o.x + o.w && y >= o.y && y <= o.y + o.h)
+        return { type, floorId: state.floor, idx: i };
+    }
+  }
+  return null;
+}
+
+// ──────────────────────────────────────────────────────────
+//  KEYBOARD
+// ──────────────────────────────────────────────────────────
+document.addEventListener('keydown', e => {
+  if (['INPUT','TEXTAREA','SELECT'].includes(e.target.tagName)) return;
+  if (e.key === 'Delete' || e.key === 'Backspace') { e.preventDefault(); deleteSelected(); }
+  if (e.key === 'Escape') { state.drawing = null; state.rubberBand = null; state.selected = []; render(); updateProps(); }
+  if (!e.ctrlKey && !e.metaKey) {
+    if (e.key === 's' || e.key === 'S') setTool('select');
+    if (e.key === 'r' || e.key === 'R') setTool('room');
+    if (e.key === 'w' || e.key === 'W') setTool('wall');
+    if (e.key === 'c' || e.key === 'C') setTool('corridor');
+    if (e.key === 'e' || e.key === 'E') setTool('elevator');
+    if (e.key === 'd' || e.key === 'D') duplicateSelected();
+  }
+  if ((e.ctrlKey || e.metaKey) && e.key === 'z') { e.preventDefault(); undo(); }
+  if ((e.ctrlKey || e.metaKey) && e.key === 'c') { e.preventDefault(); copySelected(); }
+  if ((e.ctrlKey || e.metaKey) && e.key === 'v') { e.preventDefault(); pasteClipboard(); }
+});
+
+// ──────────────────────────────────────────────────────────
+//  FLOORS
+// ──────────────────────────────────────────────────────────
+function renderFloorTabs() {
+  document.getElementById('floorTabs').innerHTML = FLOORS.map(f => `
+    <button class="ftab ${state.floor === f ? 'active' : ''}" onclick="switchFloor('${f}')">
+      ${f}F
+    </button>
+  `).join('');
+}
+
+function switchFloor(f) {
+  state.floor = f; state.selected = []; state.drawing = null; state.rubberBand = null;
+  renderFloorTabs(); render(); updateStats(); updateProps();
+}
+
+function addFloor() {
+  const lbl = prompt('Floor label (e.g. B1, 10, RF):');
+  if (!lbl || FLOORS.includes(lbl)) return;
+  FLOORS.push(lbl);
+  switchFloor(lbl);
+}
+
+// ──────────────────────────────────────────────────────────
+//  PROPERTIES PANEL
+// ──────────────────────────────────────────────────────────
+function updateProps() {
+  const sec  = document.getElementById('propsSection');
+  const form = document.getElementById('propsForm');
+  if (!state.selected.length) { sec.style.display = 'none'; return; }
+
+  if (state.selected.length > 1) {
+    sec.style.display = 'block';
+    form.innerHTML = `
+      <div style="font-size:10px;color:#3a6070;letter-spacing:1px;margin-bottom:7px;font-family:monospace">
+        ${state.selected.length} ITEMS SELECTED
+      </div>
+      <button class="xbtn xbtn-secondary" style="margin-top:4px;font-size:10px" onclick="duplicateSelected()">Duplicate selected (D)</button>`;
+    return;
+  }
+
+  const sel = state.selected[0];
+  const obj = selectedObject(sel);
+  sec.style.display = 'block';
+
+  let html = `<div style="font-size:10px;color:#3a6070;letter-spacing:1px;margin-bottom:7px;font-family:monospace">${sel.type.toUpperCase()}</div>`;
+
+  if (sel.type === 'room') {
+    html += `
+      <div class="prop-row"><label>ID</label>
+        <input value="${obj.id}" onchange="setProp('id',this.value)"></div>
+      <div class="prop-row"><label>DOOR</label>
+        ${doorPickerHTML(obj.group, 'setPropGroup')}</div>`;
+  } else if (sel.type === 'elevator') {
+    html += `<div class="prop-row"><label>ID</label><input value="${obj.id}" onchange="setProp('id',this.value)"></div>`;
+  }
+
+  html += `
+    <div class="prop-row"><label>POSITION</label>
+      <div class="row2">
+        <input type="number" value="${Math.round(obj.x)}" placeholder="x" onchange="setProp('x',+this.value)">
+        <input type="number" value="${Math.round(obj.y)}" placeholder="y" onchange="setProp('y',+this.value)">
+      </div></div>
+    <div class="prop-row"><label>SIZE</label>
+      <div class="row2">
+        <input type="number" value="${Math.round(obj.w)}" placeholder="w" onchange="setProp('w',+this.value)">
+        <input type="number" value="${Math.round(obj.h)}" placeholder="h" onchange="setProp('h',+this.value)">
+      </div></div>
+    <button class="xbtn xbtn-secondary" style="margin-top:4px;font-size:10px" onclick="duplicateSelected()">⧉ Duplicate (D)</button>`;
+
+  const otherFloors = FLOORS.filter(f => f !== state.floor);
+  if (otherFloors.length) {
+    html += `<div class="prop-row" style="margin-top:8px"><label>COPY TO FLOOR</label>
+      <div style="display:flex;flex-wrap:wrap;gap:3px;margin-top:3px">
+        ${otherFloors.map(f =>
+          `<button class="tbtn" style="padding:3px 7px;font-size:10px"
+            onclick="copyToFloor('${f}')">${f}F</button>`
+        ).join('')}
+      </div></div>`;
+  }
+
+  form.innerHTML = html;
+}
+
+function setProp(key, val) {
+  if (state.selected.length !== 1) return;
+  const obj = selectedObject();
+  saveHistory();
+  obj[key] = val;
+  render(); updateProps();
+}
+
+// ──────────────────────────────────────────────────────────
+//  STATS
+// ──────────────────────────────────────────────────────────
+function updateStats() {
+  const d = fd();
+  document.getElementById('sRooms').textContent = d.rooms.length;
+  document.getElementById('sElvs').textContent  = d.elevators.length;
+  document.getElementById('sWalls').textContent = d.walls.length;
+  document.getElementById('sCorr').textContent  = d.corridors.length;
+}
+
+// ──────────────────────────────────────────────────────────
+//  RENDER
+// ──────────────────────────────────────────────────────────
+const ROOM_COLORS = {
+  top:      { fill:'rgba(0,200,232,0.12)',  stroke:'#00c8e8' },
+  bot:      { fill:'rgba(0,230,118,0.12)',  stroke:'#00e676' },
+  vert:     { fill:'rgba(255,107,43,0.12)', stroke:'#ff6b2b' },
+  'vert-w': { fill:'rgba(232,58,140,0.12)', stroke:'#e83a8c' },
+  other:    { fill:'rgba(168,85,247,0.12)', stroke:'#a855f7' },
+};
+
+function getDoor(r) {
+  if (r.group === 'top')    return { x: r.x + r.w/2, y: r.y + r.h };
+  if (r.group === 'bot')    return { x: r.x + r.w/2, y: r.y       };
+  if (r.group === 'vert')   return { x: r.x + r.w,   y: r.y + r.h/2 };
+  if (r.group === 'vert-w') return { x: r.x,          y: r.y + r.h/2 };
+  return { x: r.x + r.w/2, y: r.y + r.h };
+}
+
+function selHandles(o) {
+  return [[0,0],[o.w,0],[o.w,o.h],[0,o.h]].map(([dx,dy]) =>
+    `<rect x="${o.x+dx-3.5}" y="${o.y+dy-3.5}" width="7" height="7" rx="1"
+      fill="#fff" stroke="#00c8e8" stroke-width="1.2"/>`
+  ).join('');
+}
+
+function unionLayerHTML(rects, fill, stroke, strokeWidth = 1.2, dash = '') {
+  const clean = rects.map(normRect).filter(r => r.w > 0 && r.h > 0);
+  if (!clean.length) return '';
+
+  const xs = [...new Set(clean.flatMap(r => [r.x, r.x + r.w]))].sort((a,b) => a-b);
+  const ys = [...new Set(clean.flatMap(r => [r.y, r.y + r.h]))].sort((a,b) => a-b);
+  const filled = [];
+  const occupied = new Set();
+
+  for (let yi = 0; yi < ys.length - 1; yi++) {
+    for (let xi = 0; xi < xs.length - 1; xi++) {
+      const cell = { x: xs[xi], y: ys[yi], w: xs[xi + 1] - xs[xi], h: ys[yi + 1] - ys[yi] };
+      if (cell.w <= 0 || cell.h <= 0) continue;
+      if (clean.some(r => rectsOverlap(cell, r))) {
+        occupied.add(`${xi},${yi}`);
+        filled.push(cell);
+      }
+    }
+  }
+
+  let h = `<g>`;
+  filled.forEach(c => {
+    h += `<rect x="${c.x}" y="${c.y}" width="${c.w}" height="${c.h}" fill="${fill}"/>`;
+  });
+
+  const path = [];
+  const has = (xi, yi) => occupied.has(`${xi},${yi}`);
+  for (let yi = 0; yi < ys.length - 1; yi++) {
+    for (let xi = 0; xi < xs.length - 1; xi++) {
+      if (!has(xi, yi)) continue;
+      const x1 = xs[xi], x2 = xs[xi + 1], y1 = ys[yi], y2 = ys[yi + 1];
+      if (!has(xi, yi - 1)) path.push(`M${x1} ${y1}H${x2}`);
+      if (!has(xi + 1, yi)) path.push(`M${x2} ${y1}V${y2}`);
+      if (!has(xi, yi + 1)) path.push(`M${x2} ${y2}H${x1}`);
+      if (!has(xi - 1, yi)) path.push(`M${x1} ${y2}V${y1}`);
+    }
+  }
+
+  if (path.length) {
+    h += `<path d="${path.join('')}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth}"
+      stroke-linejoin="round" stroke-linecap="round" ${dash ? `stroke-dasharray="${dash}"` : ''}/>`;
+  }
+  return h + `</g>`;
+}
+
+function render() {
+  const fdata = fd();
+  const W = MAP_W * SCALE, H = MAP_H * SCALE;
+  svg.setAttribute('width',  W);
+  svg.setAttribute('height', H);
+  svg.setAttribute('viewBox', `0 0 ${MAP_W} ${MAP_H}`);
+
+  let h = '';
+
+  // Background
+  h += `<rect width="${MAP_W}" height="${MAP_H}" fill="#050c14"/>`;
+
+  // PGM overlay
+  if (state.overlay.dataURL) {
+    const ov = state.overlay;
+    h += `<image href="${ov.dataURL}"
+      x="${ov.ox}" y="${ov.oy}"
+      width="${MAP_W * ov.sx}" height="${MAP_H * ov.sy}"
+      opacity="${ov.opacity}" preserveAspectRatio="none"
+      style="image-rendering:pixelated"/>`;
+  }
+
+  // Grid
+  h += `<g opacity="0.4">`;
+  for (let x = 0; x <= MAP_W; x += state.gridSize)
+    h += `<line x1="${x}" y1="0" x2="${x}" y2="${MAP_H}" stroke="#0a1e2e" stroke-width="${x % (state.gridSize*5) === 0 ? 1 : 0.5}"/>`;
+  for (let y = 0; y <= MAP_H; y += state.gridSize)
+    h += `<line x1="0" y1="${y}" x2="${MAP_W}" y2="${y}" stroke="#0a1e2e" stroke-width="${y % (state.gridSize*5) === 0 ? 1 : 0.5}"/>`;
+  h += `</g>`;
+
+  // Corridors
+  h += unionLayerHTML(fdata.corridors, '#0d2238', '#1a3a55', 0.9, '5 4');
+  fdata.corridors.forEach((c, i) => {
+    if (!isSelected('corridor', i)) return;
+    h += `<rect x="${c.x}" y="${c.y}" width="${c.w}" height="${c.h}"
+      fill="none" stroke="#ffffff" stroke-width="2"/>`;
+    h += selHandles(c);
+  });
+
+  // Walls
+  h += unionLayerHTML(fdata.walls, '#0a1828', '#1c3a55', 1.5);
+  fdata.walls.forEach((w, i) => {
+    if (!isSelected('wall', i)) return;
+    h += `<rect x="${w.x}" y="${w.y}" width="${w.w}" height="${w.h}"
+      fill="none" stroke="#ffffff" stroke-width="2" rx="2"/>`;
+    h += selHandles(w);
+  });
+
+  // Elevators
+  fdata.elevators.forEach((elv, i) => {
+    const sel = isSelected('elevator', i);
+    h += `<rect x="${elv.x}" y="${elv.y}" width="${elv.w}" height="${elv.h}"
+      fill="rgba(245,158,11,0.15)" stroke="${sel ? '#ffffff' : '#f59e0b'}" stroke-width="${sel ? 2 : 1.5}" rx="3"/>`;
+    h += `<text x="${elv.x+elv.w/2}" y="${elv.y+elv.h/2-4}" text-anchor="middle"
+      fill="${sel ? '#fff' : '#f59e0b'}" font-size="9" font-family="monospace" font-weight="600">ELV</text>`;
+    h += `<text x="${elv.x+elv.w/2}" y="${elv.y+elv.h/2+9}" text-anchor="middle"
+      fill="${sel ? '#fff' : '#f59e0b80'}" font-size="11" font-family="monospace">${elv.id}</text>`;
+    if (sel) h += selHandles(elv);
+  });
+
+  // Rooms
+  fdata.rooms.forEach((r, i) => {
+    const sel = isSelected('room', i);
+    const c   = ROOM_COLORS[r.group] || ROOM_COLORS.other;
+    h += `<rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}"
+      fill="${c.fill}" stroke="${sel ? '#ffffff' : c.stroke}" stroke-width="${sel ? 2 : 1.5}" rx="3"/>`;
+    h += `<text x="${r.x+r.w/2}" y="${r.y+r.h/2+1}" text-anchor="middle" dominant-baseline="middle"
+      fill="${sel ? '#fff' : c.stroke}" font-size="${Math.min(r.w, r.h) > 24 ? 10 : 8}"
+      font-family="monospace" font-weight="600">${r.id}</text>`;
+    const door = getDoor(r);
+    h += `<circle cx="${door.x}" cy="${door.y}" r="3" fill="${c.stroke}70"/>`;
+    if (sel) h += selHandles(r);
+  });
+
+  // Rubber-band selection
+  if (state.rubberBand) {
+    const rb = state.rubberBand;
+    const x = Math.min(rb.x0, rb.x1), y = Math.min(rb.y0, rb.y1);
+    const w = Math.abs(rb.x1 - rb.x0), h2 = Math.abs(rb.y1 - rb.y0);
+    h += `<rect x="${x}" y="${y}" width="${w}" height="${h2}"
+      fill="rgba(255,255,255,0.06)" stroke="#ffffff" stroke-width="1"
+      stroke-dasharray="4 3" rx="2"/>`;
+  }
+
+  // Drawing preview
+  if (state.drawing) {
+    const d = state.drawing;
+    const x = Math.min(d.x0, d.x1), y = Math.min(d.y0, d.y1);
+    const w = Math.abs(d.x1 - d.x0), h2 = Math.abs(d.y1 - d.y0);
+    const DCOL = { room:'#00c8e8', wall:'#1c3a55', corridor:'#1a3a55', elevator:'#f59e0b' };
+    const DFIL = { room:'rgba(0,200,232,0.07)', wall:'rgba(28,58,85,0.35)', corridor:'rgba(13,34,56,0.4)', elevator:'rgba(245,158,11,0.1)' };
+    h += `<rect x="${x}" y="${y}" width="${w}" height="${h2}"
+      fill="${DFIL[d.type]||DFIL.room}" stroke="${DCOL[d.type]||DCOL.room}"
+      stroke-width="1.5" stroke-dasharray="4 3" rx="2"/>`;
+    h += `<text x="${x+w/2}" y="${y+h2/2+1}" text-anchor="middle" dominant-baseline="middle"
+      fill="${DCOL[d.type]||DCOL.room}" font-size="10" font-family="monospace" opacity="0.7">
+      ${Math.round(w)}×${Math.round(h2)}</text>`;
+  }
+
+  // Border
+  h += `<rect x="0" y="0" width="${MAP_W}" height="${MAP_H}" fill="none" stroke="#1a3a55" stroke-width="1.5"/>`;
+
+  svg.innerHTML = h;
+}
+
+// ──────────────────────────────────────────────────────────
+//  EXPORT
+// ──────────────────────────────────────────────────────────
+function openExport() {
+  const d = fd();
+  let out = exportFloorJS(state.floor, d);
+
+  document.getElementById('exportText').value = out;
+  document.getElementById('exportModal').style.display = 'flex';
+}
+
+function exportAllFloors() {
+  let out = `const FLOOR_MAPS = {\n`;
+  FLOORS.forEach(f => {
+    const d = fd(f);
+    out += `  '${f}': {\n`;
+    out += `    walls: [${d.walls.map(w => `{ x:${r(w.x)}, y:${r(w.y)}, w:${r(w.w)}, h:${r(w.h)} }`).join(', ')}],\n`;
+    out += `    corridors: [${d.corridors.map(c => `{ x:${r(c.x)}, y:${r(c.y)}, w:${r(c.w)}, h:${r(c.h)} }`).join(', ')}],\n`;
+    out += `    rooms: [${d.rooms.map(rm => `{ id:'${rm.id}', x:${r(rm.x)}, y:${r(rm.y)}, w:${r(rm.w)}, h:${r(rm.h)}, group:'${rm.group}' }`).join(', ')}],\n`;
+    out += `    elevators: [${d.elevators.map(e => `{ id:'${e.id}', x:${r(e.x)}, y:${r(e.y)}, w:${r(e.w)}, h:${r(e.h)} }`).join(', ')}],\n`;
+    out += `  },\n`;
+  });
+  out += `};\n`;
+
+  document.getElementById('exportText').value = out;
+  document.getElementById('exportModal').style.display = 'flex';
+}
+
+function exportFloorJS(floor, d) {
+  let out = `// Floor: ${floor} — generated by Map Editor\n\n`;
+  if (d.walls.length) {
+    out += `const WALLS_DEF = [\n`;
+    d.walls.forEach(w => out += `  { x:${r(w.x)}, y:${r(w.y)}, w:${r(w.w)}, h:${r(w.h)} },\n`);
+    out += `];\n\n`;
+  }
+
+  if (d.corridors.length) {
+    out += `const CORRIDORS_DEF = [\n`;
+    d.corridors.forEach(c => out += `  { x:${r(c.x)}, y:${r(c.y)}, w:${r(c.w)}, h:${r(c.h)} },\n`);
+    out += `];\n\n`;
+  }
+
+  out += `const ROOMS_DEF = [\n`;
+  d.rooms.forEach(rm => out += `  { id:'${rm.id}', x:${r(rm.x)}, y:${r(rm.y)}, w:${r(rm.w)}, h:${r(rm.h)}, group:'${rm.group}' },\n`);
+  out += `];\n`;
+
+  if (d.elevators.length) {
+    out += `\nconst ELVS_DEF = [\n`;
+    d.elevators.forEach(e => out += `  { id:'${e.id}', x:${r(e.x)}, y:${r(e.y)}, w:${r(e.w)}, h:${r(e.h)} },\n`);
+    out += `];\n`;
+  }
+  return out;
+}
+
+const r = v => Math.round(v);
+
+// ──────────────────────────────────────────────────────────
+//  PGM OVERLAY
+// ──────────────────────────────────────────────────────────
+function loadPGM(input) {
+  const file = input.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = e => {
+    try {
+      const dataURL = parsePGMtoDataURL(e.target.result);
+      state.overlay.dataURL = dataURL;
+      // auto-fit: reset transform
+      state.overlay.ox = 0; state.overlay.oy = 0;
+      state.overlay.sx = 1; state.overlay.sy = 1;
+      document.getElementById('ovOX').value = 0;
+      document.getElementById('ovOY').value = 0;
+      document.getElementById('ovSX').value = 1;
+      document.getElementById('ovSY').value = 1;
+      document.getElementById('overlaySection').style.display = 'block';
+      render();
+    } catch(err) { alert('Failed to load PGM: ' + err.message); }
+  };
+  reader.readAsArrayBuffer(file);
+  input.value = '';
+}
+
+function parsePGMtoDataURL(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let pos = 0;
+
+  const readToken = () => {
+    while (pos < bytes.length) {
+      if (bytes[pos] === 35) {                       // '#' comment
+        while (pos < bytes.length && bytes[pos] !== 10) pos++;
+      } else if (bytes[pos] <= 32) { pos++; }        // whitespace
+      else break;
+    }
+    let s = '';
+    while (pos < bytes.length && bytes[pos] > 32) s += String.fromCharCode(bytes[pos++]);
+    return s;
+  };
+
+  const magic = readToken();
+  if (magic !== 'P5' && magic !== 'P2') throw new Error('Not a valid PGM (expected P5 or P2, got ' + magic + ')');
+
+  const w      = parseInt(readToken());
+  const h      = parseInt(readToken());
+  const maxval = parseInt(readToken());
+  if (magic === 'P5') pos++;   // single whitespace separator after header
+
+  const canvas = document.createElement('canvas');
+  canvas.width = w; canvas.height = h;
+  const ctx = canvas.getContext('2d');
+  const img = ctx.createImageData(w, h);
+
+  const total = w * h;
+  if (magic === 'P5') {
+    const wide = maxval > 255;
+    for (let i = 0; i < total; i++) {
+      const raw = wide ? ((bytes[pos] << 8) | bytes[pos + 1]) : bytes[pos];
+      const v   = Math.round((raw / maxval) * 255);
+      const p   = i * 4;
+      img.data[p] = img.data[p+1] = img.data[p+2] = v;
+      img.data[p+3] = 255;
+      pos += wide ? 2 : 1;
+    }
+  } else {
+    for (let i = 0; i < total; i++) {
+      const v = Math.round((parseInt(readToken()) / maxval) * 255);
+      const p = i * 4;
+      img.data[p] = img.data[p+1] = img.data[p+2] = v;
+      img.data[p+3] = 255;
+    }
+  }
+
+  ctx.putImageData(img, 0, 0);
+  return canvas.toDataURL('image/png');
+}
+
+function clearOverlay() {
+  state.overlay.dataURL = null;
+  document.getElementById('overlaySection').style.display = 'none';
+  render();
+}
+
+function copyExport() {
+  const ta = document.getElementById('exportText');
+  ta.select();
+  document.execCommand('copy');
+  const btn = document.getElementById('copyBtn');
+  btn.textContent = '✓ Copied!';
+  setTimeout(() => btn.textContent = 'Copy to clipboard', 2000);
+}
+
+// ──────────────────────────────────────────────────────────
+//  IMPORT
+// ──────────────────────────────────────────────────────────
+function openImport() {
+  document.getElementById('importText').value = '';
+  document.getElementById('importModal').style.display = 'flex';
+}
+
+function doImport() {
+  const raw = document.getElementById('importText').value.trim();
+  try {
+    const arr = new Function('return ' + raw)();
+    if (!Array.isArray(arr)) throw new Error('Expected an array');
+    saveHistory();
+    const d = fd();
+    d.rooms = arr.map(rm => ({
+      id: rm.id || 'R??', x: rm.x || 0, y: rm.y || 0,
+      w: rm.w || 60, h: rm.h || 50, group: rm.group || 'top',
+    }));
+    const nums = d.rooms.map(rm => parseInt(rm.id.replace(/\D/g,''))).filter(n => !isNaN(n));
+    state.roomCtr[state.floor] = nums.length ? Math.max(...nums) + 1 : d.rooms.length + 1;
+    closeModal('importModal');
+    render(); updateStats();
+  } catch(err) {
+    alert('Parse error: ' + err.message);
+  }
+}
+
+function closeModal(id) {
+  document.getElementById(id).style.display = 'none';
+}
+
+// Close modals on overlay click
+document.querySelectorAll('.overlay').forEach(el => {
+  el.addEventListener('click', e => { if (e.target === el) el.style.display = 'none'; });
+});
+
+// ──────────────────────────────────────────────────────────
+//  LOCALSTORAGE PERSIST
+// ──────────────────────────────────────────────────────────
+function save() {
+  try {
+    localStorage.setItem('mapedit_floors',  JSON.stringify(state.floors));
+    localStorage.setItem('mapedit_roomctr', JSON.stringify(state.roomCtr));
+    localStorage.setItem('mapedit_elvctr',  JSON.stringify(state.elvCtr));
+  } catch {}
+}
+
+function load() {
+  try {
+    const f = localStorage.getItem('mapedit_floors');
+    if (f) state.floors = JSON.parse(f);
+    const rc = localStorage.getItem('mapedit_roomctr');
+    if (rc) state.roomCtr = JSON.parse(rc);
+    const ec = localStorage.getItem('mapedit_elvctr');
+    if (ec) state.elvCtr = JSON.parse(ec);
+    migrateFloorLabels();
+  } catch {}
+}
+
+function migrateFloorLabels() {
+  if (!state.floors.G) return;
+  const remap = { G:'1', '1':'2', '2':'3', '3':'4', '4':'5', '5':'6', '6':'7', '7':'8', '8':'9', '9':'10' };
+  const oldFloors = state.floors;
+  const oldRoomCtr = state.roomCtr;
+  const oldElvCtr = state.elvCtr;
+  state.floors = {};
+  state.roomCtr = {};
+  state.elvCtr = {};
+  Object.entries(remap).forEach(([oldKey, newKey]) => {
+    if (oldFloors[oldKey]) state.floors[newKey] = oldFloors[oldKey];
+    if (oldRoomCtr[oldKey]) state.roomCtr[newKey] = oldRoomCtr[oldKey];
+    if (oldElvCtr[oldKey]) state.elvCtr[newKey] = oldElvCtr[oldKey];
+  });
+  state.floor = '1';
+  save();
+}
+
+setInterval(save, 8000);
+window.addEventListener('beforeunload', save);
+
+// Auto-fit scale to canvas wrap
+function fitScale() {
+  const wrap = document.getElementById('canvasWrap');
+  const padded = Math.min(
+    (wrap.clientWidth  - 48) / MAP_W,
+    (wrap.clientHeight - 48) / MAP_H,
+  );
+  SCALE = Math.max(0.6, Math.min(2.5, padded));
+}
+
+// ──────────────────────────────────────────────────────────
+//  INIT
+// ──────────────────────────────────────────────────────────
+load();
+fitScale();
+renderFloorTabs();
+render();
+updateStats();
+setDefaultGroup(state.defaultGroup);
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,7 @@
+fastapi>=0.111.0
+uvicorn[standard]>=0.29.0
+sse-starlette>=1.8.2
+pydantic>=2.7.0
+supabase>=2.4.0
+httpx>=0.27.0
+Pillow>=10.0.0

static/OrbitControls.js

@@ -0,0 +1,1506 @@
+import {
+	EventDispatcher,
+	MOUSE,
+	Quaternion,
+	Spherical,
+	TOUCH,
+	Vector2,
+	Vector3,
+	Plane,
+	Ray,
+	MathUtils
+} from 'three';
+
+// OrbitControls performs orbiting, dollying (zooming), and panning.
+// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
+//
+//    Orbit - left mouse / touch: one-finger move
+//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
+//    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
+
+const _changeEvent = { type: 'change' };
+const _startEvent = { type: 'start' };
+const _endEvent = { type: 'end' };
+const _ray = new Ray();
+const _plane = new Plane();
+const TILT_LIMIT = Math.cos( 70 * MathUtils.DEG2RAD );
+
+class OrbitControls extends EventDispatcher {
+
+	constructor( object, domElement ) {
+
+		super();
+
+		this.object = object;
+		this.domElement = domElement;
+		this.domElement.style.touchAction = 'none'; // disable touch scroll
+
+		// Set to false to disable this control
+		this.enabled = true;
+
+		// "target" sets the location of focus, where the object orbits around
+		this.target = new Vector3();
+
+		// Sets the 3D cursor (similar to Blender), from which the maxTargetRadius takes effect
+		this.cursor = new Vector3();
+
+		// How far you can dolly in and out ( PerspectiveCamera only )
+		this.minDistance = 0;
+		this.maxDistance = Infinity;
+
+		// How far you can zoom in and out ( OrthographicCamera only )
+		this.minZoom = 0;
+		this.maxZoom = Infinity;
+
+		// Limit camera target within a spherical area around the cursor
+		this.minTargetRadius = 0;
+		this.maxTargetRadius = Infinity;
+
+		// How far you can orbit vertically, upper and lower limits.
+		// Range is 0 to Math.PI radians.
+		this.minPolarAngle = 0; // radians
+		this.maxPolarAngle = Math.PI; // radians
+
+		// How far you can orbit horizontally, upper and lower limits.
+		// If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
+		this.minAzimuthAngle = - Infinity; // radians
+		this.maxAzimuthAngle = Infinity; // radians
+
+		// Set to true to enable damping (inertia)
+		// If damping is enabled, you must call controls.update() in your animation loop
+		this.enableDamping = false;
+		this.dampingFactor = 0.05;
+
+		// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
+		// Set to false to disable zooming
+		this.enableZoom = true;
+		this.zoomSpeed = 1.0;
+
+		// Set to false to disable rotating
+		this.enableRotate = true;
+		this.rotateSpeed = 1.0;
+
+		// Set to false to disable panning
+		this.enablePan = true;
+		this.panSpeed = 1.0;
+		this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up
+		this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
+		this.zoomToCursor = false;
+
+		// Set to true to automatically rotate around the target
+		// If auto-rotate is enabled, you must call controls.update() in your animation loop
+		this.autoRotate = false;
+		this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60
+
+		// The four arrow keys
+		this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };
+
+		// Mouse buttons
+		this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
+
+		// Touch fingers
+		this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
+
+		// for reset
+		this.target0 = this.target.clone();
+		this.position0 = this.object.position.clone();
+		this.zoom0 = this.object.zoom;
+
+		// the target DOM element for key events
+		this._domElementKeyEvents = null;
+
+		//
+		// public methods
+		//
+
+		this.getPolarAngle = function () {
+
+			return spherical.phi;
+
+		};
+
+		this.getAzimuthalAngle = function () {
+
+			return spherical.theta;
+
+		};
+
+		this.getDistance = function () {
+
+			return this.object.position.distanceTo( this.target );
+
+		};
+
+		this.listenToKeyEvents = function ( domElement ) {
+
+			domElement.addEventListener( 'keydown', onKeyDown );
+			this._domElementKeyEvents = domElement;
+
+		};
+
+		this.stopListenToKeyEvents = function () {
+
+			this._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
+			this._domElementKeyEvents = null;
+
+		};
+
+		this.saveState = function () {
+
+			scope.target0.copy( scope.target );
+			scope.position0.copy( scope.object.position );
+			scope.zoom0 = scope.object.zoom;
+
+		};
+
+		this.reset = function () {
+
+			scope.target.copy( scope.target0 );
+			scope.object.position.copy( scope.position0 );
+			scope.object.zoom = scope.zoom0;
+
+			scope.object.updateProjectionMatrix();
+			scope.dispatchEvent( _changeEvent );
+
+			scope.update();
+
+			state = STATE.NONE;
+
+		};
+
+		// this method is exposed, but perhaps it would be better if we can make it private...
+		this.update = function () {
+
+			const offset = new Vector3();
+
+			// so camera.up is the orbit axis
+			const quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) );
+			const quatInverse = quat.clone().invert();
+
+			const lastPosition = new Vector3();
+			const lastQuaternion = new Quaternion();
+			const lastTargetPosition = new Vector3();
+
+			const twoPI = 2 * Math.PI;
+
+			return function update( deltaTime = null ) {
+
+				const position = scope.object.position;
+
+				offset.copy( position ).sub( scope.target );
+
+				// rotate offset to "y-axis-is-up" space
+				offset.applyQuaternion( quat );
+
+				// angle from z-axis around y-axis
+				spherical.setFromVector3( offset );
+
+				if ( scope.autoRotate && state === STATE.NONE ) {
+
+					rotateLeft( getAutoRotationAngle( deltaTime ) );
+
+				}
+
+				if ( scope.enableDamping ) {
+
+					spherical.theta += sphericalDelta.theta * scope.dampingFactor;
+					spherical.phi += sphericalDelta.phi * scope.dampingFactor;
+
+				} else {
+
+					spherical.theta += sphericalDelta.theta;
+					spherical.phi += sphericalDelta.phi;
+
+				}
+
+				// restrict theta to be between desired limits
+
+				let min = scope.minAzimuthAngle;
+				let max = scope.maxAzimuthAngle;
+
+				if ( isFinite( min ) && isFinite( max ) ) {
+
+					if ( min < - Math.PI ) min += twoPI; else if ( min > Math.PI ) min -= twoPI;
+
+					if ( max < - Math.PI ) max += twoPI; else if ( max > Math.PI ) max -= twoPI;
+
+					if ( min <= max ) {
+
+						spherical.theta = Math.max( min, Math.min( max, spherical.theta ) );
+
+					} else {
+
+						spherical.theta = ( spherical.theta > ( min + max ) / 2 ) ?
+							Math.max( min, spherical.theta ) :
+							Math.min( max, spherical.theta );
+
+					}
+
+				}
+
+				// restrict phi to be between desired limits
+				spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
+
+				spherical.makeSafe();
+
+
+				// move target to panned location
+
+				if ( scope.enableDamping === true ) {
+
+					scope.target.addScaledVector( panOffset, scope.dampingFactor );
+
+				} else {
+
+					scope.target.add( panOffset );
+
+				}
+
+				// Limit the target distance from the cursor to create a sphere around the center of interest
+				scope.target.sub( scope.cursor );
+				scope.target.clampLength( scope.minTargetRadius, scope.maxTargetRadius );
+				scope.target.add( scope.cursor );
+
+				// adjust the camera position based on zoom only if we're not zooming to the cursor or if it's an ortho camera
+				// we adjust zoom later in these cases
+				if ( scope.zoomToCursor && performCursorZoom || scope.object.isOrthographicCamera ) {
+
+					spherical.radius = clampDistance( spherical.radius );
+
+				} else {
+
+					spherical.radius = clampDistance( spherical.radius * scale );
+
+				}
+
+				offset.setFromSpherical( spherical );
+
+				// rotate offset back to "camera-up-vector-is-up" space
+				offset.applyQuaternion( quatInverse );
+
+				position.copy( scope.target ).add( offset );
+
+				scope.object.lookAt( scope.target );
+
+				if ( scope.enableDamping === true ) {
+
+					sphericalDelta.theta *= ( 1 - scope.dampingFactor );
+					sphericalDelta.phi *= ( 1 - scope.dampingFactor );
+
+					panOffset.multiplyScalar( 1 - scope.dampingFactor );
+
+				} else {
+
+					sphericalDelta.set( 0, 0, 0 );
+
+					panOffset.set( 0, 0, 0 );
+
+				}
+
+				// adjust camera position
+				let zoomChanged = false;
+				if ( scope.zoomToCursor && performCursorZoom ) {
+
+					let newRadius = null;
+					if ( scope.object.isPerspectiveCamera ) {
+
+						// move the camera down the pointer ray
+						// this method avoids floating point error
+						const prevRadius = offset.length();
+						newRadius = clampDistance( prevRadius * scale );
+
+						const radiusDelta = prevRadius - newRadius;
+						scope.object.position.addScaledVector( dollyDirection, radiusDelta );
+						scope.object.updateMatrixWorld();
+
+					} else if ( scope.object.isOrthographicCamera ) {
+
+						// adjust the ortho camera position based on zoom changes
+						const mouseBefore = new Vector3( mouse.x, mouse.y, 0 );
+						mouseBefore.unproject( scope.object );
+
+						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+						scope.object.updateProjectionMatrix();
+						zoomChanged = true;
+
+						const mouseAfter = new Vector3( mouse.x, mouse.y, 0 );
+						mouseAfter.unproject( scope.object );
+
+						scope.object.position.sub( mouseAfter ).add( mouseBefore );
+						scope.object.updateMatrixWorld();
+
+						newRadius = offset.length();
+
+					} else {
+
+						console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - zoom to cursor disabled.' );
+						scope.zoomToCursor = false;
+
+					}
+
+					// handle the placement of the target
+					if ( newRadius !== null ) {
+
+						if ( this.screenSpacePanning ) {
+
+							// position the orbit target in front of the new camera position
+							scope.target.set( 0, 0, - 1 )
+								.transformDirection( scope.object.matrix )
+								.multiplyScalar( newRadius )
+								.add( scope.object.position );
+
+						} else {
+
+							// get the ray and translation plane to compute target
+							_ray.origin.copy( scope.object.position );
+							_ray.direction.set( 0, 0, - 1 ).transformDirection( scope.object.matrix );
+
+							// if the camera is 20 degrees above the horizon then don't adjust the focus target to avoid
+							// extremely large values
+							if ( Math.abs( scope.object.up.dot( _ray.direction ) ) < TILT_LIMIT ) {
+
+								object.lookAt( scope.target );
+
+							} else {
+
+								_plane.setFromNormalAndCoplanarPoint( scope.object.up, scope.target );
+								_ray.intersectPlane( _plane, scope.target );
+
+							}
+
+						}
+
+					}
+
+				} else if ( scope.object.isOrthographicCamera ) {
+
+					zoomChanged = scale !== 1;
+
+					if ( zoomChanged ) {
+
+						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+						scope.object.updateProjectionMatrix();
+
+					}
+
+				}
+
+				scale = 1;
+				performCursorZoom = false;
+
+				// update condition is:
+				// min(camera displacement, camera rotation in radians)^2 > EPS
+				// using small-angle approximation cos(x/2) = 1 - x^2 / 8
+
+				if ( zoomChanged ||
+					lastPosition.distanceToSquared( scope.object.position ) > EPS ||
+					8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ||
+					lastTargetPosition.distanceToSquared( scope.target ) > 0 ) {
+
+					scope.dispatchEvent( _changeEvent );
+
+					lastPosition.copy( scope.object.position );
+					lastQuaternion.copy( scope.object.quaternion );
+					lastTargetPosition.copy( scope.target );
+
+					return true;
+
+				}
+
+				return false;
+
+			};
+
+		}();
+
+		this.dispose = function () {
+
+			scope.domElement.removeEventListener( 'contextmenu', onContextMenu );
+
+			scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
+			scope.domElement.removeEventListener( 'pointercancel', onPointerUp );
+			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
+
+			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+
+			if ( scope._domElementKeyEvents !== null ) {
+
+				scope._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
+				scope._domElementKeyEvents = null;
+
+			}
+
+			//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
+
+		};
+
+		//
+		// internals
+		//
+
+		const scope = this;
+
+		const STATE = {
+			NONE: - 1,
+			ROTATE: 0,
+			DOLLY: 1,
+			PAN: 2,
+			TOUCH_ROTATE: 3,
+			TOUCH_PAN: 4,
+			TOUCH_DOLLY_PAN: 5,
+			TOUCH_DOLLY_ROTATE: 6
+		};
+
+		let state = STATE.NONE;
+
+		const EPS = 0.000001;
+
+		// current position in spherical coordinates
+		const spherical = new Spherical();
+		const sphericalDelta = new Spherical();
+
+		let scale = 1;
+		const panOffset = new Vector3();
+
+		const rotateStart = new Vector2();
+		const rotateEnd = new Vector2();
+		const rotateDelta = new Vector2();
+
+		const panStart = new Vector2();
+		const panEnd = new Vector2();
+		const panDelta = new Vector2();
+
+		const dollyStart = new Vector2();
+		const dollyEnd = new Vector2();
+		const dollyDelta = new Vector2();
+
+		const dollyDirection = new Vector3();
+		const mouse = new Vector2();
+		let performCursorZoom = false;
+
+		const pointers = [];
+		const pointerPositions = {};
+
+		let controlActive = false;
+
+		function getAutoRotationAngle( deltaTime ) {
+
+			if ( deltaTime !== null ) {
+
+				return ( 2 * Math.PI / 60 * scope.autoRotateSpeed ) * deltaTime;
+
+			} else {
+
+				return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+
+			}
+
+		}
+
+		function getZoomScale( delta ) {
+
+			const normalizedDelta = Math.abs( delta * 0.01 );
+			return Math.pow( 0.95, scope.zoomSpeed * normalizedDelta );
+
+		}
+
+		function rotateLeft( angle ) {
+
+			sphericalDelta.theta -= angle;
+
+		}
+
+		function rotateUp( angle ) {
+
+			sphericalDelta.phi -= angle;
+
+		}
+
+		const panLeft = function () {
+
+			const v = new Vector3();
+
+			return function panLeft( distance, objectMatrix ) {
+
+				v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
+				v.multiplyScalar( - distance );
+
+				panOffset.add( v );
+
+			};
+
+		}();
+
+		const panUp = function () {
+
+			const v = new Vector3();
+
+			return function panUp( distance, objectMatrix ) {
+
+				if ( scope.screenSpacePanning === true ) {
+
+					v.setFromMatrixColumn( objectMatrix, 1 );
+
+				} else {
+
+					v.setFromMatrixColumn( objectMatrix, 0 );
+					v.crossVectors( scope.object.up, v );
+
+				}
+
+				v.multiplyScalar( distance );
+
+				panOffset.add( v );
+
+			};
+
+		}();
+
+		// deltaX and deltaY are in pixels; right and down are positive
+		const pan = function () {
+
+			const offset = new Vector3();
+
+			return function pan( deltaX, deltaY ) {
+
+				const element = scope.domElement;
+
+				if ( scope.object.isPerspectiveCamera ) {
+
+					// perspective
+					const position = scope.object.position;
+					offset.copy( position ).sub( scope.target );
+					let targetDistance = offset.length();
+
+					// half of the fov is center to top of screen
+					targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
+
+					// we use only clientHeight here so aspect ratio does not distort speed
+					panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
+					panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
+
+				} else if ( scope.object.isOrthographicCamera ) {
+
+					// orthographic
+					panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
+					panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
+
+				} else {
+
+					// camera neither orthographic nor perspective
+					console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
+					scope.enablePan = false;
+
+				}
+
+			};
+
+		}();
+
+		function dollyOut( dollyScale ) {
+
+			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
+
+				scale /= dollyScale;
+
+			} else {
+
+				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
+				scope.enableZoom = false;
+
+			}
+
+		}
+
+		function dollyIn( dollyScale ) {
+
+			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
+
+				scale *= dollyScale;
+
+			} else {
+
+				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
+				scope.enableZoom = false;
+
+			}
+
+		}
+
+		function updateZoomParameters( x, y ) {
+
+			if ( ! scope.zoomToCursor ) {
+
+				return;
+
+			}
+
+			performCursorZoom = true;
+
+			const rect = scope.domElement.getBoundingClientRect();
+			const dx = x - rect.left;
+			const dy = y - rect.top;
+			const w = rect.width;
+			const h = rect.height;
+
+			mouse.x = ( dx / w ) * 2 - 1;
+			mouse.y = - ( dy / h ) * 2 + 1;
+
+			dollyDirection.set( mouse.x, mouse.y, 1 ).unproject( scope.object ).sub( scope.object.position ).normalize();
+
+		}
+
+		function clampDistance( dist ) {
+
+			return Math.max( scope.minDistance, Math.min( scope.maxDistance, dist ) );
+
+		}
+
+		//
+		// event callbacks - update the object state
+		//
+
+		function handleMouseDownRotate( event ) {
+
+			rotateStart.set( event.clientX, event.clientY );
+
+		}
+
+		function handleMouseDownDolly( event ) {
+
+			updateZoomParameters( event.clientX, event.clientX );
+			dollyStart.set( event.clientX, event.clientY );
+
+		}
+
+		function handleMouseDownPan( event ) {
+
+			panStart.set( event.clientX, event.clientY );
+
+		}
+
+		function handleMouseMoveRotate( event ) {
+
+			rotateEnd.set( event.clientX, event.clientY );
+
+			rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
+
+			const element = scope.domElement;
+
+			rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
+
+			rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
+
+			rotateStart.copy( rotateEnd );
+
+			scope.update();
+
+		}
+
+		function handleMouseMoveDolly( event ) {
+
+			dollyEnd.set( event.clientX, event.clientY );
+
+			dollyDelta.subVectors( dollyEnd, dollyStart );
+
+			if ( dollyDelta.y > 0 ) {
+
+				dollyOut( getZoomScale( dollyDelta.y ) );
+
+			} else if ( dollyDelta.y < 0 ) {
+
+				dollyIn( getZoomScale( dollyDelta.y ) );
+
+			}
+
+			dollyStart.copy( dollyEnd );
+
+			scope.update();
+
+		}
+
+		function handleMouseMovePan( event ) {
+
+			panEnd.set( event.clientX, event.clientY );
+
+			panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
+
+			pan( panDelta.x, panDelta.y );
+
+			panStart.copy( panEnd );
+
+			scope.update();
+
+		}
+
+		function handleMouseWheel( event ) {
+
+			updateZoomParameters( event.clientX, event.clientY );
+
+			if ( event.deltaY < 0 ) {
+
+				dollyIn( getZoomScale( event.deltaY ) );
+
+			} else if ( event.deltaY > 0 ) {
+
+				dollyOut( getZoomScale( event.deltaY ) );
+
+			}
+
+			scope.update();
+
+		}
+
+		function handleKeyDown( event ) {
+
+			let needsUpdate = false;
+
+			switch ( event.code ) {
+
+				case scope.keys.UP:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateUp( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( 0, scope.keyPanSpeed );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+				case scope.keys.BOTTOM:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateUp( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( 0, - scope.keyPanSpeed );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+				case scope.keys.LEFT:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateLeft( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( scope.keyPanSpeed, 0 );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+				case scope.keys.RIGHT:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateLeft( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( - scope.keyPanSpeed, 0 );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+			}
+
+			if ( needsUpdate ) {
+
+				// prevent the browser from scrolling on cursor keys
+				event.preventDefault();
+
+				scope.update();
+
+			}
+
+
+		}
+
+		function handleTouchStartRotate( event ) {
+
+			if ( pointers.length === 1 ) {
+
+				rotateStart.set( event.pageX, event.pageY );
+
+			} else {
+
+				const position = getSecondPointerPosition( event );
+
+				const x = 0.5 * ( event.pageX + position.x );
+				const y = 0.5 * ( event.pageY + position.y );
+
+				rotateStart.set( x, y );
+
+			}
+
+		}
+
+		function handleTouchStartPan( event ) {
+
+			if ( pointers.length === 1 ) {
+
+				panStart.set( event.pageX, event.pageY );
+
+			} else {
+
+				const position = getSecondPointerPosition( event );
+
+				const x = 0.5 * ( event.pageX + position.x );
+				const y = 0.5 * ( event.pageY + position.y );
+
+				panStart.set( x, y );
+
+			}
+
+		}
+
+		function handleTouchStartDolly( event ) {
+
+			const position = getSecondPointerPosition( event );
+
+			const dx = event.pageX - position.x;
+			const dy = event.pageY - position.y;
+
+			const distance = Math.sqrt( dx * dx + dy * dy );
+
+			dollyStart.set( 0, distance );
+
+		}
+
+		function handleTouchStartDollyPan( event ) {
+
+			if ( scope.enableZoom ) handleTouchStartDolly( event );
+
+			if ( scope.enablePan ) handleTouchStartPan( event );
+
+		}
+
+		function handleTouchStartDollyRotate( event ) {
+
+			if ( scope.enableZoom ) handleTouchStartDolly( event );
+
+			if ( scope.enableRotate ) handleTouchStartRotate( event );
+
+		}
+
+		function handleTouchMoveRotate( event ) {
+
+			if ( pointers.length == 1 ) {
+
+				rotateEnd.set( event.pageX, event.pageY );
+
+			} else {
+
+				const position = getSecondPointerPosition( event );
+
+				const x = 0.5 * ( event.pageX + position.x );
+				const y = 0.5 * ( event.pageY + position.y );
+
+				rotateEnd.set( x, y );
+
+			}
+
+			rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
+
+			const element = scope.domElement;
+
+			rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
+
+			rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
+
+			rotateStart.copy( rotateEnd );
+
+		}
+
+		function handleTouchMovePan( event ) {
+
+			if ( pointers.length === 1 ) {
+
+				panEnd.set( event.pageX, event.pageY );
+
+			} else {
+
+				const position = getSecondPointerPosition( event );
+
+				const x = 0.5 * ( event.pageX + position.x );
+				const y = 0.5 * ( event.pageY + position.y );
+
+				panEnd.set( x, y );
+
+			}
+
+			panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
+
+			pan( panDelta.x, panDelta.y );
+
+			panStart.copy( panEnd );
+
+		}
+
+		function handleTouchMoveDolly( event ) {
+
+			const position = getSecondPointerPosition( event );
+
+			const dx = event.pageX - position.x;
+			const dy = event.pageY - position.y;
+
+			const distance = Math.sqrt( dx * dx + dy * dy );
+
+			dollyEnd.set( 0, distance );
+
+			dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
+
+			dollyOut( dollyDelta.y );
+
+			dollyStart.copy( dollyEnd );
+
+			const centerX = ( event.pageX + position.x ) * 0.5;
+			const centerY = ( event.pageY + position.y ) * 0.5;
+
+			updateZoomParameters( centerX, centerY );
+
+		}
+
+		function handleTouchMoveDollyPan( event ) {
+
+			if ( scope.enableZoom ) handleTouchMoveDolly( event );
+
+			if ( scope.enablePan ) handleTouchMovePan( event );
+
+		}
+
+		function handleTouchMoveDollyRotate( event ) {
+
+			if ( scope.enableZoom ) handleTouchMoveDolly( event );
+
+			if ( scope.enableRotate ) handleTouchMoveRotate( event );
+
+		}
+
+		//
+		// event handlers - FSM: listen for events and reset state
+		//
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( pointers.length === 0 ) {
+
+				scope.domElement.setPointerCapture( event.pointerId );
+
+				scope.domElement.addEventListener( 'pointermove', onPointerMove );
+				scope.domElement.addEventListener( 'pointerup', onPointerUp );
+
+			}
+
+			//
+
+			addPointer( event );
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchStart( event );
+
+			} else {
+
+				onMouseDown( event );
+
+			}
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchMove( event );
+
+			} else {
+
+				onMouseMove( event );
+
+			}
+
+		}
+
+		function onPointerUp( event ) {
+
+			removePointer( event );
+
+			switch ( pointers.length ) {
+
+				case 0:
+
+					scope.domElement.releasePointerCapture( event.pointerId );
+
+					scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+					scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+					scope.dispatchEvent( _endEvent );
+
+					state = STATE.NONE;
+
+					break;
+
+				case 1:
+
+					const pointerId = pointers[ 0 ];
+					const position = pointerPositions[ pointerId ];
+
+					// minimal placeholder event - allows state correction on pointer-up
+					onTouchStart( { pointerId: pointerId, pageX: position.x, pageY: position.y } );
+
+					break;
+
+			}
+
+		}
+
+		function onMouseDown( event ) {
+
+			let mouseAction;
+
+			switch ( event.button ) {
+
+				case 0:
+
+					mouseAction = scope.mouseButtons.LEFT;
+					break;
+
+				case 1:
+
+					mouseAction = scope.mouseButtons.MIDDLE;
+					break;
+
+				case 2:
+
+					mouseAction = scope.mouseButtons.RIGHT;
+					break;
+
+				default:
+
+					mouseAction = - 1;
+
+			}
+
+			switch ( mouseAction ) {
+
+				case MOUSE.DOLLY:
+
+					if ( scope.enableZoom === false ) return;
+
+					handleMouseDownDolly( event );
+
+					state = STATE.DOLLY;
+
+					break;
+
+				case MOUSE.ROTATE:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						if ( scope.enablePan === false ) return;
+
+						handleMouseDownPan( event );
+
+						state = STATE.PAN;
+
+					} else {
+
+						if ( scope.enableRotate === false ) return;
+
+						handleMouseDownRotate( event );
+
+						state = STATE.ROTATE;
+
+					}
+
+					break;
+
+				case MOUSE.PAN:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						if ( scope.enableRotate === false ) return;
+
+						handleMouseDownRotate( event );
+
+						state = STATE.ROTATE;
+
+					} else {
+
+						if ( scope.enablePan === false ) return;
+
+						handleMouseDownPan( event );
+
+						state = STATE.PAN;
+
+					}
+
+					break;
+
+				default:
+
+					state = STATE.NONE;
+
+			}
+
+			if ( state !== STATE.NONE ) {
+
+				scope.dispatchEvent( _startEvent );
+
+			}
+
+		}
+
+		function onMouseMove( event ) {
+
+			switch ( state ) {
+
+				case STATE.ROTATE:
+
+					if ( scope.enableRotate === false ) return;
+
+					handleMouseMoveRotate( event );
+
+					break;
+
+				case STATE.DOLLY:
+
+					if ( scope.enableZoom === false ) return;
+
+					handleMouseMoveDolly( event );
+
+					break;
+
+				case STATE.PAN:
+
+					if ( scope.enablePan === false ) return;
+
+					handleMouseMovePan( event );
+
+					break;
+
+			}
+
+		}
+
+		function onMouseWheel( event ) {
+
+			if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
+
+			event.preventDefault();
+
+			scope.dispatchEvent( _startEvent );
+
+			handleMouseWheel( customWheelEvent( event ) );
+
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function customWheelEvent( event ) {
+
+			const mode = event.deltaMode;
+
+			// minimal wheel event altered to meet delta-zoom demand
+			const newEvent = {
+				clientX: event.clientX,
+				clientY: event.clientY,
+				deltaY: event.deltaY,
+			};
+
+			switch ( mode ) {
+
+				case 1: // LINE_MODE
+					newEvent.deltaY *= 16;
+					break;
+
+				case 2: // PAGE_MODE
+					newEvent.deltaY *= 100;
+					break;
+
+			}
+
+			// detect if event was triggered by pinching
+			if ( event.ctrlKey && ! controlActive ) {
+
+				newEvent.deltaY *= 10;
+
+			}
+
+			return newEvent;
+
+		}
+
+		function interceptControlDown( event ) {
+
+			if ( event.key === 'Control' ) {
+
+				controlActive = true;
+
+
+				const document = scope.domElement.getRootNode(); // offscreen canvas compatibility
+
+				document.addEventListener( 'keyup', interceptControlUp, { passive: true, capture: true } );
+
+			}
+
+		}
+
+		function interceptControlUp( event ) {
+
+			if ( event.key === 'Control' ) {
+
+				controlActive = false;
+
+
+				const document = scope.domElement.getRootNode(); // offscreen canvas compatibility
+
+				document.removeEventListener( 'keyup', interceptControlUp, { passive: true, capture: true } );
+
+			}
+
+		}
+
+		function onKeyDown( event ) {
+
+			if ( scope.enabled === false || scope.enablePan === false ) return;
+
+			handleKeyDown( event );
+
+		}
+
+		function onTouchStart( event ) {
+
+			trackPointer( event );
+
+			switch ( pointers.length ) {
+
+				case 1:
+
+					switch ( scope.touches.ONE ) {
+
+						case TOUCH.ROTATE:
+
+							if ( scope.enableRotate === false ) return;
+
+							handleTouchStartRotate( event );
+
+							state = STATE.TOUCH_ROTATE;
+
+							break;
+
+						case TOUCH.PAN:
+
+							if ( scope.enablePan === false ) return;
+
+							handleTouchStartPan( event );
+
+							state = STATE.TOUCH_PAN;
+
+							break;
+
+						default:
+
+							state = STATE.NONE;
+
+					}
+
+					break;
+
+				case 2:
+
+					switch ( scope.touches.TWO ) {
+
+						case TOUCH.DOLLY_PAN:
+
+							if ( scope.enableZoom === false && scope.enablePan === false ) return;
+
+							handleTouchStartDollyPan( event );
+
+							state = STATE.TOUCH_DOLLY_PAN;
+
+							break;
+
+						case TOUCH.DOLLY_ROTATE:
+
+							if ( scope.enableZoom === false && scope.enableRotate === false ) return;
+
+							handleTouchStartDollyRotate( event );
+
+							state = STATE.TOUCH_DOLLY_ROTATE;
+
+							break;
+
+						default:
+
+							state = STATE.NONE;
+
+					}
+
+					break;
+
+				default:
+
+					state = STATE.NONE;
+
+			}
+
+			if ( state !== STATE.NONE ) {
+
+				scope.dispatchEvent( _startEvent );
+
+			}
+
+		}
+
+		function onTouchMove( event ) {
+
+			trackPointer( event );
+
+			switch ( state ) {
+
+				case STATE.TOUCH_ROTATE:
+
+					if ( scope.enableRotate === false ) return;
+
+					handleTouchMoveRotate( event );
+
+					scope.update();
+
+					break;
+
+				case STATE.TOUCH_PAN:
+
+					if ( scope.enablePan === false ) return;
+
+					handleTouchMovePan( event );
+
+					scope.update();
+
+					break;
+
+				case STATE.TOUCH_DOLLY_PAN:
+
+					if ( scope.enableZoom === false && scope.enablePan === false ) return;
+
+					handleTouchMoveDollyPan( event );
+
+					scope.update();
+
+					break;
+
+				case STATE.TOUCH_DOLLY_ROTATE:
+
+					if ( scope.enableZoom === false && scope.enableRotate === false ) return;
+
+					handleTouchMoveDollyRotate( event );
+
+					scope.update();
+
+					break;
+
+				default:
+
+					state = STATE.NONE;
+
+			}
+
+		}
+
+		function onContextMenu( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			event.preventDefault();
+
+		}
+
+		function addPointer( event ) {
+
+			pointers.push( event.pointerId );
+
+		}
+
+		function removePointer( event ) {
+
+			delete pointerPositions[ event.pointerId ];
+
+			for ( let i = 0; i < pointers.length; i ++ ) {
+
+				if ( pointers[ i ] == event.pointerId ) {
+
+					pointers.splice( i, 1 );
+					return;
+
+				}
+
+			}
+
+		}
+
+		function trackPointer( event ) {
+
+			let position = pointerPositions[ event.pointerId ];
+
+			if ( position === undefined ) {
+
+				position = new Vector2();
+				pointerPositions[ event.pointerId ] = position;
+
+			}
+
+			position.set( event.pageX, event.pageY );
+
+		}
+
+		function getSecondPointerPosition( event ) {
+
+			const pointerId = ( event.pointerId === pointers[ 0 ] ) ? pointers[ 1 ] : pointers[ 0 ];
+
+			return pointerPositions[ pointerId ];
+
+		}
+
+		//
+
+		scope.domElement.addEventListener( 'contextmenu', onContextMenu );
+
+		scope.domElement.addEventListener( 'pointerdown', onPointerDown );
+		scope.domElement.addEventListener( 'pointercancel', onPointerUp );
+		scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+
+		const document = scope.domElement.getRootNode(); // offscreen canvas compatibility
+
+		document.addEventListener( 'keydown', interceptControlDown, { passive: true, capture: true } );
+
+		// force an update at start
+
+		this.update();
+
+	}
+
+}
+
+export { OrbitControls };

static/three-global.js

@@ -0,0 +1,2 @@
+import * as THREE from './three.module.min.js';
+window.THREE = THREE;