Demo Loop — Exact Flow & Complete Feature Map
One-Liner: "Watch a hotel PDF become a bookable tour, a passenger buy a ticket from their couch, and a driver board them in an Alpine valley with no WiFi — all without leaving one platform."
Format: ~6 min interactive prototype, real backend, pre-seeded data. Audience: Bus tour operator (GF / Disponent). First contact. Mood: Souverän — calm, confident, zero feature dumping.
The Loop: 7 Scenes
SCENE 0 — THE HOOK (30s)
Branded intro. "30 Stunden Abtippen → 3 Sekunden."
SCENE 1 — MAGIC UPLOAD (90s) [.theme-dispatcher]
PDF drag → AI extracts → split-screen review → approve
→ assign vehicle + driver → publish → the system generates a booking link 🎉
SCENE 2 — DISPATCH BOARD (60s) [.theme-dispatcher]
Gantt overview → drag Klaus onto tour → ✅ Compliance OK
→ drag Thomas → 🔴 "Im Urlaub" → can't drop
→ capacity badge fills: 0/49 → 47/49
SCENE 3 — BOOKING WIDGET + SEAT MAP (90s) [.theme-passenger]
✨ Theme shift ✨ → warm, boutique passenger view
Tour landing → visual seat map → pick seat 14
→ toggle Weinprobe upsell → Apple Pay → Wallet pass
SCENE 4 — DRIVER HUB (60s) [.theme-driver]
✨ Theme shift ✨ → dark, rugged, oversized targets
Daily assignment → passenger manifest → QR scan
→ green checkmark → "Offline-Modus aktiv" badge
SCENE 5 — CRISIS FLOW (45s) [.theme-dispatcher]
ServiceLeg flashes red → "Stau A13, ETA +45 min"
→ AI-drafted WhatsApp → one-click send
→ Wallet pass departure time updates live
SCENE 6 — THE BRIDGE (30s)
"Den Umstieg machen wir für Sie."
Concierge onboarding visual → "Pilotprojekt starten →"Key Demo Beats
| Beat | What Makes It Magic | Mood Phase |
|---|---|---|
| PDF → Tour in 3s | "The system understands my workflow" | Recognition |
| Compliance ✅/🔴 badges | "It catches mistakes silently" | Trust |
.theme-passenger shift | "This is a platform, not an app" | Flow |
| Seat map + Apple Pay | "My customers would book at midnight" | Delight |
| Offline QR scan | "My drivers would actually use this" | Trust |
| AI crisis broadcast | "It handles crises before I call" | Trust |
| Break-even badge (47/49) | "I see my business in real-time" | Confidence |
Feature Map — What Must Be Built
Legend
| Icon | Meaning |
|---|---|
| ✅ | Spec exists, ready to code |
| 🟡 | Schema exists, needs L3 spec (API, state machine, edge states) |
| 🔴 | Needs new spec from scratch |
| 🔧 | Infrastructure / glue |
| 💅 | Frontend build |
Scene 0 — The Hook
No features needed — branded slide or intro animation.
Scene 1 — Magic Upload (Backoffice)
| Feature | App | Status | Notes |
|---|---|---|---|
| Dropzone (drag & drop) | workspace | 🔴 | |
| PDF processing animation | workspace | 🔴 | 3s loading, subtle |
| Split-screen review (PDF + form) | workspace | 🔴 | Left: original PDF. Right: extracted data |
| TourTemplate form (title, dates, stops, pricing) | workspace | 🔴 💅 | |
| Vehicle selector (with seat map preview) | workspace | 🔴 💅 | |
| Crew selector dropdown | workspace | 🔴 💅 | |
| Publish action + booking link display | workspace | 🔴 💅 | |
| Confetti micro-animation | ui-core | 🔴 | |
| Mock AI extraction (n8n + LLM pipeline) | api / n8n | 🔴 | Pre-seeded output for demo PDF. Real pipeline later. |
Supporting (indirect):
| Feature | Status | Why Needed |
|---|---|---|
| App Shell / navigation | 🟡 | MainLayout.vue skeleton exists, needs build-out |
Theme .theme-dispatcher wiring | 🟡 | Tokens defined, needs CSS scope activation |
| Tenant provisioning + Nhost Auth | ✅ | ADR-003, ADR-005 |
| TourDeparture + BoardingPoint CRUD | ✅ | Fully spec'd |
| Vehicle + CrewMember CRUD | ✅ | Fully spec'd |
| Supplier CRUD (for § 25 demo) | ✅ | Needed for Fremdleistung proof |
| Hasura Backoffice schema + permissions | ✅ | |
| Demo seed data (PDF, tour, vehicles, crew) | 🔴 | See Seed Scenario |
Scene 2 — Dispatch Board (Backoffice)
| Feature | App | Status | Notes |
|---|---|---|---|
| Gantt timeline (resource rows, blocks, zoom) | workspace | 🔴 💅 | 3 vehicles, 4 crew, ~5 blocks |
| Resource panel (vehicles + crew, grouped) | workspace | 🔴 💅 | |
| Drag-and-drop assignment | workspace | 🔴 💅 | |
| Compliance Copilot badge (✅ green / 🔴 red) | workspace | 🔴 💅 | "Lenkzeit OK · Modul 95 gültig" |
| Conflict modal (red block + reason) | workspace | 🔴 💅 | "Thomas is on vacation" |
| Capacity badge on blocks | workspace | 🔴 💅 | 0/49 → 47/49 |
Supporting:
| Feature | Status | Why Needed |
|---|---|---|
| Dispatch Availability Engine | ✅ | dispatch-availability-engine.md |
| Crew Qualification Protocol | ✅ | crew-qualification-protocol.md |
| CrewAbsence data + rendering | 🔴 | Leave records for Thomas conflict demo |
| Qualification data rendering | 🔴 | Module 95, visa check display |
Scene 3 — Booking Widget + Seat Map (Commerce)
| Feature | App | Status | Notes |
|---|---|---|---|
| Tour landing page (hero, dates, pricing) | booking-widget | 🔴 💅 | Consumer-grade design |
| Interactive seat map (select, highlight, hold) | booking-widget | 🔴 💅 | From Vehicle.seat_map_layout JSONB |
| Boarding point selector (Zustiegsstelle) | booking-widget | 🔴 💅 | |
| Upsell toggle cards (Weinprobe) | booking-widget | 🔴 💅 | |
| Checkout flow (passenger form, payment) | booking-widget | 🔴 💅 | |
| Mollie payment (Apple Pay / Klarna) | booking-widget + api | 🔴 | Mollie test mode, real integration |
| Confirmation screen | booking-widget | 🔴 💅 | |
| Wallet Pass preview (Apple Wallet card) | booking-widget | 🔴 💅 | |
| WhatsApp booking confirmation | n8n | 🔴 | n8n workflow → WhatsApp Business API |
Supporting:
| Feature | Status | Why Needed |
|---|---|---|
Theme .theme-passenger wiring | 🟡 | Warm palette, serif headings. Transition IS a demo beat. |
| Booking State Machine (XState) | 🟡 | DRAFT → PENDING_PAYMENT → DEPOSIT_PAID → FULLY_PAID. Schema exists, needs L3 spec. |
| CheckoutSession lifecycle | 🟡 | Creation, TTL, conversion to Booking. Schema exists, needs L3. |
| SeatReservation hold + expiry | 🟡 | HELD → CONFIRMED → RELEASED. Schema + unique index exist, needs L3. |
TripPublished event + consumer | 🔴 | Creates TourOffering + PickupOptions from Backoffice event |
PriceMatrixPublished consumer | ✅ | Upserts tour_offering_prices. Contract spec'd. |
| Mollie OAuth + sub-account provisioning | 🔴 | Per-tenant marketplace splits |
| Commerce Hasura schema + permissions | 🟡 | Tables defined, Hasura metadata not configured |
| Responsive mobile layout | 🔴 | Booking widget must work on phone |
| Ticket + QR hash generation | 🟡 | The system requires a logic spec |
Scene 4 — Driver Hub (Operations)
| Feature | App | Status | Notes |
|---|---|---|---|
| Daily assignment view | driver (PWA) | 🔴 💅 | Tour, time, bus, route |
| Passenger manifest list | driver | 🔴 💅 | Names, seats, boarding points |
| QR scanner overlay | driver | 🔴 💅 | Camera-based, validates qr_hash |
| Check-in success animation | driver | 🔴 💅 | Green checkmark, "Eingecheckt ✓" |
| Offline mode indicator | driver | 🔴 💅 | "Offline-Modus aktiv" badge |
Supporting:
| Feature | Status | Why Needed |
|---|---|---|
Theme .theme-driver wiring | 🟡 | Dark, oversized touch targets. Transition IS a demo beat. |
| Driver PWA shell + Nhost auth | 🔴 | New app, crew-member scoped |
| Bottom-docked navigation | 🔴 | Mobile PWA pattern |
| Manifest read model | 🔴 | Denormalized join: Departure + Passengers + Seats + BoardingPoints |
| Offline sync protocol (IndexedDB) | 🟡 | Architecture described, no implementation spec |
| BoardingEvent write + offline queue | 🔴 | Idempotent by qr_hash, syncs when online |
| ServiceLeg auto-creation from TourDeparture | 🔴 | Operations needs legs when the system publishes the departure |
BookingConfirmed → manifest update | 🔴 | Passenger data flows to Operations read model |
Scene 5 — Crisis Flow (Cross-Domain)
| Feature | App | Status | Notes |
|---|---|---|---|
| Incident flash overlay on Gantt blocks | workspace | 🔴 💅 | Red pulse on affected ServiceLeg |
| Omnichannel Inbox sidebar | workspace | 🔴 💅 | |
| AI-drafted WhatsApp message preview | workspace | 🔴 💅 | Pre-drafted template |
| "Senden" action + confirmation | workspace | 🔴 💅 | |
| Wallet Pass live update animation | standalone | 🔴 💅 | Departure time changes in pass |
Supporting:
| Feature | Status | Why Needed |
|---|---|---|
| Incident data model | 🟡 | Schema exists in Operations, needs event trigger |
| NotificationTemplate renderer | 🔴 | Variable interpolation for WhatsApp template |
NotificationRequested event | 🔴 | Generic dispatch to Communications |
| Wallet Pass dynamic update (APNs) | 🔴 | Apple Push Notification for pass updates |
Scene 6 — The Bridge
| Feature | App | Status |
|---|---|---|
| Concierge onboarding timeline visual | static | 🔴 |
| CTA button | static | 🔴 |
Spec Work Required
New L3 Specs to Write
| # | Spec | Domain | Priority |
|---|---|---|---|
| S1 | Booking State Machine | Commerce | 🔥 |
| S2 | Checkout Flow (Session → Mollie → Confirmed) | Commerce | 🔥 |
| S3 | TourOffering Sync Protocol | Commerce ← Backoffice | 🔥 |
| S4 | Seat Reservation Protocol | Commerce | 🔥 |
| S5 | Driver Manifest Read Model | Operations | HIGH |
| S6 | Boarding Event Protocol (offline + sync) | Operations | HIGH |
| S7 | Wallet Pass Generation | Communications/Commerce | MED |
| S8 | Notification Dispatch | Communications | MED |
| S9 | Incident → Crisis Broadcast Flow | Cross-Domain | MED |
New Event Contracts to Write
| Event | Producer | Consumer(s) |
|---|---|---|
TripPublished | Backoffice | Commerce |
BoardingEvent | Operations | Backoffice |
NotificationRequested | Commerce/Operations | Communications (n8n) |
WalletPassIssued | Communications | Commerce |
IncidentCreated | Operations | Backoffice (dispatch board), Communications |
Ready to Implement (Spec'd)
| Spec | Document |
|---|---|
| Kalkulations-Engine | kalkulations-engine.md |
| PriceMatrix Event Contracts | event-contracts-pricing.md |
| Dispatch Availability Engine | dispatch-availability-engine.md |
| BookingConfirmed → CostingSheet Lock | ADR-009 |
| Vehicle Swap Protocol | vehicle-swap-protocol.md |
| Crew Qualification Protocol | crew-qualification-protocol.md |
| Tenant Provisioning | ADR-003 |
Build-or-Fake Matrix
| Feature | Real | Fake | Skip | Rationale |
|---|---|---|---|---|
| Kalkulations-Engine | ✅ | Core differentiator, tax wrapping must be real | ||
| PriceMatrix → Commerce sync | ✅ | Real event flow = "no duct-tape" proof | ||
| Booking Widget + checkout | ✅ | Must feel premium and real | ||
| Mollie payment | ✅ | Test mode, real capture flow | ||
| BookingConfirmed cascade | ✅ | Event → lock + manifest = architectural proof | ||
| Driver PWA + offline QR | ✅ | Core differentiator, must work offline | ||
| Break-even progress bar | ✅ | Small build, high emotional impact | ||
| Dispatch Board + compliance | ✅ | Trust builder, drag-drop interaction | ||
| Magic Upload (PDF → Tour) | ✅ | Pre-seeded n8n output for demo PDF. Real AI pipeline later. | ||
| Wallet Pass generation | ✅ | n8n workflow generating static .pkpass | ||
| WhatsApp confirmation | ✅ | n8n → WhatsApp Business sandbox | ||
| Crisis broadcast | ✅ | Pre-drafted template, mock incident trigger | ||
| Wallet Pass live update | ✅ | Animated mock, real APNs is Phase 2 | ||
| Full Gantt (zoom, scroll, 50+ rows) | ✅ | Simplified SVG/CSS for 3 vehicles is enough | ||
| Storno / refunds | ✅ | Explicitly deferred | ||
| Multi-tenancy demo | ✅ | Architectural req, not a demo beat |
Seed Scenario
One coherent story: "Tyrol Alpenglühen 7 Tage"
| Entity | Data |
|---|---|
| Operator | "Reisedienst Alpenberg GmbH" |
| 2-page hotel partner itinerary (German, dates, stops, hotel) | |
| TourTemplate | "Tyrol Alpenglühen 7 Tage" — 4 stops, 1 hotel (Fremdleistung), Weinprobe upsell |
| TourDeparture | 15. Juni 2026, status: PUBLISHED |
| Vehicle | "Bus 01" — 49-seater, seat_map_layout JSONB, ACTIVE |
| Klaus | DRIVER, Module 95 valid, no visa restrictions, ACTIVE |
| Thomas | DRIVER, on vacation 10.–17.04. (conflict demo) |
| Sarah | DRIVER, ACTIVE, assigned to Bavaria day trip |
| 47 Passengers | Pre-seeded bookings with names, seats, boarding points |
| Incident | "Stau A13" — delay +45min, affecting Leg 2 |
| WhatsApp template | Pre-drafted delay notification for boarding point passengers |
Theme Transitions (Demo Beat)
The visual shift between themes is itself a differentiator — proof this is a platform, not an app.
| Transition | From → To | Demo Moment |
|---|---|---|
| Scene 2 → 3 | .theme-dispatcher → .theme-passenger | Neo-corporate → warm boutique. "This is what your customers see." |
| Scene 3 → 4 | .theme-passenger → .theme-driver | Boutique → dark, rugged, oversized. "This is what your drivers see." |
| Scene 4 → 5 | .theme-driver → .theme-dispatcher | Back to control center. "And you see everything." |