tickte-system/docs/superpowers/specs/2026-10-22-hustler-pixelwelt-design.md

# Hustler-Pixelwelt in WOMS – Spec

Stand: 22.10.2026 · Status: **Entwurf zur Freigabe durch Kenso** · Branch `feature/hustler-pixel` (ab `feature/workers` c0163c3)

## 1. Ziel

Die in der Claude-Design-Zeichenfläche „Hustler – Oberflächen“ abgenommene Pixel-Nachtwelt ersetzt die bisherige helle Oberfläche des Hustler-Reiters (P2–P6). Drei Bildschirme:

| Bildschirm | Vorlage (Zeichenfläche) | ersetzt heute |
|---|---|---|
| **Hochhaus** – 16:9-Spielwelt mit Zoom/Ziehen, klickbare Etagen und Hustler, Detailansicht, Kopfzeile mit Münzen und Icons | `Main.dc.html` | `WorkersBoard` (Kanvas-Engine, Kennzahlen, Karte, Liste) |
| **Keller · Bot-Leads** – Archiv-Szene mit Arne, Liste als Register-Buch, Akte | `BotLeads.dc.html` | `BotLeadList` (Tabelle) |
| **Dein Pult · Freigabe** – Büro-Szene mit Aufzug und Briefkasten, Umschläge auf dem Klemmbrett, Brief | `Freigabe.dc.html` | `PultList` (Zeilenliste) |

Alles hängt an den echten Daten: `workersApi`, `useWorkersFeed`/Ereignisstrom, `usePultFeed`, `api.botleads`, `api.trace`. Keine Beispieldaten im Code (nur im Prüfstand und in Tests).

Nicht Teil davon: Freigabe-Handy, Kaufseite (Portal), Dienst-Code, neue Funktionen der Hustler.

## 2. Unveränderte Regeln (Vertrag)

- **Pult-Aktionen exakt wie heute:** Sichtbarkeit und Sperren kommen aus `rowModel` in `src/lib/workersPult.js`; Ablauf, Texte und Rückfragen aus dem heutigen `PultRow` (Rückfrage 4 s bei Verwerfen/Freigeben/Bauen, `BUILD_HINT`, „Kopieren & öffnen“ über `copyAndOpen`, Antworten/Einfügen mit 8000-Zeichen-Grenze, `UNCERTAIN_TEXT`, Übernehmen, Fokus-Rückgabe). `workersPult.js` wird nicht geändert.
- **Bot-Leads:** Telefonregel (`phoneLabel`, Heilberufe nie), sichere Links (`safeHref`), Raumfilter, Suche mit Verzögerung, Seiten vom Dienst (50 je Seite), Einzelansicht über `?tab=botleads&bot=<id>`.
- **Hochhaus:** Pause mit Rückfrage (nur Anhalten fragt), Einstellungen nur für Admins, Notbremse-Hinweis (`sendingHalted`), Verbindungsfehler-Hinweis, Spur nur mit sicheren Links (`safeLink`).
- `src/lib/*` (Events, Feed, View, Pult, Roster, Api, Prospect, Focus) bleibt fachlich gleich; neue reine Funktionen kommen in neue Dateien.

## 3. Entscheidungen (meine Vorschläge, Kenso gibt frei)

**E1 Technik: DOM + CSS statt Kanvas.** Die Welt ist wie in der Vorlage ein 2400 × 1200 großes Element mit PNG-Ebenen, per `transform` verschoben und gezoomt; Figuren, Etagen und Effekte sind HTML-Elemente, Animationen reine CSS-Sprite-Animationen (`steps()`). Die Kanvas-Engine (`components/workers/engine/*`) samt `WorkersStage`, `WorkerCard`, `WorkerList`, `WorkersKpis`, `WorkersBoard` entfällt.

**E2 Bilder:** Die PNGs aus `pixelwelt-v2` kommen nach `src/assets/hustler/<gruppe>/` und werden aus dem CSS referenziert (Vite hängt einen Hash an, kein Cache-Ärger nach Updates). Nur benutzte Dateien, ca. 1,3 MB, Seite lädt weiter lazy. Ein Import-Skript (`scripts/hustler-import.mjs`) kopiert die Bilder, übernimmt das CSS der drei Artboards (Blob-Adressen → Asset-Pfade, alle Klassen und Keyframes mit `hk-` vorangestellt, damit nichts mit dem WOMS-CSS kollidiert) und schreibt die Geometrie (Welt, Haus, Etagen, Anker, Aufzug-Halte, Zeitachsen) nach `src/lib/hustlerWelt.js`. So lässt sich jede spätere Änderung an der Zeichenfläche (z. B. Kensos Hustler-Designs einzeln) neu einspielen.

**E3 Schriften:** Pixelify Sans (liegt schon da) und Press Start 2P (SIL OFL, für Zahlen und Überschriften) selbst gehostet unter `public/fonts/`, kein Google-Fonts-Abruf.

