@cccsaurora/howler-ui 2.19.0-dev.1181 → 2.19.0-dev.1264

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,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));
+                                }) })] }))] }) }) }));
+};
+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,72 @@
+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',
+    seenIn: [],
+    ...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('seen-in chips', () => {
+        it('renders nothing when seenIn is empty', () => {
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ seenIn: [] }), case: createMockCase() }) }));
+            expect(screen.queryByText('page.cases.observables.seen_in')).toBeNull();
+        });
+        it('renders "Seen in" label when seenIn has entries', () => {
+            const _case = createMockCase({
+                items: [{ type: 'hit', value: 'hit-001' }]
+            });
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ seenIn: ['hit-001'] }), case: _case }) }));
+            expect(screen.getByText('page.cases.observables.seen_in')).toBeTruthy();
+        });
+        it('renders chips labelled from item name/value for each seenIn id', () => {
+            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({ seenIn: ['hit-001', 'obs-002', 'hit-003'] }), 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({ seenIn: ['hit-001'] }), 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.seenIn.length;
+        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: 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}`));
+                    }) })] }) }));
+};
+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,85 @@
+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';
+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',
+    seenIn: [],
+    ...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 seen-in 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'] })
+        ]);
+        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: 'observable',
+                        path: 'observables/two',
+                        label: 'Observable 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('Observable two').closest('a')).toHaveAttribute('href', '/cases/case-123/observables/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;

package/components/routes/cases/detail/sidebar/CaseFolder.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Skeleton, Stack, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { buildPathFromID } from '../../utils';
+import CaseFolderContextMenu from './CaseFolderContextMenu';
+import FolderEntry from './FolderEntry';
+import { buildTree } from './utils';
+const CaseFolder = ({ case: _case, folder, name, step = -1, parentCaseNames = [], collapseKey, onItemUpdated }) => {
+    const theme = useTheme();
+    const { dispatchApi } = useMyApi();
+    const params = useParams();
+    const [open, setOpen] = useState(!name || !collapseKey);
+    const [caseStates, setCaseStates] = useState({});
+    // Collapse this folder (and clear nested case expansions) when the parent
+    // signals collapse-all. Only named folders (not the invisible root) respond.
+    useEffect(() => {
+        if (!collapseKey) {
+            return;
+        }
+        setCaseStates(_states => Object.fromEntries(Object.entries(_states).map(([id, entry]) => [id, { ...entry, open: false }])));
+        if (name) {
+            setOpen(false);
+        }
+    }, [collapseKey, name]);
+    const records = useContextSelector(RecordContext, ctx => ctx.records);
+    const tree = useMemo(() => folder || buildTree(_case?.items), [folder, _case?.items]);
+    const rootCaseId = params.id;
+    // Returns the MUI colour token for the item's escalation, or undefined if none.
+    const getEscalationColor = (itemType, leaf) => {
+        if (itemType === 'hit' && leaf.value) {
+            const color = ESCALATION_COLORS[records[leaf.value]?.howler?.escalation];
+            if (color)
+                return color;
+        }
+        if (itemType === 'case' && leaf.value) {
+            const color = ESCALATION_COLORS[caseStates[leaf.value]?.data?.escalation];
+            if (color)
+                return color;
+        }
+        return null;
+    };
+    const toggleCase = useCallback((item) => {
+        const prev = caseStates[item.value] ?? { open: false, loading: false, data: null };
+        const shouldOpen = !prev.open;
+        const shouldFetch = shouldOpen && !!item.value && !prev.data && !prev.loading;
+        setCaseStates(current => ({ ...current, [item.value]: { ...prev, open: shouldOpen, loading: shouldFetch } }));
+        if (!shouldFetch)
+            return;
+        dispatchApi(api.v2.case.get(item.value), { throwError: false })
+            .then(caseResponse => {
+            if (!caseResponse)
+                return;
+            setCaseStates(current => ({ ...current, [item.value]: { ...current[item.value], data: caseResponse } }));
+        })
+            .finally(() => {
+            setCaseStates(current => ({ ...current, [item.value]: { ...current[item.value], loading: false } }));
+        });
+    }, [caseStates, dispatchApi]);
+    return (_jsxs(Stack, { sx: { overflow: 'visible' }, children: [name && (_jsx(CaseFolderContextMenu, { case: _case, item: folder.item, onUpdate: onItemUpdated, children: _jsx(Box, { sx: {
+                        transition: theme.transitions.create('background', { duration: 100 }),
+                        background: 'transparent',
+                        '&:hover': { background: theme.palette.grey[800] }
+                    }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, indent: step * 1.5, label: name, chevronOpen: open, onClick: () => setOpen(_open => !_open), entry: folder.item }) }) })), open && (_jsxs(_Fragment, { children: [tree.leaves
+                        ?.filter(leaf => leaf.type?.toLowerCase() === 'case')
+                        .map(leaf => {
+                        const itemType = leaf.type?.toLowerCase();
+                        const nodeState = leaf.value ? caseStates[leaf.value] : null;
+                        const isCaseOpen = !!nodeState?.open;
+                        const isCaseLoading = !!nodeState?.loading;
+                        const nestedCase = nodeState?.data ?? null;
+                        const fullItemPath = [...parentCaseNames, leaf.name].filter(Boolean).join('/');
+                        const itemTo = `/cases/${rootCaseId}${fullItemPath ? `/${fullItemPath}` : ''}`;
+                        const escalationColor = getEscalationColor(itemType, leaf);
+                        const iconColor = escalationColor ?? 'inherit';
+                        const leafColor = escalationColor ? `${escalationColor}.light` : 'text.secondary';
+                        return (_jsx(CaseFolderContextMenu, { case: _case, item: leaf, onUpdate: onItemUpdated, children: _jsxs(Stack, { children: [_jsx(Box, { sx: {
+                                            transition: theme.transitions.create('background', { duration: 100 }),
+                                            background: 'transparent',
+                                            '&:hover': { background: theme.palette.grey[800] }
+                                        }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, indent: step * 1.5 + 1, label: leaf.name ?? leaf.value ?? '', iconColor: iconColor, labelColor: leafColor, chevronOpen: isCaseOpen, to: itemTo, onClick: () => toggleCase(leaf), entry: leaf }) }), isCaseOpen && isCaseLoading && (_jsx(Stack, { pl: step * 1.5 + 4, py: 0.25, children: _jsx(Skeleton, { width: 140, height: 16 }) })), isCaseOpen && nestedCase && (_jsx(CaseFolder, { case: nestedCase, step: step + 1, parentCaseNames: [...parentCaseNames, leaf.name].filter(Boolean), onItemUpdated: onItemUpdated, collapseKey: collapseKey }))] }) }, `${_case?.case_id}-${leaf.id}-${leaf.value}`));
+                    }), Object.entries(tree.folders ?? {}).map(([folderName, subfolder]) => {
+                        return (_jsx(CaseFolder, { name: folderName, case: _case, folder: subfolder, step: step + 1, parentCaseNames: parentCaseNames, onItemUpdated: onItemUpdated, collapseKey: collapseKey }, subfolder.item.id));
+                    }), tree.leaves
+                        ?.filter(leaf => leaf.type?.toLowerCase() !== 'case')
+                        .map(leaf => {
+                        const itemType = leaf.type?.toLowerCase();
+                        const fullItemPath = [...parentCaseNames, buildPathFromID(_case, leaf.id)].filter(Boolean).join('/');
+                        const itemTo = itemType !== 'reference' ? `/cases/${rootCaseId}${fullItemPath ? `/${fullItemPath}` : ''}` : leaf.value;
+                        const escalationColor = getEscalationColor(itemType, leaf);
+                        const iconColor = escalationColor ?? 'inherit';
+                        const leafColor = escalationColor ? `${escalationColor}.light` : 'text.secondary';
+                        return (_jsx(CaseFolderContextMenu, { case: _case, item: leaf, onUpdate: onItemUpdated, children: _jsx(Box, { sx: {
+                                    transition: theme.transitions.create('background', { duration: 100 }),
+                                    background: 'transparent',
+                                    '&:hover': { background: theme.palette.grey[800] }
+                                }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, indent: step * 1.5 + 1, label: leaf.name ?? leaf.value ?? '', iconColor: iconColor, labelColor: leafColor, to: itemTo, entry: leaf }) }) }, `${_case?.case_id}-${leaf.id}-${leaf.value}`));
+                    })] }))] }));
+};
+export default CaseFolder;

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

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

package/components/routes/cases/detail/sidebar/CaseFolder.test.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { act, createContext } from 'react';
+import { setupContextSelectorMock, setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+setupReactRouterMock();
+vi.mock('@dnd-kit/core', () => ({
+    useDraggable: () => ({ attributes: {}, listeners: {}, setNodeRef: vi.fn(), transform: null, isDragging: false }),
+    useDroppable: () => ({ setNodeRef: vi.fn(), isOver: false })
+}));
+vi.mock('@dnd-kit/utilities', () => ({
+    CSS: { Transform: { toString: () => '' } }
+}));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockGetCase = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: (...args) => mockGetCase(...args),
+                items: { del: vi.fn(), patch: vi.fn() }
+            }
+        }
+    }
+}));
+vi.mock('./CaseFolderContextMenu', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/app/providers/ModalProvider', async () => ({
+    ModalContext: createContext({ showModal: vi.fn(), close: vi.fn(), setContent: vi.fn() })
+}));
+const mockRecords = vi.hoisted(() => ({ current: {} }));
+vi.mock('components/app/providers/RecordProvider', async () => ({
+    RecordContext: createContext({ records: mockRecords.current })
+}));
+import { MemoryRouter, useParams } from 'react-router-dom';
+import CaseFolder from './CaseFolder';
+const makeCase = (id, items = []) => ({
+    __index: 'case',
+    case_id: id,
+    title: `Case ${id}`,
+    items,
+    tasks: []
+});
+const hitItem = (name, value = name, id = `id-${value}`) => ({ id, type: 'hit', value, name });
+const caseItem = (name, value, id = `id-${value}`) => ({ id, type: 'case', value, name });
+const refItem = (name, value, id = `id-${value}`) => ({ id, type: 'reference', value, name });
+const renderFolder = (props, routeId) => {
+    vi.mocked(useParams).mockReturnValue({ id: routeId ?? props.case.case_id });
+    return render(_jsx(MemoryRouter, { children: _jsx(CaseFolder, { step: 0, ...props }) }));
+};
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockGetCase.mockReset();
+    mockRecords.current = {};
+});
+describe('CaseFolder', () => {
+    it('builds non-reference leaf URLs from root case id and item path', () => {
+        renderFolder({ case: makeCase('case-1', [hitItem('my-hit', 'hit-id', 'item-1')]) });
+        const link = screen.getByText('my-hit').closest('a');
+        expect(link).toHaveAttribute('href', '/cases/case-1/my-hit');
+    });
+    it('uses item value directly for reference href', () => {
+        renderFolder({ case: makeCase('case-1', [refItem('ext', 'https://example.com')]) });
+        const link = screen.getByText('ext').closest('a');
+        expect(link).toHaveAttribute('href', 'https://example.com');
+    });
+    it('prepends parentCaseNames to non-reference item paths', () => {
+        renderFolder({
+            case: makeCase('nested', [hitItem('page', 'page-val', 'id-page')]),
+            parentCaseNames: ['Child Case']
+        }, 'root-case');
+        const link = screen.getByText('page').closest('a');
+        expect(link?.getAttribute('href')).toBe('/cases/root-case/Child Case/page');
+    });
+    it('fetches nested case when case leaf is clicked and renders nested leaves', async () => {
+        const nestedCase = makeCase('child-case-id', [hitItem('nested-item', 'v1', 'nested-id')]);
+        mockGetCase.mockReturnValue(Promise.resolve(nestedCase));
+        mockDispatchApi.mockImplementation((p) => p);
+        renderFolder({ case: makeCase('root', [caseItem('child', 'child-case-id', 'child-id')]) });
+        act(() => {
+            screen.getByText('child').click();
+        });
+        await waitFor(() => {
+            expect(mockGetCase).toHaveBeenCalledWith('child-case-id');
+            expect(screen.getByText('nested-item')).toBeInTheDocument();
+        });
+    });
+    it('uses route case id as root id for nested links', () => {
+        renderFolder({ case: makeCase('nested-case', [hitItem('item', 'v', 'id-v')]) }, 'root-case');
+        const link = screen.getByText('item').closest('a');
+        expect(link).toHaveAttribute('href', '/cases/root-case/item');
+    });
+});

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

@@ -0,0 +1,32 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
+import { type FC, type PropsWithChildren } from 'react';
+import type { Tree } from './types';
+/**
+ * Recursively collects all leaf items from a folder tree.
+ */
+export declare const collectAllLeaves: (tree: Tree) => Item[];
+/**
+ * Returns the URL to open for a given leaf item, or null if no URL applies.
+ * - reference: the item's value (an external URL)
+ * - hit: /hits/<id>
+ * - event: /events/<id>
+ * - case: /cases/<id>
+ * - table / lead: null (no dedicated detail page)
+ */
+export declare const getOpenUrl: (leaf: Item) => string | null;
+export interface CaseFolderContextMenuProps extends PropsWithChildren {
+    /** The case that owns the item(s). */
+    case: Case;
+    /** Present when the context menu is for a single leaf item. */
+    item: Item;
+    /** Called after item(s) have been updated (renamed, removed). */
+    onUpdate?: (updatedCase: Case) => void;
+}
+/**
+ * Wraps its children with a right-click context menu providing:
+ * - **Open item** – opens the item in a new tab (only for leaf items with a navigable URL).
+ * - **Remove item / Remove folder** – deletes the leaf item or all items under a folder.
+ */
+declare const CaseFolderContextMenu: FC<CaseFolderContextMenuProps>;
+export default CaseFolderContextMenu;