AI Premium: v0-Parität & Dashboard-Steuerung

Ziel: Das React-Template (apps/digital-signage/…/ai-premium) durch eine v0-App ersetzen. Cockpit bleibt Source of Truth für Inhalte, Touchscreens, Wayfinding und App-Konfiguration — v0 entscheidet über Routen/URLs und UI-Design.

Für v0 mitgeben: Signage/Companion Config-Vertrag (empfohlen: signage-surface + Copy-Prompt aus Frontend-Kanäle) · Teil H + I (Terminal + Companion) · Teil F (Centerplan) · Teil K (Chat-Prompt + diese Seite) · System-Infos Kiosk+Companion

---

1. Rollenverteilung

Wer	Was
Cockpit Dashboard	Inhalte, Touchscreens, Centerplan, DOOH, AI-Premium-Optionen (Feature-Toggles, Farben, Labels)
Dashboard-API	Öffentliche GETs — v0 lädt beim Start / bei Refresh
v0-App	UI, Routing, Terminal-Layout — keine festen Pfade wie /ai-premium nötig
React-Template (Monorepo)	Referenz für Verhalten und Feature-Liste — nicht mehr hosten, wenn v0 Parität hat

Template-ID (intern, API): ai-premium — nur für signage-template-options?template=ai-premium und defaultSignageTemplate. Nicht als URL-Pfad vorschreiben.

---

2. URLs: v0 bestimmt die Routen

Cockpit schreibt v0 keine Pfade vor. Das Monorepo nutzt historisch /ai-premium und /companion/t/premium — v0 darf z. B. /kiosk, /stele, /now, /app wählen.

v0-Seite

• Env (Beispiel): NEXT_PUBLIC_KIOSK_PATH=/kiosk, NEXT_PUBLIC_COMPANION_PATH=/now
• Handoff-QR: Ziel = {origin}{NEXT_PUBLIC_COMPANION_PATH}?centerId=&sessionKey=&screen=…&shop=…
• Gleiches v0-Projekt: Kiosk + Companion unter einer Origin (empfohlen) — dann reicht window.location.origin + Companion-Pfad
• Getrennte Deployments: Companion-Basis aus Cockpit lesen → signage-config.companionPublicUrl

Cockpit-Seite (nach v0-Deploy)

1. Website-Management → Frontend-Kanäle (v0) — Kanäle signage und companion auf die v0-Produktions-URLs setzen (Teil J)
2. Optional: signagePublicUrl / companionPublicUrl manuell pflegen — erscheinen in GET …/signage-config
3. Touchscreens im Dashboard verweisen auf die öffentliche Kiosk-URL (mit ?touchscreenId=…)

Handoff-Vertrag (plattformweit, unabhängig vom Pfad): Query-Parameter centerId, sessionKey, optional shop, screen, floorNumber — siehe Kiosk + Companion NOW!.

---

3. Dashboard-Steuerung (was Redaktion sieht)

Pfad: Dashboard → Content → Center → Tab Kiosk → Reiter Wartungsmodus (immer sichtbar, alle Templates) bzw. AI Premium Kiosk / AI Premium Companion (nur bei defaultSignageTemplate = ai-premium).

Speicherort: ShoppingCenter.signageTemplateOptions['ai-premium'].kiosk bzw. .companion

API (öffentlich, kein Login):

GET /api/centers/{centerId}/signage-surface (empfohlen — gemergt inkl. v0CustomInstructions)

GET /api/centers/{centerId}/signage-template-options?template=ai-premium
→ { success: true, centerLogoUrl, options: { kiosk: { … }, companion: { … } } }

Leere oder fehlende Felder sind mit Dashboard-Defaults (DEFAULT_AI_PREMIUM_*) vorbelegt — v0 kann direkt options.kiosk.enableOffers etc. lesen. centerLogoUrl ist das Center-Logo aus den Stammdaten (Fallback: GET …/signage-config → logoUrl).

Regel für v0: Jeder Schalter im Dashboard muss live wirken — Feature-Toggles, Labels und Farben nicht im v0-Code hardcoden. Die GET-Response liefert für template=ai-premium bereits mit Dashboard-Defaults gemergte options.kiosk / options.companion (leere DB-Felder = Standardwerte).

