screencraft 0.1.0

package/src/server/public/app.js

@@ -0,0 +1,738 @@
+/**
+ * ScreenCraft Web UI — Frontend
+ */
+
+// ── State ──────────────────────────────────────────────────────────
+let currentStep = 0;
+let brand = {};
+let selectedTemplate = null;
+let templates = [];
+let screenshots = [];
+let suggestions = [];
+let approvedTexts = [];
+let currentHeadline = 0;
+let licenseTier = null;
+
+// ── Step navigation ────────────────────────────────────────────────
+function goStep(n) {
+  document.querySelectorAll('.step').forEach(el => el.classList.remove('active'));
+  document.getElementById(`step-${n}`).classList.add('active');
+  currentStep = n;
+
+  // Update progress bar
+  document.querySelectorAll('.progress-bar .seg').forEach(seg => {
+    const s = parseInt(seg.dataset.step);
+    seg.className = 'seg';
+    if (s < n) seg.classList.add('done');
+    else if (s === n) seg.classList.add('current');
+  });
+
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+// ── Step 0 → 1: Detect project ────────────────────────────────────
+async function detectProject() {
+  const projectPath = document.getElementById('projectPath').value.trim();
+  if (!projectPath) return;
+
+  const btn = event.target;
+  btn.disabled = true;
+  btn.textContent = 'Detecting...';
+
+  try {
+    const res = await fetch('/api/detect', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ projectPath }),
+    });
+
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error);
+
+    brand = data.brand;
+
+    // Populate brand UI
+    document.getElementById('brandFramework').innerHTML =
+      `<span class="badge badge-framework">${data.framework.name}</span>`;
+    document.getElementById('brandAppName').value = brand.appName || '';
+
+    // Colors
+    setColorSwatch('primary', brand.primary);
+    setColorSwatch('secondary', brand.secondary);
+    setColorSwatch('accent', brand.accent);
+    setColorSwatch('background', brand.background);
+
+    // Icon
+    if (brand.icon) {
+      document.getElementById('brandIconStatus').innerHTML = '<span class="badge badge-found">Found</span>';
+      document.getElementById('iconImg').src = brand.icon;
+      document.getElementById('brandIconPreview').style.display = 'block';
+    } else {
+      document.getElementById('brandIconStatus').innerHTML = '<span class="badge badge-missing">Not found</span>';
+    }
+
+    // Font
+    document.getElementById('brandFont').textContent = brand.font?.family || 'System default';
+
+    goStep(1);
+  } catch (err) {
+    alert('Detection failed: ' + err.message);
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Detect Project';
+  }
+}
+
+function setColorSwatch(name, hex) {
+  const cap = name.charAt(0).toUpperCase() + name.slice(1);
+  document.getElementById(`swatch${cap}`).style.background = hex;
+  document.getElementById(`color${cap}`).value = hex;
+  document.getElementById(`hex${cap}`).textContent = hex;
+}
+
+function updateColor(name, hex) {
+  const cap = name.charAt(0).toUpperCase() + name.slice(1);
+  document.getElementById(`swatch${cap}`).style.background = hex;
+  document.getElementById(`hex${cap}`).textContent = hex;
+  brand[name] = hex;
+
+  // Sync to server
+  fetch('/api/brand/update', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ [name]: hex }),
+  });
+}
+
+// ── Step 1 → 2: Load templates ────────────────────────────────────
+async function loadTemplates() {
+  // Sync app name
+  const appName = document.getElementById('brandAppName').value.trim();
+  if (appName !== brand.appName) {
+    brand.appName = appName;
+    await fetch('/api/brand/update', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ appName }),
+    });
+  }
+
+  goStep(2);
+  document.getElementById('templateLoading').style.display = 'flex';
+  document.getElementById('templateGrid').style.display = 'none';
+  document.getElementById('templateBtns').style.display = 'none';
+
+  try {
+    const res = await fetch('/api/templates');
+    const data = await res.json();
+
+    templates = data.templates;
+    selectedTemplate = data.templates.length > 0 ? data.templates[0].name : null;
+
+    renderTemplateGrid();
+  } catch (err) {
+    // If endpoint doesn't exist yet, show fallback
+    templates = [{ name: 'auto', label: 'Auto', description: 'Automatically select the best available template' }];
+    selectedTemplate = 'auto';
+    renderTemplateGrid();
+  }
+}
+
+function renderTemplateGrid() {
+  const grid = document.getElementById('templateGrid');
+  grid.innerHTML = '';
+
+  templates.forEach(t => {
+    const card = document.createElement('div');
+    card.className = 'template-card' + (selectedTemplate === t.name ? ' selected' : '');
+    card.onclick = () => {
+      selectedTemplate = t.name;
+      // Sync to server
+      fetch('/api/template/select', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ template: t.name }),
+      });
+      renderTemplateGrid();
+    };
+    card.innerHTML = `
+      <div class="template-name">${t.label || t.name}</div>
+      <div class="template-desc">${t.description || ''}</div>
+      ${t.badge ? `<div class="template-badge">${t.badge}</div>` : ''}
+    `;
+    grid.appendChild(card);
+  });
+
+  document.getElementById('templateLoading').style.display = 'none';
+  grid.style.display = 'grid';
+  document.getElementById('templateBtns').style.display = 'flex';
+}
+
+// ── Step 2 → 3: Init screenshots ──────────────────────────────────
+async function captureScreenshots() {
+  goStep(3);
+  document.getElementById('screenshotLoading').style.display = 'flex';
+  document.getElementById('captureMode').style.display = 'none';
+  document.getElementById('manualMode').style.display = 'none';
+  document.getElementById('screenshotBtns').style.display = 'none';
+
+  try {
+    const res = await fetch('/api/screenshots/init', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error);
+
+    document.getElementById('screenshotLoading').style.display = 'none';
+
+    if (data.mode === 'manual') {
+      screenshots = data.screenshots;
+      renderManualGrid();
+    } else if (data.mode === 'simulator') {
+      screenshots = [];
+      document.getElementById('captureMode').style.display = 'block';
+      document.getElementById('captureInstructions').textContent =
+        `${data.device || 'Simulator'} is ready. Navigate your app in the Simulator, then click "Capture Screen" for each screen (up to 6).`;
+    } else if (data.mode === 'waiting') {
+      document.getElementById('captureMode').style.display = 'block';
+      document.getElementById('captureInstructions').innerHTML =
+        `<strong>No simulator with your app detected.</strong><br><br>` +
+        `1. Open your project in Xcode<br>` +
+        `2. Build & Run (Cmd+R) to launch in the Simulator<br>` +
+        `3. Once your app is running, click "Check Again" below`;
+      document.getElementById('captureBtn').textContent = 'Check Again';
+      document.getElementById('captureBtn').onclick = () => {
+        document.getElementById('captureBtn').textContent = 'Capture Screen';
+        document.getElementById('captureBtn').onclick = captureOne;
+        captureScreenshots();
+      };
+    } else if (data.mode === 'none') {
+      document.getElementById('captureMode').style.display = 'block';
+      document.getElementById('captureInstructions').innerHTML =
+        `<strong>No screenshots found.</strong><br><br>` +
+        `Place PNG files in a <code>screenshots/</code> folder in your project directory, then click "Check Again".`;
+      document.getElementById('captureBtn').textContent = 'Check Again';
+      document.getElementById('captureBtn').onclick = () => captureScreenshots();
+    }
+  } catch (err) {
+    alert('Screenshot init failed: ' + err.message);
+    goStep(2);
+  }
+}
+
+async function captureOne() {
+  const btn = document.getElementById('captureBtn');
+  btn.disabled = true;
+  btn.textContent = 'Capturing...';
+
+  try {
+    const res = await fetch('/api/screenshots/capture', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error);
+
+    screenshots.push({
+      index: data.index,
+      label: null,
+      filename: data.filename,
+      base64: data.base64,
+    });
+
+    renderCaptureGrid();
+    document.getElementById('screenshotCount').textContent = `${screenshots.length} screens`;
+
+    if (screenshots.length >= 6) {
+      btn.style.display = 'none';
+    }
+
+    document.getElementById('screenshotBtns').style.display = 'flex';
+  } catch (err) {
+    alert('Capture failed: ' + err.message);
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Capture Screen';
+  }
+}
+
+function renderCaptureGrid() {
+  const grid = document.getElementById('screenshotGrid');
+  grid.innerHTML = '';
+
+  screenshots.forEach((s, i) => {
+    const card = document.createElement('div');
+    card.className = 'screenshot-card';
+    card.innerHTML = `
+      <img src="${s.base64}" alt="Screen ${i + 1}">
+      <div class="screen-label">
+        Screen ${i + 1}
+        <button class="btn-ghost" style="font-size:11px; padding:2px 6px; margin-left:4px;" onclick="removeScreenshot(${i})">Remove</button>
+      </div>
+    `;
+    grid.appendChild(card);
+  });
+}
+
+async function removeScreenshot(idx) {
+  await fetch('/api/screenshots/remove', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ index: idx }),
+  });
+  screenshots.splice(idx, 1);
+  renderCaptureGrid();
+  document.getElementById('screenshotCount').textContent = `${screenshots.length} screens`;
+  document.getElementById('captureBtn').style.display = '';
+  if (screenshots.length === 0) {
+    document.getElementById('screenshotBtns').style.display = 'none';
+  }
+}
+
+function renderManualGrid() {
+  const grid = document.getElementById('manualGrid');
+  grid.innerHTML = '';
+
+  screenshots.forEach((s, i) => {
+    const card = document.createElement('div');
+    card.className = 'screenshot-card';
+    card.draggable = true;
+    card.dataset.index = i;
+    card.innerHTML = `
+      <img src="${s.base64}" alt="Screen ${i + 1}">
+      <div class="screen-label">Screen ${i + 1}${s.label ? ' — ' + s.label : ''}</div>
+    `;
+
+    card.addEventListener('dragstart', e => {
+      e.dataTransfer.setData('text/plain', i);
+      card.classList.add('dragging');
+    });
+    card.addEventListener('dragend', () => card.classList.remove('dragging'));
+    card.addEventListener('dragover', e => e.preventDefault());
+    card.addEventListener('drop', e => {
+      e.preventDefault();
+      const from = parseInt(e.dataTransfer.getData('text/plain'));
+      const to = i;
+      if (from !== to) {
+        const item = screenshots.splice(from, 1)[0];
+        screenshots.splice(to, 0, item);
+        renderManualGrid();
+        fetch('/api/screenshots/reorder', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ order: screenshots.map((_, idx) => idx) }),
+        });
+      }
+    });
+
+    grid.appendChild(card);
+  });
+
+  document.getElementById('screenshotCount').textContent = `${screenshots.length} screens`;
+  document.getElementById('manualMode').style.display = 'block';
+  document.getElementById('screenshotBtns').style.display = 'flex';
+}
+
+// ── Step 3 → 4: Generate headlines ─────────────────────────────────
+async function generateHeadlines() {
+  goStep(4);
+  document.getElementById('headlineLoading').style.display = 'flex';
+  document.getElementById('headlineEditor').style.display = 'none';
+  document.getElementById('headlineBtns').style.display = 'none';
+
+  try {
+    const res = await fetch('/api/headlines', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error);
+
+    suggestions = data.suggestions;
+    approvedTexts = suggestions.map(s => ({ ...s.options[0] }));
+    currentHeadline = 0;
+
+    document.getElementById('headlineLoading').style.display = 'none';
+    document.getElementById('headlineEditor').style.display = 'block';
+    document.getElementById('headlineBtns').style.display = 'block';
+
+    buildHeadlineDots();
+    showHeadline();
+  } catch (err) {
+    alert('Headline generation failed: ' + err.message);
+    goStep(3);
+  }
+}
+
+function buildHeadlineDots() {
+  const dots = document.getElementById('headlineDots');
+  dots.innerHTML = '';
+  screenshots.forEach((_, i) => {
+    const dot = document.createElement('div');
+    dot.className = 'dot' + (i === 0 ? ' active' : '');
+    dot.onclick = () => { currentHeadline = i; showHeadline(); };
+    dots.appendChild(dot);
+  });
+}
+
+function showHeadline() {
+  const i = currentHeadline;
+  const s = screenshots[i];
+  const opts = suggestions[i];
+  const approved = approvedTexts[i];
+
+  const editor = document.getElementById('headlineEditor');
+  editor.innerHTML = `
+    <div class="headline-editor">
+      <div class="headline-preview">
+        <div class="phone-mockup">
+          <div class="phone-frame">
+            <img src="${s.base64}" alt="Screen ${i + 1}">
+            <div class="phone-notch"></div>
+          </div>
+        </div>
+      </div>
+      <div class="headline-controls">
+        <h3>Screen ${i + 1} of ${screenshots.length}</h3>
+        <p class="screen-desc">${opts.description || ''}</p>
+        <div class="option-list">
+          ${opts.options.map((o, idx) => `
+            <button class="option-btn ${approved.white === o.white && approved.accent === o.accent ? 'selected' : ''}"
+                    onclick="selectOption(${i}, ${idx})">
+              <span class="opt-num">${idx + 1}</span>
+              <span><span class="opt-white">${o.white}</span> <span class="opt-accent">${o.accent}</span></span>
+            </button>
+          `).join('')}
+        </div>
+        <p class="text-dim text-sm mt-8">Or write custom:</p>
+        <div class="custom-inputs">
+          <input type="text" placeholder="White text" id="customWhite" value="${approved.white}"
+                 oninput="customHeadline(${i})">
+          <input type="text" placeholder="Accent word" id="customAccent" value="${approved.accent}"
+                 oninput="customHeadline(${i})">
+        </div>
+      </div>
+    </div>
+  `;
+
+  // Update dots
+  document.querySelectorAll('.headline-dots .dot').forEach((dot, idx) => {
+    dot.className = 'dot';
+    if (idx === i) dot.classList.add('active');
+    else if (approvedTexts[idx]) dot.classList.add('done');
+  });
+
+  // Update nav buttons
+  const prevBtn = document.getElementById('headlinePrev');
+  const nextBtn = document.getElementById('headlineNext');
+  prevBtn.style.visibility = i === 0 ? 'hidden' : 'visible';
+
+  if (i === screenshots.length - 1) {
+    nextBtn.textContent = 'Preview All';
+    nextBtn.onclick = () => showPreview();
+  } else {
+    nextBtn.textContent = 'Next Screen';
+    nextBtn.onclick = () => headlineNav(1);
+  }
+}
+
+function selectOption(screenIdx, optIdx) {
+  const opt = suggestions[screenIdx].options[optIdx];
+  approvedTexts[screenIdx] = { white: opt.white, accent: opt.accent };
+  showHeadline();
+}
+
+function customHeadline(screenIdx) {
+  const w = document.getElementById('customWhite').value;
+  const a = document.getElementById('customAccent').value;
+  approvedTexts[screenIdx] = { white: w, accent: a };
+
+  // Deselect options
+  document.querySelectorAll('.option-btn').forEach(btn => btn.classList.remove('selected'));
+}
+
+function headlineNav(dir) {
+  currentHeadline = Math.max(0, Math.min(screenshots.length - 1, currentHeadline + dir));
+  showHeadline();
+}
+
+// ── Step 4 → 5: Preview ───────────────────────────────────────────
+function showPreview() {
+  goStep(5);
+
+  const grid = document.getElementById('previewGrid');
+  grid.innerHTML = '';
+
+  screenshots.forEach((s, i) => {
+    const text = approvedTexts[i];
+    const card = document.createElement('div');
+    card.className = 'preview-card';
+    card.innerHTML = `
+      <div class="preview-headline">
+        <span class="white">${text.white}</span>
+        <span class="accent-text">${text.accent}</span>
+      </div>
+      <div class="phone-frame">
+        <img src="${s.base64}" alt="Screen ${i + 1}">
+        <div class="phone-notch"></div>
+      </div>
+    `;
+    grid.appendChild(card);
+  });
+}
+
+// ── Step 5 → 6: License check ──────────────────────────────────────
+async function checkLicense() {
+  goStep(6);
+
+  const content = document.getElementById('licenseContent');
+  const btns = document.getElementById('licenseBtns');
+  content.innerHTML = '<div class="loading"><div class="render-spinner"></div><span>Checking license...</span></div>';
+  btns.innerHTML = '';
+
+  try {
+    const res = await fetch('/api/license/check', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({}),
+    });
+    const data = await res.json();
+
+    if (data.valid && data.tier) {
+      licenseTier = data.tier;
+      content.innerHTML = `
+        <div class="license-box">
+          <div style="font-size:48px; margin-bottom:16px;">&#9670;</div>
+          <h3>License Active</h3>
+          <p><span class="tier-badge ${data.tier}">${data.tier}</span></p>
+          <p>Your launch kit will include screenshots, PSDs, AE project, and video.</p>
+        </div>
+      `;
+      btns.innerHTML = `
+        <button class="btn btn-secondary" onclick="goStep(5)">Back</button>
+        <button class="btn btn-primary" onclick="startRender(false)">Generate Full Kit</button>
+      `;
+    } else {
+      content.innerHTML = `
+        <div class="license-box">
+          <div class="lock-icon">&#128274;</div>
+          <h3>License Required for Full Kit</h3>
+          <p>A license key unlocks video rendering, AE project file, and layered PSDs.<br>
+          Free mode generates App Store screenshot PNGs only.</p>
+          <div class="license-input-row mt-16">
+            <input type="text" id="licenseKeyInput" placeholder="MF-XXXX-XXXX-XXXX">
+            <button class="btn btn-primary" onclick="activateLicense()">Activate</button>
+          </div>
+          <p class="mt-16 text-sm">
+            <a href="https://screencraft.dev/activate" target="_blank" style="color: var(--accent)">Get a license key</a>
+          </p>
+        </div>
+      `;
+      btns.innerHTML = `
+        <button class="btn btn-secondary" onclick="goStep(5)">Back</button>
+        <button class="btn btn-secondary" onclick="startRender(true)">Screenshots Only (Free)</button>
+      `;
+    }
+  } catch (err) {
+    content.innerHTML = `<p class="text-center">Error checking license: ${err.message}</p>`;
+    btns.innerHTML = `
+      <button class="btn btn-secondary" onclick="goStep(5)">Back</button>
+      <button class="btn btn-secondary" onclick="startRender(true)">Screenshots Only (Free)</button>
+    `;
+  }
+}
+
+async function activateLicense() {
+  const key = document.getElementById('licenseKeyInput').value.trim();
+  if (!key) return;
+
+  const res = await fetch('/api/license/check', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ key }),
+  });
+  const data = await res.json();
+
+  if (data.valid) {
+    licenseTier = data.tier;
+    checkLicense();
+  } else {
+    alert('Invalid license key. Please check and try again.');
+  }
+}
+
+// ── Step 6 → 7: Render ────────────────────────────────────────────
+async function startRender(screenshotsOnly) {
+  // Send approved texts
+  await fetch('/api/approve', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ approvedTexts }),
+  });
+
+  goStep(7);
+  document.getElementById('renderProgress').style.display = 'block';
+  document.getElementById('outputSection').style.display = 'none';
+
+  // Start render
+  await fetch('/api/render', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ screenshotsOnly }),
+  });
+
+  // Poll status
+  pollRender();
+}
+
+async function pollRender() {
+  try {
+    const res = await fetch('/api/render/status');
+    const status = await res.json();
+
+    document.getElementById('renderFill').style.width = status.progress + '%';
+    document.getElementById('renderMessage').textContent = status.message;
+
+    if (status.phase === 'done') {
+      showOutput();
+      return;
+    }
+
+    if (status.phase === 'error') {
+      document.getElementById('renderMessage').textContent = 'Error: ' + status.message;
+      document.getElementById('renderMessage').style.color = 'var(--red)';
+      return;
+    }
+  } catch {}
+
+  setTimeout(pollRender, 800);
+}
+
+async function showOutput() {
+  document.getElementById('renderProgress').style.display = 'none';
+  document.getElementById('outputSection').style.display = 'block';
+
+  const res = await fetch('/api/output');
+  const data = await res.json();
+
+  const grid = document.getElementById('outputGrid');
+  grid.innerHTML = '';
+
+  data.files.forEach(f => {
+    if (f.type === 'screenshot') {
+      const card = document.createElement('div');
+      card.className = 'output-card';
+      card.innerHTML = `
+        <img src="${f.url}" alt="${f.filename}">
+        <div class="output-info">
+          <span class="output-name">${f.filename}</span>
+          <a href="${f.url}" download class="output-download">Download</a>
+        </div>
+      `;
+      grid.appendChild(card);
+    }
+  });
+
+  const videoFile = data.files.find(f => f.type === 'video');
+  const aepFile = data.files.find(f => f.type === 'aep');
+  const videoError = data.files.find(f => f.type === 'video-error');
+
+  if (videoFile || aepFile || videoError) {
+    const extras = document.createElement('div');
+    extras.style.cssText = 'grid-column: 1 / -1; margin-top: 8px;';
+    extras.className = 'card';
+    let inner = '';
+
+    if (videoFile) {
+      inner += `<div class="card-row">
+        <span class="label">Video</span>
+        <a href="${videoFile.url}" download class="output-download">${videoFile.filename}</a>
+      </div>`;
+    }
+    if (aepFile) {
+      inner += `<div class="card-row">
+        <span class="label">AE Project</span>
+        <span class="value">${aepFile.filename}</span>
+      </div>`;
+    }
+    if (videoError) {
+      inner += `<div class="card-row">
+        <span class="label">Video</span>
+        <span class="text-dim text-sm">${videoError.message}</span>
+      </div>`;
+    }
+
+    extras.innerHTML = inner;
+    grid.appendChild(extras);
+  }
+}
+
+function openOutputFolder() {
+  fetch('/api/output/open', { method: 'POST' });
+}
+
+// ── Init ───────────────────────────────────────────────────────────
+document.getElementById('projectPath').addEventListener('keydown', e => {
+  if (e.key === 'Enter') detectProject();
+});
+
+// Check if MCP has pre-populated session data
+(async function checkMcpBootstrap() {
+  try {
+    const res = await fetch('/api/session');
+    const data = await res.json();
+
+    if (!data.hasBrand) return; // Nothing pre-loaded
+
+    // Populate brand
+    brand = data.brand;
+    document.getElementById('projectPath').value = data.projectPath || '';
+    document.getElementById('brandFramework').innerHTML =
+      `<span class="badge badge-framework">${data.framework?.name || 'unknown'}</span>`;
+    document.getElementById('brandAppName').value = brand.appName || '';
+    setColorSwatch('primary', brand.primary);
+    setColorSwatch('secondary', brand.secondary);
+    setColorSwatch('accent', brand.accent);
+    setColorSwatch('background', brand.background);
+    if (brand.icon) {
+      document.getElementById('brandIconStatus').innerHTML = '<span class="badge badge-found">Found</span>';
+      document.getElementById('iconImg').src = brand.icon;
+      document.getElementById('brandIconPreview').style.display = 'block';
+    }
+    document.getElementById('brandFont').textContent = brand.font?.family || 'System default';
+
+    // Populate screenshots if available
+    if (data.hasScreenshots && data.screenshots) {
+      screenshots = data.screenshots;
+    }
+
+    // Populate headlines if available
+    if (data.hasHeadlines && data.headlines) {
+      approvedTexts = data.headlines;
+      suggestions = data.suggestions || approvedTexts.map(h => ({
+        description: '',
+        options: [h, h, h],
+      }));
+    }
+
+    // Jump to the right step
+    if (data.skipToStep != null) {
+      goStep(data.skipToStep);
+    } else if (data.hasHeadlines && data.hasScreenshots) {
+      // Everything ready — go to preview
+      showPreview();
+    } else if (data.hasScreenshots) {
+      // Have screenshots, need headlines
+      goStep(4);
+      buildHeadlineDots();
+      showHeadline();
+    } else {
+      // Have brand, need screenshots
+      goStep(1);
+    }
+  } catch {}
+})();