@cccsaurora/howler-ui 2.19.0-dev.1318 → 2.19.0-dev.1344

package/commons/components/app/hooks/useAppConfigs.d.ts

@@ -23,7 +23,7 @@ export declare function useAppConfigs(): {
             hideNestedIcons?: boolean;
         };
         appName: string;
-        appLink?: import("react-router-dom").To;
+        appLink?: import("react-router").To;
         appIconDark: import("react").ReactElement<any>;
         appIconLight: import("react").ReactElement<any>;
         bannerDark?: import("react").ReactElement<any>;

package/components/elements/ContextMenu.js

@@ -83,7 +83,7 @@ const ContextMenu = ({ items, onOpen, onClose, Component = Box, id, children })
                     sx: {
                         minWidth: '250px',
                         paddingY: '0 !important',
-                        '& > :first-child': {
+                        '& > .first': {
                             borderTopLeftRadius: theme.shape.borderRadius,
                             borderTopRightRadius: theme.shape.borderRadius
                         },
@@ -92,15 +92,19 @@ const ContextMenu = ({ items, onOpen, onClose, Component = Box, id, children })
                             borderBottomRightRadius: theme.shape.borderRadius
                         }
                     }
-                }, anchorOrigin: { vertical: 'top', horizontal: 'left' }, onClick: handleClose, children: items.map(entry => {
+                }, anchorOrigin: { vertical: 'top', horizontal: 'left' }, onClick: handleClose, children: items.map((entry, index) => {
+                    let className = '';
+                    if (index === 0) {
+                        className = 'first';
+                    }
                     if (entry.kind === 'divider') {
-                        return _jsx(Divider, { sx: { my: '0 !important' } }, entry.id);
+                        return _jsx(Divider, { className: className, sx: { my: '0 !important' } }, entry.id);
                     }
                     if (entry.kind === 'item') {
                         if (entry.to) {
-                            return (_jsxs(MenuItem, { component: Link, to: entry.to, disabled: entry.disabled, children: [entry.icon && _jsx(ListItemIcon, { children: entry.icon }), _jsx(ListItemText, { children: entry.label })] }, entry.id));
+                            return (_jsxs(MenuItem, { className: className, component: Link, to: entry.to, disabled: entry.disabled, children: [entry.icon && _jsx(ListItemIcon, { children: entry.icon }), _jsx(ListItemText, { children: entry.label })] }, entry.id));
                         }
-                        return (_jsxs(MenuItem, { disabled: entry.disabled, onClick: entry.onClick, children: [entry.icon && _jsx(ListItemIcon, { children: entry.icon }), _jsx(ListItemText, { children: entry.label })] }, entry.id));
+                        return (_jsxs(MenuItem, { className: className, disabled: entry.disabled, onClick: entry.onClick, children: [entry.icon && _jsx(ListItemIcon, { children: entry.icon }), _jsx(ListItemText, { children: entry.label })] }, entry.id));
                     }
                     const { id: entryId, icon, label, disabled, items: subItems } = entry;
                     return (_jsxs(MenuItem, { id: `${entryId}-menu-item`, sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, [entryId]: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, [entryId]: null })), disabled: disabled, children: [icon && _jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { sx: { flex: 1 }, children: label }), !disabled && _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show[entryId], unmountOnExit: true, children: _jsx(Paper, { id: `${entryId}-submenu`, sx: calculateSubMenuStyles(show[entryId]), elevation: 2, children: _jsx(MenuList, { sx: { p: 0, borderTopLeftRadius: 0 }, dense: true, role: "group", children: subItems.map(subItem => (_jsx(MenuItem, { onClick: subItem.onClick, disabled: subItem.disabled, children: _jsx(ListItemText, { children: subItem.label }) }, subItem.key))) }) }) })] }, entryId));

package/components/elements/hit/HitOverview.js

@@ -17,6 +17,6 @@ const HitOverview = ({ content, hit }) => {
         : hit
             ? `/overviews/view?analytic=${encodeURIComponent(hit?.howler.analytic)}${hit?.howler.detection && '&detection=' + encodeURIComponent(hit?.howler.detection)}`
             : null, [hit, matchingOverview]);
-    return (_jsxs(Box, { sx: { position: 'relative', height: '100%', overflow: 'auto' }, children: [link && (_jsx(IconButton, { component: Link, to: link, sx: theme => ({ position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) }), children: _jsx(InsertLink, {}) })), matchingOverview || content ? (_jsx(ErrorBoundary, { children: _jsx(HandlebarsMarkdown, { md: content ?? matchingOverview.content, object: hit, disableLinks: true }) })) : (_jsx(Skeleton, { variant: "rounded", height: "40vh" }))] }));
+    return (_jsxs(Box, { className: "no-margin-first-child", sx: { position: 'relative', height: '100%', overflow: 'auto' }, children: [matchingOverview || content ? (_jsx(ErrorBoundary, { children: _jsx(HandlebarsMarkdown, { md: content ?? matchingOverview.content, object: hit, disableLinks: true }) })) : (_jsx(Skeleton, { variant: "rounded", height: "40vh" })), link && (_jsx(IconButton, { component: Link, to: link, sx: theme => ({ position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) }), children: _jsx(InsertLink, {}) }))] }));
 };
 export default memo(HitOverview);

package/components/hooks/useMySitemap.js

