feat: scaffold Temper-Linie live-overview page-module (temper_overview)

Vue 3 + Vite 8 + TS + PrimeVue 4 (Nora/Industrial) + Pinia + vue-i18n SPA, served by the SPRO gateway as a static page-module under /module/temper_overview and embedded into Grafana via iframe. - Ports the LOCKED design #4 "Shop-floor Schematic": one connected line Pressen -> (cyan) -> Ofen -> (green) -> Fertig; carts under their origin press; oven trays as dwell-progress bars; finished band; range picker scoping only the Fertig figures. Flow/order colours match PressV (fleet recognisability). - Python page-module wrapper: register(app) mounts committed dist/ + a no-auth read API (GET /api/overview). Kernel DB seam in _db.py. - Backend returns SAMPLE data; frontend falls back to bundled sample so `npm run dev` renders with zero backend (TODO markers point at the real temper aggregates). - Rich README bakes in the design, contract, wiring + Grafana embedding for standalone development. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-01 20:41:04 +02:00 · 2026-07-01 20:41:04 +02:00 · aa115a0b8d
commit aa115a0b8d
parent e1adb06815
53 changed files with 5378 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,26 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Local env / secrets — NEVER commit the real .npmrc (holds the registry token)
+.env
+.env.*
+!.env.example
+.npmrc
+!.npmrc.example
+
+# Editor / OS
+.DS_Store
+*.local
+.idea/
+.vscode/*
+!.vscode/extensions.json
+
+# Build caches
+node_modules/.tmp/
+*.tsbuildinfo
+
+# NOTE: dist/ is intentionally NOT ignored. The gateway serves the committed
+# build (the deploy host has no Node toolchain). Rebuild with `npm run build`
+# and commit dist/ whenever the app changes.
--- a/.npmrc.example
+++ b/.npmrc.example
@ -0,0 +1,11 @@
+# The @sp-ui-kit/* packages (shared design tokens) live on the private SPRO
+# Gitea npm registry. Copy this file to `.npmrc` and paste a Gitea Personal
+# Access Token with the "package: Read" scope. The real `.npmrc` is gitignored
+# — never commit the token.
+#
+# Get a token: git.sprodat.eu → Settings → Applications → Manage Access Tokens
+# → Generate New Token (scope: package Read).
+
+@sp-ui-kit:registry=https://git.sprodat.eu/api/packages/SPRO_PROJECTS/npm/
+//git.sprodat.eu/api/packages/SPRO_PROJECTS/npm/:_authToken=PUT_YOUR_TOKEN_HERE
+//git.sprodat.eu/api/packages/SPRO_PROJECTS/npm/:always-auth=true
--- a/README.md
+++ b/README.md
@ -1,2 +1,153 @@
-# SPA_TemperProductionOverview
+# SPA_TemperProductionOverview — Temper-Linie · Live-Übersicht

+A **login-free, read-only** whole-line temper overview, built as a Vue 3 SPA that
+the **SPRO Universal Gateway** serves as a static page-module under
+`/module/temper_overview/` and that is **embedded into Grafana via an `<iframe>`**.
+
+> **Standalone orientation.** This repo is developed on its own (like `FastPress`,
+> `PressV`, `sp-ui-kit` — sibling repos), but it only comes fully alive when mounted
+> into the gateway as a git submodule at `modules/temper_overview/`. This README
+> bakes in everything a fresh session needs — you shouldn't need the gateway repo
+> open to work on the frontend.
+
+Board it renders (dark, one connected line): **Pressen → (cyan ↓) → Ofen →
+(green ↓) → Fertig**, carts hanging under their origin press, oven trays whose
+background fills with dwell progress, a finished band, and a time-range picker that
+scopes only the "Fertig" figures. Run `npm run dev` to see it.
+
+---
+
+## Quick start (standalone dev)
+
+```bash
+# 1) auth for the private @sp-ui-kit design-token package (one-time)
+cp .npmrc.example .npmrc      # then paste a Gitea PAT with "package: Read" scope
+
+# 2) install + run
+npm install
+npm run dev                   # http://localhost:5173/module/temper_overview/
+```
+
+With **no gateway backend running**, the store falls back to **bundled sample data**
+(`src/data/sample.ts`), so `npm run dev` shows the full design immediately (a
+`DEMO-DATEN` tag appears in the header). `npm run build` → `dist/` (committed).
+
+---
+
+## How it's wired into the gateway (page-module contract)
+
+This is a gateway module per `agent_docs/vue-page-modules.md` in the gateway repo.
+The **repo root is a Python package** (`__init__.py`) so the kernel's module loader
+can `import temper_overview` and call `register(app)`:
+
+| File | Role |
+|---|---|
+| `__init__.py` | `register(app)` — mounts `dist/` at `MODULE_PREFIX` + includes the API router |
+| `_db.py` | kernel DB seam (`run_select_query`) — used once real SQL is wired |
+| `api/routes.py` | the no-auth read API (`GET /module/temper_overview/api/overview`) |
+| `dist/` | **committed** build output — the gateway serves this (deploy host has no Node) |
+| `src/` etc. | the Vue app source |
+
+**URL prefix lives in two places that MUST match** — change both together:
+`vite.config.ts` → `base: '/module/temper_overview/'` and `__init__.py` →
+`MODULE_PREFIX = "/module/temper_overview"`. The frontend derives its API base from
+`import.meta.env.BASE_URL`, so it follows the prefix automatically.
+
+Add it to a gateway checkout:
+
+```bash
+# in the gateway repo (fastAPI)
+git submodule add https://git.sprodat.eu/Erik/SPA_TemperProductionOverview.git modules/temper_overview
+# MODULES_ENABLED in .env must include temper_overview (or be empty = load all)
+```
+
+Restart the gateway; the log shows `loaded module: temper_overview`. Smoke-test
+(mind the trailing slash): `http://localhost:8800/module/temper_overview/` and
+`…/api/overview`.
+
+> **Deploy rule:** always `npm run build` and **commit `dist/`** when the app
+> changes, then bump the submodule pin in the gateway repo. Never build on the
+> gateway host.
+
+---
+
+## Data API contract
+
+`GET /module/temper_overview/api/overview?range=12h|1d|7d|14d|30d` → one JSON
+payload for the whole line. The TypeScript shape is authoritative:
+[`src/types/overview.ts`](src/types/overview.ts); the Python side builds the same
+shape in [`api/routes.py`](api/routes.py). `range` scopes **only** the `finished`
+figures — presses / on-the-way / oven are always real-time.
+
+```jsonc
+{
+  "plant": "Werk 1", "generatedAt": "…", "range": "1d",
+  "ovenTempC": 185, "ovenAvgMin": 120, "sample": true,
+  "presses":  [{ "name":"P1","status":"run","orders":[{"orderNo":"O-4471","colorIndex":0}],
+                 "good":1240,"cycleTime":"4.2","notVerladen":34,"note":null,"placeholder":false }],
+  "onWay":    { "P3":[{ "cartId":"C-014a","orders":[{"orderNo":"O-4471","qty":54,"colorIndex":0}],"etaMin":3 }] },
+  "oven":     [{ "cartId":"C-011","orders":[],"totalMin":120,"remainingMin":42 }],
+  "finished": { "carts":47,"parts":5120,"scrap":63,"avgOvenMin":118,
+                "byOrder":[{"orderNo":"O-4471","colorIndex":0,"parts":1680}] },
+  "finishedList": [{ "cartId":"C-010","orders":[],"ago":"vor 8 min" }]
+}
+```
+
+### Wiring the REAL data (currently SAMPLE)
+
+`api/routes.py` returns sample data today. To make it live (see the big `TODO` there
+and `.claude/memory/temper-line-overview.md` in the gateway):
+
+- Import the kernel proxy: `from .._db import run_select_query` (read-only).
+- Reuse the temper status-derivation in `modules/fastpress/press/temper.py`
+  (`_temper_aggregates_all` derives on-way / in-oven / finished from planned
+  timestamps vs `NOW()`), un-scoped across **all** presses. Read
+  `production.temper_tracking` (carts grouped by `ttCartId`, keyed by origin press
+  `ttPress`) + `production.active_orders`/`finished_orders`.
+- `notVerladen` = produced good parts (cycles) − parts logged to temper. **Open
+  question:** per-press or plant-wide?
+- Scope `finished` by `range` on `ttOutOfOvenAt`. Never echo customer/price fields.
+
+Alternatively, add a public `GET /press/temper/overview` in fastpress and have the
+frontend call that — decide before wiring; keep the payload shape above either way.
+
+---
+
+## Tech stack (matches PressV / the fleet)
+
+Vue 3.5 · Vite 8 · TypeScript 5.9 · Pinia 3 · vue-router 4 (hash) · vue-i18n 10
+(de default, `?lang=en`) · PrimeVue 4.5 (Nora + custom **Industrial** preset, sky
+primary) · Tailwind v4 (CSS-first) · `@sp-ui-kit/tokens` (shared design tokens,
+private registry) · Inter Variable. **Dark-first**, flat 2px corners, 0s
+transitions, `prefers-reduced-motion` disables the conveyor animations.
+
+**Store pattern** (mirrors PressV `productionOverview`): `src/stores/temperOverview.ts`
+does `loadCache()` (sessionStorage) → `hydrate()` (spinner only on cold start) →
+`refresh()` (background) → `startPolling(12000)`. Robust to a dev server's SPA
+fallback: a response without a `presses[]` array is treated as "no backend" → sample.
+
+### Design tokens (recognisable across SPRO apps)
+
+Flow accents match PressV `--c-*`: press/machine `#a78bfa`, on-the-way/cart
+`#22d3ee`, oven `#f97316` (hot `#ef4444`), finished `#34d399`. Order chips (from
+PressV `orderColors.ts`): `#5794F2 #E8825A #B57EDC #4FB7A8`. Defined in
+`src/style.css` (`:root` dark + `html:not(.dark)` light) and `src/data/orderColors.ts`.
+
+> Not yet used but part of the fleet stack — add when needed: `@sp-ui-kit/ui-core`
+> components and `echarts`/`vue-echarts`. The board's by-order bars are CSS today.
+
+---
+
+## Grafana embedding
+
+The gateway sets no `X-Frame-Options`/CSP, so a Grafana **Text** panel (HTML mode,
+`disable_sanitize_html = true`) can iframe it:
+
+```html
+<iframe src="http://<gateway-host>:8800/module/temper_overview/#/"
+        width="100%" height="900" style="border:0"></iframe>
+```
+
+Append `?lang=en` before the `#` for English. Design is locked as design #4
+"Shop-floor Schematic" — see `.claude/memory/temper-line-overview.md` and the
+prototype at `modules/fastpress/reference/temper-overview/` in the gateway repo.
--- a/init.py
+++ b/init.py
@ -0,0 +1,51 @@
+"""temper_overview — the Temper-Linie live-overview page-module for the SPRO gateway.
+
+This repository is a **gateway page-module**, not a standalone server. It is
+mounted into the SPRO Universal Gateway as a git submodule at
+``<gateway>/modules/temper_overview/`` and discovered automatically by the kernel
+module loader (``app.core.modules.load_modules``), which imports this package and
+calls ``register(app)`` after the core routers are mounted.
+
+It does two things:
+
+* mounts the built Vue SPA (``dist/``) as static files under ``/module/temper_overview``;
+* exposes a small **read-only, no-auth** JSON API under ``/module/temper_overview/api``
+  for the page to call (same origin → no CORS, no token).
+
+The data is non-sensitive shop-floor data, so — like the kernel's ``/health`` and
+``/heartbeat`` — the page API is deliberately unauthenticated. This is a per-page,
+purpose-built read surface: never expose the generic ``POST /query/mariadb`` proxy
+to the browser.
+
+See ``agent_docs/vue-page-modules.md`` in the gateway repo for the full runbook,
+and this repo's ``README.md`` for the design + build/deploy notes.
+"""
+from __future__ import annotations
+
+from pathlib import Path
+
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+
+MODULE_NAME = "temper_overview"
+# MUST match vite.config.ts `base` (with a trailing slash on the Vite side).
+MODULE_PREFIX = "/module/temper_overview"
+
+
+def register(app: FastAPI) -> None:
+    """Mount the data API and the SPA onto the gateway app.
+
+    Called once by the kernel loader during app construction. Order matters: a
+    ``StaticFiles`` mount captures every path under its prefix, so the ``/api``
+    routes are registered FIRST or the mount would shadow them.
+    """
+    # 1) Data API first (imported lazily so package import stays cheap).
+    from .api import routes
+
+    app.include_router(routes.router)
+
+    # 2) Then the SPA. html=True serves dist/index.html at the prefix root.
+    #    dist/ MUST exist (it is committed) — if it is missing this raises and the
+    #    loader logs-and-skips the module (the kernel stays up but the page 404s).
+    dist = Path(__file__).resolve().parent / "dist"
+    app.mount(MODULE_PREFIX, StaticFiles(directory=dist, html=True), name=MODULE_NAME)
--- a/_db.py
+++ b/_db.py
@ -0,0 +1,21 @@
+"""Kernel DB seam for the temper_overview page-module.
+
+Mirrors ``modules/fastpress/press/_db.py``: the module reaches the database ONLY
+through the gateway kernel's SELECT-only proxy, re-exported here so the coupling
+to ``app.db`` lives in exactly one place. This page is read-only, so it needs
+``run_select_query`` and nothing else (no ``transaction`` — it never writes).
+
+The base scaffold's API (``api/routes.py``) returns SAMPLE data and does NOT import
+this yet — wiring real SQL is the next step (see the TODO in ``api/routes.py``).
+Keeping the seam here means that when the real query is added it imports::
+
+    from .._db import run_select_query
+
+NOTE: no connection happens at import — SQLAlchemy's engine is lazy; the first
+real connection opens only when a query actually executes.
+"""
+from __future__ import annotations
+
+from app.db.mariadb import run_select_query  # noqa: F401  (kernel SELECT-only proxy)
+
+__all__ = ["run_select_query"]
--- a/api/init.py
+++ b/api/init.py
--- a/api/routes.py
+++ b/api/routes.py
@ -0,0 +1,141 @@
+"""Read-only, no-auth JSON API for the Temper-Linie overview page.
+
+The page is served same-origin under ``/module/temper_overview`` and calls
+``GET /module/temper_overview/api/overview?range=1d`` for the whole-line payload.
+No ``verify_token`` dependency: this is the deliberate no-auth read surface for the
+Grafana iframe (non-sensitive shop-floor data). Keep every route narrow and
+read-only — NEVER proxy arbitrary SQL.
+
+── STATUS: BASE SCAFFOLD ────────────────────────────────────────────────────────
+This returns realistic SAMPLE data shaped EXACTLY like the frontend contract
+(``src/types/overview.ts``) so the page renders end-to-end with no database. The
+``range`` query param scales only the "Fertig" (finished) figures, mirroring the
+locked design (presses / on-the-way / oven are always real-time).
+
+TODO — wire real data (see the gateway repo, this repo's README, and the memory
+``.claude/memory/temper-line-overview.md``):
+  * Import the kernel SELECT proxy:  ``from .._db import run_select_query``
+  * Whole-line, un-scoped across presses. Reuse the temper status-derivation from
+    ``modules/fastpress/press/temper.py`` (``_temper_aggregates_all`` derives
+    on_way / in_oven / finished from planned timestamps vs NOW()); read
+    ``production.temper_tracking`` (carts, grouped by ``ttCartId``, keyed by origin
+    press ``ttPress``) + ``production.active_orders``/``finished_orders``.
+  * "nichtVerladen" = produced good parts (cycles) − parts logged to temper
+    (open question: per-press or plant-wide — see the memory).
+  * Scope the finished aggregates by ``range`` (12h..30d) on ``ttOutOfOvenAt``.
+  * Never echo customer/price fields.
+Alternatively, add a public ``GET /press/temper/overview`` in fastpress and have
+the page call that instead — decide before wiring; keep the payload shape below.
+"""
+from __future__ import annotations
+
+from datetime import datetime
+from typing import Any
+
+from fastapi import APIRouter, Query
+
+router = APIRouter(prefix="/module/temper_overview/api", tags=["temper_overview"])
+
+# ── Sample data (ported verbatim from the locked prototype) ─────────────────────
+# Order identity: key → (Auftragsnummer, colour index 0..3). The 4 colours live in
+# the frontend (src/data/orderColors.ts) — the API only sends the index, so the
+# page and legend always line up.
+_ORDERS: dict[str, tuple[str, int]] = {
+    "o1": ("O-4471", 0),
+    "o2": ("O-4460", 1),
+    "o3": ("O-4455", 2),
+    "o4": ("O-4489", 3),
+}
+
+# range code → factor applied to the finished figures only (from the prototype).
+_RANGE_FACTORS: dict[str, float] = {"12h": 0.5, "1d": 1.0, "7d": 6.4, "14d": 12.7, "30d": 27.2}
+_DEFAULT_RANGE = "1d"
+
+
+def _orders(*specs: tuple[str, int]) -> list[dict[str, Any]]:
+    """[(order_key, qty), ...] → [{orderNo, qty, colorIndex}, ...]."""
+    out: list[dict[str, Any]] = []
+    for key, qty in specs:
+        name, color = _ORDERS[key]
+        out.append({"orderNo": name, "qty": qty, "colorIndex": color})
+    return out
+
+
+def _order_chips(*keys: str) -> list[dict[str, Any]]:
+    """order keys → [{orderNo, colorIndex}, ...] (no qty — for the press header)."""
+    return [{"orderNo": _ORDERS[k][0], "colorIndex": _ORDERS[k][1]} for k in keys]
+
+
+_PRESSES: list[dict[str, Any]] = [
+    {"name": "P1", "status": "run", "orders": _order_chips("o1"), "good": 1240, "cycleTime": "4.2", "notVerladen": 34, "note": None, "placeholder": False},
+    {"name": "P2", "status": "run", "orders": _order_chips("o2"), "good": 880, "cycleTime": "6.1", "notVerladen": 18, "note": None, "placeholder": False},
+    {"name": "P3", "status": "run", "orders": _order_chips("o1", "o4"), "good": 612, "cycleTime": "4.3", "notVerladen": 52, "note": None, "placeholder": False},
+    {"name": "P4", "status": "stop", "orders": _order_chips("o2"), "good": 430, "cycleTime": None, "notVerladen": 0, "note": "Werkzeug rüsten", "placeholder": False},
+    {"name": "P5", "status": "run", "orders": _order_chips("o3"), "good": 1975, "cycleTime": "2.8", "notVerladen": 41, "note": None, "placeholder": False},
+    {"name": "P6", "status": "run", "orders": _order_chips("o2"), "good": 744, "cycleTime": "6.0", "notVerladen": 23, "note": None, "placeholder": False},
+    {"name": "P7", "status": "idle", "orders": [], "good": 0, "cycleTime": None, "notVerladen": 0, "note": "Kein Auftrag", "placeholder": False},
+    {"name": "P8", "status": "run", "orders": _order_chips("o4"), "good": 1102, "cycleTime": "3.9", "notVerladen": 29, "note": None, "placeholder": False},
+    {"name": "P9", "status": "run", "orders": _order_chips("o1"), "good": 968, "cycleTime": "4.1", "notVerladen": 12, "note": None, "placeholder": False},
+    {"name": "P10", "status": "idle", "orders": [], "good": 0, "cycleTime": None, "notVerladen": 0, "note": None, "placeholder": True},
+]
+
+# carts on the way, keyed by origin press (a press may have several → its column scrolls).
+_ON_WAY: dict[str, list[dict[str, Any]]] = {
+    "P3": [{"cartId": "C-014a", "orders": _orders(("o1", 54), ("o2", 42)), "etaMin": 3}],
+    "P5": [{"cartId": "C-014b", "orders": _orders(("o3", 60)), "etaMin": 7}],
+    "P8": [
+        {"cartId": "C-015", "orders": _orders(("o1", 30), ("o4", 30), ("o2", 30), ("o3", 30)), "etaMin": 9},
+        {"cartId": "C-019", "orders": _orders(("o4", 36)), "etaMin": 14},
+        {"cartId": "C-020", "orders": _orders(("o1", 28)), "etaMin": 19},
+    ],
+}
+
+_OVEN: list[dict[str, Any]] = [
+    {"cartId": "C-011", "orders": _orders(("o1", 88)), "totalMin": 120, "remainingMin": 42},
+    {"cartId": "C-012", "orders": _orders(("o2", 60), ("o4", 44)), "totalMin": 120, "remainingMin": 71},
+    {"cartId": "C-013", "orders": _orders(("o3", 72)), "totalMin": 120, "remainingMin": 12},
+    {"cartId": "C-016", "orders": _orders(("o1", 40), ("o2", 36)), "totalMin": 120, "remainingMin": 98},
+    {"cartId": "C-017", "orders": _orders(("o4", 80)), "totalMin": 120, "remainingMin": 104},
+]
+
+_FINISHED_BASE = {"carts": 47, "parts": 5120, "scrap": 63, "avgOvenMin": 118}
+_FINISHED_BY_ORDER: dict[str, int] = {"o1": 1680, "o2": 1290, "o3": 1150, "o4": 1000}
+
+_FINISHED_LIST: list[dict[str, Any]] = [
+    {"cartId": "C-010", "orders": _orders(("o2", 50), ("o3", 40)), "ago": "vor 8 min"},
+    {"cartId": "C-009", "orders": _orders(("o1", 64)), "ago": "vor 21 min"},
+    {"cartId": "C-008", "orders": _orders(("o4", 58)), "ago": "vor 35 min"},
+    {"cartId": "C-007", "orders": _orders(("o2", 44), ("o1", 20)), "ago": "vor 52 min"},
+    {"cartId": "C-006", "orders": _orders(("o3", 72)), "ago": "vor 1 h 6 min"},
+]
+
+
+@router.get("/overview", summary="Whole temper-line overview (SAMPLE data)")
+def overview(range: str = Query(_DEFAULT_RANGE, description="finished-figures window: 12h|1d|7d|14d|30d")) -> dict[str, Any]:
+    code = range if range in _RANGE_FACTORS else _DEFAULT_RANGE
+    factor = _RANGE_FACTORS[code]
+
+    finished = {
+        "carts": round(_FINISHED_BASE["carts"] * factor),
+        "parts": round(_FINISHED_BASE["parts"] * factor),
+        "scrap": round(_FINISHED_BASE["scrap"] * factor),
+        "avgOvenMin": _FINISHED_BASE["avgOvenMin"],
+        "byOrder": [
+            {"orderNo": _ORDERS[k][0], "colorIndex": _ORDERS[k][1], "parts": round(v * factor)}
+            for k, v in _FINISHED_BY_ORDER.items()
+        ],
+    }
+
+    return {
+        "plant": "Werk 1",
+        "generatedAt": datetime.now().astimezone().isoformat(),
+        "range": code,
+        "ovenTempC": 185,
+        "ovenAvgMin": 120,
+        "sample": True,  # frontend shows a "Demo-Daten" hint while this is set
+        "presses": _PRESSES,
+        "onWay": _ON_WAY,
+        "oven": _OVEN,
+        "finished": finished,
+        "finishedList": _FINISHED_LIST,
+    }
--- a/dist/assets/index-BOzN3Frr.js
+++ b/dist/assets/index-BOzN3Frr.js
--- a/dist/assets/index-xY8RtBtx.css
+++ b/dist/assets/index-xY8RtBtx.css
--- a/dist/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2
+++ b/dist/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2
--- a/dist/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2
+++ b/dist/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2
--- a/dist/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2
+++ b/dist/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2
--- a/dist/assets/inter-greek-wght-normal-CkhJZR-_.woff2
+++ b/dist/assets/inter-greek-wght-normal-CkhJZR-_.woff2
--- a/dist/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2
+++ b/dist/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2
--- a/dist/assets/inter-latin-wght-normal-Dx4kXJAl.woff2
+++ b/dist/assets/inter-latin-wght-normal-Dx4kXJAl.woff2
--- a/dist/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2
+++ b/dist/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2
--- a/dist/assets/primeicons-C6QP2o4f.woff2
+++ b/dist/assets/primeicons-C6QP2o4f.woff2
--- a/dist/assets/primeicons-DMOk5skT.eot
+++ b/dist/assets/primeicons-DMOk5skT.eot
--- a/dist/assets/primeicons-Dr5RGzOO.svg
+++ b/dist/assets/primeicons-Dr5RGzOO.svg
--- a/dist/assets/primeicons-MpK4pl85.ttf
+++ b/dist/assets/primeicons-MpK4pl85.ttf
--- a/dist/assets/primeicons-WjwUDZjB.woff
+++ b/dist/assets/primeicons-WjwUDZjB.woff
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<!--
+  Dark-first board (class="dark" → @sp-ui-kit token dark values + PrimeVue dark
+  mode, whose darkModeSelector is ".dark"). data-density="comfortable": this is a
+  view-only wall board, not a finger-touch panel (the reject STATION uses "touch").
+-->
+<html lang="de" class="dark" data-density="comfortable">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Temper-Linie · Live-Übersicht</title>
+    <script type="module" crossorigin src="/module/temper_overview/assets/index-BOzN3Frr.js"></script>
+    <link rel="stylesheet" crossorigin href="/module/temper_overview/assets/index-xY8RtBtx.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
--- a/env.d.ts
+++ b/env.d.ts
@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+// CSS-only subpath imports. The runtime resolves these via each package's
+// `exports` map; TypeScript needs an explicit declaration because there is no
+// .d.ts for a `.css` file (with `noUncheckedSideEffectImports` on). Same as PressV.
+declare module '@sp-ui-kit/tokens/css'
+declare module '@fontsource-variable/inter'
--- a/index.html
+++ b/index.html
@ -0,0 +1,17 @@
+<!doctype html>
+<!--
+  Dark-first board (class="dark" → @sp-ui-kit token dark values + PrimeVue dark
+  mode, whose darkModeSelector is ".dark"). data-density="comfortable": this is a
+  view-only wall board, not a finger-touch panel (the reject STATION uses "touch").
+-->
+<html lang="de" class="dark" data-density="comfortable">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Temper-Linie · Live-Übersicht</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,34 @@
+{
+  "name": "spa-temper-production-overview",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Temper-Linie · Live-Übersicht — a login-free whole-line temper overview SPA, served by the SPRO gateway under /module/temper_overview and embedded into Grafana via iframe.",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json"
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
+    "@primevue/themes": "^4.5.4",
+    "@sp-ui-kit/tokens": "^0.1.0",
+    "axios": "^1.14.0",
+    "pinia": "^3.0.4",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.5.5",
+    "vue": "^3.5.30",
+    "vue-i18n": "10",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "@types/node": "^24.12.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~5.9.3",
+    "vue-tsc": "^3.2.5"
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <RouterView />
+</template>
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -0,0 +1,14 @@
+import axios from 'axios'
+
+// The SPA is served by the gateway at `import.meta.env.BASE_URL`
+// (= vite.config.ts `base` = "/module/temper_overview/"), and its data API lives
+// right under that prefix at `/api`. Deriving the baseURL from BASE_URL keeps the
+// app correct if the URL prefix ever changes (change it in ONE place: vite base +
+// ../__init__.py MODULE_PREFIX). Same origin → no CORS, no auth header.
+const api = axios.create({
+  baseURL: import.meta.env.BASE_URL + 'api',
+  timeout: 15000,
+  headers: { 'Content-Type': 'application/json' },
+})
+
+export default api
--- a/src/components/FinishedBand.vue
+++ b/src/components/FinishedBand.vue
@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import OrderLine from '@/components/OrderLine.vue'
+import { orderColor } from '@/data/orderColors'
+import type { FinishedSummary, FinishedCart } from '@/types/overview'
+
+const props = defineProps<{ finished: FinishedSummary; list: FinishedCart[]; rangeLabel: string }>()
+const { t } = useI18n()
+
+const de = (n: number) => Math.round(n).toLocaleString('de-DE')
+const maxByOrder = computed(() => Math.max(1, ...props.finished.byOrder.map((o) => o.parts)))
+</script>
+
+<template>
+  <div class="band fband">
+    <div class="bhd">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="rack">
+        <path d="M4 4v16M20 4v16" />
+        <path d="M4 9h16M4 15h16" />
+        <rect x="6" y="4.6" width="5" height="3.6" rx=".4" />
+        <rect x="13" y="10.6" width="5" height="3.6" rx=".4" />
+      </svg>
+      <span class="t">{{ t('finished.title') }}</span>
+      <span class="m">{{ t('finished.range', { label: rangeLabel }) }}</span>
+    </div>
+
+    <div class="finrow">
+      <div class="finsum">
+        <div class="finhero">
+          <span class="v num">{{ de(finished.parts) }}</span>
+          <span class="l">{{ t('finished.goodParts') }}</span>
+        </div>
+        <div class="finmeta">
+          <span>{{ t('finished.carts') }} <b class="num">{{ de(finished.carts) }}</b></span>
+          <span class="scrap">{{ t('finished.scrap') }} <b class="num">{{ de(finished.scrap) }}</b></span>
+          <span>{{ t('finished.avgOven') }} <b class="num">{{ finished.avgOvenMin }} min</b></span>
+        </div>
+      </div>
+
+      <div class="finmid">
+        <div class="byorder">
+          <div v-for="o in finished.byOrder" :key="o.orderNo" class="row">
+            <span class="nm">{{ o.orderNo }}</span>
+            <span class="track"><i :style="{ width: (o.parts / maxByOrder) * 100 + '%', background: orderColor(o.colorIndex) }"></i></span>
+            <span class="val">{{ de(o.parts) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="finscroll">
+      <div v-for="c in list" :key="c.cartId" class="fcart">
+        <div class="fhd">
+          <span class="cid">{{ c.cartId }}</span>
+          <span class="ago">{{ c.ago }}</span>
+        </div>
+        <div class="ols">
+          <OrderLine v-for="(o, i) in c.orders" :key="i" :order-no="o.orderNo" :qty="o.qty" :color-index="o.colorIndex" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.band {
+  border-radius: 6px;
+  padding: 12px 14px;
+}
+.fband {
+  border: 1px solid rgba(52, 211, 153, 0.35);
+  background: linear-gradient(180deg, var(--panel), #0e1712);
+}
+.bhd {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin-bottom: 10px;
+  color: var(--done);
+}
+.rack {
+  width: 19px;
+  height: 19px;
+}
+.t {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-weight: 800;
+}
+.m {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  color: var(--ink-dim);
+}
+.finrow {
+  display: flex;
+  gap: 18px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.finsum {
+  flex: 0 0 230px;
+}
+.finhero {
+  display: flex;
+  align-items: baseline;
+  gap: 9px;
+  margin-bottom: 9px;
+}
+.finhero .v {
+  font-family: var(--mono);
+  font-size: 2.25rem;
+  font-weight: 800;
+  color: var(--done);
+  line-height: 1;
+}
+.finhero .l {
+  font-size: 0.75rem;
+  color: var(--ink-dim);
+}
+.finmeta {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  color: var(--ink-dim);
+}
+.finmeta b {
+  color: var(--ink);
+}
+.finmeta .scrap b {
+  color: var(--hot);
+}
+.finmid {
+  flex: 1 1 200px;
+  min-width: 190px;
+}
+.byorder {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 0.75rem;
+}
+.nm {
+  font-family: var(--mono);
+  color: var(--ink);
+  width: 64px;
+}
+.track {
+  flex: 1;
+  height: 9px;
+  background: var(--ground);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  overflow: hidden;
+}
+.track i {
+  display: block;
+  height: 100%;
+}
+.val {
+  font-family: var(--mono);
+  color: var(--ink-dim);
+  width: 52px;
+  text-align: right;
+}
+.finscroll {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 6px;
+  scrollbar-width: thin;
+}
+.fcart {
+  flex: 0 0 148px;
+  border: 1px solid var(--line);
+  border-top: 2px solid var(--done);
+  border-radius: var(--r);
+  padding: 7px 9px;
+}
+.fhd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.cid {
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  font-weight: 700;
+}
+.ago {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 0.6rem;
+  color: var(--ink-faint);
+}
+.ols {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+</style>
--- a/src/components/FlowLegend.vue
+++ b/src/components/FlowLegend.vue
@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { ORDER_COLORS } from '@/data/orderColors'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flow">
+    <div class="node">
+      <span class="sw" :style="{ background: 'var(--press)' }"></span>
+      <span><span class="nm">{{ t('flow.presses') }}</span> <span class="sub">{{ t('flow.pressesSub') }}</span></span>
+    </div>
+    <div class="node"><span class="sw" :style="{ background: 'var(--way)' }"></span><span class="nm">{{ t('flow.onWay') }}</span></div>
+    <div class="node"><span class="sw" :style="{ background: 'var(--oven)' }"></span><span class="nm">{{ t('flow.oven') }}</span></div>
+    <div class="node"><span class="sw" :style="{ background: 'var(--done)' }"></span><span class="nm">{{ t('flow.finished') }}</span></div>
+    <span class="orders">
+      <span class="ol2">{{ t('flow.orders') }}</span>
+      <span v-for="(c, i) in ORDER_COLORS" :key="i" class="chip" :style="{ background: c }"></span>
+      <span class="ol2">{{ t('flow.ordersMax') }}</span>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.flow {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  flex-wrap: wrap;
+  margin: 12px 0 14px;
+  padding: 11px 16px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  border-radius: var(--r);
+}
+.node {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 2px 4px;
+  position: relative;
+}
+.node:not(:last-of-type) {
+  padding-right: 30px;
+}
+.node:not(:last-of-type)::after {
+  content: '→';
+  position: absolute;
+  right: 9px;
+  color: var(--ink-faint);
+  font-size: 1rem;
+}
+.sw {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--r);
+}
+.nm {
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+.sub {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--ink-faint);
+}
+.orders {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  padding-left: 18px;
+  border-left: 1px solid var(--line);
+}
+.ol2 {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.chip {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+}
+</style>
--- a/src/components/KpiStrip.vue
+++ b/src/components/KpiStrip.vue
@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { OverviewPayload } from '@/types/overview'
+
+const props = defineProps<{ payload: OverviewPayload }>()
+const { t } = useI18n()
+
+const de = (n: number) => Math.round(n).toLocaleString('de-DE')
+const partsOf = (orders: { qty: number }[]) => orders.reduce((s, o) => s + o.qty, 0)
+
+const notVerladen = computed(() => props.payload.presses.reduce((s, p) => s + p.notVerladen, 0))
+const wayCarts = computed(() => Object.values(props.payload.onWay).flat())
+const wayParts = computed(() => wayCarts.value.reduce((s, c) => s + partsOf(c.orders), 0))
+const ovenParts = computed(() => props.payload.oven.reduce((s, b) => s + partsOf(b.orders), 0))
+const finished = computed(() => props.payload.finished)
+const scrapRate = computed(() => {
+  const f = finished.value
+  const total = f.parts + f.scrap
+  if (total === 0) return '0,0 %'
+  return ((f.scrap / total) * 100).toFixed(1).replace('.', ',') + ' %'
+})
+</script>
+
+<template>
+  <div class="kpis">
+    <div class="kpi nv">
+      <div class="kl">{{ t('kpi.notVerladen') }}</div>
+      <div class="kv num">{{ de(notVerladen) }}</div>
+      <div class="ks">{{ t('kpi.notVerladenSub') }}</div>
+    </div>
+    <div class="kpi way">
+      <div class="kl">{{ t('kpi.onWay') }}</div>
+      <div class="kv num">{{ de(wayParts) }}</div>
+      <div class="ks">{{ t('kpi.onWaySub', { n: wayCarts.length }) }}</div>
+    </div>
+    <div class="kpi oven">
+      <div class="kl">{{ t('kpi.oven') }}</div>
+      <div class="kv num">{{ de(ovenParts) }}</div>
+      <div class="ks">{{ t('kpi.ovenSub', { n: payload.oven.length }) }}</div>
+    </div>
+    <div class="kpi done">
+      <div class="kl">{{ t('kpi.finished') }} · {{ payload.range }}</div>
+      <div class="kv num">{{ de(finished.parts) }}</div>
+      <div class="ks">{{ t('kpi.finishedSub', { n: de(finished.carts) }) }}</div>
+    </div>
+    <div class="kpi">
+      <div class="kl">{{ t('kpi.scrapRate') }} · {{ payload.range }}</div>
+      <div class="kv num">{{ scrapRate }}</div>
+      <div class="ks">{{ t('kpi.scrapRateSub') }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+  margin: 0 0 14px;
+}
+.kpi {
+  border: 1px solid var(--line);
+  background: var(--panel);
+  border-radius: var(--r);
+  padding: 11px 13px;
+  border-left: 3px solid var(--line-2);
+}
+.kpi.nv {
+  border-left-color: var(--press);
+}
+.kpi.way {
+  border-left-color: var(--way);
+}
+.kpi.oven {
+  border-left-color: var(--oven);
+}
+.kpi.done {
+  border-left-color: var(--done);
+}
+.kl {
+  font-family: var(--mono);
+  font-size: 0.6rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.kv {
+  font-family: var(--mono);
+  font-size: 1.6rem;
+  font-weight: 800;
+  line-height: 1.15;
+}
+.kpi.nv .kv {
+  color: var(--press);
+}
+.kpi.way .kv {
+  color: var(--way);
+}
+.kpi.oven .kv {
+  color: var(--oven);
+}
+.kpi.done .kv {
+  color: var(--done);
+}
+.ks {
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  color: var(--ink-dim);
+}
+@media (max-width: 900px) {
+  .kpis {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>
--- a/src/components/OrderLine.vue
+++ b/src/components/OrderLine.vue
@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { orderColor } from '@/data/orderColors'
+
+defineProps<{ orderNo: string; qty: number; colorIndex: number }>()
+</script>
+
+<template>
+  <div class="ol">
+    <span class="chip" :style="{ background: orderColor(colorIndex) }"></span>
+    <span class="on">{{ orderNo }}</span>
+    <span class="oq">{{ qty }}</span>
+  </div>
+</template>
+
+<style scoped>
+.ol {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 0.72rem;
+}
+.chip {
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  flex: none;
+}
+.on {
+  font-family: var(--mono);
+  color: var(--ink);
+}
+.oq {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-weight: 700;
+  color: var(--ink-dim);
+  font-variant-numeric: tabular-nums;
+}
+</style>
--- a/src/components/OvenBand.vue
+++ b/src/components/OvenBand.vue
@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import OrderLine from '@/components/OrderLine.vue'
+import type { OvenBatch } from '@/types/overview'
+
+const props = defineProps<{ batches: OvenBatch[]; tempC: number; avgMin: number }>()
+const { t } = useI18n()
+
+const partsOf = (b: OvenBatch) => b.orders.reduce((s, o) => s + o.qty, 0)
+const totalParts = computed(() => props.batches.reduce((s, b) => s + partsOf(b), 0))
+// soonest-out first; the soonest gets the pulsing "nächster raus" tag.
+const sorted = computed(() => [...props.batches].sort((a, b) => a.remainingMin - b.remainingMin))
+const nextOutId = computed(() => (sorted.value.length ? sorted.value[0].cartId : null))
+
+function pct(b: OvenBatch) {
+  return Math.round(((b.totalMin - b.remainingMin) / b.totalMin) * 100)
+}
+function trayStyle(b: OvenBatch) {
+  const hot = b.remainingMin <= 15
+  const p = pct(b)
+  const fill = hot ? '239,68,68' : '249,115,22'
+  const edge = Math.max(p - 1.5, 0)
+  return {
+    background: `linear-gradient(90deg, rgba(${fill},.20) 0, rgba(${fill},.20) ${edge}%, rgba(${fill},.65) ${edge}%, rgba(${fill},.65) ${p}%, rgba(6,10,15,.3) ${p}%)`,
+  }
+}
+</script>
+
+<template>
+  <div class="band oband">
+    <div class="bhd">
+      <svg viewBox="0 0 24 24" class="ovenicon" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="4" width="18" height="16" rx="1.5" />
+        <path d="M3 8h18" />
+        <circle cx="7" cy="6" r=".6" fill="currentColor" />
+        <circle cx="10" cy="6" r=".6" fill="currentColor" />
+        <rect x="6" y="11" width="12" height="6" rx="1" />
+      </svg>
+      <span class="t">{{ t('oven.title') }}</span>
+      <span class="flame">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c0-1 0-1 .3-1.8C16 11 17 13 17 15a5 5 0 0 1-10 0c0-4 5-7 5-12z" />
+        </svg>
+        <span>{{ tempC }}°C</span>
+      </span>
+      <span class="m">{{ t('oven.meta', { parts: totalParts, batches: batches.length, avg: avgMin }) }}</span>
+    </div>
+    <div class="otrays">
+      <div v-for="b in sorted" :key="b.cartId" class="tray" :class="{ hot: b.remainingMin <= 15 }" :style="trayStyle(b)">
+        <div class="thd">
+          <span class="cid">{{ b.cartId }}</span>
+          <span v-if="b.cartId === nextOutId" class="nextout">{{ t('oven.nextOut') }}</span>
+          <span class="rem" :style="{ color: b.remainingMin <= 15 ? 'var(--hot)' : 'var(--oven)' }">
+            {{ b.remainingMin }}<span class="remu"> {{ t('oven.unit') }}</span>
+          </span>
+        </div>
+        <div class="prog">
+          <span class="pv">{{ pct(b) }}%</span> · {{ t('oven.progress', { done: b.totalMin - b.remainingMin, total: b.totalMin }) }}
+        </div>
+        <div class="ols">
+          <OrderLine v-for="(o, i) in b.orders" :key="i" :order-no="o.orderNo" :qty="o.qty" :color-index="o.colorIndex" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.band {
+  border-radius: 6px;
+  padding: 12px 14px;
+}
+.oband {
+  border: 1px solid rgba(249, 115, 22, 0.4);
+  background:
+    radial-gradient(70% 120% at 50% 0%, rgba(239, 68, 68, 0.1), transparent 60%),
+    linear-gradient(180deg, var(--panel), #160f0b);
+}
+.bhd {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin-bottom: 10px;
+  color: var(--oven);
+}
+.ovenicon {
+  width: 19px;
+  height: 19px;
+  animation: flame 1.6s ease-in-out infinite;
+}
+.t {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-weight: 800;
+}
+.flame {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--hot);
+  font-family: var(--mono);
+  font-size: 0.75rem;
+}
+.flame svg {
+  width: 14px;
+  height: 14px;
+  animation: flicker 1.1s ease-in-out infinite;
+}
+.m {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  color: var(--ink-dim);
+}
+.otrays {
+  display: flex;
+  gap: 9px;
+  overflow-x: auto;
+  padding-bottom: 6px;
+  scrollbar-width: thin;
+}
+.tray {
+  position: relative;
+  flex: 0 0 196px;
+  border: 1px solid var(--line-2);
+  border-top: 3px solid var(--oven);
+  border-radius: var(--r);
+  padding: 9px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow: hidden;
+}
+.tray.hot {
+  border-top-color: var(--hot);
+}
+.thd {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.cid {
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+.rem {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 1rem;
+  font-weight: 800;
+  line-height: 1;
+  padding: 3px 8px;
+  border-radius: var(--r);
+  background: var(--ground);
+  border: 1px solid var(--line-2);
+}
+.remu {
+  font-size: 0.56rem;
+  font-weight: 600;
+  color: var(--ink-faint);
+}
+.prog {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--mono);
+  font-size: 0.6rem;
+  color: var(--ink-dim);
+}
+.pv {
+  color: var(--oven);
+  font-weight: 700;
+}
+.tray.hot .pv {
+  color: var(--hot);
+}
+.nextout {
+  font-family: var(--mono);
+  font-size: 0.5rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--hot);
+  border: 1px solid rgba(239, 68, 68, 0.5);
+  border-radius: var(--r);
+  padding: 1px 4px;
+  animation: blink 1.8s ease-in-out infinite;
+}
+.ols {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding-top: 5px;
+  border-top: 1px solid var(--line);
+}
+</style>
--- a/src/components/OverviewHeader.vue
+++ b/src/components/OverviewHeader.vue
@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { RangeCode } from '@/types/overview'
+
+defineProps<{ plant: string; range: RangeCode; sample: boolean }>()
+const emit = defineEmits<{ (e: 'update:range', code: RangeCode): void }>()
+
+const { t } = useI18n()
+const RANGES: RangeCode[] = ['12h', '1d', '7d', '14d', '30d']
+
+const clock = ref('')
+let timer: ReturnType<typeof setInterval> | null = null
+function tick() {
+  clock.value = new Date().toLocaleTimeString('de-DE')
+}
+onMounted(() => {
+  tick()
+  timer = setInterval(tick, 1000)
+})
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<template>
+  <div class="bar">
+    <span class="mark">{{ t('app.brand') }}</span>
+    <span class="title">{{ plant }} · <b>{{ t('app.line') }}</b> · {{ t('app.subtitle') }}</span>
+    <span v-if="sample" class="demo">{{ t('app.demo') }}</span>
+    <span class="spacer"></span>
+    <span class="live"><span class="led"></span>{{ t('app.live') }}</span>
+    <span class="clock num">{{ clock }}</span>
+    <span class="rangep" role="group" :aria-label="t('range.label')">
+      <span class="rl">{{ t('range.label') }}</span>
+      <button
+        v-for="code in RANGES"
+        :key="code"
+        type="button"
+        :aria-pressed="code === range"
+        @click="emit('update:range', code)"
+      >
+        {{ code }}
+      </button>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 70%, transparent));
+  border-radius: var(--r);
+  flex-wrap: wrap;
+}
+.mark {
+  font-family: var(--mono);
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  color: var(--ground);
+  background: var(--way);
+  padding: 5px 9px;
+  border-radius: var(--r);
+}
+.title {
+  font-weight: 650;
+  font-size: 1rem;
+}
+.title b {
+  color: var(--way);
+}
+.demo {
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--oven);
+  border: 1px solid color-mix(in srgb, var(--oven) 50%, transparent);
+  border-radius: var(--r);
+  padding: 2px 7px;
+}
+.spacer {
+  margin-left: auto;
+}
+.live {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ink-dim);
+}
+.led {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--run);
+  animation: blink 2.4s ease-in-out infinite;
+}
+.clock {
+  font-size: 0.95rem;
+  color: var(--ink-dim);
+}
+.rangep {
+  display: inline-flex;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r);
+  overflow: hidden;
+}
+.rl {
+  align-self: center;
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  padding: 0 11px;
+}
+.rangep button {
+  font-family: var(--mono);
+  background: transparent;
+  border: 0;
+  border-left: 1px solid var(--line);
+  color: var(--ink-dim);
+  padding: 8px 13px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.rangep button:hover {
+  background: var(--panel-3);
+  color: var(--ink);
+}
+.rangep button[aria-pressed='true'] {
+  background: var(--way);
+  color: var(--ground);
+}
+</style>
--- a/src/components/PressCell.vue
+++ b/src/components/PressCell.vue
@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { orderColor } from '@/data/orderColors'
+import type { PressInfo } from '@/types/overview'
+
+const props = defineProps<{ press: PressInfo }>()
+const { t } = useI18n()
+
+const de = (n: number) => Math.round(n).toLocaleString('de-DE')
+const ledColor = computed(() => `var(--${props.press.status === 'run' ? 'run' : props.press.status === 'stop' ? 'stop' : 'idle'})`)
+const statusText = computed(() =>
+  props.press.status === 'run' ? t('press.statusRun') : props.press.status === 'stop' ? t('press.statusStop') : t('press.statusIdle'),
+)
+</script>
+
+<template>
+  <div v-if="press.placeholder" class="press empty">
+    <div>
+      <div class="pn">{{ press.name }}</div>
+      <div class="sub">{{ t('press.free') }}</div>
+    </div>
+  </div>
+  <div v-else class="press" :class="press.status">
+    <div class="top">
+      <span class="pn">{{ press.name }}</span>
+      <span class="stled" :style="{ background: ledColor }"></span>
+    </div>
+    <div class="chips">
+      <span v-for="(o, i) in press.orders" :key="i" class="chip" :style="{ background: orderColor(o.colorIndex) }"></span>
+    </div>
+    <template v-if="press.status === 'run'">
+      <div class="good num">{{ de(press.good) }}</div>
+      <div class="sub">{{ t('press.good') }} · {{ press.cycleTime }}s</div>
+    </template>
+    <template v-else>
+      <div class="good status" :style="{ color: ledColor }">{{ statusText }}</div>
+      <div class="sub">{{ press.note || '' }}</div>
+    </template>
+    <div class="nv">
+      <span class="nvv num">{{ press.notVerladen }}</span>
+      <span class="nvl">{{ t('press.notVerladen') }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.press {
+  border: 1px solid var(--line-2);
+  border-top: 2px solid var(--line-2);
+  border-radius: var(--r);
+  background: linear-gradient(180deg, var(--panel), var(--panel-2));
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+}
+.press::after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  right: -7px;
+  bottom: -7px;
+  height: 7px;
+  background: rgba(2, 6, 12, 0.32);
+  transform: skewX(-52deg);
+  transform-origin: top left;
+}
+.press.run {
+  border-top-color: var(--press);
+}
+.press.stop {
+  border-top-color: var(--stop);
+}
+.press.idle {
+  border-top-color: var(--idle);
+}
+.top {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.pn {
+  font-weight: 800;
+  font-size: 0.88rem;
+}
+.stled {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  margin-left: auto;
+}
+.chips {
+  display: flex;
+  gap: 3px;
+  min-height: 12px;
+}
+.chip {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+}
+.good {
+  font-family: var(--mono);
+  font-size: 1.25rem;
+  font-weight: 800;
+  line-height: 1;
+  margin-top: 2px;
+}
+.good.status {
+  font-size: 0.75rem;
+}
+.sub {
+  font-family: var(--mono);
+  font-size: 0.6rem;
+  color: var(--ink-faint);
+}
+.nv {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  margin-top: 5px;
+  padding-top: 5px;
+  border-top: 1px solid var(--line);
+}
+.nvv {
+  font-family: var(--mono);
+  font-size: 0.88rem;
+  font-weight: 700;
+  color: var(--press);
+}
+.nvl {
+  font-family: var(--mono);
+  font-size: 0.53rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  line-height: 1.1;
+}
+.press.empty {
+  border-style: dashed;
+  border-color: var(--line);
+  background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(148, 163, 184, 0.04) 6px, rgba(148, 163, 184, 0.04) 12px);
+  align-items: center;
+  justify-content: center;
+  color: var(--ink-faint);
+  text-align: center;
+}
+.press.empty::after {
+  display: none;
+}
+</style>
--- a/src/components/PressLane.vue
+++ b/src/components/PressLane.vue
@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import OrderLine from '@/components/OrderLine.vue'
+import type { CartOnWay } from '@/types/overview'
+
+const props = defineProps<{ carts: CartOnWay[] }>()
+const { t } = useI18n()
+
+const active = computed(() => props.carts.length > 0)
+const partsOf = (c: CartOnWay) => c.orders.reduce((s, o) => s + o.qty, 0)
+</script>
+
+<template>
+  <div class="lane" :class="{ active }">
+    <span class="conn"></span>
+    <span class="lc" :class="active ? 'on' : 'off'">
+      {{ active ? t('lane.wagen', { n: carts.length }) : t('lane.none') }}
+    </span>
+    <div v-for="cart in carts" :key="cart.cartId" class="cart">
+      <div class="chd">
+        <span class="cid">{{ cart.cartId }}</span>
+        <span class="cp">{{ t('lane.parts', { n: partsOf(cart) }) }}</span>
+      </div>
+      <div class="cbody">
+        <OrderLine v-for="(o, i) in cart.orders" :key="i" :order-no="o.orderNo" :qty="o.qty" :color-index="o.colorIndex" />
+      </div>
+      <div class="cfoot">{{ t('lane.ovenIn', { n: cart.etaMin }) }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lane {
+  position: relative;
+  min-height: 132px;
+  max-height: 236px;
+  overflow-y: auto;
+  padding-top: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  scrollbar-width: thin;
+}
+.conn {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  transform: translateX(-50%);
+  z-index: 0;
+  background: repeating-linear-gradient(180deg, var(--way) 0 3px, transparent 3px 11px);
+  background-size: 2px 11px;
+  opacity: 0.3;
+}
+.lane.active .conn {
+  opacity: 0.95;
+  animation: flowdown 1.05s linear infinite;
+}
+.lc {
+  position: absolute;
+  left: 50%;
+  top: 3px;
+  transform: translateX(-50%);
+  font-family: var(--mono);
+  font-size: 0.53rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  background: var(--ground);
+  padding: 0 5px;
+  z-index: 3;
+}
+.lc.on {
+  color: var(--way);
+}
+.lc.off {
+  color: var(--ink-faint);
+}
+.cart {
+  position: relative;
+  z-index: 2;
+  border: 1px solid var(--line-2);
+  border-top: 2px solid var(--way);
+  border-radius: var(--r);
+  background: var(--panel);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+}
+.chd {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  background: var(--panel-3);
+  border-bottom: 1px solid var(--line);
+}
+.cid {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  font-weight: 800;
+}
+.cp {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  color: var(--ink-dim);
+}
+.cbody {
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.cfoot {
+  padding: 4px 8px;
+  border-top: 1px solid var(--line);
+  font-family: var(--mono);
+  font-size: 0.62rem;
+  color: var(--way);
+}
+</style>
--- a/src/components/ProductionLine.vue
+++ b/src/components/ProductionLine.vue
@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import PressCell from '@/components/PressCell.vue'
+import PressLane from '@/components/PressLane.vue'
+import OvenBand from '@/components/OvenBand.vue'
+import FinishedBand from '@/components/FinishedBand.vue'
+import type { OverviewPayload, CartOnWay } from '@/types/overview'
+
+const props = defineProps<{ payload: OverviewPayload }>()
+const { t } = useI18n()
+
+const running = computed(() => props.payload.presses.filter((p) => p.status === 'run').length)
+const total = computed(() => props.payload.presses.length)
+const wayCarts = computed(() => Object.values(props.payload.onWay).flat().length)
+const rangeLabel = computed(() => t(`range.${props.payload.range}`))
+
+function cartsFor(pressName: string): CartOnWay[] {
+  return props.payload.onWay[pressName] ?? []
+}
+</script>
+
+<template>
+  <div class="production">
+    <div class="stagehd">
+      <span class="sw" :style="{ background: 'var(--press)' }"></span>
+      {{ t('line.header') }}
+      <span class="c">{{ t('line.active', { running, total }) }}</span>
+    </div>
+
+    <div class="matrix">
+      <div class="grid">
+        <PressCell v-for="p in payload.presses" :key="'p-' + p.name" :press="p" />
+        <PressLane v-for="p in payload.presses" :key="'l-' + p.name" :carts="cartsFor(p.name)" />
+      </div>
+    </div>
+
+    <div class="link" :style="{ '--lc': 'var(--way)' }">
+      <span class="lbl"><b>{{ t('line.toOven') }}</b> → {{ t('line.toOvenTail') }} · {{ t('line.wagen', { n: wayCarts }) }}</span>
+    </div>
+
+    <OvenBand :batches="payload.oven" :temp-c="payload.ovenTempC" :avg-min="payload.ovenAvgMin" />
+
+    <div class="link" :style="{ '--lc': 'var(--done)' }">
+      <span class="lbl"><b>{{ t('line.toStorage') }}</b> → {{ t('line.toStorageTail') }}</span>
+    </div>
+
+    <FinishedBand :finished="payload.finished" :list="payload.finishedList" :range-label="rangeLabel" />
+  </div>
+</template>
+
+<style scoped>
+.production {
+  border: 1px solid var(--line-2);
+  border-radius: 8px;
+  padding: 14px 14px 16px;
+  background:
+    repeating-linear-gradient(0deg, transparent 0 39px, rgba(148, 163, 184, 0.04) 39px 40px),
+    repeating-linear-gradient(90deg, transparent 0 39px, rgba(148, 163, 184, 0.04) 39px 40px),
+    #0a0e13;
+}
+html:not(.dark) .production {
+  background: var(--panel);
+}
+.stagehd {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  margin: 0 0 9px;
+}
+.sw {
+  width: 9px;
+  height: 9px;
+  border-radius: var(--r);
+}
+.c {
+  margin-left: auto;
+  color: var(--ink-dim);
+}
+.matrix {
+  overflow-x: auto;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(10, minmax(102px, 1fr));
+  gap: 8px;
+  min-width: 1080px;
+}
+.link {
+  position: relative;
+  height: 34px;
+  margin: 4px 0;
+}
+.link::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 9px;
+  width: 3px;
+  transform: translateX(-50%);
+  background: repeating-linear-gradient(180deg, var(--lc) 0 4px, transparent 4px 11px);
+  background-size: 3px 11px;
+  animation: flowdown 1s linear infinite;
+  box-shadow: 0 0 8px var(--lc);
+}
+.link::after {
+  content: '▼';
+  position: absolute;
+  left: 50%;
+  bottom: -3px;
+  transform: translateX(-50%);
+  color: var(--lc);
+  font-size: 0.8rem;
+  line-height: 1;
+}
+.lbl {
+  position: absolute;
+  left: calc(50% + 16px);
+  top: 8px;
+  font-family: var(--mono);
+  font-size: 0.6rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  white-space: nowrap;
+}
+.lbl b {
+  color: var(--ink-dim);
+}
+</style>
--- a/src/data/orderColors.ts
+++ b/src/data/orderColors.ts
@ -0,0 +1,11 @@
+// Order-identity colours — copied verbatim from PressV (src/lib/orderColors.ts)
+// so an order reads with the SAME chip colour across every SPRO app.
+//
+// The API sends only a colour INDEX (0..3) per order; this maps it to a hex.
+// Index wraps if a cart ever carries more than four orders.
+
+export const ORDER_COLORS = ['#5794F2', '#E8825A', '#B57EDC', '#4FB7A8'] as const
+
+export function orderColor(i: number): string {
+  return ORDER_COLORS[i % ORDER_COLORS.length]
+}
--- a/src/data/sample.ts
+++ b/src/data/sample.ts
@ -0,0 +1,100 @@
+// Bundled sample payload — powers `npm run dev` (no gateway backend) and acts as
+// a graceful fallback if the data API is unreachable. Mirrors the SAMPLE data in
+// ../../api/routes.py (Python). When the gateway serves real data this is unused.
+
+import type {
+  OverviewPayload,
+  OrderPortion,
+  OrderChip,
+  PressInfo,
+  CartOnWay,
+  OvenBatch,
+  RangeCode,
+} from '@/types/overview'
+
+// order key → [Auftragsnummer, colour index]
+const ORDERS: Record<string, [string, number]> = {
+  o1: ['O-4471', 0],
+  o2: ['O-4460', 1],
+  o3: ['O-4455', 2],
+  o4: ['O-4489', 3],
+}
+
+const RANGE_FACTORS: Record<RangeCode, number> = { '12h': 0.5, '1d': 1, '7d': 6.4, '14d': 12.7, '30d': 27.2 }
+
+function portions(...specs: [string, number][]): OrderPortion[] {
+  return specs.map(([k, qty]) => ({ orderNo: ORDERS[k][0], qty, colorIndex: ORDERS[k][1] }))
+}
+function chips(...keys: string[]): OrderChip[] {
+  return keys.map((k) => ({ orderNo: ORDERS[k][0], colorIndex: ORDERS[k][1] }))
+}
+
+const PRESSES: PressInfo[] = [
+  { name: 'P1', status: 'run', orders: chips('o1'), good: 1240, cycleTime: '4.2', notVerladen: 34, note: null, placeholder: false },
+  { name: 'P2', status: 'run', orders: chips('o2'), good: 880, cycleTime: '6.1', notVerladen: 18, note: null, placeholder: false },
+  { name: 'P3', status: 'run', orders: chips('o1', 'o4'), good: 612, cycleTime: '4.3', notVerladen: 52, note: null, placeholder: false },
+  { name: 'P4', status: 'stop', orders: chips('o2'), good: 430, cycleTime: null, notVerladen: 0, note: 'Werkzeug rüsten', placeholder: false },
+  { name: 'P5', status: 'run', orders: chips('o3'), good: 1975, cycleTime: '2.8', notVerladen: 41, note: null, placeholder: false },
+  { name: 'P6', status: 'run', orders: chips('o2'), good: 744, cycleTime: '6.0', notVerladen: 23, note: null, placeholder: false },
+  { name: 'P7', status: 'idle', orders: [], good: 0, cycleTime: null, notVerladen: 0, note: 'Kein Auftrag', placeholder: false },
+  { name: 'P8', status: 'run', orders: chips('o4'), good: 1102, cycleTime: '3.9', notVerladen: 29, note: null, placeholder: false },
+  { name: 'P9', status: 'run', orders: chips('o1'), good: 968, cycleTime: '4.1', notVerladen: 12, note: null, placeholder: false },
+  { name: 'P10', status: 'idle', orders: [], good: 0, cycleTime: null, notVerladen: 0, note: null, placeholder: true },
+]
+
+const ON_WAY: Record<string, CartOnWay[]> = {
+  P3: [{ cartId: 'C-014a', orders: portions(['o1', 54], ['o2', 42]), etaMin: 3 }],
+  P5: [{ cartId: 'C-014b', orders: portions(['o3', 60]), etaMin: 7 }],
+  P8: [
+    { cartId: 'C-015', orders: portions(['o1', 30], ['o4', 30], ['o2', 30], ['o3', 30]), etaMin: 9 },
+    { cartId: 'C-019', orders: portions(['o4', 36]), etaMin: 14 },
+    { cartId: 'C-020', orders: portions(['o1', 28]), etaMin: 19 },
+  ],
+}
+
+const OVEN: OvenBatch[] = [
+  { cartId: 'C-011', orders: portions(['o1', 88]), totalMin: 120, remainingMin: 42 },
+  { cartId: 'C-012', orders: portions(['o2', 60], ['o4', 44]), totalMin: 120, remainingMin: 71 },
+  { cartId: 'C-013', orders: portions(['o3', 72]), totalMin: 120, remainingMin: 12 },
+  { cartId: 'C-016', orders: portions(['o1', 40], ['o2', 36]), totalMin: 120, remainingMin: 98 },
+  { cartId: 'C-017', orders: portions(['o4', 80]), totalMin: 120, remainingMin: 104 },
+]
+
+const FINISHED_BASE = { carts: 47, parts: 5120, scrap: 63, avgOvenMin: 118 }
+const FINISHED_BY_ORDER: Record<string, number> = { o1: 1680, o2: 1290, o3: 1150, o4: 1000 }
+
+const FINISHED_LIST = [
+  { cartId: 'C-010', orders: portions(['o2', 50], ['o3', 40]), ago: 'vor 8 min' },
+  { cartId: 'C-009', orders: portions(['o1', 64]), ago: 'vor 21 min' },
+  { cartId: 'C-008', orders: portions(['o4', 58]), ago: 'vor 35 min' },
+  { cartId: 'C-007', orders: portions(['o2', 44], ['o1', 20]), ago: 'vor 52 min' },
+  { cartId: 'C-006', orders: portions(['o3', 72]), ago: 'vor 1 h 6 min' },
+]
+
+/** Build the sample payload for a range (finished figures scale; live stats don't). */
+export function sampleOverview(range: RangeCode = '1d'): OverviewPayload {
+  const f = RANGE_FACTORS[range] ?? 1
+  return {
+    plant: 'Werk 1',
+    generatedAt: new Date().toISOString(),
+    range,
+    ovenTempC: 185,
+    ovenAvgMin: 120,
+    sample: true,
+    presses: PRESSES,
+    onWay: ON_WAY,
+    oven: OVEN,
+    finished: {
+      carts: Math.round(FINISHED_BASE.carts * f),
+      parts: Math.round(FINISHED_BASE.parts * f),
+      scrap: Math.round(FINISHED_BASE.scrap * f),
+      avgOvenMin: FINISHED_BASE.avgOvenMin,
+      byOrder: Object.entries(FINISHED_BY_ORDER).map(([k, v]) => ({
+        orderNo: ORDERS[k][0],
+        colorIndex: ORDERS[k][1],
+        parts: Math.round(v * f),
+      })),
+    },
+    finishedList: FINISHED_LIST,
+  }
+}
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@ -0,0 +1,77 @@
+export default {
+  app: {
+    brand: 'PressV',
+    plant: 'Werk',
+    line: 'Temper-Linie',
+    subtitle: 'Live-Übersicht',
+    live: 'Live',
+    demo: 'Demo-Daten',
+  },
+  flow: {
+    presses: 'Pressen',
+    pressesSub: 'inkl. nicht verladen',
+    onWay: 'Auf dem Weg',
+    oven: 'Ofen',
+    finished: 'Fertig',
+    orders: 'Aufträge',
+    ordersMax: 'bis 4 / Wagen',
+  },
+  kpi: {
+    notVerladen: 'Nicht verladen · auf Linie',
+    notVerladenSub: 'Teile noch an der Presse',
+    onWay: 'Auf dem Weg',
+    onWaySub: '{n} Wagen unterwegs',
+    oven: 'Im Ofen',
+    ovenSub: '{n} Batches',
+    finished: 'Fertig',
+    finishedSub: '{n} Wagen getempert',
+    scrapRate: 'Ausschussquote',
+    scrapRateSub: 'Ausschuss / Gesamt',
+  },
+  line: {
+    header: 'Pressenhalle → auf dem Weg',
+    active: '{running}/{total} aktiv · Wagen hängen unter ihrer Presse',
+    toOven: 'Auf dem Weg',
+    toOvenTail: 'in den Ofen',
+    toStorage: 'Aus dem Ofen',
+    toStorageTail: 'Fertig / Lager',
+    wagen: '{n} Wagen',
+  },
+  press: {
+    good: 'Gut',
+    notVerladen: 'nicht verladen',
+    free: 'frei',
+    statusRun: 'Läuft',
+    statusStop: 'Störung',
+    statusIdle: 'Leerlauf',
+  },
+  lane: {
+    wagen: '{n} Wagen ↓',
+    none: '—',
+    parts: '{n} Teile',
+    ovenIn: 'Ofen in {n} min',
+  },
+  oven: {
+    title: 'Temper-Ofen',
+    meta: '{parts} Teile · {batches} Batches · Ø {avg} min',
+    nextOut: 'nächster raus',
+    progress: '{done}/{total} min getempert',
+    unit: 'min',
+  },
+  finished: {
+    title: 'Fertig · getempert',
+    range: 'Zeitraum · {label}',
+    goodParts: 'Gutteile',
+    carts: 'Wagen',
+    scrap: 'Ausschuss',
+    avgOven: 'Ø Ofenzeit',
+  },
+  range: {
+    label: 'Fertig · Zeitraum',
+    '12h': 'letzte 12 h',
+    '1d': 'letzter Tag',
+    '7d': 'letzte 7 Tage',
+    '14d': 'letzte 14 Tage',
+    '30d': 'letzte 30 Tage',
+  },
+}
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@ -0,0 +1,78 @@
+// English mirrors de.ts exactly (same key shape) — de is the canonical schema.
+export default {
+  app: {
+    brand: 'PressV',
+    plant: 'Plant',
+    line: 'Temper Line',
+    subtitle: 'Live Overview',
+    live: 'Live',
+    demo: 'Sample data',
+  },
+  flow: {
+    presses: 'Presses',
+    pressesSub: 'incl. not yet loaded',
+    onWay: 'On the way',
+    oven: 'Oven',
+    finished: 'Finished',
+    orders: 'Orders',
+    ordersMax: 'up to 4 / cart',
+  },
+  kpi: {
+    notVerladen: 'Not loaded · on line',
+    notVerladenSub: 'Parts still at the press',
+    onWay: 'On the way',
+    onWaySub: '{n} carts in transit',
+    oven: 'In oven',
+    ovenSub: '{n} batches',
+    finished: 'Finished',
+    finishedSub: '{n} carts tempered',
+    scrapRate: 'Scrap rate',
+    scrapRateSub: 'Scrap / total',
+  },
+  line: {
+    header: 'Press hall → on the way',
+    active: '{running}/{total} active · carts hang under their press',
+    toOven: 'On the way',
+    toOvenTail: 'into the oven',
+    toStorage: 'Out of the oven',
+    toStorageTail: 'finished / storage',
+    wagen: '{n} carts',
+  },
+  press: {
+    good: 'Good',
+    notVerladen: 'not loaded',
+    free: 'free',
+    statusRun: 'Running',
+    statusStop: 'Fault',
+    statusIdle: 'Idle',
+  },
+  lane: {
+    wagen: '{n} carts ↓',
+    none: '—',
+    parts: '{n} parts',
+    ovenIn: 'oven in {n} min',
+  },
+  oven: {
+    title: 'Temper oven',
+    meta: '{parts} parts · {batches} batches · avg {avg} min',
+    nextOut: 'next out',
+    progress: '{done}/{total} min tempered',
+    unit: 'min',
+  },
+  finished: {
+    title: 'Finished · tempered',
+    range: 'Window · {label}',
+    goodParts: 'Good parts',
+    carts: 'Carts',
+    scrap: 'Scrap',
+    avgOven: 'Avg oven time',
+  },
+  range: {
+    label: 'Finished · window',
+    '12h': 'last 12 h',
+    '1d': 'last day',
+    '7d': 'last 7 days',
+    '14d': 'last 14 days',
+    '30d': 'last 30 days',
+  },
+}
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@ -0,0 +1,28 @@
+import { createI18n } from 'vue-i18n'
+import de from './de'
+import en from './en'
+
+// German is the canonical schema (shop-floor default); en must match its shape.
+// Module augmentation propagates the typed key paths to t() so a typo breaks the
+// build instead of silently returning the key string.
+type MessageSchema = typeof de
+
+declare module 'vue-i18n' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface DefineLocaleMessage extends MessageSchema {}
+}
+
+// Default German; ?lang=en on the iframe URL switches (handy for Grafana embeds).
+function initialLocale(): 'de' | 'en' {
+  const p = new URLSearchParams(window.location.search).get('lang')
+  return p === 'en' ? 'en' : 'de'
+}
+
+const i18n = createI18n<[MessageSchema], 'de' | 'en', false>({
+  legacy: false,
+  locale: initialLocale(),
+  fallbackLocale: 'de',
+  messages: { de, en },
+})
+
+export default i18n
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,44 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import { definePreset } from '@primeuix/themes'
+import Nora from '@primeuix/themes/nora'
+import 'primeicons/primeicons.css'
+import '@fontsource-variable/inter'
+// @sp-ui-kit tokens FIRST so the CSS variables (surfaces, text, status, density,
+// dark/light) exist before anything references them; app style.css layers the
+// temper/order colours + prototype styles on top.
+import '@sp-ui-kit/tokens/css'
+import router from './router'
+import i18n from './i18n'
+import App from './App.vue'
+import './style.css'
+
+// Same Industrial preset as PressV: Nora with a sky-blue primary (industrial HMI
+// accent). darkModeSelector ".dark" matches index.html's <html class="dark">.
+const Industrial = definePreset(Nora, {
+  semantic: {
+    primary: {
+      50: '{sky.50}',
+      100: '{sky.100}',
+      200: '{sky.200}',
+      300: '{sky.300}',
+      400: '{sky.400}',
+      500: '{sky.500}',
+      600: '{sky.600}',
+      700: '{sky.700}',
+      800: '{sky.800}',
+      900: '{sky.900}',
+      950: '{sky.950}',
+    },
+  },
+})
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.use(i18n)
+app.use(PrimeVue, {
+  theme: { preset: Industrial, options: { darkModeSelector: '.dark' } },
+})
+app.mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,15 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+// Static (eager) import — NOT `() => import(...)`. The board runs embedded in a
+// Grafana kiosk panel; a single bundle that loads once avoids re-fetching lazy
+// chunks over a flaky shop-floor network (same rationale as PressV).
+import TemperOverviewPage from '@/views/TemperOverviewPage.vue'
+
+// Hash history so StaticFiles never sees a deep path it can't resolve — the
+// server-visible URL stays "/module/temper_overview/" and routing happens after
+// "#". Base comes from vite `base` via import.meta.env.BASE_URL.
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes: [{ path: '/', name: 'overview', component: TemperOverviewPage }],
+})
+
+export default router
--- a/src/stores/temperOverview.ts
+++ b/src/stores/temperOverview.ts
@ -0,0 +1,116 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import api from '@/api'
+import { sampleOverview } from '@/data/sample'
+import type { OverviewPayload, RangeCode } from '@/types/overview'
+
+// Mirrors PressV's productionOverview store: sync loadCache() → hydrate() cold
+// start → refresh() background fetch → startPolling(ms). sessionStorage caches the
+// last payload so a reload paints instantly with stale data while fresh loads.
+//
+// Fallback: if the data API is unreachable (e.g. `npm run dev` with no gateway),
+// the store falls back to the bundled sample payload so the design still renders.
+
+const CACHE_KEY = 'temper_overview_payload'
+
+export const useTemperOverviewStore = defineStore('temperOverview', () => {
+  const payload = ref<OverviewPayload | null>(null)
+  const range = ref<RangeCode>('1d')
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const usingSample = ref(false)
+  const lastUpdated = ref<number | null>(null)
+
+  let timer: ReturnType<typeof setInterval> | null = null
+
+  const hasData = computed(() => payload.value !== null)
+
+  function saveCache() {
+    try {
+      sessionStorage.setItem(CACHE_KEY, JSON.stringify({ payload: payload.value, range: range.value }))
+    } catch {
+      /* best-effort */
+    }
+  }
+
+  function loadCache() {
+    try {
+      const raw = sessionStorage.getItem(CACHE_KEY)
+      if (!raw) return
+      const blob = JSON.parse(raw) as { payload: OverviewPayload | null; range: RangeCode }
+      payload.value = blob.payload ?? null
+      if (blob.range) range.value = blob.range
+    } catch {
+      /* corrupt cache — ignore */
+    }
+  }
+
+  /** Foreground load: spinner only on a true cold start (no cache). */
+  async function hydrate() {
+    if (!hasData.value) loading.value = true
+    await refresh()
+  }
+
+  /** Background refresh. Keeps prior data on error; falls back to sample data. */
+  async function refresh() {
+    error.value = null
+    try {
+      const res = await api.get<OverviewPayload>('/overview', { params: { range: range.value } })
+      // Guard the shape: a dev server (vite dev/preview) SPA-fallbacks unknown
+      // routes to index.html (HTTP 200 HTML), so a missing backend looks like a
+      // "successful" non-JSON response. Treat anything without a presses[] array
+      // as a miss → fall through to the bundled sample.
+      if (!res.data || !Array.isArray(res.data.presses)) {
+        throw new Error('Unexpected /overview response (no backend?)')
+      }
+      payload.value = res.data
+      usingSample.value = res.data.sample === true
+      lastUpdated.value = Date.now()
+      saveCache()
+    } catch (e) {
+      // No backend (dev) or API down → render the bundled sample so the board is
+      // never blank. Real deployments hit the gateway API and never land here.
+      payload.value = sampleOverview(range.value)
+      usingSample.value = true
+      lastUpdated.value = Date.now()
+      error.value = e instanceof Error ? e.message : 'Overview API unreachable — showing sample data'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /** Change the finished-figures window and refetch immediately. */
+  async function setRange(code: RangeCode) {
+    range.value = code
+    await refresh()
+  }
+
+  function startPolling(ms = 12000) {
+    if (timer) return
+    timer = setInterval(refresh, ms)
+  }
+
+  function stopPolling() {
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+  }
+
+  loadCache()
+
+  return {
+    payload,
+    range,
+    loading,
+    error,
+    usingSample,
+    lastUpdated,
+    hasData,
+    hydrate,
+    refresh,
+    setRange,
+    startPolling,
+    stopPolling,
+  }
+})
--- a/src/style.css
+++ b/src/style.css
@ -0,0 +1,146 @@
+@import 'tailwindcss';
+
+/* Class-based dark mode: dark: utilities apply when .dark is on any ancestor
+   (index.html sets <html class="dark">). Matches PressV + PrimeVue's selector. */
+@variant dark (&:where(.dark, .dark *));
+
+/* HMI panel breakpoints (same as the fleet) — usable as hmi-sm:/hmi-md:/hmi-lg:. */
+@theme {
+  --breakpoint-hmi-sm: 800px;
+  --breakpoint-hmi-md: 1024px;
+  --breakpoint-hmi-lg: 1280px;
+}
+
+/* ==========================================================================
+   BOARD TOKENS
+   Neutral surfaces are the locked prototype's board palette (dark, layered,
+   with a radial glow). The FLOW ACCENTS match PressV's --c-* process colours
+   verbatim so the temper process reads the same across every SPRO app
+   (press=violet, on-the-way/cart=cyan, oven=orange, hot=red, finished=emerald).
+   Font families come from @sp-ui-kit/tokens (Inter Variable + mono).
+   ========================================================================== */
+:root {
+  --ground: #11151b;
+  --panel: #1a212a;
+  --panel-2: #222b36;
+  --panel-3: #2a3542;
+  --line: #2c3641;
+  --line-2: #3a4654;
+
+  --ink: #e8edf2;
+  --ink-dim: #97a3b1;
+  --ink-faint: #5a6573;
+
+  --press: #a78bfa; /* violet  — Pressen / not yet loaded */
+  --way: #22d3ee; /* cyan    — Auf dem Weg / cart          */
+  --oven: #f97316; /* orange  — Ofen                       */
+  --hot: #ef4444; /* red     — Ofen, kurz vor raus         */
+  --done: #34d399; /* emerald — Fertig / Lager             */
+
+  --o1: #5794f2;
+  --o2: #e8825a;
+  --o3: #b57edc;
+  --o4: #4fb7a8;
+
+  --run: #34d399;
+  --stop: #ef4444;
+  --idle: #5a6573;
+
+  --r: 2px;
+  --sans: var(--font-family-sans, 'Inter Variable', ui-sans-serif, system-ui, sans-serif);
+  --mono: var(--font-family-mono, ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, Consolas, monospace);
+}
+
+/* Light theme (no .dark on <html>): cool slate surfaces + darker accents that
+   stay legible on light backgrounds (PressV's contrast-checked --c-* light set). */
+html:not(.dark) {
+  --ground: #f1f5f9;
+  --panel: #e2e8f0;
+  --panel-2: #cbd5e1;
+  --panel-3: #94a3b8;
+  --line: #cbd5e1;
+  --line-2: #94a3b8;
+
+  --ink: #0f172a;
+  --ink-dim: #475569;
+  --ink-faint: #64748b;
+
+  --press: #6d28d9;
+  --way: #0e7490;
+  --oven: #c2410c;
+  --hot: #dc2626;
+  --done: #15803d;
+}
+
+* {
+  box-sizing: border-box;
+}
+html {
+  -webkit-text-size-adjust: 100%;
+  /* Fluid base like the fleet: ~13px small screens → 16px large. */
+  font-size: clamp(13px, 1.6vw, 16px);
+  font-family: var(--sans);
+}
+body {
+  margin: 0;
+  color: var(--ink);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  background:
+    radial-gradient(1300px 700px at 72% -12%, #182230 0%, transparent 58%),
+    var(--ground);
+}
+html:not(.dark) body {
+  background:
+    radial-gradient(1300px 700px at 72% -12%, #e2e8f0 0%, transparent 58%),
+    var(--ground);
+}
+
+/* Tabular monospace numerals — used for every count on the board. */
+.num {
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Global keyframes (referenced by scoped component styles) ──────────────── */
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes flowdown {
+  to {
+    background-position: 0 11px;
+  }
+}
+@keyframes flame {
+  0%,
+  100% {
+    opacity: 0.8;
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-1px) scale(1.07);
+  }
+}
+@keyframes flicker {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* Reduced motion: disable the conveyor / flame animations (accessibility). */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+  }
+}
--- a/src/types/overview.ts
+++ b/src/types/overview.ts
@ -0,0 +1,84 @@
+// Response contract for GET /module/temper_overview/api/overview
+// Mirrors the payload built in ../api/routes.py (Python). Keep the two in sync.
+
+export type RangeCode = '12h' | '1d' | '7d' | '14d' | '30d'
+export type PressStatus = 'run' | 'stop' | 'idle'
+
+/** An order portion on a cart: chip colour + order number + piece count. */
+export interface OrderPortion {
+  orderNo: string
+  qty: number
+  colorIndex: number
+}
+
+/** An order chip on a press header (no qty). */
+export interface OrderChip {
+  orderNo: string
+  colorIndex: number
+}
+
+export interface PressInfo {
+  name: string
+  status: PressStatus
+  orders: OrderChip[]
+  /** good parts produced at the press (this order/shift) */
+  good: number
+  /** last cycle time in seconds, formatted (e.g. "4.2"); null when stopped/idle */
+  cycleTime: string | null
+  /** produced but not yet loaded onto a temper cart */
+  notVerladen: number
+  note: string | null
+  /** true for the dashed empty placeholder press (e.g. P10) */
+  placeholder: boolean
+}
+
+export interface CartOnWay {
+  cartId: string
+  orders: OrderPortion[]
+  /** minutes until it enters the oven */
+  etaMin: number
+}
+
+export interface OvenBatch {
+  cartId: string
+  orders: OrderPortion[]
+  totalMin: number
+  remainingMin: number
+}
+
+export interface FinishedByOrder {
+  orderNo: string
+  colorIndex: number
+  parts: number
+}
+
+export interface FinishedSummary {
+  carts: number
+  parts: number
+  scrap: number
+  avgOvenMin: number
+  byOrder: FinishedByOrder[]
+}
+
+export interface FinishedCart {
+  cartId: string
+  orders: OrderPortion[]
+  ago: string
+}
+
+export interface OverviewPayload {
+  plant: string
+  /** ISO timestamp the payload was generated (tz-aware) */
+  generatedAt: string
+  range: RangeCode
+  ovenTempC: number
+  ovenAvgMin: number
+  /** true when the backend is returning sample data (base scaffold) */
+  sample?: boolean
+  presses: PressInfo[]
+  /** carts on the way, keyed by origin press name */
+  onWay: Record<string, CartOnWay[]>
+  oven: OvenBatch[]
+  finished: FinishedSummary
+  finishedList: FinishedCart[]
+}
--- a/src/views/TemperOverviewPage.vue
+++ b/src/views/TemperOverviewPage.vue
@ -0,0 +1,63 @@
+<!--
+  TemperOverviewPage.vue — the whole-line temper board (design #4 "Shop-floor
+  Schematic", locked). One connected line: Pressen → (cyan ↓) → Ofen → (green ↓)
+  → Fertig. Carts hang under their origin press; the oven & finished bands scroll
+  horizontally. The time-range picker scopes ONLY the Fertig figures.
+
+  Data comes from the store (GET …/api/overview, polled). With no backend the
+  store falls back to bundled sample data, so `npm run dev` renders the design.
+-->
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+import OverviewHeader from '@/components/OverviewHeader.vue'
+import FlowLegend from '@/components/FlowLegend.vue'
+import KpiStrip from '@/components/KpiStrip.vue'
+import ProductionLine from '@/components/ProductionLine.vue'
+import { useTemperOverviewStore } from '@/stores/temperOverview'
+
+const { t } = useI18n()
+const store = useTemperOverviewStore()
+const { payload, range, loading, hasData, usingSample } = storeToRefs(store)
+
+onMounted(async () => {
+  await store.hydrate()
+  store.startPolling(12000)
+})
+onUnmounted(() => store.stopPolling())
+</script>
+
+<template>
+  <div class="wrap">
+    <template v-if="hasData && payload">
+      <OverviewHeader
+        :plant="payload.plant"
+        :range="range"
+        :sample="usingSample"
+        @update:range="store.setRange"
+      />
+      <FlowLegend />
+      <KpiStrip :payload="payload" />
+      <ProductionLine :payload="payload" />
+    </template>
+
+    <div v-else-if="loading" class="state">{{ t('app.live') }} …</div>
+  </div>
+</template>
+
+<style scoped>
+.wrap {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 20px 22px 80px;
+}
+.state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  color: var(--ink-dim);
+  font-family: var(--mono);
+}
+</style>
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -0,0 +1,15 @@
+// Tailwind config — opts into the @sp-ui-kit/tokens preset (same as PressV).
+//
+// This SPA uses Tailwind v4's CSS-first @theme directive in src/style.css for
+// its OWN tokens (flow/order colours, HMI breakpoints). This file is ADDITIVE —
+// it pulls in the sp-ui-kit token surface (primary scale, surface levels,
+// status colours, nav vars, density-aware spacing) so `surface-1`, `ink`,
+// `line`, `danger`, `hmi-sm:` etc. resolve identically to the rest of the fleet.
+// Tailwind v4 auto-discovers this file; no @config directive needed in the CSS.
+//
+// .cjs because package.json is "type": "module" — keeps require() available.
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [require('@sp-ui-kit/tokens/tailwind-preset')],
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,23 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "noEmit": true,
+    "types": ["vite/client"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "exactOptionalPropertyTypes": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "env.d.ts"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,34 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+import { fileURLToPath, URL } from 'node:url'
+
+// This SPA is served by the SPRO gateway as static files under a URL PREFIX
+// (see ../__init__.py → MODULE_PREFIX). `base` MUST equal that prefix WITH a
+// trailing slash, or the built asset URLs 404 behind the gateway. It also
+// becomes `import.meta.env.BASE_URL`, which src/api/index.ts uses to build the
+// data-API base — so the app keeps working if the prefix ever changes.
+const BASE = '/module/temper_overview/'
+
+export default defineConfig({
+  base: BASE,
+  plugins: [vue(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+    // Match PressV: dedupe the framework copies so a future `yarn link` of an
+    // @sp-ui-kit/* package can't pull a second Vue/PrimeVue into the bundle.
+    dedupe: ['vue', 'primevue', '@primevue/themes', '@primeuix/themes', 'primeicons'],
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    // Eager, single-bundle build (the router uses static imports — see
+    // src/router/index.ts). This page is embedded in a Grafana kiosk panel; a
+    // single bundle that loads once avoids re-fetching lazy chunks over a flaky
+    // shop-floor network. The committed dist/ is what the gateway serves — the
+    // deploy host has no Node toolchain, so we never build there.
+    chunkSizeWarningLimit: 1500,
+  },
+})