fix: resolve empty resource tabs and missing peer component children

Fix two bugs that cause E2E test failures with aggregated peer gateways:

1. EntityResourceTabs: synchronously clear loadedTabsRef in the reset
   effect so the load effect (same React commit) sees false instead of
   stale true values from the previous entity.

2. loadChildren: when /components/{id}/hosts returns empty (peer-sourced
   components), fall back to GET /apps filtered by x-medkit.component_id
   or _links.is-located-on.

Extract filterAppsByComponent as a testable helper. Add 7 new tests
covering both fixes.

closes #61

Author: bburda

src/components/EntityResourceTabs.test.tsx

@@ -0,0 +1,117 @@
+// Copyright 2026 bburda
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { EntityResourceTabs } from './EntityResourceTabs';
+import type { ComponentTopic, Operation, Fault } from '@/lib/types';
+
+// ---- store mock ----
+
+const mockFetchEntityData = vi.fn();
+const mockFetchEntityOperations = vi.fn();
+const mockFetchConfigurations = vi.fn();
+const mockListEntityFaults = vi.fn();
+const mockSelectEntity = vi.fn();
+
+vi.mock('@/lib/store', () => ({
+    useAppStore: vi.fn((selector: (s: Record<string, unknown>) => unknown) =>
+        selector({
+            selectEntity: mockSelectEntity,
+            fetchEntityData: mockFetchEntityData,
+            fetchEntityOperations: mockFetchEntityOperations,
+            fetchConfigurations: mockFetchConfigurations,
+            listEntityFaults: mockListEntityFaults,
+            configurations: new Map(),
+        })
+    ),
+}));
+
+// ---- helpers ----
+
+function sampleTopics(): ComponentTopic[] {
+    return [
+        {
+            topic: '/engine/temperature',
+            timestamp: Date.now(),
+            data: null,
+            status: 'metadata_only',
+            type: 'sensor_msgs/msg/Temperature',
+        },
+    ];
+}
+
+// ---- tests ----
+
+describe('EntityResourceTabs', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockFetchEntityData.mockResolvedValue([] as ComponentTopic[]);
+        mockFetchEntityOperations.mockResolvedValue([] as Operation[]);
+        mockFetchConfigurations.mockResolvedValue(undefined);
+        mockListEntityFaults.mockResolvedValue({ items: [] as Fault[], count: 0 });
+    });
+
+    it('fetches and displays data items on first render', async () => {
+        mockFetchEntityData.mockResolvedValue(sampleTopics());
+
+        render(<EntityResourceTabs entityId="ecu-primary" entityType="components" />);
+
+        await waitFor(() => {
+            expect(mockFetchEntityData).toHaveBeenCalledWith('components', 'ecu-primary');
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('/engine/temperature')).toBeInTheDocument();
+        });
+    });
+
+    it('re-fetches data when entityId changes (loadedTabs ref race)', async () => {
+        mockFetchEntityData.mockResolvedValue(sampleTopics());
+
+        const { rerender } = render(<EntityResourceTabs entityId="ecu-primary" entityType="components" />);
+
+        // Wait for first fetch to complete
+        await waitFor(() => {
+            expect(screen.getByText('/engine/temperature')).toBeInTheDocument();
+        });
+
+        // Switch to a different entity - this is the scenario that was broken:
+        // the ref still had { data: true } from the first entity, so the load
+        // effect returned early and data stayed empty.
+        const secondTopics: ComponentTopic[] = [
+            {
+                topic: '/brake/pressure',
+                timestamp: Date.now(),
+                data: null,
+                status: 'metadata_only',
+                type: 'sensor_msgs/msg/FluidPressure',
+            },
+        ];
+        mockFetchEntityData.mockResolvedValue(secondTopics);
+
+        rerender(<EntityResourceTabs entityId="ecu-mcu" entityType="components" />);
+
+        await waitFor(() => {
+            expect(mockFetchEntityData).toHaveBeenCalledWith('components', 'ecu-mcu');
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('/brake/pressure')).toBeInTheDocument();
+        });
+
+        // Old data should be gone
+        expect(screen.queryByText('/engine/temperature')).not.toBeInTheDocument();
+    });
+});

src/components/EntityResourceTabs.tsx

