@xcelsior/demo-pipeline 0.1.0

package/README.md

@@ -0,0 +1,47 @@
+# @xcelsior/demo-pipeline
+
+Scaffold an **automated demo-video pipeline** into any repo. Records the real app
+(Playwright web + iOS sim), generates an open-source voice-over (Kokoro), and edits it
+OpenScreen/Screen-Studio style (event-driven zoom, moving cursor, click ripples, captions,
+branding) with Remotion. Driven interactively by Claude via `/demo-video`.
+
+## Install into a repo
+
+```bash
+npx @xcelsior/demo-pipeline init        # or: pnpm dlx @xcelsior/demo-pipeline init
+```
+
+Drops two things (never overwrites existing):
+- `tools/demo-pipeline/` — capture scripts + Remotion engine + `setup.sh` + `demo.config.json`
+- `.claude/commands/demo-video.md` — the Claude command
+
+## Use
+
+```bash
+# 1. configure for this project
+edit tools/demo-pipeline/demo.config.json   # baseUrl, brand logo, voice, iOS sim
+
+# 2. one-time machine setup
+pnpm --dir tools/demo-pipeline setup        # uv, Playwright Chromium, Kokoro model, deps
+
+# 3. produce a video
+#    in Claude:
+/demo-video                                  # authors/uses a flow, captures, edits, renders
+#    or CLI:
+LNG_PWD='…' pnpm --dir tools/demo-pipeline demo:all
+```
+
+Outputs per run: `raw/` (recordings) · `vo/` (voice-over) · `edited/` (visual edit) · `final/`.
+
+## What's app-specific vs reusable
+- **Reusable (this package):** the capture harness, Kokoro VO, the Remotion edit engine
+  (camera/cursor/captions derived from captured events), setup, the Claude command.
+- **Per-project:** `demo.config.json` + the capture *flow* (`pipeline/capture_web.py`) — Claude
+  authors/extends the flow interactively by exploring the UI.
+
+## Updating
+Re-run `npx @xcelsior/demo-pipeline@latest init` to pull engine improvements (won't clobber your
+edited config/flow). See `tools/demo-pipeline/README.md` (copied in) for the full guide.
+
+## Origin
+Extracted from the Load & Go pipeline. First consumer: `load-go` (`tools/demo-pipeline/`).

package/bin/cli.js

