.agents/memory/2026-02-28-dashboard-settings-collapsible-fix.md

1.6 KiB

2026-02-28 Session Notes

Dashboard Settings Collapsible Fix

Fixed a critical bug in the Signet dashboard where Settings tab collapsible section headers (Agent, Embeddings, Search, Memory, Paths, Pipeline, Trust, Auth) were unclickable, preventing users from expanding/collapsing sections and managing configuration.

Root Cause Identified

The bug was caused by a Svelte 5 reactivity cycle in SettingsTab.svelte. The $effect was tracking a reactive configFiles prop while calling st.init(configFiles), which mutated the store state. This created an infinite re-initialization loop that caused FormSection components to unmount/remount on every reactive update, disrupting the bits-ui Collapsible context and breaking click handlers.

Component Chain Analysis

The collapsible sections used this hierarchy:

  • FormSection.svelte (wrapper)
    • Collapsible.Root (bits-ui wrapper)
    • Collapsible.Trigger (bits-ui wrapper, renders <button>)
    • Collapsible.Content (bits-ui wrapper)

The bits-ui trigger rendered a <button> with onclick calling root.toggleOpen(), but component remounts were preventing proper context propagation.

Solution Implemented

Wrapped the st.init(configFiles) call in untrack() within the $effect to break the dependency cycle. This allows the effect to initialize settings without creating a reactive dependency on the configFiles prop, preventing redundant re-initialization and component remounts.

Verification

Tested using Playwright browser automation with daemon running to load real configuration data. Confirmed collapsible sections toggled open/closed properly and form controls responded to interaction.