Add live decision expiration countdowns and keep longest active duplicate decision visible (#345)

* Keep longest active duplicate decision visible

When duplicate decision values are hidden, choose the active row with the latest expiration instead of the lowest numeric ID. This keeps the collapsed Decisions view aligned with the longest active ban for an IP.

Possibly solves #344.

* Add live decision expiration countdowns

Author: TheDuffman85

client/src/lib/decisionExpiration.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, test } from 'vitest';
+import type { DecisionListItem } from '../types';
+import { formatRemainingDuration, getDecisionExpirationState } from './decisionExpiration';
+
+function createDecision(overrides: Partial<DecisionListItem> = {}): DecisionListItem {
+  const base: DecisionListItem = {
+    id: 1,
+    created_at: '2026-07-05T12:00:00.000Z',
+    value: '1.2.3.4',
+    expired: false,
+    is_duplicate: false,
+    detail: {
+      origin: 'manual',
+      duration: '4h',
+      expiration: '2026-07-05T16:00:00.000Z',
+    },
+  };
+
+  return {
+    ...base,
+    ...overrides,
+    detail: {
+      ...base.detail,
+      ...overrides.detail,
+    },
+  };
+}
+
+describe('decision expiration formatting', () => {
+  test('formats remaining milliseconds as CrowdSec-style duration text', () => {
+    expect(formatRemainingDuration(3 * 3_600_000 + 10 * 60_000 + 20_000)).toBe('3h10m20s');
+    expect(formatRemainingDuration(6_000)).toBe('6s');
+    expect(formatRemainingDuration(1)).toBe('1s');
+    expect(formatRemainingDuration(-1_000)).toBe('0s');
+  });
+
+  test('calculates live remaining time from the absolute expiration timestamp', () => {
+    const state = getDecisionExpirationState(
+      createDecision(),
+      Date.parse('2026-07-05T12:21:15.000Z'),
+    );
+
+    expect(state).toMatchObject({
+      isExpired: false,
+      label: '3h38m45s',
+      expiresAtMs: Date.parse('2026-07-05T16:00:00.000Z'),
+    });
+  });
+
+  test('marks decisions expired once the expiration timestamp passes', () => {
+    const state = getDecisionExpirationState(
+      createDecision(),
+      Date.parse('2026-07-05T16:00:01.000Z'),
+    );
+
+    expect(state.isExpired).toBe(true);
+    expect(state.label).toBe('0s');
+  });
+
+  test('falls back to server duration when no absolute expiration is available', () => {
+    const state = getDecisionExpirationState(createDecision({
+      detail: { origin: 'manual', duration: '44m40s', expiration: undefined },
+    }));
+
+    expect(state).toEqual({
+      isExpired: false,
+      label: '44m40s',
+      expiresAtMs: null,
+    });
+  });
+});

client/src/lib/decisionExpiration.ts

