pi-design-deck 0.2.0 → 0.3.1

package/form/js/deck-core.js

@@ -21,6 +21,9 @@ let events = null;
 let heartbeatTimer = null;
 let isClosed = false;
 let isSubmitting = false;
+let isDirty = false;
+let lastSavedLabel = "";
+let isRestoringSelections = false;
 
 const selections = {};
 const optionNotes = {};
@@ -35,6 +38,8 @@ const progressFill = document.getElementById("progress-fill");
 const slidesWrap = document.getElementById("slides-wrap");
 const btnBack = document.getElementById("btn-back");
 const btnNext = document.getElementById("btn-next");
+const btnSave = document.getElementById("btn-save");
+const saveStatus = document.getElementById("save-status");
 
 // ─── UTILITIES ───────────────────────────────────────────────
 
@@ -74,6 +79,47 @@ function setMetaLabel() {
 	deckTitle.textContent = title;
 }
 
+function formatSavedTimestamp(value) {
+	try {
+		return new Date(value).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+	} catch {
+		return "";
+	}
+}
+
+function updateSaveStatus() {
+	if (saveStatus) {
+		if (isDirty) {
+			saveStatus.textContent = "Unsaved changes";
+			saveStatus.classList.add("dirty");
+			saveStatus.classList.remove("saved");
+		} else if (lastSavedLabel) {
+			saveStatus.textContent = `Saved ${lastSavedLabel}`;
+			saveStatus.classList.add("saved");
+			saveStatus.classList.remove("dirty");
+		} else {
+			saveStatus.textContent = "No unsaved changes";
+			saveStatus.classList.remove("dirty", "saved");
+		}
+	}
+	if (btnSave) {
+		btnSave.disabled = isClosed;
+		btnSave.classList.toggle("dirty", isDirty);
+	}
+}
+
+function markDirty() {
+	if (isClosed) return;
+	isDirty = true;
+	updateSaveStatus();
+}
+
+function markSaved(savedAt) {
+	isDirty = false;
+	lastSavedLabel = formatSavedTimestamp(savedAt || new Date().toISOString());
+	updateSaveStatus();
+}
+
 // ─── THEME SYSTEM ────────────────────────────────────────────
 
 const themeConfig = deckData && typeof deckData === "object" && deckData.theme && typeof deckData.theme === "object" ? deckData.theme : {};
@@ -181,6 +227,78 @@ function initTheme() {
 	}
 }
 
+// ─── LAYOUT TOGGLE ───────────────────────────────────────────
+
+const LAYOUT_KEY = "pi-deck-layout";
+
+function getStoredLayout() {
+	try {
+		const value = localStorage.getItem(LAYOUT_KEY);
+		return value === "1" || value === "2" || value === "3" || value === "4" ? value : null;
+	} catch { return null; }
+}
+
+function setStoredLayout(value) {
+	try {
+		if (!value) {
+			localStorage.removeItem(LAYOUT_KEY);
+		} else {
+			localStorage.setItem(LAYOUT_KEY, value);
+		}
+	} catch {}
+}
+
+function applyLayout(cols) {
+	const deck = document.querySelector(".deck");
+	if (!deck) return;
+	if (cols) {
+		deck.dataset.layout = cols;
+	} else {
+		delete deck.dataset.layout;
+	}
+}
+
+function updateLayoutButtons(activeCols) {
+	const toggle = document.getElementById("layout-toggle");
+	if (!toggle) return;
+	toggle.querySelectorAll(".layout-btn").forEach((btn) => {
+		const isActive = btn.dataset.cols === activeCols;
+		btn.classList.toggle("active", isActive);
+		btn.setAttribute("aria-pressed", isActive ? "true" : "false");
+		// Update title to show "Auto" hint when clicking would reset
+		const cols = btn.dataset.cols;
+		btn.title = isActive ? `${cols} column${cols === "1" ? "" : "s"} (click for auto)` : `${cols} column${cols === "1" ? "" : "s"}`;
+	});
+}
+
+function initLayoutToggle() {
+	const stored = getStoredLayout();
+	if (stored) {
+		applyLayout(stored);
+		updateLayoutButtons(stored);
+	}
+
+	const toggle = document.getElementById("layout-toggle");
+	if (!toggle) return;
+
+	toggle.addEventListener("click", (event) => {
+		const btn = event.target.closest(".layout-btn");
+		if (!btn) return;
+		const cols = btn.dataset.cols;
+		const current = getStoredLayout();
+		if (cols === current) {
+			// Clicking active button toggles back to auto
+			setStoredLayout(null);
+			applyLayout(null);
+			updateLayoutButtons(null);
+		} else {
+			setStoredLayout(cols);
+			applyLayout(cols);
+			updateLayoutButtons(cols);
+		}
+	});
+}
+
 // ─── SELECTION PERSISTENCE ────────────────────────────────────
 
 const SELECTIONS_KEY = `pi-deck-${typeof deckData.sessionId === "string" ? deckData.sessionId : "unknown"}`;