@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+/**
+ * @xcelsior/demo-pipeline — scaffolder.
+ *
+ *   xcelsior-demo init      copy the pipeline in (never overwrites existing)
+ *   xcelsior-demo update    pull engine updates (overwrites engine files,
+ *                           PRESERVES your per-project config + flow + brand)
+ *
+ * Targets:
+ *   - tools/demo-pipeline/            (capture scripts + Remotion engine + setup)
+ *   - .claude/commands/demo-video.md  (the Claude command)
+ */
+const fs = require("fs");
+const path = require("path");
+
+const TEMPLATE = path.join(__dirname, "..", "template");
+const CWD = process.cwd();
+const cmd = process.argv[2] || "init";
+
+// files an `update` must NOT clobber (they are yours, per-project)
+const PRESERVE = new Set([
+  "demo.config.json",
+  "pipeline/capture_web.py", // the app-specific flow
+  "pipeline/capture_mobile.sh",
+]);
+// directories whose contents are yours
+const PRESERVE_DIRS = ["remotion/public/brand"];
+
+function isPreserved(rel) {
+  if (PRESERVE.has(rel)) return true;
+  return PRESERVE_DIRS.some((d) => rel === d || rel.startsWith(d + "/"));
+}
+
+function copyTree(src, dstRoot, baseRel, { overwrite }) {
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const rel = baseRel ? `${baseRel}/${entry.name}` : entry.name;
+    const s = path.join(src, entry.name);
+    const d = path.join(dstRoot, rel);
+    if (entry.isDirectory()) {
+      fs.mkdirSync(d, { recursive: true });
+      copyTree(s, dstRoot, rel, { overwrite });
+    } else {
+      const exists = fs.existsSync(d);
+      if (exists && (!overwrite || isPreserved(rel))) continue;
+      fs.mkdirSync(path.dirname(d), { recursive: true });
+      fs.copyFileSync(s, d);
+    }
+  }
+}
+
+function run(overwrite) {
+  const toolDst = path.join(CWD, "tools", "demo-pipeline");
+  // everything except the .claude folder -> tools/demo-pipeline
+  for (const entry of fs.readdirSync(TEMPLATE)) {
+    if (entry === ".claude") continue;
+    const s = path.join(TEMPLATE, entry);
+    if (fs.statSync(s).isDirectory()) {
+      fs.mkdirSync(path.join(toolDst, entry), { recursive: true });
+      copyTree(s, toolDst, entry, { overwrite });
+    } else {
+      const d = path.join(toolDst, entry);
+      if (!(fs.existsSync(d) && (!overwrite || isPreserved(entry)))) {
+        fs.mkdirSync(toolDst, { recursive: true });
+        fs.copyFileSync(s, d);
+      }
+    }
+  }
+  // claude command (engine — safe to refresh on update)
+  const cmdSrc = path.join(TEMPLATE, ".claude", "commands", "demo-video.md");
+  if (fs.existsSync(cmdSrc)) {
+    const cmdDir = path.join(CWD, ".claude", "commands");
+    fs.mkdirSync(cmdDir, { recursive: true });
+    const cmdDst = path.join(cmdDir, "demo-video.md");
+    if (!fs.existsSync(cmdDst) || overwrite) fs.copyFileSync(cmdSrc, cmdDst);
+  }
+}
+
+if (cmd === "init") {
+  run(false);
+  console.log("✓ demo-pipeline scaffolded -> tools/demo-pipeline/ + .claude/commands/demo-video.md");
+  console.log("Next: edit tools/demo-pipeline/demo.config.json → pnpm --dir tools/demo-pipeline setup → /demo-video");
+} else if (cmd === "update") {
+  run(true);
+  console.log("✓ engine updated (kept your demo.config.json, capture flow, and brand assets)");
+} else {
+  console.log("usage: xcelsior-demo <init|update>");
+  process.exit(cmd === "--help" || cmd === "-h" ? 0 : 1);
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@xcelsior/demo-pipeline",
+  "version": "0.1.0",
+  "description": "Scaffold an automated demo-video pipeline (capture real UI → Kokoro voice-over → OpenScreen-style Remotion edit) into any repo. Driven by Claude via /demo-video.",
+  "bin": {
+    "xcelsior-demo": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "lint": "biome check bin || true"
+  }
+}

package/template/.claude/commands/demo-video.md

@@ -0,0 +1,42 @@
+---
+description: Record a real UI flow and produce a polished demo video (capture → voice-over → OpenScreen-style edit → render)
+argument-hint: "[flow name or description, e.g. 'day sheet job creation']"
+---
+
+You are running the **demo-pipeline** at `tools/demo-pipeline/`. Goal: produce demo-video artifacts
+(`raw/`, `vo/`, `edited/`, `final/`) for the flow the user names in `$ARGUMENTS` (default: the Day Sheet
+job-creation flow already implemented in `pipeline/capture_web.py`).
+
+Read `tools/demo-pipeline/README.md` and `demo.config.json` first. Then:
+
+## 1. Ensure setup
+- If `tools/demo-pipeline/.venv` or `models/kokoro.onnx` is missing, run `pnpm --dir tools/demo-pipeline setup` and wait.
+- Mobile capture needs a booted iOS sim (`xcrun simctl list devices booted`) with the driver app. If none, do web-only (`MOBILE=0`).
+
+## 2. Get the password
+- The capture logs into `baseUrl` as `auth.defaultEmail`. It needs `LNG_PWD` in the env.
+- Ask the user for the UAT password (or tell them to `export LNG_PWD=...`). NEVER hardcode or commit it.
+
+## 3. Author the flow (only if the user asks for a NEW flow)
+- The capture flow is `pipeline/capture_web.py` (Playwright). For a new flow:
+  - Explore the target screens live with the **chrome-devtools MCP** (navigate, snapshot, find selectors).
+  - Grid cells edit on **double-click → type**; autocompletes commit with **type → ArrowDown → Enter**;
+    log each action with `log(kind, locator, label)` so the editor's camera/cursor can track it.
+  - Set a clean empty date if the screen accumulates rows (see `DAY_OFFSET`).
+- For the default Day Sheet flow, skip this — it's already written.
+
+## 4. Run the pipeline
+```bash
+LNG_PWD='<pwd>' pnpm --dir tools/demo-pipeline demo:all     # web + mobile + vo + render
+# flags: MOBILE=0 (web only) · MUSIC=1 (music bed)
+```
+Run it in the background; it takes a few minutes.
+
+## 5. Deliver
+- Verify `runs/<timestamp>/final/demo-final.mp4` exists, then send the artifacts to the user
+  (final + edited at minimum). Summarize what was captured.
+
+## Tuning the look
+- Camera/cursor/captions derive from the captured `events.json`. Tune zoom/pacing in
+  `remotion/src/edit/data.ts` (`WEB_CAM`, beats), then re-render `cd remotion && remotion render Edit ...`.
+- Variants are flags on the `Edit` composition: `--props='{"framed":true,"music":true}'`.

