Pipes Demo — rebuild prompt (rough scaffold)

Komu je tento prompt určen: Cowork agent, který dostane tenhle dokument jako self-contained zadání. Zadání popisuje, jak přestavět stávající demo stránku /pipes/demo na novou 9-krokovou tour podle screen recordingu

• audio transcriptu kolegy.

Cíl: rough scaffold, ne pixel-perfect finál. Nejprve hrubá stavba všech 9 kroků a 6 nových obrazovek, pak budeme iterovat. Nesnaž se ladit jednotlivé pixely v této iteraci — dostat všechny kroky průchodné je důležitější.

0. Kontext (přečíst před prací)

• Repo: Astro 5 site, Cloudflare Pages + DigitalOcean deploy (přes Git, nikdy nesahej do .github/workflows/ ani neřeš deploy config — viz CLAUDE.md).
• Hlavní soubor, který budeš upravovat: src/pages/pipes/demo.astro (jedna velká Astro stránka, ~2 263 řádků). Bypassuje SiteTemplate, importuje jen tokens + fonts. Tour je vestavěný state machine + inline CSS.
• Sourcing: ne všechno se musí psát od nuly. Recykluj co nejvíc z toho, co v demo.astro už je (Piper panel, rainbow glow, resizer, spotlight, tour banner, syntax highlighting tokens, kódový blok s OPEN/CLOSE konkatenací pro </script>).
• Validace po jakékoliv změně:

  bun run typecheck
  bun run lint

• Test lokálně: bun run dev → http://localhost:4321/pipes/demo

1. Persona & framing tour

Tour je vedená z pohledu data engineera. Persona statement (přebíráme doslovně z audio narace videa) drží celou tour pohromadě:

„As a data engineer, I need to collect events from my website, identify user profiles if possible, and send enriched data to Meta Conversion API.“

Tahle věta je první welcome tooltip (Step 1) a všech zbývajících 8 kroků je odpověď na ni.

2. Stávající scénář vs. nový scénář (klíčové rozdíly)

Důležité: zachovat website.com jako jediné jméno sourcu. Ve videu se objevuje SSE Website a Bank Website — ignoruj to, je to artefakt bankovní instance, ve které kolega točil.

3. Výchozí stav workspace (toto je úvodní obrazovka tour)

Sidebar (kompletní seznam, zachovat stávající styling)

• Dashboard house-icon
• Sources database-icon
• Profiles users-icon (expandable, prozatím bez expand)
• Connections git-branch-icon (expandable → Pipes / Profile Syncs)
• Destinations send-icon
• Monitoring activity-icon (expandable → Health / Errors)
• Authentication shield-icon (expandable)
• Footer: Documentation, Settings, user row (Karel Holub, [email protected]), Pipes/Engage switcher

Main panel — Dashboard (data-screen="dashboard")

1. Pipes diagram — 3 sloupce (SOURCES / PIPES / EVENT DESTINATIONS).
   • 1 source: website.com, sublabel Event Stream, globe ikona, badge Event Stream pill vpravo.
   • 3 pipes: website.com to Sklik API, website.com to Google Ads, website.com to Meta CAPI. Každá s pipe ikonou + sublabel No deliveries yet.
   • 3 destinations: Sklik API, Google Ads, Meta CAPI. Každá s gear ikonou + Disabled sublabel + šedý dot. V headeru 3 disabled chip.
   • Curved purple connector lines source → pipe → destination (jako teď).
   • Hover state: na hover nad source/pipe/destination zvýraznit jen propojené karty, zbytek opacity: 0.4 + jejich connector lines tlumit.
2. Last hour at a glance — Updated HH:MM pill (živý čas), 4 stat tiles: Events Received 0, Events Sent 0, Routing Rate 0%, Errors 0 (Errors ikona destructive red — stávající).
3. Events by event type chart — empty state, jedna 0 Y-axis label, 10 dynamických timestamps.
4. Routed events by destination chart — totéž.
5. NOVÁ SEKCE: Latest events — pod grafy. Nadpis Latest events + subtitle Showing 10 of the most recent 100 events. + search input vpravo. Pod tím 10 řádků, každý: timestamp 20 May at 13:24 + source pill website.com (purple) + event type pill (např. scroll_depth, page_view) + event ID monospace + caret šipka. První řádek expandovaný s JSON payloadem v monospace bloku (context, user_id, page_url, device_id, client_ids, page_title, session_id, page_referrer, custom_payload depth_percent: 90, browser_metrics). Mock data — nemusí být konzistentní s reálným SDK.

