screencraft 0.1.0

package/src/server/index.js

@@ -0,0 +1,627 @@
+/**
+ * src/server/index.js
+ * -------------------
+ * Express server for ScreenCraft web UI.
+ * Wraps existing pipeline functions with API endpoints.
+ */
+
+const path    = require('path');
+const fs      = require('fs');
+const express = require('express');
+
+const { detectFramework, detectBrand } = require('../detectors/detectBrand');
+const { captureScreenshots }           = require('../detectors/simulator');
+const { suggestHeadlines }             = require('../generators/copy');
+const { compositePSD }                 = require('../generators/compositePSD');
+const { validateKey, getStoredKey }    = require('../auth/keystore');
+const { prepareAEProject, renderLocally } = require('../pipeline/aeSwap');
+
+const app  = express();
+const PORT = process.env.SCREENCRAFT_PORT || 3141;
+
+app.use(express.json({ limit: '50mb' }));
+app.use(express.static(path.join(__dirname, 'public')));
+
+// ── Session state (shared with MCP server) ───────────────────────
+const { session, resetSession } = require('./session');
+
+// ── Logging helper (mirrors CLI) ──────────────────────────────────
+const log = {
+  step:    (n, msg) => console.log(`[${n}] ${msg}`),
+  success: (msg)    => console.log(`  ✓ ${msg}`),
+  info:    (msg)    => console.log(`  ↳ ${msg}`),
+  warn:    (msg)    => console.log(`  ⚠ ${msg}`),
+};
+
+// ── API: Detect brand + framework ────────────────────────────────
+app.post('/api/detect', async (req, res) => {
+  try {
+    const projectPath = req.body.projectPath || process.cwd();
+
+    if (!fs.existsSync(projectPath)) {
+      return res.status(400).json({ error: 'Project path does not exist' });
+    }
+
+    resetSession();
+    session.projectPath = projectPath;
+
+    // Load config if exists
+    const configPath = path.join(projectPath, 'screencraft.config.js');
+    const config = fs.existsSync(configPath) ? require(configPath) : {};
+
+    session.outputDir = path.join(projectPath, config.output?.dir || './launch-kit');
+    fs.mkdirSync(session.outputDir, { recursive: true });
+    fs.mkdirSync(path.join(session.outputDir, 'screenshots'), { recursive: true });
+    fs.mkdirSync(path.join(session.outputDir, 'video'),       { recursive: true });
+    fs.mkdirSync(path.join(session.outputDir, 'source'),      { recursive: true });
+    fs.mkdirSync(path.join(session.outputDir, 'brand'),       { recursive: true });
+
+    const framework = await detectFramework(projectPath);
+    const brand     = await detectBrand(projectPath, config);
+
+    session.framework = framework;
+    session.brand     = brand;
+
+    // Read icon as base64 if it exists
+    let iconBase64 = null;
+    if (brand.icon && fs.existsSync(brand.icon)) {
+      const ext = path.extname(brand.icon).slice(1) || 'png';
+      const buf = fs.readFileSync(brand.icon);
+      iconBase64 = `data:image/${ext};base64,${buf.toString('base64')}`;
+    }
+
+    res.json({
+      framework: {
+        name:     framework.name,
+        platform: framework.platform,
+      },
+      brand: {
+        appName:    brand.appName,
+        primary:    brand.primary,
+        secondary:  brand.secondary,
+        accent:     brand.accent,
+        background: brand.background,
+        icon:       iconBase64,
+        font:       brand.font,
+        logo:       brand.logo ? true : false,
+      },
+    });
+  } catch (err) {
+    console.error('Detect error:', err);
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ── API: Update brand colors ──────────────────────────────────────
+app.post('/api/brand/update', (req, res) => {
+  if (!session.brand) {
+    return res.status(400).json({ error: 'Run detect first' });
+  }
+  const { primary, secondary, accent, background, appName } = req.body;
+  if (primary)    session.brand.primary    = primary;
+  if (secondary)  session.brand.secondary  = secondary;
+  if (accent)     session.brand.accent     = accent;
+  if (background) session.brand.background = background;
+  if (appName)    session.brand.appName    = appName;
+  res.json({ brand: session.brand });
+});
+
+// ── API: List available templates ─────────────────────────────────
+app.get('/api/templates', (req, res) => {
+  const layoutsDir = path.join(__dirname, '..', '..', 'templates', 'layouts');
+  const templates = [];
+
+  try {
+    if (fs.existsSync(layoutsDir)) {
+      const entries = fs.readdirSync(layoutsDir, { withFileTypes: true });
+
+      // Flat PSD files
+      entries
+        .filter(e => !e.isDirectory() && e.name.endsWith('.psd'))
+        .forEach(e => {
+          const name = e.name.replace('.psd', '');
+          templates.push({
+            name,
+            label: name.charAt(0).toUpperCase() + name.slice(1),
+            description: 'PSD template with [SWAP_*] layers',
+            badge: 'PSD',
+          });
+        });
+
+      // Subdirectories with template.psd
+      entries
+        .filter(e => e.isDirectory())
+        .forEach(e => {
+          const tPath = path.join(layoutsDir, e.name, 'template.psd');
+          if (fs.existsSync(tPath)) {
+            templates.push({
+              name: e.name,
+              label: e.name.charAt(0).toUpperCase() + e.name.slice(1),
+              description: 'PSD template with [SWAP_*] layers',
+              badge: 'PSD',
+            });
+          }
+        });
+    }
+  } catch {}
+
+  // Always include fallback option
+  templates.push({
+    name: 'auto',
+    label: 'Auto (Fallback)',
+    description: templates.length > 0
+      ? 'Let ScreenCraft choose the best template automatically'
+      : 'Programmatic compositing — no PSD templates found yet',
+    badge: templates.length > 0 ? null : 'Built-in',
+  });
+
+  res.json({ templates });
+});
+
+// ── API: Select template ──────────────────────────────────────────
+app.post('/api/template/select', (req, res) => {
+  session.selectedTemplate = req.body.template || null;
+  res.json({ ok: true });
+});
+
+// ── API: Screenshot init — check for manual folder or boot simulator ──
+app.post('/api/screenshots/init', async (req, res) => {
+  if (!session.projectPath) {
+    return res.status(400).json({ error: 'Run detect first' });
+  }
+
+  const screenshotDir = path.join(session.outputDir, 'screenshots');
+  fs.mkdirSync(screenshotDir, { recursive: true });
+
+  // Mode 1: check for manual screenshots folder
+  const manualDir = path.join(session.projectPath, 'screenshots');
+  if (fs.existsSync(manualDir)) {
+    const files = fs.readdirSync(manualDir)
+      .filter(f => /\.(png|jpg|jpeg)$/i.test(f))
+      .sort()
+      .slice(0, 6);
+
+    if (files.length > 0) {
+      session.screenshots = files.map((f, i) => ({
+        index: i + 1,
+        file: path.join(manualDir, f),
+        label: null,
+      }));
+
+      const screenshotData = session.screenshots.map((s, i) => {
+        const buf = fs.readFileSync(s.file);
+        return {
+          index: s.index,
+          label: s.label,
+          filename: path.basename(s.file),
+          base64: `data:image/png;base64,${buf.toString('base64')}`,
+        };
+      });
+
+      return res.json({ mode: 'manual', screenshots: screenshotData });
+    }
+  }
+
+  // Mode 2: need simulator — boot if needed
+  if (!session.framework?.platform?.includes('ios') && !session.framework?.platform?.includes('android')) {
+    return res.json({
+      mode: 'none',
+      error: 'No screenshots/ folder found and no iOS/Android framework detected. Place PNGs in a screenshots/ folder in your project.',
+    });
+  }
+
+  try {
+    const { execSync } = require('child_process');
+
+    if (session.framework.platform.includes('ios')) {
+      // Check for already-booted simulator
+      let deviceUdid = null;
+      try {
+        const list = execSync('xcrun simctl list devices booted -j', { encoding: 'utf8' });
+        const json = JSON.parse(list);
+        for (const runtime of Object.values(json.devices)) {
+          for (const device of runtime) {
+            if (device.state === 'Booted') {
+              deviceUdid = device.udid;
+              session._simDevice = deviceUdid;
+              log.success(`Simulator running: ${device.name}`);
+              return res.json({ mode: 'simulator', platform: 'ios', device: device.name, ready: true });
+            }
+          }
+        }
+      } catch {}
+
+      // No simulator running — don't auto-boot (it won't have the app)
+      return res.json({
+        mode: 'waiting',
+        platform: 'ios',
+        message: 'No simulator running. Build and run your app in Xcode first (Cmd+R), then come back and click "Check Again".',
+      });
+    }
+
+    // Android
+    const devices = execSync('adb devices', { encoding: 'utf8' });
+    if (devices.includes('\tdevice')) {
+      session._simDevice = 'android';
+      return res.json({ mode: 'simulator', platform: 'android', ready: true });
+    }
+    return res.status(500).json({ error: 'No Android device/emulator found.' });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ── API: Capture one screenshot from simulator ────────────────────
+app.post('/api/screenshots/capture', async (req, res) => {
+  if (!session._simDevice) {
+    return res.status(400).json({ error: 'Run screenshots/init first' });
+  }
+
+  const screenshotDir = path.join(session.outputDir, 'screenshots');
+  const nextIndex = session.screenshots.length + 1;
+  if (nextIndex > 6) {
+    return res.status(400).json({ error: 'Maximum 6 screenshots' });
+  }
+
+  const outFile = path.join(screenshotDir, `screen_${String(nextIndex).padStart(2, '0')}_raw.png`);
+
+  try {
+    const { execSync } = require('child_process');
+    const platform = session.framework.platform;
+
+    // Small delay to let animations settle
+    await new Promise(r => setTimeout(r, 500));
+
+    if (platform.includes('ios')) {
+      execSync(`xcrun simctl io "${session._simDevice}" screenshot "${outFile}"`, { timeout: 10000 });
+    } else {
+      execSync(`adb exec-out screencap -p > "${outFile}"`, { timeout: 10000 });
+    }
+
+    if (!fs.existsSync(outFile) || fs.statSync(outFile).size === 0) {
+      throw new Error('Screenshot file is empty. The simulator may not be fully loaded yet.');
+    }
+
+    const buf = fs.readFileSync(outFile);
+    const screenshot = {
+      index: nextIndex,
+      file: outFile,
+      label: null,
+    };
+    session.screenshots.push(screenshot);
+
+    res.json({
+      index: nextIndex,
+      filename: path.basename(outFile),
+      base64: `data:image/png;base64,${buf.toString('base64')}`,
+      total: session.screenshots.length,
+    });
+  } catch (err) {
+    console.error('Capture error:', err);
+    res.status(500).json({ error: `Capture failed: ${err.message}` });
+  }
+});
+
+// ── API: Remove a screenshot ──────────────────────────────────────
+app.post('/api/screenshots/remove', (req, res) => {
+  const { index } = req.body;
+  if (index < 0 || index >= session.screenshots.length) {
+    return res.status(400).json({ error: 'Invalid index' });
+  }
+  session.screenshots.splice(index, 1);
+  res.json({ ok: true, total: session.screenshots.length });
+});
+
+// ── API: Reorder screenshots ──────────────────────────────────────
+app.post('/api/screenshots/reorder', (req, res) => {
+  const { order } = req.body; // array of indices, e.g. [2, 0, 1, 3]
+  if (!order || !session.screenshots.length) {
+    return res.status(400).json({ error: 'No screenshots to reorder' });
+  }
+  session.screenshots = order.map(i => session.screenshots[i]);
+  res.json({ ok: true });
+});
+
+// ── API: Generate headlines ───────────────────────────────────────
+app.post('/api/headlines', async (req, res) => {
+  if (!session.screenshots.length || !session.brand) {
+    return res.status(400).json({ error: 'Run detect + screenshots first' });
+  }
+
+  try {
+    const configPath = path.join(session.projectPath, 'screencraft.config.js');
+    const config = fs.existsSync(configPath) ? require(configPath) : {};
+
+    const suggestions = await suggestHeadlines(
+      session.screenshots,
+      session.brand,
+      config
+    );
+
+    session.suggestions = suggestions;
+
+    res.json({ suggestions });
+  } catch (err) {
+    console.error('Headlines error:', err);
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ── API: Approve headlines ────────────────────────────────────────
+app.post('/api/approve', (req, res) => {
+  const { approvedTexts } = req.body;
+  // Array of { white, accent } per screenshot
+  if (!approvedTexts || !approvedTexts.length) {
+    return res.status(400).json({ error: 'Provide approvedTexts array' });
+  }
+  session.approvedTexts = approvedTexts;
+  res.json({ ok: true });
+});
+
+// ── API: Check license ────────────────────────────────────────────
+app.post('/api/license/check', async (req, res) => {
+  const key = req.body.key || getStoredKey();
+  if (!key) {
+    return res.json({ valid: false, tier: null, stored: false });
+  }
+
+  try {
+    const tier = await validateKey(key);
+    res.json({ valid: !!tier, tier, stored: !!getStoredKey() });
+  } catch (err) {
+    res.json({ valid: false, tier: null, error: err.message });
+  }
+});
+
+// ── API: Render ───────────────────────────────────────────────────
+app.post('/api/render', async (req, res) => {
+  if (!session.approvedTexts.length || !session.screenshots.length) {
+    return res.status(400).json({ error: 'Approve headlines first' });
+  }
+
+  const screenshotsOnly = req.body.screenshotsOnly !== false;
+
+  // Start render in background, respond immediately
+  session.renderStatus = { phase: 'compositing', progress: 0, message: 'Starting...' };
+  res.json({ started: true });
+
+  try {
+    // Composite PSD/PNGs
+    const psdOutputs = [];
+    for (let i = 0; i < session.screenshots.length; i++) {
+      const screen = session.screenshots[i];
+      const text   = session.approvedTexts[i];
+      const outPng = path.join(session.outputDir, 'screenshots', `screen_${String(i + 1).padStart(2, '0')}.png`);
+      const outPsd = path.join(session.outputDir, 'source',      `screen_${String(i + 1).padStart(2, '0')}.psd`);
+
+      session.renderStatus = {
+        phase: 'compositing',
+        progress: Math.round((i / session.screenshots.length) * 50),
+        message: `Compositing screen ${i + 1} of ${session.screenshots.length}...`,
+      };
+
+      await compositePSD({
+        templateName:   session.selectedTemplate === 'auto' ? null : session.selectedTemplate,
+        screenshotPath: screen.file,
+        headlineWhite:  text.white,
+        headlineAccent: text.accent,
+        brand:          session.brand,
+        font:           session.brand.font || {},
+        outputPng:      outPng,
+        outputPsd:      outPsd,
+        writePsd:       !screenshotsOnly,
+      });
+
+      psdOutputs.push({ png: outPng, psd: outPsd });
+    }
+
+    // Copy brand assets
+    const assetsDir = path.join(session.outputDir, 'brand');
+    fs.mkdirSync(assetsDir, { recursive: true });
+
+    const copyAsset = (src, destName) => {
+      try {
+        if (src && fs.existsSync(src)) {
+          fs.copyFileSync(src, path.join(assetsDir, destName));
+        }
+      } catch {}
+    };
+    copyAsset(session.brand.icon, `app-icon${path.extname(session.brand.icon || '.png')}`);
+    copyAsset(session.brand.logo, `logo${path.extname(session.brand.logo || '.png')}`);
+    if (session.brand.font?.file) copyAsset(session.brand.font.file, `font${path.extname(session.brand.font.file)}`);
+
+    session.renderStatus = { phase: 'compositing', progress: 50, message: 'Screenshots done' };
+
+    // Build outputs list
+    session.outputs = psdOutputs.map((o, i) => ({
+      type: 'screenshot',
+      index: i + 1,
+      png: o.png,
+      psd: o.psd,
+    }));
+
+    if (!screenshotsOnly) {
+      // AE project
+      session.renderStatus = { phase: 'ae-prep', progress: 60, message: 'Preparing After Effects project...' };
+
+      try {
+        const ae = await prepareAEProject({
+          brand:       session.brand,
+          texts:       session.approvedTexts,
+          screenshots: session.screenshots,
+          outputDir:   session.outputDir,
+          log,
+        });
+
+        if (ae.aepPath) {
+          session.outputs.push({ type: 'aep', path: ae.aepPath });
+
+          if (ae.canRender) {
+            session.renderStatus = { phase: 'rendering', progress: 70, message: 'Rendering video...' };
+
+            try {
+              const videoPath = await renderLocally({
+                aepPath:    ae.aepPath,
+                outputDir:  session.outputDir,
+                onProgress: (step) => {
+                  session.renderStatus.message = step;
+                },
+              });
+              session.outputs.push({ type: 'video', path: videoPath });
+            } catch (err) {
+              log.warn('Local render failed: ' + err.message);
+              session.outputs.push({ type: 'video-error', message: 'Open source/app-launch.aep in After Effects' });
+            }
+          }
+        }
+      } catch (err) {
+        log.warn('AE prep failed: ' + err.message);
+      }
+    }
+
+    session.renderStatus = { phase: 'done', progress: 100, message: 'Complete' };
+  } catch (err) {
+    console.error('Render error:', err);
+    session.renderStatus = { phase: 'error', progress: 0, message: err.message };
+  }
+});
+
+// ── API: Render status (polling) ──────────────────────────────────
+app.get('/api/render/status', (req, res) => {
+  res.json(session.renderStatus);
+});
+
+// ── API: Output files ─────────────────────────────────────────────
+app.get('/api/output', (req, res) => {
+  const files = session.outputs.map(o => {
+    if (o.type === 'screenshot' && o.png && fs.existsSync(o.png)) {
+      return {
+        type: 'screenshot',
+        index: o.index,
+        filename: path.basename(o.png),
+        url: `/api/output/file/${path.basename(o.png)}`,
+        hasPsd: o.psd && fs.existsSync(o.psd),
+        psdUrl: o.psd ? `/api/output/file/${path.basename(o.psd)}` : null,
+      };
+    }
+    if (o.type === 'video' && o.path && fs.existsSync(o.path)) {
+      return {
+        type: 'video',
+        filename: path.basename(o.path),
+        url: `/api/output/file/${path.basename(o.path)}`,
+      };
+    }
+    if (o.type === 'aep') {
+      return { type: 'aep', filename: 'app-launch.aep' };
+    }
+    if (o.type === 'video-error') {
+      return { type: 'video-error', message: o.message };
+    }
+    return null;
+  }).filter(Boolean);
+
+  res.json({ files, outputDir: session.outputDir });
+});
+
+// ── API: Serve output files ───────────────────────────────────────
+app.get('/api/output/file/:filename', (req, res) => {
+  if (!session.outputDir) return res.status(404).send('No output');
+  const filename = req.params.filename;
+
+  // Search in screenshots/, source/, video/
+  const dirs = ['screenshots', 'source', 'video', 'brand'];
+  for (const dir of dirs) {
+    const fp = path.join(session.outputDir, dir, filename);
+    if (fs.existsSync(fp)) {
+      return res.sendFile(fp);
+    }
+  }
+  res.status(404).send('File not found');
+});
+
+// ── API: Open output folder ───────────────────────────────────────
+app.post('/api/output/open', (req, res) => {
+  if (!session.outputDir) return res.status(400).json({ error: 'No output yet' });
+  const { exec } = require('child_process');
+  exec(`open "${session.outputDir}"`);
+  res.json({ ok: true });
+});
+
+// ── API: Session bootstrap (for MCP pre-populated data) ───────────
+app.get('/api/session', (req, res) => {
+  // Returns what MCP has already populated so frontend can skip ahead
+  const data = {
+    projectPath: session.projectPath,
+    skipToStep:  session._skipToStep || null,
+    hasBrand:    !!session.brand,
+    hasScreenshots: session.screenshots.length > 0,
+    hasHeadlines: session.approvedTexts.length > 0,
+    suggestedScreens: session._suggestedScreens || null,
+  };
+
+  if (session.brand) {
+    let iconBase64 = null;
+    if (session.brand.icon && fs.existsSync(session.brand.icon)) {
+      const ext = path.extname(session.brand.icon).slice(1) || 'png';
+      const buf = fs.readFileSync(session.brand.icon);
+      iconBase64 = `data:image/${ext};base64,${buf.toString('base64')}`;
+    }
+    data.brand = {
+      appName:    session.brand.appName,
+      primary:    session.brand.primary,
+      secondary:  session.brand.secondary,
+      accent:     session.brand.accent,
+      background: session.brand.background,
+      icon:       iconBase64,
+      font:       session.brand.font,
+      logo:       session.brand.logo ? true : false,
+    };
+    data.framework = session.framework ? {
+      name: session.framework.name,
+      platform: session.framework.platform,
+    } : null;
+  }
+
+  if (session.screenshots.length > 0) {
+    data.screenshots = session.screenshots.map((s, i) => {
+      let base64 = null;
+      if (s.file && fs.existsSync(s.file)) {
+        const buf = fs.readFileSync(s.file);
+        base64 = `data:image/png;base64,${buf.toString('base64')}`;
+      }
+      return {
+        index: s.index || i + 1,
+        label: s.label,
+        filename: path.basename(s.file),
+        base64,
+      };
+    });
+  }
+
+  if (session.approvedTexts.length > 0) {
+    data.headlines = session.approvedTexts;
+    data.suggestions = session.suggestions;
+  }
+
+  res.json(data);
+});
+
+// ── SPA fallback ──────────────────────────────────────────────────
+app.get('/{*path}', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+
+// ── Start ─────────────────────────────────────────────────────────
+function startServer() {
+  app.listen(PORT, () => {
+    console.log('');
+    console.log(`  ◆ ScreenCraft UI → http://localhost:${PORT}`);
+    console.log('');
+  });
+
+  // Auto-open browser
+  const { exec } = require('child_process');
+  exec(`open http://localhost:${PORT}`);
+}
+
+module.exports = { app, startServer };