@cccsaurora/howler-ui 2.18.0-dev.794 → 2.18.0-dev.799

package/api/index.d.ts

@@ -8,6 +8,7 @@ import * as hit from '@cccsaurora/howler-ui/api/hit';
 import * as notebook from '@cccsaurora/howler-ui/api/notebook';
 import * as overview from '@cccsaurora/howler-ui/api/overview';
 import * as search from '@cccsaurora/howler-ui/api/search';
+import * as socket from '@cccsaurora/howler-ui/api/socket';
 import * as template from '@cccsaurora/howler-ui/api/template';
 import * as user from '@cccsaurora/howler-ui/api/user';
 import * as v2 from '@cccsaurora/howler-ui/api/v2';
@@ -25,6 +26,7 @@ declare const api: {
     hit: typeof hit;
     overview: typeof overview;
     search: typeof search;
+    socket: typeof socket;
     template: typeof template;
     user: typeof user;
     view: typeof view;

package/api/index.js

@@ -8,6 +8,7 @@ import * as hit from '@cccsaurora/howler-ui/api/hit';
 import * as notebook from '@cccsaurora/howler-ui/api/notebook';
 import * as overview from '@cccsaurora/howler-ui/api/overview';
 import * as search from '@cccsaurora/howler-ui/api/search';
+import * as socket from '@cccsaurora/howler-ui/api/socket';
 import * as template from '@cccsaurora/howler-ui/api/template';
 import * as user from '@cccsaurora/howler-ui/api/user';
 import * as v2 from '@cccsaurora/howler-ui/api/v2';
@@ -36,6 +37,7 @@ const api = {
     hit,
     overview,
     search,
+    socket,
     template,
     user,
     view,
@@ -59,6 +61,10 @@ export const uri = () => {
  * @returns `string` - properly formatted howler uri.
  */
 const format = (_uri) => {
+    // skip validation if we're hitting the socket endpoints
+    if (_uri.startsWith('/socket')) {
+        return _uri;
+    }
     return _uri.startsWith('/api') ? _uri : `${uri()}/${_uri.replace(/\/$/, '')}`;
 };
 /**

package/api/socket/index.d.ts

@@ -0,0 +1,3 @@
+import * as viewers from '@cccsaurora/howler-ui/api/socket/viewers';
+export declare const uri: () => string;
+export { viewers };

package/api/socket/index.js

@@ -0,0 +1,6 @@
+import { joinAllUri } from '@cccsaurora/howler-ui/api';
+import * as viewers from '@cccsaurora/howler-ui/api/socket/viewers';
+export const uri = () => {
+    return joinAllUri('/socket', 'v1');
+};
+export { viewers };

package/api/socket/viewers.d.ts

@@ -0,0 +1,2 @@
+export declare const uri: (entityId?: string) => string;
+export declare const get: (entityId: string) => Promise<string[]>;

package/api/socket/viewers.js

@@ -0,0 +1,8 @@
+import { hget, joinAllUri } from '@cccsaurora/howler-ui/api';
+import { uri as parentUri } from '@cccsaurora/howler-ui/api/socket';
+export const uri = (entityId) => {
+    return entityId ? joinAllUri(parentUri(), 'viewers', entityId) : joinAllUri(parentUri(), 'viewers');
+};
+export const get = async (entityId) => {
+    return hget(uri(entityId));
+};

package/api/socket/viewers.test.d.ts

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

package/api/socket/viewers.test.js

@@ -0,0 +1,44 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockHget = vi.hoisted(() => vi.fn());
+vi.mock('api', async () => {
+    const urlJoin = (await import('url-join')).default;
+    return {
+        hget: mockHget,
+        joinAllUri: (...parts) => urlJoin(...parts)
+    };
+});
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+// eslint-disable-next-line
+import { get } from './viewers';
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockHget.mockReset();
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('viewers API', () => {
+    describe('get', () => {
+        it('calls hget with the correct URI', async () => {
+            mockHget.mockResolvedValue(['alice', 'bob']);
+            await get('entity-1');
+            expect(mockHget).toHaveBeenCalledWith('/socket/v1/viewers/entity-1');
+        });
+        it('returns the result from hget', async () => {
+            mockHget.mockResolvedValue(['alice', 'bob']);
+            const result = await get('entity-1');
+            expect(result).toEqual(['alice', 'bob']);
+        });
+        it('propagates errors from hget', async () => {
+            mockHget.mockRejectedValue(new Error('not found'));
+            await expect(get('entity-1')).rejects.toThrow('not found');
+        });
+    });
+});

package/components/app/hooks/useTitle.js

@@ -12,7 +12,7 @@ const useTitle = () => {
     const params = useParams();
     const searchParams = useSearchParams()[0];
     const sitemap = useMySitemap();
-    const { getAnalyticFromId } = useContext(AnalyticContext);
+    const { getAnalyticFromId } = useContext(AnalyticContext) ?? {};
     const hits = useContextSelector(RecordContext, ctx => ctx.records);
     const getHit = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const setTitle = useCallback((title) => {
@@ -21,7 +21,7 @@ const useTitle = () => {
     const runChecks = useCallback(async () => {
         const searchType = location.pathname.replace(/^\/(\w+)(\/.+)?$/, '$1').replace(/s$/, '');
         if (searchType === 'analytic') {
-            if (params.id) {
+            if (params.id && getAnalyticFromId) {
                 const analytic = await getAnalyticFromId(params.id);
                 if (analytic) {
                     setTitle(`${t('route.analytics.view')} - ${analytic.name}`);

package/components/app/providers/SocketProvider.d.ts

@@ -48,9 +48,18 @@ interface SocketContextType {
      */
     reconnect: () => void;
     /**
-     * Helper function to tell if the socket is open
+     * Helper to tell if the socket is open
      */
-    isOpen: () => boolean;
+    open: boolean;
+    /**
+     * A map of entity IDs to their current viewers.
+     */
+    viewers: Record<string, string[]>;
+    /**
+     * Fetch the current viewers for an entity via REST, then keep in sync via socket.
+     * @param entityId The entity ID to fetch viewers for
+     */
+    fetchViewers: (entityId: string) => Promise<void>;
 }
 export declare const SocketContext: import("react").Context<SocketContextType>;
 declare const SocketProvider: React.FC<PropsWithChildren>;

package/components/app/providers/SocketProvider.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable no-console */
 import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { createContext, useCallback, useEffect, useRef, useState } from 'react';
+import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { getStored, setAxiosCache, setStored } from '@cccsaurora/howler-ui/utils/sessionStorage';
-import { isHitUpdate } from '@cccsaurora/howler-ui/utils/socketUtils';
+import { isHitUpdate, isViewersUpdate } from '@cccsaurora/howler-ui/utils/socketUtils';
 /**
  * Enum to help track the status of the Websocket, since the corresponding websocket enums are directly on the object
  */
@@ -19,6 +20,7 @@ export var Status;
 export const SocketContext = createContext(null);
 const SocketProvider = ({ children }) => {
     const { get } = useMyLocalStorage();
+    const { dispatchApi } = useMyApi();
     // In order to persist the connection through state changes, we use a ref
     const socket = useRef();
     // Due to react setState race conditions, listeners are also stored in a ref
@@ -31,6 +33,8 @@ const SocketProvider = ({ children }) => {
     const [retry, setRetry] = useState(true);
     // Track the number of failed attempts when connecting to the server
     const [failedAttempts, setFailedAttempts] = useState(0);
+    // Track active viewers per entity ID
+    const [viewers, setViewers] = useState({});
     const onClose = useCallback(e => {
         // https://www.rfc-editor.org/rfc/rfc6455:
         // 1006 is a reserved value and MUST NOT be set as a status code in a
@@ -183,7 +187,7 @@ const SocketProvider = ({ children }) => {
     const addListener = useCallback((key, callback) => {
         // If a listener with the same key already exists, remove it.
         if (listeners.current[key]) {
-            socket.current?.removeEventListener('message', listeners[key]);
+            socket.current?.removeEventListener('message', listeners.current[key]);
         }
         // We wrap the callback so that all the listeners don't need to JSON.parse the data
         const wrapped = ev => {
@@ -200,6 +204,9 @@ const SocketProvider = ({ children }) => {
                     api_status_code: parsedData.status
                 });
             }
+            if (isViewersUpdate(parsedData)) {
+                setViewers(prev => ({ ...prev, [parsedData.id]: parsedData.viewers }));
+            }
             callback(parsedData);
         };
         socket.current?.addEventListener('message', wrapped);
@@ -219,8 +226,14 @@ const SocketProvider = ({ children }) => {
         }
         socket.current?.send(data);
     }, [status]);
-    const isOpen = useCallback(() => status === Status.OPEN, [status]);
+    const open = useMemo(() => status === Status.OPEN, [status]);
     const reconnect = useCallback(() => setRetry(true), []);
-    return (_jsx(SocketContext.Provider, { value: { addListener, removeListener, emit, status, reconnect, isOpen }, children: children }));
+    const fetchViewers = useCallback(async (entityId) => {
+        const result = await dispatchApi(api.socket.viewers.get(entityId), { throwError: false });
+        if (result) {
+            setViewers(prev => ({ ...prev, [entityId]: result }));
+        }
+    }, [dispatchApi]);
+    return (_jsx(SocketContext.Provider, { value: { addListener, removeListener, emit, status, reconnect, open, viewers, fetchViewers }, children: children }));
 };
 export default SocketProvider;

package/components/elements/hit/elements/Assigned.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { avatarClasses, AvatarGroup, Chip, Stack } from '@mui/material';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import { uniq } from 'lodash-es';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { HitLayout } from '../HitLayout';
 const Assigned = ({ hit, layout, hideLabel = false }) => {
     const { t } = useTranslation();
     const { user } = useAppUser();
+    const { viewers } = useContext(SocketContext);
+    const hitViewers = uniq(viewers[hit?.howler?.id] ?? []).filter(viewer => viewer !== user.username);
     const userAvatar = (_jsx(HowlerAvatar, { userId: hit.howler.assignment, sx: { height: layout !== HitLayout.COMFY ? 24 : 32, width: layout !== HitLayout.COMFY ? 24 : 32 } }));
     return (_jsxs(Stack, { direction: "row", spacing: 0.5, children: [hideLabel ? (userAvatar) : (_jsx(Chip, { variant: "outlined", sx: {
                     width: 'fit-content',
@@ -24,8 +29,6 @@ const Assigned = ({ hit, layout, hideLabel = false }) => {
                             fontSize: '12px'
                         }
                     }
-                }, children: [...new Set(hit?.howler.viewers)]
-                    .filter(viewer => viewer !== user.username)
-                    .map(viewer => (_jsx(HowlerAvatar, { userId: viewer, sx: { height: layout !== HitLayout.COMFY ? 24 : 32, width: layout !== HitLayout.COMFY ? 24 : 32 } }, viewer))) })] }));
+                }, children: hitViewers.map(viewer => (_jsx(HowlerAvatar, { userId: viewer, sx: { height: layout !== HitLayout.COMFY ? 24 : 32, width: layout !== HitLayout.COMFY ? 24 : 32 } }, viewer))) })] }));
 };
 export default Assigned;