@@ -25,7 +25,6 @@ const useMySitemap = () => {
         routes: [
             { path: '/', title: t('route.home'), isRoot: true, icon: _jsx(Dashboard, {}) },
             { path: '/cases', title: t('route.cases'), isRoot: true, icon: _jsx(BookRounded, {}) },
-            { path: '/cases/:id', title: t('route.cases.view'), breadcrumbs: ['/cases'] },
             { path: '/cases/:id/*', title: t('route.cases.view'), isLeaf: true, breadcrumbs: ['/cases'] },
             { path: '/admin/users', title: t('route.admin.user.search'), isRoot: true, icon: _jsx(PersonSearch, {}) },
             {

package/components/routes/ErrorBoundary.d.ts

@@ -1,14 +1,3 @@
-import React, { type PropsWithChildren } from 'react';
-declare class ErrorBoundary extends React.Component<PropsWithChildren<{}>, {
-    hasError: boolean;
-    error: Error;
-}> {
-    constructor(props: any);
-    static getDerivedStateFromError(error: any): {
-        hasError: boolean;
-        error: any;
-    };
-    componentDidCatch(error: Error): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;
-}
+import { type PropsWithChildren } from 'react';
+declare const ErrorBoundary: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export default ErrorBoundary;

package/components/routes/ErrorBoundary.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpandMore } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material';
 import React, {} from 'react';
+import { useLocation } from 'react-router-dom';
 import ErrorOccured from './ErrorOccured';
-class ErrorBoundary extends React.Component {
+class ErrorBoundaryComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = { hasError: false, error: null };
@@ -14,6 +15,12 @@ class ErrorBoundary extends React.Component {
     componentDidCatch(error) {
         this.setState({ hasError: true, error: error });
     }
+    componentDidUpdate(previousProps) {
+        console.log(previousProps, this.props);
+        if (this.props.locationKey !== previousProps.locationKey && this.state.hasError) {
+            this.setState({ hasError: false, error: null });
+        }
+    }
     render() {
         if (this.state.hasError) {
             return (_jsxs(Box, { pt: 6, textAlign: "center", fontSize: 20, children: [_jsx(ErrorOccured, {}), _jsxs(Accordion, { elevation: 0, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), "aria-controls": "panel1-content", id: "panel1-header", children: _jsx(Typography, { align: "center", sx: { width: '100%', fontSize: '1.2rem' }, variant: "h5", children: this.state.error.message }) }), _jsx(AccordionDetails, { children: _jsx("code", { children: _jsx(Typography, { variant: "h6", children: this.state.error.stack }) }) })] })] }));
@@ -21,4 +28,8 @@ class ErrorBoundary extends React.Component {
         return this.props.children;
     }
 }
+const ErrorBoundary = ({ children }) => {
+    const location = useLocation();
+    return _jsx(ErrorBoundaryComponent, { locationKey: location.key, children: children });
+};
 export default ErrorBoundary;

package/components/routes/ErrorBoundary.test.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vitest" />
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
+import { MemoryRouter, useLocation, useNavigate } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
 import ErrorBoundary from './ErrorBoundary';
 vi.mock('commons/components/pages/PageCenter', () => ({
@@ -20,24 +22,45 @@ const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children:
 const ThrowingComponent = ({ error }) => {
     throw error;
 };
+const RouteContent = () => {
+    const location = useLocation();
+    if (location.pathname === '/broken') {
+        return _jsx(ThrowingComponent, { error: new Error('Broken route') });
+    }
+    return _jsx("div", { children: "Recovered route" });
+};
+const NavigationButton = () => {
+    const navigate = useNavigate();
+    return _jsx("button", { onClick: () => navigate('/recovered'), children: "Navigate away" });
+};
 describe('ErrorBoundary', () => {
     it('should render children when no error occurs', () => {
-        render(_jsx(ErrorBoundary, { children: _jsx("div", { children: "Child content" }) }), { wrapper: Wrapper });
+        render(_jsx(MemoryRouter, { children: _jsx(ErrorBoundary, { children: _jsx("div", { children: "Child content" }) }) }), { wrapper: Wrapper });
         expect(screen.getByText('Child content')).toBeInTheDocument();
     });
     it('should render error UI when a child throws', () => {
         const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
         const testError = new Error('Test error message');
         testError.stack = 'Error: Test error message\n    at TestComponent';
-        render(_jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }), { wrapper: Wrapper });
+        render(_jsx(MemoryRouter, { children: _jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }) }), { wrapper: Wrapper });
         expect(screen.getByText('Test error message')).toBeInTheDocument();
         consoleSpy.mockRestore();
     });
     it('should display the error page title when an error occurs', () => {
         const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
         const testError = new Error('Something went wrong');
-        render(_jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }), { wrapper: Wrapper });
+        render(_jsx(MemoryRouter, { children: _jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }) }), { wrapper: Wrapper });
         expect(screen.getByText('Application Stopped Working')).toBeInTheDocument();
         consoleSpy.mockRestore();
     });
+    it('should reset after navigating away from an error', async () => {
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+        const user = userEvent.setup();
+        render(_jsxs(MemoryRouter, { initialEntries: ['/broken'], children: [_jsx(NavigationButton, {}), _jsx(ErrorBoundary, { children: _jsx(RouteContent, {}) })] }), { wrapper: Wrapper });
+        expect(screen.getByText('Broken route')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Navigate away' }));
+        expect(screen.queryByText('Broken route')).not.toBeInTheDocument();
+        expect(screen.getByText('Recovered route')).toBeInTheDocument();
+        consoleSpy.mockRestore();
+    });
 });

package/components/routes/cases/detail/CaseObservables.js

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { useOutletContext } from 'react-router-dom';
 import useCase from '../hooks/useCase';
 import ObservableTable from './observables/ObservableTable';
