/** * Generate HTML comparison board for user review of design variants. * Opens in headed Chrome via $B goto. User picks favorite, rates, comments, submits. * Agent reads feedback from hidden DOM element. * * Design spec: single column, full-width mockups, APP UI aesthetic. */ import fs from "fs"; import path from "path"; export interface CompareOptions { images: string[]; output: string; } /** * Generate the comparison board HTML page. */ export function generateCompareHtml(images: string[]): string { const variantLabels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const variantCards = images.map((imgPath, i) => { const label = variantLabels[i] || `${i + 1}`; // Embed images as base64 data URIs for self-contained HTML const imgData = fs.readFileSync(imgPath).toString("base64"); const ext = path.extname(imgPath).slice(1) || "png"; return `
Variant ${label}
${[1,2,3,4,5].map(n => `★`).join("")}
`; }).join("\n"); return ` Design Exploration

Design Exploration

${images.length} variants
${variantCards}
Overall direction (optional)

Want to explore more?

Feedback submitted! Return to your coding agent.
`; } /** * Compare command: generate comparison board HTML from image files. */ export function compare(options: CompareOptions): void { const html = generateCompareHtml(options.images); const outputDir = path.dirname(options.output); fs.mkdirSync(outputDir, { recursive: true }); fs.writeFileSync(options.output, html); console.log(JSON.stringify({ outputPath: options.output, variants: options.images.length })); }