@freighttech/ui 0.13.18

package/src/backend/operations/__tests__/LastOperationBanner.test.tsx

@@ -0,0 +1,101 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { LastOperationBanner } from '../LastOperationBanner'
+import { apiCall } from '../../utils/apiCall'
+import { flash } from '../../FlashMessages'
+import { markUndoSuccess, useLastOperation } from '../store'
+
+jest.setTimeout(20000)
+
+jest.mock('../../utils/apiCall', () => ({
+  apiCall: jest.fn(),
+}))
+
+jest.mock('../../FlashMessages', () => ({
+  flash: jest.fn(),
+}))
+
+jest.mock('../store', () => ({
+  useLastOperation: jest.fn(),
+  markUndoSuccess: jest.fn(),
+}))
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    refresh: jest.fn(),
+  }),
+}))
+
+const mockOperation = {
+  actionLabel: 'audit_logs.actions.create',
+  commandId: 'users.create',
+  undoToken: 'token-123',
+}
+
+const createMockResponse = (status: number): Response => ({ status } as Response)
+
+const dict = {
+  'audit_logs.banner.last_operation': 'Last operation',
+  'audit_logs.banner.undo': 'Undo',
+  'audit_logs.actions.undoing': 'Undoing…',
+  'audit_logs.banner.undo_success': 'Undo completed',
+  'audit_logs.banner.undo_error': 'Undo failed',
+  'audit_logs.actions.create': 'Created user',
+}
+
+describe('LastOperationBanner', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    ;(useLastOperation as jest.Mock).mockReturnValue(mockOperation)
+  })
+
+  it('renders nothing when there is no operation', () => {
+    ;(useLastOperation as jest.Mock).mockReturnValue(null)
+    const { container } = renderWithProviders(<LastOperationBanner />, { dict })
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('shows translated label and handles successful undo', async () => {
+    ;(apiCall as jest.Mock).mockResolvedValue({
+      ok: true,
+      status: 200,
+      result: {},
+      response: createMockResponse(200),
+    })
+
+    renderWithProviders(<LastOperationBanner />, { dict })
+
+    expect(screen.getByText('Last operation')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: /undo/i }))
+
+    await waitFor(() => {
+      expect(apiCall).toHaveBeenCalledWith('/api/audit_logs/audit-logs/actions/undo', expect.objectContaining({
+        method: 'POST',
+      }))
+    })
+    expect(markUndoSuccess).toHaveBeenCalledWith('token-123')
+    expect(flash).toHaveBeenCalledWith('Undo completed', 'success')
+  })
+
+  it('surfaces undo errors from the API', async () => {
+    ;(apiCall as jest.Mock).mockResolvedValue({
+      ok: false,
+      status: 500,
+      result: { error: 'failed' },
+      response: createMockResponse(500),
+    })
+
+    renderWithProviders(<LastOperationBanner />, { dict })
+    fireEvent.click(screen.getByRole('button', { name: /undo/i }))
+
+    await waitFor(() => {
+      expect(flash).toHaveBeenCalledWith('failed', 'error')
+    })
+    expect(markUndoSuccess).not.toHaveBeenCalled()
+  })
+})

package/src/backend/operations/store.ts

