From 4b8c5740969652b73e3c9104ab88597c742a5053 Mon Sep 17 00:00:00 2001
From: Algis Dumbris <a.dumbris@gmail.com>
Date: Thu, 26 Mar 2026 08:30:36 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Agent=20Runs=20page=20stuck=20on=20Loadi?=
 =?UTF-8?q?ng=20=E2=80=94=20use=20$effect=20instead=20of=20onMount?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The onMount + async pattern wasn't triggering Svelte 5 reactivity
properly. Switched to $effect with $user dependency (same pattern
used by Sidebar and other components). Also waits for auth before
loading data.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 internal/web/dist/index.html     | 12 ++++++------
 web/src/routes/runs/+page.svelte | 28 +++++++++++++++++++---------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/internal/web/dist/index.html b/internal/web/dist/index.html
index 94c13a7..2b0a20b 100644
--- a/internal/web/dist/index.html
+++ b/internal/web/dist/index.html
@@ -11,30 +11,30 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-		<link href="/_app/immutable/entry/start.DZCPQR8C.js" rel="modulepreload">
-		<link href="/_app/immutable/chunks/C-zifBrA.js" rel="modulepreload">
+		<link href="/_app/immutable/entry/start.C53XvHet.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/BYAQw6Ic.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/BjgrqnN-.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/BK7DUW2U.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/CslSvznw.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/C_dJMdcr.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/Du3f5uIc.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/B3RSY5nb.js" rel="modulepreload">
-		<link href="/_app/immutable/entry/app.BsYzd6w8.js" rel="modulepreload">
+		<link href="/_app/immutable/entry/app.1r_Gkim3.js" rel="modulepreload">
 		
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">
 			<script>
 				{
-					__sveltekit_3d3whq = {
+					__sveltekit_1vc73p1 = {
 						base: ""
 					};
 
 					const element = document.currentScript.parentElement;
 
 					Promise.all([
-						import("/_app/immutable/entry/start.DZCPQR8C.js"),
-						import("/_app/immutable/entry/app.BsYzd6w8.js")
+						import("/_app/immutable/entry/start.C53XvHet.js"),
+						import("/_app/immutable/entry/app.1r_Gkim3.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element);
 					});
diff --git a/web/src/routes/runs/+page.svelte b/web/src/routes/runs/+page.svelte
index ba9e811..1b275f7 100644
--- a/web/src/routes/runs/+page.svelte
+++ b/web/src/routes/runs/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { runs } from '$lib/api/client';
-	import { onMount } from 'svelte';
+	import { user } from '$lib/stores/auth';
 
 	let runsList = $state<any[]>([]);
 	let total = $state(0);
@@ -9,11 +9,21 @@
 	let filterStatus = $state('');
 	let loading = $state(true);
 	let expandedRun = $state<number | null>(null);
+	let _intervalId: ReturnType<typeof setInterval> | null = null;
+	let _initialized = $state(false);
 
-	onMount(() => {
-		loadData();
-		const interval = setInterval(loadData, 10000);
-		return () => clearInterval(interval);
+	$effect(() => {
+		if (!_initialized && $user) {
+			_initialized = true;
+			loadData();
+			_intervalId = setInterval(loadData, 10000);
+		}
+		return () => {
+			if (_intervalId) {
+				clearInterval(_intervalId);
+				_intervalId = null;
+			}
+		};
 	});
 
 	async function loadData() {
@@ -25,8 +35,8 @@
 			runsList = runsRes.runs ?? [];
 			total = runsRes.total;
 			reactiveAgents = agentsRes.agents ?? [];
-		} catch {
-			// handled
+		} catch (e) {
+			console.error('Failed to load runs data:', e);
 		}
 		loading = false;
 	}
@@ -121,13 +131,13 @@
 
 	<!-- Filters -->
 	<div class="filters">
-		<select bind:value={filterAgent} onchange={loadData}>
+		<select bind:value={filterAgent} onchange={() => loadData()}>
 			<option value="">All agents</option>
 			{#each reactiveAgents as agent}
 				<option value={agent.name}>{agent.name}</option>
 			{/each}
 		</select>
-		<select bind:value={filterStatus} onchange={loadData}>
+		<select bind:value={filterStatus} onchange={() => loadData()}>
 			<option value="">All statuses</option>
 			<option value="running">Running</option>
 			<option value="succeeded">Succeeded</option>