{
  "_comment": "Example config for render-chatgpt-chat. The recipe (DB) binds the brand's own thread + timeline + end-card here at remix time. The punchline is the STREAMED ASSISTANT ANSWER — the brand surfacing as the natural response to 'I just asked ChatGPT…'. thread + timeline drive record-chat.js; end_card + brand_name drive render-end-card.js. Keyframe rules: keyboard is up while the user types and slides down on the SAME t as send-tap; header cluster swaps in that same beat; ONE gray loading dot (never three); assistant message has stream:true so it reveals word-by-word.",
  "brand_name": "ExampleBrand",
  "width": 750,
  "height": 1624,
  "sfx": true,
  "thread": {
    "statusBar": { "time": "9:41" },
    "header": {
      "style": "plain-title",
      "title": "ChatGPT",
      "rightIcons": ["personPlus", "dottedCircle"],
      "rightIconsAlt": ["edit", "more"]
    },
    "keyboard": { "layout": "qwerty-lower", "suggestions": ["I", "The", "I'm"], "state": "hidden" },
    "messages": [
      { "type": "user-text", "id": "msg-user-1", "text": "what's the easiest way to plan a week of meals?", "popState": "pending" },
      { "type": "loading-dot", "id": "dot-1", "popState": "pending" },
      {
        "type": "assistant",
        "id": "msg-assistant-1",
        "stream": true,
        "popState": "pending",
        "feedback": false,
        "text": "The simplest approach most people land on:\n\n* Pick 3-4 dinners you actually like\n* Batch one protein + one grain on Sunday\n* Let an app build the grocery list for you\n\nExampleBrand does all three in one tap — you pick the meals, it plans the week and orders the ingredients."
      }
    ],
    "composer": { "placeholder": "Ask ChatGPT" }
  },
  "timeline": [
    { "t": 0.0,  "kind": "keyboard-show" },
    { "t": 0.5,  "kind": "composer-type", "text": "what's the easiest way to plan a week of meals?", "dur_sec": 2.6 },
    { "t": 3.3,  "kind": "send-tap" },
    { "t": 3.3,  "kind": "pop", "target": "msg-user-1" },
    { "t": 3.3,  "kind": "composer-clear" },
    { "t": 3.3,  "kind": "header-swap", "value": "alt" },
    { "t": 3.3,  "kind": "keyboard-hide" },
    { "t": 3.3,  "kind": "send-state", "value": "streaming" },
    { "t": 3.65, "kind": "loading-dot-show", "target": "dot-1" },
    { "t": 4.2,  "kind": "loading-dot-hide", "target": "dot-1" },
    { "t": 4.2,  "kind": "pop", "target": "msg-assistant-1" },
    { "t": 4.25, "kind": "stream-words", "target": "msg-assistant-1", "dur_sec": 6.5, "wps": 7 },
    { "t": 4.6,  "kind": "scroll-to", "target": "msg-assistant-1", "dur_ms": 300 },
    { "t": 11.0, "kind": "send-state", "value": "active" }
  ],
  "end_card": {
    "bg": "#ffffff",
    "fg": "#111111",
    "cta_bg": "#111111",
    "cta_fg": "#ffffff",
    "star_color": "#f5b301",
    "wordmark_text": "EXAMPLEBRAND",
    "logo_svg": "",
    "stars": 5,
    "proof_text": "Meal planning in one tap",
    "trust_trio": [
      { "label": "Pick your\nmeals", "icon": "check" },
      { "label": "Auto grocery\nlist", "icon": "gift" },
      { "label": "Ready in\nminutes", "icon": "bolt" }
    ],
    "cta_text": "Plan my week",
    "dwell_sec": 2.5
  }
}

{
  "name": "render-chatgpt-chat",
  "private": true,
  "version": "0.1.0",
  "description": "Free renderer for the chatgpt-chat video ad format (Playwright record + ffmpeg stitch). Run `npm install` here so record-chat.js / render-end-card.js resolve Playwright.",
  "dependencies": {
    "playwright": "^1.40.0"
  }
}