@@ -115,8 +115,19 @@ export function EntityResourceTabs({ entityId, entityType, basePath, onNavigate
     // Reset tab state when the entity changes so stale data from the
     // previous entity does not leak into the new one.
     useEffect(() => {
+        const reset: LoadedResources = {
+            data: false,
+            operations: false,
+            configurations: false,
+            faults: false,
+            logs: false,
+        };
         setActiveTab('data');
-        setLoadedTabs({ data: false, operations: false, configurations: false, faults: false, logs: false });
+        setLoadedTabs(reset);
+        // Synchronously update the ref so the load effect (which fires in
+        // the same commit) sees the cleared flags instead of stale `true`
+        // values from the previous entity.
+        loadedTabsRef.current = reset;
         setData([]);
         setOperations([]);
         setFaults([]);

src/lib/store-helpers.test.ts

@@ -13,7 +13,14 @@
 // limitations under the License.
 
 import { describe, it, expect } from 'vitest';
-import { toTreeNode, updateNodeInTree, findNode, inferEntityTypeFromDepth, parseTreePath } from './store';
+import {
+    toTreeNode,
+    updateNodeInTree,
+    findNode,
+    inferEntityTypeFromDepth,
+    parseTreePath,
+    filterAppsByComponent,
+} from './store';
 import type { SovdEntity, EntityTreeNode } from './types';
 
 // =============================================================================
@@ -408,3 +415,45 @@ describe('parseTreePath', () => {
         expect(result.entityId).toBe('chassis');
     });
 });
+
+// =============================================================================
+// filterAppsByComponent
+// =============================================================================
+
+describe('filterAppsByComponent', () => {
+    const apps: Record<string, unknown>[] = [
+        { id: 'local-app', 'x-medkit': { component_id: 'ecu-primary' } },
+        { id: 'data_viewer', 'x-medkit': { component_id: 'ecu-rtmaps' } },
+        { id: 'lidar_sim', _links: { 'is-located-on': '/api/v1/components/ecu-rtmaps' } },
+        { id: 'orphan-app', 'x-medkit': {} },
+        { id: 'bare-app' },
+    ];
+
+    it('matches apps by x-medkit.component_id', () => {
+        const result = filterAppsByComponent(apps, 'ecu-primary');
+        expect(result.map((a) => a.id)).toEqual(['local-app']);
+    });
+
+    it('matches apps by _links.is-located-on', () => {
+        const result = filterAppsByComponent(apps, 'ecu-rtmaps');
+        expect(result.map((a) => a.id)).toEqual(['data_viewer', 'lidar_sim']);
+    });
+
+    it('returns empty array when no apps match', () => {
+        const result = filterAppsByComponent(apps, 'nonexistent');
+        expect(result).toEqual([]);
+    });
+
+    it('handles empty apps list', () => {
+        const result = filterAppsByComponent([], 'ecu-primary');
+        expect(result).toEqual([]);
+    });
+
+    it('does not match partial component ID in _links', () => {
+        const tricky: Record<string, unknown>[] = [
+            { id: 'partial', _links: { 'is-located-on': '/api/v1/components/ecu-rtmaps-extended' } },
+        ];
+        const result = filterAppsByComponent(tricky, 'ecu-rtmaps');
+        expect(result).toEqual([]);
+    });
+});

src/lib/store.ts

@@ -613,6 +613,22 @@ export function parseTreePath(path: string): {
     return { entityType, entityId };
 }
 
+/**
+ * Filter apps that belong to a given component by checking
+ * `x-medkit.component_id` or `_links.is-located-on`.
+ *
+ * Used as a fallback when `/components/{id}/hosts` returns empty
+ * (peer-sourced components).
+ */
+export function filterAppsByComponent(apps: Record<string, unknown>[], componentId: string): Record<string, unknown>[] {
+    return apps.filter((app) => {
+        const xMedkit = app['x-medkit'] as Record<string, unknown> | undefined;
+        if (xMedkit?.component_id === componentId) return true;
+        const links = app['_links'] as Record<string, string> | undefined;
+        return links?.['is-located-on']?.endsWith(`/components/${componentId}`);
+    });
+}
+
 /** Fallback: fetch entity details from API when not in tree */
 async function fetchEntityFromApi(
     path: string,
@@ -995,7 +1011,19 @@ export const useAppStore = create<AppState>()(
                             );
                             const subcompNodes = subcomponents.map((e: SovdEntity) => toTreeNode(e, path));
 
-                            const rawApps = appsRes.data ? unwrapItems<Record<string, unknown>>(appsRes.data) : [];
+                            let rawApps = appsRes.data ? unwrapItems<Record<string, unknown>>(appsRes.data) : [];
+
+                            // Fallback for peer-sourced components: /hosts may return
+                            // empty while apps still reference this component via
+                            // x-medkit.component_id. Fetch all apps and filter.
+                            if (rawApps.length === 0) {
+                                const allAppsRes = await client.GET('/apps').catch(() => ({ data: undefined }));
+                                const allApps = allAppsRes.data
+                                    ? unwrapItems<Record<string, unknown>>(allAppsRes.data)
+                                    : [];
+                                rawApps = filterAppsByComponent(allApps, node.id);
+                            }
+
                             const apps = rawApps.map((e) => ({ ...e, type: 'app' }) as unknown as SovdEntity);
                             const appNodes = apps.map((app: SovdEntity) =>
                                 toTreeNode({ ...app, type: 'app', hasChildren: false }, path)