@cccsaurora/howler-ui 2.19.0-dev.999 → 2.19.0

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

@@ -0,0 +1,95 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add, ExpandLess, ExpandMore } from '@mui/icons-material';
+import { Autocomplete, Chip, Divider, Skeleton, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import CaseTask from './CaseTask';
+/** Maximum number of child cases auto-loaded for task aggregation. */
+const MAX_CHILD_CASES = 10;
+const TaskPanel = ({ case: _case, updateCase }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const [addingTask, setAddingTask] = useState(false);
+    const [childCases, setChildCases] = useState([]);
+    const [showChildTasks, setShowChildTasks] = useState(true);
+    const [selectedChildIds, setSelectedChildIds] = useState(null);
+    // Collect the IDs for all child case items (up to MAX_CHILD_CASES)
+    const childCaseItems = useMemo(() => (_case?.items ?? []).filter(item => item.type === 'case' && !!item.value).slice(0, MAX_CHILD_CASES), [_case?.items]);
+    // Fetch child case data whenever the parent case changes
+    useEffect(() => {
+        if (childCaseItems.length === 0) {
+            setChildCases([]);
+            setSelectedChildIds([]);
+            return;
+        }
+        let cancelled = false;
+        void dispatchApi(api.v2.search.post('case', { query: `case_id:(${childCaseItems.map(item => item.value).join(' OR ')})` }), { throwError: false })
+            .then(results => results.items)
+            .then(results => {
+            if (!cancelled) {
+                setChildCases(results);
+                // Default: all child cases selected
+                if (selectedChildIds === null) {
+                    setSelectedChildIds(results.map(r => r.case_id));
+                }
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [childCaseItems, dispatchApi]);
+    // Child cases available as filter options
+    const childCaseOptions = useMemo(() => childCases.map(c => c.case_id), [childCases]);
+    // Child cases whose tasks are currently visible
+    const visibleChildCases = useMemo(() => (showChildTasks ? childCases.filter(c => (selectedChildIds ?? []).includes(c.case_id)) : []), [showChildTasks, childCases, selectedChildIds]);
+    const onEdit = (task) => async (newTask) => {
+        if (task) {
+            await updateCase({
+                tasks: _case.tasks.map(_task => {
+                    if (_task.id !== task.id) {
+                        return _task;
+                    }
+                    return {
+                        ..._task,
+                        ...newTask
+                    };
+                })
+            });
+        }
+        else {
+            await updateCase({
+                tasks: [..._case.tasks, newTask]
+            });
+        }
+    };
+    if (!_case) {
+        return _jsx(Skeleton, { height: 240 });
+    }
+    const hasChildCases = childCases.length > 0;
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.tasks') }), hasChildCases && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { multiple: true, size: "small", disableCloseOnSelect: true, options: childCaseOptions, value: selectedChildIds ?? [], onChange: (_ev, val) => setSelectedChildIds(val), getOptionLabel: id => childCases.find(c => c.case_id === id)?.title ?? id, renderTags: (vals, getTagProps) => vals.map((id, index) => {
+                                    const { key, ...tagProps } = getTagProps({ index });
+                                    return (_jsx(Chip, { ...tagProps, size: "small", label: childCases.find(c => c.case_id === id)?.title ?? id }, key));
+                                }), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: selectedChildIds?.length === 0 ? t('page.cases.dashboard.tasks.filter_cases') : '', sx: { minWidth: 180 } })), sx: { minWidth: 180 } }), _jsx(Tooltip, { title: t(showChildTasks ? 'page.cases.dashboard.tasks.hide_child' : 'page.cases.dashboard.tasks.show_child'), children: _jsx(Chip, { size: "small", variant: showChildTasks ? 'filled' : 'outlined', label: t('page.cases.dashboard.tasks.child_cases'), icon: showChildTasks ? _jsx(ExpandLess, { fontSize: "small" }) : _jsx(ExpandMore, { fontSize: "small" }), onClick: () => setShowChildTasks(v => !v), clickable: true }) })] }))] }), _jsx(Divider, {}), _case.tasks.map(task => (_jsx(CaseTask, { task: task, case: _case, onEdit: onEdit(task), onDelete: () => updateCase({ tasks: _case.tasks.filter(_task => _task.id !== task.id) }) }, task.id))), addingTask && (_jsx(CaseTask, { newTask: true, case: _case, onEdit: async (task) => {
+                    await onEdit()(task);
+                    setAddingTask(false);
+                }, onDelete: async () => setAddingTask(false) })), _jsxs(Stack, { onClick: () => setAddingTask(true), direction: "row", spacing: 2, sx: theme => ({
+                    borderStyle: 'dashed',
+                    borderColor: theme.palette.text.secondary,
+                    borderWidth: '0.15rem',
+                    borderRadius: '0.15rem',
+                    opacity: 0.3,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: 1,
+                    transition: theme.transitions.create('opacity'),
+                    '&:hover': {
+                        opacity: 1,
+                        cursor: 'pointer'
+                    }
+                }), children: [_jsx(Add, {}), _jsx(Typography, { children: t('page.cases.dashboard.tasks.add') })] }), visibleChildCases.map(child => (_jsxs(Stack, { spacing: 1, children: [_jsx(Divider, { children: _jsx(Chip, { component: Link, to: `/cases/${child.case_id}`, clickable: true, size: "small", label: child.title, variant: "outlined" }) }), child.tasks.length === 0 ? (_jsx(Typography, { variant: "caption", color: "textSecondary", sx: { pl: 1 }, children: t('page.cases.dashboard.tasks.child.empty') })) : (child.tasks.map(task => _jsx(CaseTask, { task: task, case: child, readOnly: true }, task.id)))] }, child.case_id)))] }));
+};
+export default TaskPanel;

