@open-mercato/ui 0.9.0 → 0.9.1-develop.7462.1.94c09f158f

package/src/backend/__tests__/useProgressSse.test.tsx

@@ -60,6 +60,93 @@ describe('useProgressSse', () => {
     mockAppEventHandlers.clear()
   })
 
+  // Prior behavior (fixed): idle pages polled /api/progress/active every 5s
+  // regardless of whether any job was active. A characterization run against
+  // that code (1 mount fetch + 12 polls over 60s = 13 calls) confirmed the
+  // defect before this fix landed. The fix degrades the idle cadence to 30s
+  // (a reconciliation backstop for a dropped cross-process notify) rather
+  // than stopping outright, since the Postgres LISTEN/NOTIFY bridge has no
+  // replay for a listener that was mid-reconnect when a job was created.
+  it('idle with no active jobs: degrades to the 30s reconciliation cadence', async () => {
+    jest.useFakeTimers()
+    mockApiCall.mockResolvedValue(mockProgressResponse([]))
+
+    renderHook(() => useProgressSse())
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    expect(mockApiCall).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      jest.advanceTimersByTime(60000)
+      await Promise.resolve()
+    })
+
+    // 1 mount fetch + 2 polls at 30s over 60s = 3.
+    expect(mockApiCall).toHaveBeenCalledTimes(3)
+  })
+
+  it('while a job is active: keeps polling at the 5s cadence', async () => {
+    jest.useFakeTimers()
+    mockApiCall.mockResolvedValue(mockProgressResponse([runningJob]))
+
+    renderHook(() => useProgressSse())
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    expect(mockApiCall).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      jest.advanceTimersByTime(60000)
+      await Promise.resolve()
+    })
+
+    // 1 mount fetch + 12 polls at 5s over 60s = 13.
+    expect(mockApiCall).toHaveBeenCalledTimes(13)
+  })
+
+  it('a progress.job.created event while idle triggers exactly one fetch', async () => {
+    mockApiCall.mockResolvedValue(mockProgressResponse([]))
+    renderHook(() => useProgressSse())
+
+    await waitFor(() => expect(mockApiCall).toHaveBeenCalledTimes(1))
+
+    act(() => {
+      for (const handler of mockAppEventHandlers.get('progress.job.created') ?? []) {
+        handler({})
+      }
+    })
+
+    await waitFor(() => expect(mockApiCall).toHaveBeenCalledTimes(2))
+  })
+
+  it('unmounting mid-interval stops further fetches', async () => {
+    jest.useFakeTimers()
+    mockApiCall.mockResolvedValue(mockProgressResponse([runningJob]))
+
+    const { result, unmount } = renderHook(() => useProgressSse())
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    await waitFor(() => expect(result.current.activeJobs).toHaveLength(1))
+
+    const callsBeforeUnmount = mockApiCall.mock.calls.length
+    unmount()
+
+    await act(async () => {
+      jest.advanceTimersByTime(60000)
+      await Promise.resolve()
+    })
+
+    expect(mockApiCall).toHaveBeenCalledTimes(callsBeforeUnmount)
+  })
+
   it('removes a job from activeJobs when an SSE update carries a terminal status', async () => {
     mockApiCall.mockResolvedValue(mockProgressResponse([runningJob]))
     const { result } = renderHook(() => useProgressSse())
@@ -79,6 +166,41 @@ describe('useProgressSse', () => {
     }))
   })
 
