pi-design-deck 0.1.0 → 0.2.0

package/form/js/deck-render.js

@@ -114,6 +114,10 @@ function applyPreviewHtml(preview, previewHtml) {
 		if (dataset.fonts) {
 			preview.dataset.fonts = dataset.fonts;
 		}
+		// Copy inline styles from source preview div
+		if (first.style.cssText) {
+			preview.style.cssText = first.style.cssText;
+		}
 		preview.innerHTML = first.innerHTML;
 		return;
 	}
@@ -142,12 +146,12 @@ function optionHint(count) {
 	return `Choose one - press ${parts.join(" ")} or click`;
 }
 
-function createOptionCard(option, slideId, generated) {
+function createOptionCard(option, slideId, generatedBy) {
 	const card = createElement("div", "option");
 	card.setAttribute("role", "radio");
 	card.setAttribute("aria-checked", "false");
 	card.tabIndex = 0;
-	if (generated) {
+	if (generatedBy !== false) {
 		card.classList.add("option-generated");
 	}
 	card.dataset.value = option.label;
@@ -164,8 +168,10 @@ function createOptionCard(option, slideId, generated) {
 	const label = createElement("span", "option-label", option.label);
 	header.appendChild(label);
 
-	if (generated) {
-		header.appendChild(createElement("span", "badge-generated", "Generated"));
+	if (generatedBy !== false) {
+		const modelShort = generatedBy ? generatedBy.split("/").pop() : null;
+		const badgeText = modelShort ? `Generated by ${modelShort}` : "Generated";
+		header.appendChild(createElement("span", "badge-generated", badgeText));
 	} else if (option.recommended) {
 		header.appendChild(createElement("span", "rec-badge", "Recommended"));
 	}
@@ -184,11 +190,47 @@ function createOptionCard(option, slideId, generated) {
 		el.tabIndex = -1;
 	});
 
+	// Footer contains aside (optional) + notes input
+	const footer = createElement("div", "option-footer");
+
 	if (option.aside) {
 		const aside = createElement("div", "option-aside");
-		aside.innerHTML = escapeHtml(option.aside).replace(/\n/g, "<br>");
-		card.appendChild(aside);
+		// Handle both actual newlines and literal \n sequences
+		aside.innerHTML = escapeHtml(option.aside).replace(/\\n/g, "<br>").replace(/\n/g, "<br>");
+		footer.appendChild(aside);
+	}
+
+	// Notes input for user instructions
+	const notesContainer = createElement("div", "option-notes");
+	const notesLabel = createElement("label", "option-notes-label", "Your notes (optional)");
+	const notesInput = createElement("textarea", "option-notes-input");
+	notesInput.placeholder = "Add notes...";
+	notesInput.rows = 1;
+	notesInput.dataset.slideId = slideId;
+	notesInput.dataset.optionLabel = option.label;
+	
+	// Restore saved notes if this option was previously selected with notes
+	if (optionNotes[slideId]?.label === option.label && optionNotes[slideId]?.notes) {
+		notesInput.value = optionNotes[slideId].notes;
 	}
+	
+	notesInput.addEventListener("input", (e) => {
+		const value = e.target.value.trim();
+		if (value) {
+			optionNotes[slideId] = { label: option.label, notes: value };
+		} else if (optionNotes[slideId]?.label === option.label) {
+			delete optionNotes[slideId];
+		}
+		saveSelectionsToStorage();
+	});
+	
+	// Prevent click from bubbling to card (which would select it)
+	notesInput.addEventListener("click", (e) => e.stopPropagation());
+	
+	notesContainer.appendChild(notesLabel);
+	notesContainer.appendChild(notesInput);
+	footer.appendChild(notesContainer);
+	card.appendChild(footer);
 
 	if (option.description) {
 		card.setAttribute("title", option.description);
@@ -205,10 +247,33 @@ function createGenerateBar(slideId) {
 	const bar = createElement("div", "gen-bar");
 
 	const row = createElement("div", "gen-row");
+	
+	// Generate button with separate count selector
+	const genGroup = createElement("div", "gen-group");
 	const button = createElement("button", "btn-gen-more");
 	button.type = "button";
 	button.appendChild(createElement("span", "btn-gen-plus", "+"));
-	button.appendChild(document.createTextNode(" Generate another option"));
+	button.appendChild(document.createTextNode("Generate"));
+	
+	const countSelect = document.createElement("select");
+	countSelect.className = "gen-count";
+	countSelect.setAttribute("aria-label", "Number of options to generate");
+	[1, 2, 3].forEach((n) => {
+		const opt = document.createElement("option");
+		opt.value = n;
+		opt.textContent = n;
+		countSelect.appendChild(opt);
+	});
+	
+	const countLabel = createElement("span", "gen-count-label", "option");
+	countSelect.addEventListener("change", () => {
+		const count = parseInt(countSelect.value, 10);
+		countLabel.textContent = count === 1 ? "option" : "options";
+	});
+	
+	genGroup.appendChild(button);
+	genGroup.appendChild(countSelect);
+	genGroup.appendChild(countLabel);
 
 	const regenButton = createElement("button", "btn-regen");
 	regenButton.type = "button";
@@ -229,8 +294,8 @@ function createGenerateBar(slideId) {
 		e.stopPropagation();
 	});
 
-	button.addEventListener("click", () => generateMore(button, slideId, input));
-	row.appendChild(button);
+	button.addEventListener("click", () => generateMore(button, slideId, input, countSelect));
+	row.appendChild(genGroup);
 	row.appendChild(regenButton);
 	row.appendChild(input);
 	bar.appendChild(row);
@@ -299,6 +364,22 @@ function createSummarySlide(index) {
 	summaryGrid.id = "summary-grid";
 	section.appendChild(summaryGrid);
 
+	// Final instructions textarea
+	const finalNotesContainer = createElement("div", "final-notes");
+	const finalNotesLabel = createElement("label", "final-notes-label", "Additional instructions (optional)");
+	finalNotesLabel.setAttribute("for", "final-notes-input");
+	const finalNotesInput = createElement("textarea", "final-notes-input");
+	finalNotesInput.id = "final-notes-input";
+	finalNotesInput.placeholder = "Add any final notes or instructions for implementation...";
+	finalNotesInput.rows = 2;
+	finalNotesInput.addEventListener("input", (e) => {
+		finalNotes = e.target.value.trim();
+		saveSelectionsToStorage();
+	});
+	finalNotesContainer.appendChild(finalNotesLabel);
+	finalNotesContainer.appendChild(finalNotesInput);
+	section.appendChild(finalNotesContainer);
+
 	const submitButton = createElement("button", "btn-generate", "Submit Selections");
 	submitButton.type = "button";
 	submitButton.id = "btn-generate";
@@ -380,10 +461,18 @@ function createSummaryCard(slide) {
 				const text = selectedOption.aside.length > 120
 					? selectedOption.aside.slice(0, 120).trimEnd() + "..."
 					: selectedOption.aside;
-				aside.textContent = text;
+				aside.innerHTML = escapeHtml(text).replace(/\\n/g, "<br>").replace(/\n/g, "<br>");
 				card.appendChild(aside);
 			}
 		}
+
+		// Show user notes if present
+		const noteData = optionNotes[slide.id];
+		if (noteData && noteData.label === selectedLabel && noteData.notes) {
+			const notesDisplay = createElement("div", "summary-notes");
+			notesDisplay.innerHTML = `<span class="summary-notes-label">Your notes:</span> ${escapeHtml(noteData.notes)}`;
+			card.appendChild(notesDisplay);
+		}
 	}
 
 	return card;

package/form/js/deck-session.js

@@ -74,7 +74,7 @@ function disableDeckInteractions() {
 	document.querySelectorAll(".btn-gen-more, .btn-regen").forEach((button) => {
 		button.disabled = true;
 	});
-	document.querySelectorAll(".gen-prompt").forEach((input) => {
+	document.querySelectorAll(".gen-prompt, .gen-count").forEach((input) => {
 		input.disabled = true;
 	});
 	document.querySelectorAll(".model-pill, .model-list-item, .model-default-check").forEach((el) => {
@@ -98,7 +98,16 @@ async function submitDeck() {
 	}
 
 	try {
-		await postJson("/submit", { token: sessionToken, selections });
+		// Build notes object with only notes for selected options
+		const notes = {};
+		for (const [slideId, noteData] of Object.entries(optionNotes)) {
+			if (noteData && selections[slideId] === noteData.label && noteData.notes) {
+				notes[slideId] = noteData.notes;
+			}
+		}
+		const payload = { token: sessionToken, selections, notes };
+		if (finalNotes) payload.finalNotes = finalNotes;
+		await postJson("/submit", payload);
 		clearSelectionsStorage();
 		isClosed = true;
 		if (submitButton) {
@@ -242,33 +251,39 @@ function restoreGenerateButton(slideId) {
 	const pending = pendingGenerate.get(slideId);
 	if (!pending || pending.isRegen) return;
 
-	if (pending.skeleton && pending.skeleton.parentElement) {
-		pending.skeleton.remove();
+	// Clear timeout if any
+	if (pending.timeoutId) clearTimeout(pending.timeoutId);
+
+	// Remove all skeletons from DOM (query directly, don't rely on array)
+	const slideElement = document.querySelector(`.slide[data-id="${CSS.escape(slideId)}"]`);
+	if (slideElement) {
+		slideElement.querySelectorAll(".option-skeleton").forEach((skel) => skel.remove());
 	}
+	
 	pending.button.classList.remove("loading");
 	const plus = pending.button.querySelector(".btn-gen-plus");
 	if (plus) plus.textContent = "+";
-	if (pending.button.childNodes[1]) {
-		pending.button.childNodes[1].textContent = pending.originalText;
-	}
+	pending.button.lastChild.textContent = "Generate";
+	
 	if (pending.input && !isClosed) pending.input.disabled = false;
+	if (pending.countSelect && !isClosed) pending.countSelect.disabled = false;
 
 	pendingGenerate.delete(slideId);
 }
 
-function updateDimmedStateAfterInsert(slideElement, slideId, insertedOption) {
+function reapplySelectionAfterInsert(slideElement, slideId) {
 	const selected = selections[slideId];
 	if (!selected) return;
-	insertedOption.classList.add("dimmed");
 	const selectedEl = Array.from(slideElement.querySelectorAll(".option")).find(
 		(el) => el.dataset.value === selected
 	);
 	if (selectedEl) {
 		selectedEl.classList.add("selected");
+		selectedEl.setAttribute("aria-checked", "true");
 	}
 }
 
-function insertGeneratedOption(slideId, option) {
+function insertGeneratedOption(slideId, option, model) {
 	const slide = slides.find((entry) => entry.id === slideId);
 	if (!slide) return;
 	slide.options.push(option);
@@ -281,9 +296,9 @@ function insertGeneratedOption(slideId, option) {
 
 	optionsGrid.className = `options ${optionCountClass(slide.options.length, slide.columns)}`;
 
-	const optionCard = createOptionCard(option, slideId, true);
+	const optionCard = createOptionCard(option, slideId, model);
 	optionsGrid.appendChild(optionCard);
-	updateDimmedStateAfterInsert(slideElement, slideId, optionCard);
+	reapplySelectionAfterInsert(slideElement, slideId);
 	equalizeBlockHeights(slideElement);
 
 	const pick = slideElement.querySelector(".slide-pick");
@@ -301,6 +316,7 @@ function replaceSlideOptions(slideId, newOptions) {
 	slide.options = newOptions;
 
 	delete selections[slideId];
+	delete optionNotes[slideId];
 	saveSelectionsToStorage();
 
 	const slideElement = document.querySelector(`.slide[data-id="${CSS.escape(slideId)}"]`);
@@ -309,16 +325,28 @@ function replaceSlideOptions(slideId, newOptions) {
 	const optionsGrid = slideElement.querySelector(".options");
 	if (!optionsGrid) return;
 
+	// Remove regeneration overlay and state
+	const overlay = optionsGrid.querySelector(".regen-overlay");
+	if (overlay) overlay.remove();
+	optionsGrid.classList.remove("regenerating");
+	optionsGrid.style.position = "";
+
 	optionsGrid.innerHTML = "";
-	optionsGrid.style.opacity = "";
-	optionsGrid.style.pointerEvents = "";
 	optionsGrid.className = `options ${optionCountClass(newOptions.length, slide.columns)}`;
 
 	newOptions.forEach((option) => {
 		const card = createOptionCard(option, slideId, false);
+		card.classList.add("option-regenerated");
 		optionsGrid.appendChild(card);
 	});
 
+	// Remove animation class after animation completes
+	setTimeout(() => {
+		optionsGrid.querySelectorAll(".option-regenerated").forEach((el) => {
+			el.classList.remove("option-regenerated");
+		});
+	}, 500);
+
 	equalizeBlockHeights(slideElement);
 
 	const pick = slideElement.querySelector(".slide-pick");
@@ -343,8 +371,37 @@ function connectEvents() {
 		if (!payload || typeof payload.slideId !== "string" || !payload.option) {
 			return;
 		}
-		restoreGenerateButton(payload.slideId);
-		insertGeneratedOption(payload.slideId, payload.option);
+		const pending = pendingGenerate.get(payload.slideId);
+		const model = pending?.model || null;
+		
+		// Remove one skeleton
+		if (pending?.skeletons?.length > 0) {
+			const skel = pending.skeletons.shift();
+			if (skel.parentElement) skel.remove();
+		}
+		
+		insertGeneratedOption(payload.slideId, payload.option, model);
+		
+		// Track received count and restore button when all received
+		if (pending) {
+			pending.receivedCount = (pending.receivedCount || 0) + 1;
+			if (pending.receivedCount >= (pending.expectedCount || 1)) {
+				restoreGenerateButton(payload.slideId);
+			} else {
+				// Reset timeout for next option
+				if (pending.timeoutId) clearTimeout(pending.timeoutId);
+				pending.timeoutId = setTimeout(() => {
+					const current = pendingGenerate.get(payload.slideId);
+					if (!current || current.isRegen) return;
+					const received = current.receivedCount || 0;
+					const expected = current.expectedCount || 1;
+					restoreGenerateButton(payload.slideId);
+					if (received < expected) {
+						showSaveToast(`Generated ${received} of ${expected} options`, true);
+					}
+				}, 30000);
+			}
+		}
 	});
 
 	events.addEventListener("generate-failed", (event) => {
@@ -358,6 +415,8 @@ function connectEvents() {
 			restoreGenerateButton(payload.slideId);
 			if (payload.reason === "timeout") {
 				showSaveToast("Generation timed out — try again", true);
+			} else {
+				showSaveToast("Generation failed", true);
 			}
 		}
 	});
@@ -387,6 +446,8 @@ function connectEvents() {
 			restoreRegenButton(payload.slideId);
 			if (payload.reason === "timeout") {
 				showSaveToast("Regeneration timed out — try again", true);
+			} else {
+				showSaveToast("Regeneration failed", true);
 			}
 		}
 	});
@@ -414,7 +475,7 @@ function connectEvents() {
 	});
 }
 
-async function generateMore(button, slideId, input) {
+async function generateMore(button, slideId, input, countSelect) {
 	if (isClosed || pendingGenerate.size > 0) return;
 
 	const slideElement = document.querySelector(`.slide[data-id="${CSS.escape(slideId)}"]`);
@@ -427,21 +488,42 @@ async function generateMore(button, slideId, input) {
 
 	const prompt = input ? input.value.trim() : "";
 	if (input) input.value = "";
+	
+	const count = countSelect ? parseInt(countSelect.value, 10) || 1 : 1;
+
+	// Create skeletons for each option being generated
+	const skeletons = [];
+	for (let i = 0; i < count; i++) {
+		const skeleton = createElement("div", "option-skeleton");
+		optionsGrid.appendChild(skeleton);
+		skeletons.push(skeleton);
+	}
 
-	const skeleton = createElement("div", "option-skeleton");
-	optionsGrid.appendChild(skeleton);
-
-	const originalText = button.childNodes[1] ? button.childNodes[1].textContent || "" : "";
 	button.classList.add("loading");
 	const plus = button.querySelector(".btn-gen-plus");
 	if (plus) plus.textContent = "";
-	if (button.childNodes[1]) button.childNodes[1].textContent = " Generating...";
+	button.lastChild.textContent = "Generating...";
 	if (input) input.disabled = true;
+	if (countSelect) countSelect.disabled = true;
+
+	// Set timeout for generation (30s per option)
+	const timeoutId = setTimeout(() => {
+		const pending = pendingGenerate.get(slideId);
+		if (pending && !pending.isRegen) {
+			const received = pending.receivedCount || 0;
+			restoreGenerateButton(slideId);
+			if (received === 0) {
+				showSaveToast("Generation timed out — try again", true);
+			} else {
+				showSaveToast(`Generated ${received} of ${count} options`, true);
+			}
+		}
+	}, 30000 * count);
 
-	pendingGenerate.set(slideId, { button, skeleton, originalText, input });
+	pendingGenerate.set(slideId, { button, skeletons, input, countSelect, model: selectedModel || null, expectedCount: count, receivedCount: 0, timeoutId });
 
 	try {
-		const body = { token: sessionToken, slideId };
+		const body = { token: sessionToken, slideId, count };
 		if (prompt) body.prompt = prompt;
 		if (hasModelBar) {
 			body.model = selectedModel;
@@ -469,8 +551,21 @@ async function regenerateSlide(button, slideId) {
 	const prompt = input ? input.value.trim() : "";
 	if (input) input.value = "";
 
-	optionsGrid.style.opacity = "0.4";
-	optionsGrid.style.pointerEvents = "none";
+	// Create skeleton overlay
+	const optionCount = slide.options?.length || 2;
+	const colClass = optionsGrid.classList.contains("cols-3") ? "cols-3" :
+	                 optionsGrid.classList.contains("cols-1") ? "cols-1" : "cols-2";
+	const overlay = createElement("div", `regen-overlay ${colClass}`);
+	for (let i = 0; i < optionCount; i++) {
+		overlay.appendChild(createElement("div", "regen-skeleton"));
+	}
+	const status = createElement("div", "regen-status", "Regenerating options...");
+	overlay.appendChild(status);
+
+	// Position overlay relative to options grid
+	optionsGrid.style.position = "relative";
+	optionsGrid.classList.add("regenerating");
+	optionsGrid.appendChild(overlay);
 
 	const originalText = button.textContent || "";
 	button.classList.add("loading");
@@ -481,7 +576,7 @@ async function regenerateSlide(button, slideId) {
 	const genMoreBtn = slideElement.querySelector(".btn-gen-more");
 	if (genMoreBtn) genMoreBtn.disabled = true;
 
-	pendingGenerate.set(slideId, { button, originalText, input, isRegen: true, optionsGrid, genMoreBtn });
+	pendingGenerate.set(slideId, { button, originalText, input, isRegen: true, optionsGrid, genMoreBtn, overlay });
 
 	try {
 		const body = { token: sessionToken, slideId };
@@ -501,7 +596,7 @@ function restoreRegenButton(slideId) {
 	if (!pending || !pending.isRegen) return;
 	pendingGenerate.delete(slideId);
 
-	const { button, originalText, input, optionsGrid, genMoreBtn } = pending;
+	const { button, originalText, input, optionsGrid, genMoreBtn, overlay } = pending;
 	if (button) {
 		button.classList.remove("loading");
 		button.disabled = false;
@@ -509,8 +604,11 @@ function restoreRegenButton(slideId) {
 	}
 	if (input) input.disabled = false;
 	if (optionsGrid) {
-		optionsGrid.style.opacity = "";
-		optionsGrid.style.pointerEvents = "";
+		optionsGrid.classList.remove("regenerating");
+		optionsGrid.style.position = "";
+	}
+	if (overlay && overlay.parentElement) {
+		overlay.remove();
 	}
 	if (genMoreBtn) genMoreBtn.disabled = false;
 }

package/generate-prompts.ts

@@ -29,14 +29,14 @@ function optionTemplate(hasBlocks: boolean): string {
 function modelHints(generateModel?: string, thinking?: string, action?: string): string {
 	if (!generateModel) return "";
 	const verb = action === "replace-options" ? "replace-options" : "add-option";
-	let hint = `\nGenerate ${verb === "replace-options" ? "options " : ""}using model "${generateModel}" via subagent({ agent: "generator", model: "${generateModel}", output: false }), then push with ${verb}.`;
+	let hint = `\nGenerate ${verb === "replace-options" ? "options " : ""}using deck_generate({ model: "${generateModel}", task: "..." }), then push with ${verb}.`;
 	if (thinking && thinking !== "off") {
 		hint += `\nUse thinking level: "${thinking}".`;
 	}
 	return hint;
 }
 
-export function buildGenerateMoreResult(slideId: string, slide: DeckSlide | undefined, prompt?: string, generateModel?: string, thinking?: string): string {
+export function buildGenerateMoreResult(slideId: string, slide: DeckSlide | undefined, prompt?: string, generateModel?: string, thinking?: string, count: number = 1): string {
 	const title = slide?.title ?? slideId;
 	const context = slide?.context ? `\nContext: ${slide.context}` : "";
 
@@ -54,15 +54,22 @@ export function buildGenerateMoreResult(slideId: string, slide: DeckSlide | unde
 	const { hasBlocks, formatHint } = formatHintForSlide(slide);
 	const template = optionTemplate(hasBlocks);
 	const userInstructions = prompt ? `\nUser instructions: "${prompt}"` : "";
+	
+	const optionWord = count === 1 ? "option" : "options";
+	const callInstructions = count === 1
+		? `YOU MUST generate one distinctive additional option and call design_deck with add-option.`
+		: `YOU MUST generate ${count} distinctive additional options. Call design_deck with add-option ${count} times (once per option).`;
 
 	return (
-		"The design deck is still open.\n\n" +
-		`User requested another option for slide \"${title}\".${context}${userInstructions}\n\n` +
+		"The design deck is still open and waiting for your response.\n\n" +
+		`User clicked "Generate ${count} ${optionWord}" for slide \"${title}\".${context}${userInstructions}\n\n` +
 		`Existing options:\n${existingText}\n\n` +
-		`Generate one distinctive additional option and call design_deck again:${modelHints(generateModel, thinking, "add-option")}\n\n` +
+		`${callInstructions} ` +
+		`Do not skip this step or decide the user has enough options — they explicitly requested ${count === 1 ? "another one" : `${count} more`}.${modelHints(generateModel, thinking, "add-option")}\n\n` +
 		`design_deck({\"action\":\"add-option\",\"slideId\":\"${slideId}\",\"option\":${JSON.stringify(template)}})\n\n` +
 		`The option field must be a JSON string with: label, optional description, optional aside (explanatory notes below preview), and optional recommended.\n` +
-		`${formatHint}`
+		`${formatHint}` +
+		(count > 1 ? `\n\nRemember: Call add-option ${count} times, each with a different option. Make each option distinctive.` : "")
 	);
 }
 
@@ -75,9 +82,10 @@ export function buildRegenerateResult(slideId: string, slide: DeckSlide | undefi
 	const userInstructions = prompt ? `\nUser instructions: "${prompt}"` : "";
 
 	return (
-		"The design deck is still open.\n\n" +
-		`User requested ALL options be regenerated for slide \"${title}\".${context}${userInstructions}\n\n` +
-		`Generate ${optionCount} fresh, distinctive options and call design_deck to replace all existing options:${modelHints(generateModel, thinking, "replace-options")}\n\n` +
+		"The design deck is still open and waiting for your response.\n\n" +
+		`User clicked "Regenerate all" for slide \"${title}\".${context}${userInstructions}\n\n` +
+		`YOU MUST generate ${optionCount} fresh, distinctive options and call design_deck with replace-options. ` +
+		`Do not skip this step — the user explicitly requested regeneration.${modelHints(generateModel, thinking, "replace-options")}\n\n` +
 		`design_deck({\"action\":\"replace-options\",\"slideId\":\"${slideId}\",\"options\":\"[${template}, ...]\"})` +
 		`\n\nThe options field must be a JSON string containing an array of ${optionCount} option objects.\n` +
 		`Each option needs: label, optional description, optional aside, optional recommended, and either previewHtml or previewBlocks.\n` +