**E4 Graue Räume dynamisch:** Im Entwurfsbild sind die Räume von Kim, Pia und Finn fest abgedunkelt. Echt ist „nicht angeschlossen“ ein Zustand, der sich ändert (alle acht Such-Räume können grau sein, `SEARCH_ROOMS`). Darum wird `haus.png` mit allen Räumen hell neu erzeugt (kleine neue Raum-Deko für Kleinanzeigen, Portale, Foren im Stil der übrigen Räume) und für jeden der acht Such-Räume eine abgedunkelte Raum-Ebene (gleicher Generator, Dunkelfilter + Spinnweben) erzeugt, die nur bei `connected: false` erscheint. Vorschau bekommt Kenso vor dem Einbau.

**E5 Status → Figur** (Haus und Detailansicht):

| Dienst-Status | Figur | Zusatz |
|---|---|---|
| `arbeitet` | farbig, tippt | Bildschirm leuchtet; Rita: Radar läuft |
| `wartet` | grau, Kaffeetasse | „…“-Punkte |
| `leerlauf` | grau, schläft | „Zzz“ |
| `grau` (nicht angeschlossen) | grau, steht | Raum abgedunkelt (E4); Detail: Szene mit Stecker |
| `fehler` | grau, steht | roter „!“-Marker über dem Kopf, Statustext rot |

Overseer (`otto`): Kristall immer sichtbar; nur bei `arbeitet` volles Leuchten, sonst gedimmt. Bei `state.paused` stehen alle Animationen still und die Kopfzeile zeigt „Angehalten“.

**E6 Name:** `otto` heißt in der Oberfläche „Overseer“ (Anzeige-Name, wie in der Zeichenfläche). Roster, Fixture und Dienst bleiben bei `otto`/„Otto“. Texte, die der Dienst schreibt (Spur, Ereignisse), können noch „Otto“ sagen – das wäre eine eigene Dienst-Änderung.

**E7 Kopfzeile (HUD):** grüne Münze = `kpis.mrrNewEur` („+60 €/M“), rote Münze = `kpis.apiTodayUsd` („−5,10 $“, Hinweis-Text „von 6,00 $“ im Titel, ab 80 % blinkt sie). Icons mit Zahl: Stern Abos (`newAbosMonth`), Pokal Deals (`dealsMonth`), Blase Gespräche (`openThreads`), Glocke Wartet auf dich (`pultOpen`), Roboter Bot-Leads (`botLeads`). Fehlende Werte zeigen „–“. Rechts: Pause/Fortsetzen (mit Pixel-Rückfrage wie heute) und Zahnrad (nur Admin, öffnet den bestehenden Einstellungen-Dialog unverändert). Meldungen (Notbremse, Verbindung gestört, Umschalten fehlgeschlagen) als Pixel-Banner unter der Kopfzeile.

**E8 Navigation:** `?tab=hochhaus|freigabe|botleads` bleibt (Links aus dem Ereignisstrom und `/leads`/`/workers`-Umleitungen funktionieren weiter). Etage „Freigabe“ → Pult, Etage „Keller“ → Bot-Leads, alle anderen Etagen zoomen heran. Pult und Keller haben oben links „◂ Hochhaus“. Im Haus: Briefkasten-Zähler = `pultOpen` (bei 0 weg), Tresor-Schild „N Deals“, Keller-Schild „N Bot-Leads“. Die Seitenüberschrift „Hustler“ und die Reiterleiste entfallen (Tab-Titel bleibt „Hustler“). Die Welt füllt den Inhaltsbereich neben der WOMS-Seitenleiste in voller Höhe.

**E9 Ereignisse sichtbar machen (leicht):** Status und „Gerade“-Text folgen live dem Ereignisstrom (`reduceEvents`, wie heute). Zusätzlich übersetzt eine neue kleine Regie (`src/lib/hustlerRegie.js`, rein, testbar) die vorhandenen Schritte aus `eventToSteps` in kurze Effekte: Sprechblase (2,5 s), Stempel/Umschlag/Akte/Alarm-Symbol über der Figur, Umschlag fliegt von Figur zu Figur (`give`), kleiner Hüpfer (`cheer`), Münzen in den Tresor (`deal`). Höchstens 4 gleichzeitig, Rückstau wird verworfen, „weniger Bewegung“ zeigt nur Blasen, verdeckter Tab sammelt nichts an. Symbole kommen aus den vorhandenen Icon-PNGs, keine neue Grafik.

**E10 Detailansicht:** wie Zeichenfläche (Büro-, Stecker- oder Brücken-Szene mit großer Figur nach E5, daneben Name, Status, Modell, Etage · Raum, Aufgabe, Gerade, Heute, Kosten · Tokens, Spur, ◂ n / 19 ▸). Daten: Modell aus `MODEL_IDS` als „Claude Opus 5.5“ usw., Aufgabe = `trace.worker.role` sonst Roster-Rolle, Gerade = `worker.task`, Heute = `counterLines`, Kosten/Tokens aus `trace.today`, Spur = `traceRows` (neueste zuerst, nur sichere Links). Tastatur: ←/→ blättern, Esc schließt, Fokus bleibt im Dialog und geht danach zur Figur zurück.