Kiosk-Optionen → v0-Verhalten

Dashboard-Feld	Wirkung in der App
accentColor	Buttons, Links, Akzente
kioskColorScheme	light / dark — Theme-Tokens
locationLabel	Header-Standort (Fallback wenn kein Display-Config)
hotPicksLimit	Max. Hot Picks auf Start
showFeaturedNews	News/Highlights-Bereich
wayfindingSource	auto / svg / dashboard — Routing-Quelle
force2DMap, routeColor, routeSmoothing	Centerplan-Darstellung
a11yDefault	Start mit Aufzug-Routing
idleTimeoutSeconds	DOOH / Idle (30–120 s)
autoRefreshMinutes	Reload bei Inaktivität
enableOffers … enableBottomQuickMenu	Feature-Toggles (siehe Checkliste §4)
*Label	Titel der Quick-Icons
enableTraffic + trafficMapEmbedUrl	Verkehrs-Slide-up
enableSocialFeed + socialFeedEmbedCode	Social-Embed
enableTransitMonitor + transitMonitorEmbedUrl	ÖPNV-Embed
enableDoohIdle, doohPersistentSlotBelowHeader, enableDoohIdleFullscreenOverlay	DOOH aus GET …/dooh/active (Signage) — alternativ dooh/public/active nur bei websiteEnabled
(global) maintenanceModeEnabled	Wartungsmodus für alle Signage-Templates — Reiter Wartungsmodus oder GET …/signage-global-options
(global) maintenanceMessage	Hinweistext unter dem Logo (Logo: centerLogoUrl / signage-config.logoUrl)

Companion-Optionen

Feld	Wirkung
accentColor	Companion-Akzente
showAISuggestions	Vorschlags-Chips in der Chatbar
defaultTargetShop	Standard-Ziel nach QR-Scan

Zusätzlich: companionConfig (Reiter Companion App) — plattformweite Feature-Flags (Wayfinding, AI-Chat, …) über GET …/signage-config → companionConfig.

---

4. Feature-Parität: Kiosk (React-Referenz)

Referenz-Code: AIPremiumKioskShell.tsx, Daten: load-ai-premium-family-kiosk-page.ts.

Pflicht für Ablösung (Phase 1)

Feature	Dashboard-Toggle	Daten-API
Start mit Centerplan als Hero	—	wayfinding/floors, Display-Config
Etage pro Stele	—	signage-config, signage-display-config?displayId=
Shops-Liste + Shop-Detail	—	shops, Services optional
Slide-ups: Angebote/News/Events	enableOffers	news, aktuelles-Bundle
Gastronomie	enableFood	services / gefilterte Shops
Services	enableServices	services
Hot Picks	enableHighlights	hotpicks
In der Nähe	enableNearby	signage-nearby?displayId=
KI-Suche / Concierge	enableAiSearch	POST …/ai/visitor-chatbot
Unteres Quick-Menü	enableBottomQuickMenu	—
Handoff-QR	enableHandoffQr	POST …/handoff-sessions
Barrierefrei-Overlay	enableA11y	Routing-Optionen
Gruppen-Session-QR	enableGroupSession	Group-Session-API
Wayfinding Ziel auf Startkarte	—	Routing API / SVG
Idle-Reset (Datenschutz)	—	~90 s UX (Teil H)
DOOH Idle	enableDoohIdle	dooh/active (Signage) — dooh/public/active nur bei Website-Kanal

Phase 2 (optional, kann nachziehen)

Feature	Toggle / Quelle
Traffic / Social / ÖPNV	enableTraffic, enableSocialFeed, enableTransitMonitor
DOOH dauerhaft unter Header	doohPersistentSlotBelowHeader
Auto-Refresh	autoRefreshMinutes

---

5. Feature-Parität: Companion (Phase 1)

Referenz: AIPremiumCompanionShell.tsx

