From 2b11586efea2cbdcd25410b8f77327f4f8147702 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 19 Jul 2026 15:36:34 +0000
Subject: [PATCH 1/3] feat: show step counts on workshop entry path and
 scenario cards

- Precompute step counts per entry path (using default scenario) at
  build time and show them in the route badge on entry path cards
- Precompute step counts for all journey+scenario combinations at build
  time and embed in the manifest JSON
- Add a `data-workshop-step-count` route badge to scenario cards
- In the client-side render() loop, populate scenario card step counts
  dynamically based on the currently selected journey, so users see the
  exact step count for each scenario before they select it

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
---
 .../workshop/WorkshopExperience.astro         | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/workshop/WorkshopExperience.astro b/docs/src/components/workshop/WorkshopExperience.astro
index dda8248b150..d0701822fe4 100644
--- a/docs/src/components/workshop/WorkshopExperience.astro
+++ b/docs/src/components/workshop/WorkshopExperience.astro
@@ -362,6 +362,27 @@ const workshopSteps: WorkshopStep[] = await Promise.all(workshopEntries.map(asyn
 const initialFlow = buildWorkshopFlow(workshopDefaults.journeyId, workshopDefaults.scenarioId);
 const initialStepKey = initialFlow[0] ?? workshopSteps[0]?.key ?? '';
 const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ?? workshopSteps[0];
+
+// Precompute step counts for entry path cards using the default scenario (estimate shown before scenario is selected).
+const entryPathStepCounts: Record<string, number> = Object.fromEntries(
+	workshopEntryPaths.map((path) => [
+		path.id,
+		buildWorkshopFlow(path.journeyId, workshopDefaults.scenarioId).length,
+	]),
+);
+
+// Precompute step counts for every journey + scenario combination for the scenario picker.
+const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Object.fromEntries(
+	workshopJourneys.map((journey) => [
+		journey.id,
+		Object.fromEntries(
+			workshopScenarios.map((scenario) => [
+				scenario.id,
+				buildWorkshopFlow(journey.id, scenario.id).length,
+			]),
+		),
+	]),
+);
 ---
 
 <section
@@ -390,7 +411,7 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
 						>
 							<span class="aw-workshop-card-icon" set:html={iconSvg(path.icon)} />
 							<span class="aw-workshop-card-kicker">{path.kicker}</span>
-							<span class="aw-workshop-card-route">{journey.label}</span>
+							<span class="aw-workshop-card-route">{entryPathStepCounts[path.id]} steps</span>
 							<strong class="aw-workshop-card-title">{path.label}</strong>
 							<span class="aw-workshop-card-summary">{path.summary}</span>
 							<small class="aw-workshop-card-fit">{path.fit}</small>
@@ -416,6 +437,7 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
 						>
 							<span class="aw-workshop-card-icon" set:html={iconSvg(scenario.icon)} />
 							<span class="aw-workshop-card-kicker">{scenario.kicker}</span>
+							<span class="aw-workshop-card-route" data-workshop-step-count></span>
 							<strong class="aw-workshop-card-title">{scenario.label}</strong>
 							<span class="aw-workshop-card-summary">{firstSentence(scenario.summary)}</span>
 						</button>
@@ -508,6 +530,7 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
 			journeys: workshopJourneys,
 			scenarios: workshopScenarios,
 			scenarioAdventures: workshopScenarioAdventures,
+			scenarioStepCountsByJourney,
 		})}
 	/>
 	<script is:inline>
@@ -835,6 +858,15 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
 					const isActive = button.getAttribute('data-workshop-scenario') === state.scenarioId;
 					button.classList.toggle('is-active', isActive);
 					button.setAttribute('aria-pressed', String(isActive));
+
+					const stepCountEl = button.querySelector('[data-workshop-step-count]');
+					if (stepCountEl) {
+						const scenarioId = button.getAttribute('data-workshop-scenario');
+						const count = (manifest.scenarioStepCountsByJourney || {})[state.journeyId]?.[scenarioId];
+						if (count != null) {
+							stepCountEl.textContent = `${count} steps`;
+						}
+					}
 				});
 
 				const flowIndex = visibleFlow.indexOf(activeStep.key);

From 39a386ec9973ccf5406f58fbe521961a738af618 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 19 Jul 2026 15:37:34 +0000
Subject: [PATCH 2/3] fix: add null guard for scenarioId and hide empty
 step-count badge with CSS

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
---
 .../src/components/workshop/WorkshopExperience.astro | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/workshop/WorkshopExperience.astro b/docs/src/components/workshop/WorkshopExperience.astro
