fix: read the fault list when a view opens and when the stream stops

Sharing one refresh went too far: only the first view read on mount, and
the sidebar badge is mounted for the whole session, so opening the
dashboard showed the list as it stood when the session began. With the
fault stream up there is no timer either, so nothing corrected it. Every
view now reads when it opens, and again when the connection is replaced or
the stream appears or dies - the requests that coincide still collapse into
one. Connecting to another gateway also drops the previous one's faults
instead of leaving rows whose clear button would address the new gateway.

Two ways the list could stop refreshing entirely are gone. A request that
never came back held the shared refresh for the life of the tab, so every
later refresh waited behind it and the page kept claiming no faults; it now
times out, and leaving the session releases it. A fault stream that ended
without an error left the client believing it was still delivering, and the
timer stayed off for good; the stream ending now hands refreshing back to
polling however it ended.

Clearing a fault re-read the list twice, once in the store and once in the
dashboard.

Author: bburda

e2e/faults-refresh.spec.ts

@@ -45,6 +45,15 @@ async function watchForSkeleton(page: Page): Promise<() => Promise<boolean>> {
         });
 }
 
+/**
+ * The dashboard reads the gateway-wide fault list. Entity pages read their own
+ * `/apps/<id>/faults`, which ends the same way, so the match has to be exact or a
+ * detour through an entity inflates the count.
+ */
+function isFaultListRequest(url: string): boolean {
+    return new URL(url).pathname === '/api/v1/faults';
+}
+
 /** Opens the dashboard and waits for the gateway's (empty) fault list to be on screen. */
 async function openDashboard(page: Page): Promise<void> {
     await page.goto('/');
@@ -69,6 +78,26 @@ test.describe('faults dashboard refresh', () => {
         await expect(page.getByText('No faults to display')).toBeVisible();
     });
 
+    test('opening the dashboard reads the fault list', async ({ page }) => {
+        await openDashboard(page);
+
+        const faultRequests: string[] = [];
+        page.on('request', (request) => {
+            if (isFaultListRequest(request.url())) {
+                faultRequests.push(request.url());
+            }
+        });
+
+        // Leave the dashboard for an entity and come back. The sidebar badge stays
+        // mounted the whole time, so the dashboard is never the session's first fault view.
+        await page.getByText('Test ECU').first().click();
+        await expect(page.getByText('No faults to display')).toBeHidden();
+        await page.getByRole('button', { name: 'Faults Dashboard' }).click();
+        await expect(page.getByText('No faults to display')).toBeVisible();
+
+        expect(faultRequests.length).toBeGreaterThan(0);
+    });
+
     test('the fallback poll asks once per interval, not once per mounted view', async ({ page }) => {
         // With no fault stream the app falls back to polling. The dashboard and the
         // sidebar badge are both on screen and read the same list. An HTTP status is
@@ -80,7 +109,7 @@ test.describe('faults dashboard refresh', () => {
 
         const faultRequests: string[] = [];
         page.on('request', (request) => {
-            if (new URL(request.url()).pathname.endsWith('/faults')) {
+            if (isFaultListRequest(request.url())) {
                 faultRequests.push(request.url());
             }
         });

src/components/FaultsDashboard.polling.test.tsx

@@ -185,6 +185,78 @@ describe('FaultsDashboard refresh behaviour', () => {
         expect(client.GET.mock.calls.length).toBe(afterMount);
     });
 
+    it('reads the list when a second view opens on top of one already mounted', async () => {
+        const client = clientReturning([RAW_FAULT]);
+        connect(client, true);
+        await mount(<FaultsCountBadge />);
+        expect(client.GET).toHaveBeenCalledTimes(1);
+
+        // The badge lives in the sidebar for the whole session, so the dashboard is
+        // always the second view. Opening it has to show the list as it is now.
+        await mount(<FaultsDashboard />);
+
+        expect(client.GET).toHaveBeenCalledTimes(2);
+    });
+
+    it('reads the list as soon as the fault stream stops delivering', async () => {
+        const client = clientReturning([RAW_FAULT]);
+        connect(client, true);
+        await mount(
+            <>
+                <FaultsCountBadge />
+                <FaultsDashboard />
+            </>
+        );
+        const whileStreaming = client.GET.mock.calls.length;
+
+        // The stream dying is the one moment the client knows it has missed events.
+        await act(async () => {
+            useAppStore.setState({ faultStreamCleanup: null } as never);
+            await vi.advanceTimersByTimeAsync(0);
+        });
+
+        expect(client.GET.mock.calls.length).toBe(whileStreaming + 1);
+    });
+
+    it('reads from the gateway it is now connected to', async () => {
+        const gatewayA = clientReturning([RAW_FAULT]);
+        connect(gatewayA, true);
+        await mount(
+            <>
+                <FaultsCountBadge />
+                <FaultsDashboard />
+            </>
+        );
+
+        // Connecting elsewhere never clears isConnected, so nothing else re-reads.
+        const gatewayB = clientReturning([]);
+        await act(async () => {
+            useAppStore.setState({ client: gatewayB } as never);
+            await vi.advanceTimersByTimeAsync(0);
+        });
+
+        expect(gatewayB.GET).toHaveBeenCalledTimes(1);
+    });
+
+    it('re-reads the list once when a fault is cleared, not twice', async () => {
+        const client = {
+            ...clientReturning([RAW_FAULT]),
+            DELETE: vi.fn(async () => ({ data: undefined, error: undefined })),
+        };
+        connect(client, true);
+        const { container } = await mount(<FaultsDashboard />);
+        const readsBeforeClear = client.GET.mock.calls.length;
+
+        const clearButton = container.querySelector('button[title="Clear fault"]') as HTMLElement;
+        await act(async () => {
+            clearButton.click();
+            await vi.advanceTimersByTimeAsync(0);
+        });
+
+        expect(client.DELETE).toHaveBeenCalledTimes(1);
+        expect(client.GET.mock.calls.length).toBe(readsBeforeClear + 1);
+    });
+
     it('stops polling when the last fault view unmounts', async () => {
         const client = clientReturning([RAW_FAULT]);
         connect(client, false);

src/components/FaultsDashboard.tsx

@@ -441,9 +441,8 @@ export function FaultsDashboard() {
                 // Map the fault's entity_type to the correct resource type for the API
                 const entityGroup = mapFaultEntityTypeToResourceType(fault.entity_type);
                 // Use store's clearFault which has proper error handling with toasts
+                // clearFault refreshes the list itself once the delete succeeds.
                 await clearFault(entityGroup, fault.entity_id, fault.code);
-                // Reload faults after clearing
-                await fetchFaults();
             } finally {
                 setClearingCodes((prev) => {
                     const next = new Set(prev);
@@ -452,7 +451,7 @@ export function FaultsDashboard() {
                 });
             }
         },
-        [fetchFaults, clearFault]
+        [clearFault]
     );
 
     // Toggle fault expansion and lazy-load environment data

src/hooks/useFaultPolling.ts

@@ -68,22 +68,29 @@ export interface UseFaultPollingOptions {
  */
 export function useFaultPolling(options: UseFaultPollingOptions = {}): void {
     const poll = options.poll ?? true;
-    const { isConnected, hasFaultStream } = useAppStore(
+    const { isConnected, client, hasFaultStream } = useAppStore(
         useShallow((state) => ({
             isConnected: state.isConnected,
+            client: state.client,
             hasFaultStream: state.faultStreamCleanup !== null,
         }))
     );
 
     useEffect(() => {
         if (!isConnected) return;
 
+        // Every view reads when it opens, not only the first one: the sidebar badge is
+        // mounted for the whole session, so the dashboard is always a later subscriber
+        // and would otherwise show the list as it stood when the session began. Views
+        // opening together still cost one request - the store reuses the one in flight.
+        // Re-runs when the connection is replaced (a new gateway has its own faults) and
+        // when the fault stream appears or dies, which is when events may have been missed.
         subscribers += 1;
         if (subscribers === 1) {
             visibilityListener = refreshIfVisible;
             document.addEventListener('visibilitychange', visibilityListener);
-            refreshFaults();
         }
+        refreshFaults();
 
         return () => {
             subscribers -= 1;
@@ -92,7 +99,7 @@ export function useFaultPolling(options: UseFaultPollingOptions = {}): void {
                 visibilityListener = null;
             }
         };
-    }, [isConnected]);
+    }, [isConnected, client, hasFaultStream]);
 
     useEffect(() => {
         if (!isConnected || !poll) return;

src/lib/store-connect.test.ts

@@ -97,4 +97,33 @@ describe('connect', () => {
         await Promise.resolve();
         expect(useAppStore.getState().scriptsSupported).toBe(true);
     });
+
+    it('leaves no faults from the previous gateway on screen', async () => {
+        const mockGet = vi.fn((path: string) => {
+            if (path === '/health') return Promise.resolve({ error: undefined });
+            return Promise.resolve({ data: undefined });
+        });
+        vi.mocked(createMedkitClient).mockReturnValue({ GET: mockGet } as unknown as MedkitClient);
+        useAppStore.setState({
+            loadRootEntities: vi.fn().mockResolvedValue(undefined),
+            subscribeFaultStream: vi.fn(),
+            faults: [
+                {
+                    code: 'PREVIOUS_GATEWAY_FAULT',
+                    message: 'raised on the robot we just left',
+                    severity: 'error',
+                    status: 'active',
+                    timestamp: '2026-08-31T10:00:00.000Z',
+                    entity_id: 'lidar_front',
+                    entity_type: 'app',
+                },
+            ],
+            faultsLoaded: true,
+        });
+
+        await useAppStore.getState().connect('http://other-gateway.local');
+
+        expect(useAppStore.getState().faults).toEqual([]);
+        expect(useAppStore.getState().faultsLoaded).toBe(false);
+    });
 });

src/lib/store-faults.test.ts

@@ -19,7 +19,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { useAppStore } from './store';
+import { useAppStore, FAULTS_REQUEST_TIMEOUT_MS } from './store';
 import type { Fault } from './types';
 
 vi.mock('react-toastify', () => ({
@@ -83,6 +83,26 @@ afterEach(() => {
     useAppStore.setState({ isConnected: false, client: null, faults: [] } as never);
 });
 
+describe('subscribeFaultStream', () => {
+    it('hands refreshing back to polling when the stream closes without an error', async () => {
+        const streamClient = {
+            GET: vi.fn(async () => ({ data: { items: [] }, error: undefined })),
+            streams: {
+                faults: () => ({
+                    close: vi.fn(),
+                    [Symbol.asyncIterator]: () => ({ next: async () => ({ done: true, value: undefined }) }),
+                }),
+            },
+        };
+        connected(streamClient);
+
+        useAppStore.getState().subscribeFaultStream();
+        expect(useAppStore.getState().faultStreamCleanup).not.toBeNull();
+
+        await vi.waitFor(() => expect(useAppStore.getState().faultStreamCleanup).toBeNull());
+    });
+});
+
 describe('fetchFaults change detection', () => {
     it('takes up a fault that is now reported by a different entity', async () => {
         connected(clientReturning([raw()]));
@@ -153,6 +173,48 @@ describe('fetchFaults against a moving connection', () => {
         expect(client.GET).toHaveBeenCalledTimes(1);
     });
 
+    it('is not wedged by a request that never answers', async () => {
+        const hung = { GET: vi.fn(() => new Promise(() => {})) };
+        connected(hung);
+        void useAppStore.getState().fetchFaults();
+
+        useAppStore.getState().disconnect();
+        const healthy = clientReturning([raw()]);
+        connected(healthy);
+        await useAppStore.getState().fetchFaults();
+
+        expect(healthy.GET).toHaveBeenCalledTimes(1);
+        expect(useAppStore.getState().faults).toHaveLength(1);
+    });
+
+    it('gives up on a request the gateway never answers', async () => {
+        // The abort is the behaviour under test, so its own log line is not a surprise.
+        const logged = vi.spyOn(console, 'error').mockImplementation(() => {});
+        vi.useFakeTimers();
+        try {
+            const hung = {
+                GET: vi.fn((_path: string, init: { signal?: AbortSignal }) => {
+                    return new Promise((_resolve, reject) => {
+                        init.signal?.addEventListener('abort', () => reject(new Error('aborted')));
+                    });
+                }),
+            };
+            connected(hung);
+            const first = useAppStore.getState().fetchFaults();
+            await vi.advanceTimersByTimeAsync(FAULTS_REQUEST_TIMEOUT_MS + 100);
+            await first;
+
+            const healthy = clientReturning([raw()]);
+            useAppStore.setState({ client: healthy } as never);
+            await useAppStore.getState().fetchFaults();
+
+            expect(healthy.GET).toHaveBeenCalledTimes(1);
+        } finally {
+            vi.useRealTimers();
+            logged.mockRestore();
+        }
+    });
+
     it('lets a forced refresh through so a cleared fault is not read back from an older answer', async () => {
         const { client, release } = deferredClient();
         connected(client);

src/lib/store.ts

@@ -892,6 +892,12 @@ function faultRowKey(fault: Fault): string {
     return `${faultKey(fault)}:${fault.status}:${fault.severity}:${fault.message}:${fault.timestamp}`;
 }
 
+/**
+ * How long a fault refresh may stay unanswered. A gateway that stops answering must
+ * not hold the shared refresh open for good - every later refresh waits behind it.
+ */
+export const FAULTS_REQUEST_TIMEOUT_MS = 15000;
+
 /**
  * The refresh currently on the wire, if any. Every fault view shares one list and
  * they refresh on the same events (a timer tick, a tab regaining focus), so without
@@ -1140,6 +1146,12 @@ export const useAppStore = create<AppState>()(
                         isConnecting: false,
                         connectionError: null,
                         client,
+                        // Connecting elsewhere never goes through disconnect(), so without
+                        // this the previous gateway's faults stay on screen - and the clear
+                        // button on such a row would send its code to the new gateway.
+                        faults: [],
+                        isLoadingFaults: false,
+                        faultsLoaded: false,
                     });
 
                     // A reconnect must not carry executions of the previous gateway:
@@ -1208,6 +1220,9 @@ export const useAppStore = create<AppState>()(
 
                 // Unsubscribe from fault stream
                 get().unsubscribeFaultStream();
+                // Whatever is on the wire belongs to the session being left, and a refresh
+                // for the next one must not be answered by it or queue behind it.
+                faultsRefreshInFlight = null;
 
                 set({
                     serverUrl: null,
@@ -2540,13 +2555,16 @@ export const useAppStore = create<AppState>()(
                 }
 
                 const run = async () => {
+                    const controller = new AbortController();
+                    const timeoutId = setTimeout(() => controller.abort(), FAULTS_REQUEST_TIMEOUT_MS);
                     try {
                         const { data: faultsData, error: faultsError } = await client.GET('/faults', {
                             params: {
                                 // `status=all` is required to include cleared/healed faults
                                 // (no param returns only active).
                                 query: { status: 'all' },
                             },
+                            signal: controller.signal,
                         });
                         // A refresh outlives the session that started it, so an answer from
                         // the gateway we just left must not populate the next one's list.
@@ -2578,6 +2596,8 @@ export const useAppStore = create<AppState>()(
                         // A failed attempt still ends the initial load: the error is reported
                         // through the toast, and the skeleton must not return on every retry.
                         set({ isLoadingFaults: false, faultsLoaded: true });
+                    } finally {
+                        clearTimeout(timeoutId);
                     }
                 };
 
@@ -2692,6 +2712,13 @@ export const useAppStore = create<AppState>()(
                                 toast.warning(`Fault: ${fault.message}`, { autoClose: 5000 });
                             }
                         }
+                        // The stream can also end without an error - a gateway closing the
+                        // response cleanly looks like this. Updates have stopped either way,
+                        // so refreshing has to go back to polling.
+                        if (running) {
+                            cleanup();
+                            set({ faultStreamCleanup: null });
+                        }
                     } catch (error) {
                         console.error('[store] subscribeFaultStream: error in consume loop', error);
                         if (running) {