System Info for v0: Kiosk Template & Companion App

Purpose: To provide information to v0 so that generated concepts/apps fit our cockpitOS system (Digital Signage + Wayfinding for malls in Germany).

---

Context for v0

• Old Version: Digital Signage App with Wayfinding for malls – outdated, gaps in the user flow.
• New System: Significantly more features, but the UI is still missing – v0 is meant to provide concepts/templates for this.
• Two Interfaces (always in pairs):
  1. Kiosk = large touchscreen in the center (wayfinder/info terminal) → v0 Part H (+ F/F2 for map).
  2. Companion / NOW! = mobile app. User scans QR code at the kiosk and continues on their phone → v0 Part I (always together with Kiosk in the same project).

Copy-Paste Instructions: v0 + Cockpit (How it works) — Part H & I (Instructions "Cockpit H" + "Cockpit I").

Kiosk = Info Terminal (not a large phone)

A 55″ stele is not a larger smartphone. v0 is to build in a terminal style:

• Map as Hero — at least 75% of the area (2D/3D center map)
• Compact Header — about 40px (logo, clock), no large hero banner
• Floating Floor-Pills — floor tabs as small pills above the map (overlay)
• Narrow Icon Toolbar at the bottom — search, shops, route, handoff QR
• Compact Info Cards for shop/route — no mobile full-screen sheets
• Higher information density, smaller typography than the Companion (Part I)

Vercel Hosting (in addition to Cockpit)

Website, Kiosk, and Companion can run in parallel: Cockpit (*.cockpit-os.de, preview, custom domain) and optionally v0/Vercel. The API remains dashboard.cockpit-os.de.

Details: Parallel Frontends (Website, Signage, Companion)

---

1. Kiosk (Touchscreen) – what the system can do

Screens (all configurable to show/hide)

Screen	Description
Home	Hero (image/video/slideshow, optionally time-controlled), welcome text, quick links (shops, center map, services, current news). Optional: Bento grid with welcome + mood cards.
Shops	Overview of shops with search, A–Z filter, categories. No hardcodes – data from props/CMS.
Shop Detail	Individual shop: name, logo, category, floor, opening hours, optionally start route.
Center Map	Interactive map (wayfinding): floors, shops/locations, route calculation, "Continue on mobile" via QR.
Services	Overview of services (info, lost and found, restrooms, etc.) – from CMS.
Current	Feed from news, events, offers, jobs – uniform content cards.
Current Detail	Individual view for a news/event/offer/job entry.
Social Media (optional)	Widget (e.g., Elfsight) – configurable.

Navigation between screens via onNavigate callback (no router for template internal flow). Screen order and active screens per center configurable.

Kiosk Configuration (from CMS/Dashboard)

• Template: e.g., standard | wayfinder | foodcourt.
• Theme: light | dark.
• Hero: an image or Hero Media Playlist: multiple items (image/video/slideshow), optionally with time window (startTime/endTime HH:MM).
• Bento Grid (Home): Welcome text, subtext, mood media for welcome and per quick link, up to 3 mood cards – everything configurable.
• Colors: primary, secondary, background, accent; optionally per quick link (shops, center map, services, current news).
• Design: glassmorphism, animations, decorative shapes (triangles/circles) – optional.
• Features (on/off): search, wayfinding, services, accessibility, Companion (QR code "Continue on mobile").
• Quick Links: list from config (id, label, icon, route, enabled).

Everything is dynamically configurable from Config/Props – no hardcoded texts or center names.

Wayfinding at the Kiosk

• Multi-Floor: Floors, portals (stairs/elevator/escalator), routes across floors.
• Route Calculation: Start (e.g., kiosk at main entrance) → destination (shop/location); API: POST /api/wayfinding/routing.
• Accessibility: Options such as "prefer elevator", "avoid stairs" – passed to routing API.
• "Continue on mobile": Generate QR code → leads to Companion with session (centerId, sessionKey) and optionally destination (e.g., shopId), so the user sees the same route on their phone.
• Shop Overlay (3D Map): When opening a shop detail overlay, the map will be framed so that the kiosk starting point and the tapped shop are visible at the same time; after closing the overlay, the view returns to the normal map view (without active navigation route, the previous logic remains unchanged).

Content Types (all from CMS)

• News (author, category, tags, video, shop links).
• Events (start/end, location, price, shop/service).
• Offers (discount, validity, shop).
• Jobs (requirements, salary, deadline, external URL).
• Hot Picks: curated recommendations (shop/event/news/offer) – compatible for signage and Companion.

No placeholder texts in the template – only fallbacks when, for example, shops.length === 0.

---

2. Companion App (Mobile) – what the system can do

Entry & Session

