@open-mercato/ui 0.6.6-develop.6317.1.b3be10ab84 → 0.6.6-develop.6331.1.a33b8e99b7

package/src/backend/conflicts/index.ts

@@ -1,4 +1,8 @@
-import { extractOptimisticLockConflict } from '../utils/optimisticLock'
+import {
+  extractOptimisticLockConflict,
+  extractRecordLockConflict,
+  type RecordLockConflictBody,
+} from '../utils/optimisticLock'
 import { showRecordConflict } from './store'
 
 export {
@@ -21,29 +25,102 @@ export type SurfaceRecordConflictOptions = {
 }
 
 /**
- * If `error` is an OSS optimistic-lock conflict (HTTP 409 with
- * `code: 'optimistic_lock_conflict'`), push the localized "record modified"
- * message onto the shared conflict bar and return `true`. Otherwise return
- * `false` so callers can fall back to their normal error handling.
+ * Handler the enterprise `record_locks` merge-dialog widget registers (on mount)
+ * so `surfaceRecordConflict` can defer the OSS conflict bar in favor of the
+ * field-level merge dialog. Core/UI stays enterprise-free: enterprise calls
+ * {@link registerRecordLockConflictHandler}; this module never imports it.
  *
- * This is the single entry point every form uses, so the conflict surfaces the
- * same persistent, error-styled bar everywhere.
+ * MUST return `true` only when it actually owns/renders the surface for THIS
+ * conflict (its widget is mounted for the conflicting record). Returning `false`
+ * (different record / cannot render) makes `surfaceRecordConflict` fall through
+ * to the OSS conflict bar, so a conflict is never swallowed and we never render
+ * BOTH the merge dialog and the bar (single surface, S3).
+ */
+export type RecordLockConflictHandler = (conflict: RecordLockConflictBody, error: unknown) => boolean
+
+let recordLockConflictHandler: RecordLockConflictHandler | null = null
+
+/**
+ * Register the record-lock conflict handler (enterprise merge-dialog widget).
+ * Returns an unregister function. When a handler is registered,
+ * `surfaceRecordConflict` defers `record_lock_conflict` 409s to it instead of
+ * rendering the OSS conflict bar (single surface, S3).
+ *
+ * SAFETY: when NO handler is registered (widget absent/removed),
+ * `surfaceRecordConflict` still renders the OSS conflict bar for ANY 409 — a
+ * conflict is never silently swallowed.
+ */
+export function registerRecordLockConflictHandler(handler: RecordLockConflictHandler): () => void {
+  recordLockConflictHandler = handler
+  return () => {
+    if (recordLockConflictHandler === handler) recordLockConflictHandler = null
+  }
+}
+
+/** Test-only: inspect whether a record-lock conflict handler is registered. */
+export function hasRecordLockConflictHandlerForTest(): boolean {
+  return recordLockConflictHandler !== null
+}
+
+/** Test-only: clear any registered record-lock conflict handler. */
+export function resetRecordLockConflictHandlerForTest(): void {
+  recordLockConflictHandler = null
+}
+
+/**
+ * Single conflict surface (S3). Resolves a 409 to exactly one UI:
+ *
+ *   - `record_lock_conflict` payload AND a merge-dialog handler registered →
+ *     defer to the handler (no conflict bar) and return `true`.
+ *   - otherwise (OSS `optimistic_lock_conflict`, OR a `record_lock_conflict`
+ *     with NO handler registered) → render the OSS conflict bar and return
+ *     `true`. A conflict is ALWAYS surfaced; the worst case is plainer UX, never
+ *     a silently-swallowed conflict.
+ *   - not a recognized conflict → return `false` so callers fall back to their
+ *     normal error handling.
  */
 export function surfaceRecordConflict(
   error: unknown,
   t: Translate,
   options: SurfaceRecordConflictOptions = {},
 ): boolean {
-  const conflict = extractOptimisticLockConflict(error)
-  if (!conflict) return false
-  showRecordConflict({
-    message: t(
-      'ui.forms.flash.recordModified',
-      'This record was modified by someone else. Refresh and try again.',
-    ),
-    title: options.title ?? null,
-    currentUpdatedAt: conflict.currentUpdatedAt,
-    onRefresh: options.onRefresh ?? null,
-  })
-  return true
+  const recordLockConflict = extractRecordLockConflict(error)
+  if (recordLockConflict && recordLockConflictHandler) {
+    // The widget owns the surface ONLY when it handles this record's conflict
+    // (returns true). If it declines (different record / not mounted for it),
+    // fall through to the OSS bar so the conflict is never swallowed and we
+    // never render both the merge dialog AND the bar.
+    if (recordLockConflictHandler(recordLockConflict, error)) return true
+  }
+
+  const ossConflict = extractOptimisticLockConflict(error)
+  if (ossConflict) {
+    showRecordConflict({
+      message: t(
+        'ui.forms.flash.recordModified',
+        'This record was modified by someone else. Refresh and try again.',
+      ),
+      title: options.title ?? null,
+      currentUpdatedAt: ossConflict.currentUpdatedAt,
+      onRefresh: options.onRefresh ?? null,
+    })
+    return true
+  }
+
+  // No handler is registered but the server returned a record-lock 409: still
+  // render the OSS bar so the conflict is never swallowed.
+  if (recordLockConflict) {
+    showRecordConflict({
+      message: t(
+        'ui.forms.flash.recordModified',
+        'This record was modified by someone else. Refresh and try again.',
+      ),
+      title: options.title ?? null,
+      currentUpdatedAt: null,
+      onRefresh: options.onRefresh ?? null,
+    })
+    return true
+  }
+
+  return false
 }

package/src/backend/detail/AddressesSection.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { surfaceRecordConflict } from '../conflicts'
 import { LoadingMessage } from '@open-mercato/ui/backend/detail'
 import { createTranslatorWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -40,13 +41,14 @@ export type AddressSummary = {
   postalCode?: string | null
   country?: string | null
   isPrimary?: boolean
+  updatedAt?: string | null
 }
 
 export type AddressDataAdapter<C = unknown> = {
   list: (params: { entityId: string | null; context?: C }) => Promise<AddressSummary[]>
   create: (params: { entityId: string; payload: AddressInput; context?: C }) => Promise<{ id?: string } | void>
-  update: (params: { id: string; payload: AddressInput; context?: C }) => Promise<void>
-  delete: (params: { id: string; context?: C }) => Promise<void>
+  update: (params: { id: string; payload: AddressInput; updatedAt?: string | null; context?: C }) => Promise<void>
+  delete: (params: { id: string; updatedAt?: string | null; context?: C }) => Promise<void>
 }
 
 export type AddressesSectionProps<C = unknown> = {
@@ -205,7 +207,8 @@ function AddressesSectionImpl<C = unknown>({
       pushLoading()
       setIsSubmitting(true)
       try {
-        await dataAdapter.update({ id, payload, context: dataContext })
+        const addressUpdatedAt = addresses.find((address) => address.id === id)?.updatedAt ?? null
+        await dataAdapter.update({ id, payload, updatedAt: addressUpdatedAt, context: dataContext })
         setAddresses((prev) => {
           return prev.map((address) => {
             if (address.id !== id) {
@@ -230,6 +233,7 @@ function AddressesSectionImpl<C = unknown>({
         })
         flash(label('success', 'Address saved.'), 'success')
       } catch (err) {
+        surfaceRecordConflict(err, t)
         const message =
           err instanceof Error && err.message ? err.message : label('error', 'Failed to save address.')
         const error = new Error(message) as Error & { details?: unknown }
@@ -242,7 +246,7 @@ function AddressesSectionImpl<C = unknown>({
         popLoading()
       }
     },
-    [dataAdapter, dataContext, label, normalizedEntityId, popLoading, pushLoading],
+    [addresses, dataAdapter, dataContext, label, normalizedEntityId, popLoading, pushLoading, t],
   )
 
   const handleDelete = React.useCallback(
@@ -253,20 +257,21 @@ function AddressesSectionImpl<C = unknown>({
       pushLoading()
       setIsSubmitting(true)
       try {
-        await dataAdapter.delete({ id, context: dataContext })
+        const addressUpdatedAt = addresses.find((address) => address.id === id)?.updatedAt ?? null
+        await dataAdapter.delete({ id, updatedAt: addressUpdatedAt, context: dataContext })
         setAddresses((prev) => prev.filter((address) => address.id !== id))
         flash(label('deleted', 'Address deleted.'), 'success')
       } catch (err) {
         const message =
           err instanceof Error && err.message ? err.message : label('error', 'Failed to delete address.')
-        flash(message, 'error')
+        if (!surfaceRecordConflict(err, t)) flash(message, 'error')
         throw err
       } finally {
         setIsSubmitting(false)
         popLoading()
       }
     },
-    [dataAdapter, dataContext, label, normalizedEntityId, popLoading, pushLoading],
+    [addresses, dataAdapter, dataContext, label, normalizedEntityId, popLoading, pushLoading, t],
   )
 
   const displayAddresses = React.useMemo<AddressValue[]>(() => {

package/src/backend/detail/NotesSection.tsx

@@ -16,6 +16,7 @@ import {
   SelectValue,
 } from '@open-mercato/ui/primitives/select'
 import { flash } from '../FlashMessages'
+import { surfaceRecordConflict } from '../conflicts'
 import { SwitchableMarkdownInput } from '../inputs/SwitchableMarkdownInput'
 import { ErrorMessage } from './ErrorMessage'
 import { LoadingMessage } from './LoadingMessage'
@@ -48,6 +49,7 @@ export type CommentSummary = {
   id: string
   body: string
   createdAt: string
+  updatedAt?: string | null
   authorUserId?: string | null
   authorName?: string | null
   authorEmail?: string | null
@@ -87,8 +89,8 @@ export type NotesDataAdapter<C = unknown> = {
     totalPages: number
   }>
   create: (params: NotesCreatePayload & { context?: C }) => Promise<Partial<CommentSummary> | void>
-  update: (params: { id: string; patch: NotesUpdatePayload; context?: C }) => Promise<void>
-  delete: (params: { id: string; context?: C }) => Promise<void>
+  update: (params: { id: string; patch: NotesUpdatePayload; updatedAt?: string | null; context?: C }) => Promise<void>
+  delete: (params: { id: string; updatedAt?: string | null; context?: C }) => Promise<void>
 }
 
 type RenderIconFn = (icon: string, className?: string) => React.ReactNode
@@ -221,6 +223,12 @@ export function mapCommentSummary(input: unknown): CommentSummary {
       : typeof data.created_at === 'string'
         ? data.created_at
         : new Date().toISOString()
+  const updatedAt =
+    typeof data.updatedAt === 'string'
+      ? data.updatedAt
+      : typeof data.updated_at === 'string'
+        ? data.updated_at
+        : null
   const authorUserId =
     typeof data.authorUserId === 'string'
       ? data.authorUserId
@@ -267,6 +275,7 @@ export function mapCommentSummary(input: unknown): CommentSummary {
     id,
     body,
     createdAt,
+    updatedAt,
     authorUserId,
     authorName,
     authorEmail,
@@ -678,7 +687,7 @@ function NotesSectionImpl<C = unknown>({
         return true
       } catch (err) {
         const message = err instanceof Error ? err.message : label('error')
-        flash(message, 'error')
+        if (!surfaceRecordConflict(err, t)) flash(message, 'error')
         return false
       } finally {
         setIsSubmitting(false)
@@ -699,6 +708,7 @@ function NotesSectionImpl<C = unknown>({
             : undefined
       const sanitizedColor =
         patch.appearanceColor !== undefined ? sanitizeHexColor(patch.appearanceColor ?? null) : undefined
+      const noteUpdatedAt = notes.find((comment) => comment.id === noteId)?.updatedAt ?? null
       try {
         await dataAdapter.update({
           id: noteId,
@@ -707,6 +717,7 @@ function NotesSectionImpl<C = unknown>({
             appearanceIcon: sanitizedIcon,
             appearanceColor: sanitizedColor,
           },
+          updatedAt: noteUpdatedAt,
           context: dataContext,
         })
         setNotes((prev) => {
@@ -723,11 +734,11 @@ function NotesSectionImpl<C = unknown>({
         flash(label('updateSuccess'), 'success')
       } catch (error) {
         const message = error instanceof Error ? error.message : label('updateError')
-        flash(message, 'error')
+        if (!surfaceRecordConflict(error, t)) flash(message, 'error')
         throw error instanceof Error ? error : new Error(message)
       }
     },
-    [dataAdapter, dataContext, t],
+    [dataAdapter, dataContext, notes, t],
   )
 
   const handleDeleteNote = React.useCallback(
@@ -740,7 +751,7 @@ function NotesSectionImpl<C = unknown>({
       setDeletingNoteId(note.id)
       pushLoading()
       try {
-        await dataAdapter.delete({ id: note.id, context: dataContext })
+        await dataAdapter.delete({ id: note.id, updatedAt: note.updatedAt ?? null, context: dataContext })
         setNotes((prev) => prev.filter((existing) => existing.id !== note.id))
         if (pagedMode) {
           setVisibleCount((prev) => Math.max(0, prev - 1))
@@ -748,13 +759,13 @@ function NotesSectionImpl<C = unknown>({
         flash(label('deleteSuccess', 'Note deleted'), 'success')
       } catch (err) {
         const message = err instanceof Error ? err.message : label('deleteError', 'Failed to delete note')
-        flash(message, 'error')
+        if (!surfaceRecordConflict(err, t)) flash(message, 'error')
       } finally {
         setDeletingNoteId(null)
         popLoading()
       }
     },
-    [confirm, dataAdapter, dataContext, label, popLoading, pushLoading],
+    [confirm, dataAdapter, dataContext, label, popLoading, pushLoading, t],
   )
 
   const handleSubmit = React.useCallback(

package/src/backend/injection/recordContext.tsx

@@ -0,0 +1,101 @@
+'use client'
+import * as React from 'react'
+
+/**
+ * AppShell-owned transport for the current detail record's injection context
+ * (Phase 0 / S2). The `backend:record:current` injection spot is mounted once,
+ * globally, by `AppShell` — before page `children` — so a page cannot pass props
+ * "up" to it. Instead, a detail page publishes its record context through this
+ * provider; `AppShell` merges it into the spot's base `{ path, query }` context.
+ *
+ * Keeps `packages/ui`/core enterprise-free: this is a plain context object, no
+ * record_locks dependency, no second `<InjectionSpot>`.
+ */
+export type RecordInjectionContext = {
+  /** record_locks resource key, e.g. `customers.person`, `sales.order`. */
+  resourceKind: string
+  /** The record's id. */
+  resourceId: string
+  /** Server `updated_at` (ISO) for the optimistic-lock floor + action-log base. */
+  updatedAt?: string | null
+  /** Optional record payload for field-level merge UX. */
+  data?: Record<string, unknown> | null
+  /** The detail screen path this context belongs to (used for stale-context guarding). */
+  path?: string | null
+}
+
+/**
+ * Build a normalized record injection context. Returns `null` when the required
+ * keys are missing so callers can publish unconditionally.
+ */
+export function buildRecordInjectionContext(input: {
+  resourceKind: string | null | undefined
+  resourceId: string | null | undefined
+  updatedAt?: string | Date | null
+  data?: Record<string, unknown> | null
+  path?: string | null
+}): RecordInjectionContext | null {
+  const resourceKind = typeof input.resourceKind === 'string' ? input.resourceKind.trim() : ''
+  const resourceId = typeof input.resourceId === 'string' ? input.resourceId.trim() : ''
+  if (!resourceKind || !resourceId) return null
+  const updatedAt = input.updatedAt instanceof Date
+    ? input.updatedAt.toISOString()
+    : (typeof input.updatedAt === 'string' && input.updatedAt.trim().length ? input.updatedAt.trim() : null)
+  return {
+    resourceKind,
+    resourceId,
+    updatedAt,
+    data: input.data ?? null,
+    path: typeof input.path === 'string' && input.path.length ? input.path : null,
+  }
+}
+
+type RecordInjectionContextSetter = (context: RecordInjectionContext | null) => void
+
+const BackendRecordInjectionContextSetterContext = React.createContext<RecordInjectionContextSetter | null>(null)
+
+/**
+ * AppShell renders this provider around page `children`, supplying the setter
+ * that publishes record context into AppShell-owned state. Detail pages call
+ * `useSetCurrentRecordInjectionContext()` to publish/clear.
+ */
+export function BackendRecordInjectionContextProvider({
+  setCurrentRecordInjectionContext,
+  children,
+}: {
+  setCurrentRecordInjectionContext: RecordInjectionContextSetter
+  children: React.ReactNode
+}) {
+  return (
+    <BackendRecordInjectionContextSetterContext.Provider value={setCurrentRecordInjectionContext}>
+      {children}
+    </BackendRecordInjectionContextSetterContext.Provider>
+  )
+}
+
+/**
+ * Publish the current detail record's injection context to the AppShell-owned
+ * `backend:record:current` mount, and clear it automatically on unmount /
+ * dependency change. Pass `null` to clear (e.g. while the record is loading).
+ *
+ * ```tsx
+ * useSetCurrentRecordInjectionContext(
+ *   buildRecordInjectionContext({ resourceKind: 'customers.person', resourceId: id, updatedAt, data, path }),
+ * )
+ * ```
+ */
+export function useSetCurrentRecordInjectionContext(context: RecordInjectionContext | null): void {
+  const setter = React.useContext(BackendRecordInjectionContextSetterContext)
+  // Serialize so we only re-publish when the meaningful fields change.
+  const serialized = context
+    ? JSON.stringify({ k: context.resourceKind, i: context.resourceId, u: context.updatedAt ?? null, p: context.path ?? null })
+    : null
+  React.useEffect(() => {
+    if (!setter) return
+    setter(context)
+    return () => {
+      setter(null)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setter, serialized])
+}

package/src/backend/notifications/NotificationPanel.tsx

@@ -5,6 +5,7 @@ import { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from 'luci
 import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
 import { Sheet, SheetContent, SheetTitle } from '../../primitives/sheet'
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs'
 import { NotificationItem } from './NotificationItem'
 import type { NotificationDto, NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'
 import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
@@ -97,6 +98,12 @@ export function NotificationPanel({
     }
   }
 
+  const handleFilterChange = React.useCallback((next: string) => {
+    if (next === 'all' || next === 'unread' || next === 'action') {
+      setFilter(next)
+    }
+  }, [])
+
   // Preserve the body scroll lock contract that consumers (and integration
   // tests) rely on. Radix Dialog locks scroll via react-remove-scroll which
   // does not set `document.body.style.overflow` — we set it ourselves so the
@@ -124,15 +131,17 @@ export function NotificationPanel({
           </SheetTitle>
           <div className="flex items-center gap-1">
             {unreadCount > 0 ? (
-              <button
+              <Button
                 type="button"
+                variant="link"
+                size="sm"
                 onClick={handleMarkAllRead}
                 disabled={markingAllRead}
-                className="inline-flex items-center gap-1 rounded-md px-1 text-sm font-medium leading-5 text-accent-indigo transition-colors hover:text-accent-indigo/80 disabled:opacity-50"
+                className="gap-1 px-1 text-accent-indigo hover:text-accent-indigo/80 hover:no-underline"
               >
                 {markingAllRead ? <Loader2 className="size-3.5 animate-spin" /> : null}
                 {t('notifications.markAllRead', 'Mark all read')}
-              </button>
+              </Button>
             ) : null}
             <IconButton
               type="button"
@@ -146,41 +155,29 @@ export function NotificationPanel({
           </div>
         </div>
 
-        <div role="tablist" className="flex items-center gap-5 border-b px-5 py-3.5">
-          {(['all', 'unread', 'action'] as const).map((value) => {
-            const isActive = filter === value
-            const label =
-              value === 'all'
-                ? t('notifications.filters.all', 'All')
-                : value === 'unread'
-                  ? t('notifications.filters.unread', 'Unread')
-                  : t('notifications.filters.actionRequired', 'Action Required')
-            return (
-              <button
-                key={value}
-                type="button"
-                role="tab"
-                aria-selected={isActive}
-                onClick={() => setFilter(value)}
-                className="relative inline-flex items-center gap-1.5 pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none focus-visible:text-foreground data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground"
-                data-active={isActive}
-              >
-                <span>{label}</span>
-                {value === 'unread' && unreadCount > 0 ? (
-                  <span className="inline-flex min-w-4 items-center justify-center rounded-full bg-accent-indigo px-1 text-overline font-medium text-accent-indigo-foreground">
-                    {unreadCount > 99 ? '99+' : unreadCount}
-                  </span>
-                ) : null}
-                {isActive ? (
-                  <span
-                    className="absolute bottom-[-14px] left-0 right-0 h-0.5 bg-foreground"
-                    aria-hidden="true"
-                  />
-                ) : null}
-              </button>
-            )
-          })}
-        </div>
+        <Tabs value={filter} onValueChange={handleFilterChange} variant="underline">
+          <TabsList className="flex w-full px-5">
+            {(['all', 'unread', 'action'] as const).map((value) => {
+              const label =
+                value === 'all'
+                  ? t('notifications.filters.all', 'All')
+                  : value === 'unread'
+                    ? t('notifications.filters.unread', 'Unread')
+                    : t('notifications.filters.actionRequired', 'Action Required')
+              const count =
+                value === 'unread' && unreadCount > 0
+                  ? unreadCount > 99
+                    ? '99+'
+                    : unreadCount
+                  : undefined
+              return (
+                <TabsTrigger key={value} value={value} count={count}>
+                  {label}
+                </TabsTrigger>
+              )
+            })}
+          </TabsList>
+        </Tabs>
 
         {dismissUndo && onUndoDismiss && (
           <div className="border-b bg-muted/50 px-4 py-2 text-sm">

package/src/backend/notifications/__tests__/NotificationPanel.test.tsx

@@ -0,0 +1,124 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { render, screen, fireEvent, within, act } from '@testing-library/react'
+import { NotificationPanel } from '../NotificationPanel'
+import type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+
+// NotificationItem (rendered per row) calls next/navigation's useRouter, which
+// throws outside an App Router provider. Stub it so the panel can render rows.
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    replace: jest.fn(),
+    prefetch: jest.fn(),
+    refresh: jest.fn(),
+    back: jest.fn(),
+    forward: jest.fn(),
+  }),
+}))
+
+const t = ((key: string, fallback?: unknown) =>
+  typeof fallback === 'string' ? fallback : key) as TranslateFn
+
+function buildNotification(overrides: Partial<NotificationDto>): NotificationDto {
+  return {
+    id: 'n',
+    type: 'system.generic',
+    title: 'Title',
+    severity: 'info',
+    status: 'unread',
+    actions: [],
+    createdAt: '2026-06-18T00:00:00.000Z',
+    ...overrides,
+  }
+}
+
+function buildProps(overrides: Partial<React.ComponentProps<typeof NotificationPanel>> = {}) {
+  return {
+    open: true,
+    onOpenChange: jest.fn(),
+    notifications: [] as NotificationDto[],
+    unreadCount: 0,
+    onMarkAsRead: jest.fn().mockResolvedValue(undefined),
+    onExecuteAction: jest.fn().mockResolvedValue({}),
+    onDismiss: jest.fn().mockResolvedValue(undefined),
+    onMarkAllRead: jest.fn().mockResolvedValue(undefined),
+    t,
+    ...overrides,
+  } satisfies React.ComponentProps<typeof NotificationPanel>
+}
+
+describe('NotificationPanel controls use shared primitives', () => {
+  it('renders the filter tabs through the Tabs primitive, not raw buttons', () => {
+    render(<NotificationPanel {...buildProps()} />)
+
+    const tablist = screen.getByRole('tablist')
+    const tabs = within(tablist).getAllByRole('tab')
+
+    expect(tabs).toHaveLength(3)
+    // The Tabs primitive stamps data-slot on every trigger; a raw <button>
+    // would not, so this guards against regressing back to hand-rolled markup.
+    tabs.forEach((tab) => expect(tab).toHaveAttribute('data-slot', 'tabs-trigger'))
+  })
+
+  it('marks the active filter with aria-selected and switches on click', () => {
+    render(<NotificationPanel {...buildProps()} />)
+
+    const allTab = screen.getByRole('tab', { name: /All/i })
+    const unreadTab = screen.getByRole('tab', { name: /Unread/i })
+
+    expect(allTab).toHaveAttribute('aria-selected', 'true')
+    expect(unreadTab).toHaveAttribute('aria-selected', 'false')
+
+    fireEvent.click(unreadTab)
+
+    expect(unreadTab).toHaveAttribute('aria-selected', 'true')
+    expect(allTab).toHaveAttribute('aria-selected', 'false')
+  })
+
+  it('shows the unread count badge on the Unread tab and caps it at 99+', () => {
+    const { rerender } = render(<NotificationPanel {...buildProps({ unreadCount: 5 })} />)
+    expect(within(screen.getByRole('tab', { name: /Unread/i })).getByText('5')).toBeInTheDocument()
+
+    rerender(<NotificationPanel {...buildProps({ unreadCount: 150 })} />)
+    expect(within(screen.getByRole('tab', { name: /Unread/i })).getByText('99+')).toBeInTheDocument()
+  })
+
+  it('renders Mark all read as a Button primitive and invokes the handler', async () => {
+    const onMarkAllRead = jest.fn().mockResolvedValue(undefined)
+    render(<NotificationPanel {...buildProps({ unreadCount: 3, onMarkAllRead })} />)
+
+    const markAllButton = screen.getByRole('button', { name: /Mark all read/i })
+    expect(markAllButton).toHaveAttribute('data-slot', 'button')
+
+    await act(async () => {
+      fireEvent.click(markAllButton)
+    })
+    expect(onMarkAllRead).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides Mark all read when there are no unread notifications', () => {
+    render(<NotificationPanel {...buildProps({ unreadCount: 0 })} />)
+    expect(screen.queryByRole('button', { name: /Mark all read/i })).toBeNull()
+  })
+
+  it('keeps filtering behavior when switching tabs', () => {
+    const notifications = [
+      buildNotification({ id: 'a', title: 'Unread one', status: 'unread' }),
+      buildNotification({ id: 'b', title: 'Read one', status: 'read' }),
+    ]
+    render(<NotificationPanel {...buildProps({ notifications, unreadCount: 1 })} />)
+
+    expect(screen.getByText('Unread one')).toBeInTheDocument()
+    expect(screen.getByText('Read one')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('tab', { name: /Unread/i }))
+
+    expect(screen.getByText('Unread one')).toBeInTheDocument()
+    expect(screen.queryByText('Read one')).toBeNull()
+  })
+})