Right panel — Piper

• Idle stav (mimo Step 5): Piper panel je zasunutý vpravo (collapsed do úzkého strip ~12px se zachovaným rainbow glow). Kliknutelný = rozbalí. V této tour se sám neaktivuje mimo Step 5b.
• Step 5b–5d: panel je rozbalený (piper-width: 380px default), aktivní, thread + input fungují, rainbow glow zesílený.
• Po Step 5d: Piper se zase sbalí zpět do strip.

4. Tour mechanika (rozšíření stávající state machine)

Phases

Současné phases (typing → ready → sent → awaiting-approval → approved → source-detail → awaiting-copy → step-2-complete) odstraň a nahraď novým modelem:

let currentStep = 1;  // 1..9
let subPhase = null;  // for Step 5: 'enter' | 'piper-ready' | 'piper-sent' |
                       // 'piper-awaiting-approval' | 'piper-approved' | 'done'

Banner

• Titulek kroku (centered): Step N of 9 — <step name>
• Šipky ‹ Prev a Next › po stranách. Obě vždy aktivní kromě Step 1 (Prev disabled). Obě ignorují spotlight check.
• Žádný Skip tour button (na zákazníka).
• Intro (Step 1) a Outro (Step 9) mají speciální overlay — viz níž.

Spotlight

• Beze změny chování: box-shadow: 0 0 0 9999px rgba(12,12,24,0.55) dim backdrop, hotspot je „díra“. Klick mimo hotspot = jemné zatřesení + temporary dim.
• .demo-banner a šipky vždy v ALWAYS_ALLOWED selectoru.

Stav po Prev

Important: Step 5 jednou dokončený zůstává dokončený. Pokud uživatel dá Prev zpět na Step 5, transform funkce se neresetuje — editor zůstává naplněný. Piper se znovu neotevírá. Tooltip držený nad Transform editorem je verze 5d („One event can be routed to multiple destinations…“).

Stejně pro všechny ostatní kroky: jednou expandované sekce, otevřené taby atd. zůstávají v posledním stavu.

5. Krok po kroku — kompletní spec

Step 1 — Intro (skippable welcome tooltip)

Hotspot: žádný. Vizuál: maketa pod overlay s filter: blur(4px) + rgba(12,12,24,0.45) dim. Centrovaný card s tooltip copy. Tooltip copy:

Meet Meiro Pipes.

"As a data engineer, I need to collect events from my website,
identify user profiles if possible, and send enriched data to
Meta Conversion API."

This tour walks through exactly that — in 8 steps.

[Start tour]   [✕ skip]

Akce:

• Start tour → blur zmizí, currentStep = 2, banner se objeví.
• ✕ skip → blur zmizí, banner se schová, tour zavřená, maketa zůstává plně proklikatelná.

Step 2 — Source: prepared data source + SDK

Banner: Step 2 of 9 — Source Hotspot: karta website.com v sloupci SOURCES. Tooltip (kotva napravo od karty):

We start with collecting events from the website.
For this we have a prepared data source connected to the Meiro
SDK — it comes with prepared event types like page_view,
form_start, form_submit, and many more.

Mikrointerakce: spotlight kolem website.com karty, ostatní pipes a destinations dimovat na opacity: 0.4. Propojené pipes (všechny 3 tady)

• destinations zůstávají s plnou opacity (visualně ukazuje routing).

Akce uživatele: klick na website.com → přechod na Source detail page.

Step 3 — Event Types

Banner: Step 3 of 9 — Event Types

Nová obrazovka: Source detail (data-screen="source-detail")

Recykluj stávající source detail obrazovku, uprav source name na website.com a doplň novou sekci Event Types:

Layout shora dolů:

1. ← Back to Sources link (top-left)
2. Hlavička: website.com title (24px/700), URL pill https://sse-demo.eu1.pipes.meiro.io/collect/website-com (mono font, purple/5% bg), chips row (Enabled zelená + Template web-sdk v2026-05-15 šedá), 58×28 dot-grid SVG + 0 events in the last hour, vpravo Docs / Disable / Delete buttons.
3. Connected Pipes card: 3 řádky (website.com to Meta CAPI to Meta CAPI chip, Enabled / website.com to Google Ads to Google Ads chip, Enabled / website.com to Sklik API to Sklik API chip, Enabled).
4. Pipes Tag (mpt.js) card: nadpis + popis (s inline code chips event a set) + Show SDK Docs button vpravo. Subline „SDK snippets and command reference are hidden. Expand to view.“
5. NOVÁ SEKCE: tabs row Event Types (active) | Data Mapping | Tracking Setup | History + caption Define the types of events this source can receive. vlevo, Managed by template. chip vpravo.
6. Event list (6 řádků, každý jako card): page_view, click, form_start, form_submit, scroll, file_download. Každý event card má:
   • Event name (16px/600)
   • UUID monospace + copy ikona
   • 2 subline řádky: Validation: Custom rules + Identity rules: 4 configured
   • Vpravo tlačítko View Rules (s file-text ikonou) → klick otevírá modal

Hotspot: tlačítko View Rules u eventu form_submit. Tooltip (kotva nad form_submit kartou):

These event types are important.
They define not just what data is collected, but also the
rules for identity resolution and how profiles get built.
Open form_submit to see.

Akce uživatele: klick View Rules u form_submit → otevře se modal.

Step 4 — Form submit & identity stitching

Banner: Step 4 of 9 — Identity Resolution

Nový komponent: Validation Rules modal

• Backdrop rgba(12,12,24,0.55).
• Modal box 600×~520px centered.
• Header: Validation Rules: form_submit title + ✕ close button vpravo.
• JSON Schema section: caption JSON Schema ⓘ (s help tooltip ikonou) + read-only textarea/pre s mock JSON:

  {
    "type": "object",
    "properties": {
      "consent": {
        "type": [
          "object",
          "null"
        ]
      },
      "context": {
        "type": [
          ...
        ]
      }
    }
  }

  Pod tím: Leave empty to accept any payload structure.
• Identity Resolution Rules section: caption + ⓘ ikona. Pod tím tabulka ve 2 sloupcích, 4 řádky:
  • user_id dropdown ↔ $.user_id input
  • email dropdown ↔ $.email input
  • phone dropdown ↔ $.phone input
  • browser dropdown ↔ $.device_id input
• Footer: Close button vpravo.

Hotspot: sekce Identity Resolution Rules (spotlight kolem tabulky). Tooltip (kotva napravo od tabulky):

Look at form_submit.
Besides other attributes, we collect user_id, email, phone, and
device_id — and we actively use all of them in the identity
resolution process to build the user profile.

Akce uživatele:

• Klick Close v modalu → modal zavře + tour přechází na Step 5.
• Klick Next v banneru → totéž (close modal + advance).

Step 5 — Pipe & Transform Function (s Piperem)

Banner: Step 5 of 9 — Transform

Tenhle krok je nejsložitější — má 4 sub-fáze. Každá sub-fáze má svůj tooltip + případně hotspot.

5a — Click na pipe v diagramu

(Předpoklad: tour je teď zpět na dashboard, modal je zavřený.)

Hotspot: karta website.com to Meta CAPI v sloupci PIPES. Mikrointerakce: hover/spotlight nad pipe dimuje ostatní 2 pipes + 2 destinations (Sklik, Google Ads), source website.com a destination Meta CAPI zůstávají plné. Tooltip:

While we collect events, the next step is to transform them.
Each pipe converts events to the shape the destination expects —
Meta CAPI, Google Ads, anywhere else. Let's open one.

Akce uživatele: klick → přechod na Pipe configuration page.

5b — Piper sub-step (Piper se aktivuje)

Nová obrazovka: Pipe configuration (data-screen="pipe-config")

Layout:

1. Hlavička: website.com → Meta CAPI (dva chips se šipkou mezi: website.com purple chip + arrow-right icon + Meta CAPI orange-ish chip).
2. Enabled chip + Docs / Disable / Delete buttons vpravo.
3. Tabs row: Configuration (active) | History.
4. Secrets card (collapsed): nadpis Secrets + caption Select which secrets to make available via the secrets object. Manage secrets in Operations > Secrets. + collapse chevron.
5. Transform Function card. V 5b je editor PRÁZDNÝ — placeholder:

   No transform function defined yet.
   Ask Piper to write one for you, or write it manually.

Piper panel: v okamžiku přechodu na tuhle obrazovku se Piper panel automaticky rozbalí z idle stripu (animace ~250ms). Rainbow glow zesílí.

V Piper input boxu se automaticky natypuje (typing animation, ~40 ms per character) prompt:

Write a transform function for Meta Conversion API. Map our event
names (page_view, add_to_cart, begin_checkout, purchase, view_item,
generate_lead, sign_up) to Meta's names, and hash email and phone
with SHA-256.

Po dotypování: subPhase = 'piper-ready'. Send button glow.

Hotspot: Send button v Piper input boxu. Tooltip (kotva nad Piperem):

You don't have to write transforms by hand.
Piper drafts them from a short description. Hit Send.

Akce uživatele: klick Send → user message přibude do threadu, glow z Send button zmizí, subPhase = 'piper-sent'.

5c — Piper response + proposal card

Po subPhase = 'piper-sent' (~600 ms delay simulující „thinking“), Piper postupně vyplivne response v threadu:

Here's a draft. Maps your event names to Meta's standard ones,
hashes email and phone with SHA-256, and enriches each event with
profile attributes (all_email_addresses, primary email & phone)
from Meiro profiles.

Pod tím proposal card (recykluj styly approval cardu, který v demo.astro máš pro Step 2 původního demo):

• Title: Update Transform Function
• Pill APPROVAL NEEDED (pending) / APPROVED (po klicku).
• Description: Piper wants to set the transform function for "website.com → Meta CAPI".
• Section TARGET: Pipe website.com → Meta CAPI.
• Section DETAILS: Maps 7 event types, Hashes email + phone (SHA-256), Enriches with profile attributes.
• Buttons (POŘADÍ KRITICKÉ): Accept vlevo (primary), Reject vpravo (ghost).
• Pod cardem decentní tip:

  Piper always asks for explicit approval before changing any Pipes setup.

subPhase = 'piper-awaiting-approval'. Accept button glow.

Hotspot: Accept button.

Akce uživatele: klick Accept → subPhase = 'piper-approved'.

5d — Transform funkce se objeví, Piper se schová

Po Accept:

1. Pill v proposal cardu se přepne na APPROVED (jako stávající).
2. Krátká delay (~300 ms).
3. Transform Function editor se naplní JS kódem (read-only). Použij JS, který už máme v původním demo (recykluj eventMapping, hash helper, plný transform({ events, profiles, secrets })). Syntax highlighting tokens (.tok-t, .tok-s, .tok-p, .tok-b) už jsou v demo.astro.
4. Piper panel se sbalí zpět do idle stripu (animace).
5. subPhase = 'done'.

Tooltip (kotva na Transform Function editor):

One event can be routed to multiple destinations.
The transform function can also enrich events — here Piper added
hashed profile data (SHA-256 email + phone) before the event
leaves Pipes.

Akce uživatele: klick Next → návrat na dashboard, currentStep = 6.

Step 6 — Destination & Send Function

Banner: Step 6 of 9 — Destination

6a — Click na destination v diagramu

(Předpoklad: dashboard.)

Hotspot: karta Meta CAPI v sloupci EVENT DESTINATIONS. Mikrointerakce: hover dimuje ostatní 2 destinations + 2 nesouvisející pipes. Tooltip:

Destinations close the loop.
Let's see how the outbound side of Meta CAPI is wired.

Akce uživatele: klick → přechod na Destination page.

6b — Destination page

Nová obrazovka: Destination detail (data-screen="destination-detail")

Layout:

1. Hlavička: Meta CAPI title + Docs / Disable / Delete buttons.
2. Connected Pipes card: 1 řádek website.com to Meta CAPI from website.com chip, Enabled zelená chip vpravo.
3. Tabs row: Configuration (active) | History.
4. Secrets card (collapsed).
5. Authorization card: nadpis + caption Attach an OAuth authorization to expose a fresh access token via the secrets object. Manage authorizations in OAuth. + sub-line No OAuth authorizations yet. Create one from Authorizations to attach it here.
6. Send Function card. Editor vyplněný mock JS kódem pro Meta CAPI send function. Použij toto jako mock content (syntax highlighted):

   /**
    * Meta Conversions API (CAPI) send function.
    * Expectations: pixel_id and meta_access_token must be stored in Secrets.
    */
   async function send({ events, params, secrets }) {
     const pixelId = secrets.meta_pixel_id;
     const accessToken = secrets.meta_access_token;
     const url = `https://graph.facebook.com/v19.0/${pixelId}/events?access_token=${accessToken}`;
   
     const payload = {
       data: events.map(event => ({
         event_name: event.event_type,
         event_time: Math.floor(new Date(event.event_time).getTime() / 1000),
         action_source: "website",
         user_data: event.user_data,
         custom_data: event.event_payload,
         event_source_url: event.url,
         event_id: event.event_id
       }))
     };
   
     const response = await fetch(url, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(payload)
     });
   
     return { ok: response.ok, status: response.status };
   }

Hotspot: Send Function editor card. Tooltip:

The destination definition lets us write a send function fully
customised to whatever sits on the other side — REST, webhook,
Graph API. Credentials come from Secrets, never from the code.

Akce uživatele: klick Next → návrat na dashboard.

Step 7 — Latest events

Banner: Step 7 of 9 — Monitor events

Kontext: dashboard, scroll dolů na Latest events sekci (auto-scroll).

Hotspot: první (rozbalený) řádek Latest events listu. Tooltip (kotva nad expandovanou JSON sekcí):

Meiro Pipes give full transparency to event ingestion.
We immediately monitor what events are coming in — every payload,
every identity, in real time.

Akce uživatele: klick Next → tour pokračuje.

(Note: Latest events sekce už existuje od Step 0 jako součást dashboardu. V tomto kroku se na ni jen scrolluje a zvýrazňuje.)

Step 8 — Errors

Banner: Step 8 of 9 — Monitor errors

Mikrointerakce: v sidebaru se automaticky rozbalí skupina Monitoring (Health / Errors).

Hotspot: položka Errors v sidebaru. Tooltip (kotva napravo od sidebaru):

And the same transparency for failures.
Validation errors, OAuth failures, deploy errors in send functions
— they all surface here, by source, by category, on a timeline.

Akce uživatele: klick Errors → přechod na Monitoring > Errors obrazovku.

Nová obrazovka: Monitoring Errors (data-screen="errors")

Layout:

1. Hlavička: Errors.
2. Top chart — sloupcový graf, X osa: 10 timestamps (14:06 → 15:04, 3min interval). Kategorie pod grafem v legendě:
   • Event Stream (purple #9333F5)
   • Cloud Apps (green)
   • Reverse ETL (orange)
   • Pipes (red)
   • Event Destinations (teal)
   • Profile Destinations (blue)
   • Secrets (pink)
   • Profile Refresh (red)
   • DWH Sync (yellow) Mock data: 2–3 sloupce ne-nula, ostatní 0 (placeholder, nevadí, že je prázdný).
3. Filter Errors card: search input + dropdown All + 2 datetime input Since / Until (placeholder values 20 / 05 / 2026, 12:30).
4. Error list — 3 řádky každý jako card:
   • Chip Event Stream (red bg) + chip validation_failed (red bg) + timestamp 20 May 2026 at 12:16
   • Body: All events failed validation: Event 0: Unknown event_type "page_view" (nebo "click" u třetího)
   • Footer link: external-icon + website.com

(Po Step 8 zůstáváme na Errors obrazovce — Step 9 outro nepřesouvá uživatele zpět.)

Step 9 — Outro: consultation form

Banner: Step 9 of 9 — Want to try it on your data?

Vizuál: maketa (Monitoring > Errors stránka) zůstává v pozadí pod filter: blur(4px) + rgba(12,12,24,0.45) dim overlay. Centrovaný card s formulářem.

Form embed: recykluj HubSpot embed ze stránky /live-demo. Najdeš ho v src/layouts/InteractiveDemoLayout.astro:

<script src="https://js-eu1.hsforms.net/forms/embed/144634033.js" defer is:inline></script>
<div class="hs-form-frame" data-region="eu1" data-form-id="072e1e0d-7d71-4cf4-8124-d73a94a3b4a4" data-portal-id="144634033"></div>

Wrapuj do cardu se stejným stylingem (form-card třída v InteractiveDemoLayout.astro má kompletní CSS — recykluj selektory).

Card copy:

That's Meiro Pipes in 8 steps.

Want to see it on your own data? Tell us about your stack and
we'll set up a working pipeline together.

[ Form embed ]

[✕ close]

Akce:

• Odeslat formulář → HubSpot vlastní success state.
• ✕ close (X v rohu cardu) nebo klick mimo card → overlay zmizí, maketa je plně proklikatelná ve stavu Monitoring > Errors.
• Banner nahoře zůstává viditelný. Uživatel se může vracet Prev/Next na předchozí kroky a libovolně si je prolézt znovu. Tooltipy se rozsvěcují znovu, hotspoty fungují. Step 5 zůstává v “po-Accept” stavu (transform funkce naplněná, Piper sbalený, tooltip 5d).

6. Vizuální & technické konvence

Tokens & CSS

• var(--accent) (#0053E3) se nepoužívá uvnitř produktové simulace — v Pipes je primárka purple #993DF5 (Meiro Pipes). Drž se purple uvnitř demo widgetu, accent blue jen mimo (např. v outro formuláři, který je už „web“).
• Geist font — už loadnutý.
• Lucide ikony — již použité, nový kód reuse stejný pattern.
• Tokens classes pro syntax highlighting: .tok-t (tag red #a31515), .tok-s (string green #0a7c3f), .tok-p (prop navy #001080), .tok-b (bool amber #c07a00). U JS code: .tok-k (keyword purple) si dodefinuj, pokud chybí.

Astro parser gotchas

• NIKDY nepiš literal </script> v markupu uvnitř <script> bloku. Pokud potřebuješ vyrenderovat script tag v code snippetu, použij OPEN/CLOSE konkat:

  const OPEN = '<' + 'script';
  const CLOSE = '<' + '/' + 'script' + '>';

• { a } v HTML markupu zapisuj jako { } (Astro je jinak zparse jako JSX expression delimiters).

Resizer & Piper shell

Zachovat stávající strukturu:

• .app grid auto 1fr auto (sidebar / main / piper).
• .piper-resizer jako přímý child .app s position: absolute; right: calc(var(--piper-width, 380px) - 7px); width: 14px;.
• Piper idle (collapsed) state: --piper-width: 12px; + class .piper--collapsed. Glow zachovat. Klick na panel ho rozbalí (mimo Step 5 nemá vliv na tour).

Auto-scroll v Piperu

Stávající MutationObserver v demo.astro zachovat. Aplikuje se i na nový Step 5b–5c thread.

7. Co odstranit ze stávajícího kódu

• Celou Piper “create source from template” approval flow (Step 1 původního demo).
• Celou Step 2 původního demo (code snippet + Copy hotspot + Show SDK Docs).
• Phase strings typing, sent, awaiting-approval, approved, source-detail, awaiting-copy, step-2-complete.

Zachovat:

• Layout shell (app grid, sidebar, main, piper, resizer).
• Spotlight + dim backdrop mechanism.
• Demo banner šablona.
• Piper panel HTML + CSS + auto-scroll + rainbow glow + collapse animace.
• Approval card HTML/CSS (přejmenovat copy pro Step 5c).
• JS syntax highlighting tokens.
• Live clock pill.
• Hover-highlight chování na Pipes diagramu (pokud chybí, dodělej).
• Existující obrazovky data-screen="dashboard" a data-screen="source-detail" (uprav, ne přepiš od nuly).

8. Implementační pořadí (doporučené)

1. Cleanup: odstraň stávající Step 1/Step 2 flow z demo.astro. Nahraď nový currentStep machine s 9 kroky a stubs goToStep(n).
2. Banner: uprav popisek na Step N of 9 — <name>. Prev/Next funkční s mapping na goToStep.
3. Workspace state: rename SSE Website / Bank Website → website.com všude. Doplň 3 pipes + 3 destinations v diagramu.
4. Hover highlight v diagramu (Step 2 / 5a / 6a).
5. Step 1 intro overlay (blur backdrop, centrovaný card, Skip).
6. Step 3: doplň Event Types sekci na Source detail.
7. Step 4: Validation Rules modal.
8. Step 5 (full): Pipe configuration obrazovka + Piper sub-flow + Transform Function naplnění + Piper collapse.
9. Step 6: Destination detail obrazovka + Send Function editor.
10. Step 7: Latest events sekce na dashboardu + auto-scroll + spotlight.
11. Step 8: Monitoring > Errors obrazovka (graf placeholder + filter card + error list).
12. Step 9: Outro overlay + HubSpot form embed.
13. State persistence: Step 5 transform fill nereset při Prev. Otevřené sidebar groupy nereset.
14. Validace: bun run typecheck && bun run lint.

Cíl této iterace je proklikatelnost end-to-end. Pixel-perfect polish dodělám potom.

9. Acceptance criteria (rough scaffold)

Hotová rough stavba = splňuje toto:

• /pipes/demo načte bez 404 / type errors.
• bun run typecheck projde čistě.
• bun run lint projde čistě.
• Banner ukazuje Step N of 9 — <name>.
• Prev/Next šipky fungují všech 9 kroků.
• Step 1: intro tooltip + blur backdrop. Skip skutečně zavírá tour.
• Step 2: hotspot na website.com v diagramu. Click přepíná na Source detail.
• Step 3: Source detail má sekci Event Types se 6 eventy. Hotspot je View Rules u form_submit. Click otevírá modal.
• Step 4: Modal Validation Rules: form_submit s 4 identity rules. Close / Next pokračuje dál.
• Step 5: Click na pipe → Pipe configuration page. Piper se rozbalí. Send → Accept → transform fill → Piper sbalí.
• Step 6: Click na destination → Destination page. Send Function editor vyplněn mock kódem.
• Step 7: Auto-scroll na Latest events. Hotspot na první (rozbalený) řádek.
• Step 8: Click Errors v sidebar → Monitoring > Errors page.
• Step 9: Form embed se vyrenderuje (HubSpot script proběhne). Close → maketa volně proklikatelná, banner zůstává.
• Prev/Next zachovává stav: znovu Step 5 = vyplněný transform, Piper sbalený, tooltip 5d.

10. Co NEDĚLAT

• ❌ Nesahej do .github/workflows/, wrangler.jsonc, ani jiných deploy configů.
• ❌ Nepřidávej GitHub Actions, Cloudflare secrets, DigitalOcean nastavení.
• ❌ Neupravuj SiteTemplate.astro, HomepageLayout.astro, Navigation.astro, SiteFooter.astro ani globální tokens — demo.astro je samostatná stránka, která bypassuje SiteTemplate.
• ❌ Nepoužívej var(--accent) (blue) uvnitř demo widgetu — uvnitř Pipes je primárka purple #993DF5. Accent blue jen pro outro form card.
• ❌ Nepřidávej náhradní řešení pro localStorage — Astro stránka může držet state v JS proměnných pro tuhle session. (Resizer width persistence v localStorage může zůstat, jak je teď.)
• ❌ Nedělej pixel-perfect polish v této iteraci. Rough scaffold first.
• ❌ Nepřepisuj demo.astro od nuly — recykluj layout shell, Piper, spotlight, syntax tokens, approval card styling.

11. Reference materials

• Současný kód: src/pages/pipes/demo.astro (2 263 řádků).
• HubSpot form pattern: src/layouts/InteractiveDemoLayout.astro lines 26–32 (HTML embed) + lines 188–250 (form-card CSS).
• Tokens & global CSS: src/styles/tokens.css, src/styles/global.css.
• Project conventions: CLAUDE.md (deploy rules, validation rules, hero standard).
• Textový scénář (zdroj pravdy): src/pages/pipes/demo-scenario.md.

Konec promptu. Pokud něco není jasné, zeptej se před implementací — radši jedna otázka teď než 9 kroků hotových špatně.