• User scans QR at the kiosk → opens with centerId + sessionKey (and optionally e.g., shopId for wayfinding).
• Without QR: Call with centerId (and optionally sessionKey) – e.g., starts on Center Overview.
• AI Premium Companion (NOW! start with map): In the shop overlay, "Plan route" starts navigation on the same map view (no switch to a second center map page). The route bar (back, accessible, plan/AR) appears and the steps panel; AR remains in full screen. Via the menu item Center Map, the dedicated wayfinding full-screen view remains accessible.
• NOW! App-Chrome: Header (logo, NOW!, actions) and concierge input at the bottom are fixed in layout or position: fixed to the viewport; only the area below scrolls. The Companion shell does not use side slide animations on the screen container to ensure fixed stays reliably to the viewport (no "scrolling" header). The start header on the map home is without full-width bar: logo and actions sit in floating glass pills (like the route bar). Once an inline route is active, the header will be completely hidden (only distance for the safe area) so that two headers do not overlap – regardless of whether centerId is set at that moment.
• Same Center Map as Kiosk (3D): Companion renders WayfinderMapEmbed → the same ModularIsometricWayfinding component as the Kiosk (unless explicitly set to 2D/SVG via force2DMap). The overlay UI must not lay a full-area scroll layer over the map, otherwise tapping on areas is blocked (Fix: only the banner area scrolls, the map gap remains permeable).
• Shop Detail Sheet (MapInfoSheet) and Chat: The bottom sheet must be rendered outside the relative z-10 overlay container. If it lies within, its level remains below the fixed concierge bar (z-[60]); then clicks on "Plan route" act as hits on the suggestion chips behind it.
• Tap the map (Companion Home): The map area (fixed, pointer-events: auto) lies below the UI layer with pointer-events: none; interactive parts (header, banner box) have pointer-events: auto. The highlights bar has outside pointer-events: none, only the visible stripe auto. The collapsed chat bar (CompanionChatbar): outer fixed wrapper pointer-events: none, only the bottom glass bar pointer-events: auto – otherwise, an invisible area intercepts clicks (e.g., tapping on "Details" in the shop sheet acts like opening the chat).
• Shop Sheet on top: MapInfoSheet (Companion, not Kiosk) uses z-index ~500/510 over concierge (z-[60]), ensuring backdrop + sheet safely above dev indicator (Next.js "N") and chat. In dev, next.config can set devIndicators: false (digital-signage) so that the indicator does not overlay the UI.
• Details & Offers (Full Screen): "Details" in the shop sheet does not switch to empty: the Companion shell (AIPremiumCompanionShell) opens the same full-screen shop detail component as the Kiosk (KioskShopDetail), with shops/services from the same API/cache pipeline as the Kiosk. "Offers" opens the offers list (KioskOffersSlideUp) as a full-screen overlay; map navigation uses the shop name from the offer.

Companion Routes (all existing/planned)

Route	Meaning
/companion/center-overview	Start: “What’s happening today in the center” – Quick Actions, Hot Picks, parking, etc.
/companion/shops	Shop directory (list/grid).
/companion/shops/[shopId]	Shop detail.
/companion/events	Events list.
/companion/news	News list.
/companion/offers	Offers.
/companion/wayfinding	Wayfinder (same logic as Kiosk, mode companion) – including multi-floor, route, "From main entrance" etc.
/companion/feedback/general	General feedback.
/companion/feedback/[locationId]	Feedback for a location (e.g., restroom, service).
/companion/reward-status	Loyalty program – points, status.
/companion/qr/[qrCodeId]	Deep link after QR scan (parking, event, news, offer, wayfinding, feedback, ...).

Design: own Companion layout (distinct “mobile app”, not 1:1 Kiosk), with its own design system (spacing, radius, typography, cards).

Companion Features (configurable per center)

• Wayfinding & Navigation (3D map, directions).
• AR Navigation (Beta): Camera live image with direction arrow, dead reckoning (gyroscope + step counter), map matching on corridor graph. Toggle between map and AR.
• AR Image Tracking (Beta): Shopfront recognition via MindAR.js -- point camera at shop front, shop name, offers, and events as overlay. Simultaneous re-calibration of navigation.
• Shop directory.
• AI Assistant (chatbot for questions about the center).
• Events & News.
• Offers.
• Parking info (availability, possibly navigation).
• QR scanner (scan QR codes in the center).
• Loyalty program (earn/redeem points).

Companion Layout Config

• showMap: show map as background (yes/no).
• showQuickLinks: show quick links on start/overview.
• theme: light | dark.

Companion uses centerConfig.companionConfig (branding, colors, layout, feature flags) – all from backend/CMS.

---

3. Common Technical Specifications (for v0 templates)

• Framework: Next.js 14, TypeScript, Tailwind CSS, Framer Motion.
• Kiosk: Client Component ('use client') – touch, interactivity, onNavigate.
• Data: All from Props/Config (config, shops, services, content, centerId, kioskConfig) – no hardcodes for center names, texts, shops.
• Images: next/image; fallbacks if no logo/hero.
• Touch: Large targets (min. 44–60 px), clear states (hover/active).
• Accessibility: Optional toggle at the kiosk; ARIA labels for important actions.
• Responsive: Kiosk for various resolutions; Companion clearly mobile-first.