Feature	Quelle
Handoff (sessionKey, shop, screen)	URL-Params + PATCH handoff-sessions
Home mit Karte + Hot Picks	floors, hotpicks, template-options
Inline-Route auf Home	Wayfinding + Routing
Dedizierter Wayfinding-Screen	—
Shop-Detail Vollbild	shops/services
Angebots-Liste	offers / aktuelles
Concierge-Chatbar	visitor-chatbot + showAISuggestions
Standort-QR /companion/qr/[id] oder v0-eigener Pfad	public QR resolve/scan

Phase 2

• AR-Navigation / Shopfront-Tracking (MindAR) — siehe Premium AI Template
• Treueprogramm, Feedback-Routen — plattformweit, nicht AI-Premium-exklusiv

---

6. Startup-Daten (v0 Server / Route Handler)

Discovery: GET …/public-visitor-surface → data.apiHints enthält alle Signage-Pfade (siehe unten).

Parallel laden (wie Monorepo):

1. GET …/signage-config — Branding, Touchscreens, signagePublicUrl, companionPublicUrl
2. GET …/signage-template-options?template=ai-premium — Dashboard-Steuerung
3. GET …/signage-display-config?displayId={touchscreenId} — Standort, Etage, SVG-Start
4. GET …/public-visitor-surface — Branding, Chatbot-Hinweise, apiHints
5. Content: hotpicks, shops, services, news?published=true
6. Optional: signage-nearby, dooh/active (Signage, CORS) oder dooh/public/active (nur bei websiteEnabled), center-config (Traffic-Kontext)

apiHints (public-visitor-surface)

Key	Zweck
signageConfigGet	Stele, Branding, URLs
signageTemplateOptionsGet	AI-Premium-Optionen (?template=ai-premium)
signageDisplayConfigGet	Standort/Etage pro Stele
signageNearbyGet	In der Nähe
doohSignageActiveGet	DOOH Idle (ohne websiteEnabled)
hotPicksGet	Hot Picks
handoffSessionPost	Handoff Kiosk → Companion
groupSessionPost	Gruppen-QR
touchscreensGet	Touchscreen-Liste

Device-Binding: ?touchscreenId= oder NEXT_PUBLIC_KIOSK_TOUCHSCREEN_ID — kein hardcodiertes Floor-Env.

---

7. v0 — Instruction H + Chat-Prompt K

v0 erlaubt max. 10 Instructions (A–J). AI-Premium-Steuerung gehört in Instruction „Cockpit H“ (Abschnitt „AI PREMIUM — DASHBOARD-STEUERUNG“).
Teil K ist nur Chat-Prompt für Feature-Lücken — siehe center-website-v0-api-ready-to-go (Teil K, kein Slot).

In H enthalten (Kurz):

• signage-template-options?template=ai-premium → alle enable*, Labels, Farben
• apiHints-Discovery, Startup-APIs, Phase-1-Feature-Liste
• Handoff-QR vs Gruppen-QR getrennt

Chat bei Lücken (einmalig, nicht als Instruction):

Vergleiche v0-Signage mit Cockpit-Doku „AI Premium v0-Parität“ Phase 1.
Fehlende Kiosk-Features an options.kiosk.enable* koppeln. Companion → Teil I. Keine Dummy-Daten.

---

8. Cockpit-Checkliste (Projekt)

• defaultSignageTemplate = ai-premium für das Center
• AI-Premium-Optionen im Signage-Reiter gepflegt und getestet (Toggle → v0 neu laden)
• Touchscreens mit Etage + MapLocation zugeordnet
• Frontend-Kanäle: signage + companion → v0-URLs
• Handoff E2E: QR → Companion mit sessionKey
• Paritäts-Checkliste §4/§5 abhaken
• React-Hosting (*.signage.cockpit-os.de) abschalten, wenn v0 stabil

---

9. v0-Chat-Prompt (Feature-Lücken schließen)

„Vergleiche unsere v0-Signage-App mit der Cockpit-Doku AI Premium v0-Parität (Feature-Checkliste Phase 1). Implementiere fehlende Kiosk-Features und koppel sie an signage-template-options?template=ai-premium → options.kiosk. Companion fehlt X → Teil I. URLs bleiben bei unseren Pfaden {KIOSK_PATH} / {COMPANION_PATH}. Keine Dummy-Daten.“

---

Referenz-Implementierung: Premium AI Template · Hosting: Parallele Frontends