/**
* 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 `
<div class="variant" data-variant="${label}">
<div class="variant-header">
<span class="variant-label">Option ${label}</span>
<span class="variant-desc" id="variant-desc-${label}">Design direction ${label}</span>
</div>
<img src="data:image/${ext};base64,${imgData}" alt="Option ${label}" />
<div class="variant-controls">
<label class="pick-label">
<input type="radio" name="preferred" value="${label}" />
<span class="pick-text">Pick</span>
<span class="pick-confirm" style="display:none;">We'll move forward with Option ${label}</span>
</label>
<div class="stars" data-variant="${label}">
${[1,2,3,4,5].map(n => `<span class="star" data-value="${n}">★</span>`).join("")}
</div>
<input type="text" class="feedback-input" data-variant="${label}"
placeholder="What do you like/dislike?" />
<button class="more-like-this" data-variant="${label}">More like this</button>
</div>
</div>`;
}).join("\n");
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Design Exploration</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
background: #fff;
color: #333;
}
.header {
padding: 16px 24px;
border-bottom: 1px solid #e5e5e5;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 { font-size: 16px; font-weight: 600; }
.header .meta { font-size: 13px; color: #999; display: flex; align-items: center; gap: 12px; }
.view-toggle {
display: flex;
gap: 2px;
background: #f0f0f0;
border-radius: 6px;
padding: 2px;
}
.view-toggle button {
padding: 4px 10px;
border: none;
background: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
color: #666;
font-weight: 500;
}
.view-toggle button.active {
background: #fff;
color: #333;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.variants { max-width: 1400px; margin: 0 auto; padding: 20px 24px; }
.variants.grid-view {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.variants.grid-view .variant {
border-bottom: none;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 20px;
}
.variants.grid-view .variant-controls {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.variants.grid-view .variant-controls .pick-label {
padding: 8px 0 4px;
}
.variants.grid-view .feedback-input { min-width: 0; width: 100%; }
.variants.grid-view .more-like-this { align-self: flex-start; }
.variants.grid-view .variant-header { margin-bottom: 12px; }
.variant-header {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 12px;
}
.variant-label {
font-size: 15px;
font-weight: 700;
color: #111;
letter-spacing: -0.01em;
}
.variant-desc {
font-size: 13px;
color: #888;
}
.pick-confirm {
font-size: 13px;
color: #2a7d2a;
font-weight: 500;
margin-left: 4px;
}
.variant {
border-bottom: 1px solid #e5e5e5;
padding: 24px 0;
}
.variant:last-child { border-bottom: none; }
.variant img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.variant-controls {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 0 0;
flex-wrap: wrap;
}
.pick-label {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
}
.pick-label input[type="radio"] { accent-color: #000; }
.stars { display: flex; gap: 2px; }
.star {
font-size: 20px;
color: #ddd;
cursor: pointer;
user-select: none;
transition: color 0.1s;
}
.star.filled { color: #000; }
.star:hover { color: #666; }
.feedback-input {
flex: 1;
min-width: 200px;
padding: 6px 10px;
border: 1px solid #e5e5e5;
border-radius: 4px;
font-size: 13px;
outline: none;
}
.feedback-input:focus { border-color: #999; }
.feedback-input::placeholder { color: #999; }
.more-like-this {
padding: 6px 12px;
background: none;
border: 1px solid #e5e5e5;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
color: #666;
}
.more-like-this:hover { border-color: #999; color: #333; }
.bottom-section {
max-width: 1400px;
margin: 0 auto;
padding: 24px 24px 32px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 24px;
}
.submit-column {}
.submit-column h3 {
font-size: 15px;
font-weight: 700;
color: #111;
margin-bottom: 4px;
}
.submit-column .direction-hint {
font-size: 13px;
color: #888;
margin-bottom: 10px;
line-height: 1.5;
}
.overall-textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #e5e5e5;
border-radius: 6px;
font-size: 13px;
resize: vertical;
min-height: 80px;
outline: none;
font-family: inherit;
line-height: 1.5;
}
.overall-textarea:focus { border-color: #999; }
.submit-status {
font-size: 14px;
font-weight: 600;
color: #111;
margin: 12px 0;
min-height: 20px;
}
.submit-btn {
padding: 10px 24px;
background: #000;
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
width: 100%;
}
.submit-btn:hover { background: #333; }
.submit-btn:disabled { background: #ccc; cursor: not-allowed; }
.regen-column {
background: #f7f7f7;
border-radius: 8px;
padding: 20px;
}
.regen-column h3 {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 12px;
}
.regen-controls {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 10px;
}
.regen-chiclet {
padding: 6px 14px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 16px;
font-size: 13px;
cursor: pointer;
}
.regen-chiclet:hover { border-color: #999; }
.regen-chiclet.active { border-color: #000; background: #f0f0f0; }
.regen-custom {
width: 100%;
padding: 8px 10px;
border: 1px solid #e5e5e5;
border-radius: 6px;
font-size: 13px;
outline: none;
margin-bottom: 10px;
}
.regen-custom:focus { border-color: #999; }
.regen-btn {
padding: 8px 16px;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
font-weight: 600;
width: 100%;
}
.regen-btn:hover { border-color: #000; }
.success-msg {
display: none;
max-width: 1200px;
margin: 24px auto;
padding: 16px 24px;
background: #f0f9f0;
border: 1px solid #c3e6c3;
border-radius: 4px;
font-size: 14px;
text-align: center;
}
/* Hidden result elements for agent polling */
#status, #feedback-result { display: none; }
/* Skeleton loading state */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
height: 400px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
</head>
<body>
<div class="header">
<h1>Design Exploration</h1>
<span class="meta">
${images.length} options
<span class="view-toggle">
<button class="active" data-view="list">Large</button>
<button data-view="grid">Grid</button>
</span>
</span>
</div>
<div class="variants">
${variantCards}
</div>
<div class="bottom-section">
<div class="submit-column">
<h3>Overall direction</h3>
<p class="direction-hint">e.g. "Use A's layout with C's fox icon" or "Make it more minimal" or "I want the problem statement text but bigger"</p>
<textarea class="overall-textarea" id="overall-feedback"
placeholder="Combine elements, request changes, or describe what you want..."></textarea>
<div class="submit-status" id="submit-status"></div>
<button class="submit-btn" id="submit-btn">Take my feedback and continue →</button>
</div>
<div class="regen-column">
<h3>Want to explore more?</h3>
<div class="regen-controls">
<button class="regen-chiclet" data-action="different">Totally different</button>
<button class="regen-chiclet" data-action="match">Match my design</button>
</div>
<input type="text" class="regen-custom" id="regen-custom-input"
placeholder="Tell us what you want different..." />
<button class="regen-btn" id="regen-btn">Regenerate →</button>
</div>
</div>
<div class="success-msg" id="success-msg">
Feedback submitted! Return to your coding agent.
</div>
<!-- Hidden elements for agent polling -->
<div id="status"></div>
<div id="feedback-result"></div>
<script>
// View toggle
document.querySelectorAll('.view-toggle button').forEach(function(btn) {
btn.addEventListener('click', function() {
document.querySelectorAll('.view-toggle button').forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
var variants = document.querySelector('.variants');
if (btn.dataset.view === 'grid') {
variants.classList.add('grid-view');
} else {
variants.classList.remove('grid-view');
}
});
});
// Pick confirmation
document.querySelectorAll('input[name="preferred"]').forEach(function(radio) {
radio.addEventListener('change', function() {
// Hide all confirmations first
document.querySelectorAll('.pick-confirm').forEach(function(el) { el.style.display = 'none'; });
document.querySelectorAll('.pick-text').forEach(function(el) { el.style.display = ''; });
// Show confirmation on the selected one
var label = radio.closest('.pick-label');
label.querySelector('.pick-text').style.display = 'none';
label.querySelector('.pick-confirm').style.display = '';
// Update submit status
document.getElementById('submit-status').textContent = "We'll run with Option " + radio.value;
});
});
// Star rating
document.querySelectorAll('.stars').forEach(starsEl => {
const stars = starsEl.querySelectorAll('.star');
let rating = 0;
stars.forEach(star => {
star.addEventListener('click', () => {
rating = parseInt(star.dataset.value);
stars.forEach(s => {
s.classList.toggle('filled', parseInt(s.dataset.value) <= rating);
});
});
});
});
// Regenerate chiclets (toggle active)
document.querySelectorAll('.regen-chiclet').forEach(chiclet => {
chiclet.addEventListener('click', () => {
document.querySelectorAll('.regen-chiclet').forEach(c => c.classList.remove('active'));
chiclet.classList.add('active');
});
});
// More like this buttons
document.querySelectorAll('.more-like-this').forEach(btn => {
btn.addEventListener('click', () => {
const variant = btn.dataset.variant;
// Set regeneration context
document.querySelectorAll('.regen-chiclet').forEach(c => c.classList.remove('active'));
document.getElementById('regen-custom-input').value = 'More like variant ' + variant;
// Trigger regenerate
submitRegenerate('more_like_' + variant);
});
});
// Regenerate button
document.getElementById('regen-btn').addEventListener('click', () => {
const activeChiclet = document.querySelector('.regen-chiclet.active');
const customInput = document.getElementById('regen-custom-input').value;
const action = activeChiclet ? activeChiclet.dataset.action : 'custom';
const detail = customInput || action;
submitRegenerate(detail);
});
function postFeedback(feedback) {
if (!window.__GSTACK_SERVER_URL) return Promise.resolve(null);
return fetch(window.__GSTACK_SERVER_URL + '/api/feedback', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(feedback),
}).then(function(r) { return r.json(); }).catch(function() { return null; });
}
function disableAllInputs() {
document.querySelectorAll('input, button, textarea, .star, .regen-chiclet').forEach(function(el) {
el.disabled = true;
el.style.pointerEvents = 'none';
el.style.opacity = '0.5';
});
}
function showPostSubmitState() {
disableAllInputs();
var _regenBar = document.querySelector('.regenerate-bar') || document.querySelector('.regen-column');
if (_regenBar) _regenBar.style.display = 'none';
document.getElementById('submit-btn').style.display = 'none';
document.getElementById('success-msg').style.display = 'block';
document.getElementById('success-msg').innerHTML =
'Feedback received! Return to your coding agent.' +
'<br><small style="color:#666;margin-top:8px;display:block;">Want to make more changes? Run <code>/design-shotgun</code> again.</small>';
}
function showRegeneratingState() {
disableAllInputs();
document.querySelector('.variants').innerHTML =
'<div style="text-align:center;padding:80px 24px;color:#666;">' +
'<div style="font-size:24px;margin-bottom:12px;">Generating new designs...</div>' +
'<div class="skeleton" style="width:60px;height:60px;border-radius:50%;margin:0 auto;"></div>' +
'</div>';
var _regenBar = document.querySelector('.regenerate-bar') || document.querySelector('.regen-column');
if (_regenBar) _regenBar.style.display = 'none';
var _submitBar = document.querySelector('.submit-bar') || document.querySelector('.submit-column');
if (_submitBar) _submitBar.style.display = 'none';
var _overallSec = document.querySelector('.overall-section') || document.querySelector('.bottom-section');
if (_overallSec) _overallSec.style.display = 'none';
startProgressPolling();
}
function startProgressPolling() {
if (!window.__GSTACK_SERVER_URL) return;
var pollCount = 0;
var maxPolls = 150; // 5 min at 2s intervals
var pollInterval = setInterval(function() {
pollCount++;
if (pollCount >= maxPolls) {
clearInterval(pollInterval);
document.querySelector('.variants').innerHTML =
'<div style="text-align:center;padding:80px 24px;color:#666;">' +
'<div style="font-size:18px;margin-bottom:8px;">Something went wrong.</div>' +
'<div>Run <code>/design-shotgun</code> again in your coding agent.</div>' +
'</div>';
return;
}
fetch(window.__GSTACK_SERVER_URL + '/api/progress')
.then(function(r) { return r.json(); })
.then(function(data) {
if (data.status === 'serving') {
clearInterval(pollInterval);
window.location.reload();
}
})
.catch(function() {
// Server gone, stop polling
clearInterval(pollInterval);
document.querySelector('.variants').innerHTML =
'<div style="text-align:center;padding:80px 24px;color:#666;">' +
'<div style="font-size:18px;margin-bottom:8px;">Connection lost.</div>' +
'<div>Run <code>/design-shotgun</code> again in your coding agent.</div>' +
'</div>';
});
}, 2000);
}
function showPostFailure(feedback) {
disableAllInputs();
var json = JSON.stringify(feedback, null, 2);
document.getElementById('success-msg').style.display = 'block';
document.getElementById('success-msg').innerHTML =
'<div style="color:#c00;margin-bottom:8px;">Connection lost. Copy your feedback below and paste it in your coding agent:</div>' +
'<pre style="text-align:left;background:#f5f5f5;padding:12px;border-radius:4px;font-size:12px;overflow-x:auto;cursor:pointer;" onclick="navigator.clipboard.writeText(this.textContent)">' +
json.replace(/</g, '<') + '</pre>' +
'<small style="color:#666;">Click to copy</small>';
}
function submitRegenerate(detail) {
var feedback = collectFeedback();
feedback.regenerated = true;
feedback.regenerateAction = detail;
document.getElementById('feedback-result').textContent = JSON.stringify(feedback);
document.getElementById('status').textContent = 'regenerate';
postFeedback(feedback).then(function(result) {
if (result && result.received) {
showRegeneratingState();
} else if (window.__GSTACK_SERVER_URL) {
showPostFailure(feedback);
}
});
}
// Submit button
document.getElementById('submit-btn').addEventListener('click', function() {
var feedback = collectFeedback();
feedback.regenerated = false;
document.getElementById('feedback-result').textContent = JSON.stringify(feedback);
document.getElementById('status').textContent = 'submitted';
postFeedback(feedback).then(function(result) {
if (result && result.received) {
showPostSubmitState();
} else if (window.__GSTACK_SERVER_URL) {
showPostFailure(feedback);
} else {
// DOM-only mode (legacy / test)
document.getElementById('submit-btn').disabled = true;
document.getElementById('success-msg').style.display = 'block';
}
});
});
function collectFeedback() {
const preferred = document.querySelector('input[name="preferred"]:checked');
const ratings = {};
const comments = {};
document.querySelectorAll('.variant').forEach(v => {
const variant = v.dataset.variant;
const stars = v.querySelectorAll('.star.filled');
ratings[variant] = stars.length;
const input = v.querySelector('.feedback-input');
if (input && input.value) {
comments[variant] = input.value;
}
});
return {
preferred: preferred ? preferred.value : null,
ratings,
comments,
overall: document.getElementById('overall-feedback').value || null,
};
}
</script>
</body>
</html>`;
}
/**
* 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 }));
}