-import { OBSERVABLE_FIELDS, buildObservableEntries, classifyRole, resolveSources } from './utils';
+import { OBSERVABLE_FIELDS, buildObservableEntries } from './utils';
 const RELATED_FIELDS = OBSERVABLE_FIELDS.map(f => `related.${f}`).join(',');
 const EXTRA_FIELDS = 'howler.escalation,howler.outline.threat,howler.outline.target,howler.outline.indicators,threat.indicator.ip,threat.indicator.description';
 const CaseObservables = ({ case: providedCase, caseId }) => {
@@ -25,7 +25,6 @@ const CaseObservables = ({ case: providedCase, caseId }) => {
     const [roleFilters, setRoleFilters] = useState([]);
     const [escalationOptions, setEscalationOptions] = useState([]);
     const [activeEscalations, setActiveEscalations] = useState([]);
-    const [escalationMap, setEscalationMap] = useState(new Map());
     const ids = useMemo(() => (_case?.items ?? [])
         .filter(item => ['hit', 'event'].includes(item.type))
         .map(item => item.value)
@@ -38,19 +37,7 @@ const CaseObservables = ({ case: providedCase, caseId }) => {
         void dispatchApi(api.v2.search.post(['hit', 'event'], {
             query: `howler.id:(${ids.join(' OR ')})`,
             fl: `howler.id,${RELATED_FIELDS},${EXTRA_FIELDS}`
-        })).then(response => {
-            setRecords(response.items);
-            // Build escalation map from fetched records
-            const escMap = new Map();
-            for (const record of response.items) {
-                const id = record.howler?.id ?? record.howler?.id;
-                const escalation = record.howler?.escalation;
-                if (id && escalation) {
-                    escMap.set(id, escalation);
-                }
-            }
-            setEscalationMap(escMap);
-        });
+        }), { throwError: false, showError: true }).then(response => response && setRecords(response.items));
     }, [dispatchApi, ids]);
     useEffect(() => {
         if (ids.length < 1) {
@@ -68,16 +55,14 @@ const CaseObservables = ({ case: providedCase, caseId }) => {
         });
     }, [dispatchApi, ids]);
     const allObservables = useMemo(() => {
-        if (!records || !_case) {
+        if (!_case) {
+            return [];
+        }
+        if (!records?.length) {
             return [];
         }
-        const entries = buildObservableEntries(records);
-        return entries.map(entry => ({
-            ...entry,
-            role: classifyRole(entry.value, _case, records),
-            sources: resolveSources(entry.seenIn, _case.items, escalationMap)
-        }));
-    }, [records, _case, escalationMap]);
+        return buildObservableEntries(_case, records);
+    }, [records, _case]);
     const observableTypes = useMemo(() => (allObservables ? uniq(allObservables.map(a => a.type)).sort() : []), [allObservables]);
     const filteredObservables = useMemo(() => {
         if (allObservables.length < 1) {

package/components/routes/cases/detail/CaseObservables.test.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/// <reference types="vitest" />
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createElement } from 'react';
 import { MemoryRouter } from 'react-router-dom';
@@ -148,10 +147,9 @@ describe('CaseObservables component', () => {
         });
         render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
         await screen.findByText('1.2.3.4');
-        await waitFor(() => {
-            // 'evidence' appears in the table escalation column
-            expect(screen.getByText('evidence')).toBeTruthy();
-        });
+        await screen.findByText('page.cases.observables.filter_by_escalation');
+        await userEvent.click(screen.getByText('page.cases.observables.filter_by_escalation'));
+        expect(screen.getAllByText('evidence').length).toBeGreaterThanOrEqual(2);
     });
     it('classifies roles and renders role chips in the table', async () => {
         mockDispatchApi.mockResolvedValue({

package/components/routes/cases/detail/CaseOverview.js

@@ -17,10 +17,7 @@ const CaseOverview = ({ case: _case, updateCase }) => {
     if (!_case) {
         return _jsx(Skeleton, { height: 370 });
     }
-    return (_jsxs(Card, { children: [_jsx(CardHeader, { title: _case.title, subheader: _case.summary }), _jsxs(Stack, { children: [_jsx(Divider, {}), _jsx(LinearProgress, { sx: { opacity: +loading } })] }), _jsx(CardContent, { sx: { position: 'relative' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, sx: {
-                                '& > :first-child': {
-                                    marginTop: '0 !important'
-                                },
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { title: _case.title, subheader: _case.summary }), _jsxs(Stack, { children: [_jsx(Divider, {}), _jsx(LinearProgress, { sx: { opacity: +loading } })] }), _jsx(CardContent, { children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, className: "no-margin-first-child", sx: {
                                 '& > h1,h2,h3,h4,h5': {
                                     fontSize: theme.typography.h5.fontSize
                                 }

package/components/routes/cases/detail/CaseTimeline.js

@@ -18,6 +18,7 @@ import { useContextSelector } from 'use-context-selector';
 import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import useCase from '../hooks/useCase';
+import { buildPathFromID } from '../utils';
 // builds the additional filters for the lucene query
 export const buildFilters = (mitre, escalations) => {
     const filters = [];
@@ -101,6 +102,19 @@ const CaseTimeline = ({ case: providedCase, caseId }) => {
     if (!_case) {
         return null;
     }
-    return (_jsxs(Stack, { spacing: 0, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", sx: { p: 1, gap: 1 }, children: [_jsx(Tooltip, { title: t('page.cases.timeline.filter.label'), children: _jsx(FilterList, { fontSize: "small", color: "action" }) }), _jsx(Autocomplete, { multiple: true, size: "small", options: mitreOptions, value: selectedMitres, onChange: (_e, values) => setSelectedMitres(values), getOptionLabel: opt => `${opt.id} - ${opt.name}`, isOptionEqualToValue: (opt, val) => opt.id === val.id, groupBy: opt => capitalize(opt.kind), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt.id, size: "small", label: opt.id, color: "primary" }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.mitre'), sx: { minWidth: 260 } })), noOptionsText: t('page.cases.timeline.filter.mitre.empty') }), _jsx(Autocomplete, { multiple: true, size: "small", options: escalationOptions, value: selectedEscalations, onChange: (_e, value) => setSelectedEscalations(value), getOptionLabel: opt => t(`howler.escalation.${opt}`, opt), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt, size: "small", label: opt, color: ESCALATION_COLORS[opt] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.escalation'), sx: { minWidth: 220 } })), noOptionsText: t('page.cases.timeline.filter.escalation.empty') })] }), _jsx(Divider, {}), loading ? (_jsx(Stack, { spacing: 2, sx: { px: 2, py: 1 }, children: [0, 1, 2].map(i => (_jsxs(Stack, { direction: "row", width: "100%", spacing: 1, children: [_jsx(Skeleton, { variant: "text", width: 120, height: 24 }), _jsx(Skeleton, { variant: "rounded", height: 120, sx: { flex: 1 } })] }, i))) })) : displayedEntries.length === 0 ? (_jsx(Box, { sx: { pt: 4, textAlign: 'center' }, children: _jsx(Typography, { color: "textSecondary", children: t('page.cases.timeline.empty') }) })) : (_jsx(Stack, { component: "ol", spacing: 0, sx: { px: 2, py: 1, listStyle: 'none', m: 0, overflow: 'auto' }, children: displayedEntries.map(entry => (_jsxs(Stack, { component: "li", spacing: 1, sx: { pb: 1 }, children: [_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "flex-start", children: [_jsxs(Stack, { spacing: 0.5, alignItems: "end", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: dayjs(entry.event?.created ?? entry.timestamp).format('YYYY-MM-DD HH:mm:ss') }), entry.threat?.technique?.id && (_jsx(Tooltip, { title: `${entry.threat.technique.id}: ${config.lookups?.techniques?.[entry.threat.technique.id].name}`, children: _jsx(Typography, { component: config.lookups?.techniques?.[entry.threat.technique.id]?.url ? 'a' : undefined, href: config.lookups?.techniques?.[entry.threat.technique.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.technique.id }) })), entry.threat?.tactic?.id && (_jsx(Tooltip, { title: `${entry.threat.tactic.id}: ${config.lookups?.tactics?.[entry.threat.tactic.id]?.name ?? t('unknown')}`, children: _jsx(Typography, { component: config.lookups?.tactics?.[entry.threat.tactic.id]?.url ? 'a' : undefined, href: config.lookups?.tactics?.[entry.threat.tactic.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.tactic.id }) }))] }), _jsx(Box, { component: Link, to: `/cases/${_case.case_id}/${getItemId(entry.howler.id)}`, sx: { flex: 1, minWidth: 0, textDecoration: 'none' }, children: isHit(entry) ? (_jsx(HitCard, { id: entry.howler.id, hit: entry, layout: HitLayout.DENSE, readOnly: true })) : (_jsx(EventCard, { id: entry.howler.id, event: entry })) })] }), _jsx(Divider, { flexItem: true })] }, entry.howler.id))) }))] }));
+    return (_jsxs(Stack, { spacing: 0, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", sx: { p: 1, gap: 1 }, children: [_jsx(Tooltip, { title: t('page.cases.timeline.filter.label'), children: _jsx(FilterList, { fontSize: "small", color: "action" }) }), _jsx(Autocomplete, { multiple: true, size: "small", options: mitreOptions, value: selectedMitres, onChange: (_e, values) => setSelectedMitres(values), getOptionLabel: opt => `${opt.id} - ${opt.name}`, isOptionEqualToValue: (opt, val) => opt.id === val.id, groupBy: opt => capitalize(opt.kind), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt.id, size: "small", label: opt.id, color: "primary" }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.mitre'), sx: { minWidth: 260 } })), noOptionsText: t('page.cases.timeline.filter.mitre.empty') }), _jsx(Autocomplete, { multiple: true, size: "small", options: escalationOptions, value: selectedEscalations, onChange: (_e, value) => setSelectedEscalations(value), getOptionLabel: opt => t(`howler.escalation.${opt}`, opt), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt, size: "small", label: opt, color: ESCALATION_COLORS[opt] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.escalation'), sx: { minWidth: 220 } })), noOptionsText: t('page.cases.timeline.filter.escalation.empty') })] }), _jsx(Divider, {}), loading ? (_jsx(Stack, { spacing: 2, sx: { px: 2, py: 1 }, children: [0, 1, 2].map(i => (_jsxs(Stack, { direction: "row", width: "100%", spacing: 1, children: [_jsx(Skeleton, { variant: "text", width: 120, height: 24 }), _jsx(Skeleton, { variant: "rounded", height: 120, sx: { flex: 1 } })] }, i))) })) : displayedEntries.length === 0 ? (_jsx(Box, { sx: { pt: 4, textAlign: 'center' }, children: _jsx(Typography, { color: "textSecondary", children: t('page.cases.timeline.empty') }) })) : (_jsx(Stack, { component: "ol", spacing: 0, sx: { px: 2, py: 1, listStyle: 'none', m: 0, overflow: 'auto' }, children: displayedEntries.map(entry => (_jsxs(Stack, { component: "li", spacing: 1, sx: { pb: 1 }, children: [_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "flex-start", children: [_jsxs(Stack, { spacing: 0.5, alignItems: "end", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: dayjs(entry.event?.created ?? entry.timestamp).format('YYYY-MM-DD HH:mm:ss') }), entry.threat?.technique?.id && (_jsx(Tooltip, { title: `${entry.threat.technique.id}: ${config.lookups?.techniques?.[entry.threat.technique.id].name}`, children: _jsx(Typography, { component: config.lookups?.techniques?.[entry.threat.technique.id]?.url ? 'a' : undefined, href: config.lookups?.techniques?.[entry.threat.technique.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.technique.id }) })), entry.threat?.tactic?.id && (_jsx(Tooltip, { title: `${entry.threat.tactic.id}: ${config.lookups?.tactics?.[entry.threat.tactic.id]?.name ?? t('unknown')}`, children: _jsx(Typography, { component: config.lookups?.tactics?.[entry.threat.tactic.id]?.url ? 'a' : undefined, href: config.lookups?.tactics?.[entry.threat.tactic.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.tactic.id }) }))] }), _jsxs(Box, { sx: { flex: 1, minWidth: 0, textDecoration: 'none', position: 'relative' }, children: [isHit(entry) ? (_jsx(HitCard, { id: entry.howler.id, hit: entry, layout: HitLayout.DENSE, readOnly: true })) : (_jsx(EventCard, { id: entry.howler.id, event: entry })), _jsx(Box, { component: Link, to: `/cases/${_case.case_id}/${buildPathFromID(_case, getItemId(entry.howler.id))}`, sx: theme => ({
+                                                position: 'absolute',
+                                                top: 0,
+                                                left: 0,
+                                                width: '100%',
+                                                height: '100%',
+                                                cursor: 'pointer',
+                                                zIndex: 100,
+                                                borderRadius: '4px',
+                                                '&:hover': {
+                                                    background: theme.palette.divider,
+                                                    border: `thin solid ${theme.palette.primary.light}`
+                                                }
+                                            }) })] })] }), _jsx(Divider, { flexItem: true })] }, entry.howler.id))) }))] }));
 };
 export default memo(CaseTimeline);

