@cccsaurora/howler-ui 2.19.0-dev.1151 → 2.19.0-dev.1260

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

@@ -0,0 +1,63 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Cancel, Edit, Save } from '@mui/icons-material';
+import { Box, Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
+import ClassificationChip from '@cccsaurora/howler-ui/components/elements/display/ClassificationChip';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useCase from '../hooks/useCase';
+import { buildPathFromID } from '../utils';
+const MarkdownPage = ({ case: _case, item }) => {
+    const { t } = useTranslation();
+    const [isEditing, setIsEditing] = useState(false);
+    const [markdown, setMarkdown] = useState(item.value ?? '');
+    const [saving, setSaving] = useState(false);
+    const { update } = useCase({ case: _case });
+    useEffect(() => {
+        setMarkdown(item.value ?? '');
+        setIsEditing(false);
+    }, [item.id, item.value]);
+    const path = useMemo(() => buildPathFromID(_case, item.parent), [_case, item.parent]);
+    const handleCancel = useCallback(() => {
+        setMarkdown(item.value ?? '');
+        setIsEditing(false);
+    }, [item.value]);
+    const handleSave = useCallback(async () => {
+        if (!_case.case_id || !item.id) {
+            return;
+        }
+        const nextItems = (_case.items ?? []).map(_item => {
+            if (_item.id === item.id) {
+                return {
+                    ..._item,
+                    value: markdown
+                };
+            }
+            return _item;
+        });
+        try {
+            setSaving(true);
+            await update({ items: nextItems });
+            setIsEditing(false);
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [_case.case_id, _case.items, item.id, markdown, update]);
+    return (_jsxs(Box, { p: 1, sx: { mt: -1, minHeight: 'calc(100vh - 64px)', display: 'flex', flexDirection: 'column' }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsxs(Typography, { variant: "h6", color: "text.secondary", children: [path, "/"] }), _jsx(Typography, { variant: "h6", children: item.name })] }), item.classification && _jsx(ClassificationChip, { classification: item.classification, format: "long" }), _jsx("div", { style: { flex: 1 } }), isEditing && (_jsx(Tooltip, { title: t('button.save'), children: _jsx(IconButton, { size: "small", color: "success", onClick: handleSave, disabled: saving, children: _jsx(Save, { fontSize: "small" }) }) })), _jsx(Tooltip, { title: isEditing ? t('button.cancel') : t('edit'), children: _jsx(IconButton, { size: "small", color: isEditing ? 'error' : 'default', onClick: isEditing ? handleCancel : () => setIsEditing(true), disabled: saving, children: isEditing ? _jsx(Cancel, { fontSize: "small" }) : _jsx(Edit, { fontSize: "small" }) }) })] }), _jsx(Divider, {}), isEditing ? (_jsxs(Stack, { direction: { xs: 'column', md: 'row' }, spacing: 1, sx: { mt: 1, flex: 1, minHeight: 0 }, children: [_jsx(Box, { sx: {
+                            flex: 1,
+                            minHeight: 0,
+                            border: theme => `1px solid ${theme.palette.divider}`,
+                            borderRadius: 1,
+                            overflow: 'hidden'
+                        }, children: _jsx(ThemedEditor, { id: "markdown-editor", language: "markdown", value: markdown, onChange: value => setMarkdown(value ?? ''), options: { wordWrap: 'on', scrollBeyondLastLine: false }, height: "100%" }) }), _jsx(Box, { sx: {
+                            flex: 1,
+                            minHeight: 0,
+                            border: theme => `1px solid ${theme.palette.divider}`,
+                            borderRadius: 1,
+                            p: 1,
+                            overflow: 'auto'
+                        }, children: _jsx(Markdown, { md: markdown }) })] })) : (_jsx(Markdown, { md: markdown }))] }));
+};
+export default MarkdownPage;

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

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

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

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockUpdate = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({
+        case: c,
+        update: mockUpdate,
+        loading: false,
+        missing: false
+    })
+}));
+vi.mock('components/elements/display/ClassificationChip', () => ({
+    default: () => _jsx("span", { id: "classification-chip" })
+}));
+vi.mock('components/elements/display/Markdown', () => ({
+    default: ({ md }) => _jsx("div", { id: "markdown-preview", children: md })
+}));
+vi.mock('components/elements/ThemedEditor', () => ({
+    default: ({ id, value, onChange }) => (_jsx("textarea", { id: id ?? 'themed-editor', value: value ?? '', onChange: ev => onChange?.(ev.target.value) }))
+}));
+const { default: MarkdownPage } = await import('./MarkdownPage');
+describe('MarkdownPage', () => {
+    let user;
+    let markdownItem;
+    let _case;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        markdownItem = {
+            id: 'item-1',
+            parent: null,
+            type: 'markdown',
+            name: 'Analyst Notes',
+            value: 'Initial markdown value',
+            classification: 'TLP:CLEAR'
+        };
+        _case = createMockCase({
+            case_id: 'case-1',
+            items: [
+                markdownItem,
+                {
+                    id: 'item-2',
+                    parent: null,
+                    type: 'markdown',
+                    name: 'Other Item',
+                    value: 'Keep this value'
+                }
+            ]
+        });
+    });
+    it('renders read mode by default', () => {
+        render(_jsx(MarkdownPage, { case: _case, item: markdownItem }));
+        expect(screen.getByText('Initial markdown value')).toBeInTheDocument();
+        expect(screen.queryByRole('textbox')).toBeNull();
+        expect(screen.getByRole('button', { name: 'edit' })).toBeInTheDocument();
+    });
+    it('enters edit mode and updates preview as content changes', async () => {
+        render(_jsx(MarkdownPage, { case: _case, item: markdownItem }));
+        await user.click(screen.getByRole('button', { name: 'edit' }));
+        const editor = screen.getByRole('textbox');
+        expect(editor).toHaveValue('Initial markdown value');
+        await user.clear(editor);
+        await user.type(editor, 'Updated markdown preview');
+        expect(screen.getByTestId('markdown-preview')).toHaveTextContent('Updated markdown preview');
+    });
+    it('cancels edits and restores the original item value', async () => {
+        render(_jsx(MarkdownPage, { case: _case, item: markdownItem }));
+        await user.click(screen.getByRole('button', { name: 'edit' }));
+        const editor = screen.getByRole('textbox');
+        await user.clear(editor);
+        await user.type(editor, 'Unsaved value');
+        await user.click(screen.getByRole('button', { name: 'button.cancel' }));
+        expect(screen.queryByRole('textbox')).toBeNull();
+        expect(screen.getByText('Initial markdown value')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'edit' }));
+        expect(screen.getByRole('textbox')).toHaveValue('Initial markdown value');
+    });
+    it('saves edits through update and exits edit mode', async () => {
+        render(_jsx(MarkdownPage, { case: _case, item: markdownItem }));
+        await user.click(screen.getByRole('button', { name: 'edit' }));
+        const editor = screen.getByRole('textbox');
+        await user.clear(editor);
+        await user.type(editor, 'Persisted value');
+        await user.click(screen.getByRole('button', { name: 'button.save' }));
+        await waitFor(() => {
+            expect(mockUpdate).toHaveBeenCalledOnce();
+        });
+        expect(mockUpdate).toHaveBeenCalledWith({
+            items: [
+                {
+                    id: 'item-1',
+                    parent: null,
+                    type: 'markdown',
+                    name: 'Analyst Notes',
+                    value: 'Persisted value',
+                    classification: 'TLP:CLEAR'
+                },
+                {
+                    id: 'item-2',
+                    parent: null,
+                    type: 'markdown',
+                    name: 'Other Item',
+                    value: 'Keep this value'
+                }
+            ]
+        });
+        await waitFor(() => {
+            expect(screen.queryByRole('textbox')).toBeNull();
+        });
+        expect(screen.getByText('Persisted value')).toBeInTheDocument();
+    });
+});

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

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

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Pagination, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import { chunk, uniq } from 'lodash-es';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import CaseCard from '../../../elements/case/CaseCard';
+const RelatedCasePanel = ({ case: _case }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const [casePage, setCasePage] = useState(1);
+    const casePages = useMemo(() => chunk(uniq((_case?.items ?? []).filter(item => item.type === 'case')), 5), [_case?.items]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 240 });
+    }
+    if (casePages.length < 1) {
+        return null;
+    }
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.cases') }), _jsx(Pagination, { count: casePages.length, page: casePage, onChange: (_, page) => setCasePage(page) })] }), _jsx(Divider, {}), casePages[casePage - 1]?.map(item => (_jsxs(Box, { position: "relative", children: [_jsx(CaseCard, { caseId: item.value }), _jsx(Box, { component: Link, to: `/cases/${item.value}`, sx: {
+                            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}`
+                            }
+                        } })] }, item.id ?? item.value)))] }));
+};
+export default RelatedCasePanel;

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

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

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

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } 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';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockCaseCardProps = vi.hoisted(() => ({ current: [] }));
+// ---------------------------------------------------------------------------
+// Module mocks
+// ---------------------------------------------------------------------------
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+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('../../../elements/case/CaseCard', () => ({
+    default: (props) => {
+        mockCaseCardProps.current.push(props);
+        return _jsx("div", { id: `case-card-${String(props.caseId)}` });
+    }
+}));
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import RelatedCasePanel from './RelatedCasePanel';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const renderPanel = (caseValue) => {
+    return render(_jsx(MemoryRouter, { children: _jsx(RelatedCasePanel, { case: caseValue }) }));
+};
+const makeCaseItem = (value, id = value) => ({
+    type: 'case',
+    value,
+    id,
+    name: null,
+    parent: null
+});
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockCaseCardProps.current = [];
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('RelatedCasePanel', () => {
+    it('renders a skeleton when the case is null', () => {
+        const { container } = renderPanel(null);
+        expect(container.querySelector('.MuiSkeleton-root')).toBeTruthy();
+    });
+    it('renders nothing when the case has no case-type items', () => {
+        const baseCase = createMockCase({ case_id: 'case-no-cases', items: [{ type: 'hit', value: 'hit-1' }] });
+        const { container } = renderPanel(baseCase);
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('renders the translated heading key', () => {
+        const _case = createMockCase({ case_id: 'case-1', items: [makeCaseItem('child-1')] });
+        renderPanel(_case);
+        expect(screen.getByText('page.cases.dashboard.cases')).toBeInTheDocument();
+    });
+    it('renders CaseCard only for unique case items on the current page', () => {
+        const duplicate = makeCaseItem('child-1', '/cases/test/path-a');
+        const _case = createMockCase({
+            case_id: 'case-2',
+            items: [
+                duplicate,
+                duplicate,
+                makeCaseItem('child-2', '/cases/test/path-b'),
+                { type: 'event', value: 'event-1' }
+            ]
+        });
+        renderPanel(_case);
+        expect(screen.getByTestId('case-card-child-1')).toBeInTheDocument();
+        expect(screen.getByTestId('case-card-child-2')).toBeInTheDocument();
+        expect(screen.queryByTestId('case-card-event-1')).not.toBeInTheDocument();
+        expect(mockCaseCardProps.current).toHaveLength(2);
+        expect(mockCaseCardProps.current[0]).toEqual(expect.objectContaining({
+            caseId: 'child-1'
+        }));
+    });
+    it('renders overlay links that target each case path', () => {
+        const _case = createMockCase({
+            case_id: 'case-3',
+            items: [makeCaseItem('child-1', '/cases/case-3/path-one'), makeCaseItem('child-2', '/cases/case-3/path-two')]
+        });
+        const { container } = renderPanel(_case);
+        const links = Array.from(container.querySelectorAll('a'));
+        expect(links).toHaveLength(2);
+        expect(links[0]).toHaveAttribute('href', '/cases/child-1');
+        expect(links[1]).toHaveAttribute('href', '/cases/child-2');
+    });
+    it('shows pagination with multiple pages and switches to page 2 items', () => {
+        const items = Array.from({ length: 6 }, (_, idx) => makeCaseItem(`child-${idx + 1}`, `/cases/test/child-${idx + 1}`));
+        const _case = createMockCase({ case_id: 'case-4', items });
+        renderPanel(_case);
+        expect(screen.getByTestId('case-card-child-1')).toBeInTheDocument();
+        expect(screen.getByTestId('case-card-child-5')).toBeInTheDocument();
+        expect(screen.queryByTestId('case-card-child-6')).not.toBeInTheDocument();
+        const pageTwoButton = screen.getByRole('button', { name: 'Go to page 2' });
+        fireEvent.click(pageTwoButton);
+        expect(screen.getByTestId('case-card-child-6')).toBeInTheDocument();
+        expect(screen.queryByTestId('case-card-child-1')).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const TaskPanel: FC<{
+    case: Case;
+    updateCase: (_case: Partial<Case>) => Promise<void>;
+}>;
+export default TaskPanel;

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx, Fragment as _Fragment, 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;
+        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;