@open-mercato/ui 0.8.1-develop.7296.1.2111d779db → 0.9.0

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

@@ -0,0 +1,202 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { screen, fireEvent } from '@testing-library/react'
+import { RowActions, type RowActionItem } from '../RowActions'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+// Regression coverage for the QA findings on PR #6685:
+//   #6718 — the menu could not be driven with the arrow keys, so reaching an
+//           item meant Tabbing through every other row's trigger first.
+//   #6719 — the panel had a fixed `w-44`, so the Polish "Zarejestruj push
+//           ponownie" overhung its right border by ~10px.
+// #6719 is the same defect ActionsDropdown carried as #3580, and is fixed the
+// same way here.
+const LONG_POLISH_LABEL = 'Zarejestruj push ponownie'
+const TRIGGER_LABEL = 'Open actions'
+
+function renderMenu(items: RowActionItem[]) {
+  return renderWithProviders(<RowActions items={items} />, { dict: {} })
+}
+
+function openMenu() {
+  // The panel needs two renders: the click opens the menu, and measuring the
+  // trigger sets the anchor that actually renders the portal. Focus lands as
+  // part of that second commit — no timer involved, so nothing to advance here.
+  fireEvent.click(screen.getByRole('button', { name: TRIGGER_LABEL }))
+}
+
+const THREE_ITEMS: RowActionItem[] = [
+  { id: 'set-primary', label: 'Set as primary', onSelect: jest.fn() },
+  { id: 'poll-now', label: 'Poll now', onSelect: jest.fn() },
+  { id: 'disconnect', label: 'Disconnect', destructive: true, onSelect: jest.fn() },
+]
+
+function itemNamed(name: string) {
+  return screen.getByRole('menuitem', { name })
+}
+
+describe('RowActions — panel width (#6719)', () => {
+
+  it('grows to fit a long label instead of clipping it with a fixed width', () => {
+    renderMenu([{ id: 'register-push', label: LONG_POLISH_LABEL, onSelect: jest.fn() }])
+    openMenu()
+
+    const menu = screen.getByRole('menu')
+    expect(menu.className).toContain('w-max')
+    expect(menu.className).toContain('min-w-44')
+    expect(menu.className).toContain('max-w-xs')
+    // The bug was a hard `w-44` that longer localized labels overflowed.
+    expect(menu.className).not.toMatch(/(^|\s)w-44(\s|$)/)
+
+    expect(screen.getByText(LONG_POLISH_LABEL)).toBeInTheDocument()
+  })
+
+  it('stacks items as flex children so w-max measures the widest one', () => {
+    renderMenu(THREE_ITEMS)
+    openMenu()
+
+    // Load-bearing, not cosmetic. Button is `inline-flex`, so under a block
+    // panel the items are inline-level and `max-content` is all of them laid
+    // end to end — far past `max-w-xs`, which pinned the panel to the cap
+    // regardless of its labels. Blockifying them makes `w-max` mean what it says.
+    const menu = screen.getByRole('menu')
+    expect(menu.className).toContain('flex')
+    expect(menu.className).toContain('flex-col')
+  })
+
+  it('lets an over-long label wrap rather than overflow the panel', () => {
+    renderMenu([{ id: 'register-push', label: LONG_POLISH_LABEL, onSelect: jest.fn() }])
+    openMenu()
+
+    const item = itemNamed(LONG_POLISH_LABEL)
+    // Button is `whitespace-nowrap` by default — that default is what pushed the
+    // label past the border, so it has to be overridden here.
+    expect(item.className).toContain('whitespace-normal')
+    expect(item.className).toContain('h-auto')
+  })
+})
+
+describe('RowActions — keyboard navigation (#6718)', () => {
+
+  it('focuses the first item when the menu opens', () => {
+    renderMenu(THREE_ITEMS)
+    openMenu()
+
+    expect(document.activeElement).toBe(itemNamed('Set as primary'))
+  })
+
+  it('moves down the list with ArrowDown and wraps at the end', () => {
+    renderMenu(THREE_ITEMS)
+    openMenu()
+
+    fireEvent.keyDown(document, { key: 'ArrowDown' })
+    expect(document.activeElement).toBe(itemNamed('Poll now'))
+
+    fireEvent.keyDown(document, { key: 'ArrowDown' })
+    expect(document.activeElement).toBe(itemNamed('Disconnect'))
+
+    fireEvent.keyDown(document, { key: 'ArrowDown' })
+    expect(document.activeElement).toBe(itemNamed('Set as primary'))
+  })
+
+  it('moves up the list with ArrowUp and wraps at the start', () => {
+    renderMenu(THREE_ITEMS)
+    openMenu()
+
+    fireEvent.keyDown(document, { key: 'ArrowUp' })
+    expect(document.activeElement).toBe(itemNamed('Disconnect'))
+
+    fireEvent.keyDown(document, { key: 'ArrowUp' })
+    expect(document.activeElement).toBe(itemNamed('Poll now'))
+  })
+
+  it('jumps to the first and last item with Home and End', () => {
+    renderMenu(THREE_ITEMS)
+    openMenu()
+
+    fireEvent.keyDown(document, { key: 'End' })
+    expect(document.activeElement).toBe(itemNamed('Disconnect'))
+
+    fireEvent.keyDown(document, { key: 'Home' })
+    expect(document.activeElement).toBe(itemNamed('Set as primary'))
+  })
+
+  it('keeps Tab inside the menu instead of escaping to the next row', () => {
+    renderMenu(THREE_ITEMS)
+    openMenu()
+
+    fireEvent.keyDown(document, { key: 'Tab' })
+    expect(document.activeElement).toBe(itemNamed('Poll now'))
+
+    fireEvent.keyDown(document, { key: 'Tab', shiftKey: true })
+    expect(document.activeElement).toBe(itemNamed('Set as primary'))
+  })
+
+  it('does not steal focus when the menu opens on hover (#6771)', () => {
+    // The menu also opens on hover. Moving focus into it on *every* open meant
+    // that brushing the mouse over ⋯ while typing in a list's search field
+    // pulled the caret out of the field and dropped the next keystrokes.
+    renderMenu(THREE_ITEMS)
+    const field = document.createElement('input')
+    document.body.appendChild(field)
+    field.focus()
+
+    fireEvent.pointerEnter(screen.getByRole('button', { name: TRIGGER_LABEL }), { pointerType: 'mouse' })
+
+    expect(screen.getByRole('menu')).toBeInTheDocument()
+    expect(document.activeElement).toBe(field)
+    field.remove()
+  })
+
+  it('leaves typing alone while a hover-opened menu is showing (#6771)', () => {
+    // The key handler is on `document`, so without scoping it would also
+    // swallow the arrows and Home/End of someone typing in that field.
+    renderMenu(THREE_ITEMS)
+    const field = document.createElement('input')
+    document.body.appendChild(field)
+    field.focus()
+    fireEvent.pointerEnter(screen.getByRole('button', { name: TRIGGER_LABEL }), { pointerType: 'mouse' })
+
+    for (const key of ['ArrowDown', 'ArrowUp', 'Home', 'End']) {
+      fireEvent.keyDown(document, { key })
+      expect(document.activeElement).toBe(field)
+    }
+    field.remove()
+  })
+
+  it('does not reset the highlighted item when the page scrolls', () => {
+    // Repositioning on scroll updates the anchor rect; that must not be read as
+    // a fresh open and send focus back to the first item.
+    renderMenu(THREE_ITEMS)
+    openMenu()
+    fireEvent.keyDown(document, { key: 'End' })
+    expect(document.activeElement).toBe(itemNamed('Disconnect'))
+
+    fireEvent.scroll(window)
+
+    expect(document.activeElement).toBe(itemNamed('Disconnect'))
+  })
+
+  it('closes on Escape and returns focus to the trigger', () => {
+    renderMenu(THREE_ITEMS)
+    openMenu()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument()
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: TRIGGER_LABEL }))
+  })
+
+  it('still runs the action when an item is activated', () => {
+    const onSelect = jest.fn()
+    renderMenu([{ id: 'poll-now', label: 'Poll now', onSelect }])
+    openMenu()
+
+    fireEvent.click(itemNamed('Poll now'))
+
+    expect(onSelect).toHaveBeenCalledTimes(1)
+  })
+})

