Grotti 2.2.0: Auth, API-Tokens, MCP und Doku-Trennung.

web/app.py

@@ -3,6 +3,7 @@
 import json
 import re
 import secrets
+import time
 import uuid
 from datetime import datetime
 from pathlib import Path
@@ -10,10 +11,11 @@ from urllib.parse import quote
 
 import markdown
 import psycopg
-from flask import Flask, abort, g, jsonify, render_template, request
+from flask import Flask, abort, g, jsonify, redirect, render_template, request, session, url_for
 from markupsafe import Markup
 from psycopg.rows import dict_row
 
+from grotti import auth as grotti_auth
 from grotti import config as grotti_config
 from grotti import eject, jobs, library, moonraker, notify, store
 from grotti.catalog import color_catalog
@@ -29,7 +31,6 @@ from grotti.watcher import StateWatcher
 ROOT = Path(__file__).resolve().parent
 TOOL_ROOT = ROOT.parent
 DOCS_DIR = TOOL_ROOT / "docs"
-CHANGELOG = TOOL_ROOT / "CHANGELOG.md"
 PROJECT_STATUS = {"idee", "bereit", "druckt", "fertig"}
 VERDICTS = {"", "gut", "ausschuss"}
 IDEA_STATUS = {"offen", "spaeter", "erledigt"}
@@ -47,8 +48,13 @@ def create_app(cfg):
         static_folder=str(ROOT / "static"),
     )
     app.config["GROTTI"] = cfg
+    app.config["SECRET_KEY"] = cfg.get("secret_key") or secrets.token_hex(32)
     app.config["TEMPLATES_AUTO_RELOAD"] = True
     app.config["MAX_CONTENT_LENGTH"] = 256 * 1024 * 1024
+    app.config["SESSION_COOKIE_HTTPONLY"] = True
+    app.config["SESSION_COOKIE_SAMESITE"] = "Lax"
+    if cfg.get("fqdn", "").startswith("https://"):
+        app.config["SESSION_COOKIE_SECURE"] = True
     app.json.ensure_ascii = False
     app.extensions["send_queue"] = SendQueue(cfg["database_url"], cfg)
     watcher = StateWatcher(cfg["database_url"], cfg)
@@ -58,19 +64,167 @@ def create_app(cfg):
     watcher.start()
     dispatcher.start()
 
-    @app.before_request
-    def check_token():
-        token = cfg["token"]
-        if not token or not request.path.startswith("/api/"):
+    PUBLIC_PATHS = {
+        "/login",
+        "/setup",
+        "/api/v1/auth/status",
+        "/api/v1/auth/login",
+        "/api/v1/auth/setup",
+        "/api/v1/version",
+    }
+    ADMIN_API_PREFIXES = (
+        "/api/v1/users",
+        "/api/v1/einstellungen",
+    )
+    ADMIN_API_EXACT = {
+        "/api/v1/telegram/test",
+    }
+    ADMIN_METHODS_ON = {
+        # Drucker anlegen/ändern/löschen nur Admin
+        ("POST", "/api/v1/drucker"),
+    }
+
+    def conn():
+        if "db" not in g:
+            g.db = psycopg.connect(cfg["database_url"], row_factory=dict_row)
+        return g.db
+
+    def ensure_csrf():
+        if not session.get("csrf"):
+            session["csrf"] = grotti_auth.new_csrf()
+        return session["csrf"]
+
+    def auth_user():
+        return getattr(g, "user", None)
+
+    def require_role(need):
+        user = auth_user()
+        if not user or not grotti_auth.role_at_least(user.get("role"), need):
+            raise GrottiError("Keine Berechtigung.", "forbidden", 403)
+        return user
+
+    def resolve_bearer(presented):
+        legacy = cfg.get("token") or ""
+        if legacy and secrets.compare_digest(presented, legacy):
+            return {
+                "id": None,
+                "username": "legacy-token",
+                "role": "admin",
+                "auth": "legacy",
+            }
+        if not presented.startswith(grotti_auth.TOKEN_PREFIX):
             return None
+        row = store.get_api_token_by_hash(conn(), grotti_auth.hash_token(presented))
+        if not row or row.get("revoked_at") or not row.get("user_active"):
+            return None
+        if row.get("expires_at") and row["expires_at"].timestamp() < time.time():
+            return None
+        store.touch_api_token(conn(), row["id"])
+        return {
+            "id": row["user_id"],
+            "username": row["username"],
+            "role": row["role"],
+            "auth": "token",
+            "token_id": row["id"],
+        }
+
+    def resolve_session_user():
+        uid = session.get("user_id")
+        if not uid:
+            return None
+        row = store.get_user(conn(), uid)
+        if not row or not row.get("active"):
+            session.clear()
+            return None
+        return {
+            "id": row["id"],
+            "username": row["username"],
+            "role": row["role"],
+            "auth": "session",
+        }
+
+    def wants_json():
+        if request.path.startswith("/api/"):
+            return True
+        accept = request.accept_mimetypes
+        return accept.best == "application/json"
+
+    @app.before_request
+    def check_auth():
+        g.user = None
+        path = request.path
+        if path.startswith("/static/"):
+            return None
+        if path in PUBLIC_PATHS:
+            return None
+
+        users_exist = store.user_count(conn()) > 0
+        if not users_exist:
+            if path.startswith("/api/") and path != "/api/v1/auth/setup":
+                if path == "/api/v1/auth/status":
+                    return None
+                return jsonify({
+                    "error": "Zuerst Admin anlegen.",
+                    "code": "setup",
+                    "setup": True,
+                }), 503
+            if path != "/setup":
+                return redirect(url_for("setup_page"))
+            return None
+
         presented = ""
         header = request.headers.get("Authorization", "")
         if header.startswith("Bearer "):
-            presented = header[7:]
-        elif request.method == "GET":
-            presented = request.args.get("token", "")
-        if not presented or not secrets.compare_digest(presented, token):
-            return jsonify({"error": "Token fehlt oder stimmt nicht.", "code": "token"}), 401
+            presented = header[7:].strip()
+        elif request.method == "GET" and request.path.startswith("/api/"):
+            presented = (request.args.get("token") or "").strip()
+
+        user = None
+        if presented:
+            user = resolve_bearer(presented)
+            if not user:
+                return jsonify({"error": "Token fehlt oder stimmt nicht.", "code": "token"}), 401
+        else:
+            user = resolve_session_user()
+
+        if not user:
+            if wants_json() or path.startswith("/api/"):
+                return jsonify({"error": "Anmeldung nötig.", "code": "auth"}), 401
+            return redirect(url_for("login_page", next=path))
+
+        g.user = user
+        ensure_csrf()
+
+        # CSRF für Cookie-Sessions bei mutierenden API-Calls
+        if (
+            user.get("auth") == "session"
+            and path.startswith("/api/")
+            and request.method in ("POST", "PATCH", "PUT", "DELETE")
+        ):
+            sent = request.headers.get("X-CSRF-Token") or ""
+            expected = session.get("csrf") or ""
+            if not expected or not secrets.compare_digest(sent, expected):
+                return jsonify({"error": "CSRF-Token fehlt oder ungültig.", "code": "csrf"}), 403
+
+        need_admin = False
+        if path.startswith(ADMIN_API_PREFIXES) or path in ADMIN_API_EXACT:
+            if path == "/api/v1/einstellungen" and request.method == "GET":
+                need_admin = False
+            elif path == "/api/v1/einstellungen" and request.method == "PATCH":
+                # Operator darf nur auto_queue schalten
+                payload = request.get_json(silent=True) or {}
+                keys = {k for k, v in payload.items() if v is not None}
+                need_admin = keys - {"auto_queue"} != set()
+            elif path.startswith("/api/v1/users"):
+                need_admin = True
+            elif request.method != "GET":
+                need_admin = True
+        if (request.method, path) in ADMIN_METHODS_ON:
+            need_admin = True
+        if path.startswith("/api/v1/drucker/id/") and request.method in ("PATCH", "DELETE"):
+            need_admin = True
+        if need_admin and not grotti_auth.role_at_least(user.get("role"), "admin"):
+            return jsonify({"error": "Nur für Admins.", "code": "forbidden"}), 403
         return None
 
     @app.teardown_appcontext
@@ -88,16 +242,11 @@ def create_app(cfg):
 
     @app.errorhandler(GrottiError)
     def grotti_error(err):
-        conn = g.get("db")
-        if conn:
-            conn.rollback()
+        db = g.get("db")
+        if db:
+            db.rollback()
         return jsonify({"error": err.message, "code": err.code}), err.status
 
-    def conn():
-        if "db" not in g:
-            g.db = psycopg.connect(cfg["database_url"], row_factory=dict_row)
-        return g.db
-
     def body():
         data = request.get_json(silent=True)
         if not isinstance(data, dict):
@@ -124,16 +273,250 @@ def create_app(cfg):
         return host
 
     @app.context_processor
-    def inject_version():
-        return {"version": __version__}
+    def inject_globals():
+        user = auth_user()
+        return {
+            "version": __version__,
+            "csrf": session.get("csrf") or "",
+            "current_user": user,
+        }
 
     def page(name, title):