package/components/routes/cases/detail/CaseTimeline.test.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react/no-children-prop */
-/// <reference types="vitest" />
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';

package/components/routes/cases/detail/observables/Observable.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardContent, Chip, Stack, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { buildPathFromID } from '../../utils';
 const Observable = ({ observable, case: _case }) => {
     const { t } = useTranslation();
-    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Chip, { size: "small", label: t(`page.cases.observables.type.${observable.type}`), color: "primary", variant: "outlined" }), _jsx(Typography, { variant: "body2", sx: { wordBreak: 'break-all', fontFamily: 'monospace' }, children: observable.value })] }), observable.seenIn.length > 0 && (_jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.cases.observables.seen_in') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: observable.seenIn.map(id => {
-                                    const entry = _case.items.find(item => item.value === id);
-                                    return (_jsx(Chip, { clickable: true, size: "small", label: entry.name, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${buildPathFromID(_case, entry.id)}` }, id));
+    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Chip, { size: "small", label: t(`page.cases.observables.type.${observable.type}`), color: "primary", variant: "outlined" }), _jsx(Typography, { variant: "body2", sx: { wordBreak: 'break-all', fontFamily: 'monospace' }, children: observable.value })] }), (observable.sources?.length ?? 0) > 0 && (_jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.cases.observables.seen_in') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: observable.sources?.map(source => {
+                                    if (!source.path) {
+                                        return _jsx(Chip, { size: "small", label: source.label ?? source.id, variant: "outlined" }, source.id);
+                                    }
+                                    return (_jsx(Chip, { clickable: true, size: "small", label: source.label ?? source.id, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${source.path}` }, source.id));
                                 }) })] }))] }) }) }));
 };
 export default Observable;

