From 9524e4df541febce17c6a1882778254db71bf9b1 Mon Sep 17 00:00:00 2001
From: Piotr Oleszczyk <piotr@oleszczyk.eu>
Date: Sun, 1 Mar 2026 01:04:28 +0100
Subject: [PATCH] fix(frontend): fix routine step numbering and product name
 display

Steps were numbered from 2 due to off-by-one (order_index + 1).
Product steps showed "Unknown step" because the template checked
step.product (never returned by API) instead of looking up by
step.product_id in the already-loaded products list.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/routines/[id]/+page.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/routines/[id]/+page.svelte b/frontend/src/routes/routines/[id]/+page.svelte
index 155fecc..7ddb326 100644
--- a/frontend/src/routes/routines/[id]/+page.svelte
+++ b/frontend/src/routes/routines/[id]/+page.svelte
@@ -93,11 +93,12 @@
 				{#each routine.steps.toSorted((a, b) => a.order_index - b.order_index) as step (step.id)}
 					<div class="flex items-center justify-between rounded-md border border-border px-4 py-3">
 						<div class="flex items-center gap-3">
-							<span class="text-xs text-muted-foreground w-4">{step.order_index + 1}</span>
+							<span class="text-xs text-muted-foreground w-4">{step.order_index}</span>
 							<div>
-								{#if step.product}
-									<p class="text-sm font-medium">{step.product.name}</p>
-									<p class="text-xs text-muted-foreground">{step.product.brand}</p>
+								{#if step.product_id}
+									{@const product = products.find((p) => p.id === step.product_id)}
+									<p class="text-sm font-medium">{product?.name ?? step.product_id}</p>
+									{#if product?.brand}<p class="text-xs text-muted-foreground">{product.brand}</p>{/if}
 								{:else if step.action_type}
 									<p class="text-sm font-medium">{step.action_type.replace(/_/g, ' ')}</p>
 								{:else}