fix(frontend): repair lint and test failures blocking CI

`pnpm lint` (and therefore `pnpm build`) failed on main, and 19 unit tests
failed alongside it. All of these predate the current branch.

Lint:

- `aiAssistant.test.ts` did not parse: the last `it()` in the abort-signal
  suite was never closed, so its `});` closed the `it` and left the
  `describe` open. Added the missing brace.
- `apiSchemas.ts` stapled `status` and `response` onto a plain `Error`
  through two `any` casts. Replaced with an `HttpResponseError` class that
  declares both as typed readonly fields.
- `apiSchemas.test.ts` had an unused `startTime` and an `as any` on a
  `setTimeout` spy.
- `OfflineStatusBanner.tsx` kept a `pendingCount` state nothing read and two
  optimistic-update callbacks nothing called. The queued count is owned by
  `offlineMessageQueue` and published by `useChat`; the banner only mirrors
  it, so the local copies were redundant. Removed, along with the imports
  they were the only users of.
- `OfflineStatusBanner.test.tsx` imported `renderHook` without using it.

Two real bugs surfaced while fixing the above:

- `withRetry` decided status retries with `error instanceof Response`. The
  value thrown by `fetchWithRetry` is an `Error`, never a `Response`, so
  that arm was dead and 500/503/429 responses were never retried — the
  `any` casts were what hid the status from the check. It now tests
  `HttpResponseError` (keeping the `Response` arm for callers that throw one
  directly). An explicit `AbortError` guard was also added, so an aborted
  request is never retried regardless of a caller's `retryableErrors`.

- `OfflineStatusBanner` ignored `wasOffline`, announcing a reconnect only
  when it observed the offline render itself. Mounting after the connection
  was already back skipped the toast and never called `resetWasOffline`,
  leaving the hook's latch set forever. The reconnect branch now also fires
  on a latched `wasOffline` and consumes the latch immediately.

Tests: the failures were fake-timer deadlocks. Suites installed
`vi.useFakeTimers()` and then awaited code that sleeps between retries, or
polled with `waitFor` while the clock was frozen — so the promise never
settled and the test hit its 15s timeout. Fixed by draining timers with
`vi.runAllTimersAsync()`, attaching rejection handlers before draining (an
unhandled rejection otherwise escapes), and replacing frozen-clock `waitFor`
calls with assertions made directly after an explicit `advanceTimersByTime`.

`OfflineStatusBanner`'s pending-count test also pulled from
`getQueuedMessageCount`, which the component never reads; it now drives the
subscription the component actually listens to.

pnpm typecheck, pnpm lint, pnpm build and pnpm test:unit (805 tests) all
pass.

Author: nonso7

Dechat/dex_with_fiat_frontend/src/components/OfflineStatusBanner.test.tsx