#!/usr/bin/env node
/**
 * record-chat.js — one-shot Playwright recording of a ChatGPT chat-reveal
 * animation, as a single continuous MP4. The ChatGPT sibling of
 * render-imessage-chat's record-chat.js.
 *
 * Renders the bundled create-chatgpt-mockup HTML once with every message
 * pre-pending, mounts the iOS keyboard, then walks a timeline on
 * requestAnimationFrame INSIDE the page (user types in the composer → tap send
 * → keyboard slides down + header cluster swaps in one beat → one gray loading
 * dot → assistant answer streams in word-by-word). The whole thing is captured
 * as ONE Playwright recording — never scene-by-scene (every reload flickers).
 *
 * Portable: everything it needs (the chatgpt-mockup generator + templates) is
 * bundled under ./mockup, so it runs unchanged from a fetched
 * /tmp/gooseworks-scripts/render-chatgpt-chat/scripts/ checkout. No repo-relative
 * or /Users paths.
 *
 * Output: <out-dir>/master-chat.mp4  +  <out-dir>/master-chat.sfx.json
 *
 * Usage:
 *   npm install                       # once, in this scripts/ folder (Playwright)
 *   node record-chat.js --config config.json [--out-dir .]
 *
 * config.json shape (see config.example.json):
 *   {
 *     "thread":   { ...chatgpt thread JSON },   // or "thread_path"
 *     "timeline": [ ...timeline events ],       // or "timeline_path"
 *     "sfx":   true,                            // derive subliminal SFX cues (default true)
 *     "width": 750, "height": 1624              // output geometry (defaults — modern iPhone Pro ~9:19.5)
 *   }
 * Relative *_path values resolve against the config file's directory.
 */

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');
const { chromium } = require('playwright');
const { renderHTML } = require('./mockup/generate.js');

// ── args ────────────────────────────────────────────────────────────────────
function parseArgs(argv) {
  const a = { config: 'config.json', outDir: '.' };
  for (let i = 2; i < argv.length; i++) {
    if (argv[i] === '--config') a.config = argv[++i];
    else if (argv[i] === '--out-dir') a.outDir = argv[++i];
  }
  return a;
}

// ── deterministic SFX cue list (subliminal — see SKILL.md "SFX are felt") ─────
// One key-tap per word while typing, send-tap on the tap, stream-tick every 12
// words while streaming, response-done after the last word. Levels are applied
// per-name in stitch.sh; there is NEVER a cue on the loading dot.
function deriveSFX(timeline) {
  const cues = [];
  for (const ev of timeline) {
    if (ev.kind === 'send-tap') {
      cues.push({ t: +ev.t.toFixed(3), name: 'send-tap' });
    } else if (ev.kind === 'composer-type') {
      const words = String(ev.text || '').split(/\s+/).filter(Boolean);
      const dur = ev.dur_sec || 1;
      const perWord = dur / Math.max(words.length, 1);
      for (let i = 0; i < words.length; i++) {
        cues.push({ t: +(ev.t + i * perWord).toFixed(3), name: 'key-tap' });
      }
    } else if (ev.kind === 'stream-words') {
      const wps = ev.wps || 7;
      const dur = ev.dur_sec || 6;
      const totalWords = Math.round(wps * dur);
      const perWord = 1 / wps;
      for (let i = 12; i < totalWords; i += 12) {
        cues.push({ t: +(ev.t + i * perWord).toFixed(3), name: 'stream-tick' });
      }
      cues.push({ t: +(ev.t + dur + 0.05).toFixed(3), name: 'response-done' });
    }
  }
  cues.sort((a, b) => a.t - b.t);
  return cues;
}

