Hustler-Pixelwelt T3: Seite hält den Feed, Bildschirme Hochhaus/Pult/Keller, Vollhöhen-Rahmen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/workers/hochhaus/Hochhaus.jsx

@@ -0,0 +1,33 @@
+// Bildschirm „Hochhaus“ (Spielwelt, Kopfzeile, Detailansicht). Gerüst von T3: Zustände wie bisher im WorkersBoard; T5–T8 füllen die Welt.
+// Reine Darstellung ohne Auth-Bezug: isAdmin, der Feed (feed = { state, error, loaded, refresh }), die Hustler-Tabelle (workers), die Regie-Anbindung
+// (regieRef, die Seite ruft regieRef.current.push(events) bei neuen Ereignissen) und der Bildschirmwechsel (onOpen(tab)) kommen von der Seite.
+// Kein CSS-Import und keine Bilder: die Stile hängt WorkersPage ein (Regeln dieser Datei in styles/hustler/hustler-ui.css).
+export default function Hochhaus({ api, isAdmin, feed, workers, regieRef, onOpen }) {
+  const ready = feed.loaded && Boolean(feed.state)
+  // Dienst noch nie erreicht: Pixel-Leerzustand mit Fehlertext und „Neu laden“
+  if (!ready && feed.error) {
+    return (
+      <div className="hk-hochhaus">
+        <div className="hk-leer">
+          <strong className="hk-leer-titel">Der Hustler-Dienst ist noch nicht erreichbar</strong>
+          <p className="hk-leer-text">{feed.error}</p>
+          <button type="button" className="hk-knopf" onClick={() => feed.refresh()}>Neu laden</button>
+        </div>
+      </div>
+    )
+  }
+  if (!ready) {
+    return (
+      <div className="hk-hochhaus">
+        <div className="hk-laden" role="status">Wird geladen …</div>
+      </div>
+    )
+  }
+
+  // T5 füllt diesen Rahmen mit der Welt (Kopfzeile T6, Detailansicht T7, Regie T8)
+  return (
+    <div className="hk-hochhaus">
+      <div className="hk-welt-rahmen" />
+    </div>
+  )
+}

src/pages/WorkersPage.jsx

@@ -1,15 +1,22 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { PageHeader, Tabs } from '../components/ui'
 import BotLeadList from '../components/workers/BotLeadList'
+import Hochhaus from '../components/workers/hochhaus/Hochhaus'
 import PultList from '../components/workers/PultList'
-import WorkersBoard from '../components/workers/WorkersBoard'
 import { useAuth } from '../context/AuthContext'
+import { useWorkersFeed } from '../hooks/useWorkersFeed'
+import { indexWorkers, reduceEvents } from '../lib/workersEvents'
 import { workersApi } from '../lib/workersClient'
 import { pickTab } from '../lib/workersView'
 import '../styles/workers.css'
+import '../styles/hustler/schrift.css'
+import '../styles/hustler/hochhaus.css'
+import '../styles/hustler/keller.css'
+import '../styles/hustler/pult.css'
+import '../styles/hustler/hustler-ui.css'
 
