feat(lesson-ux): progress chip + Run-shortcut hint + auto-focus next (#111)

Co-authored-by: Michael Czechowski <mail@dailysh.it>
Co-committed-by: Michael Czechowski <mail@dailysh.it>

Author: nextlevelshit

src/app.js

@@ -767,6 +767,14 @@ function loadCurrentLesson() {
 	// Render difficulty badge
 	renderDifficultyBadge(elements.lessonTitleRow, lesson);
 
+	// Update lesson-progress chip "<index+1> / <total>"
+	const lessonProgressEl = document.getElementById("lesson-progress");
+	if (lessonProgressEl && engineState.module?.lessons) {
+		const total = engineState.module.lessons.length;
+		const current = (engineState.lessonIndex || 0) + 1;
+		lessonProgressEl.textContent = total > 1 ? `${current} / ${total}` : "";
+	}
+
 	// Set user code in CodeMirror (clear history to prevent undo/redo across lessons)
 	// Pass codePrefix/codeSuffix as read-only zones for CSS mode
 	if (codeEditor) {
@@ -1041,6 +1049,15 @@ function runCode() {
 			}, isModuleComplete ? 8000 : 5000);
 		}
 
+		// Move keyboard focus to Next so Tab/Enter continues the flow.
+		// Skip if user disabled the auto-focus by hovering away — i.e.
+		// only when no other interactive element has focus.
+		if (elements.nextBtn && !elements.nextBtn.disabled) {
+			const active = document.activeElement;
+			const safe = !active || active === document.body || active.tagName === "TEXTAREA" || active === elements.runBtn;
+			if (safe) setTimeout(() => elements.nextBtn.focus({ preventScroll: true }), 100);
+		}
+
 		// Show success hint
 		showSuccessHint(validationResult.message || t("successMessage"));
 

src/index.html

@@ -425,6 +425,7 @@ <h4 data-i18n="footerSupport">Support</h4>
 					<section class="instructions">
 						<div class="lesson-title-row">
 							<h2 id="lesson-title"></h2>
+							<span id="lesson-progress" class="lesson-progress" aria-label="Lesson progress"></span>
 							<button id="share-btn" class="share-btn" data-i18n-title="shareTitle" title="Share lesson" aria-label="Share lesson">
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
@@ -464,7 +465,7 @@ <h2 id="lesson-title"></h2>
 											⟲
 										</button>
 									</div>
-									<button id="run-btn" class="btn btn-run"><img src="./gear.svg" alt="" /><span data-i18n="run">Run</span></button>
+									<button id="run-btn" class="btn btn-run" title="Ctrl+Enter"><img src="./gear.svg" alt="" /><span data-i18n="run">Run</span><span class="run-shortcut" aria-hidden="true"><kbd>Ctrl</kbd>+<kbd>↵</kbd></span></button>
 								</div>
 							</div>
 							<div class="editor-content">

src/main.css

@@ -4127,3 +4127,40 @@ body[data-section="javascript"] #lesson-title {
 .cta-button:focus-visible {
 	outline-offset: 3px;
 }
+
+/* ================= LESSON UX ================= */
+
+/* Module progress chip in lesson header — quiet, dependent on lesson */
+.lesson-progress {
+	font-size: 0.78rem;
+	font-weight: 500;
+	color: var(--text-secondary, #6b7280);
+	background: var(--bg-secondary, #f3f4f6);
+	padding: 2px 8px;
+	border-radius: 999px;
+	letter-spacing: 0.02em;
+	white-space: nowrap;
+}
+.lesson-progress:empty { display: none; }
+
+/* Run button keyboard shortcut hint */
+.run-shortcut {
+	margin-left: 0.6rem;
+	display: inline-flex;
+	gap: 0.15rem;
+	opacity: 0.7;
+	font-size: 0.8em;
+}
+.run-shortcut kbd {
+	background: rgba(255, 255, 255, 0.18);
+	border: 1px solid rgba(255, 255, 255, 0.28);
+	border-bottom-width: 2px;
+	padding: 0 5px;
+	border-radius: 3px;
+	font-family: inherit;
+	font-size: 0.95em;
+	line-height: 1.4;
+}
+@media (max-width: 720px) {
+	.run-shortcut { display: none; }
+}