@@ -0,0 +1,230 @@
+"use client"
+import * as React from 'react'
+import type { OperationMetadataPayload } from '@open-mercato/shared/lib/commands/operationMetadata'
+
+export type OperationEntry = OperationMetadataPayload & {
+  receivedAt: number
+}
+
+export type UndoneEntry = OperationEntry & {
+  undoneAt: number
+}
+
+type OperationStoreState = {
+  stack: OperationEntry[]
+  undone: UndoneEntry[]
+}
+
+const DEFAULT_STATE: OperationStoreState = { stack: [], undone: [] }
+
+const STORAGE_KEY = 'om:last-operations:v1'
+const STACK_LIMIT = 20
+const LAST_OPERATION_TTL_MS = 60_000
+const STACK_RETENTION_MS = 10 * 60_000
+
+let internalState: OperationStoreState = DEFAULT_STATE
+
+if (typeof window !== 'undefined') {
+  internalState = loadState()
+}
+
+const emitter = new EventTarget()
+
+function now() {
+  return typeof performance !== 'undefined' && performance.now
+    ? Math.round(performance.timeOrigin + performance.now())
+    : Date.now()
+}
+
+function loadState(): OperationStoreState {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) return DEFAULT_STATE
+    const parsed = JSON.parse(raw)
+    if (!parsed || typeof parsed !== 'object') return DEFAULT_STATE
+    const stack = Array.isArray(parsed.stack) ? parsed.stack.filter(isValidEntry).map(hydrateEntry) : []
+    const undone = Array.isArray(parsed.undone)
+      ? parsed.undone.filter(isValidEntry).map((raw: unknown) => {
+          const hydrated = hydrateEntry(raw)
+          const candidate = raw as { undoneAt?: unknown }
+          const undoneAt = typeof candidate.undoneAt === 'number' ? candidate.undoneAt : now()
+          return { ...hydrated, undoneAt }
+        })
+      : []
+    return pruneState({ stack, undone })
+  } catch {
+    return DEFAULT_STATE
+  }
+}
+
+function isValidEntry(entry: unknown): entry is OperationEntry {
+  if (entry == null || typeof entry !== 'object') return false
+  const candidate = entry as Record<string, unknown>
+  return (
+    typeof candidate.id === 'string'
+    && typeof candidate.undoToken === 'string'
+    && typeof candidate.commandId === 'string'
+    && typeof candidate.receivedAt === 'number'
+    && typeof candidate.executedAt === 'string'
+  )
+}
+
+function hydrateEntry(entry: unknown): OperationEntry {
+  const source = entry as Partial<OperationEntry> & Record<string, unknown>
+  return {
+    id: String(source.id),
+    undoToken: String(source.undoToken),
+    commandId: String(source.commandId),
+    actionLabel: typeof source.actionLabel === 'string' ? source.actionLabel : null,
+    resourceKind: typeof source.resourceKind === 'string' ? source.resourceKind : null,
+    resourceId: typeof source.resourceId === 'string' ? source.resourceId : null,
+    executedAt: typeof source.executedAt === 'string' ? source.executedAt : new Date((source.receivedAt as number | undefined) || now()).toISOString(),
+    receivedAt: typeof source.receivedAt === 'number' ? source.receivedAt : now(),
+  }
+}
+
+function persist(state: OperationStoreState) {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+  } catch {
+    // ignore storage quota errors
+  }
+}
+
+function pruneState(state: OperationStoreState): OperationStoreState {
+  const timestamp = now()
+  const stack = state.stack
+    .filter((entry, index, arr) => {
+      // Deduplicate by id/undoToken keeping latest
+      const duplicateIndex = arr.findIndex((candidate) => candidate.id === entry.id || candidate.undoToken === entry.undoToken)
+      if (duplicateIndex !== index) return false
+      return timestamp - entry.receivedAt <= STACK_RETENTION_MS
+    })
+    .sort((a, b) => a.receivedAt - b.receivedAt)
+    .slice(-STACK_LIMIT)
+  const undone = state.undone
+    .filter((entry) => timestamp - entry.undoneAt <= STACK_RETENTION_MS)
+    .sort((a, b) => a.undoneAt - b.undoneAt)
+    .slice(-STACK_LIMIT)
+  const next = { stack, undone }
+  return next
+}
+
+function emit() {
+  emitter.dispatchEvent(new Event('change'))
+}
+
+function updateState(updater: (prev: OperationStoreState) => OperationStoreState) {
+  const next = pruneState(updater(internalState))
+  internalState = next
+  persist(next)
+  emit()
+}
+
+function subscribe(listener: () => void) {
+  const wrapped = () => listener()
+  emitter.addEventListener('change', wrapped)
+  return () => emitter.removeEventListener('change', wrapped)
+}
+
+function getClientSnapshot(): OperationStoreState {
+  internalState = pruneState(internalState)
+  return internalState
+}
+
+export function useOperationStore<T>(selector: (state: OperationStoreState) => T): T {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => selector(getClientSnapshot()),
+    () => selector(DEFAULT_STATE),
+  )
+}
+
+export function pushOperation(meta: OperationMetadataPayload) {
+  if (typeof window === 'undefined') return
+  updateState((prev) => {
+    const entry: OperationEntry = {
+      ...meta,
+      receivedAt: now(),
+    }
+    const stack = prev.stack.filter((item) => item.id !== entry.id && item.undoToken !== entry.undoToken)
+    stack.push(entry)
+    return { stack, undone: [] }
+  })
+}
+
+export function markUndoSuccess(undoToken: string) {
+  if (typeof window === 'undefined') return
+  const removed: OperationEntry[] = []
+  updateState((prev) => {
+    const stack = prev.stack.filter((entry) => {
+      if (entry.undoToken === undoToken) {
+        removed.push(entry)
+        return false
+      }
+      return true
+    })
+    const undone = removed.length
+      ? [...prev.undone, ...removed.map((entry) => ({ ...entry, undoneAt: now() }))]
+      : prev.undone
+    return { stack, undone }
+  })
+}
+
+export function markRedoConsumed(logId: string) {
+  if (typeof window === 'undefined') return
+  updateState((prev) => ({
+    stack: prev.stack,
+    undone: prev.undone.filter((entry) => entry.id !== logId),
+  }))
+}
+
+export function getLastOperation(): OperationEntry | null {
+  const state = getClientSnapshot()
+  if (!state.stack.length) return null
+  const last = state.stack[state.stack.length - 1]
+  const lastExecuted = Date.parse(last.executedAt)
+  const cutoff = now() - LAST_OPERATION_TTL_MS
+  if (Number.isFinite(lastExecuted) && lastExecuted < cutoff) return null
+  if (!Number.isFinite(lastExecuted) && last.receivedAt < cutoff) return null
+  return last
+}
+
+export function useLastOperation(): OperationEntry | null {
+  return useOperationStore(getLastOperationFromState)
+}
+
+function getLastOperationFromState(state: OperationStoreState): OperationEntry | null {
+  if (!state.stack.length) return null
+  const last = state.stack[state.stack.length - 1]
+  const timestamp = now()
+  const executedAt = Date.parse(last.executedAt)
+  const cutoff = timestamp - LAST_OPERATION_TTL_MS
+  if (Number.isFinite(executedAt)) {
+    return executedAt >= cutoff ? last : null
+  }
+  return last.receivedAt >= cutoff ? last : null
+}
+
+export function useRedoCandidate(): UndoneEntry | null {
+  return useOperationStore((state) => (state.undone.length ? state.undone[state.undone.length - 1] : null))
+}
+
+export function hasRedoCandidate(logId: string): boolean {
+  const state = getClientSnapshot()
+  if (!state.undone.length) return false
+  const top = state.undone[state.undone.length - 1]
+  return top.id === logId
+}
+
+export function clearAllOperations() {
+  if (typeof window === 'undefined') return
+  internalState = DEFAULT_STATE
+  persist(internalState)
+  emit()
+}
+
+export const operationStackConstants = {
+  LAST_OPERATION_TTL_MS,
+}