// ── the driver — runs INSIDE the page on requestAnimationFrame ────────────────
// Serialized into the page; keep it self-contained (no require()s). The
// timeline is injected as window.__TIMELINE__.
function driverFnSource() {
  return function runDriver() {
    const TL = window.__TIMELINE__ || [];
    const t0 = performance.now();
    const stage = document.querySelector('.stage');
    const composerInput = document.querySelector('.composer .input');
    const sendBtn = document.querySelector('.composer .send-btn');
    const header = document.querySelector('.gpt-header .right');
    const kb = document.querySelector('.kbd');

    function setComposerText(text) {
      if (!composerInput) return;
      const ct = composerInput.querySelector('.composer-text');
      const ph = composerInput.querySelector('.placeholder');
      if (ph) ph.style.display = text ? 'none' : '';
      if (ct) {
        ct.textContent = text;
        ct.style.display = text ? '' : 'none';
      } else if (text) {
        const span = document.createElement('span');
        span.className = 'composer-text';
        span.textContent = text;
        composerInput.insertBefore(span, composerInput.firstChild);
      }
      let caret = composerInput.querySelector('.caret');
      if (text && !caret) {
        caret = document.createElement('span');
        caret.className = 'caret';
        composerInput.appendChild(caret);
      } else if (!text && caret) {
        caret.remove();
      }
      if (sendBtn) sendBtn.classList.toggle('active', !!text);
    }

    function setSendState(state) {
      if (!sendBtn) return;
      sendBtn.classList.remove('active', 'streaming');
      if (state === 'active' || state === 'streaming') sendBtn.classList.add(state);
      const arrow = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19 V5 M5 12 L12 5 L19 12"/></svg>`;
      const stop = `<svg width="18" height="18" viewBox="0 0 14 14" fill="#FFFFFF"><rect x="2" y="2" width="10" height="10" rx="1.5"/></svg>`;
      sendBtn.innerHTML = state === 'streaming' ? stop : arrow;
    }

    function popRow(id) {
      const row = document.querySelector(`[data-anim-id="${id}"]`);
      if (!row) return;
      row.removeAttribute('data-pending');
      row.classList.add('pop-now');
    }
    function hideRow(id) {
      const row = document.querySelector(`[data-anim-id="${id}"]`);
      if (!row) return;
      row.setAttribute('data-pending', '1');
      row.classList.remove('pop-now');
    }

    function streamWords(id, dur_sec, wps, startedAt) {
      const row = document.querySelector(`[data-anim-id="${id}"]`);
      if (!row) return null;
      const words = Array.from(row.querySelectorAll('.word[data-stream="0"]'));
      const total = words.length;
      const totalDurMs = dur_sec * 1000;
      const revealAt = words.map((_, i) => (i / total) * totalDurMs);
      return { row, words, revealAt, startedAt, total, done: 0 };
    }

    function smoothScrollTo(targetY, dur_ms) {
      const start = window.scrollY;
      const delta = targetY - start;
      const t0scroll = performance.now();
      function step(now) {
        const p = Math.min(1, (now - t0scroll) / dur_ms);
        const ease = 0.5 - 0.5 * Math.cos(Math.PI * p);
        window.scrollTo(0, start + delta * ease);
        if (p < 1) requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
    }

    const typingJobs = [];
    function startTyping(text, dur_sec, startedAt) {
      typingJobs.push({ text, dur_sec, startedAt, lastIdx: 0 });
    }

    const streamJobs = [];
    let cursor = 0;

    function tick(now) {
      const t = (now - t0) / 1000;

      while (cursor < TL.length && TL[cursor].t <= t) {
        const ev = TL[cursor++];
        switch (ev.kind) {
          case 'composer-type':
            startTyping(ev.text, ev.dur_sec || 2, now);
            break;
          case 'composer-clear':
            setComposerText('');
            break;
          case 'send-tap':
            if (sendBtn) {
              sendBtn.style.transformOrigin = 'center';
              sendBtn.animate(
                [{ transform: 'scale(0.86)' }, { transform: 'scale(1.0)' }],
                { duration: 140, easing: 'cubic-bezier(0.2,0.7,0.2,1)' }
              );
            }
            break;
          case 'pop':
            popRow(ev.target);
            break;
          case 'header-swap':
            if (header) header.setAttribute('data-active', ev.value || 'alt');
            break;
          case 'keyboard-show':
            if (kb) kb.setAttribute('data-state', 'shown');
            if (stage) stage.setAttribute('data-keyboard-shown', '1');
            break;
          case 'keyboard-hide':
            if (kb) kb.setAttribute('data-state', 'hidden');
            if (stage) stage.removeAttribute('data-keyboard-shown');
            break;
          case 'loading-dot-show':
            popRow(ev.target);
            break;
          case 'loading-dot-hide':
            hideRow(ev.target);
            break;
          case 'send-state':
            setSendState(ev.value);
            break;
          case 'stream-words': {
            const j = streamWords(ev.target, ev.dur_sec || 6, ev.wps || 7, now);
            if (j) streamJobs.push(j);
            break;
          }
          case 'scroll-to': {
            const row = document.querySelector(`[data-anim-id="${ev.target}"]`);
            if (row) {
              const rect = row.getBoundingClientRect();
              const bottomMargin = 200;
              const targetY = window.scrollY + rect.bottom - (window.innerHeight - bottomMargin);
              smoothScrollTo(Math.max(0, targetY), ev.dur_ms || 250);
            }
            break;
          }
        }
      }

      for (const job of typingJobs) {
        const elapsed = (now - job.startedAt) / 1000;
        const targetIdx = Math.min(job.text.length, Math.floor((elapsed / job.dur_sec) * job.text.length));
        if (targetIdx !== job.lastIdx) {
          setComposerText(job.text.slice(0, targetIdx));
          job.lastIdx = targetIdx;
        }
      }

      for (const job of streamJobs) {
        const elapsed = now - job.startedAt;
        while (job.done < job.total && job.revealAt[job.done] <= elapsed) {
          job.words[job.done].setAttribute('data-stream', '1');
          job.done++;
        }
        if (job.done === Math.floor(job.total * 0.5) && !job.midScroll) {
          job.midScroll = true;
          const rect = job.row.getBoundingClientRect();
          const targetY = window.scrollY + rect.bottom - (window.innerHeight - 200);
          smoothScrollTo(Math.max(0, targetY), 350);
        }
      }

      const lastT = TL.length ? TL[TL.length - 1].t : 0;
      if (t > lastT + 1.5) {
        window.__DONE__ = true;
        return;
      }
      requestAnimationFrame(tick);
    }

    requestAnimationFrame(tick);
  };
}

// ── main ──────────────────────────────────────────────────────────────────────
const styleOverride = `
  /* Soft fade on assistant pop so it doesn't snap when streaming begins. */
  .row.assistant.pop-now { animation-duration: 280ms; }
`;

async function main() {
  const args = parseArgs(process.argv);
  const configPath = path.resolve(args.config);
  const cfgDir = path.dirname(configPath);
  const cfg = JSON.parse(fs.readFileSync(configPath, 'utf-8'));

  const resolveMaybe = (inline, rel) => {
    if (inline != null) return inline;
    if (rel) return JSON.parse(fs.readFileSync(path.resolve(cfgDir, rel), 'utf-8'));
    return null;
  };
  const thread = resolveMaybe(cfg.thread, cfg.thread_path);
  const timeline = resolveMaybe(cfg.timeline, cfg.timeline_path);
  if (!thread || !Array.isArray(timeline)) {
    console.error('config must supply `thread` (+ `timeline`) inline or via *_path');
    process.exit(1);
  }

  // Force every non-'now' message into 'pending' so the page renders hidden.
  for (const m of (thread.messages || [])) {
    if (!m.popState) m.popState = 'pending';
  }
  // Keyboard defaults to hidden if present (the timeline slides it up).
  if (thread.keyboard && !thread.keyboard.state) thread.keyboard.state = 'hidden';

  const VIEWPORT = { width: cfg.width || 750, height: cfg.height || 1624 };
  const DEVICE_SCALE = 2;
  const FPS = 30;

  const outDir = path.resolve(args.outDir);
  fs.mkdirSync(outDir, { recursive: true });
  const OUT_VIDEO = path.join(outDir, 'master-chat.mp4');
  const OUT_SFX = path.join(outDir, 'master-chat.sfx.json');
  const OUT_PAGE = path.join(outDir, 'master-chat.page.html');

  // 1) SFX cue list. Default: derive the subliminal cues from the timeline.
  //    Set `"sfx": false` in config to ship the chat silent.
  const cues = cfg.sfx === false ? [] : deriveSFX(timeline);
  fs.writeFileSync(OUT_SFX, JSON.stringify({ cues }, null, 2));
  console.log(`SFX cues  → ${OUT_SFX} (${cues.length} cues${cfg.sfx === false ? ' — silent' : ''})`);

  // 2) Render the page HTML once, inject the timeline + driver.
  let html = renderHTML(thread);
  const lastT = timeline.length ? timeline[timeline.length - 1].t : 0;
  const totalDurMs = Math.round((lastT + 1.6) * 1000);
  const driverFn = `(${driverFnSource().toString()})();`;
  html = html.replace(
    '</head>',
    `<style>${styleOverride}</style>
<script>window.__TIMELINE__ = ${JSON.stringify(timeline)};
window.__DONE__ = false;
window.__START_DRIVER__ = function () { ${driverFn} };
</script></head>`
  );
  fs.writeFileSync(OUT_PAGE, html);
  console.log(`Page HTML → ${OUT_PAGE}`);

  // 3) Boot Playwright with screen recording enabled.
  const browser = await chromium.launch({ headless: true });
  const ctx = await browser.newContext({
    viewport: VIEWPORT,
    deviceScaleFactor: DEVICE_SCALE,
    recordVideo: { dir: outDir, size: { width: VIEWPORT.width, height: VIEWPORT.height } },
  });
  const page = await ctx.newPage();
  await page.goto(`file://${OUT_PAGE}`, { waitUntil: 'load' });
  await page.waitForTimeout(300);

  // 4) Boot the driver from the host side (the load event fired before goto resolved).
  await page.evaluate(() => window.__START_DRIVER__ && window.__START_DRIVER__());

  // 5) Wait for the driver to flag done, then flush the recording.
  await page.waitForFunction(() => window.__DONE__ === true, { timeout: totalDurMs + 5000, polling: 100 });
  const video = page.video();
  await page.close();
  await ctx.close();
  await browser.close();
  if (!video) { console.error('No video recorded'); process.exit(1); }
  const raw = await video.path();

  // 6) Transcode Playwright's webm → h.264 mp4 at 30fps, silent.
  execSync(
    `ffmpeg -y -i "${raw}" -r ${FPS} -c:v libx264 -pix_fmt yuv420p -movflags +faststart -an "${OUT_VIDEO}"`,
    { stdio: 'inherit' }
  );
  fs.unlinkSync(raw);
  console.log(`\n✓ ${OUT_VIDEO}`);
}

main().catch(err => {
  console.error('Record failed:', err.message);
  console.error(err.stack);
  process.exit(1);
});

#!/usr/bin/env node
/**
 * render-end-card.js — render the data-driven end card to a PNG + a still MP4.
 *
 * Reads the recipe's `end_card` config (from config.json) and fills
 * end-card.template.html, then Playwright-screenshots it and makes a short MP4.
 * This is the "make the end card better" fix (QA GOOSE-2481): a designed card —
 * wordmark + ⭐ proof row + trust trio + CTA pill — not a bare logo.
 *
 * Output: <out-dir>/end-card.png  +  <out-dir>/scene-end-endcard.mp4
 *
 * Usage:
 *   node render-end-card.js --config config.json [--out-dir .]
 *
 * end_card config (see config.example.json):
 *   {
 *     "bg": "#fbf4e8", "fg": "#1e5751", "cta_bg": "#9fe778", "cta_fg": "#1e5751",
 *     "star_color": "#ffd15a",
 *     "logo_svg": "<svg …>…</svg>",   // preferred; else "wordmark_text": "BRAND"
 *     "stars": 5,                      // 0 hides the proof row
 *     "proof_text": "69,000 families",
 *     "trust_trio": [ {"label":"Easy to\npersonalize","icon":"pencil"}, … ],
 *     "cta_text": "Personalize his book",
 *     "dwell_sec": 2.5
 *   }
 * Relative paths (logo_svg_path) resolve against the config's directory.
 */

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');
const { chromium } = require('playwright');

function parseArgs(argv) {
  const a = { config: 'config.json', outDir: '.' };
  for (let i = 2; i < argv.length; i++) {
    if (argv[i] === '--config') a.config = argv[++i];
    else if (argv[i] === '--out-dir') a.outDir = argv[++i];
  }
  return a;
}

function esc(s) {
  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

// A small default icon set (filled paths, currentColor via `fill` on the badge).
const ICONS = {
  pencil: '<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>',
  heart: '<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>',
  palette: '<path d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10c1.38 0 2.5-1.12 2.5-2.5 0-.61-.23-1.2-.64-1.67-.08-.1-.13-.21-.13-.33 0-.28.22-.5.5-.5H16c3.31 0 6-2.69 6-6 0-4.96-4.49-9-10-9zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 8 6.5 8 8 8.67 8 9.5 7.33 11 6.5 11zm3-4C8.67 7 8 6.33 8 5.5S8.67 4 9.5 4s1.5.67 1.5 1.5S10.33 7 9.5 7zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 4 14.5 4s1.5.67 1.5 1.5S15.33 7 14.5 7zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 8 17.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>',
  star: '<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>',
  check: '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>',
  gift: '<path d="M20 6h-2.18c.11-.31.18-.65.18-1a3 3 0 0 0-5.5-1.65l-.5.67-.5-.68A3 3 0 0 0 6 4c0 .35.07.69.18 1H4a2 2 0 0 0-2 2v2h20V7a2 2 0 0 0-2-1zM4 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8H4z"/>',
  bolt: '<path d="M7 2v11h3v9l7-12h-4l4-8z"/>',
  shield: '<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>',
};

function iconSvg(name) {
  const p = ICONS[name] || ICONS.check;
  return `<svg viewBox="0 0 24 24">${p}</svg>`;
}

function main() {
  const args = parseArgs(process.argv);
  const configPath = path.resolve(args.config);
  const cfgDir = path.dirname(configPath);
  const cfg = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
  const ec = cfg.end_card || {};

  const tpl = fs.readFileSync(path.join(__dirname, 'end-card.template.html'), 'utf-8');

  // Wordmark: prefer an inline SVG (or a path to one), else a bold text fallback.
  let logoSvg = ec.logo_svg || '';
  if (!logoSvg && ec.logo_svg_path) logoSvg = fs.readFileSync(path.resolve(cfgDir, ec.logo_svg_path), 'utf-8');
  const wordmark = logoSvg
    ? logoSvg
    : `<div class="text">${esc(ec.wordmark_text || cfg.brand_name || 'BRAND')}</div>`;

  // Proof row (⭐ + text) — omit entirely if stars is 0/absent.
  const starCount = ec.stars == null ? 5 : ec.stars;
  const proof = (starCount > 0)
    ? `<div class="proof-row"><div class="stars">${'★'.repeat(starCount)}</div>` +
      (ec.proof_text ? `<div class="families">${esc(ec.proof_text)}</div>` : '') + `</div>`
    : '';

  // Trust trio — up to a handful of {label, icon} items.
  const trio = Array.isArray(ec.trust_trio) && ec.trust_trio.length
    ? `<div class="trust-trio">` + ec.trust_trio.map(it =>
        `<div class="item"><div class="badge">${iconSvg(it.icon)}</div>` +
        `<div class="label">${esc(it.label || '').replace(/\n/g, '<br>')}</div></div>`
      ).join('') + `</div>`
    : '';

  const html = tpl
    .replace('{{BG}}', ec.bg || '#fbf4e8')
    .replace('{{FG}}', ec.fg || '#1e5751')
    .replace('{{CTA_BG}}', ec.cta_bg || '#9fe778')
    .replace('{{CTA_FG}}', ec.cta_fg || '#1e5751')
    .replace('{{STAR}}', ec.star_color || '#ffd15a')
    .replace('{{WORDMARK}}', wordmark)
    .replace('{{PROOF}}', proof)
    .replace('{{TRIO}}', trio)
    .replace('{{CTA}}', esc(ec.cta_text || 'Learn more'));

  const outDir = path.resolve(args.outDir);
  fs.mkdirSync(outDir, { recursive: true });
  const htmlPath = path.join(outDir, 'end-card.html');
  const outPng = path.join(outDir, 'end-card.png');
  const outMp4 = path.join(outDir, 'scene-end-endcard.mp4');
  const dwell = ec.dwell_sec || 2.5;
  fs.writeFileSync(htmlPath, html);

  (async () => {
    const browser = await chromium.launch();
    const ctx = await browser.newContext({ viewport: { width: 1080, height: 1920 }, deviceScaleFactor: 1 });
    const page = await ctx.newPage();
    await page.goto('file://' + htmlPath, { waitUntil: 'load' });
    await page.waitForFunction(() => document.body.dataset.ready === 'true', { timeout: 5000 });
    await page.waitForTimeout(400);
    await page.screenshot({ path: outPng });
    await browser.close();
    execSync(
      `ffmpeg -y -loop 1 -i "${outPng}" -t ${dwell} -r 30 ` +
      `-vf "scale=1080:1920,format=yuv420p" -c:v libx264 -pix_fmt yuv420p -movflags +faststart "${outMp4}"`,
      { stdio: 'pipe' }
    );
    console.log(`png  → ${path.relative(process.cwd(), outPng)}`);
    console.log(`mp4  → ${path.relative(process.cwd(), outMp4)} (${dwell}s)`);
  })().catch(e => { console.error(e); process.exit(1); });
}

main();

#!/usr/bin/env bash
# stitch.sh — assemble the final ChatGPT chat ad:
#   chat clip ─(300ms crossfade)→ end card, with a deterministic SUBLIMINAL
#   ChatGPT SFX layer (key-tap / send-tap / stream-tick / response-done from
#   master-chat.sfx.json) + an OPTIONAL ducked music bed, then an OPTIONAL 1:1
#   variant. FREE assembly (ffmpeg only). Sibling of render-imessage-chat/stitch.sh.
#
# The chat records at the ChatGPT-native ~9:19.5 (default 750×1624). The generic
# end card renders at 1080×1920 (9:16). To crossfade cleanly WITHOUT ever
# stretching the chat (hard rule), the end card is scaled-to-fit the chat's
# dimensions and PADDED (its own bg color) — the card content is centered so the
# pad is seamless. Pass --pad-color <#hex> = the end_card.bg (default #ffffff,
# ChatGPT light mode).
#
# ChatGPT SFX are subliminal by design (ChatGPT has no native chime). Per-name
# levels: key-tap -28dB, send-tap -20dB, stream-tick -32dB, response-done -22dB.
# NOTE: the bundled wavs are freshly SYNTHESIZED stand-ins — the originals were
# lost from Git LFS (404). Swap in real wavs in assets/sfx/ for tuned SFX.
#
# Usage:
#   stitch.sh --chat <master-chat.mp4> --end <scene-end-endcard.mp4> \
#             --sfx <master-chat.sfx.json> --out <master-final.mp4> \
#             [--music <music-bed.mp3>] [--sfx-dir <dir>] \
#             [--pad-color <#hex>] [--also-1x1]
set -euo pipefail

HERE="$(cd "$(dirname "$0")" && pwd)"
SFX_DIR="$HERE/../assets/sfx"
MUSIC=""
PAD_COLOR="#ffffff"
ALSO_1X1=0
CHAT="" END="" SFX_JSON="" OUT=""

while [ $# -gt 0 ]; do
  case "$1" in
    --chat) CHAT="$2"; shift 2;;
    --end) END="$2"; shift 2;;
    --sfx) SFX_JSON="$2"; shift 2;;
    --out) OUT="$2"; shift 2;;
    --music) MUSIC="$2"; shift 2;;
    --sfx-dir) SFX_DIR="$2"; shift 2;;
    --pad-color) PAD_COLOR="$2"; shift 2;;
    --also-1x1) ALSO_1X1=1; shift;;
    *) echo "unknown arg: $1" >&2; exit 1;;
  esac
