agents-orchestrator/agent-orchestrator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(electrobun): eliminate $effect/$derived cycles in 3 more components

Browse source 
TaskBoardTab: $effect called loadTasks() which wrote ++pollToken ($state)
→ triggered $effect re-run → infinite loop. Fix: onMount instead.
Also tasksByCol $derived created new objects via .reduce/.filter.

FileBrowser: $effect read openDirs (via new Set(openDirs)) AND wrote to
it (openDirs = s) → infinite loop. Fix: onMount with fresh Set.

CommsTab: $effect called loadChannels()/loadAgents() which wrote $state
→ potential cycle. Fix: onMount instead.

Rule: NEVER use $effect for initialization that writes to $state.
Always use onMount for async init + side effects.
This commit is contained in:
Hibryda 2026-03-24 13:03:48 +01:00
parent 8d09632879
commit 20e4d2cdec
3 changed files with 19 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

19
ui-electrobun/src/mainview/TaskBoardTab.svelte
View file

@ -51,12 +51,13 @@
// ── Derived ──────────────────────────────────────────────────────────
let tasksByCol = $derived(
COLUMNS.reduce((acc, col) => {
// NO $derived — .reduce creates new objects every evaluation → infinite loop
function getTasksByCol(): Record<string, Task[]> {
return COLUMNS.reduce((acc, col) => {
acc[col] = tasks.filter(t => t.status === col);
return acc;
}, {} as Record<string, Task[]>)
);
}, {} as Record<string, Task[]>);
}
// ── Data fetching ────────────────────────────────────────────────────
@ -177,10 +178,12 @@
if (!payload.groupId || payload.groupId === groupId) loadTasks();
}
$effect(() => {
// Use onMount instead of $effect — loadTasks() writes to $state (pollToken++)
// which would trigger $effect re-run → infinite loop
import { onMount } from 'svelte';
onMount(() => {
loadTasks();
appRpc.addMessageListener('bttask.changed', onTaskChanged);
// Feature 4: Fallback 30s poll for missed events
pollTimer = setInterval(loadTasks, 30000);
return () => {
if (pollTimer) clearInterval(pollTimer);
@ -243,11 +246,11 @@
>
<div class="tb-col-header">
<span class="tb-col-label">{COL_LABELS[col]}</span>
<span class="tb-col-count">{tasksByCol[col]?.length ?? 0}</span>
<span class="tb-col-count">{getTasksByCol()[col]?.length ?? 0}</span>
</div>
<div class="tb-col-body">
{#each tasksByCol[col] ?? [] as task (task.id)}
{#each getTasksByCol()[col] ?? [] as task (task.id)}
<div
class="tb-card"
class:dragging={draggedTaskId === task.id}