package/components/elements/hit/elements/Assigned.test.d.ts

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

package/components/elements/hit/elements/Assigned.test.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+vi.mock('commons/components/app/hooks', () => ({
+    useAppUser: () => ({ user: { username: 'current-user' } })
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: `avatar-${userId}`, children: userId })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+import { HitLayout } from '../HitLayout';
+import Assigned from './Assigned';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const createWrapper = (viewers) => {
+    const Wrapper = ({ children }) => (_jsx(SocketContext.Provider, { value: {
+            viewers,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            emit: vi.fn(),
+            status: 1,
+            reconnect: vi.fn(),
+            isOpen: () => true,
+            fetchViewers: vi.fn()
+        }, children: children }));
+    return Wrapper;
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('Assigned', () => {
+    it('renders the assignment avatar', () => {
+        const hit = createMockHit({ howler: { assignment: 'analyst-1' } });
+        render(_jsx(Assigned, { hit: hit, layout: HitLayout.COMFY }), { wrapper: createWrapper({}) });
+        expect(screen.getByTestId('avatar-analyst-1')).toBeInTheDocument();
+    });
+    it('renders viewer avatars from socket context, filtering out current user', () => {
+        const hit = createMockHit({ howler: { id: 'hit-1', assignment: 'analyst-1' } });
+        render(_jsx(Assigned, { hit: hit, layout: HitLayout.COMFY }), {
+            wrapper: createWrapper({ 'hit-1': ['viewer-a', 'viewer-b', 'current-user'] })
+        });
+        expect(screen.getByTestId('avatar-viewer-a')).toBeInTheDocument();
+        expect(screen.getByTestId('avatar-viewer-b')).toBeInTheDocument();
+        expect(screen.queryByText('current-user')).not.toBeInTheDocument();
+    });
+    it('renders no viewer avatars when no viewers exist', () => {
+        const hit = createMockHit({ howler: { id: 'hit-2', assignment: 'analyst-1' } });
+        render(_jsx(Assigned, { hit: hit, layout: HitLayout.COMFY }), { wrapper: createWrapper({}) });
+        expect(screen.getByTestId('avatar-analyst-1')).toBeInTheDocument();
+        expect(screen.queryByTestId('avatar-viewer-a')).not.toBeInTheDocument();
+    });
+});

package/components/routes/cases/CaseViewer.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack } from '@mui/material';
-import { memo } from 'react';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { memo, useContext, useEffect } from 'react';
 import { Outlet, useParams } from 'react-router-dom';
 import NotFoundPage from '../404';
 import ErrorBoundary from '../ErrorBoundary';
@@ -10,6 +11,27 @@ import useCase from './hooks/useCase';
 const CaseViewer = () => {
     const params = useParams();
     const { case: _case, missing, update } = useCase({ caseId: params.id });
+    const { emit, open, fetchViewers } = useContext(SocketContext);
+    useEffect(() => {
+        if (!params.id) {
+            return;
+        }
+        fetchViewers(params.id);
+        if (open) {
+            emit({
+                broadcast: false,
+                action: 'viewing',
+                id: params.id
+            });
+            return () => {
+                emit({
+                    broadcast: false,
+                    action: 'stop_viewing',
+                    id: params.id
+                });
+            };
+        }
+    }, [emit, params.id, open, fetchViewers]);
     if (missing) {
         return _jsx(NotFoundPage, {});
     }

package/components/routes/cases/CaseViewer.test.d.ts

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

package/components/routes/cases/CaseViewer.test.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, waitFor } from '@testing-library/react';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockEmit = vi.hoisted(() => vi.fn());
+const mockFetchViewers = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockOpen = vi.hoisted(() => ({ current: true }));
+const mockAddListener = vi.hoisted(() => vi.fn());
+const mockRemoveListener = vi.hoisted(() => vi.fn());
+const mockParams = vi.hoisted(() => ({ id: 'case-1' }));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+// ---------------------------------------------------------------------------
+// Module-level mocks
+// ---------------------------------------------------------------------------
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useParams: () => mockParams,
+        Outlet: () => _jsx("div", { id: "outlet" }),
+        useLocation: vi.fn(() => ({ pathname: '/', search: '' })),
+        useNavigate: () => vi.fn()
+    };
+});
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: vi.fn(),
+                put: vi.fn()
+            }
+        }
+    }
+}));
+vi.mock('./detail/CaseDetails', () => ({
+    default: () => _jsx("div", { id: "case-details" })
+}));
+vi.mock('./detail/CaseSidebar', () => ({
+    default: () => _jsx("div", { id: "case-sidebar" })
+}));
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+import CaseViewer from './CaseViewer';
+// ---------------------------------------------------------------------------
+// Provider wrapper – uses the real SocketContext so both CaseViewer and its
+// useCase hook share the same context value provided here.
+// ---------------------------------------------------------------------------
+const createWrapper = () => {
+    const Wrapper = ({ children }) => (_jsx(SocketContext.Provider, { value: {
+            emit: mockEmit,
+            open: mockOpen.current,
+            fetchViewers: mockFetchViewers,
+            addListener: mockAddListener,
+            removeListener: mockRemoveListener,
+            status: 1,
+            reconnect: vi.fn(),
+            viewers: {}
+        }, children: children }));
+    return Wrapper;
+};
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockEmit.mockClear();
+    mockOpen.current = true;
+    mockFetchViewers.mockClear().mockResolvedValue(undefined);
+    mockAddListener.mockClear();
+    mockRemoveListener.mockClear();
+    mockDispatchApi.mockReset().mockResolvedValue(createMockCase({ case_id: 'case-1' }));
+    mockParams.id = 'case-1';
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseViewer', () => {
+    it('fetches viewers on mount', async () => {
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockFetchViewers).toHaveBeenCalledWith('case-1');
+        });
+    });
+    it('emits viewing action when socket is open', async () => {
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockEmit).toHaveBeenCalledWith({
+                broadcast: false,
+                action: 'viewing',
+                id: 'case-1'
+            });
+        });
+    });
+    it('emits stop_viewing on unmount', async () => {
+        const { unmount } = render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockEmit).toHaveBeenCalledWith({
+                broadcast: false,
+                action: 'viewing',
+                id: 'case-1'
+            });
+        });
+        mockEmit.mockClear();
+        unmount();
+        expect(mockEmit).toHaveBeenCalledWith({
+            broadcast: false,
+            action: 'stop_viewing',
+            id: 'case-1'
+        });
+    });
+    it('does not emit viewing when socket is closed', async () => {
+        mockOpen.current = false;
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockFetchViewers).toHaveBeenCalledWith('case-1');
+        });
+        expect(mockEmit).not.toHaveBeenCalled();
+    });
+    it('still fetches viewers when socket is closed', async () => {
+        mockOpen.current = false;
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockFetchViewers).toHaveBeenCalledWith('case-1');
+        });
+    });
+});

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

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Check, FormatListBulleted, HourglassBottom, Pause, People, WarningRounded } from '@mui/icons-material';
-import { Autocomplete, Card, Chip, Divider, LinearProgress, Skeleton, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
+import { Autocomplete, AvatarGroup, Card, Chip, Divider, LinearProgress, Skeleton, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
 import dayjs from 'dayjs';
 import { useContext, useState } from 'react';
@@ -14,8 +17,10 @@ const CaseDetails = ({ case: providedCase }) => {
     const { t } = useTranslation();
     const { case: _case, update: updateCase } = useCase({ case: providedCase });
     const { showModal } = useContext(ModalContext);
+    const { viewers } = useContext(SocketContext);
     const { config } = useContext(ApiConfigContext);
     const [loading, setLoading] = useState(false);
+    const caseViewers = _case?.case_id ? (viewers[_case.case_id] ?? []) : [];
     const wrappedUpdate = async (subset) => {
         try {
             setLoading(true);
@@ -56,6 +61,10 @@ const CaseDetails = ({ case: providedCase }) => {
                                         'in-progress': _jsx(HourglassBottom, { color: "warning" }),
                                         'on-hold': _jsx(Pause, { color: "disabled" }),
                                         resolved: _jsx(Check, { color: "success" })
-                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => handleStatus(status) })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(People, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.participants') })] }), _jsx(UserList, { buttonSx: { alignSelf: 'start' }, multiple: true, i18nLabel: "page.cases.detail.assignment", userIds: _case.participants ?? [], onChange: participants => wrappedUpdate({ participants }), disabled: loading })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(FormatListBulleted, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.properties') })] }), _jsx(Table, { sx: { '& td': { p: 1 } }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.escalation') }) }), _jsx(TableCell, { children: _jsx(Chip, { size: "small", label: _case.escalation }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.created') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.created).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.updated') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.updated).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.sources') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: _jsx(SourceAggregate, { case: _case }) }) })] })] }) })] })] })] }));
+                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => handleStatus(status) })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(People, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.participants') })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(UserList, { buttonSx: { alignSelf: 'start' }, multiple: true, i18nLabel: "page.cases.detail.assignment", userIds: _case.participants ?? [], onChange: participants => wrappedUpdate({ participants }), disabled: loading }), _jsx("div", { style: { flex: 1 } })] }), caseViewers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(SocketBadge, { size: "medium" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.viewers') })] }), _jsx(AvatarGroup, { max: 4, sx: { alignSelf: 'start' }, componentsProps: {
+                                            additionalAvatar: {
+                                                sx: { height: 32, width: 32, fontSize: '12px' }
+                                            }
+                                        }, children: caseViewers.map(viewer => (_jsx(HowlerAvatar, { userId: viewer, sx: { height: 32, width: 32 } }, viewer))) })] }))] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(FormatListBulleted, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.properties') })] }), _jsx(Table, { sx: { '& td': { p: 1 } }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.escalation') }) }), _jsx(TableCell, { children: _jsx(Chip, { size: "small", label: _case.escalation }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.created') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.created).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.updated') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.updated).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.sources') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: _jsx(SourceAggregate, { case: _case }) }) })] })] }) })] })] })] }));
 };
 export default CaseDetails;

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