package/components/routes/cases/detail/TaskPanel.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,145 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockCaseTaskProps = vi.hoisted(() => ({ current: [] }));
+const mockAutocompleteOnChange = vi.hoisted(() => ({ fn: null }));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+const mockSearchPost = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            search: {
+                post: (...args) => mockSearchPost(...args)
+            }
+        }
+    }
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children }))
+    };
+});
+vi.mock('./CaseTask', () => ({
+    default: (props) => {
+        mockCaseTaskProps.current.push(props);
+        return (_jsx("div", { id: props.newTask ? 'case-task-new' : `case-task-${props.task?.id ?? 'unknown'}`, "data-readonly": String(!!props.readOnly) }));
+    }
+}));
+vi.mock('@mui/material', async () => {
+    const actual = await vi.importActual('@mui/material');
+    return {
+        ...actual,
+        Autocomplete: ({ onChange, value }) => {
+            mockAutocompleteOnChange.fn = onChange;
+            return (_jsx("div", { id: "child-case-autocomplete", children: (value ?? []).map((v) => (_jsx("span", { id: `selected-${v}`, children: v }, v))) }));
+        }
+    };
+});
+import TaskPanel from './TaskPanel';
+const mkTask = (id, summary = 'Task summary') => ({
+    id,
+    summary,
+    complete: false
+});
+const renderPanel = (caseOverrides, updateCase = vi.fn().mockResolvedValue(undefined)) => {
+    const _case = createMockCase({ tasks: [], items: [], ...caseOverrides });
+    const utils = render(_jsx(MemoryRouter, { children: _jsx(TaskPanel, { case: _case, updateCase: updateCase }) }));
+    return { _case, updateCase, ...utils };
+};
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockSearchPost.mockReset();
+    mockCaseTaskProps.current = [];
+    mockAutocompleteOnChange.fn = null;
+});
+describe('TaskPanel', () => {
+    it('renders parent tasks as CaseTask entries', () => {
+        const { container } = renderPanel({ tasks: [mkTask('t1'), mkTask('t2')] });
+        expect(container.querySelector('#case-task-t1')).toBeInTheDocument();
+        expect(container.querySelector('#case-task-t2')).toBeInTheDocument();
+    });
+    it('fetches child cases via v2 search when case-type items exist', async () => {
+        const child = createMockCase({ case_id: 'child-1', title: 'Child One', tasks: [] });
+        mockSearchPost.mockReturnValue('search-request');
+        mockDispatchApi.mockResolvedValue({ items: [child] });
+        renderPanel({ items: [{ type: 'case', value: 'child-1' }] });
+        await waitFor(() => {
+            expect(mockSearchPost).toHaveBeenCalledWith('case', { query: 'case_id:(child-1)' });
+            expect(screen.getByText('Child One')).toBeInTheDocument();
+        });
+    });
+    it('defaults autocomplete selection to all loaded child case ids', async () => {
+        const child1 = createMockCase({ case_id: 'child-1', title: 'Child One', tasks: [] });
+        const child2 = createMockCase({ case_id: 'child-2', title: 'Child Two', tasks: [] });
+        mockSearchPost.mockReturnValue('search-request');
+        mockDispatchApi.mockResolvedValue({ items: [child1, child2] });
+        renderPanel({
+            items: [
+                { type: 'case', value: 'child-1' },
+                { type: 'case', value: 'child-2' }
+            ]
+        });
+        await waitFor(() => {
+            expect(screen.getByText('child-1')).toBeInTheDocument();
+            expect(screen.getByText('child-2')).toBeInTheDocument();
+        });
+    });
+    it('renders child task entries as read-only', async () => {
+        const childTask = mkTask('ct1', 'Child task');
+        const child = createMockCase({ case_id: 'child-1', title: 'Child One', tasks: [childTask] });
+        mockSearchPost.mockReturnValue('search-request');
+        mockDispatchApi.mockResolvedValue({ items: [child] });
+        renderPanel({ items: [{ type: 'case', value: 'child-1' }] });
+        await waitFor(() => {
+            const captured = mockCaseTaskProps.current.find((p) => p.task?.id === 'ct1');
+            expect(captured?.readOnly).toBe(true);
+            expect(captured?.case?.case_id).toBe('child-1');
+        });
+    });
+    it('hides child section when deselected in autocomplete and restores on reselect', async () => {
+        const childTask = mkTask('ct1', 'Child task');
+        const child = createMockCase({ case_id: 'child-1', title: 'Child One', tasks: [childTask] });
+        mockSearchPost.mockReturnValue('search-request');
+        mockDispatchApi.mockResolvedValue({ items: [child] });
+        renderPanel({ items: [{ type: 'case', value: 'child-1' }] });
+        await waitFor(() => expect(document.querySelector('#case-task-ct1')).toBeInTheDocument());
+        act(() => {
+            mockAutocompleteOnChange.fn?.({}, []);
+        });
+        await waitFor(() => expect(document.querySelector('#case-task-ct1')).not.toBeInTheDocument());
+        act(() => {
+            mockAutocompleteOnChange.fn?.({}, ['child-1']);
+        });
+        await waitFor(() => expect(document.querySelector('#case-task-ct1')).toBeInTheDocument());
+    });
+    it('limits search to first 10 child case item values', async () => {
+        const items = Array.from({ length: 12 }, (_, i) => ({ type: 'case', value: `c${i}` }));
+        mockSearchPost.mockReturnValue('search-request');
+        mockDispatchApi.mockResolvedValue({ items: [] });
+        renderPanel({ items });
+        await waitFor(() => {
+            expect(mockSearchPost).toHaveBeenCalledWith('case', {
+                query: 'case_id:(c0 OR c1 OR c2 OR c3 OR c4 OR c5 OR c6 OR c7 OR c8 OR c9)'
+            });
+        });
+    });
+    it('toggles child task visibility with the child-case chip', async () => {
+        const childTask = mkTask('ct1', 'Child task');
+        const child = createMockCase({ case_id: 'child-1', title: 'Child One', tasks: [childTask] });
+        mockSearchPost.mockReturnValue('search-request');
+        mockDispatchApi.mockResolvedValue({ items: [child] });
+        renderPanel({ items: [{ type: 'case', value: 'child-1' }] });
+        await waitFor(() => expect(document.querySelector('#case-task-ct1')).toBeInTheDocument());
+        fireEvent.click(screen.getByText('page.cases.dashboard.tasks.child_cases'));
+        await waitFor(() => expect(document.querySelector('#case-task-ct1')).not.toBeInTheDocument());
+        fireEvent.click(screen.getByText('page.cases.dashboard.tasks.child_cases'));
+        await waitFor(() => expect(document.querySelector('#case-task-ct1')).toBeInTheDocument());
+    });
+});