+  it('stays paused in a backgrounded tab across a hasActiveJobs transition', async () => {
+    jest.useFakeTimers()
+    mockApiCall.mockResolvedValue(mockProgressResponse([runningJob]))
+
+    const { result } = renderHook(() => useProgressSse())
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+    await waitFor(() => expect(result.current.activeJobs).toHaveLength(1))
+
+    Object.defineProperty(document, 'hidden', { value: true, configurable: true })
+    act(() => {
+      document.dispatchEvent(new Event('visibilitychange'))
+    })
+
+    const callsWhileHidden = mockApiCall.mock.calls.length
+
+    act(() => {
+      for (const handler of mockAppEventHandlers.get('progress.job.updated') ?? []) {
+        handler({ payload: { ...completedJob, jobId: completedJob.id } })
+      }
+    })
+    expect(result.current.activeJobs).toHaveLength(0)
+
+    await act(async () => {
+      jest.advanceTimersByTime(60000)
+      await Promise.resolve()
+    })
+
+    expect(mockApiCall).toHaveBeenCalledTimes(callsWhileHidden)
+
+    Object.defineProperty(document, 'hidden', { value: false, configurable: true })
+  })
+
   it('periodically reconciles active jobs in SSE mode when completion events are missed', async () => {
     jest.useFakeTimers()
     mockApiCall

package/src/backend/confirm-dialog/ConfirmDialog.tsx

@@ -54,6 +54,7 @@ export function ConfirmDialog({
   const [internalOpen, setInternalOpen] = React.useState(false);
   const cancelButtonRef = React.useRef<HTMLButtonElement>(null);
   const confirmButtonRef = React.useRef<HTMLButtonElement>(null);
+  const restoreAriaHiddenRef = React.useRef(false);
   const [portalTarget, setPortalTarget] = React.useState<HTMLElement | null>(null);
   // Unique IDs so multiple ConfirmDialog instances on the same page don't
   // collide and make `aria-labelledby` resolve to the wrong dialog's title.
@@ -111,10 +112,25 @@ export function ConfirmDialog({
           }
         }, 0);
       }
+      // A modal opened underneath (e.g. a Radix Dialog) marks every sibling in
+      // <body> `aria-hidden`, including this portalled element. Shown on top
+      // of that modal it must stay reachable for assistive technology.
+      if (dialog.getAttribute("aria-hidden") === "true") {
+        dialog.removeAttribute("aria-hidden");
+        restoreAriaHiddenRef.current = true;
+      }
     } else {
       if (dialog.open) {
         dialog.close();
       }
+      if (restoreAriaHiddenRef.current) {
+        restoreAriaHiddenRef.current = false;
+        // Hand the attribute back only while the modal that hid us is still
+        // open; its own cleanup has otherwise already removed the marker.
+        if (dialog.hasAttribute("data-aria-hidden")) {
+          dialog.setAttribute("aria-hidden", "true");
+        }
+      }
     }
   }, [open, resolvedCancelText, portalTarget]);
 

package/src/backend/confirm-dialog/__tests__/ConfirmDialog.test.tsx

@@ -61,6 +61,35 @@ describe('ConfirmDialog', () => {
     expect(dialog.parentElement).toBe(document.body)
   })
 
