From 2d91ce02fc48ad1e63cbc59cd4d0c4760b370a25 Mon Sep 17 00:00:00 2001
From: Matt <matt@Matt-Surface.local>
Date: Sat, 14 Feb 2026 17:04:43 +0100
Subject: [PATCH] Fix pipeline detail hook order causing React error 310

---
 .../admin/rounds/pipeline/[id]/page.tsx       | 53 ++++++++++---------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/app/(admin)/admin/rounds/pipeline/[id]/page.tsx b/src/app/(admin)/admin/rounds/pipeline/[id]/page.tsx
index b1b681a..e5b54e4 100644
--- a/src/app/(admin)/admin/rounds/pipeline/[id]/page.tsx
+++ b/src/app/(admin)/admin/rounds/pipeline/[id]/page.tsx
@@ -281,13 +281,33 @@ export default function PipelineDetailPage() {
   }, [pipeline])
 
   // Scroll to stage panel when a stage is selected
-  useEffect(() => {
-    if (selectedStageId && stagePanelRef.current) {
-      stagePanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
-    }
-  }, [selectedStageId])
-
-  if (isLoading) {
+  useEffect(() => {
+    if (selectedStageId && stagePanelRef.current) {
+      stagePanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  }, [selectedStageId])
+
+  const trackOptionsForEditors = useMemo(
+    () =>
+      (pipeline?.tracks ?? [])
+        .slice()
+        .sort((a, b) => a.sortOrder - b.sortOrder)
+        .map((track) => ({
+          id: track.id,
+          name: track.name,
+          stages: track.stages
+            .slice()
+            .sort((a, b) => a.sortOrder - b.sortOrder)
+            .map((stage) => ({
+              id: stage.id,
+              name: stage.name,
+              sortOrder: stage.sortOrder,
+            })),
+        })),
+    [pipeline]
+  )
+
+  if (isLoading) {
     return (
       <div className="space-y-6">
         <div className="flex items-center gap-3">
@@ -328,25 +348,6 @@ export default function PipelineDetailPage() {
     (s) => s.id === selectedStageId
   )
   const mainTrackDraft = structureTracks.find((track) => track.kind === 'MAIN')
-  const trackOptionsForEditors = useMemo(
-    () =>
-      pipeline.tracks
-        .slice()
-        .sort((a, b) => a.sortOrder - b.sortOrder)
-        .map((track) => ({
-          id: track.id,
-          name: track.name,
-          stages: track.stages
-            .slice()
-            .sort((a, b) => a.sortOrder - b.sortOrder)
-            .map((stage) => ({
-              id: stage.id,
-              name: stage.name,
-              sortOrder: stage.sortOrder,
-            })),
-        })),
-    [pipeline.tracks]
-  )
 
   const handleTrackChange = (trackId: string) => {
     setSelectedTrackId(trackId)