feat(startseite): echter 3D-Meetingraum, Navigation in die Topbar

Anpassungsrunde 6. Die Kartendarstellung aus Runde 5 ist ersetzt: die
Startseite zeigt oben einen räumlichen Meetingraum aus der Sicht des
Betrachters, der selbst am Kopfende des Tisches sitzt.

**3D statt Kulisse.** Zwei Versuche mit CSS-Flächen sind daran gescheitert,
dass gezeichnete Wände neben fotografierten Porträts erkennbar gezeichnet
bleiben. Diese Runde nutzt three.js — die einzige neue Abhängigkeit, und §19
lässt sie ausdrücklich zu, wenn eine schlanke 3D-Lösung die Anforderung trägt.
Keine Engine darüber hinaus: kein React-Three-Fiber, keine Physik, keine
Shader, keine Post-Processing-Kette, keine Orbit-Steuerung.

Der Raum: Boden, Decke, rechts eine geschlossene Wand mit Eichenpaneel und
einem schmalen Streifen im Markenblau, links und gegenüber bodentiefe
Glasfassaden mit Pfosten. Draussen tragen die beiden Referenzfotos aus dem
Auftrag die Basler Aussicht — vorne Rhein, Altstadt und Münster, links der
Rheinverlauf mit der Wettsteinbrücke. Die Wasserlinie beider Kulissen liegt auf
derselben Welthöhe, damit der Blick nach vorne und nach links zusammengehört
und nicht wie zwei zusammengesetzte Bilder wirkt (§4).

Am Tisch sitzen alle fünf bestehenden Agenten mit ihren bestehenden Porträts,
Namen, Funktionen und Zielseiten — alles aus `AGENT_WORKSPACES`, damit nichts
doppelt gepflegt wird (§24, Schritt 7). Neu ist Thomas, Personalverwalter,
vis-à-vis am gegenüberliegenden Kopfende; sein Klick führt in die bestehende
Ansicht «Meine Agenten».

Gerendert wird nur bei Anlass — Grösse, Maus, Hover. Ein Dauerloop wäre für
eine feste Szene verschwendete Rechenzeit (§21). Die Kamera folgt der Maus um
wenige Zentimeter, mehr nicht (§20).

Die Beschriftungen sind HTML über dem Bild, nicht Textur in der Szene: als
Textur wären sie bei Tiefe unlesbar. Ein Entzerrungsdurchgang nach der
Projektion hebt Plaketten so weit an, bis keine mehr überlappt — gerechnet und
nicht handverlesen, damit es auf jeder Fenstergrösse hält. Bei Hover kommt eine
Zeile mit der aktuellen Auslastung dazu; ruhend bleiben es Name und Funktion.

**Navigation.** Die linke Seitenleiste ist gelöscht, nicht ausgeblendet: samt
Breitenreservierung, Einklapplogik und mobilem Drawer. Der Inhalt beginnt
überall bei x=0. An der Stelle des früheren Profilsymbols steht neben der
Glocke ein Menüsymbol; das Klappmenü öffnet rechts an der Kopfzeile nach unten
und führt Startseite, Meine Agenten samt aller Agenten als eingerückte,
rechtsbündige Unterpunkte, und Profil mit Profil, Einstellungen, Produkttour
und Abmelden. Alle Aktionen und Routen sind die bestehenden.

Entfallen sind die Kartenkomponenten aus Runde 5 samt Präsenzschicht.

Geprüft (§25): 422 Tests, Typecheck, Build, ESLint, Token-Schwelle (884/925).
Im Browser 430–2560 px: keine alte Sidebar, kein leerer Streifen links, sechs
Beschriftungen ohne Überlappung, alle sechs Agenten per Maus und per Tastatur
erreichbar und auf der richtigen Subpage, Menü öffnet und schliesst per Klick
und Escape, alle Menürouten korrekt, alle bestehenden Seiten laden, kein
horizontaler Overflow, keine Konsolenfehler.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin SutterandClaude Opus 5 committed 2026-08-12 18:00:00 +02:00
1 parent e55be64aeb
commit bf453d2b69
30 files changed
+1408 -1412

No files matched your search

-44
View File
@@ -1,44 +0,0 @@
import type { AgentWorkload } from './agentWorkload'
/**
* Property On — ein digitaler Mitarbeitender, so wie er auf der Startseite
* auftritt (Runde 5).
*
* Zusammengesetzt aus drei Quellen, weil Menschlichkeit aus dem Zusammenspiel
* entsteht und nicht aus einem einzelnen Feld:
*
* - **Personalien** — Name, Funktion, Abteilung, Personalnummer. Wer eine
* Personalnummer hat, ist Personal und kein Werkzeug.
* - **Auslastung** — woran er gerade sitzt, in seinen eigenen Worten.
* - **Letzte Handlung** — was er zuletzt getan hat, mit Zeitangabe. Das ist
* der Beleg, dass wirklich jemand arbeitet; ohne ihn bleibt jede Zusage
* eine Behauptung.
*/
export interface AgentPresence {
agentId: string
name: string
role: string
/** Abteilung laut Personalblatt; leer, solange kein Dossier vorliegt. */
department: string
/** Personalnummer laut Personalblatt; leer, solange kein Dossier vorliegt. */
personnelNumber: string
/** Zielseite des Klicks auf die Karte. */
path: string
/** true, solange der Mitarbeitende nicht pausiert ist. */
onDuty: boolean
/**
* Was der Mitarbeitende selbst entscheiden darf — «Autonom», «Freigabe
* erforderlich» oder «Nur Vorschlag». Die Stufe ist das stärkste Merkmal des
* Ansatzes: sie sagt, wie viel Verantwortung jemand trägt, und trennt
* Personal von einer Automatisierung.
*/
autonomy: string
workload: AgentWorkload
/** Zuletzt protokollierte Handlung — fehlt, wenn noch nichts vorliegt. */
lastAction?: {
/** Was getan wurde, als ganzer Satz aus dem Protokoll. */
title: string
/** Wann, in Alltagssprache: «vor 12 Min.», «gestern 16:40». */
when: string
}
}