package/template/README.md

@@ -0,0 +1,69 @@
+# Demo Pipeline
+
+Turns a real UI flow into a polished demo video — **automatically**. Records the actual app
+(web via Playwright, mobile via the iOS sim), generates an open-source voice-over (Kokoro),
+and edits it OpenScreen/Screen-Studio style (zoom-to-action, moving cursor, click ripples,
+captions, branding) with Remotion.
+
+Outputs, per run, as **separate artifacts**: `raw/` (recordings) · `vo/` (voice-over) ·
+`edited/` (visual edit, no voice) · `final/` (edited + voice).
+
+## Setup on a fresh machine (once)
+
+```bash
+# from the repo root
+pnpm install
+pnpm --dir tools/demo-pipeline setup     # installs uv, Playwright Chromium, Kokoro model, Remotion deps
+```
+Requirements: macOS, Node + pnpm, Claude Code. Mobile capture also needs Xcode + a booted iOS sim + Maestro.
+
+## Run it
+
+**Via Claude (recommended):**
+```
+/demo-video                  # Claude authors/uses a flow, then captures → VO → edits → renders
+```
+
+**Via CLI:**
+```bash
+export LNG_PWD='<uat password>'           # never commit
+pnpm --dir tools/demo-pipeline demo:all   # full run -> runs/<timestamp>/final/demo-final.mp4
+MOBILE=0 ... demo:all                      # web only
+MUSIC=1  ... demo:all                      # add the ambient music bed
+```
+
+## How it works (stages)
+
+| Stage | Script | Output |
+|---|---|---|
+| capture web | `pipeline/capture_web.py` (Playwright recordVideo + action event log) | `raw/web.webm`, `events/web.events.json` |
+| capture mobile | `pipeline/capture_mobile.sh` (simctl recordVideo + Maestro + push) | `raw/mobile.mov`, `events/mobile.events.json` |
+| voice-over | `pipeline/gen_vo.py` (Kokoro `af_heart`) | `vo/*.wav`, `vo/voiceover.wav` |
+| edit + render | `remotion/` (event-driven camera, cursor, captions) | `edited/`, `final/` |
+| orchestrate | `pipeline/run.sh` | all of the above |
+
+The edit is **data-driven**: the camera/cursor/captions derive from the captured
+`events.json` (so the camera tracks the grid's own scroll). Tune the look in
+`remotion/src/edit/data.ts`.
+
+## Per-project config (`demo.config.json`)
+
+```jsonc
+{
+  "baseUrl": "...",            // admin URL to record
+  "auth": { "defaultEmail": "..." },   // password via env LNG_PWD
+  "brandLogo": "...",          // logo for intro/outro
+  "voice": "af_heart",         // Kokoro voice
+  "sim": { "udid": "...", "appId": "..." }  // iOS sim for mobile
+}
+```
+
+The **flow** (which screens/actions to record) lives in `pipeline/capture_web.py` — this is the
+app-specific part. Claude can author/extend it interactively (it explores the UI via the
+chrome-devtools MCP, then writes the steps).
+
+## Notes
+- `runs/`, `models/`, `.venv/`, `node_modules/`, recordings → gitignored.
+- Recording uses an empty future date so the day sheet has one clean row + no booking conflict.
+- Reusable engine is being extracted to `@xcelsior/demo-pipeline` (excelsior-packages) for
+  cross-project use; this folder is load-go's working copy + example flow.

package/template/demo.config.json

@@ -0,0 +1,15 @@
+{
+    "project": "load-go",
+    "baseUrl": "https://uat-admin.landg.com.au",
+    "auth": {
+        "defaultEmail": "contact@xcelsior.co",
+        "note": "Password via env LNG_PWD (never commit it). Email overridable via LNG_EMAIL."
+    },
+    "brandLogo": "../../apps/admin/public/uploads/full-logo-white.png",
+    "voice": "af_heart",
+    "sim": {
+        "udid": "A3C855FF-C151-423C-ABFD-E2AB3278E3DD",
+        "appId": "au.com.landg",
+        "note": "iOS simulator UDID for the driver app. xcrun simctl list devices booted"
+    }
+}

package/template/package.json

@@ -0,0 +1,13 @@
+{
+    "name": "@xcelsior/demo-pipeline",
+    "version": "0.1.0",
+    "private": true,
+    "description": "Automated demo-video pipeline: capture real UI -> voice-over -> OpenScreen-style edit -> render.",
+    "scripts": {
+        "setup": "bash setup.sh",
+        "demo:all": "bash pipeline/run.sh",
+        "demo:web": "bash pipeline/run.sh",
+        "render": "cd remotion && ./node_modules/.bin/remotion render Edit ../runs/latest/final/demo-final.mp4 --image-format=jpeg",
+        "studio": "cd remotion && ./node_modules/.bin/remotion studio"
+    }
+}

package/template/pipeline/capture_mobile.sh

@@ -0,0 +1,60 @@
+#!/bin/bash
+# Capture-mobile: record the iOS sim as the driver receives a push and opens the job.
+# Produces raw/mobile.mov + events/mobile.events.json
+set -u
+UDID="${UDID:-A3C855FF-C151-423C-ABFD-E2AB3278E3DD}"
+RUN="${RUN_DIR:-/Users/huyhoang/Projects/load-go/plans/260619-demo-video-pipeline/runs/260619}"
+APP=au.com.landg
+MAESTRO=~/.maestro/bin/maestro
+mkdir -p "$RUN/raw" "$RUN/events"
+
+cat > /tmp/lng-push.apns <<'JSON'
+{ "Simulator Target Bundle": "au.com.landg",
+  "aps": { "alert": { "title": "New Job Allocation", "body": "You have been allocated a new job" }, "sound": "default", "badge": 1 } }
+JSON
+
+# go to home screen so the banner is visible
+cat > /tmp/m-home.yaml <<'YAML'
+appId: au.com.landg
+---
+- pressKey: Home
+YAML
+$MAESTRO --device "$UDID" test /tmp/m-home.yaml >/dev/null 2>&1 || true
+sleep 1
+
+# start recording (background)
+rm -f "$RUN/raw/mobile.mov"
+xcrun simctl io "$UDID" recordVideo --codec h264 --force "$RUN/raw/mobile.mov" &
+REC=$!
+sleep 1.0
+
+# fire push (banner slides in) — t~1.0
+xcrun simctl push "$UDID" "$APP" /tmp/lng-push.apns >/dev/null 2>&1
+sleep 3.5
+
+# open app + go to a job's details — t~4.5
+xcrun simctl launch "$UDID" "$APP" >/dev/null 2>&1
+sleep 2.2
+cat > /tmp/m-jd.yaml <<'YAML'
+appId: au.com.landg
+---
+- tapOn: "Jobs"
+- tapOn:
+    point: "50%,27%"
+YAML
+$MAESTRO --device "$UDID" test /tmp/m-jd.yaml >/dev/null 2>&1 || true
+sleep 3.0
+
+kill -INT $REC 2>/dev/null
+sleep 2.0
+
+cat > "$RUN/events/mobile.events.json" <<'JSON'
+{ "video": "raw/mobile.mov", "w": 1206, "h": 2622,
+  "events": [
+    { "t": 0.0, "kind": "scene", "label": "home" },
+    { "t": 1.2, "kind": "notify", "x": 603, "y": 150, "label": "push banner" },
+    { "t": 5.0, "kind": "scene", "label": "open" },
+    { "t": 8.0, "kind": "scene", "label": "jobdetails" }
+  ] }
+JSON
+echo "MOBILE_DONE $(ls -la "$RUN/raw/mobile.mov" 2>/dev/null | awk '{print $5}')"

package/template/pipeline/capture_web.py

@@ -0,0 +1,186 @@
+"""
+Capture-web stage of the LnG demo pipeline.
+Logs into UAT admin, drives the Day Sheet flow (create job inline -> site contacts ->
+allocate crew incl. truck -> publish), RECORDS the real screen as video, and logs every
+action (coords + timestamps) to events.json for the OpenScreen-style auto-zoom/cursor edit.
+
+Run:  uv run --project apps/e2e python pipeline/capture_web.py
+Env:  RUN_DIR (output dir), HEADLESS=0 to watch.
+"""
+import json, os, time, datetime, re
+from playwright.sync_api import sync_playwright
+
+BASE = os.environ.get("LNG_BASE_URL", "https://uat-admin.landg.com.au")
+EMAIL = os.environ.get("LNG_EMAIL", "contact@xcelsior.co")
+PWD = os.environ.get("LNG_PWD", "")  # required via env — never committed
+if not PWD:
+    raise SystemExit("LNG_PWD env var is required (the UAT password). Set it before running.")
+RUN_DIR = os.environ.get("RUN_DIR", os.path.expanduser(
+    "~/Projects/load-go/plans/260619-demo-video-pipeline/runs/260619"))
+RAW = os.path.join(RUN_DIR, "raw")
+EVD = os.path.join(RUN_DIR, "events")
+os.makedirs(RAW, exist_ok=True); os.makedirs(EVD, exist_ok=True)
+HEADLESS = os.environ.get("HEADLESS", "1") != "0"
+W, H = 1920, 1080
+
+# column index in the day-sheet grid
+COL = {"jobname":2,"customer":3,"time":4,"pickup":5,"delivery":6,"loaddesc":7,
+       "estqty":8,"unit":9,"trucks":10,"crew":11,"jobtype":12,"desc":13,"status":14}
+
+events = []
+t0 = [None]
+def stamp():
+    return round(time.monotonic() - t0[0], 3) if t0[0] else 0.0
+def log(kind, loc=None, label="", x=None, y=None):
+    box = None
+    if loc is not None:
+        try:
+            b = loc.bounding_box()
+            if b:
+                box = {"x": round(b["x"]), "y": round(b["y"]), "w": round(b["width"]), "h": round(b["height"])}
+                x = round(b["x"] + b["width"]/2); y = round(b["y"] + b["height"]/2)
+        except Exception:
+            pass
+    events.append({"t": stamp(), "kind": kind, "x": x, "y": y, "label": label, "box": box})
+    print(f"  [{stamp():6.2f}] {kind:6} {label}")
+
+def main():
+    with sync_playwright() as p:
+        b = p.chromium.launch(headless=HEADLESS)
+        ctx = b.new_context(viewport={"width": W, "height": H},
+                            record_video_dir=RAW, record_video_size={"width": W, "height": H},
+                            device_scale_factor=1)
+        pg = ctx.new_page()
+        pg.set_default_timeout(15000)
+        t_ctx = time.monotonic()  # ~video start
+
+        # --- login (off-timeline) ---
+        print("login...")
+        pg.goto(BASE + "/sign-in", wait_until="domcontentloaded")
+        pg.get_by_test_id("sign-in-email-input").fill(EMAIL)
+        pg.get_by_test_id("sign-in-password-input").fill(PWD)
+        pg.get_by_test_id("sign-in-submit-button").click()
+        pg.wait_for_timeout(4500)
+        # use an empty future date so the grid has a single clean row + no double-booking conflict
+        days = int(os.environ.get("DAY_OFFSET", "3"))
+        today = (datetime.date.today() + datetime.timedelta(days=days)).isoformat()
+        pg.goto(f"{BASE}/daily-allocation?date={today}", wait_until="domcontentloaded")
+        pg.wait_for_selector("table tbody tr", timeout=20000)
+        pg.wait_for_timeout(1500)
+
+        # target the first BLANK row (customer empty) so re-runs stay clean
+        rows = pg.locator("table tbody tr")
+        RIDX = 0
+        for i in range(rows.count()):
+            try:
+                if rows.nth(i).locator("td").nth(COL["customer"]).inner_text().strip() in ("-", ""):
+                    RIDX = i; break
+            except Exception:
+                pass
+        print("target blank row index:", RIDX)
+        def trow(): return pg.locator("table tbody tr").nth(RIDX)
+        def cell(name): return trow().locator("td").nth(COL[name])
+
+        def fill_autocomplete(name, query, label):
+            c = cell(name)
+            log("move", c, label); c.scroll_into_view_if_needed(); c.dblclick()
+            log("click", c, f"open {label}")
+            pg.keyboard.type(query, delay=70)
+            pg.wait_for_timeout(1300)
+            pg.keyboard.press("ArrowDown"); pg.wait_for_timeout(200)
+            pg.keyboard.press("Enter")
+            pg.wait_for_timeout(1200)  # dwell so the filled value is followable
+
+        # --- demo timeline starts ---
+        t0[0] = time.monotonic()
+        log("scene", label="daysheet")
+        pg.wait_for_timeout(800)
+
+        # 1. Customer
+        fill_autocomplete("customer", "QA", "Customer")
+        # 2. Loading time (today)
+        c = cell("time"); log("move", c, "Loading Time"); c.dblclick(); log("click", c, "open Loading Time")
+        ti = pg.locator('input[type=time]').first
+        ti.fill("10:30"); pg.keyboard.press("Enter"); pg.wait_for_timeout(700)
+        # 3. Pickup + 4. Delivery
+        fill_autocomplete("pickup", "Sydney Olympic Park", "Pickup")
+        fill_autocomplete("delivery", "Lucas Heights NSW", "Delivery")
+
+        # 5. Site contacts (expand details)
+        log("scene", label="sitecontacts")
+        exp = trow().locator("button").first
+        log("click", exp, "expand details"); exp.click(); pg.wait_for_timeout(700)
+        try:
+            psc = pg.locator("xpath=(//*[normalize-space(text())='Site Contact'])[1]/following::input[1]").first
+            psc.scroll_into_view_if_needed(); log("move", psc, "Pickup site contact")
+            psc.click(); pg.keyboard.type("Dave - 0412 345 678", delay=45); pg.wait_for_timeout(1100)
+            dsc = pg.locator("xpath=(//*[normalize-space(text())='Site Contact'])[2]/following::input[1]").first
+            log("move", dsc, "Delivery site contact")
+            dsc.click(); pg.keyboard.type("Mia - 0413 222 111", delay=45); pg.wait_for_timeout(1300)
+        except Exception as e:
+            print("site-contact fill error:", e)
+        exp.click(); pg.wait_for_timeout(500)  # collapse
+
+        # 6. Crew: driver + truck
+        log("scene", label="crew")
+        cc = cell("crew")
+        crew_add = cc.get_by_role("button", name=re.compile("Add crew", re.I))
+        if crew_add.count() == 0:
+            crew_add = cc.get_by_role("button", name="+")
+        crew_add = crew_add.first
+        crew_add.scroll_into_view_if_needed(); log("click", crew_add, "add crew"); crew_add.click()
+        pg.wait_for_timeout(1000)
+        # anchor on the Combination input; driver/truck are the following inputs
+        combo = pg.get_by_placeholder(re.compile("Search saved combinations", re.I)).last
+        combo.wait_for(timeout=8000)
+        driver = combo.locator("xpath=following::input[1]").first
+        truck = combo.locator("xpath=following::input[2]").first
+        log("move", driver, "Driver"); driver.click(); pg.keyboard.type("Contact", delay=70)
+        pg.wait_for_timeout(1200); pg.keyboard.press("ArrowDown"); pg.keyboard.press("Enter")
+        pg.wait_for_timeout(700)
+        # truck: type broad query, pick first
+        log("move", truck, "Truck"); truck.click()
+        for q in ["1", "T", "A", "0"]:
+            truck.fill(""); pg.keyboard.type(q, delay=70); pg.wait_for_timeout(1100)
+            pg.keyboard.press("ArrowDown"); pg.keyboard.press("Enter"); pg.wait_for_timeout(600)
+            if truck.input_value().strip():
+                break
+        log("info", truck, f"truck={truck.input_value()!r}")
+        save = pg.get_by_role("button", name="Save crew").last
+        log("click", save, "save crew"); save.click(); pg.wait_for_timeout(1500)
+
+        # 7. Publish
+        log("scene", label="publish")
+        pub = pg.get_by_role("button", name=lambda n: "Publish day" in (n or "")) if False else pg.locator("button", has_text="Publish day").last
+        log("move", pub, "Publish day"); pub.scroll_into_view_if_needed(); pub.click()
+        log("click", pub, "publish")
+        pg.wait_for_timeout(3500)
+        body = pg.locator("body").inner_text()
+        published_ok = "not published" not in body.lower()
+        # capture outcome text
+        outcome = ""
+        for kw in ["not published", "published", "required to publish"]:
+            if kw in body.lower():
+                idx = body.lower().find(kw); outcome = body[max(0, idx-120): idx+120]; break
+        print("PUBLISH_OK=", published_ok)
+        print("OUTCOME=", outcome.replace("\n", " ")[:240])
+        pg.screenshot(path=os.path.join(EVD, "web_final.png"))
+        pg.wait_for_timeout(1200)
+
+        ctx.close()  # finalizes the video
+        # rename video
+        vids = [f for f in os.listdir(RAW) if f.endswith(".webm")]
+        vids.sort(key=lambda f: os.path.getmtime(os.path.join(RAW, f)))
+        if vids:
+            src = os.path.join(RAW, vids[-1]); dst = os.path.join(RAW, "web.webm")
+            os.replace(src, dst); print("VIDEO=", dst)
+        video_offset = round(t0[0] - t_ctx, 3)  # seconds from video start to demo start
+        with open(os.path.join(EVD, "web.events.json"), "w") as f:
+            json.dump({"video": "raw/web.webm", "w": W, "h": H,
+                       "video_offset": video_offset, "events": events}, f, indent=2)
+        print("VIDEO_OFFSET=", video_offset)
+        print("EVENTS=", os.path.join(EVD, "web.events.json"), "count=", len(events))
+        b.close()
+
+if __name__ == "__main__":
+    main()

package/template/pipeline/gen_music.py

@@ -0,0 +1,52 @@
+import numpy as np, soundfile as sf, sys
+
+sr = 44100
+dur = 42.0
+t = np.linspace(0, dur, int(sr * dur), endpoint=False)
+
+# calm Am progression: Am - F - C - G, 8s each, looped
+chords = [
+    [220.00, 261.63, 329.63],   # Am
+    [174.61, 220.00, 261.63],   # F
+    [196.00, 261.63, 329.63],   # C/G
+    [196.00, 246.94, 293.66],   # G
+]
+seg = 8.0
+L = np.zeros_like(t); R = np.zeros_like(t)
+
+def env(local, length):
+    a = np.clip(local / 1.2, 0, 1)            # attack
+    r = np.clip((length - local) / 1.5, 0, 1)  # release
+    return np.minimum(a, r)
+
+for i in range(int(np.ceil(dur / seg))):
+    f_set = chords[i % len(chords)]
+    t0 = i * seg
+    mask = (t >= t0) & (t < t0 + seg)
+    local = t[mask] - t0
+    e = env(local, seg)
+    for n, f in enumerate(f_set):
+        detL = f * (1 + 0.0015 * (n - 1))
+        detR = f * (1 - 0.0015 * (n - 1))
+        amp = 0.5 / (n + 1)
+        L[mask] += amp * e * (np.sin(2*np.pi*detL*local) + 0.25*np.sin(2*np.pi*2*detL*local))
+        R[mask] += amp * e * (np.sin(2*np.pi*detR*local) + 0.25*np.sin(2*np.pi*2*detR*local))
+    # soft sub
+    L[mask] += 0.3 * e * np.sin(2*np.pi*(f_set[0]/2)*local)
+    R[mask] += 0.3 * e * np.sin(2*np.pi*(f_set[0]/2)*local)
+
+# slow tremolo + gentle shimmer
+trem = 0.92 + 0.08*np.sin(2*np.pi*0.12*t)
+L *= trem; R *= trem
+L += 0.04*np.sin(2*np.pi*660*t)*np.clip(np.sin(2*np.pi*0.05*t),0,1)
+R += 0.04*np.sin(2*np.pi*880*t)*np.clip(np.sin(2*np.pi*0.05*t),0,1)
+
+stereo = np.stack([L, R], axis=1)
+stereo /= np.max(np.abs(stereo)) + 1e-9
+stereo *= 0.16  # quiet bed
+# global fade in/out
+fl = int(sr*1.5)
+stereo[:fl] *= np.linspace(0,1,fl)[:,None]
+stereo[-fl:] *= np.linspace(1,0,fl)[:,None]
+sf.write(sys.argv[1], stereo, sr)
+print("music", round(dur,1), "s ->", sys.argv[1])

package/template/pipeline/gen_vo.py

@@ -0,0 +1,29 @@
+import soundfile as sf, sys, os, json
+from kokoro_onnx import Kokoro
+
+MODEL_DIR = sys.argv[1] if len(sys.argv) > 1 else "models"
+OUT = sys.argv[2] if len(sys.argv) > 2 else "vo"
+os.makedirs(OUT, exist_ok=True)
+k = Kokoro(os.path.join(MODEL_DIR, "kokoro.onnx"), os.path.join(MODEL_DIR, "voices.bin"))
+
+LINES = {
+    "s0_intro":   "Load and Go. From dispatch, to delivery.",
+    "s1_daysheet":"It starts on the Day Sheet. Every job for the day, in one grid.",
+    "s2_create":  "Add a job inline. Customer, loading time, pickup and delivery, with address lookup as you type.",
+    "s3_details": "Site contacts and job details, right in the row.",
+    "s4_crew":    "Allocate the crew. Driver and truck, straight from the row.",
+    "s5_publish": "Publish, and it goes straight to the driver's phone.",
+    "s6_push":    "On the truck, an instant notification. A new job.",
+    "s7_jobdet":  "They open it to the full picture. Pickup, delivery, load, and contacts.",
+    "s8_outro":   "Load and Go. One platform, from dispatch to delivery.",
+}
+manifest = {}
+for name, text in LINES.items():
+    s, sr = k.create(text, voice="af_heart", speed=1.04, lang="en-us")
+    path = os.path.join(OUT, name + ".wav")
+    sf.write(path, s, sr)
+    dur = round(len(s) / sr, 3)
+    manifest[name] = {"text": text, "dur": dur}
+    print(f"{name:12} {dur:5.2f}s")
+json.dump(manifest, open(os.path.join(OUT, "manifest.json"), "w"), indent=2)
+print("VO_DONE", sum(v["dur"] for v in manifest.values()))