package/src/backend/charts/KpiCard.tsx

@@ -138,6 +138,7 @@ export function KpiCard({
       <div className={wrapperClass}>
         {headerRow}
         <p className="text-2xl sm:text-3xl font-semibold tracking-tight text-card-foreground">--</p>
+        {footer != null && <div className="mt-3">{footer}</div>}
       </div>
     )
   }

package/src/backend/charts/__tests__/KpiCard.test.tsx

@@ -0,0 +1,20 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import { KpiCard } from '../KpiCard'
+
+describe('KpiCard', () => {
+  it('keeps the footer when there is no value, because the footer is what explains the dash', () => {
+    render(<KpiCard title="Latest NPS" value={null} footer={<span>Never answered a survey</span>} />)
+    expect(screen.getByText('--')).toBeTruthy()
+    expect(screen.getByText('Never answered a survey')).toBeTruthy()
+  })
+
+  it('renders the footer beside a value as before', () => {
+    render(<KpiCard title="Orders" value={3} footer={<span>last 30 days</span>} />)
+    expect(screen.getByText('last 30 days')).toBeTruthy()
+  })
+})

package/src/backend/detail/AttachmentsSection.tsx

@@ -61,6 +61,7 @@ function AttachmentsSectionImpl({
   const [deleteOpen, setDeleteOpen] = React.useState(false)
   const [deleteTarget, setDeleteTarget] = React.useState<AttachmentItem | null>(null)
   const fileInputRef = React.useRef<HTMLInputElement | null>(null)
+  const uploadingRef = React.useRef(false)
 
   const load = React.useCallback(async (targetPage = 1, replace = true) => {
     if (!recordId) return
@@ -121,9 +122,12 @@ function AttachmentsSectionImpl({
 
   const acceptFiles = React.useCallback(
     async (files: FileList | null) => {
-      if (!files || !files.length || !recordId) return
+      if (!files || !files.length || !recordId || uploadingRef.current) return
+      uploadingRef.current = true
       setError(null)
       setIsUploading(true)
+      let uploadedCount = 0
+      let uploadError: string | null = null
       try {
         for (const file of Array.from(files)) {
           const fd = new FormData()
@@ -139,12 +143,19 @@ function AttachmentsSectionImpl({
             const message = call.result?.error || t('attachments.library.upload.failed', 'Upload failed.')
             throw new Error(message)
           }
+          uploadedCount += 1
         }
-        await load(1, true)
-        onChanged?.()
       } catch (err: any) {
-        setError(err?.message || t('attachments.library.upload.failed', 'Upload failed.'))
+        uploadError = err?.message || t('attachments.library.upload.failed', 'Upload failed.')
+      }
+      try {
+        if (uploadedCount > 0) {
+          await load(1, true)
+          onChanged?.()
+        }
       } finally {
+        if (uploadError) setError(uploadError)
+        uploadingRef.current = false
         setIsUploading(false)
         if (fileInputRef.current) {
           fileInputRef.current.value = ''
@@ -271,12 +282,13 @@ function AttachmentsSectionImpl({
             type="file"
             multiple
             className="hidden"
+            disabled={isUploading}
             onChange={(event) => void acceptFiles(event.target.files)}
           />
         </div>
       )}
 
-      {error ? <p className="text-xs font-medium text-status-error-text">{error}</p> : null}
+      {error ? <p role="alert" className="text-xs font-medium text-status-error-text">{error}</p> : null}
 
       {loading ? (
         <div className="text-sm text-muted-foreground">{t('attachments.library.loading', 'Loading attachments…')}</div>

package/src/backend/detail/NotesSection.tsx

@@ -31,6 +31,9 @@ type Translator = (key: string, fallback?: string, params?: Record<string, strin
 
 const NOTES_PAGE_SIZE = 20
 
+const noteBodyClassName =
+  'break-words text-foreground [&>*]:mb-2 [&>*:last-child]:mb-0 [&_ul]:ml-4 [&_ul]:list-disc [&_ol]:ml-4 [&_ol]:list-decimal [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-xs'
+
 const isTestEnv =
   typeof process !== 'undefined' &&
   (process.env.NODE_ENV === 'test' || typeof process.env.JEST_WORKER_ID !== 'undefined')
@@ -58,6 +61,10 @@ export type CommentSummary = {
   authorEmail?: string | null
   dealId?: string | null
   dealTitle?: string | null
+  /** Generic per-note context (e.g. the child record a note came from), rendered like the linked deal. */
+  contextLabel?: string | null
+  /** Optional link for `contextLabel`; without it the label renders as plain text. */
+  contextHref?: string | null
   appearanceIcon?: string | null
   appearanceColor?: string | null
 }
@@ -221,6 +228,18 @@ export type NotesSectionProps<C = unknown> = {
   hideMarkdownToggle?: boolean
   /** Hide the appearance (icon/color) affordances: the palette buttons and the appearance dialog. */
   disableAppearance?: boolean
+  /**
+   * Per-note edit permission. Returning `false` hides the note's edit and appearance buttons
+   * and disables click-to-edit on its body. Presentational only — the server stays the authority.
+   */
+  canEditNote?: (note: CommentSummary) => boolean
+  /** Per-note delete permission. Returning `false` hides the note's delete button. */
+  canDeleteNote?: (note: CommentSummary) => boolean
+  /**
+   * Hide the composer, the add actions (including the `onActionChange` action) and every
+   * per-note mutation control. Notes and "load more" still render.
+   */
+  readOnly?: boolean
 }
 
 export function sanitizeHexColor(value: string | null): string | null {
@@ -329,6 +348,9 @@ function NotesSectionImpl<C = unknown>({
   forceMarkdown,
   hideMarkdownToggle,
   disableAppearance,
+  canEditNote,
+  canDeleteNote,
+  readOnly = false,
 }: NotesSectionProps<C>) {
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const t = React.useMemo<Translator>(() => translator ?? ((key, fallback) => fallback ?? key), [translator])
@@ -470,7 +492,7 @@ function NotesSectionImpl<C = unknown>({
   const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)
   const formRef = React.useRef<HTMLFormElement | null>(null)
   const focusComposer = React.useCallback(() => {
-    if (!hasEntity) return
+    if (!hasEntity || readOnly) return
     setComposerOpen(true)
     window.requestAnimationFrame(() => {
       if (isMarkdownActive) {
@@ -486,7 +508,7 @@ function NotesSectionImpl<C = unknown>({
       element.focus()
       element.scrollIntoView({ behavior: 'smooth', block: 'center' })
     })
-  }, [formRef, hasEntity, isMarkdownActive])
+  }, [formRef, hasEntity, isMarkdownActive, readOnly])
   const [appearanceDialogState, setAppearanceDialogState] = React.useState<
     | { mode: 'create'; icon: string | null; color: string | null }
     | { mode: 'edit'; noteId: string; icon: string | null; color: string | null }
@@ -582,7 +604,7 @@ function NotesSectionImpl<C = unknown>({
 
   React.useEffect(() => {
     if (!onActionChange) return
-    if (!notes.length) {
+    if (!notes.length || readOnly) {
       onActionChange(null)
       return
     }
@@ -593,7 +615,7 @@ function NotesSectionImpl<C = unknown>({
       icon: <Plus className="mr-2 h-4 w-4" />,
     })
     return () => onActionChange(null)
-  }, [onActionChange, addActionLabel, focusComposer, hasEntity, isLoading, isSubmitting, notes.length])
+  }, [onActionChange, addActionLabel, focusComposer, hasEntity, isLoading, isSubmitting, notes.length, readOnly])
 
   const adjustTextareaSize = React.useCallback((element: HTMLTextAreaElement | null) => {
     if (!element) return
@@ -629,12 +651,12 @@ function NotesSectionImpl<C = unknown>({
   }, [notes.length, pagedMode])
 
   React.useEffect(() => {
-    if (hasEntity) return
+    if (hasEntity && !readOnly) return
     setComposerOpen(false)
     setDraftBody('')
     setDraftIcon(null)
     setDraftColor(null)
-  }, [hasEntity])
+  }, [hasEntity, readOnly])
 
   const visibleNotes = React.useMemo(
     () => (pagedMode ? notes : notes.slice(0, visibleCount)),
@@ -1167,7 +1189,7 @@ function NotesSectionImpl<C = unknown>({
       {loadError ? <ErrorMessage label={loadError} className="mt-3" /> : null}
 
       <div className="space-y-3">
-        {!composerOpen && hasVisibleNotes && !onActionChange ? (
+        {!composerOpen && hasVisibleNotes && !onActionChange && !readOnly ? (
           <div className="flex justify-end">
             <Button
               type="button"
@@ -1190,11 +1212,14 @@ function NotesSectionImpl<C = unknown>({
           visibleNotes.map((note) => {
             const author = noteAuthorLabel(note)
             const isAppearanceSaving = appearanceDialogSaving && editingAppearanceNoteId === note.id
-            const isEditingContent = contentEditor.id === note.id
+            const canEdit = !readOnly && (canEditNote ? canEditNote(note) : true)
+            const canDelete = !readOnly && (canDeleteNote ? canDeleteNote(note) : true)
+            const isEditingContent = canEdit && contentEditor.id === note.id
             const displayIcon = note.appearanceIcon ?? null
             const displayColor = note.appearanceColor ?? null
             const timestampValue = note.createdAt
             const fallbackTimestampLabel = formatDateTime(note.createdAt) ?? emptyLabel
+            const contextLabel = note.contextLabel && note.contextLabel.length ? note.contextLabel : null
             return (
               <div key={note.id} className="group space-y-2 rounded-lg border bg-card p-4">
                 <div className="flex flex-wrap items-start justify-between gap-3">
@@ -1221,59 +1246,77 @@ function NotesSectionImpl<C = unknown>({
                         </a>
                       </div>
                     ) : null}
-                  </div>
-                  <div
-                    className={`flex items-center gap-2 transition-opacity ${
-                      isEditingContent ? 'opacity-100' : 'opacity-100 md:opacity-0 md:group-hover:opacity-100 focus-within:opacity-100'
-                    }`}
-                  >
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => setContentEditor({ id: note.id, value: note.body })}
-                    >
-                      <Pencil className="h-4 w-4" />
-                    </Button>
-                    {showAppearanceControls ? (
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        onClick={(event) => {
-                          event.stopPropagation()
-                          setAppearanceDialogError(null)
-                          setAppearanceDialogState({
-                            mode: 'edit',
-                            noteId: note.id,
-                            icon: note.appearanceIcon ?? null,
-                            color: note.appearanceColor ?? null,
-                          })
-                        }}
-                        disabled={appearanceDialogSaving && editingAppearanceNoteId === note.id}
-                      >
-                        {isAppearanceSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Palette className="h-4 w-4" />}
-                      </Button>
+                    {contextLabel ? (
+                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                        <ArrowUpRightSquare className="h-3.5 w-3.5" />
+                        {note.contextHref ? (
+                          <a href={note.contextHref} className="font-medium text-foreground hover:underline">
+                            {contextLabel}
+                          </a>
+                        ) : (
+                          <span className="font-medium text-foreground">{contextLabel}</span>
+                        )}
+                      </div>
                     ) : null}
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      onClick={(event) => {
-                        event.stopPropagation()
-                        void handleDeleteNote(note)
-                      }}
-                      disabled={deletingNoteId === note.id}
-                    >
-                      {deletingNoteId === note.id ? (
-                        <span className="relative flex h-4 w-4 items-center justify-center text-destructive">
-                          <span className="absolute h-4 w-4 animate-spin rounded-full border border-destructive border-t-transparent" />
-                        </span>
-                      ) : (
-                        <Trash2 className="h-4 w-4" />
-                      )}
-                    </Button>
                   </div>
+                  {canEdit || canDelete ? (
+                    <div
+                      className={`flex items-center gap-2 transition-opacity ${
+                        isEditingContent ? 'opacity-100' : 'opacity-100 md:opacity-0 md:group-hover:opacity-100 focus-within:opacity-100'
+                      }`}
+                    >
+                      {canEdit ? (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => setContentEditor({ id: note.id, value: note.body })}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                      ) : null}
+                      {showAppearanceControls && canEdit ? (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={(event) => {
+                            event.stopPropagation()
+                            setAppearanceDialogError(null)
+                            setAppearanceDialogState({
+                              mode: 'edit',
+                              noteId: note.id,
+                              icon: note.appearanceIcon ?? null,
+                              color: note.appearanceColor ?? null,
+                            })
+                          }}
+                          disabled={appearanceDialogSaving && editingAppearanceNoteId === note.id}
+                        >
+                          {isAppearanceSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Palette className="h-4 w-4" />}
+                        </Button>
+                      ) : null}
+                      {canDelete ? (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={(event) => {
+                            event.stopPropagation()
+                            void handleDeleteNote(note)
+                          }}
+                          disabled={deletingNoteId === note.id}
+                        >
+                          {deletingNoteId === note.id ? (
+                            <span className="relative flex h-4 w-4 items-center justify-center text-destructive">
+                              <span className="absolute h-4 w-4 animate-spin rounded-full border border-destructive border-t-transparent" />
+                            </span>
+                          ) : (
+                            <Trash2 className="h-4 w-4" />
+                          )}
+                        </Button>
+                      ) : null}
+                    </div>
+                  ) : null}
                 </div>
                 {isEditingContent ? (
                   <div className="space-y-2" onKeyDown={handleContentEditorKeyDown}>
@@ -1325,7 +1368,7 @@ function NotesSectionImpl<C = unknown>({
                       </Button>
                     </div>
                   </div>
-                ) : (
+                ) : canEdit ? (
                   <div
                     role="button"
                     tabIndex={0}
@@ -1335,7 +1378,16 @@ function NotesSectionImpl<C = unknown>({
                   >
                     <MarkdownPreview
                       remarkPlugins={markdownPlugins}
-                      className="break-words text-foreground [&>*]:mb-2 [&>*:last-child]:mb-0 [&_ul]:ml-4 [&_ul]:list-disc [&_ol]:ml-4 [&_ol]:list-decimal [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-xs"
+                      className={noteBodyClassName}
+                    >
+                      {note.body}
+                    </MarkdownPreview>
+                  </div>
+                ) : (
+                  <div className="text-sm">
+                    <MarkdownPreview
+                      remarkPlugins={markdownPlugins}
+                      className={noteBodyClassName}
                     >
                       {note.body}
                     </MarkdownPreview>
@@ -1348,11 +1400,15 @@ function NotesSectionImpl<C = unknown>({
           <TabEmptyState
             title={emptyState.title}
             description={emptyState.description}
-            action={{
-              label: emptyState.actionLabel,
-              onClick: focusComposer,
-              disabled: isSubmitting || !hasEntity,
-            }}
+            action={
+              readOnly
+                ? undefined
+                : {
+                    label: emptyState.actionLabel,
+                    onClick: focusComposer,
+                    disabled: isSubmitting || !hasEntity,
+                  }
+            }
           />
         )}
         {isLoading || (pagedMode ? !hasMore : visibleCount >= notes.length) ? null : (

package/src/backend/dev/DevRuntimeDiagnosticsBanner.tsx

@@ -130,6 +130,25 @@ function useRuntimeStatus(token: string | null): RuntimeStatus | null {
   return status
 }
 
+// The banner floats above every dialog and sheet but lives outside their DOM,
+// so an open layer treats a press or focus on it as an outside interaction and
+// closes itself instead of letting the banner handle it. The layers listen on
+// `document`, so these events are stopped in React's capture phase at the
+// banner root: that follows the React tree, which also covers the migrate
+// confirmation portaled to <body>. Buttons act on `click`, which is untouched;
+// a bubble-phase pointer-down, mouse-down, touch-start or focus handler added
+// inside the banner would never fire.
+function stopOutsideDismiss(event: React.SyntheticEvent): void {
+  event.nativeEvent.stopPropagation()
+}
+
+const OUTSIDE_DISMISS_SHIELD = {
+  onPointerDownCapture: stopOutsideDismiss,
+  onMouseDownCapture: stopOutsideDismiss,
+  onTouchStartCapture: stopOutsideDismiss,
+  onFocusCapture: stopOutsideDismiss,
+}
+
 function reloadPage(): void {
   if (typeof window === 'undefined') return
   try {
@@ -251,6 +270,7 @@ export function DevRuntimeDiagnosticsBanner() {
 
   return (
     <div
+      {...OUTSIDE_DISMISS_SHIELD}
       data-testid="dev-runtime-diagnostics-banner"
       data-health={status.health}
       role={status.health === 'unavailable' ? 'alert' : 'status'}
@@ -260,7 +280,10 @@ export function DevRuntimeDiagnosticsBanner() {
       // very high z-index, so the banner stacks ABOVE the bubble rather than
       // trying to outrank it. `max-w-4xl` keeps the action row on one line on
       // desktop; it still wraps (never scrolls) once the viewport is narrow.
-      className={`fixed inset-x-3 bottom-20 z-banner flex flex-col gap-2 rounded-lg border px-4 py-3 text-sm shadow-lg sm:inset-x-auto sm:right-4 sm:max-w-4xl ${TONE_CLASSES[tone]}`}
+      // `pointer-events-auto` keeps it clickable while a modal dialog sets
+      // `pointer-events: none` on <body>; without it a click falls through to
+      // the dialog overlay underneath.
+      className={`pointer-events-auto fixed inset-x-3 bottom-20 z-banner flex flex-col gap-2 rounded-lg border px-4 py-3 text-sm shadow-lg sm:inset-x-auto sm:right-4 sm:max-w-4xl ${TONE_CLASSES[tone]}`}
     >
       <div className="flex items-start justify-between gap-2">
         <div className="min-w-0 flex-1">