@@ -35,6 +35,15 @@ const CaseTask = ({ task, onEdit, onDelete, paths, newTask = false }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [complete]);
+    useEffect(() => {
+        if (!editing && task) {
+            setSummary(task.summary);
+            setPath(task.path);
+            setComplete(task.complete);
+            setAssignment(task.assignment);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [task]);
     return (_jsxs(Card, { sx: { pl: 0.5, pr: 1, py: 0.5, position: 'relative' }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Checkbox, { disabled: loading, color: "success", checked: complete, size: "small", onChange: (_ev, _complete) => setComplete(_complete) }), editing ? (_jsx(TextField, { disabled: loading, value: summary, onChange: e => setSummary(e.target.value), size: "small", fullWidth: true, sx: { minWidth: '40%' } })) : (_jsx(Typography, { sx: [complete && { textDecoration: 'line-through' }], children: task?.summary || summary })), !editing && path && _jsx(Chip, { clickable: true, component: Link, to: path, label: path }), editing && (_jsx(Autocomplete, { disabled: loading, value: path, options: paths, onChange: (_ev, value) => setPath(value), fullWidth: true, renderInput: params => _jsx(TextField, { ...params, size: "small" }) })), _jsx(UserList, { disabled: loading, userIds: [assignment], onChange: ([_assigment]) => setAssignment(_assigment), i18nLabel: "route.cases.task.set.assignment", avatarHeight: 24 }), _jsx("div", { style: { flex: 1 } }), editing && !newTask && (_jsx(Tooltip, { title: t('route.cases.task.delete'), children: _jsx(IconButton, { size: "small", color: "error", onClick: () => {
                                 setLoading(true);
                                 onDelete().then(() => setLoading(false));

package/components/routes/cases/hooks/useCase.js

@@ -1,11 +1,15 @@
 import api from '@cccsaurora/howler-ui/api';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { isCaseUpdate } from '@cccsaurora/howler-ui/utils/socketUtils';
 const useCase = ({ caseId, case: providedCase }) => {
     const { dispatchApi } = useMyApi();
+    const { addListener, removeListener } = useContext(SocketContext);
     const [loading, setLoading] = useState(false);
     const [missing, setMissing] = useState(false);
     const [_case, setCase] = useState(providedCase);
+    const activeCaseId = _case?.case_id ?? caseId;
     useEffect(() => {
         if (providedCase) {
             setCase(providedCase);
@@ -19,13 +23,27 @@ const useCase = ({ caseId, case: providedCase }) => {
                 .finally(() => setLoading(false));
         }
     }, [caseId, dispatchApi]);
+    useEffect(() => {
+        if (!activeCaseId) {
+            return;
+        }
+        const listenerKey = `case-update-${activeCaseId}`;
+        addListener(listenerKey, data => {
+            if (isCaseUpdate(data) && data.case.case_id === activeCaseId) {
+                setCase(data.case);
+            }
+        });
+        return () => {
+            removeListener(listenerKey);
+        };
+    }, [activeCaseId, addListener, removeListener]);
     const update = useCallback(async (_updatedCase, publish = true) => {
-        if (!_case?.case_id) {
+        if (!activeCaseId) {
             return;
         }
         try {
             if (publish) {
-                setCase(await dispatchApi(api.v2.case.put(_case.case_id, _updatedCase)));
+                setCase(await dispatchApi(api.v2.case.put(activeCaseId, _updatedCase)));
             }
             else {
                 setCase(prevCase => {
@@ -45,7 +63,7 @@ const useCase = ({ caseId, case: providedCase }) => {
         finally {
             return;
         }
-    }, [_case?.case_id, dispatchApi]);
+    }, [activeCaseId, dispatchApi]);
     return { case: _case, update, loading, missing };
 };
 export default useCase;

package/components/routes/cases/hooks/useCase.test.d.ts

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

package/components/routes/cases/hooks/useCase.test.js

@@ -0,0 +1,141 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockAddListener = vi.hoisted(() => vi.fn());
+const mockRemoveListener = vi.hoisted(() => vi.fn());
+const mockCaseGet = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: (...args) => mockCaseGet(...args),
+                put: vi.fn()
+            }
+        }
+    }
+}));
+vi.mock('components/app/providers/SocketProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        SocketContext: createContext({
+            addListener: mockAddListener,
+            removeListener: mockRemoveListener,
+            emit: vi.fn(),
+            status: 1,
+            reconnect: vi.fn(),
+            isOpen: () => true,
+            viewers: {},
+            fetchViewers: vi.fn()
+        })
+    };
+});
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+// eslint-disable-next-line
+import useCase from './useCase';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const renderUseCaseHook = (args) => {
+    return renderHook(() => useCase(args));
+};
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockAddListener.mockReset();
+    mockRemoveListener.mockReset();
+    mockCaseGet.mockReset();
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('useCase', () => {
+    describe('initialization', () => {
+        it('uses the provided case directly when given', () => {
+            const mockCase = createMockCase({ case_id: 'c1', title: 'Provided' });
+            const { result } = renderUseCaseHook({ case: mockCase });
+            expect(result.current.case).toBe(mockCase);
+            expect(result.current.loading).toBe(false);
+        });
+        it('fetches the case by ID when caseId is provided', async () => {
+            const mockCase = createMockCase({ case_id: 'c2', title: 'Fetched' });
+            mockDispatchApi.mockResolvedValue(mockCase);
+            const { result } = renderUseCaseHook({ caseId: 'c2' });
+            await waitFor(() => {
+                expect(result.current.case).toEqual(mockCase);
+            });
+            expect(mockDispatchApi).toHaveBeenCalled();
+        });
+    });
+    describe('socket listener', () => {
+        it('registers a listener keyed by case ID', () => {
+            const mockCase = createMockCase({ case_id: 'c3' });
+            renderUseCaseHook({ case: mockCase });
+            expect(mockAddListener).toHaveBeenCalledWith('case-update-c3', expect.any(Function));
+        });
+        it('updates state when a matching case update is received', () => {
+            const mockCase = createMockCase({ case_id: 'c4', title: 'Original' });
+            const { result } = renderUseCaseHook({ case: mockCase });
+            const listenerCallback = mockAddListener.mock.calls[0][1];
+            const updatedCase = createMockCase({ case_id: 'c4', title: 'Updated via socket' });
+            act(() => {
+                listenerCallback({
+                    type: 'cases',
+                    case: updatedCase,
+                    error: false,
+                    message: '',
+                    status: 200
+                });
+            });
+            expect(result.current.case.title).toBe('Updated via socket');
+        });
+        it('ignores case updates for a different case ID', () => {
+            const mockCase = createMockCase({ case_id: 'c5', title: 'Original' });
+            const { result } = renderUseCaseHook({ case: mockCase });
+            const listenerCallback = mockAddListener.mock.calls[0][1];
+            const differentCase = createMockCase({ case_id: 'other-case', title: 'Different' });
+            act(() => {
+                listenerCallback({
+                    type: 'cases',
+                    case: differentCase,
+                    error: false,
+                    message: '',
+                    status: 200
+                });
+            });
+            expect(result.current.case.title).toBe('Original');
+        });
+        it('ignores non-case-update messages', () => {
+            const mockCase = createMockCase({ case_id: 'c6', title: 'Original' });
+            const { result } = renderUseCaseHook({ case: mockCase });
+            const listenerCallback = mockAddListener.mock.calls[0][1];
+            act(() => {
+                listenerCallback({
+                    type: 'hits',
+                    hit: {},
+                    version: '1',
+                    error: false,
+                    message: '',
+                    status: 200
+                });
+            });
+            expect(result.current.case.title).toBe('Original');
+        });
+        it('removes listener on unmount', () => {
+            const mockCase = createMockCase({ case_id: 'c7' });
+            const { unmount } = renderUseCaseHook({ case: mockCase });
+            unmount();
+            expect(mockRemoveListener).toHaveBeenCalledWith('case-update-c7');
+        });
+    });
+});

package/components/routes/hits/search/InformationPane.js

@@ -43,7 +43,7 @@ const InformationPane = ({ onClose, selected: _selected }) => {
     const { t, i18n } = useTranslation();
     const theme = useTheme();
     const location = useLocation();
-    const { emit, isOpen } = useContext(SocketContext);
+    const { emit, open } = useContext(SocketContext);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
     const selected = useContextSelector(ParameterContext, ctx => ctx?.selected) ?? _selected;
     const pluginStore = usePluginStore();
@@ -97,7 +97,7 @@ const InformationPane = ({ onClose, selected: _selected }) => {
         }
     }, [getMatchingOverview, record]);
     useEffect(() => {
-        if (selected && isOpen()) {
+        if (selected && open) {
             emit({
                 broadcast: false,
                 action: 'viewing',
@@ -109,7 +109,7 @@ const InformationPane = ({ onClose, selected: _selected }) => {
                 id: selected
             });
         }
-    }, [emit, selected, isOpen]);
+    }, [emit, selected, open]);
     useEffect(() => {
         if (hasOverview && tab === 'details') {
             setTab('overview');

package/locales/en/translation.json

@@ -401,6 +401,7 @@
     "page.cases.detail.participants": "Participants",
     "page.cases.detail.properties": "Properties",
     "page.cases.detail.status": "Status",
+    "page.cases.detail.viewers": "Active Viewers",
     "page.cases.escalation": "Escalation",
     "page.cases.folder.drop.root": "Place here to move to root",
     "page.cases.sidebar.folder.remove": "Remove folder",

package/locales/fr/translation.json

@@ -401,6 +401,7 @@
     "page.cases.detail.participants": "Participants",
     "page.cases.detail.properties": "Propriétés",
     "page.cases.detail.status": "Statut",
+    "page.cases.detail.viewers": "Spectateurs actifs",
     "page.cases.escalation": "Escalade",
     "page.cases.folder.drop.root": "Déposer ici pour déplacer à la racine",
     "page.cases.sidebar.folder.remove": "Supprimer le dossier",

package/models/entities/generated/Howler.d.ts

@@ -38,7 +38,6 @@ export interface Howler {
   scrutiny?: string;
   severity?: number;
   status?: string;
-  viewers?: string[];
   volume?: number;
   votes?: Votes;
 }

package/models/entities/generated/ObservableHowler.d.ts

@@ -37,7 +37,6 @@ export interface ObservableHowler {
   scrutiny?: string;
   severity?: number;
   status?: string;
-  viewers?: string[];
   volume?: number;
   votes?: Votes;
 }

package/models/socket/CaseUpdate.d.ts

@@ -0,0 +1,5 @@
+import type { Case } from 'models/entities/generated/Case';
+
+export interface CaseUpdate {
+  case: Case;
+}

package/models/socket/ViewersUpdate.d.ts

@@ -0,0 +1,4 @@
+export interface ViewersUpdate {
+  id: string;
+  viewers: string[];
+}

package/package.json

@@ -101,7 +101,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.18.0-dev.794",
+  "version": "2.18.0-dev.799",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -240,6 +240,8 @@
     "./api/v2": "./api/v2/index.js",
     "./api/auth/*": "./api/auth/*.js",
     "./api/auth": "./api/auth/index.js",
+    "./api/socket/*": "./api/socket/*.js",
+    "./api/socket": "./api/socket/index.js",
     "./api/user/*": "./api/user/*.js",
     "./api/user": "./api/user/index.js",
     "./api/action/*": "./api/action/*.js",

package/utils/socketUtils.d.ts

@@ -1,8 +1,22 @@
 import type { RecievedDataType } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import type { CaseUpdate } from '@cccsaurora/howler-ui/models/socket/CaseUpdate';
 import type { HitUpdate } from '@cccsaurora/howler-ui/models/socket/HitUpdate';
+import type { ViewersUpdate } from '@cccsaurora/howler-ui/models/socket/ViewersUpdate';
 /**
  * Checks to see if the data recieved from the socket is a hit update
  * @param data The data recieved from the socket
  * @returns whether the data is a hit update
  */
 export declare const isHitUpdate: (data: any) => data is RecievedDataType<HitUpdate>;
+/**
+ * Checks to see if the data received from the socket is a case update
+ * @param data The data received from the socket
+ * @returns whether the data is a case update
+ */
+export declare const isCaseUpdate: (data: any) => data is RecievedDataType<CaseUpdate>;
+/**
+ * Checks to see if the data received from the socket is a viewers update
+ * @param data The data received from the socket
+ * @returns whether the data is a viewers update
+ */
+export declare const isViewersUpdate: (data: any) => data is RecievedDataType<ViewersUpdate>;

package/utils/socketUtils.js

@@ -4,5 +4,21 @@
  * @returns whether the data is a hit update
  */
 export const isHitUpdate = (data) => {
-    return data.version && data.hit;
+    return !!(data.version && data.hit);
+};
+/**
+ * Checks to see if the data received from the socket is a case update
+ * @param data The data received from the socket
+ * @returns whether the data is a case update
+ */
+export const isCaseUpdate = (data) => {
+    return !!(data.type === 'cases' && data.case);
+};
+/**
+ * Checks to see if the data received from the socket is a viewers update
+ * @param data The data received from the socket
+ * @returns whether the data is a viewers update
+ */
+export const isViewersUpdate = (data) => {
+    return !!(data.type === 'viewers_update' && data.viewers && data.id);
 };

package/utils/socketUtils.test.d.ts

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

package/utils/socketUtils.test.js

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import { isCaseUpdate, isHitUpdate, isViewersUpdate } from './socketUtils';
+describe('isHitUpdate', () => {
+    it('returns true when data has version and hit', () => {
+        const data = { version: '1', hit: { howler: { id: 'h1' } }, type: 'hits', error: false, message: '', status: 200 };
+        expect(isHitUpdate(data)).toBeTruthy();
+    });
+    it('returns false when hit is missing', () => {
+        const data = { version: '1', type: 'hits', error: false, message: '', status: 200 };
+        expect(isHitUpdate(data)).toBeFalsy();
+    });
+    it('returns false when version is missing', () => {
+        const data = { hit: { howler: { id: 'h1' } }, type: 'hits', error: false, message: '', status: 200 };
+        expect(isHitUpdate(data)).toBeFalsy();
+    });
+});
+describe('isCaseUpdate', () => {
+    it('returns true when type is cases and case is present', () => {
+        const data = { type: 'cases', case: { case_id: 'c1' }, error: false, message: '', status: 200 };
+        expect(isCaseUpdate(data)).toBeTruthy();
+    });
+    it('returns false when type is not cases', () => {
+        const data = { type: 'hits', case: { case_id: 'c1' }, error: false, message: '', status: 200 };
+        expect(isCaseUpdate(data)).toBeFalsy();
+    });
+    it('returns false when case is missing', () => {
+        const data = { type: 'cases', error: false, message: '', status: 200 };
+        expect(isCaseUpdate(data)).toBeFalsy();
+    });
+    it('returns false when case is null', () => {
+        const data = { type: 'cases', case: null, error: false, message: '', status: 200 };
+        expect(isCaseUpdate(data)).toBeFalsy();
+    });
+});
+describe('isViewersUpdate', () => {
+    it('returns true when type is viewers_update with id and viewers', () => {
+        const data = {
+            type: 'viewers_update',
+            id: 'entity-1',
+            viewers: ['alice', 'bob'],
+            error: false,
+            message: '',
+            status: 200
+        };
+        expect(isViewersUpdate(data)).toBeTruthy();
+    });
+    it('returns false when type is wrong', () => {
+        const data = { type: 'cases', id: 'entity-1', viewers: ['alice'], error: false, message: '', status: 200 };
+        expect(isViewersUpdate(data)).toBeFalsy();
+    });
+    it('returns false when viewers is missing', () => {
+        const data = { type: 'viewers_update', id: 'entity-1', error: false, message: '', status: 200 };
+        expect(isViewersUpdate(data)).toBeFalsy();
+    });
+    it('returns false when id is missing', () => {
+        const data = { type: 'viewers_update', viewers: ['alice'], error: false, message: '', status: 200 };
+        expect(isViewersUpdate(data)).toBeFalsy();
+    });
+});