-// Reiter der Seite (Hochhaus, Freigabe von P3, Bot-Leads von P6); die Reiterleiste erscheint erst ab zwei Reitern.
+// Bildschirme der Seite: das Hochhaus, das Pult (Freigabe von P3) und der Keller (Bot-Leads von P6). Eine Reiterleiste gibt es nicht mehr;
+// gewechselt wird im Haus (Etage Freigabe, Etage Keller) und über „◂ Hochhaus“ in Pult und Keller.
 const WORKERS_TABS = [
   { id: 'hochhaus', label: 'Hochhaus' },
   { id: 'freigabe', label: 'Freigabe' },
@@ -18,14 +25,18 @@ const WORKERS_TABS = [
 
 const api = workersApi
 
-// Seite „Hustler“ (Dateiname bleibt WorkersPage): Titel, Reiterwahl über ?tab= und der Inhalt des gewählten Reiters.
-// ?tab=botleads&bot=<Id> (Link aus dem Ereignisstrom) zeigt einen einzelnen Bot-Lead; ein Reiterwechsel lässt bot weg.
-// Auth und Dienst-API kommen von hier; das Board selbst kennt weder Anmeldung noch Appwrite.
+// Seite „Hustler“ (Dateiname bleibt WorkersPage): Tab-Titel, Bildschirmwahl über ?tab= und der gewählte Bildschirm in voller Höhe.
+// ?tab=botleads&bot=<Id> (Link aus dem Ereignisstrom) zeigt einen einzelnen Bot-Lead; ein Wechsel per setParams lässt bot weg.
+// Auth und Dienst-API kommen von hier. Der Feed (Zustand alle 15 s, Ereignisse alle 5 s) läuft genau einmal pro Seite, egal welcher
+// Bildschirm offen ist; die Hustler-Tabelle (indexWorkers beim Schnappschuss, reduceEvents bei Ereignissen) gehört ebenfalls hierher.
+// Ereignisse gehen zusätzlich an die Regie, die nur das Hochhaus über regieRef einhängt.
 export default function WorkersPage() {
   const { isAdmin, user } = useAuth()
   const [params, setParams] = useSearchParams()
   const active = pickTab(WORKERS_TABS, params.get('tab'))
   const bot = params.get('bot') ?? ''
+  const [workers, setWorkers] = useState({})
+  const regieRef = useRef(null)
 
   // Tab-Titel nur solange die Seite offen ist; beim Verlassen kommt der vorige Titel zurück
   useEffect(() => {
@@ -34,15 +45,53 @@ export default function WorkersPage() {
     return () => { document.title = previous }
   }, [])
 
+  // Neue Ereignisse: Tabelle fortschreiben und der Regie vorspielen (die Regie kennt den Rückstau selbst)
+  const onEvents = useCallback((events) => {
+    setWorkers((w) => reduceEvents(w, events))
+    if (regieRef.current) regieRef.current.push(events)
+  }, [])
+
+  const { state, error, loaded, refresh } = useWorkersFeed(api, { onEvents })
+  useEffect(() => {
+    if (state) setWorkers(indexWorkers(state))
+  }, [state])
+
   return (
-    <div className="page wk-page">
-      <PageHeader title="Hustler" subtitle="Die Nachtschicht deiner Claude-Armee" />
-      {WORKERS_TABS.length > 1 && (
-        <Tabs tabs={WORKERS_TABS} active={active.id} onChange={(id) => setParams({ tab: id })} />
+    <div className="hk-seite" data-tab={active.id}>
+      {active.id === 'hochhaus' && (
+        <Hochhaus
+          api={api}
+          isAdmin={isAdmin}
+          feed={{ state, error, loaded, refresh }}
+          workers={workers}
+          regieRef={regieRef}
+          onOpen={(tab) => setParams({ tab })}
+        />
+      )}
+      {/* Pult und Keller stecken bis T9/T10 noch in der alten hellen Hülle (.page.wk-page); hustler-ui.css gibt ihnen dafür normale Höhe */}
+      {active.id === 'freigabe' && (
+        <div className="page wk-page">
+          <PultList
+            api={api}
+            me={{ id: user?.$id, name: user?.name }}
+            kpis={state?.kpis}
+            workers={workers}
+            onBack={() => setParams({ tab: 'hochhaus' })}
+          />
+        </div>
+      )}
+      {active.id === 'botleads' && (
+        <div className="page wk-page">
+          <BotLeadList
+            api={api}
+            bot={bot}
+            onClearBot={() => setParams({ tab: 'botleads' })}
+            kpis={state?.kpis}
+            workers={workers}
+            onBack={() => setParams({ tab: 'hochhaus' })}
+          />
+        </div>
       )}
-      {active.id === 'hochhaus' && <WorkersBoard api={api} isAdmin={isAdmin} />}
-      {active.id === 'freigabe' && <PultList api={api} me={{ id: user?.$id, name: user?.name }} />}
-      {active.id === 'botleads' && <BotLeadList api={api} bot={bot} onClearBot={() => setParams({ tab: 'botleads' })} />}
     </div>
   )
 }

src/styles/hustler/hustler-ui.css

@@ -0,0 +1,27 @@
+/* Handgeschriebene Regeln der Hustler-Pixelwelt (WorkersPage, Hochhaus, später Pult und Keller). Nicht erzeugt: die drei Bildschirm-Dateien
+   hochhaus.css, keller.css und pult.css kommen von scripts/hustler-import.mjs und werden nie von Hand geändert. Alle Klassen beginnen mit hk-
+   und stehen unter einer der Wurzeln .hk-seite, .hk-hochhaus, .hk-keller oder .hk-pult. */
+
+/* ---------- Seite: füllt den Inhaltsbereich (main) neben der WOMS-Seitenleiste in voller Höhe, kein Seiten-Scrollen ---------- */
+.hk-seite { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: #0b1030; }
+@media (max-width: 860px) {
+  /* Mobilleiste aus global.css (.mobile-bar, 52 px) abziehen */
+  .hk-seite { height: calc(100vh - 52px); height: calc(100dvh - 52px); }
+}
+.hk-seite > .hk-hochhaus { position: absolute; inset: 0; }
+
+/* Übergang bis T9/T10: Pult und Keller stehen noch in der alten hellen Hülle (.page.wk-page), brauchen normale Höhe, Scrollen und hellen Grund.
+   Entfällt, sobald PultList und BotLeadList in ihre Pixelszenen umgebaut sind (.hk-pult / .hk-keller füllen dann selbst die Seite). */
+.hk-seite[data-tab="freigabe"], .hk-seite[data-tab="botleads"] { height: auto; overflow: visible; background: none; }
+
+/* ---------- Hochhaus: Laden und Leerzustand im Pixel-Stil ---------- */
+.hk-hochhaus .hk-laden,
+.hk-hochhaus .hk-leer {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
+  padding: 24px; box-sizing: border-box; text-align: center;
+  background: #0b1030; color: #e6ebff;
+  font-family: 'Pixelify Sans', ui-monospace, monospace; font-size: 18px; line-height: 1.4;
+}
+.hk-hochhaus .hk-leer-titel { display: block; margin: 0; color: #ffe9a0; font-size: 22px; font-weight: 400; }
+.hk-hochhaus .hk-leer-text { margin: 0; max-width: 46ch; color: #b8c2f0; overflow-wrap: anywhere; }

tests/unit/hustlerSeite.test.mjs

@@ -0,0 +1,363 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import esbuild from 'esbuild'
+import { fakeReact } from './helpers/fakeReact.mjs'
+import { ev, makeState } from './helpers/workersFixtures.mjs'
+
+// Das Gerüst der Hustler-Pixelwelt (T3) läuft wirklich: im Mini-Läufer anstelle von React (Muster botleadList.test.mjs, Baustein helpers/fakeReact.mjs).
+// 1. Hochhaus.jsx: Laden, Dienst nicht erreichbar („Neu laden“), geladen -> Rahmen der Welt.
+// 2. WorkersPage.jsx: mit esbuild-Attrappen für Router, Anmeldung, Dienst-Client, Feed-Hook, CSS und die drei Bildschirme. Geprüft wird,
+//    welcher Bildschirm zu ?tab gehört, welche Props er bekommt, dass der Feed einmal pro Seite läuft (kein Neustart beim Bildschirmwechsel),
+//    dass Ereignisse die Hustler-Tabelle fortschreiben und an die Regie gehen, und dass ein Schnappschuss die Tabelle neu setzt.
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..')
+const importBundle = (out) => import(`data:text/javascript;base64,${Buffer.from(out.outputFiles[0].text).toString('base64')}`)
+const settle = () => new Promise((resolve) => setImmediate(resolve))
+
+const nodes = (node, match, out = []) => {
+  if (node === null || typeof node === 'string') return out
+  if (match(node)) out.push(node)
+  for (const child of node.children) nodes(child, match, out)
+  return out
+}
+const textOf = (node) => (typeof node === 'string' ? node : node === null ? '' : node.children.map(textOf).join(''))
+const hasClass = (n, name) => String(n.props.className ?? '').split(' ').includes(name)
+const byClass = (tree, name) => nodes(tree, (n) => typeof n.tag === 'string' && hasClass(n, name))
+
+// ---------- Hochhaus ----------
+
+let hochhausBundle
+const loadHochhaus = () => (hochhausBundle ??= esbuild.build({
+  stdin: { contents: "export { __mount, jsx } from 'react'\nexport { default as Hochhaus } from './src/components/workers/hochhaus/Hochhaus.jsx'", resolveDir: ROOT, loader: 'js' },
+  bundle: true, format: 'esm', platform: 'neutral', write: false, jsx: 'automatic', loader: { '.jsx': 'jsx' }, plugins: [fakeReact],
+}).then(importBundle))
+
+async function hochhaus(feed, extra = {}) {
+  const { __mount, jsx, Hochhaus } = await loadHochhaus()
+  const props = { api: {}, isAdmin: false, workers: {}, regieRef: { current: null }, onOpen() {}, ...extra, feed }
+  const mounted = __mount(jsx(() => jsx(Hochhaus, props), {}))
+  await settle()
+  return { tree: () => mounted.tree(), end: () => mounted.unmount() }
+}
+const counting = (n = { refresh: 0 }) => ({ n, refresh: () => { n.refresh += 1 } })
+
+test('Hochhaus: solange nichts geladen ist, steht „Wird geladen …“ mit role=status in der Wurzel hk-hochhaus', async () => {
+  const c = counting()
+  const view = await hochhaus({ state: null, error: null, loaded: false, refresh: c.refresh })
+  try {
+    const root = view.tree()
+    assert.equal(root.tag, 'div'); assert.equal(root.props.className, 'hk-hochhaus')
+    const laden = byClass(root, 'hk-laden')
+    assert.equal(laden.length, 1); assert.equal(laden[0].props.role, 'status'); assert.equal(textOf(laden[0]), 'Wird geladen …')
+    assert.equal(byClass(root, 'hk-welt-rahmen').length, 0); assert.equal(byClass(root, 'hk-leer').length, 0)
+    assert.equal(c.n.refresh, 0)
+  } finally { view.end() }
+})
+
+test('Hochhaus: Dienst nie erreicht -> Pixel-Leerzustand mit Titel, Fehlertext als Text und „Neu laden“, das refresh ruft', async () => {
+  const c = counting()
+  const view = await hochhaus({ state: null, error: '<b>Der Dienst antwortet nicht.</b>', loaded: false, refresh: c.refresh })
+  try {
+    const root = view.tree()
+    assert.equal(root.props.className, 'hk-hochhaus')
+    const leer = byClass(root, 'hk-leer')
+    assert.equal(leer.length, 1)
+    assert.equal(textOf(byClass(leer[0], 'hk-leer-titel')[0]), 'Der Hustler-Dienst ist noch nicht erreichbar')
+    // der Fehlertext ist ein Textknoten (kein HTML)
+    const text = byClass(leer[0], 'hk-leer-text')[0]
+    assert.deepEqual(text.children, ['<b>Der Dienst antwortet nicht.</b>'])
+    const knoepfe = nodes(root, (n) => n.tag === 'button')
+    assert.equal(knoepfe.length, 1)
+    assert.equal(textOf(knoepfe[0]), 'Neu laden'); assert.equal(knoepfe[0].props.type, 'button'); assert.ok(hasClass(knoepfe[0], 'hk-knopf'))
+    assert.equal(byClass(root, 'hk-laden').length, 0); assert.equal(byClass(root, 'hk-welt-rahmen').length, 0)
+    knoepfe[0].props.onClick({ preventDefault() {} })
+    assert.equal(c.n.refresh, 1)
+    knoepfe[0].props.onClick({ preventDefault() {} })
+    assert.equal(c.n.refresh, 2)
+  } finally { view.end() }
+})
+
+test('Hochhaus: geladen -> leerer Rahmen hk-welt-rahmen; ein späterer Verbindungsfehler ersetzt die Welt nicht', async () => {
+  const c = counting()
+  const state = makeState()
+  const view = await hochhaus({ state, error: null, loaded: true, refresh: c.refresh })
+  try {
+    const root = view.tree()
+    assert.equal(root.props.className, 'hk-hochhaus')
+    assert.equal(byClass(root, 'hk-welt-rahmen').length, 1)
+    assert.equal(byClass(root, 'hk-laden').length, 0); assert.equal(byClass(root, 'hk-leer').length, 0)
+  } finally { view.end() }
+  const gestoert = await hochhaus({ state, error: 'Verbindung weg', loaded: true, refresh: c.refresh })
+  try {
+    assert.equal(byClass(gestoert.tree(), 'hk-welt-rahmen').length, 1)
+    assert.equal(byClass(gestoert.tree(), 'hk-leer').length, 0)
+  } finally { gestoert.end() }
+})
+
+test('Hochhaus: ohne Zustand gilt auch ein geladen-Flag nicht als bereit (wie bisher im Board)', async () => {
+  const c = counting()
+  const view = await hochhaus({ state: null, error: 'weg', loaded: true, refresh: c.refresh })
+  try {
+    assert.equal(byClass(view.tree(), 'hk-welt-rahmen').length, 0)
+    assert.equal(byClass(view.tree(), 'hk-leer').length, 1)
+  } finally { view.end() }
+})
+
+// ---------- WorkersPage ----------
+
+// Attrappen: alle Zustände und Aufrufe laufen über globalThis.__hk, das der Test je Lauf anlegt
+const STUBS = {
+  'react-router-dom': "export function useSearchParams() { return [globalThis.__hk.params, globalThis.__hk.setParams] }",
+  auth: "export function useAuth() { return globalThis.__hk.auth }",
+  // die api-Attrappe entsteht beim Laden des Moduls (WorkersPage liest sie auf oberster Ebene) und wird für den Test unter __hkApi abgelegt
+  client: "const api = { name: 'workers-api-attrappe' }\nglobalThis.__hkApi = api\nexport const workersApi = api",
+  feed: `
+    import { useEffect } from 'react'
+    export function useWorkersFeed(api, options) {
+      const hk = globalThis.__hk
+      hk.feedCalls.push({ api, options })
+      hk.onEvents = options.onEvents
+      useEffect(() => { hk.feedMounts += 1; return () => { hk.feedUnmounts += 1 } }, [])
+      return hk.feed
+    }
+  `,
+  hochhaus: "import { jsx } from 'react'\nexport default function Hochhaus(props) { globalThis.__hk.props.hochhaus = props; return jsx('div', { 'data-screen': 'hochhaus' }) }",
+  pult: "import { jsx } from 'react'\nexport default function PultList(props) { globalThis.__hk.props.pult = props; return jsx('div', { 'data-screen': 'pult' }) }",
+  keller: "import { jsx } from 'react'\nexport default function BotLeadList(props) { globalThis.__hk.props.keller = props; return jsx('div', { 'data-screen': 'keller' }) }",
+}
+const stubPlugin = {
+  name: 'seite-attrappen',
+  setup(build) {
+    const table = [
+      [/^react-router-dom$/, 'react-router-dom'],
+      [/^\.\.\/context\/AuthContext$/, 'auth'],
+      [/^\.\.\/lib\/workersClient$/, 'client'],
+      [/^\.\.\/hooks\/useWorkersFeed$/, 'feed'],
+      [/^\.\.\/components\/workers\/hochhaus\/Hochhaus$/, 'hochhaus'],
+      [/^\.\.\/components\/workers\/PultList$/, 'pult'],
+      [/^\.\.\/components\/workers\/BotLeadList$/, 'keller'],
+    ]
+    for (const [filter, key] of table) {
+      build.onResolve({ filter }, () => ({ path: key, namespace: 'seite-attrappe' }))
+    }
+    build.onLoad({ filter: /.*/, namespace: 'seite-attrappe' }, (args) => ({ contents: STUBS[args.path], loader: 'js' }))
+  },
+}
+
+let seiteBundle
+const loadSeite = () => (seiteBundle ??= esbuild.build({
+  stdin: { contents: "export { __mount, jsx } from 'react'\nexport { default as WorkersPage } from './src/pages/WorkersPage.jsx'", resolveDir: ROOT, loader: 'js' },
+  bundle: true, format: 'esm', platform: 'neutral', write: false, jsx: 'automatic', loader: { '.jsx': 'jsx', '.css': 'empty' }, plugins: [fakeReact, stubPlugin],
+}).then(importBundle))
+
+// Ein Lauf der Seite. query ist der Teil nach dem ?, feed wird vom Test zwischendurch geändert (setFeed) und die Seite neu gerendert.
+async function seite(query, { admin = false, feed } = {}) {
+  const { __mount, jsx, WorkersPage } = await loadSeite()
+  const setParamsCalls = []
+  const hk = {
+    params: new URLSearchParams(query),
+    setParams: (next) => { setParamsCalls.push(next) },
+    auth: { isAdmin: admin, user: { $id: 'u-1', name: 'Kenso' } },
+    api: globalThis.__hkApi,
+    feed: feed ?? { state: null, error: null, loaded: false, refresh: () => {} },
+    feedCalls: [], feedMounts: 0, feedUnmounts: 0, props: {}, onEvents: null,
+  }
+  const savedHk = globalThis.__hk
+  const hadDocument = Object.hasOwn(globalThis, 'document')
+  const savedDocument = globalThis.document
+  globalThis.__hk = hk
+  globalThis.document = { title: 'Vorher' }
+  const mounted = __mount(jsx(WorkersPage, {}))
+  await settle()
+  const view = {
+    hk, setParamsCalls,
+    tree: () => mounted.tree(),
+    root: () => mounted.tree(),
+    screen: () => nodes(mounted.tree(), (n) => n.props && n.props['data-screen']).map((n) => n.props['data-screen']),
+    // Adresse wechseln, wie es der Router nach setParams täte, und neu rendern
+    go(next) { hk.params = new URLSearchParams(next); mounted.rerender() },
+    setFeed(next) { hk.feed = { ...hk.feed, ...next }; mounted.rerender() },
+    end() {
+      mounted.unmount()
+      if (savedHk === undefined) delete globalThis.__hk; else globalThis.__hk = savedHk
+      if (hadDocument) globalThis.document = savedDocument; else delete globalThis.document
+    },
+  }
+  return view
+}
+
+test('Seite: ohne ?tab, mit ?tab=hochhaus und mit unbekanntem Tab erscheint das Hochhaus; Wurzel hk-seite trägt data-tab', async () => {
+  for (const query of ['', 'tab=hochhaus', 'tab=gibtsnicht', 'tab=', 'bot=x']) {
+    const ui = await seite(query)
+    try {
+      const root = ui.root()
+      assert.equal(root.tag, 'div'); assert.equal(root.props.className, 'hk-seite'); assert.equal(root.props['data-tab'], 'hochhaus', query)
+      assert.deepEqual(ui.screen(), ['hochhaus'], query)
+    } finally { ui.end() }
+  }
+})
+
+test('Seite: ?tab=freigabe zeigt das Pult in der alten Hülle, ?tab=botleads den Keller; data-tab folgt', async () => {
+  const pult = await seite('tab=freigabe')
+  try {
+    assert.equal(pult.root().props['data-tab'], 'freigabe'); assert.deepEqual(pult.screen(), ['pult'])
+    assert.equal(byClass(pult.root(), 'page').length, 1); assert.ok(hasClass(byClass(pult.root(), 'page')[0], 'wk-page'))
+  } finally { pult.end() }
+  const keller = await seite('tab=botleads')
+  try {
+    assert.equal(keller.root().props['data-tab'], 'botleads'); assert.deepEqual(keller.screen(), ['keller'])
+    assert.equal(byClass(keller.root(), 'page').length, 1)
+  } finally { keller.end() }
+})
+
+test('Seite: keine Seitenüberschrift, keine Reiterleiste', async () => {
+  for (const query of ['', 'tab=freigabe', 'tab=botleads']) {
+    const ui = await seite(query)
+    try {
+      assert.equal(nodes(ui.root(), (n) => n.tag === 'h1').length, 0)
+      assert.equal(nodes(ui.root(), (n) => n.props && (n.props.role === 'tablist' || n.props.role === 'tab')).length, 0)
+      assert.ok(!textOf(ui.root()).includes('Nachtschicht'))
+    } finally { ui.end() }
+  }
+})
+
+test('Seite: Hochhaus bekommt api, isAdmin, Feed-Werte, Hustler-Tabelle, regieRef; onOpen wechselt per setParams({ tab })', async () => {
+  const state = makeState({ statuses: { lea: 'wartet' } })
+  const refresh = () => {}
+  const feed = { state, error: null, loaded: true, refresh }
+  for (const admin of [false, true]) {
+    const ui = await seite('tab=hochhaus&bot=zurueckgeblieben', { admin, feed })
+    try {
+      const p = ui.hk.props.hochhaus
+      assert.equal(p.api, ui.hk.api); assert.equal(p.isAdmin, admin)
+      assert.deepEqual(Object.keys(p.feed).sort(), ['error', 'loaded', 'refresh', 'state'])
+      assert.equal(p.feed.state, state); assert.equal(p.feed.loaded, true); assert.equal(p.feed.error, null); assert.equal(p.feed.refresh, refresh)
+      assert.equal(Object.keys(p.workers).length, 19); assert.equal(p.workers.lea.status, 'wartet')
+      assert.deepEqual(Object.keys(p.regieRef), ['current']); assert.equal(p.regieRef.current, null)
+      p.onOpen('freigabe'); p.onOpen('botleads')
+      // setParams ersetzt alle Parameter: ein Wechsel nimmt bot nicht mit
+      assert.deepEqual(ui.setParamsCalls, [{ tab: 'freigabe' }, { tab: 'botleads' }])
+    } finally { ui.end() }
+  }
+})
+
+test('Seite: Pult bekommt api, me (Id und Name), Kennzahlen, Hustler-Tabelle und onBack -> Hochhaus', async () => {
+  const state = makeState({ kpis: { pultOpen: 4 } })
+  const ui = await seite('tab=freigabe', { feed: { state, error: null, loaded: true, refresh() {} } })
+  try {
+    const p = ui.hk.props.pult
+    assert.equal(p.api, ui.hk.api); assert.deepEqual(p.me, { id: 'u-1', name: 'Kenso' })
+    assert.equal(p.kpis, state.kpis); assert.equal(p.kpis.pultOpen, 4)
+    assert.equal(Object.keys(p.workers).length, 19)
+    p.onBack()
+    assert.deepEqual(ui.setParamsCalls, [{ tab: 'hochhaus' }])
+  } finally { ui.end() }
+})
+
+test('Seite: Keller bekommt api, bot aus der Adresse, Kennzahlen, Hustler-Tabelle; onClearBot behält den Reiter, onBack geht ins Hochhaus', async () => {
+  const state = makeState()
+  const ui = await seite('tab=botleads&bot=abc123', { feed: { state, error: null, loaded: true, refresh() {} } })
+  try {
+    const p = ui.hk.props.keller
+    assert.equal(p.api, ui.hk.api); assert.equal(p.bot, 'abc123'); assert.equal(p.kpis, state.kpis); assert.equal(Object.keys(p.workers).length, 19)
+    p.onClearBot(); p.onBack()
+    assert.deepEqual(ui.setParamsCalls, [{ tab: 'botleads' }, { tab: 'hochhaus' }])
+  } finally { ui.end() }
+  const ohne = await seite('tab=botleads')
+  try { assert.equal(ohne.hk.props.keller.bot, '') } finally { ohne.end() }
+})
+
+test('Seite: vor dem ersten Schnappschuss gibt es keine Kennzahlen und eine leere Hustler-Tabelle', async () => {
+  const ui = await seite('tab=freigabe')
+  try {
+    assert.equal(ui.hk.props.pult.kpis, undefined); assert.deepEqual(ui.hk.props.pult.workers, {})
+  } finally { ui.end() }
+})
+
+test('Seite: der Feed läuft genau einmal pro Seite, mit der api der Seite, und startet beim Bildschirmwechsel nicht neu', async () => {
+  const state = makeState()
+  const ui = await seite('tab=hochhaus', { feed: { state, error: null, loaded: true, refresh() {} } })
+  try {
+    assert.equal(ui.hk.feedMounts, 1)
+    assert.equal(ui.hk.feedCalls[0].api, ui.hk.api); assert.equal(typeof ui.hk.feedCalls[0].options.onEvents, 'function')
+    ui.go('tab=freigabe'); assert.deepEqual(ui.screen(), ['pult'])
+    ui.go('tab=botleads&bot=x'); assert.deepEqual(ui.screen(), ['keller'])
+    ui.go('tab=hochhaus'); assert.deepEqual(ui.screen(), ['hochhaus'])
+    assert.equal(ui.hk.feedMounts, 1); assert.equal(ui.hk.feedUnmounts, 0)
+    // Die Hustler-Tabelle bleibt über Bildschirmwechsel erhalten
+    assert.equal(Object.keys(ui.hk.props.hochhaus.workers).length, 19)
+    // onEvents bleibt zwischen den Rendern dieselbe Funktion (der Feed-Hook darf sich nicht an einer neuen Funktion verschlucken)
+    assert.ok(ui.hk.feedCalls.every((c) => c.options.onEvents === ui.hk.feedCalls[0].options.onEvents))
+  } finally { ui.end() }
+  assert.equal(ui.hk.feedUnmounts, 1)
+})
+
+test('Seite: Ereignisse schreiben die Hustler-Tabelle fort und gehen als dieselbe Liste an regieRef.current.push; ohne Regie kein Fehler', async () => {
+  const state = makeState({ statuses: { lea: 'wartet' } })
+  const ui = await seite('tab=hochhaus', { feed: { state, error: null, loaded: true, refresh() {} } })
+  try {
+    assert.equal(ui.hk.props.hochhaus.workers.lea.status, 'wartet')
+    // noch keine Regie eingehängt: nur die Tabelle ändert sich
+    const e1 = [ev('auftrag', 'lea', { text: 'Suche Betriebe in Kaiserslautern' })]
+    ui.hk.onEvents(e1)
+    assert.equal(ui.hk.props.hochhaus.workers.lea.status, 'arbeitet'); assert.equal(ui.hk.props.hochhaus.workers.lea.task, 'Suche Betriebe in Kaiserslautern')
+    // Das Hochhaus hängt eine Regie ein
+    const pushed = []
+    ui.hk.props.hochhaus.regieRef.current = { push: (events) => pushed.push(events) }
+    const e2 = [ev('leerlauf', 'lea', { text: 'Nichts zu tun' }), ev('fehler', 'kim', { text: 'Portal gesperrt' })]
+    ui.hk.onEvents(e2)
+    assert.equal(pushed.length, 1); assert.equal(pushed[0], e2)
+    assert.equal(ui.hk.props.hochhaus.workers.lea.status, 'leerlauf'); assert.equal(ui.hk.props.hochhaus.workers.kim.status, 'fehler')
+    assert.equal(ui.hk.props.hochhaus.workers.rita.status, 'arbeitet')
+    // Ereignisse erreichen die Tabelle auch, wenn ein anderer Bildschirm offen ist; die Regie bekommt sie weiter (nur das Hochhaus hängt eine ein)
+    ui.go('tab=freigabe')
+    ui.hk.onEvents([ev('fehler', 'lea', { text: 'Stopp' })])
+    assert.equal(ui.hk.props.pult.workers.lea.status, 'fehler')
+  } finally { ui.end() }
+})
+
+test('Seite: ein neuer Schnappschuss setzt die Hustler-Tabelle neu (Ereignisse davor wirken nicht mehr)', async () => {
+  const feed = { state: null, error: null, loaded: false, refresh() {} }
+  const ui = await seite('tab=hochhaus', { feed })
+  try {
+    assert.deepEqual(ui.hk.props.hochhaus.workers, {})
+    ui.setFeed({ state: makeState(), loaded: true })
+    assert.equal(ui.hk.props.hochhaus.workers.lea.status, 'arbeitet')
+    ui.hk.onEvents([ev('leerlauf', 'lea', { text: 'Pause' })])
+    assert.equal(ui.hk.props.hochhaus.workers.lea.status, 'leerlauf')
+    ui.setFeed({ state: makeState({ statuses: { lea: 'wartet', kim: 'leerlauf' }, connected: { pia: false } }) })
+    const w = ui.hk.props.hochhaus.workers
+    assert.equal(w.lea.status, 'wartet'); assert.equal(w.kim.status, 'leerlauf'); assert.equal(w.pia.status, 'grau'); assert.equal(w.pia.connected, false)
+  } finally { ui.end() }
+})
+
+test('Seite: Tab-Titel „Hustler“ solange die Seite offen ist, beim Verlassen kommt der vorige zurück', async () => {
+  const { __mount, jsx, WorkersPage } = await loadSeite()
+  const hk = {
+    params: new URLSearchParams(''), setParams() {}, auth: { isAdmin: false, user: null }, api: {}, feed: { state: null, error: null, loaded: false, refresh() {} },
+    feedCalls: [], feedMounts: 0, feedUnmounts: 0, props: {}, onEvents: null,
+  }
+  const savedHk = globalThis.__hk
+  globalThis.__hk = hk
+  globalThis.document = { title: 'WOMS – Projekte' }
+  const mounted = __mount(jsx(WorkersPage, {}))
+  try {
+    await settle()
+    assert.equal(globalThis.document.title, 'Hustler')
+    mounted.unmount()
+    assert.equal(globalThis.document.title, 'WOMS – Projekte')
+  } finally {
+    if (savedHk === undefined) delete globalThis.__hk; else globalThis.__hk = savedHk
+    delete globalThis.document
+  }
+})
+
+test('Seite: ohne angemeldeten Nutzer bleibt me ohne Id und Name (kein Absturz)', async () => {
+  const ui = await seite('tab=freigabe')
+  try {
+    ui.hk.auth = { isAdmin: false, user: null }
+    ui.setFeed({})
+    assert.deepEqual(ui.hk.props.pult.me, { id: undefined, name: undefined })
+  } finally { ui.end() }
+})

tests/unit/workersRoute.test.mjs

@@ -1,6 +1,8 @@
 import test from 'node:test'
 import assert from 'node:assert/strict'
-import { readFileSync } from 'node:fs'
+import { readFileSync, readdirSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 // Die Seite und die Routen sind unter Node nicht ladbar (JSX, Router): geprüft wird der Quelltext (Muster workersComponents.test.mjs)
 test('App: /hustler lazy hinter ProtectedRoute, /leads und /workers leiten mit erhaltener Query auf /hustler um, kein statischer Import', () => {
@@ -11,20 +13,50 @@ test('App: /hustler lazy hinter ProtectedRoute, /leads und /workers leiten mit e
   assert.match(s, /function HustlerRedirect\(\)[\s\S]*?useLocation\(\)[\s\S]*?<Navigate to=\{`\/hustler\$\{search\}`\} replace \/>/)   // /workers?tab=botleads&bot=x → /hustler?tab=botleads&bot=x
   assert.ok(s.indexOf('path="/hustler"') < s.indexOf('path="*"')); assert.ok(s.indexOf('path="/workers"') < s.indexOf('path="*"'))
 })
-test('WorkersPage: Titel Hustler (H1 und Tab-Titel), Reiter hochhaus und freigabe, Reiterleiste erst ab zwei Reitern, api-Instanz, Admin-Weitergabe', () => {
+test('WorkersPage: Tab-Titel Hustler, drei Bildschirme in fester Reihenfolge, keine Seitenüberschrift und keine Reiterleiste mehr, api-Instanz, Admin-Weitergabe ans Hochhaus', () => {
   const s = readFileSync(new URL('../../src/pages/WorkersPage.jsx', import.meta.url), 'utf8')
-  assert.match(s, /title="Hustler"/); assert.match(s, /document\.title = 'Hustler'/)
-  assert.match(s, /id: 'hochhaus'/); assert.match(s, /id: 'freigabe'/); assert.match(s, /WORKERS_TABS\.length > 1/)
-  assert.match(s, /const api = workersApi/); assert.match(s, /pickTab\(/); assert.match(s, /isAdmin=\{isAdmin\}/)
+  assert.match(s, /document\.title = 'Hustler'/); assert.match(s, /return \(\) => \{ document\.title = previous \}/)   // der alte Titel kommt beim Verlassen zurück
+  assert.match(s, /id: 'hochhaus', label: 'Hochhaus'/); assert.match(s, /id: 'freigabe', label: 'Freigabe'/); assert.match(s, /id: 'botleads', label: 'Bot-Leads'/)
+  assert.ok(s.indexOf("id: 'hochhaus'") < s.indexOf("id: 'freigabe'") && s.indexOf("id: 'freigabe'") < s.indexOf("id: 'botleads'"))
+  assert.doesNotMatch(s, /title="Hustler"/); assert.doesNotMatch(s, /PageHeader/); assert.doesNotMatch(s, /<Tabs\b/); assert.doesNotMatch(s, /WORKERS_TABS\.length > 1/)
+  assert.match(s, /const api = workersApi/); assert.match(s, /pickTab\(WORKERS_TABS, params\.get\('tab'\)\)/); assert.match(s, /useAuth\(\)/)
+  assert.match(s, /<Hochhaus[^>]*\bapi=\{api\}/); assert.match(s, /<Hochhaus[^>]*isAdmin=\{isAdmin\}/)
+  assert.match(s, /<div className="hk-seite" data-tab=\{active\.id\}>/)   // Vollhöhen-Rahmen, data-tab schaltet den Übergang für Pult und Keller
+  assert.match(s, /import Hochhaus from '\.\.\/components\/workers\/hochhaus\/Hochhaus'/)
+  assert.doesNotMatch(s, /WorkersBoard/)   // die Kanvas-Oberfläche wird nicht mehr benutzt
 })
-test('WorkersPage: Reiter botleads hinter freigabe zeigt die BotLeadList mit api, bot aus der Adresse und onClearBot, der den Reiter behält; ein Reiterwechsel lässt bot weg', () => {
+test('WorkersPage: der Feed läuft einmal pro Seite und füllt die Hustler-Tabelle; Ereignisse gehen zusätzlich an die Regie', () => {
   const s = readFileSync(new URL('../../src/pages/WorkersPage.jsx', import.meta.url), 'utf8')
-  assert.match(s, /id: 'botleads', label: 'Bot-Leads'/); assert.ok(s.indexOf("id: 'freigabe'") < s.indexOf("id: 'botleads'"))
-  assert.match(s, /import BotLeadList from '\.\.\/components\/workers\/BotLeadList'/); assert.match(s, /active\.id === 'botleads' && <BotLeadList[^>]*api=\{api\}/)
+  assert.equal(s.match(/useWorkersFeed\(/g).length, 1)
+  assert.match(s, /const \{ state, error, loaded, refresh \} = useWorkersFeed\(api, \{ onEvents \}\)/)
+  assert.match(s, /indexWorkers\(state\)/); assert.match(s, /reduceEvents\(w, events\)/)
+  assert.match(s, /const regieRef = useRef\(null\)/); assert.match(s, /regieRef\.current\.push\(events\)/); assert.match(s, /<Hochhaus[^>]*regieRef=\{regieRef\}/)
+  assert.match(s, /feed=\{\{ state, error, loaded, refresh \}\}/); assert.match(s, /<Hochhaus[^>]*workers=\{workers\}/)
+  for (const f of ['Hochhaus', 'PultList', 'BotLeadList']) assert.equal(readFileSync(new URL(`../../src/components/workers/${f === 'Hochhaus' ? 'hochhaus/' : ''}${f}.jsx`, import.meta.url), 'utf8').includes('useWorkersFeed('), false, `${f} startet keinen eigenen Feed`)
+})
+test('WorkersPage: freigabe zeigt die PultList, botleads die BotLeadList (api, bot aus der Adresse, onClearBot behält den Reiter); Wechsel per setParams lässt bot weg; Zurück ins Hochhaus', () => {
+  const s = readFileSync(new URL('../../src/pages/WorkersPage.jsx', import.meta.url), 'utf8')
+  assert.match(s, /import PultList from '\.\.\/components\/workers\/PultList'/); assert.match(s, /import BotLeadList from '\.\.\/components\/workers\/BotLeadList'/)
+  assert.match(s, /active\.id === 'freigabe' && \([\s\S]*?<PultList[^>]*\bapi=\{api\}/); assert.match(s, /<PultList[^>]*me=\{\{ id: user\?\.\$id, name: user\?\.name \}\}/)
+  assert.match(s, /active\.id === 'botleads' && \([\s\S]*?<BotLeadList[^>]*\bapi=\{api\}/)
   assert.match(s, /params\.get\('bot'\)/); assert.match(s, /<BotLeadList[^>]*\bbot=\{bot\}/); assert.match(s, /<BotLeadList[^>]*onClearBot=\{\(\) => setParams\(\{ tab: 'botleads' \}\)\}/)
-  assert.match(s, /onChange=\{\(id\) => setParams\(\{ tab: id \}\)\}/)   // setParams ersetzt alle Parameter: bot fällt beim Wechsel weg
+  assert.match(s, /onOpen=\{\(tab\) => setParams\(\{ tab \}\)\}/)   // setParams ersetzt alle Parameter: bot fällt beim Wechsel weg
+  assert.equal(s.match(/onBack=\{\(\) => setParams\(\{ tab: 'hochhaus' \}\)\}/g).length, 2)   // „◂ Hochhaus“ in Pult und Keller
+  for (const name of ['PultList', 'BotLeadList']) assert.match(s, new RegExp(`<${name}[\\s\\S]*?kpis=\\{state\\?\\.kpis\\}[\\s\\S]*?workers=\\{workers\\}[\\s\\S]*?/>`))
   assert.doesNotMatch(s, /Später kommt botleads/)
 })
+test('CSS-Importe der Hustler-Oberfläche stehen nur in WorkersPage, nicht in den Komponenten (sonst nicht unter Node mit fakeReact ladbar)', () => {
+  const s = readFileSync(new URL('../../src/pages/WorkersPage.jsx', import.meta.url), 'utf8')
+  for (const css of ['workers', 'hustler/schrift', 'hustler/hochhaus', 'hustler/keller', 'hustler/pult', 'hustler/hustler-ui']) assert.ok(s.includes(`import '../styles/${css}.css'`), css)
+  const walk = (dir) => readdirSync(dir, { withFileTypes: true }).flatMap((e) => (e.isDirectory() ? walk(path.join(dir, e.name)) : [path.join(dir, e.name)]))
+  const root = fileURLToPath(new URL('../../src/components/workers/', import.meta.url))
+  const files = walk(root).filter((f) => /\.(jsx?|mjs)$/.test(f))
+  assert.ok(files.length > 5)
+  for (const f of files) {
+    const text = readFileSync(f, 'utf8')
+    assert.doesNotMatch(text, /^\s*import\s+(?:[^'"\n]*\sfrom\s+)?['"][^'"]+\.(css|png|svg|jpe?g|webp|gif)['"]/m, `${path.relative(root, f)} importiert CSS oder Bilder`)
+  }
+})
 test('App: RouteErrorBoundary um die Routen im Inhaltsbereich (fehlender lazy-Chunk in altem Tab lässt nicht die ganze Oberfläche verschwinden), Pfad als resetKey', () => {
   const s = readFileSync(new URL('../../src/App.jsx', import.meta.url), 'utf8')
   assert.match(s, /import RouteErrorBoundary from '\.\/components\/RouteErrorBoundary'/)