-        return render_template(name, page=name.split(".")[0], title=title, token=cfg["token"])
+        return render_template(
+            name,
+            page=name.split(".")[0],
+            title=title,
+            token="",
+        )
+
+    def audit(kind, message, host=""):
+        user = auth_user()
+        who = (user or {}).get("username") or "?"
+        store.add_event(conn(), host, "", kind, "%s · %s" % (who, message))
+
+    @app.get("/login")
+    def login_page():
+        if store.user_count(conn()) == 0:
+            return redirect(url_for("setup_page"))
+        if resolve_session_user():
+            return redirect("/")
+        ensure_csrf()
+        return render_template("login.html", title="Anmelden", csrf=session.get("csrf") or "")
+
+    @app.get("/setup")
+    def setup_page():
+        if store.user_count(conn()) > 0:
+            return redirect(url_for("login_page"))
+        ensure_csrf()
+        return render_template("setup.html", title="Ersten Admin anlegen", csrf=session.get("csrf") or "")
+
+    @app.get("/api/v1/auth/status")
+    def auth_status():
+        count = store.user_count(conn())
+        user = resolve_session_user()
+        return jsonify({
+            "setup_required": count == 0,
+            "authenticated": bool(user or auth_user()),
+            "user": grotti_auth.public_user(user) if user else None,
+            "oauth_enabled": bool((cfg.get("oauth") or {}).get("enabled")),
+            "legacy_token_set": bool(cfg.get("token")),
+        })
+
+    @app.post("/api/v1/auth/setup")
+    def auth_setup():
+        if store.user_count(conn()) > 0:
+            raise GrottiError("Setup ist schon erledigt.", "setup", 409)
+        data = body()
+        username = grotti_auth.validate_username(data.get("username") or "")
+        password = grotti_auth.validate_password(data.get("password") or "")
+        row = store.create_user(conn(), username, grotti_auth.hash_password(password), "admin")
+        store.touch_user_login(conn(), row["id"])
+        session.clear()
+        session["user_id"] = row["id"]
+        session["csrf"] = grotti_auth.new_csrf()
+        store.add_event(conn(), "", "", "auth", "Admin %s angelegt" % username)
+        return jsonify({"user": grotti_auth.public_user(row), "csrf": session["csrf"]}), 201
+
+    @app.post("/api/v1/auth/login")
+    def auth_login():
+        if store.user_count(conn()) == 0:
+            raise GrottiError("Zuerst Admin anlegen.", "setup", 503)
+        key = request.remote_addr or "unknown"
+        if not grotti_auth.login_rate_ok(key):
+            raise GrottiError("Zu viele Versuche. Bitte warten.", "rate", 429)
+        data = body()
+        username = (data.get("username") or "").strip()
+        password = data.get("password") or ""
+        row = store.get_user_by_name(conn(), username)
+        if not row or not row.get("active") or not grotti_auth.verify_password(row["password_hash"], password):
+            grotti_auth.login_rate_hit(key)
+            raise GrottiError("Benutzer oder Passwort falsch.", "auth", 401)
+        store.touch_user_login(conn(), row["id"])
+        session.clear()
+        session["user_id"] = row["id"]
+        session["csrf"] = grotti_auth.new_csrf()
+        store.add_event(conn(), "", "", "auth", "Login %s" % row["username"])
+        return jsonify({"user": grotti_auth.public_user(row), "csrf": session["csrf"]})
+
+    @app.post("/api/v1/auth/logout")
+    def auth_logout():
+        session.clear()
+        return jsonify({"ok": True})
+
+    @app.get("/api/v1/me")
+    def me():
+        user = require_role("operator")
+        return jsonify({"user": {
+            "id": user["id"],
+            "username": user["username"],
+            "role": user["role"],
+            "auth": user.get("auth"),
+        }, "csrf": ensure_csrf()})
+
+    @app.get("/api/v1/users")
+    def users_list():
+        require_role("admin")
+        return jsonify([grotti_auth.public_user(r) for r in store.list_users(conn())])
+
+    @app.post("/api/v1/users")
+    def users_create():
+        require_role("admin")
+        data = body()
+        username = grotti_auth.validate_username(data.get("username") or "")
+        password = grotti_auth.validate_password(data.get("password") or "")
+        role = grotti_auth.normalize_role(data.get("role") or "operator")
+        if store.get_user_by_name(conn(), username):
+            raise GrottiError("Benutzer gibt es schon.", "user", 409)
+        row = store.create_user(conn(), username, grotti_auth.hash_password(password), role)
+        audit("auth", "Benutzer %s (%s) angelegt" % (username, role))
+        return jsonify(grotti_auth.public_user(row)), 201
+
+    @app.patch("/api/v1/users/<int:user_id>")
+    def users_patch(user_id):
+        actor = require_role("admin")
+        data = body()
+        row = store.get_user(conn(), user_id)
+        if not row:
+            raise GrottiError("Benutzer fehlt.", "user", 404)
+        password_hash = None
+        if data.get("password"):
+            password_hash = grotti_auth.hash_password(grotti_auth.validate_password(data["password"]))
+        role = grotti_auth.normalize_role(data["role"]) if "role" in data else None
+        active = data.get("active") if "active" in data else None
+        if active is False and row["id"] == actor.get("id"):
+            raise GrottiError("Eigenes Konto nicht deaktivieren.", "user")
+        if role == "operator" and row["role"] == "admin" and row["id"] == actor.get("id"):
+            admins = [u for u in store.list_users(conn()) if u["role"] == "admin" and u["active"]]
+            if len(admins) <= 1:
+                raise GrottiError("Letzter Admin bleibt Admin.", "user")
+        updated = store.update_user(conn(), user_id, password_hash=password_hash, role=role, active=active)
+        audit("auth", "Benutzer %s geändert" % row["username"])
+        return jsonify(grotti_auth.public_user(updated))
+
+    @app.delete("/api/v1/users/<int:user_id>")
+    def users_delete(user_id):
+        actor = require_role("admin")
+        row = store.get_user(conn(), user_id)
+        if not row:
+            raise GrottiError("Benutzer fehlt.", "user", 404)
+        if row["id"] == actor.get("id"):
+            raise GrottiError("Eigenes Konto nicht löschen.", "user")
+        if row["role"] == "admin":
+            admins = [u for u in store.list_users(conn()) if u["role"] == "admin" and u["active"]]
+            if len(admins) <= 1:
+                raise GrottiError("Letzter Admin bleibt.", "user")
+        store.delete_user(conn(), user_id)
+        audit("auth", "Benutzer %s gelöscht" % row["username"])
+        return "", 204
+
+    @app.get("/api/v1/tokens")
+    def tokens_list():
+        user = require_role("operator")
+        if user.get("role") == "admin" and request.args.get("all") == "1":
+            rows = store.list_api_tokens(conn(), user_id=None)
+        else:
+            if not user.get("id"):
+                return jsonify([])
+            rows = store.list_api_tokens(conn(), user_id=user["id"])
+        out = []
+        for row in rows:
+            item = grotti_auth.public_token(row)
+            item["username"] = row.get("username")
+            out.append(item)
+        return jsonify(out)
+
+    @app.post("/api/v1/tokens")
+    def tokens_create():
+        user = require_role("operator")
+        if not user.get("id"):
+            raise GrottiError("Legacy-Token: bitte Benutzer-Token anlegen.", "token")
+        data = body()
+        name = (data.get("name") or "Token").strip()[:80]
+        role = grotti_auth.clamp_token_role(user["role"], data.get("role"))
+        raw = grotti_auth.new_api_token()
+        row = store.create_api_token(
+            conn(),
+            user["id"],
+            name,
+            grotti_auth.hash_token(raw),
+            grotti_auth.token_prefix(raw),
+            role,
+        )
+        audit("auth", "API-Token „%s“ erzeugt" % name)
+        item = grotti_auth.public_token(row)
+        item["token"] = raw
+        return jsonify(item), 201
+
+    @app.delete("/api/v1/tokens/<int:token_id>")
+    def tokens_revoke(token_id):
+        user = require_role("operator")
+        if user.get("role") == "admin":
+            row = store.revoke_api_token(conn(), token_id, user_id=None)
+        else:
+            row = store.revoke_api_token(conn(), token_id, user_id=user.get("id"))
+        if not row:
+            raise GrottiError("Token fehlt.", "token", 404)
+        audit("auth", "API-Token #%s widerrufen" % token_id)
+        return jsonify(grotti_auth.public_token(row))
 
     def doc_names():
+        """Nur Anleitung-*.md — Technik liegt unter docs/internal/ (nicht in der App)."""
         if not DOCS_DIR.is_dir():
             return []
-        return sorted(p.stem for p in DOCS_DIR.glob("*.md"))
+        return sorted(p.stem for p in DOCS_DIR.glob("Anleitung-*.md"))
+
+    ANLEITUNG_ORDER = (
+        "Anleitung-Einrichtung",
+        "Anleitung-Oberflaeche",
+        "Anleitung-Wand",
+        "Anleitung-Dateien",
+        "Anleitung-ACE",
+        "Anleitung-Warteschlange",
+        "Anleitung-Material",
+        "Anleitung-Einstellungen",
+        "Anleitung-Stoerungen",
+    )
+
+    def anleitung_list(names=None):
+        names = names if names is not None else doc_names()
+        anleitung_set = set(names)
+        ordered = [n for n in ANLEITUNG_ORDER if n in anleitung_set]
+        ordered += sorted(anleitung_set - set(ordered))
+        return ordered
+
+    def anleitung_title(name):
+        labels = {
+            "Anleitung-Einrichtung": "Einrichtung",
+            "Anleitung-Oberflaeche": "Oberfläche",
+            "Anleitung-Wand": "Druckerwand",
+            "Anleitung-Dateien": "Dateien senden",
+            "Anleitung-ACE": "ACE und Spulen",
+            "Anleitung-Warteschlange": "Warteschlange",
+            "Anleitung-Material": "Material und mehr",
+            "Anleitung-Einstellungen": "Einstellungen",
+            "Anleitung-Stoerungen": "Störungen",
+        }
+        return labels.get(name, name.replace("Anleitung-", "").replace("-", " "))
 
     def render_markdown(path):
         text = path.read_text(encoding="utf-8")
@@ -180,7 +563,7 @@ def create_app(cfg):
             "etikett.html",
             page="etikett",
             title="Etikett %s" % spool["chargen_nr"],
-            token=cfg["token"],
+            token="",
             spool=spool,
             qr_url=qr_url,
         )
@@ -203,37 +586,42 @@ def create_app(cfg):
 
     @app.get("/doku")
     def doku():
+        names = doc_names()
+        anleitung = anleitung_list(names)
         return render_template(
             "doku.html",
             page="doku",
             title="Doku",
-            token=cfg["token"],
-            docs=doc_names(),
+            token="",
+            docs=names,
+            anleitung=anleitung,
+            anleitung_title=anleitung_title,
         )
 
     @app.get("/doku/<name>")
     def doku_page(name):
