fix(sync): remap temp ids, prevent id collisions, surface failed mutations (#1175)

Closes three offline BLOCKERs from the PWA audit:

- B1: offline edits/deletes of an offline-created entity were lost. The
  negative temp id was baked into the PUT/DELETE url and never rewritten
  after the CREATE returned a real id, so dependents 404'd and were dropped.
  Dependents now carry a {id} placeholder + tempEntityId; flush builds a
  tempId->realId map and durably rewrites still-queued dependents on CREATE
  success (survives flush boundaries / reloads).
- B2: tempId = -(Date.now()) collided within a millisecond, overwriting an
  optimistic row. Replaced with a monotonic nextTempId() minter.
- B3: any 4xx marked the mutation failed with no rollback and no signal, and
  the badge ignored failed rows. Terminal failures now roll back the phantom
  optimistic CREATE; 401/408/425/429 are treated as retryable; failedCount()
  is surfaced in OfflineBanner (red pill) and OfflineTab.

client/src/components/Layout/OfflineBanner.test.tsx

@@ -0,0 +1,42 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { screen, waitFor } from '@testing-library/react'
+import { render } from '../../../tests/helpers/render'
+import OfflineBanner from './OfflineBanner'
+
+vi.mock('../../sync/mutationQueue', () => ({
+  mutationQueue: {
+    pendingCount: vi.fn(),
+    failedCount: vi.fn(),
+  },
+}))
+
+import { mutationQueue } from '../../sync/mutationQueue'
+
+const pendingCount = mutationQueue.pendingCount as ReturnType<typeof vi.fn>
+const failedCount = mutationQueue.failedCount as ReturnType<typeof vi.fn>
+
+afterEach(() => {
+  vi.clearAllMocks()
+  Object.defineProperty(navigator, 'onLine', { value: true, writable: true, configurable: true })
+})
+
+describe('OfflineBanner (B3 surface)', () => {
+  it('shows the failed pill when failedCount > 0 while online', async () => {
+    pendingCount.mockResolvedValue(0)
+    failedCount.mockResolvedValue(2)
+
+    render(<OfflineBanner />)
+
+    expect(await screen.findByText(/2 changes failed to sync/i)).toBeInTheDocument()
+  })
+
+  it('stays hidden when online with nothing pending or failed', async () => {
+    pendingCount.mockResolvedValue(0)
+    failedCount.mockResolvedValue(0)
+
+    const { container } = render(<OfflineBanner />)
+    // Give the async poll a tick to resolve.
+    await waitFor(() => expect(failedCount).toHaveBeenCalled())
+    expect(container.querySelector('[role="status"]')).toBeNull()
+  })
+})

client/src/components/Layout/OfflineBanner.tsx

@@ -2,6 +2,7 @@
  * OfflineBanner — connectivity + sync state indicator.
  *
  * States:
+ *   N failed            →  red pill   "N changes failed to sync" (takes priority)
  *   offline + N queued  →  amber pill "Offline · N queued"
  *   offline + 0 queued  →  amber pill "Offline"
  *   online  + N pending →  blue pill  "Syncing N…"
@@ -12,7 +13,7 @@
  * headers. On mobile it hovers just above the bottom tab bar.
  */
 import React, { useState, useEffect } from 'react'
-import { WifiOff, RefreshCw } from 'lucide-react'
+import { WifiOff, RefreshCw, AlertTriangle } from 'lucide-react'
 import { mutationQueue } from '../../sync/mutationQueue'
 
 const POLL_MS = 3_000
@@ -20,6 +21,7 @@ const POLL_MS = 3_000
 export default function OfflineBanner(): React.ReactElement | null {
   const [isOnline, setIsOnline] = useState(navigator.onLine)
   const [pendingCount, setPendingCount] = useState(0)
+  const [failedCount, setFailedCount] = useState(0)
 
   useEffect(() => {
     const onOnline  = () => setIsOnline(true)
@@ -35,26 +37,36 @@ export default function OfflineBanner(): React.ReactElement | null {
   useEffect(() => {
     let cancelled = false
     async function poll() {
-      const n = await mutationQueue.pendingCount()
-      if (!cancelled) setPendingCount(n)
+      const [n, failed] = await Promise.all([
+        mutationQueue.pendingCount(),
+        mutationQueue.failedCount(),
+      ])
+      if (!cancelled) {
+        setPendingCount(n)
+        setFailedCount(failed)
+      }
     }
     poll()
     const id = setInterval(poll, POLL_MS)
     return () => { cancelled = true; clearInterval(id) }
   }, [])
 
-  const hidden = isOnline && pendingCount === 0
+  const hidden = isOnline && pendingCount === 0 && failedCount === 0
   if (hidden) return null
 
   const offline = !isOnline
-  const bg    = offline ? '#92400e' : '#1e40af'
+  // Failed mutations are the most important signal — they mean data was dropped.
+  const failed = failedCount > 0
+  const bg    = failed ? '#b91c1c' : offline ? '#92400e' : '#1e40af'
   const text  = '#fff'
 
-  const label = offline
-    ? pendingCount > 0
-      ? `Offline · ${pendingCount} queued`
-      : 'Offline'
-    : `Syncing ${pendingCount}…`
+  const label = failed
+    ? `${failedCount} change${failedCount !== 1 ? 's' : ''} failed to sync`
+    : offline
+      ? pendingCount > 0
+        ? `Offline · ${pendingCount} queued`
+        : 'Offline'
+      : `Syncing ${pendingCount}…`
 
   return (
     <div
@@ -82,9 +94,11 @@ export default function OfflineBanner(): React.ReactElement | null {
         pointerEvents: 'none',
       }}
     >
-      {offline
-        ? <WifiOff size={12} />
-        : <RefreshCw size={12} style={{ animation: 'spin 1s linear infinite' }} />
+      {failed
+        ? <AlertTriangle size={12} />
+        : offline
+          ? <WifiOff size={12} />
+          : <RefreshCw size={12} style={{ animation: 'spin 1s linear infinite' }} />
       }
       {label}
     </div>

client/src/components/Settings/OfflineTab.tsx

@@ -21,6 +21,7 @@ interface CachedTripRow {
 export default function OfflineTab(): React.ReactElement {
   const [rows, setRows] = useState<CachedTripRow[]>([])
   const [pendingCount, setPendingCount] = useState(0)
+  const [failedCount, setFailedCount] = useState(0)
   const [syncing, setSyncing] = useState(false)
   const [clearing, setClearing] = useState(false)
   const [loading, setLoading] = useState(true)
@@ -28,11 +29,13 @@ export default function OfflineTab(): React.ReactElement {
   const load = useCallback(async () => {
     setLoading(true)
     try {
-      const [metas, pending] = await Promise.all([
+      const [metas, pending, failed] = await Promise.all([
         offlineDb.syncMeta.toArray(),
         mutationQueue.pendingCount(),
+        mutationQueue.failedCount(),
       ])
       setPendingCount(pending)
+      setFailedCount(failed)
 
       const result: CachedTripRow[] = []
       for (const meta of metas) {
@@ -85,6 +88,7 @@ export default function OfflineTab(): React.ReactElement {
         <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
           <Stat label="Cached trips" value={rows.length} />
           <Stat label="Pending changes" value={pendingCount} />
+          {failedCount > 0 && <Stat label="Failed changes" value={failedCount} danger />}
         </div>
 
         {/* Actions */}
@@ -165,13 +169,14 @@ export default function OfflineTab(): React.ReactElement {
   )
 }
 
-function Stat({ label, value }: { label: string; value: number }) {
+function Stat({ label, value, danger }: { label: string; value: number; danger?: boolean }) {
   return (
     <div className="border border-edge bg-surface-secondary" style={{
       padding: '8px 14px', borderRadius: 8,
       minWidth: 100,
     }}>
-      <div className="text-content" style={{ fontSize: 20, fontWeight: 700 }}>{value}</div>
+      <div style={{ fontSize: 20, fontWeight: 700, color: danger ? '#ef4444' : undefined }}
+        className={danger ? undefined : 'text-content'}>{value}</div>
       <div className="text-content-muted" style={{ fontSize: 11 }}>{label}</div>
     </div>
   )