package/components/routes/cases/detail/aggregates/CaseAggregate.d.ts

@@ -0,0 +1,11 @@
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import("react").NamedExoticComponent<{
+    icon?: string;
+    iconColor?: string;
+    field?: string;
+    records?: Partial<Hit | Event>[];
+    title?: string;
+    subtitle?: string;
+}>;
+export default _default;

package/components/routes/cases/detail/aggregates/CaseAggregate.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Card, CardContent, Skeleton, Stack, styled, Tooltip, tooltipClasses, Typography, useTheme } from '@mui/material';
+import { get, isEmpty, uniq } from 'lodash-es';
+import { memo } from 'react';
+const NoMaxWidthTooltip = styled(({ className, ...props }) => (_jsx(Tooltip, { ...props, classes: { popper: className } })))({
+    [`& .${tooltipClasses.tooltip}`]: {
+        maxWidth: 'none'
+    }
+});
+const CaseAggregate = ({ icon, iconColor, field, records, title, subtitle }) => {
+    const theme = useTheme();
+    if (!title && (!records || !field)) {
+        return _jsx(Skeleton, { height: 120 });
+    }
+    const values = records
+        ? uniq(records
+            .map(_record => get(_record, field))
+            .flat()
+            .filter(Boolean))
+        : [];
+    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { alignItems: "center", spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [icon && _jsx(Icon, { fontSize: "96px", icon: icon, color: iconColor || theme.palette.grey[700] }), _jsx(NoMaxWidthTooltip, { title: !isEmpty(values) && (_jsx(Stack, { spacing: 0.5, children: uniq(values).map(value => (_jsx("span", { children: value }, value))) })), children: _jsxs(Typography, { variant: "h3", children: [values.length, !isEmpty(values) && !!title && ' - ', title] }) })] }), _jsx(Typography, { color: "textSecondary", children: subtitle })] }) }) }));
+};
+export default memo(CaseAggregate);