@@ -0,0 +1,44 @@
+import type { DecisionListItem } from '../types';
+
+export interface DecisionExpirationState {
+  isExpired: boolean;
+  label: string;
+  expiresAtMs: number | null;
+}
+
+export function formatRemainingDuration(remainingMs: number): string {
+  const clampedMs = Math.max(0, remainingMs);
+  const totalSeconds = clampedMs > 0 ? Math.ceil(clampedMs / 1_000) : 0;
+  const hours = Math.floor(totalSeconds / 3_600);
+  const minutes = Math.floor((totalSeconds % 3_600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${hours > 0 ? `${hours}h` : ''}${minutes > 0 || hours > 0 ? `${minutes}m` : ''}${seconds}s`;
+}
+
+export function getDecisionExpirationState(decision: DecisionListItem, nowMs = Date.now()): DecisionExpirationState {
+  const expiresAtMs = decision.detail.expiration ? Date.parse(decision.detail.expiration) : Number.NaN;
+
+  if (Number.isFinite(expiresAtMs)) {
+    const remainingMs = expiresAtMs - nowMs;
+    return {
+      isExpired: remainingMs <= 0,
+      label: formatRemainingDuration(remainingMs),
+      expiresAtMs,
+    };
+  }
+
+  if (decision.expired) {
+    return {
+      isExpired: true,
+      label: '0s',
+      expiresAtMs: null,
+    };
+  }
+
+  return {
+    isExpired: false,
+    label: decision.detail.duration || 'N/A',
+    expiresAtMs: null,
+  };
+}

client/src/pages/Alerts.test.tsx

@@ -544,9 +544,8 @@ describe('Alerts page', () => {
       </MemoryRouter>,
     );
 
-    await waitFor(() => expect(screen.getByRole('columnheader', { name: 'Machine' })).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('Alert Details #1')).toBeInTheDocument());
     expect(screen.getAllByText('host-a').length).toBeGreaterThan(1);
-    expect(screen.getByText('Alert Details #1')).toBeInTheDocument();
     expect(screen.getAllByText('Machine').length).toBeGreaterThan(1);
   });
 

client/src/pages/Alerts.tsx

@@ -12,6 +12,7 @@ import { ScenarioName } from "../components/ScenarioName";
 import { TimeDisplay } from "../components/TimeDisplay";
 import { EventCard } from "../components/EventCard";
 import { getCountryName } from "../lib/utils";
+import { getDecisionExpirationState } from "../lib/decisionExpiration";
 import { loadStoredTableColumnPreferences, saveStoredTableColumnPreferences } from "../lib/tableColumns";
 import { TABLE_COLUMN_DEFINITIONS } from "../../../shared/contracts";
 import { resolveMachineName } from "../../../shared/machine";
@@ -138,6 +139,7 @@ export function Alerts() {
     const [showColumnsModal, setShowColumnsModal] = useState(false);
     const [searchDraft, setSearchDraft] = useState(initialQueryParam);
     const [debouncedSearchDraft, setDebouncedSearchDraft] = useState(initialQueryParam);
+    const [nowMs, setNowMs] = useState(() => Date.now());
     const [showSearchSyntaxModal, setShowSearchSyntaxModal] = useState(false);
     const [initialLoading, setInitialLoading] = useState(true);
     const [hasLoadedAlerts, setHasLoadedAlerts] = useState(false);
@@ -405,6 +407,11 @@ export function Alerts() {
         loadAlertsRef.current = loadAlerts;
     }, [loadAlerts]);
 
+    useEffect(() => {
+        const intervalId = window.setInterval(() => setNowMs(Date.now()), 1_000);
+        return () => window.clearInterval(intervalId);
+    }, []);
+
     const lastAlertElementRef = useCallback((node: HTMLTableRowElement | null) => {
         if (initialLoading || backgroundLoading || loadingMore || !hasMoreAlerts) return;
         if (observer.current) observer.current.disconnect();
@@ -1333,17 +1340,8 @@ export function Alerts() {
                                                     </td>
                                                 </tr>
                                             ) : modalDecisions.map((decision, idx) => {
-                                                // Check if this specific decision is active or expired
-                                                const isActive = (() => {
-                                                    if (decision.expired !== undefined) {
-                                                        return !decision.expired;
-                                                    }
-
-                                                    if (decision.detail.expiration) {
-                                                        return new Date(decision.detail.expiration) > new Date();
-                                                    }
-                                                    return true; // Assume active if no stop_at and not definitely expired
-                                                })();
+                                                const expirationState = getDecisionExpirationState(decision, nowMs);
+                                                const isActive = !expirationState.isExpired;
                                                 return (
                                                     <tr
                                                         key={`${decision.id}-${decision.detail.duration ?? idx}`}
@@ -1353,7 +1351,7 @@ export function Alerts() {
                                                         <td className="px-4 py-2 text-sm"><Badge variant="danger">{decision.detail.type || decision.detail.action || "ban"}</Badge></td>
                                                         <td className="px-4 py-2 text-sm font-mono">{decision.value}</td>
                                                         <td className="px-4 py-2 text-sm">
-                                                            {isActive ? decision.detail.duration : "0s"}
+                                                            {expirationState.label}
                                                             {!isActive && <span className="ml-2 text-xs text-red-500 dark:text-red-400">{t('pages.decisions.expired')}</span>}
                                                         </td>
                                                         <td className="px-4 py-2 text-sm">{decision.detail.origin || "-"}</td>

client/src/pages/Decisions.test.tsx

@@ -169,10 +169,69 @@ vi.mock('../lib/api', () => {
 
 beforeEach(() => {
   vi.mocked(api.fetchConfig).mockResolvedValue(createDefaultConfigResponse());
+  vi.mocked(api.fetchDecisionsPaginated).mockImplementation(async (page: number, pageSize = 50, filters?: Record<string, string>) => {
+    let decisions: DecisionListItem[] = [
+      {
+        id: 10,
+        created_at: '2026-03-23T10:00:00.000Z',
+        machine: 'host-a',
+        value: '1.2.3.4',
+        expired: false,
+        is_duplicate: false,
+        simulated: false,
+        detail: {
+          origin: 'manual',
+          reason: 'crowdsecurity/ssh-bf',
+          country: 'DE',
+          as: 'Hetzner',
+          action: 'ban',
+          duration: '4h',
+          alert_id: 1,
+          target: 'ssh',
+        },
+      },
+      {
+        id: 20,
+        created_at: '2026-03-24T11:00:00.000Z',
+        machine: 'machine-2',
+        value: '5.6.7.8',
+        expired: false,
+        is_duplicate: false,
+        simulated: true,
+        detail: {
+          origin: 'CAPI',
+          reason: 'crowdsecurity/nginx-bf',
+          country: 'US',
+          as: 'AWS',
+          action: 'ban',
+          duration: '4h',
+          alert_id: 2,
+          target: 'nginx',
+        },
+      },
+    ];
+
+    if (filters?.simulation === 'simulated') {
+      decisions = decisions.filter((decision) => decision.simulated === true);
+    }
+    if (filters?.q) {
+      const compiledSearch = compileDecisionSearch(filters.q, {
+        machineEnabled: true,
+        originEnabled: true,
+      });
+      if (!compiledSearch.ok) {
+        throw new Error(compiledSearch.error.message);
+      }
+      decisions = decisions.filter(compiledSearch.predicate);
+    }
+
+    return toPaginatedDecisions(decisions, page, pageSize, 2);
+  });
 });
 
 afterEach(() => {
   refreshSignalMock = 0;
+  vi.useRealTimers();
   window.localStorage.clear();
   vi.unstubAllGlobals();
   vi.restoreAllMocks();
@@ -302,6 +361,48 @@ describe('Decisions page', () => {
     expect(screen.queryByRole('columnheader', { name: 'Origin' })).not.toBeInTheDocument();
   });
 
+  test('counts decision expiration down live from the absolute stop time', async () => {
+    const expiresAt = new Date(Date.now() + 2_500).toISOString();
+    vi.mocked(api.fetchDecisionsPaginated).mockImplementationOnce(async (page, pageSize) =>
+      toPaginatedDecisions([
+        {
+          id: 10,
+          created_at: new Date(Date.now() - 60_000).toISOString(),
+          value: '1.2.3.4',
+          expired: false,
+          is_duplicate: false,
+          simulated: false,
+          detail: {
+            origin: 'manual',
+            reason: 'crowdsecurity/ssh-bf',
+            country: 'DE',
+            as: 'Hetzner',
+            action: 'ban',
+            duration: '4m10s',
+            expiration: expiresAt,
+            alert_id: 1,
+          },
+        },
+      ], page, pageSize),
+    );
+
+    render(
+      <MemoryRouter initialEntries={['/decisions']}>
+        <Decisions />
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => expect(screen.getByText(/^[123]s$/)).toBeInTheDocument());
+    expect(screen.queryByText('4m10s')).not.toBeInTheDocument();
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2_600));
+    });
+    await waitFor(() => expect(screen.getByText('0s')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText(/Expired/)).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Select decision 10' })).toBeDisabled());
+  });
+
   test('saves decision table columns from the modal', async () => {
     render(
       <MemoryRouter initialEntries={['/decisions']}>
@@ -362,7 +463,7 @@ describe('Decisions page', () => {
     );
 
     await waitFor(() => expect(screen.getByRole('columnheader', { name: 'Machine' })).toBeInTheDocument());
-    expect(screen.getByText('host-a')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByText('host-a')).toBeInTheDocument());
 
     fireEvent.change(screen.getByPlaceholderText('Filter decisions...'), { target: { value: 'host-a' } });
     await flushDecisionSearchDebounce();
@@ -395,7 +496,7 @@ describe('Decisions page', () => {
 
     await waitFor(() => expect(screen.getByRole('columnheader', { name: 'Origin' })).toBeInTheDocument());
     await waitFor(() => expect(screen.getByText('manual')).toBeInTheDocument());
-    expect(screen.getByText('CAPI')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByText('CAPI')).toBeInTheDocument());
 
     fireEvent.change(screen.getByPlaceholderText('Filter decisions...'), { target: { value: 'manual' } });
     await flushDecisionSearchDebounce();