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

+81
View File
@@ -0,0 +1,81 @@
import { AGENT_WORKSPACES } from '../../lib/agentWorkspaces'
import { AGENT_SUPERVISOR } from '../../lib/agentWorkspaces'
/**
* Sitzordnung im 3D-Meetingraum (Runde 6, §5/§6/§7).
*
* Eine einzige Tabelle bestimmt, wer wo sitzt. Namen, Funktionen, Porträts und
* Zielseiten kommen dabei nicht von hier, sondern aus `AGENT_WORKSPACES` —
* derselben zentralen Konfiguration, die Menü und Seitenköpfe verwenden. Hier
* steht ausschliesslich die Geometrie (§24, Schritt 7: nichts doppelt pflegen).
*
* Koordinaten sind Meter im Weltsystem der Szene:
* - x: negativ = links vom Betrachter, positiv = rechts
* - z: 0 am Kopfende des Betrachters, negativ = in den Raum hinein
*
* Die Agenten wechseln die Tischseite in der Reihenfolge der Konfiguration
* (Ferdi links, Bruno rechts, Livia links, …). Das verteilt sie gleichmässig,
* hält die Abstände gross genug, dass sich niemand überlappt, und macht den
* Arbeitsablauf auch am Tisch ablesbar.
*/
/** Auf welcher Tischseite ein Platz liegt. */
export const SeatSide = {
LEFT: 'LEFT',
RIGHT: 'RIGHT',
/** Kopfende gegenüber dem Betrachter — nur Thomas. */
HEAD: 'HEAD',
} as const
export type SeatSide = typeof SeatSide[keyof typeof SeatSide]
export interface MeetingSeat {
/** Agenten-ID; identisch mit `AGENT_PHOTOS` und den Mockdaten. */
id: string
name: string
role: string
/** Zielseite des Klicks. */
path: string
side: SeatSide
/** Sitzposition in Metern. */
x: number
z: number
}
/**
* Abstand der Plätze entlang des Tisches, in Metern. Bewusst grosszügig: bei
* engerer Staffelung überschneiden sich in der Perspektive die Köpfe der
* hinteren Plätze mit denen der vorderen (§5 «keine Personen überlappen»).
*/
const SEAT_Z = [-1.75, -3.55, -5.35]
/** Seitlicher Abstand von der Tischmitte — knapp aussen an der Tischkante. */
const SEAT_X = 1.32
/** Kopfende gegenüber: hinter der Tischkante, vor der Glasfront. */
const HEAD_Z = -8.15
export const MEETING_SEATS: MeetingSeat[] = [
...AGENT_WORKSPACES.map((agent, i) => {
const left = i % 2 === 0
return {
id: agent.id,
name: agent.name,
role: agent.role,
path: agent.path,
side: left ? SeatSide.LEFT : SeatSide.RIGHT,
x: left ? -SEAT_X : SEAT_X,
// Die Plätze rücken paarweise nach hinten: links und rechts versetzt,
// damit über die Tischmitte hinweg niemand hinter einem Kopf verschwindet.
z: SEAT_Z[Math.floor(i / 2)] - (left ? 0 : 0.9),
}
}),
{
id: AGENT_SUPERVISOR.id,
name: AGENT_SUPERVISOR.name,
role: AGENT_SUPERVISOR.role,
path: AGENT_SUPERVISOR.path,
side: SeatSide.HEAD,
x: 0,
z: HEAD_Z,
},
]