done

for v in CHAT END SFX_JSON OUT; do
  [ -n "${!v}" ] || { echo "missing --${v,,}" >&2; exit 1; }
done
for f in "$CHAT" "$END" "$SFX_JSON"; do
  [ -f "$f" ] || { echo "MISSING: $f" >&2; exit 1; }
done

# The 4 SFX wavs are subliminal stand-ins. If a catalog fetch didn't materialize
# the binary assets, synthesize them here so a missing wav never breaks the render
# (the cue loop adds each as an ffmpeg input unconditionally). Swap real wavs anytime.
mkdir -p "$SFX_DIR"
_synth() { [ -f "$SFX_DIR/$1.wav" ] || ffmpeg -y -f lavfi -i "$2" -ar 44100 -ac 2 "$SFX_DIR/$1.wav" >/dev/null 2>&1; }
_synth key-tap       "sine=frequency=1800:duration=0.05"
_synth send-tap      "sine=frequency=900:duration=0.08"
_synth stream-tick   "sine=frequency=2400:duration=0.03"
_synth response-done "sine=frequency=600:duration=0.12"

# Chat is the master canvas — never scale/stretch it. Normalize the end card to
# the chat's exact dimensions (scale-to-fit + pad with the card's bg color).
CW=$(ffprobe -v error -select_streams v:0 -show_entries stream=width  -of csv=p=0 "$CHAT")
CH=$(ffprobe -v error -select_streams v:0 -show_entries stream=height -of csv=p=0 "$CHAT")