+  it('stays exposed to assistive technology when a modal underneath hid its siblings', () => {
+    const renderDialog = (open: boolean) => (
+      <ConfirmDialog
+        open={open}
+        onOpenChange={() => undefined}
+        onConfirm={() => undefined}
+        title="Discard unsaved changes?"
+        confirmText="Discard"
+        cancelText="Cancel"
+      />
+    )
+    const { rerender } = renderWithProviders(renderDialog(false))
+    const dialog = document.body.querySelector('dialog')!
+    dialog.setAttribute('aria-hidden', 'true')
+    dialog.setAttribute('data-aria-hidden', 'true')
+
+    rerender(renderDialog(true))
+    expect(dialog).not.toHaveAttribute('aria-hidden')
+    expect(screen.getByRole('alertdialog')).toBe(dialog)
+
+    rerender(renderDialog(false))
+    expect(dialog).toHaveAttribute('aria-hidden', 'true')
+
+    rerender(renderDialog(true))
+    dialog.removeAttribute('data-aria-hidden')
+    rerender(renderDialog(false))
+    expect(dialog).not.toHaveAttribute('aria-hidden')
+  })
+
   it('renders the destructive confirmation as the solid variant', () => {
     renderWithProviders(
       <ConfirmDialog

package/src/backend/inputs/PhoneNumberField.tsx

@@ -551,6 +551,22 @@ export function PhoneNumberField({
     () => buildPhoneCountryOptions(countriesProp, t, locale),
     [countriesProp, t, locale],
   )
+  const countryItems = React.useMemo(
+    () => countryOptions.map(({ country: optionCountry, label }) => (
+      <SelectItem
+        key={`${optionCountry.iso2}-${optionCountry.dialCode}`}
+        value={optionCountry.iso2}
+        textValue={label}
+      >
+        <SelectItemLeading>
+          <span className="text-base leading-none">{optionCountry.flag}</span>
+        </SelectItemLeading>
+        <span className="flex-1 truncate">{label}</span>
+        <span className="ml-2 text-xs text-muted-foreground tabular-nums">{optionCountry.dialCode}</span>
+      </SelectItem>
+    )),
+    [countryOptions],
+  )
   const fallbackCountry = React.useMemo(
     () => (defaultCountryIso2 && findCountryByIso(defaultCountryIso2)) || DEFAULT_COUNTRY,
     [defaultCountryIso2],
@@ -723,17 +739,7 @@ export function PhoneNumberField({
             <span className={cn('text-base leading-none', size && 'inline-flex size-5 shrink-0 items-center justify-center text-xl [&_img]:size-full')} aria-hidden="true">{renderCountryIcon ? renderCountryIcon(country) : country.flag}</span>
             <span className={cn("text-sm text-foreground tabular-nums", disabled && "text-text-disabled")}>{country.dialCode}</span>
           </SelectTrigger>
-          <SelectContent align="start">
-            {countryOptions.map(({ country: c, label }) => (
-              <SelectItem key={`${c.iso2}-${c.dialCode}`} value={c.iso2} textValue={label}>
-                <SelectItemLeading>
-                  <span className="text-base leading-none">{c.flag}</span>
-                </SelectItemLeading>
-                <span className="flex-1 truncate">{label}</span>
-                <span className="ml-2 text-xs text-muted-foreground tabular-nums">{c.dialCode}</span>
-              </SelectItem>
-            ))}
-          </SelectContent>
+          <SelectContent align="start">{countryItems}</SelectContent>
         </Select>
         <div aria-hidden="true" className="w-px self-stretch bg-input" />
         <input

package/src/backend/inputs/__tests__/PhoneNumberField.renders.test.tsx

@@ -0,0 +1,35 @@
+/** @jest-environment jsdom */
+
+const mockTranslate = (_key: string, fallback: string) => fallback
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => mockTranslate,
+  useOptionalLocale: () => undefined,
+}))
+
+const mockItemRender = jest.fn()
+jest.mock('../../../primitives/select', () => {
+  const actual = jest.requireActual('../../../primitives/select')
+  const ReactActual = jest.requireActual('react')
+  return {
+    ...actual,
+    SelectItem: ReactActual.forwardRef((props: Record<string, unknown>, ref: unknown) => {
+      mockItemRender()
+      return ReactActual.createElement(actual.SelectItem, { ...props, ref })
+    }),
+  }
+})
+
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { PHONE_COUNTRIES, PhoneNumberField } from '../PhoneNumberField'
+
+describe('PhoneNumberField render cost', () => {
+  it('does not re-render its country options when the host form re-renders it', () => {
+    const view = render(<PhoneNumberField value="+48 600 100 200" onValueChange={() => {}} />)
+    expect(mockItemRender.mock.calls.length).toBeGreaterThanOrEqual(PHONE_COUNTRIES.length)
+    mockItemRender.mockClear()
+    view.rerender(<PhoneNumberField value="+48 600 100 200" onValueChange={() => {}} />)
+    view.rerender(<PhoneNumberField value="+48 600 100 201" onValueChange={() => {}} />)
+    expect(mockItemRender).not.toHaveBeenCalled()
+  })
+})

package/src/backend/progress/useProgressSse.ts

@@ -7,6 +7,7 @@ import type { ProgressJobDto, UseProgressPollResult } from './useProgressPoll'
 import { applyLocalProgressUpdate, isLocalProgressJob } from './useProgressPoll'
 
 const SSE_PROGRESS_SYNC_INTERVAL = 5000
+const SSE_PROGRESS_IDLE_RECONCILE_INTERVAL = 30000
 
 function isVisibleProgressJob(job: ProgressJobDto): boolean {
   return job.meta?.hiddenFromTopBar !== true
@@ -69,10 +70,26 @@ export function useProgressSse(): UseProgressPollResult {
     void fetchJobs()
   }, [fetchJobs])
 
+  // The cross-process bridge (packages/events/src/bridge.ts) delivers
+  // broadcast events over Postgres LISTEN/NOTIFY, which has no replay: a
+  // notify published during a listener reconnect window is lost for good.
+  // Poll fast while a job is active, and fall back to a slow reconciliation
+  // poll while idle so a missed `progress.job.created` still surfaces.
+  // See `.ai/lessons/worker-emitted-progress-needs-polling-fallback-even.md`.
+  const hasActiveJobs = activeJobs.length > 0
+
   React.useEffect(() => {
-    let interval: ReturnType<typeof setInterval> | null = setInterval(() => {
-      void fetchJobs()
-    }, SSE_PROGRESS_SYNC_INTERVAL)
+    let interval: ReturnType<typeof setInterval> | null = null
+
+    const startInterval = () => {
+      if (interval) clearInterval(interval)
+      if (document.hidden) return
+      interval = setInterval(() => {
+        void fetchJobs()
+      }, hasActiveJobs ? SSE_PROGRESS_SYNC_INTERVAL : SSE_PROGRESS_IDLE_RECONCILE_INTERVAL)
+    }
+
+    startInterval()
 
     const onVisibilityChange = () => {
       if (document.hidden) {
@@ -82,10 +99,7 @@ export function useProgressSse(): UseProgressPollResult {
         }
       } else {
         void fetchJobs()
-        if (interval) clearInterval(interval)
-        interval = setInterval(() => {
-          void fetchJobs()
-        }, SSE_PROGRESS_SYNC_INTERVAL)
+        startInterval()
       }
     }
 
@@ -94,7 +108,7 @@ export function useProgressSse(): UseProgressPollResult {
       if (interval) clearInterval(interval)
       document.removeEventListener('visibilitychange', onVisibilityChange)
     }
-  }, [fetchJobs])
+  }, [fetchJobs, hasActiveJobs])
 
   React.useEffect(() => {
     return subscribeProgressUpdate((detail) => {