package/form/js/deck-interact.js

@@ -2,16 +2,21 @@
 
 function applySavedSelections(savedSelections, savedNotes) {
 	if (!savedSelections || typeof savedSelections !== "object") return;
-	for (const [slideId, label] of Object.entries(savedSelections)) {
-		if (typeof label !== "string") continue;
-		const slideEl = document.querySelector(`.slide[data-id="${CSS.escape(slideId)}"]`);
-		if (!slideEl) continue;
-		for (const card of slideEl.querySelectorAll(".option")) {
-			if (card.dataset.value === label) {
-				selectOption(card);
-				break;
+	isRestoringSelections = true;
+	try {
+		for (const [slideId, label] of Object.entries(savedSelections)) {
+			if (typeof label !== "string") continue;
+			const slideEl = document.querySelector(`.slide[data-id="${CSS.escape(slideId)}"]`);
+			if (!slideEl) continue;
+			for (const card of slideEl.querySelectorAll(".option")) {
+				if (card.dataset.value === label) {
+					selectOption(card);
+					break;
+				}
 			}
 		}
+	} finally {
+		isRestoringSelections = false;
 	}
 	// Restore notes
 	if (savedNotes && typeof savedNotes === "object") {
@@ -28,8 +33,16 @@ function applySavedSelections(savedSelections, savedNotes) {
 
 function restoreSelections() {
 	const serverSaved = deckData.savedSelections;
-	if (serverSaved && typeof serverSaved === "object" && Object.keys(serverSaved).length > 0) {
-		applySavedSelections(serverSaved, null);
+	const hasServerSavedSelections = serverSaved && typeof serverSaved === "object" && Object.keys(serverSaved).length > 0;
+	const hasServerSavedNotes = deckData.savedNotes && typeof deckData.savedNotes === "object" && Object.keys(deckData.savedNotes).length > 0;
+	const hasServerFinalNotes = typeof deckData.savedFinalNotes === "string" && deckData.savedFinalNotes.trim() !== "";
+	if (hasServerSavedSelections || hasServerSavedNotes || hasServerFinalNotes) {
+		applySavedSelections(hasServerSavedSelections ? serverSaved : null, deckData.savedNotes || null);
+		if (deckData.savedFinalNotes) {
+			finalNotes = deckData.savedFinalNotes;
+			const input = document.getElementById("final-notes-input");
+			if (input) input.value = deckData.savedFinalNotes;
+		}
 		return;
 	}
 	const stored = loadSelectionsFromStorage();
@@ -59,10 +72,15 @@ function selectOption(optionElement) {
 	if (!slideElement) return;
 	const slideId = slideElement.dataset.id;
 	if (!slideId || slideId === "summary") return;
+	const nextValue = optionElement.dataset.value || "";
+	if (selections[slideId] === nextValue) return;
 
 	applySelectionClasses(slideElement, optionElement);
-	selections[slideId] = optionElement.dataset.value || "";
-	saveSelectionsToStorage();
+	selections[slideId] = nextValue;
+	if (!isRestoringSelections) {
+		saveSelectionsToStorage();
+		markDirty();
+	}
 }
 
 // ─── NAVIGATION ──────────────────────────────────────────────

package/form/js/deck-render.js

@@ -222,6 +222,7 @@ function createOptionCard(option, slideId, generatedBy) {
 			delete optionNotes[slideId];
 		}
 		saveSelectionsToStorage();
+		markDirty();
 	});
 	
 	// Prevent click from bubbling to card (which would select it)
@@ -375,6 +376,7 @@ function createSummarySlide(index) {
 	finalNotesInput.addEventListener("input", (e) => {
 		finalNotes = e.target.value.trim();
 		saveSelectionsToStorage();
+		markDirty();
 	});
 	finalNotesContainer.appendChild(finalNotesLabel);
 	finalNotesContainer.appendChild(finalNotesInput);

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,6 +86,7 @@ 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;
 	});
@@ -98,13 +114,7 @@ async function submitDeck() {
 	}
 
 	try {
-		// 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 notes = buildSelectedNotes();
 		const payload = { token: sessionToken, selections, notes };
 		if (finalNotes) payload.finalNotes = finalNotes;
 		await postJson("/submit", payload);
@@ -307,6 +317,7 @@ function insertGeneratedOption(slideId, option, model) {
 	if (current === totalSlides - 1) {
 		updateSummary();
 	}
+	markDirty();
 }
 
 function replaceSlideOptions(slideId, newOptions) {
@@ -355,6 +366,7 @@ function replaceSlideOptions(slideId, newOptions) {
 	if (current === totalSlides - 1) {
 		updateSummary();
 	}
+	markDirty();
 }
 
 function connectEvents() {
@@ -495,6 +507,7 @@ async function generateMore(button, slideId, input, countSelect) {
 	const skeletons = [];
 	for (let i = 0; i < count; i++) {
 		const skeleton = createElement("div", "option-skeleton");
+		skeleton.innerHTML = '<div class="spinner"></div>';
 		optionsGrid.appendChild(skeleton);
 		skeletons.push(skeleton);
 	}
@@ -551,7 +564,7 @@ async function regenerateSlide(button, slideId) {
 	const prompt = input ? input.value.trim() : "";
 	if (input) input.value = "";
 
-	// Create skeleton overlay
+	// Create skeleton overlay with centered spinner
 	const optionCount = slide.options?.length || 2;
 	const colClass = optionsGrid.classList.contains("cols-3") ? "cols-3" :
 	                 optionsGrid.classList.contains("cols-1") ? "cols-1" : "cols-2";
@@ -559,8 +572,9 @@ async function regenerateSlide(button, slideId) {
 	for (let i = 0; i < optionCount; i++) {
 		overlay.appendChild(createElement("div", "regen-skeleton"));
 	}
-	const status = createElement("div", "regen-status", "Regenerating options...");
-	overlay.appendChild(status);
+	const center = createElement("div", "regen-center");
+	center.innerHTML = '<div class="spinner"></div><div class="regen-center-text">Regenerating options...</div>';
+	overlay.appendChild(center);
 
 	// Position overlay relative to options grid
 	optionsGrid.style.position = "relative";
@@ -636,6 +650,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") {
@@ -655,6 +672,7 @@ function hideLoadingOverlay() {
 
 function init() {
 	initTheme();
+	initLayoutToggle();
 	setMetaLabel();
 	renderSlides();
 	restoreSelections();
@@ -667,6 +685,7 @@ function init() {
 	fetchModels().then((data) => {
 		if (data) initModelBar(data);
 	});
+	updateSaveStatus();
 
 	document.addEventListener("keydown", handleKeydown);
 	window.addEventListener("beforeunload", sendCancelBeacon);

package/generate-prompts.ts

@@ -28,8 +28,8 @@ 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}".`;
 	}
@@ -56,20 +56,18 @@ export function buildGenerateMoreResult(slideId: string, slide: DeckSlide | unde
 	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 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` +
-		`${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` +
+		`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\nRemember: Call add-option ${count} times, each with a different option. Make each option distinctive.` : "")
+		(count > 1 ? `\n\nMake each option distinctive — they should represent genuinely different approaches.` : "")
 	);
 }