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 “. 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.