-        if name == "changelog":
-            path, title = CHANGELOG, "Changelog"
-        elif name in doc_names():
-            path, title = DOCS_DIR / ("%s.md" % name), name.replace("-", " ")
-        else:
+        names = doc_names()
+        if name not in names:
             abort(404)
+        path = DOCS_DIR / ("%s.md" % name)
         if not path.is_file():
             abort(404)
+        anleitung = anleitung_list(names)
         return render_template(
             "doku_page.html",
             page="doku",
-            title=title,
-            token=cfg["token"],
+            title=anleitung_title(name),
+            token="",
             content=render_markdown(path),
-            docs=doc_names(),
+            docs=names,
+            anleitung=anleitung,
+            anleitung_title=anleitung_title,
             current=name,
         )
 
     @app.get("/api/v1/version")
     def version_info():
-        return jsonify({"version": __version__, "changelog": "/doku/changelog"})
+        return jsonify({"version": __version__})
 
     @app.get("/api/v1/einstellungen")
     def settings():
@@ -262,7 +650,7 @@ def create_app(cfg):
         return jsonify({"ok": True})
 
     @app.get("/api/v1/drucker")
-    @app.get("/api/drucker")
+    @app.get("/api/drucker")  # veraltet — Alias zu /api/v1/drucker
     def printers():
         rows = store.list_printers(conn())
         clears = store.bed_clear_map(conn())
@@ -767,6 +1155,8 @@ def create_app(cfg):
         data = body()
         if isinstance(data.get("steps"), list) and data.get("steps"):
             return jsonify(enqueue_ablauf_payload(data)), 202
+        if not bool(data.get("confirm")):
+            raise GrottiError("Bestätigung fehlt.", "bestaetigung")
         try:
             file_id = int(data.get("file_id"))
         except (TypeError, ValueError) as exc:

web/static/api.js