package/src/backend/progress/ProgressTopBar.tsx

@@ -0,0 +1,189 @@
+"use client"
+import * as React from 'react'
+import { ChevronDown, ChevronUp, Loader2, CheckCircle, XCircle, X } from 'lucide-react'
+import { Button } from '../../primitives/button'
+import { Progress } from '../../primitives/progress'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useProgress } from './useProgress'
+import type { ProgressJobDto } from './useProgressPoll'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '../utils/apiCall'
+
+export type ProgressTopBarProps = {
+  className?: string
+  t: TranslateFn
+}
+
+export function ProgressTopBar({ className, t }: ProgressTopBarProps) {
+  const { activeJobs, recentlyCompleted, refresh } = useProgress()
+  const [expanded, setExpanded] = React.useState(false)
+
+  React.useEffect(() => {
+    const saved = localStorage.getItem('om:progress:expanded')
+    if (saved === 'true') setExpanded(true)
+  }, [])
+
+  React.useEffect(() => {
+    localStorage.setItem('om:progress:expanded', String(expanded))
+  }, [expanded])
+
+  const hasActiveJobs = activeJobs.length > 0
+  const hasRecentJobs = recentlyCompleted.length > 0
+
+  if (!hasActiveJobs && !hasRecentJobs) return null
+
+  return (
+    <div className={cn('border-b bg-background', className)}>
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={() => setExpanded(!expanded)}
+        className="h-auto w-full justify-between rounded-none bg-background px-4 py-2 hover:bg-muted"
+      >
+        <div className="flex items-center gap-2 text-sm">
+          {hasActiveJobs ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin text-primary" />
+              <span>
+                {t('progress.activeCount', '{count} operations running', { count: activeJobs.length })}
+              </span>
+              {activeJobs[0] && (
+                <span className="text-muted-foreground">
+                  — {activeJobs[0].name}{' '}
+                  {activeJobs[0].totalCount && activeJobs[0].totalCount > 0
+                    ? `(${activeJobs[0].progressPercent}%)`
+                    : `(${activeJobs[0].processedCount.toLocaleString()} ${t('progress.processed', 'processed')})`}
+                </span>
+              )}
+            </>
+          ) : (
+            <>
+              <CheckCircle className="h-4 w-4 text-green-500" />
+              <span className="text-muted-foreground">
+                {t('progress.recentlyCompleted', '{count} operations completed', { count: recentlyCompleted.length })}
+              </span>
+            </>
+          )}
+        </div>
+        {expanded ? (
+          <ChevronUp className="h-4 w-4" />
+        ) : (
+          <ChevronDown className="h-4 w-4" />
+        )}
+      </Button>
+
+      {expanded && (
+        <div className="space-y-2 bg-background px-4 pb-3">
+          {activeJobs.map((job) => (
+            <ProgressJobCard key={job.id} job={job} t={t} onCancel={refresh} />
+          ))}
+          {recentlyCompleted.map((job) => (
+            <ProgressJobCard key={job.id} job={job} t={t} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ProgressJobCard({ job, t, onCancel }: { job: ProgressJobDto; t: TranslateFn; onCancel?: () => void }) {
+  const [cancelling, setCancelling] = React.useState(false)
+
+  const handleCancel = async () => {
+    if (!job.cancellable || cancelling) return
+    setCancelling(true)
+    try {
+      await apiCall(`/api/progress/jobs/${job.id}`, { method: 'DELETE' })
+      onCancel?.()
+    } finally {
+      setCancelling(false)
+    }
+  }
+
+  const isActive = job.status === 'pending' || job.status === 'running'
+  const isFailed = job.status === 'failed'
+  const isCompleted = job.status === 'completed'
+
+  return (
+    <div className={cn(
+      'rounded-md border bg-card p-3',
+      isFailed && 'border-destructive/50 bg-destructive/5',
+      isCompleted && 'border-green-500/50 bg-green-50/50 dark:bg-green-950/20',
+    )}>
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            {isActive && <Loader2 className="h-4 w-4 animate-spin text-primary flex-shrink-0" />}
+            {isCompleted && <CheckCircle className="h-4 w-4 text-green-500 flex-shrink-0" />}
+            {isFailed && <XCircle className="h-4 w-4 text-destructive flex-shrink-0" />}
+            <span className="font-medium truncate">{job.name}</span>
+          </div>
+
+          {job.description && (
+            <p className="text-sm text-muted-foreground mt-1 truncate">{job.description}</p>
+          )}
+
+          {isFailed && job.errorMessage && (
+            <p className="text-sm text-destructive mt-1">{job.errorMessage}</p>
+          )}
+        </div>
+
+        {isActive && job.cancellable && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handleCancel}
+            disabled={cancelling}
+            className="flex-shrink-0"
+            aria-label={t('progress.actions.cancel', 'Cancel')}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {isActive && (
+        <div className="mt-2 space-y-1">
+          {job.totalCount && job.totalCount > 0 ? (
+            <Progress value={job.progressPercent} className="h-2" />
+          ) : (
+            <IndeterminateProgressBar className="h-2" />
+          )}
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>
+              {job.totalCount
+                ? `${job.processedCount.toLocaleString()} / ${job.totalCount.toLocaleString()}`
+                : `${job.processedCount.toLocaleString()} ${t('progress.processed', 'processed')}`
+              }
+            </span>
+            {job.etaSeconds != null && job.etaSeconds > 0 && (
+              <span>{formatEta(job.etaSeconds, t)}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function IndeterminateProgressBar({ className }: { className?: string }) {
+  return (
+    <div className={cn('relative w-full overflow-hidden rounded-full bg-secondary', className)}>
+      <div className="absolute inset-y-0 left-0 w-1/2 animate-pulse rounded-full bg-primary/80" />
+      <div className="absolute inset-y-0 right-0 w-1/3 rounded-full bg-primary/40" />
+    </div>
+  )
+}
+
+function formatEta(seconds: number, t: TranslateFn): string {
+  if (seconds < 60) {
+    return t('progress.eta.seconds', '{count}s remaining', { count: seconds })
+  }
+  if (seconds < 3600) {
+    const minutes = Math.ceil(seconds / 60)
+    return t('progress.eta.minutes', '{count}m remaining', { count: minutes })
+  }
+  const hours = Math.floor(seconds / 3600)
+  const mins = Math.ceil((seconds % 3600) / 60)
+  return t('progress.eta.hoursMinutes', '{hours}h {minutes}m remaining', { hours, minutes: mins })
+}

package/src/backend/progress/useProgress.ts

@@ -0,0 +1,12 @@
+"use client"
+import { useProgressPoll, type UseProgressPollResult } from './useProgressPoll'
+import { useProgressSse } from './useProgressSse'
+
+const progressStrategy =
+  typeof window !== 'undefined' && typeof window.EventSource !== 'undefined'
+    ? useProgressSse
+    : useProgressPoll
+
+export function useProgress(): UseProgressPollResult {
+  return progressStrategy()
+}

package/src/backend/progress/useProgressPoll.ts

@@ -0,0 +1,100 @@
+"use client"
+import * as React from 'react'
+import { apiCall } from '../utils/apiCall'
+import {
+  subscribeProgressUpdate,
+  subscribeProgressComplete,
+} from '@open-mercato/shared/lib/frontend/progressEvents'
+
+export type ProgressJobDto = {
+  id: string
+  jobType: string
+  name: string
+  description?: string | null
+  meta?: Record<string, unknown> | null
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled'
+  progressPercent: number
+  processedCount: number
+  totalCount?: number | null
+  etaSeconds?: number | null
+  cancellable: boolean
+  startedAt?: string | null
+  finishedAt?: string | null
+  errorMessage?: string | null
+}
+
+export type UseProgressPollResult = {
+  activeJobs: ProgressJobDto[]
+  recentlyCompleted: ProgressJobDto[]
+  isLoading: boolean
+  error: string | null
+  refresh: () => void
+}
+
+const POLL_INTERVAL = 5000
+
+function isVisibleProgressJob(job: ProgressJobDto): boolean {
+  return job.meta?.hiddenFromTopBar !== true
+}
+
+export function useProgressPoll(): UseProgressPollResult {
+  const [activeJobs, setActiveJobs] = React.useState<ProgressJobDto[]>([])
+  const [recentlyCompleted, setRecentlyCompleted] = React.useState<ProgressJobDto[]>([])
+  const [isLoading, setIsLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+
+  const fetchJobs = React.useCallback(async () => {
+    try {
+      const result = await apiCall<{ active: ProgressJobDto[]; recentlyCompleted: ProgressJobDto[] }>(
+        '/api/progress/active'
+      )
+      if (result.ok && result.result) {
+        setActiveJobs(result.result.active.filter(isVisibleProgressJob))
+        setRecentlyCompleted(result.result.recentlyCompleted.filter(isVisibleProgressJob))
+        setError(null)
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch progress')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  const refresh = React.useCallback(() => {
+    fetchJobs()
+  }, [fetchJobs])
+
+  React.useEffect(() => {
+    fetchJobs()
+    let interval: ReturnType<typeof setInterval> | null = setInterval(fetchJobs, POLL_INTERVAL)
+
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        if (interval) {
+          clearInterval(interval)
+          interval = null
+        }
+      } else {
+        fetchJobs()
+        interval = setInterval(fetchJobs, POLL_INTERVAL)
+      }
+    }
+
+    document.addEventListener('visibilitychange', onVisibilityChange)
+    return () => {
+      if (interval) clearInterval(interval)
+      document.removeEventListener('visibilitychange', onVisibilityChange)
+    }
+  }, [fetchJobs])
+
+  React.useEffect(() => {
+    const unsubUpdate = subscribeProgressUpdate(() => refresh())
+    const unsubComplete = subscribeProgressComplete(() => refresh())
+    return () => {
+      unsubUpdate()
+      unsubComplete()
+    }
+  }, [refresh])
+
+  return { activeJobs, recentlyCompleted, isLoading, error, refresh }
+}