@@ -1,8 +1,8 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import OfflineStatusBanner from './OfflineStatusBanner';
-import * as offlineMessageQueue from '@/lib/offlineMessageQueue';
+import { useOnlineStatus } from '@/hooks/useOnlineStatus';
+import { subscribeToQueuedMessageCount } from '@/lib/offlineMessageQueue';
 
 // Mock dependencies
 vi.mock('@/hooks/useOnlineStatus', () => ({
@@ -26,14 +26,42 @@ vi.mock('@/lib/offlineStatusSchema', () => ({
 }));
 
 vi.mock('@/lib/offlineMessageQueue', () => ({
-  subscribeToQueuedMessageCount: vi.fn(),
+  subscribeToQueuedMessageCount: vi.fn(() => () => {}),
   setQueuedMessageCount: vi.fn(),
   getQueuedMessageCount: vi.fn(() => 0),
 }));
 
+const mockedUseOnlineStatus = vi.mocked(useOnlineStatus);
+const mockedSubscribe = vi.mocked(subscribeToQueuedMessageCount);
+
+/** Elapse the 300ms initial loading gate so it cannot mask later renders. */
+function settleLoadingGate() {
+  act(() => {
+    vi.advanceTimersByTime(300);
+  });
+}
+
+/** Point `useOnlineStatus` at a value the test can flip between renders. */
+function stubOnlineStatus(getIsOnline: () => boolean, wasOffline = false) {
+  const resetWasOffline = vi.fn();
+  mockedUseOnlineStatus.mockImplementation(() => ({
+    get isOnline() {
+      return getIsOnline();
+    },
+    wasOffline,
+    resetWasOffline,
+  }));
+  return resetWasOffline;
+}
+
 describe('OfflineStatusBanner - Optimistic UI Updates', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockedSubscribe.mockImplementation(() => () => {});
+    // Fake timers are required for the 300ms loading skeleton and the 500ms
+    // reconnect dismissal. Assertions below are made directly after an explicit
+    // `advanceTimersByTime` rather than through `waitFor`, whose polling never
+    // fires while the clock is frozen.
     vi.useFakeTimers();
   });
 
@@ -42,138 +70,104 @@ describe('OfflineStatusBanner - Optimistic UI Updates', () => {
     vi.useRealTimers();
   });
 
-  it('should show banner immediately when going offline', async () => {
-    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
-    (useOnlineStatus as any).mockReturnValue({
-      isOnline: false,
-      wasOffline: false,
-      resetWasOffline: vi.fn(),
-    });
+  it('should show banner immediately when going offline', () => {
+    stubOnlineStatus(() => false);
 
     render(<OfflineStatusBanner />);
 
-    await waitFor(() => {
-      expect(screen.getByRole('status')).toBeInTheDocument();
-    });
-
+    expect(screen.getByRole('status')).toBeInTheDocument();
     expect(screen.getByText(/You are offline/i)).toBeInTheDocument();
   });
 
-  it('should show reconnecting state when coming back online', async () => {
-    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
+  it('should show reconnecting state when coming back online', () => {
     let isOnline = false;
-    
-    (useOnlineStatus as any).mockImplementation(() => ({
-      get isOnline() { return isOnline; },
-      wasOffline: true,
-      resetWasOffline: vi.fn(),
-    }));
+    stubOnlineStatus(() => isOnline, true);
 
     const { rerender } = render(<OfflineStatusBanner />);
-
-    await waitFor(() => {
-      expect(screen.getByText(/You are offline/i)).toBeInTheDocument();
-    });
+    settleLoadingGate();
+    expect(screen.getByText(/You are offline/i)).toBeInTheDocument();
 
     // Simulate coming back online
     isOnline = true;
     rerender(<OfflineStatusBanner />);
 
-    await waitFor(() => {
-      expect(screen.getByText(/Reconnecting/i)).toBeInTheDocument();
-    });
+    expect(screen.getByText(/Reconnecting/i)).toBeInTheDocument();
   });
 
-  it('should display optimistic pending count', async () => {
-    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
-    (useOnlineStatus as any).mockReturnValue({
-      isOnline: false,
-      wasOffline: false,
-      resetWasOffline: vi.fn(),
+  it('should display optimistic pending count', () => {
+    stubOnlineStatus(() => false);
+    // The count is pushed by `offlineMessageQueue` subscribers, not pulled.
+    mockedSubscribe.mockImplementation((listener) => {
+      listener(3);
+      return () => {};
     });
 
-    (offlineMessageQueue.getQueuedMessageCount as any).mockReturnValue(3);
-
     render(<OfflineStatusBanner />);
 
-    await waitFor(() => {
-      expect(screen.getByText(/3 messages waiting to send/i)).toBeInTheDocument();
+    expect(screen.getByText(/3 messages waiting to send/i)).toBeInTheDocument();
+  });
+
+  it('should pluralise a single pending message', () => {
+    stubOnlineStatus(() => false);
+    mockedSubscribe.mockImplementation((listener) => {
+      listener(1);
+      return () => {};
     });
+
+    render(<OfflineStatusBanner />);
+
+    expect(screen.getByText(/1 message waiting to send/i)).toBeInTheDocument();
   });
 
-  it('should hide banner after reconnection delay', async () => {
-    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
+  it('should hide banner after reconnection delay', () => {
     let isOnline = false;
-    
-    (useOnlineStatus as any).mockImplementation(() => ({
-      get isOnline() { return isOnline; },
-      wasOffline: true,
-      resetWasOffline: vi.fn(),
-    }));
+    const resetWasOffline = stubOnlineStatus(() => isOnline, true);
 
     const { rerender } = render(<OfflineStatusBanner />);
-
-    await waitFor(() => {
-      expect(screen.getByRole('status')).toBeInTheDocument();
-    });
+    settleLoadingGate();
+    expect(screen.getByRole('status')).toBeInTheDocument();
 
     // Simulate coming back online
     isOnline = true;
     rerender(<OfflineStatusBanner />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
 
     act(() => {
       vi.advanceTimersByTime(500);
     });
 
-    await waitFor(() => {
-      expect(screen.queryByRole('status')).not.toBeInTheDocument();
-    });
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(resetWasOffline).toHaveBeenCalled();
   });
 
-  it('should update aria-label based on connection state', async () => {
-    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
+  it('should update aria-label based on connection state', () => {
     let isOnline = false;
-    
-    (useOnlineStatus as any).mockImplementation(() => ({
-      get isOnline() { return isOnline; },
-      wasOffline: true,
-      resetWasOffline: vi.fn(),
-    }));
+    stubOnlineStatus(() => isOnline, true);
 
     const { rerender } = render(<OfflineStatusBanner />);
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('Offline status')).toBeInTheDocument();
-    });
+    settleLoadingGate();
+    expect(screen.getByLabelText('Offline status')).toBeInTheDocument();
 
     isOnline = true;
     rerender(<OfflineStatusBanner />);
 
-    await waitFor(() => {
-      expect(screen.getByLabelText('Reconnecting')).toBeInTheDocument();
-    });
+    expect(screen.getByLabelText('Reconnecting')).toBeInTheDocument();
   });
 
-  it('should show loading skeleton initially when online', async () => {
-    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
-    (useOnlineStatus as any).mockReturnValue({
-      isOnline: true,
-      wasOffline: false,
-      resetWasOffline: vi.fn(),
-    });
+  it('should show loading skeleton initially when online', () => {
+    stubOnlineStatus(() => true);
 
     render(<OfflineStatusBanner />);
 
     // Should show loading skeleton initially
-    const skeleton = document.querySelector('[aria-hidden="true"]');
-    expect(skeleton).toBeInTheDocument();
+    expect(document.querySelector('[aria-hidden="true"]')).toBeInTheDocument();
 
     act(() => {
       vi.advanceTimersByTime(300);
     });
 
-    await waitFor(() => {
-      expect(document.querySelector('[aria-hidden="true"]')).not.toBeInTheDocument();
-    });
+    expect(
+      document.querySelector('[aria-hidden="true"]'),
+    ).not.toBeInTheDocument();
   });
 });

Dechat/dex_with_fiat_frontend/src/components/OfflineStatusBanner.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { AlertTriangle, WifiOff } from 'lucide-react';
 import { useOnlineStatus } from '@/hooks/useOnlineStatus';
 import { useToast } from '@/hooks/useToast';
 import { offlineStatusToastSchema } from '@/lib/offlineStatusSchema';
-import { subscribeToQueuedMessageCount, setQueuedMessageCount, getQueuedMessageCount } from '@/lib/offlineMessageQueue';
+import { subscribeToQueuedMessageCount } from '@/lib/offlineMessageQueue';
 
 /**
  * Offline Status Banner Component
@@ -18,7 +18,6 @@ export default function OfflineStatusBanner() {
   const { addToast } = useToast();
   const [showBanner, setShowBanner] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
-  const [pendingCount, setPendingCount] = useState(0);
   const [optimisticPendingCount, setOptimisticPendingCount] = useState(0);
   const [isReconnecting, setIsReconnecting] = useState(false);
   const previousOnlineState = useRef<boolean>(true);
@@ -31,33 +30,27 @@ export default function OfflineStatusBanner() {
     return () => clearTimeout(timer);
   }, []);
 
+  // The queue count is owned by `offlineMessageQueue` and published by
+  // `useChat` as sends are queued and drained; this component only mirrors it.
   useEffect(() => {
-    return subscribeToQueuedMessageCount((count) => {
-      setPendingCount(count);
-      setOptimisticPendingCount(count);
-    });
-  }, []);
-
-  // Optimistic update: increment pending count immediately when message is queued
-  const optimisticallyIncrementPending = useCallback(() => {
-    setOptimisticPendingCount((prev: number) => prev + 1);
-    setQueuedMessageCount(getQueuedMessageCount() + 1);
-  }, []);
-
-  // Optimistic update: decrement pending count immediately when message is sent
-  const optimisticallyDecrementPending = useCallback(() => {
-    setOptimisticPendingCount((prev: number) => Math.max(0, prev - 1));
-    setQueuedMessageCount(Math.max(0, getQueuedMessageCount() - 1));
+    return subscribeToQueuedMessageCount(setOptimisticPendingCount);
   }, []);
 
   useEffect(() => {
+    // A reconnect is either observed live (we saw the offline render) or
+    // reported after the fact by `wasOffline` — the latter happens when this
+    // banner mounts only once the connection is already back. Without the
+    // `wasOffline` arm the toast is skipped and the latch is never reset, so
+    // the hook keeps reporting a reconnect that was never announced.
+    const cameBackOnline = isOnline && (!previousOnlineState.current || wasOffline);
+
     // Optimistic UI: Show banner immediately when going offline
     if (!isOnline && previousOnlineState.current) {
       setShowBanner(true);
       setIsReconnecting(false);
     }
     // Optimistic UI: Hide banner immediately when coming back online
-    else if (isOnline && !previousOnlineState.current) {
+    else if (cameBackOnline) {
       setIsReconnecting(true);
       // Show toast when coming back online
       const toastOptions = {
@@ -82,11 +75,14 @@ export default function OfflineStatusBanner() {
         addToast(errorMessage);
       }
 
+      // Consume the latch straight away, so the reconnect is announced exactly
+      // once rather than on every subsequent render.
+      resetWasOffline();
+
       // Optimistically hide banner after short delay
       setTimeout(() => {
         setShowBanner(false);
         setIsReconnecting(false);
-        resetWasOffline();
       }, 500);
     }
 

Dechat/dex_with_fiat_frontend/src/lib/aiAssistant.test.ts

@@ -240,8 +240,7 @@ describe('AIAssistant abort signal support', () => {
 
     expect(toastAddMock).toHaveBeenCalled();
     consoleErrorSpy.mockRestore();
-
-
+  });
 });
 
 /**
@@ -489,7 +488,11 @@ describe('aiAssistant request retry with exponential backoff', () => {
         }),
     );
 
-    const result = await assistant.analyzeUserMessage('hello');
+    // Fake timers are installed, so the backoff sleep between attempts only
+    // resolves once the pending timers are drained.
+    const promise = assistant.analyzeUserMessage('hello');
+    await vi.runAllTimersAsync();
+    const result = await promise;
 
     expect(result.intent).toBe('query');
     expect(fetch).toHaveBeenCalledTimes(2);
@@ -503,7 +506,9 @@ describe('aiAssistant request retry with exponential backoff', () => {
 
     const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 
-    const result = await assistant.analyzeUserMessage('hello');
+    const promise = assistant.analyzeUserMessage('hello');
+    await vi.runAllTimersAsync();
+    const result = await promise;
 
     expect(result.intent).toBe('unknown');
     expect(fetch).toHaveBeenCalledTimes(4); // initial + 3 retries
@@ -582,7 +587,9 @@ describe('aiAssistant request retry with exponential backoff', () => {
         }),
     );
 
-    const result = await assistant.generateFollowUpQuestion('query', ['name']);
+    const promise = assistant.generateFollowUpQuestion('query', ['name']);
+    await vi.runAllTimersAsync();
+    const result = await promise;
 
     expect(result).toBe('What is your name?');
     expect(fetch).toHaveBeenCalledTimes(2);