@@ -1,4 +1,5 @@
-const TOKEN = document.querySelector('meta[name="token"]')?.content || "";
+const TOKEN = ""; // Legacy: Auth über Session-Cookie oder Bearer von außen
+const CSRF = document.querySelector('meta[name="csrf"]')?.content || "";
 
 const STATE_LABELS = {
   printing: "druckt", paused: "pausiert", complete: "fertig", standby: "bereit",
@@ -17,17 +18,29 @@ function escapeHtml(value) {
 async function api(path, options = {}) {
   const headers = new Headers(options.headers || {});
   if (TOKEN) headers.set("Authorization", "Bearer " + TOKEN);
+  const method = (options.method || "GET").toUpperCase();
+  if (CSRF && method !== "GET" && method !== "HEAD") {
+    headers.set("X-CSRF-Token", CSRF);
+  }
   let body = options.body;
   if (options.json !== undefined) {
     headers.set("Content-Type", "application/json");
     body = JSON.stringify(options.json);
   }
   const response = await fetch("/api/v1" + path, {
-    method: options.method || "GET",
+    method,
     headers,
     body,
     cache: "no-store",
+    credentials: "same-origin",
   });
+  if (response.status === 401) {
+    const here = location.pathname + location.search;
+    if (!here.startsWith("/login") && !here.startsWith("/setup")) {
+      location.href = "/login?next=" + encodeURIComponent(here);
+    }
+    throw new Error("Anmeldung nötig.");
+  }
   if (!response.ok) {
     let message = response.statusText;
     try {
@@ -45,8 +58,8 @@ async function api(path, options = {}) {
 }
 
 function withToken(url) {
-  if (!url || !TOKEN) return url;
-  return url + (url.includes("?") ? "&" : "?") + "token=" + encodeURIComponent(TOKEN);
+  // Session-Cookie reicht für same-origin Kameras; kein Token in der URL.
+  return url;
 }
 
 function euro(value) {
@@ -103,6 +116,13 @@ function chipHtml(state, label, small) {
   return `<span class="chip ${escapeHtml(state || "")}${small ? " sm" : ""}">${escapeHtml(text)}</span>`;
 }
 
+function shownState(printer) {
+  const state = (printer && printer.state) || "offline";
+  const hot = ((printer && printer.nozzle_target) || 0) > 40 || ((printer && printer.bed_target) || 0) > 30;
+  if ((state === "standby" || state === "complete") && hot) return "heating";
+  return state;
+}
+
 function stepsHtml(labels, index, compact) {
   if (!labels || !labels.length) return "";
   const parts = labels.map((label, i) => {

web/static/grotti.css

@@ -111,20 +111,21 @@ summary:focus:not(:focus-visible) { outline: none; }
   flex: 1;
   min-width: 0;
 }
+.brand-mark {
+  flex: none;
+  width: 1.55rem;
+  height: 1.55rem;
+  border-radius: 99px;
+  object-fit: contain;
+  display: block;
+}
+.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .nav-toggle {
   flex: none;
   width: 2.5rem;
   height: 2.5rem;
   min-width: 2.5rem;
 }
-.brand::before {
-  content: "";
-  width: 0.65rem;
-  height: 0.65rem;
-  border-radius: 99px;
-  background: var(--accent);
-  box-shadow: 0 0 0 4px var(--accent-soft);
-}
 .nav-main, .nav-secondary { display: flex; flex-direction: column; gap: 0.1rem; }
 .nav-main a, .nav-secondary a {
   color: var(--muted);
@@ -183,10 +184,14 @@ html.nav-collapsed .brand,
 body.nav-collapsed .brand {
   padding: 0.2rem;
   justify-content: center;
-  font-size: 0;
 }
-html.nav-collapsed .brand::before,
-body.nav-collapsed .brand::before { margin: 0; }
+html.nav-collapsed .brand-name,
+body.nav-collapsed .brand-name { display: none; }
+html.nav-collapsed .brand-mark,
+body.nav-collapsed .brand-mark {
+  width: 1.75rem;
+  height: 1.75rem;
+}
 html.nav-collapsed .brand-row,
 body.nav-collapsed .brand-row { flex-direction: column; padding-bottom: 0.35rem; }
 html.nav-collapsed .nav-toggle,
@@ -803,6 +808,11 @@ article.printer {
   font-weight: 650;
   border-bottom: 1px solid var(--line);
 }
+.camera-tile .cam-stage {
+  position: relative;
+  min-height: 140px;
+  background: var(--card-2);
+}
 .camera-tile img {
   display: block;
   width: 100%;
@@ -810,16 +820,22 @@ article.printer {
   object-fit: contain;
   background: var(--card-2);
 }
-.camera-tile img.broken { min-height: 120px; opacity: 0.35; }
-.cam-url {
-  display: block;
-  padding: 0.4rem 0.75rem 0.6rem;
-  font-size: 0.72rem;
-  color: var(--faint);
-  word-break: break-all;
-  text-decoration: none;
+.camera-tile .cam-empty {
+  margin: 0;
+  min-height: 140px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: 0.35rem;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+.camera-tile .cam-empty .ico { width: 1.6rem; height: 1.6rem; opacity: 0.55; }
+.camera-tile .cam-open {
+  display: inline-block;
+  margin: 0.45rem 0.75rem 0.65rem;
+  font-size: 0.82rem;
 }
-.cam-url:hover { color: var(--accent); }
 
 .card {
   background: var(--card);
@@ -937,6 +953,60 @@ tr.pick:hover td { background: rgba(255, 255, 255, 0.04); }
 tr.on td { background: var(--accent-soft); }
 td select { width: auto; min-width: 8.5rem; padding: 0.3rem 0.45rem; min-height: 1.9rem; border-radius: 7px; }
 .thumb { width: 64px; height: 64px; object-fit: contain; background: var(--card-2); border-radius: 12px; border: 1px solid var(--line); }
+.auth-body {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 1.5rem;
+  background:
+    radial-gradient(ellipse at 20% 0%, rgba(61, 206, 124, 0.12), transparent 45%),
+    var(--bg);
+}
+.auth-card {
+  width: min(22rem, 100%);
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 1.4rem 1.35rem 1.5rem;
+}
+.auth-card h1 { margin: 0 0 0.35rem; font-size: 1.45rem; }
+.auth-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+.auth-brand img {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 99px;
+  object-fit: contain;
+}
+.auth-quote {
+  margin: 0.55rem 0 0;
+  padding: 0;
+  border: 0;
+}
+.auth-quote blockquote {
+  margin: 0;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  color: var(--muted);
+  font-style: italic;
+}
+.auth-quote figcaption {
+  margin-top: 0.35rem;
+  font-size: 0.7rem;
+  color: var(--faint);
+  font-style: normal;
+}
+.auth-card .stack { display: grid; gap: 0.75rem; margin-top: 1rem; }
+.side-user {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.35rem;
+}
 .empty { color: var(--muted); padding: 1rem 0.3rem; }
 .empty-state {
   text-align: center;
@@ -2092,6 +2162,17 @@ label.button:hover { background: rgba(255, 255, 255, 0.04); }
 .prose table { margin: 0.8rem 0; font-size: var(--t-sm); }
 .prose blockquote { margin: 0.8rem 0; padding: 0.4rem 0.9rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
 .prose .lede { font-size: 1.05rem; color: var(--ink); }
+.prose img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 1rem 0;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--card-2);
+}
+.prose .doc-chapters { columns: 2; column-gap: 1.5rem; }
+.prose .doc-chapters li { break-inside: avoid; }
 .flow-diagram { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.8rem 0 1rem; }
 .flow-diagram .step { font-size: var(--t-xs); padding: 0.3rem 0.65rem; }
 .terms { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1rem; margin: 0.6rem 0; }

web/static/qrcode.min.js

@@ -0,0 +1,7 @@
+/**
+ * Skipped minification because the original files appears to be already minified.
+ * Original file: /npm/qrcode@1.5.1/build/qrcode.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+var QRCode=function(t){"use strict";var r,e=function(){return"function"==typeof Promise&&Promise.prototype&&Promise.prototype.then},n=[0,26,44,70,100,134,172,196,242,292,346,404,466,532,581,655,733,815,901,991,1085,1156,1258,1364,1474,1588,1706,1828,1921,2051,2185,2323,2465,2611,2761,2876,3034,3196,3362,3532,3706],o=function(t){if(!t)throw new Error('"version" cannot be null or undefined');if(t<1||t>40)throw new Error('"version" should be in range from 1 to 40');return 4*t+17},a=function(t){return n[t]},i=function(t){for(var r=0;0!==t;)r++,t>>>=1;return r},u=function(t){if("function"!=typeof t)throw new Error('"toSJISFunc" is not a valid function.');r=t},s=function(){return void 0!==r},f=function(t){return r(t)};function h(t,r){return t(r={exports:{}},r.exports),r.exports}var c=h((function(t,r){r.L={bit:1},r.M={bit:0},r.Q={bit:3},r.H={bit:2},r.isValid=function(t){return t&&void 0!==t.bit&&t.bit>=0&&t.bit<4},r.from=function(t,e){if(r.isValid(t))return t;try{return function(t){if("string"!=typeof t)throw new Error("Param is not a string");switch(t.toLowerCase()){case"l":case"low":return r.L;case"m":case"medium":return r.M;case"q":case"quartile":return r.Q;case"h":case"high":return r.H;default:throw new Error("Unknown EC Level: "+t)}}(t)}catch(t){return e}}}));function g(){this.buffer=[],this.length=0}c.L,c.M,c.Q,c.H,c.isValid,g.prototype={get:function(t){var r=Math.floor(t/8);return 1==(this.buffer[r]>>>7-t%8&1)},put:function(t,r){for(var e=0;e<r;e++)this.putBit(1==(t>>>r-e-1&1))},getLengthInBits:function(){return this.length},putBit:function(t){var r=Math.floor(this.length/8);this.buffer.length<=r&&this.buffer.push(0),t&&(this.buffer[r]|=128>>>this.length%8),this.length++}};var d=g;function l(t){if(!t||t<1)throw new Error("BitMatrix size must be defined and greater than 0");this.size=t,this.data=new Uint8Array(t*t),this.reservedBit=new Uint8Array(t*t)}l.prototype.set=function(t,r,e,n){var o=t*this.size+r;this.data[o]=e,n&&(this.reservedBit[o]=!0)},l.prototype.get=function(t,r){return this.data[t*this.size+r]},l.prototype.xor=function(t,r,e){this.data[t*this.size+r]^=e},l.prototype.isReserved=function(t,r){return this.reservedBit[t*this.size+r]};var v=l,p=h((function(t,r){var e=o;r.getRowColCoords=function(t){if(1===t)return[];for(var r=Math.floor(t/7)+2,n=e(t),o=145===n?26:2*Math.ceil((n-13)/(2*r-2)),a=[n-7],i=1;i<r-1;i++)a[i]=a[i-1]-o;return a.push(6),a.reverse()},r.getPositions=function(t){for(var e=[],n=r.getRowColCoords(t),o=n.length,a=0;a<o;a++)for(var i=0;i<o;i++)0===a&&0===i||0===a&&i===o-1||a===o-1&&0===i||e.push([n[a],n[i]]);return e}}));p.getRowColCoords,p.getPositions;var w=o,m=function(t){var r=w(t);return[[0,0],[r-7,0],[0,r-7]]},E=h((function(t,r){r.Patterns={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7};var e=3,n=3,o=40,a=10;function i(t,e,n){switch(t){case r.Patterns.PATTERN000:return(e+n)%2==0;case r.Patterns.PATTERN001:return e%2==0;case r.Patterns.PATTERN010:return n%3==0;case r.Patterns.PATTERN011:return(e+n)%3==0;case r.Patterns.PATTERN100:return(Math.floor(e/2)+Math.floor(n/3))%2==0;case r.Patterns.PATTERN101:return e*n%2+e*n%3==0;case r.Patterns.PATTERN110:return(e*n%2+e*n%3)%2==0;case r.Patterns.PATTERN111:return(e*n%3+(e+n)%2)%2==0;default:throw new Error("bad maskPattern:"+t)}}r.isValid=function(t){return null!=t&&""!==t&&!isNaN(t)&&t>=0&&t<=7},r.from=function(t){return r.isValid(t)?parseInt(t,10):void 0},r.getPenaltyN1=function(t){for(var r=t.size,n=0,o=0,a=0,i=null,u=null,s=0;s<r;s++){o=a=0,i=u=null;for(var f=0;f<r;f++){var h=t.get(s,f);h===i?o++:(o>=5&&(n+=e+(o-5)),i=h,o=1),(h=t.get(f,s))===u?a++:(a>=5&&(n+=e+(a-5)),u=h,a=1)}o>=5&&(n+=e+(o-5)),a>=5&&(n+=e+(a-5))}return n},r.getPenaltyN2=function(t){for(var r=t.size,e=0,o=0;o<r-1;o++)for(var a=0;a<r-1;a++){var i=t.get(o,a)+t.get(o,a+1)+t.get(o+1,a)+t.get(o+1,a+1);4!==i&&0!==i||e++}return e*n},r.getPenaltyN3=function(t){for(var r=t.size,e=0,n=0,a=0,i=0;i<r;i++){n=a=0;for(var u=0;u<r;u++)n=n<<1&2047|t.get(i,u),u>=10&&(1488===n||93===n)&&e++,a=a<<1&2047|t.get(u,i),u>=10&&(1488===a||93===a)&&e++}return e*o},r.getPenaltyN4=function(t){for(var r=0,e=t.data.length,n=0;n<e;n++)r+=t.data[n];return Math.abs(Math.ceil(100*r/e/5)-10)*a},r.applyMask=function(t,r){for(var e=r.size,n=0;n<e;n++)for(var o=0;o<e;o++)r.isReserved(o,n)||r.xor(o,n,i(t,o,n))},r.getBestMask=function(t,e){for(var n=Object.keys(r.Patterns).length,o=0,a=1/0,i=0;i<n;i++){e(i),r.applyMask(i,t);var u=r.getPenaltyN1(t)+r.getPenaltyN2(t)+r.getPenaltyN3(t)+r.getPenaltyN4(t);r.applyMask(i,t),u<a&&(a=u,o=i)}return o}}));E.Patterns,E.isValid,E.getPenaltyN1,E.getPenaltyN2,E.getPenaltyN3,E.getPenaltyN4,E.applyMask,E.getBestMask;var y=[1,1,1,1,1,1,1,1,1,1,2,2,1,2,2,4,1,2,4,4,2,4,4,4,2,4,6,5,2,4,6,6,2,5,8,8,4,5,8,8,4,5,8,11,4,8,10,11,4,9,12,16,4,9,16,16,6,10,12,18,6,10,17,16,6,11,16,19,6,13,18,21,7,14,21,25,8,16,20,25,8,17,23,25,9,17,23,34,9,18,25,30,10,20,27,32,12,21,29,35,12,23,34,37,12,25,34,40,13,26,35,42,14,28,38,45,15,29,Line truncated

web/templates/_doc_toc.html

@@ -3,15 +3,12 @@
   <p>Handbuch</p>
   <a href="/doku#grotti" data-sec="grotti" class="{{ 'on' if current == 'start' else '' }}">Was Grotti ist</a>
   <a href="/doku#druck" data-sec="druck">Ein Druck von A bis Z</a>
-  <a href="/doku#ablauf" data-sec="ablauf">Ablauf (Kobra 3)</a>
-  <a href="/doku#seiten" data-sec="seiten">Seiten</a>
+  <a href="/doku#kapitel" data-sec="kapitel">Anleitung</a>
   <a href="/doku#haengt" data-sec="haengt">Wenn etwas hängt</a>
   <a href="/doku#begriffe" data-sec="begriffe">Begriffe</a>
-  <p>Versionen</p>
-  <a href="/doku/changelog" class="{{ 'on' if current == 'changelog' else '' }}">Changelog · v{{ version }}</a>
-  <p>Technik</p>
-  {% for name in docs %}
-  <a href="/doku/{{ name }}" class="{{ 'on' if current == name else '' }}">{{ name | replace('-', ' ') }}</a>
+  <p>Anleitung</p>
+  {% for name in anleitung %}
+  <a href="/doku/{{ name }}" class="{{ 'on' if current == name else '' }}">{{ anleitung_title(name) }}</a>
   {% endfor %}
 </nav>
 {% endmacro %}

web/templates/doku.html

@@ -6,8 +6,8 @@
   <article class="prose">
     <h1 id="grotti">Grotti <span class="badge">v{{ version }}</span></h1>
     <p class="lede">Grotti steuert die Drucker im Haus von einer Seite aus: sehen, was läuft, Dateien schicken, Aufträge einreihen und nachlesen, was passiert ist.</p>
-    <p>Sie läuft auf diesem Rechner und spricht jeden Drucker über Moonraker an (Rinkhals auf Kobra 3 und Kobra S1). Daten liegen in PostgreSQL. Alles, was die Seiten zeigen, gibt es auch unter <code>/api/v1</code>.</p>
-    <blockquote>Sicherheit: Ein Druck startet nur nach ausdrücklicher Bestätigung. Es gibt keine freie G-code-Konsole und kein <code>FIRMWARE_RESTART</code>.</blockquote>
+    <p>Sie läuft auf diesem Rechner und spricht jeden Drucker an. Alles, was die Seiten zeigen, gibt es auch unter <code>/api/v1</code> — mit Login oder API-Token.</p>
+    <blockquote>Sicherheit: Ein Druck startet nur nach ausdrücklicher Bestätigung. Es gibt keine freie G-code-Konsole.</blockquote>
 
     <h2 id="druck">Ein Druck von A bis Z</h2>
     <div class="flow-diagram">
@@ -22,46 +22,28 @@
       <li><strong>Drucker wählen.</strong> Die Kacheln zeigen live, was jeder Drucker gerade tut. Passt die Maschine nicht zur Datei, ist die Kachel blass.</li>
       <li><strong>Wann.</strong> <em>Jetzt</em> startet sofort. <em>Wenn frei</em> reiht für diesen Drucker ein. <em>Nächster freier</em> lässt Grotti den ersten freien passenden Drucker nehmen.</li>
       <li><strong>Starten.</strong> „Jetzt“ will zwei Klicks. Der zweite ist die Bestätigung.</li>
-      <li><strong>Während des Drucks</strong> zeigt die <a href="/">Wand</a> Fortschritt, Fertig-Uhrzeit und Temperaturen. Ein Klick auf die Karte öffnet das Cockpit mit Kamera, Steuerung, Bettnetz und 3D-Pfad. Die Seitenleiste zeigt immer, was läuft und was wartet.</li>
+      <li><strong>Während des Drucks</strong> zeigt die <a href="/">Wand</a> Fortschritt, Fertig-Uhrzeit und Temperaturen. Ein Klick auf die Karte öffnet das Cockpit mit Kamera (falls vorhanden), Steuerung, Bettnetz und 3D-Pfad. Die Seitenleiste zeigt immer, was läuft und was wartet.</li>
       <li><strong>Danach</strong> ist die Platte belegt. Ein wartender Auftrag startet erst, wenn auf der Karte <em>Platte geräumt</em> gedrückt wurde, oder ein Ablauf sie selbst freischiebt.</li>
     </ol>
+    <p>Ausführlich mit Screenshots: <a href="/doku/Anleitung-Dateien">Dateien senden</a>, <a href="/doku/Anleitung-Wand">Druckerwand</a>.</p>
 
-    <h2 id="ablauf">Ablauf (Kobra 3)</h2>
-    <p>Ein Ablauf ist eine Kette, die der Kobra 3 alleine abarbeitet und beliebig oft wiederholt:</p>
-    <div class="flow-diagram">
-      <span class="step">Drucken</span><span class="step-sep"></span>
-      <span class="step">Abkühlen</span><span class="step-sep"></span>
-      <span class="step">Schieben</span><span class="step-sep"></span>
-      <span class="step">Tasten</span><span class="step-sep"></span>
-      <span class="step">nochmal</span>
-    </div>
-    <ul>
-      <li><strong>Abkühlen</strong> wartet, bis Bett und Düse unter der Grenze sind. Danach löst sich PLA meist von selbst.</li>
-      <li><strong>Schieben</strong> fährt mit dem Extruder knapp über dem Bett von hinten nach vorn und schiebt das Teil in die Kiste.</li>
-      <li><strong>Tasten</strong> tippt mit aktivem LeviQ-Netz (ohne <code>BED_MESH_CLEAR</code>, ohne <code>G28 Z</code>). Tastpunkt einstellbar. Maß: <code>Result is z=</code> über der lokalen Platte. Über 1 mm stoppt den Ablauf.</li>
+    <h2 id="kapitel">Anleitung</h2>
+    <p>Schritt für Schritt mit Screenshots. Kurzfassung oben, Details in den Kapiteln.</p>
+    <ul class="doc-chapters">
+      {% for name in anleitung %}
+      <li><a href="/doku/{{ name }}">{{ anleitung_title(name) }}</a></li>
+      {% endfor %}
     </ul>
-    <p>Einreihen unter <a href="/dateien?tab=ablauf">Dateien → Ablauf</a>. Der aktuelle Schritt steht auf der Druckerkarte und in der Seitenleiste. Abbrechen geht an beiden Stellen. Jeder Schritt landet unter <a href="/aktivitaet">Aktivität</a>.</p>
-
-    <h2 id="seiten">Seiten</h2>
-    <dl class="terms">
-      <dt><a href="/">Drucker</a></dt><dd>Die Wand. Eine Karte je Drucker mit Zustand, Fertig-Uhrzeit, Temperaturen und Ablauf-Schritten. Klick öffnet das Cockpit mit Kamera, Steuerung, Bettnetz und 3D-Pfad.</dd>
-      <dt><a href="/dateien">Dateien</a></dt><dd>Bibliothek und Senden. Spule und ACE-Plätze unter Optionen. Warnt, wenn das Filament nicht reicht.</dd>
-      <dt><a href="/kameras">Kameras</a></dt><dd>Alle Kamerabilder nebeneinander.</dd>
-      <dt><a href="/aktivitaet">Aktivität</a></dt><dd>Zeitstrahl: Starts, Schritte, Fertig, Fehler, Abbrüche, offline. Filter nach Drucker, Art und Zeitraum.</dd>
-      <dt><a href="/protokoll">Protokoll</a></dt><dd>Abgeschlossene Läufe mit Dauer, Gramm, Kosten und Urteil.</dd>
-      <dt><a href="/material">Material</a></dt><dd>Sorten, Spulen, Farben, ACE-Plätze, Etiketten.</dd>
-      <dt><a href="/projekte">Projekte</a></dt><dd>Aufträge mit Notiz und Kalkulation.</dd>
-      <dt><a href="/einstellungen">Einstellungen</a></dt><dd>Drucker, Telegram-Alerts, Energie.</dd>
-    </dl>
 
     <h2 id="haengt">Wenn etwas hängt</h2>
     <dl class="terms">
       <dt>Auftrag wartet und startet nicht</dt><dd>Auf der Karte steht <em>Platte belegt</em>. Platte räumen, dann <em>Platte geräumt</em> drücken.</dd>
       <dt>Drucker im Fehlerzustand</dt><dd>Auf der Karte <em>Fehler löschen</em>. Grotti räumt hängende Fehler vor einem Start selbst, wenn kein Druck aktiv ist.</dd>
-      <dt>Ablauf gestoppt</dt><dd>Die Seitenleiste zeigt den Grund. Ursache beheben, Ablauf neu einreihen. Unter <a href="/aktivitaet">Aktivität</a> steht, welcher Schritt zuletzt lief.</dd>
+      <dt>Ablauf gestoppt</dt><dd>Auf der Karte oder in der Seitenleiste Ursache beheben, dann <em>Weiter</em> (ab dem fehlgeschlagenen Schritt) oder Verwerfen. Unter <a href="/aktivitaet">Aktivität</a> steht, welcher Schritt zuletzt lief.</dd>
       <dt>Drucker offline</dt><dd>Strom und WLAN prüfen. Grotti meldet, wenn er wieder da ist.</dd>
       <dt>ACE startet nicht</dt><dd>Unter Optionen die ACE-Zuordnung prüfen. Ohne Zuordnung kommt oft „cannot parse“.</dd>
     </dl>
+    <p>Mehr Fälle: <a href="/doku/Anleitung-Stoerungen">Störungen</a>.</p>
 
     <h2 id="begriffe">Begriffe</h2>
     <dl class="terms">
@@ -71,14 +53,8 @@
       <dt>Platte belegt</dt><dd>Nach jedem Druck gesetzt. Blockiert den nächsten Auftrag auf diesem Drucker.</dd>
       <dt>Alert</dt><dd>Wichtiges Ereignis (Fertig, Fehler, Abbruch, offline). Steht in der Seitenleiste und geht auf Wunsch an Telegram.</dd>
       <dt>Ereignis</dt><dd>Jeder Eintrag unter Aktivität. Ablauf-Schritte und Starts sind Ereignisse, aber keine Alerts.</dd>
+      <dt>API-Token</dt><dd>Persönlicher Schlüssel für App, Home-Automation oder MCP — unter Einstellungen erzeugen.</dd>
     </dl>
-
-    <h2>Technik</h2>
-    <p>Die Notizen zu Aufbau und Schnittstellen:</p>
-    <ul>
-      {% for name in docs %}<li><a href="/doku/{{ name }}">{{ name | replace('-', ' ') }}</a></li>{% endfor %}
-    </ul>
-    <p>Was sich je Version geändert hat, steht im <a href="/doku/changelog">Changelog</a>.</p>
   </article>
 </div>
 {% endblock %}

web/templates/einstellungen.html

@@ -29,7 +29,7 @@
   <p id="auto-note"></p>
 </section>
 
-<section class="card">
+<section class="card admin-only">
   <h2>Öffentliche Adresse</h2>
   <p class="hint">FQDN bzw. Basis-URL für QR-Codes auf Spulen-Etiketten. Leer = Host der aktuellen Anfrage (z.&nbsp;B. localhost).</p>
   <div class="field" style="max-width:28rem">
@@ -41,7 +41,7 @@
   <p id="fqdn-note"></p>
 </section>
 
-<section class="card">
+<section class="card admin-only">
   <h2>Drucker</h2>
   <p class="hint">Gesperrt = kein neuer „wenn frei“-Start auf diesem Drucker.</p>
   <div class="table-wrap">
@@ -72,7 +72,7 @@
   <p id="printer-note"></p>
 </section>
 
-<section class="card">
+<section class="card admin-only">
   <h2>Telegram</h2>
   <label class="check"><input type="checkbox" id="tg-enabled"> Benachrichtigungen aktiv</label>
   <div class="grid-2" style="margin-top:0.75rem">
@@ -101,7 +101,7 @@
   <p id="tg-note"></p>
 </section>
 
-<section class="card">
+<section class="card admin-only">
   <h2>Energie</h2>
   <p class="hint">Für Kosten im Protokoll. Filament zählt erst mit zugeordneter Spule.</p>
   <div class="grid-2">
@@ -115,10 +115,61 @@
   <div class="actions"><button type="button" id="en-save">Speichern</button></div>
   <p id="en-note"></p>
 </section>
+
+<section class="card admin-only">
+  <h2>Benutzer</h2>
+  <p class="hint">Rollen: <strong>Admin</strong> (alles) und <strong>Operator</strong> (Drucker, Queue, Material — keine Benutzerverwaltung).</p>
+  <div class="table-wrap">
+    <table>
+      <thead><tr><th>Name</th><th>Rolle</th><th>Aktiv</th><th></th></tr></thead>
+      <tbody id="user-rows"></tbody>
+    </table>
+  </div>
+  <form id="user-add" class="grid-2" style="margin-top:1rem">
+    <div class="field"><label for="user-name">Benutzer</label><input id="user-name" required minlength="2" autocomplete="off"></div>
+    <div class="field"><label for="user-pass">Passwort</label><input id="user-pass" type="password" required minlength="8" autocomplete="new-password"></div>
+    <div class="field">
+      <label for="user-role">Rolle</label>
+      <select id="user-role"><option value="operator">Operator</option><option value="admin">Admin</option></select>
+    </div>
+    <div class="actions" style="align-self:end"><button type="submit">Anlegen</button></div>
+  </form>
+  <p id="user-note"></p>
+</section>
+
+<section class="card">
+  <h2>API-Tokens</h2>
+  <p class="hint">Für App, Home-Automation oder MCP. Klartext erscheint nur einmal bei der Erstellung. Authorization: <code>Bearer grt_…</code></p>
+  <div class="table-wrap">
+    <table>
+      <thead><tr><th>Name</th><th>Prefix</th><th>Rolle</th><th></th></tr></thead>
+      <tbody id="token-rows"></tbody>
+    </table>
+  </div>
+  <form id="token-add" class="grid-2" style="margin-top:1rem">
+    <div class="field"><label for="token-name">Bezeichnung</label><input id="token-name" placeholder="Home Assistant" required></div>
+    <div class="field">
+      <label for="token-role">Rolle</label>
+      <select id="token-role"><option value="operator">Operator</option><option value="admin">Admin</option></select>
+    </div>
+    <div class="actions" style="align-self:end"><button type="submit">Token erzeugen</button></div>
+  </form>
+  <p id="token-note"></p>
+  <p class="ok" id="token-once" hidden></p>
+  <p class="hint" id="legacy-token-hint" hidden>In der Config steht noch ein Shared-Token — der gilt weiter als Admin. Besser auf Benutzer-Tokens umstellen und <code>token</code> in der Config leeren.</p>
+</section>
 {% endblock %}
 {% block script %}
 <script>
 const families = { kobra_3: "Kobra 3", kobra_s1: "Kobra S1", "": "—" };
+const isAdmin = document.querySelector('meta[name="user-role"]')?.content === "admin";
+document.querySelectorAll(".admin-only").forEach((el) => { el.hidden = !isAdmin; });
+if (!isAdmin) {
+  const roleSel = document.getElementById("token-role");
+  if (roleSel) {
+    [...roleSel.options].forEach((opt) => { if (opt.value === "admin") opt.remove(); });
+  }
+}
 
 /* showNote aus api.js: Inline-Hinweis + Toast */
 
@@ -181,36 +232,175 @@ function renderPrinters(rows) {
   });
 }
 
+function renderUsers(rows) {
+  const body = document.getElementById("user-rows");
+  if (!body) return;
+  body.innerHTML = "";
+  rows.forEach((row) => {
+    const tr = document.createElement("tr");
+    tr.innerHTML = `<td>${escapeHtml(row.username)}</td>
+      <td><select data-f="role"><option value="operator">Operator</option><option value="admin">Admin</option></select></td>
+      <td><label class="check"><input type="checkbox" data-f="active"></label></td><td></td>`;
+    tr.querySelector('[data-f="role"]').value = row.role;
+    tr.querySelector('[data-f="active"]').checked = !!row.active;
+    const save = document.createElement("button");
+    save.type = "button";
+    save.textContent = "Speichern";
+    save.addEventListener("click", async () => {
+      try {
+        await api("/users/" + row.id, {
+          method: "PATCH",
+          json: {
+            role: tr.querySelector('[data-f="role"]').value,
+            active: tr.querySelector('[data-f="active"]').checked,
+          },
+        });
+        showNote("user-note", null, "Benutzer gespeichert.");
+        loadUsers();
+      } catch (error) {
+        showNote("user-note", error);
+      }
+    });
+    const del = document.createElement("button");
+    del.type = "button";
+    del.className = "ghost warn";
+    del.textContent = "Löschen";
+    del.addEventListener("click", () => {
+      armButton(del, "Wirklich löschen?", async () => {
+        try {
+          await api("/users/" + row.id, { method: "DELETE" });
+          showNote("user-note", null, "Benutzer gelöscht.");
+          loadUsers();
+        } catch (error) {
+          showNote("user-note", error);
+        }
+      });
+    });
+    tr.children[3].appendChild(save);
+    tr.children[3].appendChild(del);
+    body.appendChild(tr);
+  });
+}
+
+function renderTokens(rows) {
+  const body = document.getElementById("token-rows");
+  body.innerHTML = "";
+  if (!rows.length) {
+    body.innerHTML = '<tr><td class="empty" colspan="4">Keine Tokens.</td></tr>';
+    return;
+  }
+  rows.forEach((row) => {
+    const tr = document.createElement("tr");
+    tr.innerHTML = `<td>${escapeHtml(row.name)}${row.username ? ' <span class="tiny">(' + escapeHtml(row.username) + ")</span>" : ""}</td>
+      <td><code>${escapeHtml(row.prefix)}…</code></td>
+      <td>${escapeHtml(row.role)}</td><td></td>`;
+    const rev = document.createElement("button");
+    rev.type = "button";
+    rev.className = "ghost warn";
+    rev.textContent = "Widerrufen";
+    rev.addEventListener("click", () => {
+      armButton(rev, "Widerrufen?", async () => {
+        try {
+          await api("/tokens/" + row.id, { method: "DELETE" });
+          showNote("token-note", null, "Token widerrufen.");
+          loadTokens();
+        } catch (error) {
+          showNote("token-note", error);
+        }
+      });
+    });
+    tr.children[3].appendChild(rev);
+    body.appendChild(tr);
+  });
+}
+
+async function loadUsers() {
+  if (!isAdmin) return;
+  renderUsers(await api("/users"));
+}
+
+async function loadTokens() {
+  renderTokens(await api("/tokens" + (isAdmin ? "?all=1" : "")));
+}
+
 async function load() {
   const [settings, printers] = await Promise.all([
     api("/einstellungen"),
     api("/drucker?live=0"),
   ]);
-  renderPrinters(printers);
+  if (isAdmin) renderPrinters(printers);
   document.getElementById("auto-queue").checked = settings.auto_queue !== false;
-  document.getElementById("fqdn").value = settings.fqdn || "";
-  document.getElementById("tg-enabled").checked = !!(settings.telegram && settings.telegram.enabled);
-  document.getElementById("tg-token").value = "";
-  document.getElementById("tg-token").placeholder = settings.telegram && settings.telegram.bot_token_set
-    ? ("gesetzt: " + (settings.telegram.bot_token || "••••"))
-    : "Bot-Token";
-  document.getElementById("tg-chat").value = (settings.telegram && settings.telegram.chat_id) || "";
-  const alerts = settings.alerts || {};
-  document.getElementById("al-fertig").checked = alerts.fertig !== false;
-  document.getElementById("al-fehler").checked = alerts.fehler !== false;
-  document.getElementById("al-offline").checked = alerts.offline !== false;
-  document.getElementById("al-queue").checked = alerts.queue !== false;
-  document.getElementById("al-ablauf").checked = !!alerts.ablauf;
-  document.getElementById("al-start").checked = !!alerts.start;
-  const en = settings.energy || {};
-  document.getElementById("en-watts").value = en.watts ?? 120;
-  document.getElementById("en-kwh").value = en.euro_per_kwh ?? 0.35;
-  document.getElementById("en-dryer").value = en.dryer_watts ?? 0;
-  document.getElementById("en-dryh").value = en.dry_hours ?? 0;
-  document.getElementById("en-waste").value = en.waste_percent ?? 0;
-  document.getElementById("en-util").value = en.utilization ?? 50;
+  const fqdn = document.getElementById("fqdn");
+  if (fqdn) fqdn.value = settings.fqdn || "";
+  const tgEnabled = document.getElementById("tg-enabled");
+  if (tgEnabled) {
+    tgEnabled.checked = !!(settings.telegram && settings.telegram.enabled);
+    document.getElementById("tg-token").value = "";
+    document.getElementById("tg-token").placeholder = settings.telegram && settings.telegram.bot_token_set
+      ? ("gesetzt: " + (settings.telegram.bot_token || "••••"))
+      : "Bot-Token";
+    document.getElementById("tg-chat").value = (settings.telegram && settings.telegram.chat_id) || "";
+    const alerts = settings.alerts || {};
+    document.getElementById("al-fertig").checked = alerts.fertig !== false;
+    document.getElementById("al-fehler").checked = alerts.fehler !== false;
+    document.getElementById("al-offline").checked = alerts.offline !== false;
+    document.getElementById("al-queue").checked = alerts.queue !== false;
+    document.getElementById("al-ablauf").checked = !!alerts.ablauf;
+    document.getElementById("al-start").checked = !!alerts.start;
+    const en = settings.energy || {};
+    document.getElementById("en-watts").value = en.watts ?? 120;
+    document.getElementById("en-kwh").value = en.euro_per_kwh ?? 0.35;
+    document.getElementById("en-dryer").value = en.dryer_watts ?? 0;
+    document.getElementById("en-dryh").value = en.dry_hours ?? 0;
+    document.getElementById("en-waste").value = en.waste_percent ?? 0;
+    document.getElementById("en-util").value = en.utilization ?? 50;
+  }
+  const legacy = document.getElementById("legacy-token-hint");
+  if (legacy) legacy.hidden = !settings.legacy_token_set;
+  await Promise.all([loadUsers(), loadTokens()]);
 }
 
+document.getElementById("user-add")?.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  try {
+    await api("/users", {
+      method: "POST",
+      json: {
+        username: document.getElementById("user-name").value,
+        password: document.getElementById("user-pass").value,
+        role: document.getElementById("user-role").value,
+      },
+    });
+    document.getElementById("user-add").reset();
+    showNote("user-note", null, "Benutzer angelegt.");
+    loadUsers();
+  } catch (error) {
+    showNote("user-note", error);
+  }
+});
+
+document.getElementById("token-add").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const once = document.getElementById("token-once");
+  once.hidden = true;
+  try {
+    const out = await api("/tokens", {
+      method: "POST",
+      json: {
+        name: document.getElementById("token-name").value,
+        role: document.getElementById("token-role").value,
+      },
+    });
+    document.getElementById("token-add").reset();
+    once.hidden = false;
+    once.textContent = "Token (nur jetzt sichtbar): " + out.token;
+    showNote("token-note", null, "Token erzeugt — jetzt kopieren.");
+    loadTokens();
+  } catch (error) {
+    showNote("token-note", error);
+  }
+});
+
 document.getElementById("auto-save").addEventListener("click", async () => {
   try {
     await api("/einstellungen", {

web/templates/etikett.html

@@ -101,7 +101,7 @@
   </div>
   <canvas id="qr" width="120" height="120"></canvas>
 </div>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/qrcode.min.js"></script>
+<script src="{{ url_for('static', filename='qrcode.min.js') }}?v=1"></script>
 <script>
 QRCode.toCanvas(document.getElementById("qr"), {{ qr_url|tojson }}, {
   width: 120,

web/templates/kameras.html

@@ -11,23 +11,12 @@
 {% endblock %}
 {% block script %}
 <script>
-const labels = {
-  printing: "druckt", paused: "pausiert", complete: "fertig", standby: "bereit",
-  heating: "heizt", error: "Fehler", cancelled: "abgebrochen", offline: "offline"
-};
 const tiles = new Map();
 
-function shownState(printer) {
-  const state = printer.state || "offline";
-  const hot = (printer.nozzle_target || 0) > 40 || (printer.bed_target || 0) > 30;
-  if ((state === "standby" || state === "complete") && hot) return "heating";
-  return state;
-}
-
 function metaLine(printer) {
   const state = shownState(printer);
   const busy = state === "printing" || state === "paused";
-  const bits = [labels[state] || state];
+  const bits = [STATE_LABELS[state] || state];
   if (busy) {
     const pct = Math.round((printer.progress || 0) * 100);
     bits.push(pct + " %");
@@ -52,8 +41,11 @@ function ensureTile(printer) {
       <span class="host"></span>
     </figcaption>
     <p class="cam-meta tiny"></p>
-    <img alt="" data-role="cam">
-    <a class="cam-url" href="#"></a>`;
+    <div class="cam-stage">
+      <img alt="" data-role="cam" hidden>
+      <p class="cam-empty" data-role="cam-empty">${icon("camera")}<span>Keine Kamera</span></p>
+    </div>
+    <a class="ghost cam-open" href="/#${encodeURIComponent(printer.host)}">Cockpit</a>`;
   tiles.set(printer.host, tile);
   document.getElementById("grid").appendChild(tile);
   return tile;
@@ -65,10 +57,10 @@ async function refresh() {
   const grid = document.getElementById("grid");
   if (!printers.length) {
     tiles.clear();
-    grid.innerHTML = '<p class="empty">Keine Drucker eingetragen.</p>';
+    grid.innerHTML = `<div class="empty-state">${icon("camera", "lg")}<p>Noch keine Drucker.</p><a href="/einstellungen">Zu den Einstellungen</a></div>`;
     return;
   }
-  if (grid.querySelector(".empty")) grid.innerHTML = "";
+  if (grid.querySelector(".empty-state")) grid.innerHTML = "";
   const seen = new Set();
   for (const printer of printers) {
     seen.add(printer.host);
@@ -78,16 +70,28 @@ async function refresh() {
     tile.querySelector(".cam-name").textContent = printer.name;
     tile.querySelector(".host").textContent = printer.host;
     tile.querySelector(".cam-meta").textContent = metaLine(printer);
-    const path = "/api/v1/kamera?host=" + encodeURIComponent(printer.host);
-    const shown = "/api/v1/kamera?host=" + printer.host;
+    tile.querySelector(".cam-open").href = "/#" + encodeURIComponent(printer.host);
     const img = tile.querySelector('[data-role="cam"]');
+    const empty = tile.querySelector('[data-role="cam-empty"]');
+    if (!printer.camera || printer.has_camera === false) {
+      img.removeAttribute("src");
+      img.hidden = true;
+      empty.hidden = false;
+      empty.innerHTML = icon("camera") + "<span>Keine Kamera</span>";
+      continue;
+    }
     img.alt = "Kamera " + printer.name;
-    img.src = withToken(path) + "&t=" + Math.floor(Date.now() / 2000);
-    img.classList.remove("broken");
-    img.onerror = () => img.classList.add("broken");
-    const link = tile.querySelector(".cam-url");
-    link.href = withToken(path);
-    link.textContent = shown;
+    const next = withToken(printer.camera) + "&t=" + Math.floor(Date.now() / 2000);
+    img.onerror = () => {
+      img.hidden = true;
+      empty.hidden = false;
+      empty.innerHTML = icon("camera") + "<span>Keine Kamera</span>";
+    };
+    img.onload = () => {
+      img.hidden = false;
+      empty.hidden = true;
+    };
+    img.src = next;
   }
   for (const [host, tile] of [...tiles.entries()]) {
     if (!seen.has(host)) {

web/templates/layout.html

@@ -3,9 +3,13 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="token" content="{{ token }}">
+<meta name="csrf" content="{{ csrf }}">
+{% if current_user %}<meta name="user-role" content="{{ current_user.role }}">{% endif %}
 <title>{{ title }} · Grotti</title>
-<link rel="stylesheet" href="{{ url_for('static', filename='grotti.css') }}?v=36">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='brand/favicon-32.png') }}">
+<link rel="icon" type="image/png" sizes="512x512" href="{{ url_for('static', filename='brand/favicon.png') }}">
+<link rel="apple-touch-icon" href="{{ url_for('static', filename='brand/apple-touch-icon.png') }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='grotti.css') }}?v=39">
 <script>
 (function () {
   try {
@@ -84,7 +88,10 @@
 </svg>
 <aside class="sidebar">
   <div class="brand-row">
-    <a class="brand" href="/">Grotti</a>
+    <a class="brand" href="/" title="Grotti">
+      <img class="brand-mark" src="{{ url_for('static', filename='brand/logo.png') }}" alt="" width="28" height="28" decoding="async">
+      <span class="brand-name">Grotti</span>
+    </a>
     <button type="button" class="icon-btn nav-toggle" id="nav-toggle" title="Menü einklappen" aria-label="Menü einklappen" aria-pressed="false"><svg class="ico"><use href="#i-panel"/></svg></button>
   </div>
   <nav class="nav-main" aria-label="Hauptmenü">
@@ -127,8 +134,14 @@
     <a href="/doku" class="{{ 'on' if page == 'doku' else '' }}" title="Doku"><svg class="ico"><use href="#i-book"/></svg><span>Doku</span></a>
   </nav>
   <div class="side-foot">
+    {% if current_user %}
+    <div class="side-user">
+      <span class="tiny" title="{{ current_user.role }}">{{ current_user.username }}</span>
+      <button type="button" class="ghost tiny-btn" id="logout-btn">Abmelden</button>
+    </div>
+    {% endif %}
     <span class="side-copy">© by <a href="mailto:[email protected]">[email protected]</a></span>
-    <a href="/doku/changelog" title="Changelog">v{{ version }}</a>
+    <a href="/doku" title="Doku">v{{ version }}</a>
   </div>
 </aside>
 <div class="app-main">
@@ -143,8 +156,12 @@
   <a href="/warteschlange" class="{{ 'on' if page == 'warteschlange' else '' }} nav-shelf"><svg class="ico"><use href="#i-queue"/></svg><span>Warteschlange</span></a>
   <a href="/aktivitaet" class="{{ 'on' if page == 'aktivitaet' else '' }} nav-desk"><svg class="ico"><use href="#i-activity"/></svg><span>Aktivität</span></a>
 </nav>
-<script src="{{ url_for('static', filename='api.js') }}?v=23"></script>
+<script src="{{ url_for('static', filename='api.js') }}?v=24"></script>
 <script>
+document.getElementById("logout-btn")?.addEventListener("click", async () => {
+  try { await api("/auth/logout", { method: "POST", json: {} }); } catch (e) {}
+  location.href = "/login";
+});
 (function applyShellClasses() {
   const shelf = document.documentElement.classList.contains("shelf");
   const collapsed = document.documentElement.classList.contains("nav-collapsed");

web/templates/login.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="csrf" content="{{ csrf }}">
+<title>Anmelden · Grotti</title>
+<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='brand/favicon-32.png') }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='grotti.css') }}?v=40">
+</head>
+<body class="auth-body">
+<main class="auth-card">
+  <h1 class="auth-brand"><img src="{{ url_for('static', filename='brand/logo.png') }}" alt="" width="40" height="40" decoding="async"> Grotti</h1>
+  <figure class="auth-quote" id="auth-quote" hidden>
+    <blockquote id="auth-quote-text"></blockquote>
+    <figcaption id="auth-quote-by"></figcaption>
+  </figure>
+  <form id="login-form" class="stack">
+    <div class="field">
+      <label for="username">Benutzer</label>
+      <input id="username" name="username" autocomplete="username" required autofocus>
+    </div>
+    <div class="field">
+      <label for="password">Passwort</label>
+      <input id="password" name="password" type="password" autocomplete="current-password" required>
+    </div>
+    <button type="submit">Anmelden</button>
+    <p class="msg" id="note" hidden></p>
+  </form>
+</main>
+<script>
+(function () {
+  const quotes = [
+    { t: "Wissenschaftler entdecken die Welt, die ist; Ingenieure schaffen die Welt, die noch nie war.", a: "Theodore von Kármán" },
+    { t: "Perfektion ist nicht dann erreicht, wenn man nichts mehr hinzufügen, sondern wenn man nichts mehr weglassen kann.", a: "Antoine de Saint-Exupéry" },
+    { t: "Wenn man es nicht messen kann, kann man es nicht verbessern.", a: "Lord Kelvin" },
+    { t: "Einfachheit ist die höchste Form der Raffinesse.", a: "Leonardo da Vinci" },
+    { t: "Es gibt nichts Praktischeres als eine gute Theorie.", a: "Kurt Lewin" },
+    { t: "Gott steckt im Detail.", a: "Ludwig Mies van der Rohe" },
+    { t: "Erst das Problem lösen. Dann den Code schreiben.", a: "John Johnson" },
+    { t: "Qualität heißt, es von Anfang an richtig zu machen.", a: "W. Edwards Deming" },
+    { t: "Wer misst, misst Mist — wer nicht misst, steuert blind.", a: "Werkstattweisheit" },
+    { t: "Simplicity is a great virtue, but it requires hard work to achieve it.", a: "Edsger W. Dijkstra" },
+  ];
+  const pick = quotes[Math.floor(Date.now() / 86400000) % quotes.length];
+  document.getElementById("auth-quote-text").textContent = pick.t;
+  document.getElementById("auth-quote-by").textContent = "— " + pick.a;
+  document.getElementById("auth-quote").hidden = false;
+})();
+document.getElementById("login-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const note = document.getElementById("note");
+  note.hidden = true;
+  try {
+    const response = await fetch("/api/v1/auth/login", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        username: document.getElementById("username").value,
+        password: document.getElementById("password").value,
+      }),
+    });
+    const payload = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(payload.error || response.statusText);
+    const next = new URLSearchParams(location.search).get("next") || "/";
+    location.href = next.startsWith("/") ? next : "/";
+  } catch (error) {
+    note.hidden = false;
+    note.textContent = error.message || String(error);
+    note.className = "msg";
+  }
+});
+</script>
+</body>
+</html>

web/templates/setup.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="csrf" content="{{ csrf }}">
+<title>Setup · Grotti</title>
+<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='brand/favicon-32.png') }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='grotti.css') }}?v=40">
+</head>
+<body class="auth-body">
+<main class="auth-card">
+  <h1 class="auth-brand"><img src="{{ url_for('static', filename='brand/logo.png') }}" alt="" width="40" height="40" decoding="async"> Grotti einrichten</h1>
+  <p class="tiny">Lege den ersten Administrator an. Danach ist Login Pflicht.</p>
+  <form id="setup-form" class="stack">
+    <div class="field">
+      <label for="username">Admin-Benutzer</label>
+      <input id="username" name="username" autocomplete="username" required autofocus minlength="2">
+    </div>
+    <div class="field">
+      <label for="password">Passwort</label>
+      <input id="password" name="password" type="password" autocomplete="new-password" required minlength="8">
+    </div>
+    <div class="field">
+      <label for="password2">Passwort wiederholen</label>
+      <input id="password2" name="password2" type="password" autocomplete="new-password" required minlength="8">
+    </div>
+    <button type="submit">Admin anlegen</button>
+    <p class="msg" id="note" hidden></p>
+  </form>
+</main>
+<script>
+document.getElementById("setup-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const note = document.getElementById("note");
+  note.hidden = true;
+  const password = document.getElementById("password").value;
+  if (password !== document.getElementById("password2").value) {
+    note.hidden = false;
+    note.textContent = "Passwörter stimmen nicht überein.";
+    note.className = "msg";
+    return;
+  }
+  try {
+    const response = await fetch("/api/v1/auth/setup", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        username: document.getElementById("username").value,
+        password,
+      }),
+    });
+    const payload = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(payload.error || response.statusText);
+    location.href = "/";
+  } catch (error) {
+    note.hidden = false;
+    note.textContent = error.message || String(error);
+    note.className = "msg";
+  }
+});
+</script>
+</body>
+</html>

web/templates/wand.html

@@ -49,7 +49,7 @@
         <div class="desk-facts" data-role="facts"></div>
         <div data-role="flow"></div>
         <div data-role="strips"></div>
-        <details class="desk-fold desk-steer-fold" data-fold="steer" open>
+        <details class="desk-fold desk-steer-fold" data-fold="steer">
           <summary class="desk-fold-sum"><svg class="ico caret"><use href="#i-down"/></svg><span class="grow">Steuerung</span></summary>
           <div data-role="steer"></div>
         </details>
@@ -61,7 +61,7 @@
     </aside>
   </div>
   <div class="desk-tools">
-    <details class="desk-fold desk-tool" data-fold="path" open>
+    <details class="desk-fold desk-tool" data-fold="path">
       <summary class="desk-fold-sum"><svg class="ico caret"><use href="#i-down"/></svg><span class="grow">3D-Pfad</span><span class="tiny" data-role="path-caption"></span></summary>
       <div class="desk-fold-body">
         <p class="tiny">Ziehen dreht · Rad zoomt · Rechtsklick/Shift schwenkt · Doppelklick setzt zurück</p>
@@ -75,7 +75,7 @@
         </div>
       </div>
     </details>
-    <details class="desk-fold desk-tool desk-tool-mesh" data-fold="mesh" open>
+    <details class="desk-fold desk-tool desk-tool-mesh" data-fold="mesh">
       <summary class="desk-fold-sum"><svg class="ico caret"><use href="#i-down"/></svg><span class="grow">Bettnetz</span></summary>
       <div class="desk-fold-body" data-role="mesh">
         <p class="desk-empty"><svg class="ico"><use href="#i-grid"/></svg><span>Noch kein Bettnetz</span></p>
@@ -88,16 +88,15 @@
 <script src="{{ url_for('static', filename='three.min.js') }}?v=1"></script>
 <script src="{{ url_for('static', filename='gcode-viewer.js') }}?v=8"></script>
 <script>
-const labels = {
-  printing: "druckt", paused: "pausiert", complete: "fertig", standby: "bereit",
-  heating: "heizt", error: "Fehler", cancelled: "abgebrochen", offline: "offline"
-};
+const labels = STATE_LABELS;
 const rank = { printing: 0, paused: 1, error: 2, heating: 3, complete: 4, cancelled: 5, standby: 6, offline: 7 };
+const DESK_STATES = ["printing", "paused", "complete", "standby", "heating", "error", "cancelled", "offline"];
 let deskHost = "";
 let hideOffline = false;
 let libraryFiles = [];
 let wallSpools = [];
 let deskViewer = null;
+let deskCamFails = 0;
 let deskViewerFileId = null;
 let deskExcludeSelected = "";
 const wallPullTried = new Set();
@@ -123,9 +122,9 @@ function syncDeskCamCollapsed() {
 }
 
 function restoreDeskFolds() {
-  let closed = [];
-  try { closed = JSON.parse(localStorage.getItem(DESK_FOLD_KEY) || "[]"); } catch (error) { closed = []; }
-  if (!Array.isArray(closed)) closed = [];
+  let closed;
+  try { closed = JSON.parse(localStorage.getItem(DESK_FOLD_KEY) || "null"); } catch (error) { closed = null; }
+  if (!Array.isArray(closed)) closed = ["steer", "path", "mesh"];
   deskEl.querySelectorAll("details[data-fold]").forEach((box) => {
     box.open = !closed.includes(box.dataset.fold);
     box.addEventListener("toggle", () => {
@@ -193,13 +192,6 @@ function heatMapHtml(printer) {
   return `<div class="mesh desk-mesh"><p>Aktuelles Netz, oben ist hinten. ${low.toFixed(2)} bis ${high.toFixed(2)} mm</p><div class="gridmesh" style="grid-template-columns:repeat(${rows[0].length},1fr)">${cells}</div><p class="tiny">${bits.join(" · ")}</p></div>`;
 }
 
-function shownState(printer) {
-  const state = printer.state || "offline";
-  const hot = (printer.nozzle_target || 0) > 40 || (printer.bed_target || 0) > 30;
-  if ((state === "standby" || state === "complete") && hot) return "heating";
-  return state;
-}
-
 function jobName(filename) {
   return (filename || "").replace(/\.gcode$/i, "").replace(/^(\d+-)+/, "");
 }
@@ -575,13 +567,14 @@ function refreshDeskCamera(printer) {
   const img = deskEl.querySelector('[data-role="camera"]');
   const empty = deskEl.querySelector('[data-role="cam-empty"]');
   if (!img || !empty) return;
-  if (!printer || !printer.camera) {
+  if (!printer || !printer.camera || printer.has_camera === false) {
     img.removeAttribute("src");
     img.hidden = true;
     empty.hidden = false;
     empty.innerHTML = icon("camera") + "<span>Keine Kamera</span>";
     setDeskCameraMode(false, "keine");
     img.dataset.srcKey = "";
+    deskCamFails = 0;
     return;
   }
   // Layout (no-cam) nicht bei jedem Frame-Fehler umwerfen — sonst springt die
@@ -593,6 +586,7 @@ function refreshDeskCamera(printer) {
   const probe = new Image();
   probe.onload = () => {
     if (img.dataset.srcKey !== next) return;
+    deskCamFails = 0;
     img.src = next;
     img.hidden = false;
     empty.hidden = true;
@@ -600,7 +594,16 @@ function refreshDeskCamera(printer) {
   };
   probe.onerror = () => {
     if (img.dataset.srcKey !== next) return;
-    // Altes Bild behalten; nur wenn noch nie was kam, Platzhalter zeigen
+    deskCamFails += 1;
+    if (deskCamFails >= 2) {
+      img.removeAttribute("src");
+      img.hidden = true;
+      empty.hidden = false;
+      empty.innerHTML = icon("camera") + "<span>Keine Kamera</span>";
+      setDeskCameraMode(false, "offline");
+      img.dataset.srcKey = "";
+      return;
+    }
     if (!img.src || img.hidden) {
       empty.hidden = false;
       empty.innerHTML = icon("camera") + "<span>Kamera nicht erreichbar</span>";
@@ -652,7 +655,9 @@ function patchDesk(printer) {
   deskEl.dataset.host = printer.host;
   deskEl.dataset.filename = printer.filename || "";
   deskEl.dataset.progress = String(printer.progress || 0);
-  deskEl.className = "desk " + state;
+  deskEl.classList.remove(...DESK_STATES);
+  deskEl.classList.add(state);
+  syncDeskCamCollapsed();
 
   const role = (name) => deskEl.querySelector(`[data-role=${name}]`);
   const nameEl = role("name");
@@ -1006,6 +1011,14 @@ async function refresh() {
   document.getElementById("summary").innerHTML = summaryText(all) || "keine Drucker";
   document.getElementById("when").textContent = new Date().toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
 
+  if (!all.length) {
+    lastFleetKey = "";
+    cardNodes.clear();
+    cardsEl.innerHTML = `<div class="empty-state">${icon("printer", "lg")}<p>Noch keine Drucker.</p><p class="tiny">Unter Einstellungen anlegen.</p><a href="/einstellungen">Zu den Einstellungen</a></div>`;
+    if (deskHost) closeDesk();
+    return;
+  }
+
   const sections = ensureFleetShell(printers);
   const seen = new Set();
   for (const printer of printers) {