index d0701822fe4..9d53d8f1a01 100644
--- a/docs/src/components/workshop/WorkshopExperience.astro
+++ b/docs/src/components/workshop/WorkshopExperience.astro
@@ -862,9 +862,11 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
 					const stepCountEl = button.querySelector('[data-workshop-step-count]');
 					if (stepCountEl) {
 						const scenarioId = button.getAttribute('data-workshop-scenario');
-						const count = (manifest.scenarioStepCountsByJourney || {})[state.journeyId]?.[scenarioId];
-						if (count != null) {
-							stepCountEl.textContent = `${count} steps`;
+						if (scenarioId) {
+							const count = (manifest.scenarioStepCountsByJourney || {})[state.journeyId]?.[scenarioId];
+							if (count != null) {
+								stepCountEl.textContent = `${count} steps`;
+							}
 						}
 					}
 				});
@@ -1145,6 +1147,10 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
 		white-space: nowrap;
 	}
 
+	.aw-workshop-card-route:empty {
+		display: none;
+	}
+
 	.aw-workshop-card-scenario {
 		--aw-workshop-card-accent: var(--sl-color-accent-low);
 	}

From 3baaada1a5a7f53ce961646bc22bdbc20d1c551c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 19 Jul 2026 16:02:09 +0000
Subject: [PATCH 3/3] feat: add step progress bar to mobile tutorial view

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
---
 .../workshop/WorkshopExperience.astro         | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/docs/src/components/workshop/WorkshopExperience.astro b/docs/src/components/workshop/WorkshopExperience.astro
index 9d53d8f1a01..75fd6ee142e 100644
--- a/docs/src/components/workshop/WorkshopExperience.astro
+++ b/docs/src/components/workshop/WorkshopExperience.astro
@@ -480,6 +480,7 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
 				<div class="aw-workshop-panel-heading">
 					<p class="aw-workshop-panel-meta" data-workshop-step-position>Step 1</p>
 					<p class="aw-workshop-panel-summary" data-workshop-step-summary>{initialStep?.summary ?? 'Start with the welcome step, then follow the path selected above.'}</p>
+					<progress class="aw-workshop-step-progress" data-workshop-step-progress max="100" value="0" aria-label="Workshop step progress"></progress>
 				</div>
 				<div class="aw-workshop-panel-actions">
 					<button type="button" class="aw-workshop-inline-button aw-workshop-inline-button-home" data-workshop-home>
@@ -689,6 +690,7 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
 			const nextButton = root.querySelector('[data-workshop-next]');
 			const stepBodyContainer = root.querySelector('[data-workshop-step-content]');
 			const stepSummary = root.querySelector('[data-workshop-step-summary]');
+			const stepProgressEl = root.querySelector('[data-workshop-step-progress]');
 			let setupStep = 'workspace';
 
 			const showSetupStep = (stepName, opts = {}) => {
@@ -844,6 +846,12 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
 				stepSummary.textContent = activeStep.summary || 'Follow the guided path for this lesson.';
 				flowTitle.textContent = `${journey.label} x ${scenario.label}`;
 				stepPosition.textContent = stepIndex >= 0 ? `Step ${stepIndex + 1} of ${visibleFlow.length}` : 'Linked step';
+				if (stepProgressEl) {
+					const total = visibleFlow.length;
+					stepProgressEl.value = total > 0 && stepIndex >= 0
+						? Math.round(((stepIndex + 1) / total) * 100)
+						: 0;
+				}
 				stepBodyContainer.innerHTML = renderTutorialStep(activeStep);
 				root.dataset.workshopFlowKeys = visibleFlow.join(',');
 				root.dataset.workshopCurrentStep = activeStep.key;
@@ -1151,6 +1159,10 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
 		display: none;
 	}
 
+	.aw-workshop-step-progress {
+		display: none;
+	}
+
 	.aw-workshop-card-scenario {
 		--aw-workshop-card-accent: var(--sl-color-accent-low);
 	}
@@ -1616,6 +1628,34 @@ const scenarioStepCountsByJourney: Record<string, Record<string, number>> = Obje
 			justify-content: center;
 			text-align: center;
 		}
+
+		.aw-workshop-step-progress {
+			display: block;
+			width: 100%;
+			height: 3px;
+			margin: 0;
+			border: none;
+			border-radius: 999px;
+			background: var(--aw-border);
+			-webkit-appearance: none;
+			appearance: none;
+		}
+
+		.aw-workshop-step-progress::-webkit-progress-bar {
+			background: var(--aw-border);
+			border-radius: 999px;
+		}
+
+		.aw-workshop-step-progress::-webkit-progress-value {
+			background: var(--sl-color-accent);
+			border-radius: 999px;
+			transition: width 0.3s ease;
+		}
+
+		.aw-workshop-step-progress::-moz-progress-bar {
+			background: var(--sl-color-accent);
+			border-radius: 999px;
+		}
 	}
 
 	@keyframes aw-workshop-enter {