# 1) Crossfade chat → (normalized) end card (300ms).
CHAT_DUR=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$CHAT")
END_DUR=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$END")
XFADE=0.30
TOTAL=$(python3 -c "print($CHAT_DUR + $END_DUR - $XFADE)")
XSTART=$(python3 -c "print($CHAT_DUR - $XFADE)")
TMP_VIDEO=$(mktemp -t gpt-stitch).mp4
ffmpeg -y -i "$CHAT" -i "$END" \
  -filter_complex "[1:v]scale=${CW}:${CH}:force_original_aspect_ratio=decrease,pad=${CW}:${CH}:-1:-1:color=${PAD_COLOR},setsar=1[end];[0:v][end]xfade=transition=fade:duration=${XFADE}:offset=${XSTART}[v]" \
  -map "[v]" -an -c:v libx264 -pix_fmt yuv420p -movflags +faststart "$TMP_VIDEO" >/dev/null 2>&1
echo "  video stitched, ${TOTAL}s (${CW}x${CH})"

# 2) Build the audio mix (subliminal ChatGPT SFX cues [+ optional ducked bed]).
TMP_AUDIO=$(mktemp -t gpt-audio).m4a
MUSIC_ARG="${MUSIC:-NONE}"
python3 - "$SFX_JSON" "$SFX_DIR" "$MUSIC_ARG" "$TOTAL" "$TMP_AUDIO" <<'PY'
import json, sys, subprocess
sfx_json, sfx_dir, music, total, out = sys.argv[1], sys.argv[2], sys.argv[3], float(sys.argv[4]), sys.argv[5]
doc = json.load(open(sfx_json))
cues = doc["cues"] if isinstance(doc, dict) else doc
has_music = music != "NONE"

