pi-design-deck 0.1.1 → 0.3.0

package/form/js/deck-session.js

@@ -41,11 +41,26 @@ function showSaveToast(message, isError) {
 	saveToastTimer = setTimeout(() => { toast.classList.add("hidden"); saveToastTimer = null; }, 3000);
 }
 
+function buildSelectedNotes() {
+	const notes = {};
+	for (const [slideId, noteData] of Object.entries(optionNotes)) {
+		if (noteData && selections[slideId] === noteData.label && noteData.notes) {
+			notes[slideId] = noteData.notes;
+		}
+	}
+	return notes;
+}
+
 async function saveDeck() {
 	if (isClosed) return;
 	try {
-		const result = await postJson("/save", { token: sessionToken, selections });
-		if (result.ok) showSaveToast(`Saved to ${result.relativePath}`);
+		const payload = { token: sessionToken, selections, notes: buildSelectedNotes() };
+		if (finalNotes) payload.finalNotes = finalNotes;
+		const result = await postJson("/save", payload);
+		if (result.ok) {
+			markSaved(new Date().toISOString());
+			showSaveToast(`Saved to ${result.relativePath}`);
+		}
 		else showSaveToast(result.error || "Save failed", true);
 	} catch {
 		showSaveToast("Save failed", true);
@@ -71,10 +86,11 @@ function stopHeartbeat() {
 function disableDeckInteractions() {
 	if (btnBack) btnBack.disabled = true;
 	if (btnNext) btnNext.disabled = true;
+	if (btnSave) btnSave.disabled = true;
 	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 +114,10 @@ async function submitDeck() {
 	}
 
 	try {
-		await postJson("/submit", { token: sessionToken, selections });
+		const notes = buildSelectedNotes();
+		const payload = { token: sessionToken, selections, notes };
+		if (finalNotes) payload.finalNotes = finalNotes;
+		await postJson("/submit", payload);
 		clearSelectionsStorage();
 		isClosed = true;
 		if (submitButton) {
@@ -242,16 +261,22 @@ 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);
 }
@@ -292,6 +317,7 @@ function insertGeneratedOption(slideId, option, model) {
 	if (current === totalSlides - 1) {
 		updateSummary();
 	}
+	markDirty();
 }
 
 function replaceSlideOptions(slideId, newOptions) {
@@ -301,6 +327,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 +336,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");
@@ -327,6 +366,7 @@ function replaceSlideOptions(slideId, newOptions) {
 	if (current === totalSlides - 1) {
 		updateSummary();
 	}
+	markDirty();
 }
 
 function connectEvents() {
@@ -343,9 +383,37 @@ function connectEvents() {
 		if (!payload || typeof payload.slideId !== "string" || !payload.option) {
 			return;
 		}
-		const model = pendingGenerate.get(payload.slideId)?.model || null;
-		restoreGenerateButton(payload.slideId);
+		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) => {
@@ -359,6 +427,8 @@ function connectEvents() {
 			restoreGenerateButton(payload.slideId);
 			if (payload.reason === "timeout") {
 				showSaveToast("Generation timed out — try again", true);
+			} else {
+				showSaveToast("Generation failed", true);
 			}
 		}
 	});
@@ -388,6 +458,8 @@ function connectEvents() {
 			restoreRegenButton(payload.slideId);
 			if (payload.reason === "timeout") {
 				showSaveToast("Regeneration timed out — try again", true);
+			} else {
+				showSaveToast("Regeneration failed", true);
 			}
 		}
 	});
@@ -415,7 +487,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)}"]`);
@@ -428,21 +500,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, model: selectedModel || null });
+	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;
@@ -470,8 +563,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");
@@ -482,7 +588,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 };
@@ -502,7 +608,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;
@@ -510,8 +616,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;
 }
@@ -539,6 +648,9 @@ function initSaveShortcut() {
 	document.querySelectorAll(".mod-key").forEach((el) => {
 		el.textContent = isMac ? "⌘" : "Ctrl";
 	});
+	if (btnSave) {
+		btnSave.addEventListener("click", () => saveDeck());
+	}
 	document.addEventListener("keydown", (e) => {
 		const mod = isMac ? e.metaKey : e.ctrlKey;
 		if (mod && e.key === "s") {
@@ -570,6 +682,7 @@ function init() {
 	fetchModels().then((data) => {
 		if (data) initModelBar(data);
 	});
+	updateSaveStatus();
 
 	document.addEventListener("keydown", handleKeydown);
 	window.addEventListener("beforeunload", sendCancelBeacon);

package/generate-prompts.ts

@@ -28,15 +28,15 @@ 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 deck_generate({ model: "${generateModel}", task: "..." }), then push with ${verb}.`;
+	const verb = action === "replace-options" ? "replace-options" : "add-options";
+	let hint = `\nGenerate 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,20 @@ 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";
 
 	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` +
-		`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}`
+		`YOU MUST generate ${count} distinctive additional ${optionWord} and call design_deck with add-options (one call with all options in an array). ` +
+		`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-options")}\n\n` +
+		`design_deck({\"action\":\"add-options\",\"slideId\":\"${slideId}\",\"options\":\"[${template}${count > 1 ? ", ..." : ""}]\"})` +
+		`\n\nThe options field must be a JSON string containing an array of ${count} option object${count > 1 ? "s" : ""}.\n` +
+		`Each option needs: label, optional description, optional aside (explanatory notes below preview), optional recommended, and either previewHtml or previewBlocks.\n` +
+		`${formatHint}` +
+		(count > 1 ? `\n\nMake each option distinctive — they should represent genuinely different approaches.` : "")
 	);
 }
 
@@ -75,9 +80,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` +