package/components/routes/cases/detail/observables/Observable.test.js

@@ -8,7 +8,7 @@ import Observable from './Observable';
 const makeObservable = (overrides = {}) => ({
     type: 'ip',
     value: '192.168.1.1',
-    seenIn: [],
+    sources: [],
     ...overrides
 });
 describe('Observable', () => {
@@ -33,19 +33,19 @@ describe('Observable', () => {
             expect(screen.getByText(hash)).toBeTruthy();
         });
     });
-    describe('seen-in chips', () => {
-        it('renders nothing when seenIn is empty', () => {
-            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ seenIn: [] }), case: createMockCase() }) }));
+    describe('source chips', () => {
+        it('renders nothing when sources are empty', () => {
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ sources: [] }), case: createMockCase() }) }));
             expect(screen.queryByText('page.cases.observables.seen_in')).toBeNull();
         });
-        it('renders "Seen in" label when seenIn has entries', () => {
+        it('renders "Seen in" label when sources have entries', () => {
             const _case = createMockCase({
                 items: [{ type: 'hit', value: 'hit-001' }]
             });
-            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ seenIn: ['hit-001'] }), case: _case }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ sources: [{ id: 'hit-001', type: 'hit' }] }), case: _case }) }));
             expect(screen.getByText('page.cases.observables.seen_in')).toBeTruthy();
         });
-        it('renders chips labelled from item name/value for each seenIn id', () => {
+        it('renders chips labelled from source metadata', () => {
             const _case = createMockCase({
                 items: [
                     { id: 'i1', type: 'hit', value: 'hit-001', name: 'first-hit' },
@@ -53,7 +53,13 @@ describe('Observable', () => {
                     { id: 'i3', type: 'hit', value: 'hit-003', name: 'third-hit' }
                 ]
             });
-            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ seenIn: ['hit-001', 'obs-002', 'hit-003'] }), case: _case }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({
+                        sources: [
+                            { id: 'hit-001', type: 'hit', label: 'first-hit' },
+                            { id: 'obs-002', type: 'event', label: 'obs-two' },
+                            { id: 'hit-003', type: 'hit', label: 'third-hit' }
+                        ]
+                    }), case: _case }) }));
             expect(screen.getByText('first-hit')).toBeTruthy();
             expect(screen.getByText('obs-two')).toBeTruthy();
             expect(screen.getByText('third-hit')).toBeTruthy();
@@ -63,7 +69,9 @@ describe('Observable', () => {
                 case_id: 'case-abc',
                 items: [{ id: 'item-1', type: 'hit', value: 'hit-001', name: 'first-hit' }]
             });
-            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ seenIn: ['hit-001'] }), case: _case }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({
+                        sources: [{ id: 'hit-001', type: 'hit', path: 'first-hit', label: 'first-hit' }]
+                    }), case: _case }) }));
             const link = screen.getByText('first-hit').closest('a');
             expect(link).not.toBeNull();
             expect(link?.getAttribute('href')).toBe('/cases/case-abc/first-hit');

package/components/routes/cases/detail/observables/ObservableTable.js