# Subliminal per-name gains (linear ≈ dBFS): ChatGPT has no native chime so the
# SFX are felt, not heard.
GAIN = {"key-tap": 0.040, "send-tap": 0.100, "stream-tick": 0.025, "response-done": 0.079}

# Base: a silent stereo bed of full length so amix always has an anchor.
inputs = ["-f", "lavfi", "-t", str(total), "-i", "anullsrc=r=44100:cl=stereo"]
filter_parts = []
mix_labels = ["[0:a]"]
idx = 1
if has_music:
    inputs += ["-i", music]
    # Ducked bed: loop to length, drop rumble, sit low so the streamed answer
    # reads, 1.5s fade-out so the end-card CTA lands in (relative) quiet.
    filter_parts.append(
        f"[{idx}:a]aloop=loop=-1:size=2147483647,atrim=duration={total},"
        f"highpass=f=60,volume=0.22,afade=t=out:st={max(0,total-1.5)}:d=1.5[mus]")
    mix_labels.append("[mus]")
    idx += 1
for c in cues:
    name = c["name"]
    sfx_file = f"{sfx_dir}/{name}.wav"
    inputs += ["-i", sfx_file]
    delay = int(round(c["t"] * 1000))
    vol = GAIN.get(name, 0.05)
    filter_parts.append(f"[{idx}:a]adelay={delay}|{delay},volume={vol}[s{idx}]")
    mix_labels.append(f"[s{idx}]")
    idx += 1
