feat: improve playground UX and fix undo/redo across lessons

- Add dice SVG icon for random template button
- Reset button now restores last loaded template in playground
- Clear editor history when switching lessons (prevents cross-lesson undo)
- Add playground link to goodbye lesson
- Center icon buttons with flexbox

🤖 Generated with [Claude Code](https://claude.com/claude-code)

src/app.js

@@ -27,7 +27,8 @@ const state = {
 		skipResetCodeConfirmation: false
 	},
 	showExpected: false,
-	animationTimeout: null
+	animationTimeout: null,
+	lastPlaygroundTemplate: null
 };
 
 // Track CodeMirror views for cleanup
@@ -579,9 +580,9 @@ function loadCurrentLesson() {
 		lesson
 	);
 
-	// Set user code in CodeMirror
+	// Set user code in CodeMirror (clear history to prevent undo/redo across lessons)
 	if (codeEditor) {
-		codeEditor.setValue(engineState.userCode);
+		codeEditor.setValueAndClearHistory(engineState.userCode);
 	}
 
 	// Update Run button text based on completion status
@@ -731,9 +732,17 @@ function resetCode() {
 	// Reset editor to initial code for current lesson
 	lessonEngine.reset();
 	const engineState = lessonEngine.getCurrentState();
+	const isPlayground = engineState.lesson?.mode === "playground";
 	track("reset_code", { module: engineState.module?.id, lesson: engineState.lessonIndex });
+
 	if (codeEditor && engineState.lesson) {
-		codeEditor.setValue(engineState.lesson.initialCode || "");
+		// In playground mode, restore the last template if available
+		if (isPlayground && state.lastPlaygroundTemplate) {
+			codeEditor.setValue(state.lastPlaygroundTemplate.code);
+			lessonEngine.applyUserCode(state.lastPlaygroundTemplate.code, true);
+		} else {
+			codeEditor.setValue(engineState.lesson.initialCode || "");
+		}
 	}
 	// Clear hints and success indicators
 	clearHint();
@@ -755,6 +764,7 @@ function loadRandomTemplate() {
 	const template = getRandomTemplate();
 	if (codeEditor && template) {
 		track("playground_template", { template: template.name });
+		state.lastPlaygroundTemplate = template;
 		codeEditor.setValue(template.code);
 		// Apply the code to the preview
 		lessonEngine.applyUserCode(template.code, true);

src/impl/CodeEditor.js

@@ -183,7 +183,7 @@ export class CodeEditor {
 	}
 
 	/**
-	 * Set editor value
+	 * Set editor value (preserves history)
 	 */
 	setValue(value) {
 		if (!this.view) return;
@@ -197,6 +197,13 @@ export class CodeEditor {
 		});
 	}
 
+	/**
+	 * Set editor value and clear history (for lesson switching)
+	 */
+	setValueAndClearHistory(value) {
+		this.init(value);
+	}
+
 	/**
 	 * Set editor mode (html or css)
 	 */

src/index.html

@@ -245,7 +245,7 @@
 										>
 											⟲
 										</button>
-										<button id="random-template-btn" class="btn btn-icon hidden" title="Load random template">🎲</button>
+										<button id="random-template-btn" class="btn btn-icon hidden" title="Load random template"><img src="./dice.svg" alt="" /></button>
 									</div>
 									<button id="run-btn" class="btn btn-run"><img src="./gear.svg" alt="" /><span data-i18n="run">Run</span></button>
 								</div>

src/main.css

@@ -1154,6 +1154,9 @@ button.lesson-list-item {
 }
 
 .btn-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	padding: 4px 8px;
 	font-size: 1rem;
 	min-width: 32px;
@@ -1168,6 +1171,13 @@ button.lesson-list-item {
 	border-color: var(--primary-color);
 }
 
+.btn-icon img {
+	width: 1rem;
+	height: 1rem;
+	margin: 0;
+	display: block;
+}
+
 .editor-tools {
 	display: flex;
 	gap: 4px;