@@ -20,7 +20,7 @@ const getSortValue = (observable, column) => {
         case 'role':
             return observable.role ?? '';
         case 'seen_in':
-            return observable.seenIn.length;
+            return observable.sources?.length ?? 0;
         case 'escalation':
             return (observable.sources ?? [])
                 .map(s => s.escalation)
@@ -55,7 +55,7 @@ const ObservableTable = ({ observables, case: _case }) => {
                         const sources = observable.sources ?? [];
                         const escalations = [...new Set(sources.map(s => s.escalation).filter(Boolean))];
                         const linkedSources = sources.filter(source => source.path);
-                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Chip, { size: "small", label: t(`page.cases.observables.type.${observable.type}`), color: "primary", variant: "outlined" }) }), _jsx(TableCell, { sx: { maxWidth: 300 }, children: _jsx(PluginTypography, { value: observable.value, context: "table", variant: "body2", sx: { fontFamily: 'monospace', wordBreak: 'break-all' } }) }), _jsx(TableCell, { children: observable.role && (_jsx(Chip, { size: "small", label: t(`page.cases.observables.role.${observable.role}`), color: ROLE_COLORS[observable.role], variant: "outlined" })) }), _jsx(TableCell, { align: "right", children: _jsx(Typography, { variant: "body2", children: observable.seenIn.length }) }), _jsx(TableCell, { children: linkedSources.length === 0 ? null : linkedSources.length === 1 ? (_jsx(Chip, { clickable: true, size: "small", label: linkedSources[0].label ?? linkedSources[0].path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${linkedSources[0].path}` })) : (_jsx(ChipPopper, { label: `${linkedSources[0].label ?? linkedSources[0].path} (+${linkedSources.length - 1})`, slotProps: { chip: { size: 'small', variant: 'outlined' } }, children: _jsx(Stack, { gap: 0.5, children: linkedSources.map(source => (_jsx(Chip, { clickable: true, size: "small", label: source.label ?? source.path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${source.path}` }, source.id))) }) })) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: escalations.map(esc => (_jsx(Chip, { size: "small", label: esc, color: ESCALATION_COLORS[esc] ?? 'default' }, esc))) }) })] }, `${observable.type}:${observable.value}`));
+                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Chip, { size: "small", label: t(`page.cases.observables.type.${observable.type}`), color: "primary", variant: "outlined" }) }), _jsx(TableCell, { sx: { maxWidth: 300 }, children: _jsx(PluginTypography, { value: observable.value, context: "table", variant: "body2", sx: { fontFamily: 'monospace', wordBreak: 'break-all' } }) }), _jsx(TableCell, { children: observable.role && (_jsx(Chip, { size: "small", label: t(`page.cases.observables.role.${observable.role}`), color: ROLE_COLORS[observable.role], variant: "outlined" })) }), _jsx(TableCell, { align: "right", children: _jsx(Typography, { variant: "body2", children: sources.length }) }), _jsx(TableCell, { children: linkedSources.length === 0 ? null : linkedSources.length === 1 ? (_jsx(Chip, { clickable: true, size: "small", label: linkedSources[0].label ?? linkedSources[0].path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${linkedSources[0].path}` })) : (_jsx(ChipPopper, { label: `${linkedSources[0].label ?? linkedSources[0].path} (+${linkedSources.length - 1})`, slotProps: { chip: { size: 'small', variant: 'outlined' } }, children: _jsx(Stack, { gap: 0.5, children: linkedSources.map(source => (_jsx(Chip, { clickable: true, size: "small", label: source.label ?? source.path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${source.path}` }, source.id))) }) })) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: escalations.map(esc => (_jsx(Chip, { size: "small", label: esc, color: ESCALATION_COLORS[esc] ?? 'default' }, esc))) }) })] }, `${observable.type}:${observable.value}`));
                     }) })] }) }));
 };
 export default memo(ObservableTable);