What v0 should avoid

• No API calls in template (data comes as props).
• No hardcoded center names, addresses, or dummy shops.
• No external dependencies other than Next.js, React, Tailwind, Framer Motion (unless explicitly desired).

---

4. Summary for the v0 Prompt (Copy & Paste)

OUR SYSTEM (cockpitOS):

- Kiosk = touchscreen in the mall; Companion = mobile app. User scans QR at the kiosk and continues on their phone (session: centerId, sessionKey; optionally shopId for route).

Kiosk Screens (all configurable to show/hide): Home (Hero + Quick Links, optionally Bento/Mood), Shops, Shop Detail, Center Map (Wayfinding, Multi-Floor, “Continue on Mobile” QR), Services, Current, Current Detail, optional Social.

Kiosk Config: Template, Theme, Hero (image or media playlist with time window), Bento/Welcome/Mood, Colors, Glassmorphism, Animations, Feature Flags (search, wayfinding, services, accessibility, companion QR), Quick Links list.

Wayfinding: Floors, portals, routes across floors, accessibility (elevator/stairs), QR → Companion with same route.

Companion: Center Overview, Shops, Events, News, Offers, Wayfinding, Feedback, Parking, Reward Status, QR Deep Links. Features configurable per center (Wayfinding, Shops, AI Chat, Events, Offers, Parking, QR, Loyalty). Layout: showMap, showQuickLinks, theme. Own Companion design (not 1:1 Kiosk).

AR Navigation (Beta): Companion offers map/AR toggle. AR = camera live image with direction arrow (dead reckoning: gyroscope + step counter + map matching). Shopfront recognition via MindAR.js Image Tracking: point camera at shopfront -> overlay with shop name, offers, events. Dashboard: provide shopfront images per waypoint, compile AR markers (.mind file). API: /api/ar/image-targets returns marker data.

Content: news, events, offers, jobs, hot picks – all from CMS/Props. No hardcodes. Tech: Next.js 14, TS, Tailwind, Framer Motion; Kiosk = Client Component, touch-optimized, data only from props.

---

5. Where this stands in the project (for developers)

• Kiosk Template: apps/digital-signage/src/components/templates/kiosk-standard/ (README, config, screens).
• Kiosk Types/Config: apps/dashboard/src/types/kiosk.ts, Bento/Hero in config.
• Companion Routes: apps/digital-signage/src/companion/constants.ts (COMPANION_ROUTES).
• Companion Config: apps/dashboard/src/components/center/kiosk-configuration-new/companion-config-section.tsx (features, layout).
• Wayfinding: docs/wayfinding/APPS-WAYFINDING-SUPPORT.md, Wayfinder apps/digital-signage/src/app/wayfinder/page.tsx (mode: default | touchscreen | companion).
• v0 Prompt (previous): cockpit-docs/docs/templates/kiosk-prompt.mdx or apps/docs/src/content/docs/templates/kiosk-prompt.mdx.
• AR Navigation (Companion):
  • AR View: apps/digital-signage/src/companion/components/ar/ARNavigationView.tsx
  • AR Overlay: apps/digital-signage/src/companion/components/ar/ARShopOverlay.tsx
  • AR Hooks: apps/digital-signage/src/companion/hooks/use-ar-navigation.ts (dead reckoning), use-image-tracking.ts (MindAR)
  • AR Utils: apps/digital-signage/src/companion/lib/ar-utils.ts (position JSON with AR fields)
  • Image Targets API: apps/digital-signage/src/app/api/ar/image-targets/route.ts
  • MindAR Compiler (Dashboard): apps/dashboard/src/lib/wayfinding/mind-ar-compiler.ts
  • Three.js Compat Shim: apps/digital-signage/src/lib/three-compat.js, apps/dashboard/src/lib/wayfinding/three-compat.js

---

6. Predefined Intro Text for v0 (with system info)

You can start like this and then append your specific request (e.g., "Bento home with large touch tiles" or "Companion center overview with map and quick actions"):

In the screenshots, you see the current version of our Digital Signage App with Wayfinding for malls in Germany. It has become outdated and has many gaps in the user flow. The signage app comes with a companion app: the user scans a QR code at the large touchscreen in the center and can continue on their phone.

Our new system can do much more, but the UI is still missing. Here is the information about the system so your concept/template fits:

[INSERT CONTENT FROM SECTION 4 "Summary for the v0 Prompt" HERE]

Tech: Next.js 14, TypeScript, Tailwind, Framer Motion. Kiosk = Client Component, all data from Props (config, shops, services, content). Touch-optimized, large buttons, fallbacks for empty data. No API calls in the template, no hardcoded center names or dummy content.

[YOUR SPECIFIC REQUEST, e.g.:]
Please design a new kiosk home with a Bento grid and clear “Continue on Mobile” QR. Or: Design the Companion center overview with a map in the background and quick actions for shops, wayfinding, events, and feedback.