pi-design-deck 0.1.1 → 0.3.0

package/form/js/deck-core.js

@@ -21,8 +21,13 @@ let events = null;
 let heartbeatTimer = null;
 let isClosed = false;
 let isSubmitting = false;
+let isDirty = false;
+let lastSavedLabel = "";
+let isRestoringSelections = false;
 
 const selections = {};
+const optionNotes = {};
+let finalNotes = "";
 const pendingGenerate = new Map();
 let selectedModel = "";
 let selectedThinking = "off";
@@ -33,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 ───────────────────────────────────────────────
 
@@ -72,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 : {};
@@ -184,13 +232,23 @@ function initTheme() {
 const SELECTIONS_KEY = `pi-deck-${typeof deckData.sessionId === "string" ? deckData.sessionId : "unknown"}`;
 
 function saveSelectionsToStorage() {
-	try { localStorage.setItem(SELECTIONS_KEY, JSON.stringify(selections)); } catch {}
+	try { 
+		const data = { selections, optionNotes };
+		if (finalNotes) data.finalNotes = finalNotes;
+		localStorage.setItem(SELECTIONS_KEY, JSON.stringify(data)); 
+	} catch {}
 }
 
 function loadSelectionsFromStorage() {
 	try {
 		const saved = localStorage.getItem(SELECTIONS_KEY);
-		return saved ? JSON.parse(saved) : null;
+		if (!saved) return null;
+		const parsed = JSON.parse(saved);
+		// Handle both old format (just selections) and new format ({ selections, optionNotes })
+		if (parsed && typeof parsed === "object" && !parsed.selections) {
+			return { selections: parsed, optionNotes: {} };
+		}
+		return parsed;
 	} catch { return null; }
 }
 

package/form/js/deck-interact.js

@@ -1,15 +1,31 @@
 // ─── SELECTION ───────────────────────────────────────────────
 
-function applySavedSelections(saved) {
-	if (!saved || typeof saved !== "object") return;
-	for (const [slideId, label] of Object.entries(saved)) {
-		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;
+function applySavedSelections(savedSelections, savedNotes) {
+	if (!savedSelections || typeof savedSelections !== "object") return;
+	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") {
+		for (const [slideId, noteData] of Object.entries(savedNotes)) {
+			if (noteData && typeof noteData === "object" && noteData.label && noteData.notes) {
+				optionNotes[slideId] = noteData;
+				// Find and populate the textarea
+				const input = document.querySelector(`.option-notes-input[data-slide-id="${CSS.escape(slideId)}"][data-option-label="${CSS.escape(noteData.label)}"]`);
+				if (input) input.value = noteData.notes;
 			}
 		}
 	}
@@ -17,12 +33,28 @@ function applySavedSelections(saved) {
 
 function restoreSelections() {
 	const serverSaved = deckData.savedSelections;
-	if (serverSaved && typeof serverSaved === "object" && Object.keys(serverSaved).length > 0) {
-		applySavedSelections(serverSaved);
+	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();
-	if (stored) applySavedSelections(stored);
+	if (stored) {
+		applySavedSelections(stored.selections || stored, stored.optionNotes);
+		// Restore final notes if present
+		if (stored.finalNotes) {
+			finalNotes = stored.finalNotes;
+			const input = document.getElementById("final-notes-input");
+			if (input) input.value = stored.finalNotes;
+		}
+	}
 }
 
 function applySelectionClasses(slideElement, selectedElement) {
@@ -40,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 ──────────────────────────────────────────────
@@ -337,7 +374,8 @@ function initModelBar(modelsData) {
 	}
 
 	function syncDefaultCheck() {
-		defaultCheck.checked = modelsData.defaultModel != null && selectedModel === modelsData.defaultModel;
+		const effectiveModel = selectedModel || modelsData.current;
+		defaultCheck.checked = modelsData.defaultModel != null && effectiveModel === modelsData.defaultModel;
 	}
 
 	function activateProvider(provider) {
@@ -369,12 +407,18 @@ function initModelBar(modelsData) {
 	});
 
 	defaultCheck.addEventListener("change", async () => {
-		if (defaultCheck.checked && !selectedModel) { defaultCheck.checked = false; return; }
-		const model = defaultCheck.checked ? selectedModel : null;
+		// Use selectedModel, or fall back to current model when on "Current" pill
+		const modelToSave = selectedModel || modelsData.current;
+		if (defaultCheck.checked && !modelToSave) { defaultCheck.checked = false; return; }
+		const model = defaultCheck.checked ? modelToSave : null;
 		try {
 			await postJson("/save-model-default", { token: sessionToken, model });
 			modelsData.defaultModel = model;
-		} catch {}
+		} catch (err) {
+			console.error("Failed to save default model:", err);
+			// Revert checkbox to match actual state
+			syncDefaultCheck();
+		}
 	});
 
 	if (modelsData.defaultModel) {

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;
 	}
@@ -186,11 +190,48 @@ function createOptionCard(option, slideId, generatedBy) {
 		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();
+		markDirty();
+	});
+	
+	// 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);
@@ -207,10 +248,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";
@@ -231,8 +295,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);
@@ -301,6 +365,23 @@ 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();
+		markDirty();
+	});
+	finalNotesContainer.appendChild(finalNotesLabel);
+	finalNotesContainer.appendChild(finalNotesInput);
+	section.appendChild(finalNotesContainer);
+
 	const submitButton = createElement("button", "btn-generate", "Submit Selections");
 	submitButton.type = "button";
 	submitButton.id = "btn-generate";
@@ -382,10 +463,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;