package/components/routes/cases/detail/observables/ObservableTable.test.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/// <reference types="vitest" />
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createElement } from 'react';
@@ -16,7 +15,7 @@ vi.mock('components/elements/PluginTypography', () => ({
 const makeObservable = (overrides = {}) => ({
     type: 'ip',
     value: '192.168.1.1',
-    seenIn: [],
+    sources: [],
     ...overrides
 });
 const renderTable = (observables) => {
@@ -38,12 +37,25 @@ describe('ObservableTable', () => {
         await user.click(screen.getByText('page.cases.observables.columns.type'));
         expect(getObservableValues()).toEqual(['bravo', 'charlie', 'alpha']);
     });
-    it('sorts observables numerically by their seen-in count', async () => {
+    it('sorts observables numerically by their source count', async () => {
         const user = userEvent.setup();
         renderTable([
-            makeObservable({ value: 'three', seenIn: ['one', 'two', 'three'] }),
-            makeObservable({ value: 'one', seenIn: ['one'] }),
-            makeObservable({ value: 'two', seenIn: ['one', 'two'] })
+            makeObservable({
+                value: 'three',
+                sources: [
+                    { id: 'one', type: 'hit' },
+                    { id: 'two', type: 'hit' },
+                    { id: 'three', type: 'hit' }
+                ]
+            }),
+            makeObservable({ value: 'one', sources: [{ id: 'one', type: 'hit' }] }),
+            makeObservable({
+                value: 'two',
+                sources: [
+                    { id: 'one', type: 'hit' },
+                    { id: 'two', type: 'hit' }
+                ]
+            })
         ]);
         await user.click(screen.getByText('page.cases.observables.columns.seen_in'));
         expect(getObservableValues()).toEqual(['one', 'two', 'three']);
@@ -67,9 +79,9 @@ describe('ObservableTable', () => {
                     { id: 'source-1', type: 'hit', path: 'alerts/one', label: 'Alert one', escalation: 'evidence' },
                     {
                         id: 'source-2',
-                        type: 'observable',
-                        path: 'observables/two',
-                        label: 'Observable two',
+                        type: 'event',
+                        path: 'events/two',
+                        label: 'Event two',
                         escalation: 'evidence'
                     },
                     { id: 'source-3', type: 'case', escalation: 'malicious' }
@@ -80,6 +92,6 @@ describe('ObservableTable', () => {
         expect(screen.getAllByText('evidence')).toHaveLength(1);
         expect(screen.getByText('malicious')).toBeInTheDocument();
         await user.click(screen.getByText('Alert one (+1)'));
-        expect(screen.getByText('Observable two').closest('a')).toHaveAttribute('href', '/cases/case-123/observables/two');
+        expect(screen.getByText('Event two').closest('a')).toHaveAttribute('href', '/cases/case-123/events/two');
     });
 });

package/components/routes/cases/detail/types.d.ts

@@ -4,7 +4,7 @@ export type ObservableRole = 'threat' | 'target' | 'indicator';
 
 export interface ObservableSource {
   id: string;
-  type: 'hit' | 'observable' | 'case';
+  type: 'hit' | 'event' | 'case';
   path?: string;
   label?: string;
   escalation?: string;
@@ -13,12 +13,10 @@ export interface ObservableSource {
 export interface ObservableEntry {
   type: ObservableType;
   value: string;
-  /** IDs of the hits/observables this observable was seen in */
-  seenIn: string[];
   /** Resolved source metadata for each seenIn item */
   sources?: ObservableSource[];
   /** Classified role of this observable */
   role?: ObservableRole;
 }
 
-export type OriginType = 'hit' | 'observable';
+export type OriginType = 'hit' | 'event';

package/components/routes/cases/detail/utils.d.ts

@@ -6,13 +6,12 @@ import type { ObservableEntry, ObservableRole, ObservableSource, ObservableType
 /** All Related fields that carry asset values */
 export declare const OBSERVABLE_FIELDS: ObservableType[];
 /** Extract (type, value, seenInId) triples from a record's related field */
-export declare const extractObservables: (related: Related | undefined, recordId: string) => {
+export declare const extractObservables: (related: Related | undefined) => {
     type: ObservableType;
     value: string;
-    id: string;
 }[];
-/** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
-export declare const buildObservableEntries: (records: Partial<Hit | Event>[]) => ObservableEntry[];
+/** Deduplicate observables and resolve their record IDs to case-item sources */
+export declare const buildObservableEntries: (_case: Case, records: (Hit | Event)[]) => ObservableEntry[];
 /**
  * Classify an asset's role based on case-level lists and per-record outline fields.
  *
@@ -25,5 +24,5 @@ export declare const buildObservableEntries: (records: Partial<Hit | Event>[]) =
  * Comparison is case-insensitive and trimmed.
  */
 export declare const classifyRole: (value: string, _case: Case, records: Partial<Hit | Event>[]) => ObservableRole;
-/** Resolve source metadata for an asset's seenIn IDs */
-export declare const resolveSources: (seenIn: string[], caseItems: Case['items'], escalationMap: Map<string, string>) => ObservableSource[];
+/** Resolve source metadata for an observable's record IDs */
+export declare const resolveSource: (record: Hit | Event, _case: Case) => ObservableSource;

package/components/routes/cases/detail/utils.js

@@ -1,7 +1,9 @@
+import { has } from 'lodash-es';
+import { buildPathFromID } from '../utils';
 /** All Related fields that carry asset values */
 export const OBSERVABLE_FIELDS = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
 /** Extract (type, value, seenInId) triples from a record's related field */
-export const extractObservables = (related, recordId) => {
+export const extractObservables = (related) => {
     if (!related) {
         return [];
     }
@@ -14,33 +16,38 @@ export const extractObservables = (related, recordId) => {
         const values = Array.isArray(raw) ? raw : [raw];
         for (const value of values) {
             if (value) {
-                results.push({ type: field, value: String(value), id: recordId });
+                results.push({ type: field, value: String(value) });
             }
         }
     }
     return results;
 };
-/** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
-export const buildObservableEntries = (records) => {
-    const map = new Map();
+/** Deduplicate observables and resolve their record IDs to case-item sources */
+export const buildObservableEntries = (_case, records) => {
+    const map = {};
     for (const record of records) {
         const related = record.related ?? record.related;
         const recordId = record.howler?.id ?? record.howler?.id;
         if (!recordId) {
             continue;
         }
-        for (const { type, value, id } of extractObservables(related, recordId)) {
+        for (const { type, value } of extractObservables(related)) {
             const key = `${type}:${value}`;
-            if (!map.has(key)) {
-                map.set(key, { type, value, seenIn: [] });
+            if (!has(map, key)) {
+                map[key] = { type, value, sources: [], role: classifyRole(value, _case, records) };
             }
-            const entry = map.get(key);
-            if (!entry.seenIn.includes(id)) {
-                entry.seenIn.push(id);
+            const entry = map[key];
+            if (entry.sources.some(existingSource => existingSource.id === recordId)) {
+                continue;
             }
+            const source = resolveSource(record, _case);
+            if (!source) {
+                continue;
+            }
+            entry.sources.push(source);
         }
     }
-    return Array.from(map.values());
+    return Object.values(map).filter(Boolean);
 };
 /**
  * Classify an asset's role based on case-level lists and per-record outline fields.
@@ -91,24 +98,20 @@ export const classifyRole = (value, _case, records) => {
     // Default: assets from related.* are IOCs
     return 'indicator';
 };
-/** Resolve source metadata for an asset's seenIn IDs */
-export const resolveSources = (seenIn, caseItems, escalationMap) => {
-    if (!caseItems?.length) {
-        return [];
+/** Resolve source metadata for an observable's record IDs */
+export const resolveSource = (record, _case) => {
+    if (!_case?.items?.length) {
+        return null;
     }
-    return seenIn
-        .map(id => {
-        const item = caseItems.find(i => i.value === id);
-        if (!item) {
-            return null;
-        }
-        return {
-            id,
-            type: item.type,
-            path: item.id,
-            label: item.name ?? item.value,
-            escalation: escalationMap.get(id)
-        };
-    })
-        .filter(Boolean);
+    const item = _case.items.find(i => i.value === record.howler.id);
+    if (!item) {
+        return null;
+    }
+    return {
+        id: record.howler.id,
+        type: item.type,
+        path: item.id ? buildPathFromID(_case, item.id) : undefined,
+        label: item.name ?? item.value,
+        escalation: record.howler.escalation
+    };
 };

package/components/routes/cases/detail/utils.test.js

@@ -6,50 +6,72 @@ import { buildObservableEntries, classifyRole } from './utils';
 // ---------------------------------------------------------------------------
 describe('buildObservableEntries', () => {
     it('returns an empty array for records with no related field', () => {
-        expect(buildObservableEntries([createMockHit({ howler: { id: 'h1' } })])).toEqual([]);
-    });
-    it('extracts a single IP from a hit', () => {
-        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })]);
+        expect(buildObservableEntries(createMockCase(), [createMockHit({ howler: { id: 'h1' } })])).toEqual([]);
+    });
+    it('extracts a single IP with a resolved source', () => {
+        const _case = createMockCase({
+            items: [{ id: 'hit-item', type: 'hit', value: 'h1', name: 'First hit' }]
+        });
+        const result = buildObservableEntries(_case, [
+            createMockHit({ howler: { id: 'h1', escalation: 'evidence' }, related: { ip: ['1.2.3.4'] } })
+        ]);
         expect(result).toHaveLength(1);
-        expect(result[0]).toEqual({ type: 'ip', value: '1.2.3.4', seenIn: ['h1'] });
+        expect(result[0]).toEqual({
+            type: 'ip',
+            value: '1.2.3.4',
+            role: 'indicator',
+            sources: [{ id: 'h1', type: 'hit', path: 'First hit', label: 'First hit', escalation: 'evidence' }]
+        });
     });
     it('extracts multiple fields from a single record', () => {
-        const result = buildObservableEntries([
+        const result = buildObservableEntries(createMockCase(), [
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } })
         ]);
         const types = result.map(a => a.type).sort();
         expect(types).toEqual(['ip', 'user']);
     });
     it('deduplicates the same observable value across multiple records', () => {
-        const result = buildObservableEntries([
+        const _case = createMockCase({
+            items: [
+                { id: 'hit-item', type: 'hit', value: 'h1', name: 'First hit' },
+                { id: 'event-item', type: 'event', value: 'obs1', name: 'First event' }
+            ]
+        });
+        const result = buildObservableEntries(_case, [
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
             createMockEvent({ howler: { id: 'obs1' }, related: { ip: ['1.2.3.4'] } })
         ]);
         expect(result).toHaveLength(1);
-        expect(result[0].seenIn).toEqual(['h1', 'obs1']);
+        expect(result[0].sources).toEqual([
+            { id: 'h1', type: 'hit', path: 'First hit', label: 'First hit', escalation: undefined },
+            { id: 'obs1', type: 'event', path: 'First event', label: 'First event', escalation: undefined }
+        ]);
     });
     it('keeps distinct observable values as separate entries', () => {
-        const result = buildObservableEntries([
+        const result = buildObservableEntries(createMockCase(), [
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
             createMockHit({ howler: { id: 'h2' }, related: { ip: ['5.6.7.8'] } })
         ]);
         expect(result).toHaveLength(2);
     });
-    it('does not duplicate seenIn ids when the same record appears twice for the same observable', () => {
-        const result = buildObservableEntries([
+    it('does not duplicate sources when the same record appears twice for the same observable', () => {
+        const _case = createMockCase({ items: [{ id: 'hit-item', type: 'hit', value: 'h1' }] });
+        const result = buildObservableEntries(_case, [
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })
         ]);
-        expect(result[0].seenIn).toEqual(['h1']);
+        expect(result[0].sources).toEqual([{ id: 'h1', type: 'hit', path: 'h1', label: 'h1', escalation: undefined }]);
     });
     it('skips records with no howler.id', () => {
         const noId = { related: { ip: ['1.2.3.4'] } };
-        expect(buildObservableEntries([noId])).toEqual([]);
+        expect(buildObservableEntries(createMockCase(), [noId])).toEqual([]);
     });
     it('handles the scalar `id` field on Related', () => {
-        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related: { id: 'some-id' } })]);
+        const result = buildObservableEntries(createMockCase(), [
+            createMockHit({ howler: { id: 'h1' }, related: { id: 'some-id' } })
+        ]);
         expect(result).toHaveLength(1);
-        expect(result[0]).toEqual({ type: 'id', value: 'some-id', seenIn: ['h1'] });
+        expect(result[0]).toEqual({ type: 'id', value: 'some-id', role: 'indicator', sources: [] });
     });
     it('handles array fields like hash, hosts, user, ids, uri, signature', () => {
         const related = {
@@ -60,7 +82,7 @@ describe('buildObservableEntries', () => {
             uri: ['https://example.com'],
             signature: ['rule-X']
         };
-        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related })]);
+        const result = buildObservableEntries(createMockCase(), [createMockHit({ howler: { id: 'h1' }, related })]);
         const types = result.map(a => a.type).sort();
         expect(types).toEqual(['hash', 'hosts', 'ids', 'signature', 'uri', 'user']);
     });

package/components/routes/overviews/OverviewViewer.js

@@ -220,7 +220,6 @@ const OverviewViewer = () => {
                                         pt: 1,
                                         mt: -1,
                                         '& > *': { width: '100%' },
-                                        '& > div > :first-child': { mt: 0 },
                                         backgroundColor: activeTheme.palette.background.default,
                                         color: activeTheme.palette.text.primary
                                     }, children: _jsx(HitOverview, { content: content || startingTemplate, hit: exampleHit }) }) })] }))] })] }));

package/index.css

@@ -19,3 +19,7 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
+
+.no-margin-first-child > :first-child {
+  margin-top: 0 !important;
+}

package/package.json

@@ -56,8 +56,8 @@
     "react-markdown": "^10.1.0",
     "react-pluggable": "^0.4.3",
     "react-resize-detector": "^9.1.1",
-    "react-router": "6.30.4",
-    "react-router-dom": "7.0.0",
+    "react-router": "7.18.1",
+    "react-router-dom": "7.18.1",
     "react-syntax-highlighter": "^15.6.6",
     "rehype-raw": "^7.0.0",
     "remark": "^15.0.1",
@@ -93,7 +93,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "2.19.0-dev.1318",
+  "version": "2.19.0-dev.1344",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",