From 4cb5fa68834d3e5bf170b931bac102550621322a Mon Sep 17 00:00:00 2001
From: Markus Graf <info@markusgraf.ch>
Date: Sun, 29 Mar 2026 21:19:38 +0200
Subject: [PATCH] feat(quick-260329-tk2): add companion instructions for
 practice and words phases

- Practice phase shows 'Jetzt kannst du ueben! Druecke die Taste zu dem Buchstaben, der herunterfaellt.' for 2.5s before exercise starts
- Words phase shows 'Jetzt kommen ganze Woerter! Tippe die Buchstaben nacheinander ein.' for 2.5s before exercise starts
- Both functions converted to async/await pattern matching existing discover phase
- Companion text cleared after delay before exercises begin
---
 src/ui/screens.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/ui/screens.ts b/src/ui/screens.ts
index 041d22c..25d8801 100644
--- a/src/ui/screens.ts
+++ b/src/ui/screens.ts
@@ -468,16 +468,28 @@ export function initLessonScreen(
 		companionText.textContent = "";
 	}
 
-	function runPracticePhase(): Promise<void> {
+	async function runPracticePhase(): Promise<void> {
 		setPhase("practice");
+		companionText.textContent =
+			"Jetzt kannst du ueben! Druecke die Taste zu dem Buchstaben, der herunterfaellt.";
+		companionArea.style.display = "flex";
+		await new Promise<void>((resolve) => setTimeout(resolve, 2500));
+		if (cancelled) return;
+		companionText.textContent = "";
 		const state = createExerciseState(level);
 		return new Promise<void>((resolve) => {
 			runLetterExercise(state, resolve);
 		});
 	}
 
-	function runWordsPhase(): Promise<void> {
+	async function runWordsPhase(): Promise<void> {
 		setPhase("words");
+		companionText.textContent =
+			"Jetzt kommen ganze Woerter! Tippe die Buchstaben nacheinander ein.";
+		companionArea.style.display = "flex";
+		await new Promise<void>((resolve) => setTimeout(resolve, 2500));
+		if (cancelled) return;
+		companionText.textContent = "";
 		const wordCount = 4;
 		let words: string[];
 		if (isReview) {
@@ -504,7 +516,7 @@ export function initLessonScreen(
 
 		if (words.length === 0) {
 			// Fallback: skip words phase if no words available
-			return Promise.resolve();
+			return;
 		}
 
 		const state = createWordExerciseState(words);