n = len(mix_labels)
# normalize=0 so amix doesn't divide each input by N. No global volume boost
# (unlike iMessage) — these cues are meant to stay subliminal; just limit peaks.
filter_parts.append(
    "".join(mix_labels) +
    f"amix=inputs={n}:duration=first:dropout_transition=0:normalize=0,alimiter=limit=0.95[aout]")
fc = ";".join(filter_parts)
cmd = ["ffmpeg", "-y"] + inputs + ["-filter_complex", fc, "-map", "[aout]", "-c:a", "aac", "-b:a", "192k", out]
subprocess.run(cmd, check=True, stderr=subprocess.DEVNULL)
print(f"  audio: {'1 music bed + ' if has_music else ''}{len(cues)} subliminal sfx cues")
PY

# 3) Mux video + audio → master.
ffmpeg -y -i "$TMP_VIDEO" -i "$TMP_AUDIO" -map 0:v -map 1:a -c:v copy -c:a aac -shortest -movflags +faststart "$OUT" >/dev/null 2>&1
rm -f "$TMP_VIDEO" "$TMP_AUDIO"
echo "  master → $OUT"

# 4) Optional 1:1 variant — center-CROP a square from the chat zone (never scale
#    to a different ratio; cropping is the only legitimate shape change).
if [ "$ALSO_1X1" = "1" ]; then
  OUT_1X1="${OUT%.mp4}-1x1.mp4"
  CY=$(python3 -c "print(max(0, int(($CH - $CW) / 2)))")
  ffmpeg -y -i "$OUT" -vf "crop=${CW}:${CW}:0:${CY}" \
    -c:v libx264 -pix_fmt yuv420p -c:a aac -b:a 192k -movflags +faststart "$OUT_1X1" >/dev/null 2>&1
  echo "  1:1    → $OUT_1X1"
