pi-design-deck 0.2.0 → 0.3.0

package/form/css/controls.css

@@ -423,11 +423,61 @@
 .btn-nav:focus-visible,
 .btn-gen-more:focus-visible,
 .btn-generate:focus-visible,
+.deck-save-btn:focus-visible,
 .confirm-bar-btn:focus-visible {
   outline: 2px solid var(--dk-accent);
   outline-offset: 2px;
 }
 
+/* ─────────────────────────────────────────────────────────────
+   SAVE CONTROLS
+   ───────────────────────────────────────────────────────────── */
+
+.deck-save-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(var(--dk-ink),0.16);
+  background: rgba(var(--dk-ink),0.06);
+  color: var(--dk-text-secondary);
+  font: 11px var(--dk-font-mono);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+
+.deck-save-btn:hover {
+  border-color: rgba(138,190,183,0.28);
+  color: var(--dk-accent-text);
+  background: rgba(138,190,183,0.08);
+}
+
+.deck-save-btn.dirty {
+  border-color: rgba(251,191,36,0.28);
+  color: var(--dk-status-warn);
+  background: rgba(251,191,36,0.08);
+}
+
+.deck-save-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.deck-save-status {
+  font: 11px var(--dk-font-mono);
+  color: var(--dk-text-hint);
+  white-space: nowrap;
+}
+
+.deck-save-status.saved {
+  color: var(--dk-status-success);
+}
+
+.deck-save-status.dirty {
+  color: var(--dk-status-warn);
+}
+
 .deck {
   touch-action: manipulation;
   overscroll-behavior: contain;
@@ -451,6 +501,7 @@
   .slide { padding: 20px 16px 16px; }
   .summary-grid { grid-template-columns: 1fr; }
   .pv-layout-sidebar { grid-template-columns: 120px 1fr; }
+  .deck-save-status { display: none; }
 }
 
 /* ─────────────────────────────────────────────────────────────

package/form/deck.html

@@ -45,6 +45,8 @@
 				<span class="deck-key"><kbd>1</kbd><kbd>2</kbd><kbd>3</kbd> Select</span>
 				<span class="deck-key"><kbd>Enter</kbd> Confirm</span>
 				<span class="deck-key"><kbd class="mod-key">⌘</kbd><kbd>S</kbd> Save</span>
+				<button class="deck-save-btn" id="btn-save" type="button">Save</button>
+				<span class="deck-save-status" id="save-status" role="status" aria-live="polite">No unsaved changes</span>
 				<span class="deck-key hidden" id="theme-shortcut"></span>
 			</div>
 			<button class="btn-nav primary" id="btn-next" type="button">Next &rarr;</button>

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 : {};

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() {
@@ -636,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") {
@@ -667,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,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.` : "")
 	);
 }