package/components/routes/cases/detail/aggregates/SourceAggregate.d.ts

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const SourceAggregate: FC<{
+    case: Case;
+}>;
+export default SourceAggregate;

package/components/routes/cases/detail/aggregates/SourceAggregate.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip, Grid, Skeleton } from '@mui/material';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { uniq } from 'lodash-es';
+import { useMemo } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import useCase from '../../hooks/useCase';
+const SourceAggregate = ({ case: providedCase }) => {
+    const { case: _case } = useCase({ case: providedCase });
+    const records = useContextSelector(RecordContext, ctx => ctx.records);
+    const analytics = useMemo(() => {
+        if (!_case) {
+            return [];
+        }
+        const hitIds = _case.items
+            .filter(item => item.type === 'hit')
+            .map(item => item.value)
+            .filter(value => !!value);
+        return uniq(hitIds.map(id => records[id]?.howler?.analytic).filter(analytic => !!analytic));
+    }, [_case, records]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 12, variant: "rounded" });
+    }
+    return (_jsx(Grid, { container: true, spacing: 1, children: analytics.map(_analytic => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", label: _analytic }) }, _analytic))) }));
+};
+export default SourceAggregate;

package/components/routes/cases/detail/observables/Observable.d.ts

@@ -0,0 +1,8 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { FC } from 'react';
+import type { ObservableEntry } from '../types';
+declare const Observable: FC<{
+    observable: ObservableEntry;
+    case: Case;
+}>;
+export default Observable;

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

@@ -0,0 +1,14 @@
+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';
+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.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.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it } from 'vitest';
+import Observable from './Observable';
+const makeObservable = (overrides = {}) => ({
+    type: 'ip',
+    value: '192.168.1.1',
+    sources: [],
+    ...overrides
+});
+describe('Observable', () => {
+    describe('type chip', () => {
+        it('renders the correct label for each type', () => {
+            const cases = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
+            for (const type of cases) {
+                const { unmount } = render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ type, value: 'x' }), case: createMockCase() }) }));
+                expect(screen.getByText(`page.cases.observables.type.${type}`)).toBeTruthy();
+                unmount();
+            }
+        });
+    });
+    describe('value display', () => {
+        it('renders the asset value', () => {
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ value: '10.0.0.1' }), case: createMockCase() }) }));
+            expect(screen.getByText('10.0.0.1')).toBeTruthy();
+        });
+        it('renders long hash values without truncation', () => {
+            const hash = 'a'.repeat(64);
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ type: 'hash', value: hash }), case: createMockCase() }) }));
+            expect(screen.getByText(hash)).toBeTruthy();
+        });
+    });
+    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 sources have entries', () => {
+            const _case = createMockCase({
+                items: [{ type: 'hit', value: 'hit-001' }]
+            });
+            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 source metadata', () => {
+            const _case = createMockCase({
+                items: [
+                    { id: 'i1', type: 'hit', value: 'hit-001', name: 'first-hit' },
+                    { id: 'i2', type: 'event', value: 'obs-002', name: 'obs-two' },
+                    { id: 'i3', type: 'hit', value: 'hit-003', name: 'third-hit' }
+                ]
+            });
+            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();
+        });
+        it('links each chip to /cases/:case_id/:item_path', () => {
+            const _case = createMockCase({
+                case_id: 'case-abc',
+                items: [{ id: 'item-1', type: 'hit', value: 'hit-001', name: 'first-hit' }]
+            });
+            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.d.ts

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { ObservableEntry } from '../types';
+declare const _default: import("react").NamedExoticComponent<{
+    observables: ObservableEntry[];
+    case: Case;
+}>;
+export default _default;

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Typography } from '@mui/material';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import PluginTypography from '@cccsaurora/howler-ui/components/elements/PluginTypography';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+const ROLE_COLORS = {
+    threat: 'error',
+    target: 'warning',
+    indicator: 'info'
+};
+const getSortValue = (observable, column) => {
+    switch (column) {
+        case 'type':
+            return observable.type;
+        case 'value':
+            return observable.value.toLowerCase();
+        case 'role':
+            return observable.role ?? '';
+        case 'seen_in':
+            return observable.sources?.length ?? 0;
+        case 'escalation':
+            return (observable.sources ?? [])
+                .map(s => s.escalation)
+                .filter(Boolean)
+                .join(',');
+        default:
+            return '';
+    }
+};
+const ObservableTable = ({ observables, case: _case }) => {
+    const { t } = useTranslation();
+    const [sortColumn, setSortColumn] = useState('type');
+    const [sortDirection, setSortDirection] = useState('asc');
+    const handleSort = (column) => {
+        if (sortColumn === column) {
+            setSortDirection(prev => (prev === 'asc' ? 'desc' : 'asc'));
+        }
+        else {
+            setSortColumn(column);
+            setSortDirection('asc');
+        }
+    };
+    const sortedObservables = useMemo(() => {
+        return [...observables].sort((a, b) => {
+            const aVal = getSortValue(a, sortColumn);
+            const bVal = getSortValue(b, sortColumn);
+            const cmp = typeof aVal === 'number' && typeof bVal === 'number' ? aVal - bVal : String(aVal).localeCompare(String(bVal));
+            return sortDirection === 'asc' ? cmp : -cmp;
+        });
+    }, [observables, sortColumn, sortDirection]);
+    return (_jsx(TableContainer, { children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sortDirection: sortColumn === 'type' ? sortDirection : false, children: _jsx(TableSortLabel, { active: sortColumn === 'type', direction: sortColumn === 'type' ? sortDirection : 'asc', onClick: () => handleSort('type'), children: t('page.cases.observables.columns.type') }) }), _jsx(TableCell, { sortDirection: sortColumn === 'value' ? sortDirection : false, children: _jsx(TableSortLabel, { active: sortColumn === 'value', direction: sortColumn === 'value' ? sortDirection : 'asc', onClick: () => handleSort('value'), children: t('page.cases.observables.columns.value') }) }), _jsx(TableCell, { sortDirection: sortColumn === 'role' ? sortDirection : false, children: _jsx(TableSortLabel, { active: sortColumn === 'role', direction: sortColumn === 'role' ? sortDirection : 'asc', onClick: () => handleSort('role'), children: t('page.cases.observables.columns.role') }) }), _jsx(TableCell, { align: "right", sortDirection: sortColumn === 'seen_in' ? sortDirection : false, children: _jsx(TableSortLabel, { active: sortColumn === 'seen_in', direction: sortColumn === 'seen_in' ? sortDirection : 'asc', onClick: () => handleSort('seen_in'), children: t('page.cases.observables.columns.seen_in') }) }), _jsx(TableCell, { children: t('page.cases.observables.columns.sources') }), _jsx(TableCell, { sortDirection: sortColumn === 'escalation' ? sortDirection : false, children: _jsx(TableSortLabel, { active: sortColumn === 'escalation', direction: sortColumn === 'escalation' ? sortDirection : 'asc', onClick: () => handleSort('escalation'), children: t('page.cases.observables.columns.escalation') }) })] }) }), _jsx(TableBody, { children: sortedObservables.map(observable => {
+                        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: 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.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createElement } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it, vi } from 'vitest';
+import ObservableTable from './ObservableTable';
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('components/elements/PluginTypography', () => ({
+    default: ({ value }) => createElement('span', null, value)
+}));
+const makeObservable = (overrides = {}) => ({
+    type: 'ip',
+    value: '192.168.1.1',
+    sources: [],
+    ...overrides
+});
+const renderTable = (observables) => {
+    render(_jsx(MemoryRouter, { children: _jsx(ObservableTable, { observables: observables, case: createMockCase({ case_id: 'case-123' }) }) }));
+};
+const getObservableValues = () => screen
+    .getAllByRole('row')
+    .slice(1)
+    .map(row => within(row).getAllByRole('cell')[1].textContent ?? '');
+describe('ObservableTable', () => {
+    it('sorts by type initially and reverses the sort when the active column is clicked', async () => {
+        const user = userEvent.setup();
+        renderTable([
+            makeObservable({ type: 'user', value: 'bravo' }),
+            makeObservable({ type: 'hash', value: 'alpha' }),
+            makeObservable({ type: 'ip', value: 'charlie' })
+        ]);
+        expect(getObservableValues()).toEqual(['alpha', 'charlie', 'bravo']);
+        await user.click(screen.getByText('page.cases.observables.columns.type'));
+        expect(getObservableValues()).toEqual(['bravo', 'charlie', 'alpha']);
+    });
+    it('sorts observables numerically by their source count', async () => {
+        const user = userEvent.setup();
+        renderTable([
+            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']);
+    });
+    it('links a single source and renders its role and escalation', () => {
+        renderTable([
+            makeObservable({
+                role: 'threat',
+                sources: [{ id: 'source-1', type: 'hit', path: 'alerts/one', label: 'Alert one', escalation: 'evidence' }]
+            })
+        ]);
+        expect(screen.getByText('page.cases.observables.role.threat')).toBeInTheDocument();
+        expect(screen.getByText('evidence')).toBeInTheDocument();
+        expect(screen.getByText('Alert one').closest('a')).toHaveAttribute('href', '/cases/case-123/alerts/one');
+    });
+    it('shows every linked source in the popover and de-duplicates escalations', async () => {
+        const user = userEvent.setup();
+        renderTable([
+            makeObservable({
+                sources: [
+                    { id: 'source-1', type: 'hit', path: 'alerts/one', label: 'Alert one', escalation: 'evidence' },
+                    {
+                        id: 'source-2',
+                        type: 'event',
+                        path: 'events/two',
+                        label: 'Event two',
+                        escalation: 'evidence'
+                    },
+                    { id: 'source-3', type: 'case', escalation: 'malicious' }
+                ]
+            })
+        ]);
+        expect(screen.getByText('Alert one (+1)')).toBeInTheDocument();
+        expect(screen.getAllByText('evidence')).toHaveLength(1);
+        expect(screen.getByText('malicious')).toBeInTheDocument();
+        await user.click(screen.getByText('Alert one (+1)'));
+        expect(screen.getByText('Event two').closest('a')).toHaveAttribute('href', '/cases/case-123/events/two');
+    });
+});

package/components/routes/cases/detail/sidebar/CaseFolder.d.ts

@@ -0,0 +1,22 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+import type { Tree } from './types';
+interface CaseFolderProps {
+    case: Case;
+    folder?: Tree;
+    name?: string;
+    step?: number;
+    /**
+     * The chain of case item IDs traversed from the root case to reach this
+     * nested case. Empty at the top level.
+     */
+    parentCaseNames?: string[];
+    /**
+     * Increment this value to collapse all named sub-folders. The root folder
+     * (no `name` prop) is never collapsed so items remain visible.
+     */
+    collapseKey?: number;
+    onItemUpdated?: (newCase: Case) => void;
+}
+declare const CaseFolder: FC<CaseFolderProps>;
+export default CaseFolder;