fi

# Smoke test — render-chatgpt-chat

Verifies the free assembly end-to-end from the bundled example config. No paid
calls. Needs: Node, `npm install` (Playwright Chromium), and ffmpeg/ffprobe.

## Setup

```bash
cd scripts
npm install
npx playwright install chromium
mkdir -p /tmp/gpt-chat-smoke
```

## Run

```bash
node record-chat.js     --config config.example.json --out-dir /tmp/gpt-chat-smoke
node render-end-card.js --config config.example.json --out-dir /tmp/gpt-chat-smoke
bash stitch.sh \
  --chat /tmp/gpt-chat-smoke/master-chat.mp4 \
  --end  /tmp/gpt-chat-smoke/scene-end-endcard.mp4 \
  --sfx  /tmp/gpt-chat-smoke/master-chat.sfx.json \
  --out  /tmp/gpt-chat-smoke/master-final.mp4 \
  --pad-color "#ffffff" \
  --also-1x1
```

## Expect

- `master-chat.mp4` — 750×1624 (~9:19.5), ~12s, ONE continuous take: the user
  types with the keyboard up, taps send (bubble + keyboard-down + header-swap in one
  beat), one gray loading dot for ~500ms, then the assistant answer streams in
  word-by-word. No micro-flicker / scene cuts.
- `master-chat.sfx.json` — `{ "cues": [ … ] }` with key-tap / send-tap / stream-tick
  / response-done entries and **no cue on the loading dot**.
- `scene-end-endcard.mp4` — 1080×1920, ~2.5s designed end card (wordmark + ⭐ proof
  row + trust trio + CTA pill).
- `master-final.mp4` — chat crossfades into the end card (padded to 750×1624 with the
  card bg so the seam is invisible); audio carries the subliminal SFX (and the ducked
  bed if `--music` was passed). `master-final-1x1.mp4` is a 750×750 center crop.
- `ffprobe` confirms dimensions/duration; run the `watch` skill on the master to
  confirm beat order, the single loading dot, and word-by-word streaming.

## Fail signals

- Chat looks horizontally fat/stretched → an export forced a non-9:19.5 ratio onto
  the 750×1624 master. Never scale the chat to a different ratio (the 1:1 crop is the
  only legitimate shape change).
- Assistant text appears all at once → the assistant message is missing
  `"stream": true` (the mockup wraps words only when streaming).
- Keyboard visible while the answer streams → a `keyboard-hide` event is missing at
  the send-tap `t`.
- Three dots instead of one → wrong row type; use a single `loading-dot` message.
- Visible seam under the end card → `--pad-color` didn't match `end_card.bg`.
- `Cannot find module 'playwright'` → run `npm install` in `scripts/`.