**E11 Pult:** Szene wie Zeichenfläche; die Boten-Schleife (Clara, Nora, Aufzug, Fähnchen) läuft nur, solange etwas wartet, sonst ruht der Raum. Klemmbrett mit Reitern Wartet / Veraltet / Erledigt (`PULT_FILTERS`, `usePultFeed` unverändert). Zahl am Reiter: „Wartet“ aus `kpis.pultOpen`, am aktiven Reiter die Länge der Liste; für die anderen beiden gibt es keine Zahl (sonst drei Abrufe alle 30 s). Ein Umschlag zeigt Art-Icon, Titel, Alter, ggf. Frist/übernommen/veraltet/Ergebnis-Stempel und „von <Hustler>“. Klick öffnet den **Brief**: Original, Entwurf (bearbeitbar bei sendbaren Arten), Stempel-Knöpfe = die heutigen Aktionen nach `rowModel`, Antworten-/Einfügen-Feld, „Interessent“ öffnet das bestehende `ProspectPanel`. „Pult zuklappen“ zeigt die Szene ganz.

**E12 Keller:** Szene wie Zeichenfläche; Arne läuft seine Ablage-Schleife nur bei `arbeitet`, sonst döst er am Pult (Haus-Figur, schläft), Rohrpost nur bei `arbeitet`. Register-Buch: Raum-Reiter (`ROOM_FILTERS`, Zahl nur am aktiven Reiter = `total`), Suche, Einträge der Dienst-Seite (50) im Buch scrollbar, Blättern ◂ ▸ mit „Seite x von y“. Zeile: Raum-Icon, Name, Ort, Grund-Icon + Grund. **Akte** (Dialog): Grund mit Erklärung (Tabelle für die 14 Gründe aus `scoring/business.js` des Dienstes, unbekannt → allgemeiner Satz), Scout aus dem Roster, Punkte, Telefon nach `phoneLabel`, Quelle (`safeHref`), gefunden am, „gekürzt“. „Register zuklappen“ zeigt die Szene ganz.

**E13 Handy (unter 720 px):** Haus mit Wischen/Pinch wie am Desktop, Kopfzeile bricht um. Pult und Keller: Klemmbrett/Buch in voller Breite über der abgedunkelten Szene; Brief, Akte und Detailansicht als Vollbild. Keine eigenen Handy-Entwürfe – schlicht und benutzbar.

**E14 Barrierefreiheit:** Etagen und Figuren sind echte Knöpfe mit deutschem `aria-label` („Lea, Haiku, arbeitet“), Bilder `aria-hidden`, Dialoge `role="dialog"` mit Fokusfalle, Tastenkürzel im Haus (+/−/0/Esc), „weniger Bewegung“ schaltet Schnee, Flackern und Gleiten ab.

## 4. Tests

- Alle Tests der reinen Logik (`workersEvents`, `workersFeed`, `workersView`, `workersPult`, `botleadsView`, `workersRoster`, `workersApi`, `workersSettingsForm`, `workersFocus`, `workersProspect` (Logik), `copyableCredential`, `navLinks`, `routeErrorBoundary`) bleiben **unverändert grün**.
- UI-Tests, die die alte Oberfläche abbilden (`workersPultUi`, `botleadList`, `botleadsView` (Teil Komponente), `workersComponents`, `workersCss`, `workersRoute`, `workersFont`, `workersProspect` (Teil Panel), `workersHarness`, `workersSmoke`), werden auf die neue Struktur umgestellt; **jede fachliche Zusicherung bleibt** (gleiche Aktionen, Texte, Sperren, Rückfragen), nur Klassen/Wege ändern sich (z. B. erst Umschlag öffnen, dann Knopf drücken).
- Die Tests der Kanvas-Engine (`workersCamera`, `workersDirector`, `workersFx`, `workersLayout`, `workersLift`, `workersProps`, `workersRooms`, `workersScene`, `workersSprites`) gehen mit der Engine.
- Neu: Geometrie (jeder der 19 Hustler hat einen Anker in seinem Raum, Etagen lückenlos), Status→Figur-Tabelle inkl. `fehler`/`grau`/Overseer/Pause, HUD-Werte und Striche, Kamera-Mathematik (Grenzen, Zoom um Punkt, Etage heranzoomen), Regie (Blasen, Höchstzahl, Rückstau, weniger Bewegung), Detailansicht (Daten, Blättern, Fokus), Pult (Umschlag → Brief → jede Aktion wie bisher), Keller (Buch, Akte, Grund-Tabelle deckt alle Dienst-Gründe), Assets (jede im CSS genannte Datei existiert, keine Datei ungenutzt, keine fremde Klasse ohne `hk-`).
- Prüfstand (`scripts/workers-harness`) zeigt die neue Seite mit dem Skript-Dienst; Bildschirmfotos 1280×720, 1920×1080 und 390×844 für Kenso.