@open-mercato/ui 0.7.1-develop.7151.1.00d0391847 → 0.7.1-develop.7153.1.7145d295e6

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

@@ -0,0 +1,145 @@
+import * as React from 'react'
+import { cleanup, render, waitFor } from '@testing-library/react'
+
+import { DevRuntimeReporter } from '../dev/DevRuntimeReporter'
+import {
+  reportDevRuntimeError,
+  resetDevRuntimeReporterForTests,
+} from '@open-mercato/shared/lib/dev-runtime/report'
+import { DEV_RUNTIME_TOKEN_HEADER, DEV_RUNTIME_TOKEN_META_NAME } from '@open-mercato/shared/lib/dev-runtime/types'
+
+const TOKEN = 'reporter-token-fixture'
+
+function enableCollector(): void {
+  const element = document.createElement('meta')
+  element.setAttribute('name', DEV_RUNTIME_TOKEN_META_NAME)
+  element.setAttribute('content', TOKEN)
+  document.head.appendChild(element)
+}
+
+function sentReports(fetchMock: jest.Mock): Array<Record<string, unknown>> {
+  return fetchMock.mock.calls.map((call) => JSON.parse(String(call[1].body)) as Record<string, unknown>)
+}
+
+let fetchMock: jest.Mock
+
+beforeEach(() => {
+  document.head.innerHTML = ''
+  resetDevRuntimeReporterForTests()
+  fetchMock = jest.fn().mockResolvedValue(new Response(null, { status: 202 }))
+  global.fetch = fetchMock as unknown as typeof fetch
+})
+
+afterEach(cleanup)
+
+describe('reportDevRuntimeError', () => {
+  it('stays silent without a collector token', () => {
+    reportDevRuntimeError({ kind: 'global-error', error: new Error('boom') })
+    expect(fetchMock).not.toHaveBeenCalled()
+  })
+
+  it('posts a bounded report with the per-run token', () => {
+    enableCollector()
+    reportDevRuntimeError({ kind: 'global-error', error: Object.assign(new TypeError('boom'), { digest: 'abc123' }) })
+
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    const [url, init] = fetchMock.mock.calls[0]
+    expect(url).toBe('/api/dev-runtime/diagnostics')
+    expect(init.method).toBe('POST')
+    expect(init.headers[DEV_RUNTIME_TOKEN_HEADER]).toBe(TOKEN)
+    expect(sentReports(fetchMock)[0]).toMatchObject({
+      kind: 'global-error',
+      message: 'TypeError: boom',
+      digest: 'abc123',
+      path: '/',
+    })
+  })
+
+  it('bounds an over-long stack', () => {
+    enableCollector()
+    const error = new Error('boom')
+    error.stack = 'y'.repeat(5000)
+    reportDevRuntimeError({ kind: 'global-error', error })
+
+    expect(String(sentReports(fetchMock)[0].stack).length).toBeLessThanOrEqual(2000)
+  })
+
+  it('reports the same failure only once per page', () => {
+    enableCollector()
+    const error = new Error('boom')
+    reportDevRuntimeError({ kind: 'global-error', error })
+    reportDevRuntimeError({ kind: 'global-error', error })
+    reportDevRuntimeError({ kind: 'global-error', error })
+
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('caps the number of distinct reports per page', () => {
+    enableCollector()
+    for (let index = 0; index < 30; index += 1) {
+      reportDevRuntimeError({ kind: 'window-error', message: `boom ${index}` })
+    }
+    expect(fetchMock).toHaveBeenCalledTimes(20)
+  })
+
+  it('never throws when the collector rejects the request', () => {
+    enableCollector()
+    fetchMock.mockImplementation(() => { throw new Error('network down') })
+    expect(() => reportDevRuntimeError({ kind: 'global-error', message: 'boom' })).not.toThrow()
+  })
+
+  it('ignores a report without a usable message', () => {
+    enableCollector()
+    reportDevRuntimeError({ kind: 'window-error', message: '   ' })
+    expect(fetchMock).not.toHaveBeenCalled()
+  })
+})
+
+describe('DevRuntimeReporter', () => {
+  it('forwards an uncaught window error', async () => {
+    enableCollector()
+    render(<DevRuntimeReporter />)
+
+    window.dispatchEvent(new ErrorEvent('error', { message: 'TypeError: boom', error: new TypeError('boom') }))
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1))
+    expect(sentReports(fetchMock)[0]).toMatchObject({ kind: 'window-error' })
+  })
+
+  it('classifies a chunk load failure separately', async () => {
+    enableCollector()
+    render(<DevRuntimeReporter />)
+
+    window.dispatchEvent(new ErrorEvent('error', { message: 'ChunkLoadError: Loading chunk 42 failed' }))
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1))
+    expect(sentReports(fetchMock)[0]).toMatchObject({ kind: 'chunk-load-error' })
+  })
+
+  it('forwards an unhandled promise rejection', async () => {
+    enableCollector()
+    render(<DevRuntimeReporter />)
+
+    const event = new Event('unhandledrejection') as Event & { reason?: unknown }
+    event.reason = new Error('rejected')
+    window.dispatchEvent(event)
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1))
+    expect(sentReports(fetchMock)[0]).toMatchObject({ kind: 'unhandled-rejection', message: 'Error: rejected' })
+  })
+
+  it('stops listening after unmount', async () => {
+    enableCollector()
+    const { unmount } = render(<DevRuntimeReporter />)
+    unmount()
+
+    window.dispatchEvent(new ErrorEvent('error', { message: 'TypeError: boom' }))
+    await waitFor(() => expect(fetchMock).not.toHaveBeenCalled())
+  })
+
+  it('renders nothing', () => {
+    enableCollector()
+    const { container } = render(<DevRuntimeReporter />)
+    expect(container.innerHTML).toBe('')
+  })
+})

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

@@ -59,13 +59,13 @@ describe('FormHeader', () => {
     )
   })
 
-  it('renders edit header injection spot with routing context', () => {
+  it('renders edit titles as section headings by default with an explicit page-heading option', () => {
     renderWithProviders(
       <FormHeader title="Edit Person" />,
       { dict: {} },
     )
 
-    expect(screen.getByText('Edit Person')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { level: 2, name: 'Edit Person' })).toBeInTheDocument()
     expect(screen.getByTestId('injection-spot:form-header:edit')).toBeInTheDocument()
     expect(mockInjectionSpot).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -76,5 +76,12 @@ describe('FormHeader', () => {
         },
       }),
     )
+
+    renderWithProviders(
+      <FormHeader title="Edit Company" titleHeadingLevel={1} />,
+      { dict: {} },
+    )
+
+    expect(screen.getByRole('heading', { level: 1, name: 'Edit Company' })).toBeInTheDocument()
   })
 })

package/src/backend/dev/DevRuntimeDiagnosticsBanner.tsx

@@ -0,0 +1,412 @@
+"use client"
+import * as React from 'react'
+import { ChevronDown, ChevronUp, Database, RefreshCw, RotateCcw, ScrollText, Wrench, X } from 'lucide-react'
+import { useOptionalT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  isDevRuntimeBannerEnabled,
+  readDevRuntimeLogsUrl,
+  readDevRuntimeToken,
+} from '@open-mercato/shared/lib/dev-runtime/report'
+import {
+  DEV_RUNTIME_ACTIONS_PATH,
+  DEV_RUNTIME_LOGS_PATH,
+  DEV_RUNTIME_STATUS_PATH,
+  DEV_RUNTIME_TOKEN_HEADER,
+  type RuntimeHealth,
+  type RuntimeIssue,
+  type DevRuntimeLogSnapshot,
+  type RuntimeRecoveryAction,
+  type RuntimeStatus,
+} from '@open-mercato/shared/lib/dev-runtime/types'
+import { Button } from '../../primitives/button'
+import { IconButton } from '../../primitives/icon-button'
+import { useConfirmDialog } from '../confirm-dialog'
+import { apiCall } from '../utils/apiCall'
+
+const ACTION_ICONS: Record<RuntimeRecoveryAction, typeof RefreshCw> = {
+  generate: Wrench,
+  migrate: Database,
+  restart: RotateCcw,
+}
+
+// `restart` is always safe to offer; `generate` and `migrate` appear only when
+// the classifier justified them for this incident. `migrate` additionally
+// requires a confirmation surface — the shared dialog needs the i18n provider,
+// so a provider-less tree gets no irreversible action rather than an
+// unconfirmed one.
+function resolveOfferedActions(
+  issue: RuntimeIssue | null,
+  { canConfirm }: { canConfirm: boolean },
+): RuntimeRecoveryAction[] {
+  const actions: RuntimeRecoveryAction[] = []
+  if (issue?.recovery === 'generate') actions.push('generate')
+  if (issue?.recovery === 'migrate' && canConfirm) actions.push('migrate')
+  actions.push('restart')
+  return actions
+}
+
+const POLL_INTERVAL_MS = 2000
+
+const VISIBLE_HEALTH: RuntimeHealth[] = ['starting', 'degraded', 'recovering', 'unavailable']
+
+type BannerTone = 'info' | 'warning' | 'error'
+
+const HEALTH_TONE: Record<RuntimeHealth, BannerTone> = {
+  starting: 'info',
+  ready: 'info',
+  degraded: 'warning',
+  recovering: 'info',
+  unavailable: 'error',
+}
+
+const TONE_CLASSES: Record<BannerTone, string> = {
+  info: 'border-status-info-border bg-status-info-bg text-status-info-text',
+  warning: 'border-status-warning-border bg-status-warning-bg text-status-warning-text',
+  error: 'border-status-error-border bg-status-error-bg text-status-error-text',
+}
+
+const TONE_ACTION_CLASSES: Record<BannerTone, string> = {
+  info: 'border-status-info-border bg-status-info-bg text-status-info-text hover:bg-status-info-border hover:text-status-info-text',
+  warning: 'border-status-warning-border bg-status-warning-bg text-status-warning-text hover:bg-status-warning-border hover:text-status-warning-text',
+  error: 'border-status-error-border bg-status-error-bg text-status-error-text hover:bg-status-error-border hover:text-status-error-text',
+}
+
+function dismissalKey(status: RuntimeStatus, issue: RuntimeIssue | null): string {
+  return `${status.generation}:${issue?.fingerprint ?? status.health}`
+}
+
+// The dev bridge answers 403 whenever the per-run token is stale — routine after
+// a `yarn dev` restart leaves an already-open tab holding the previous run's
+// token — and 404 once diagnostics are off. Neither is a staff-auth event, so
+// both of `apiFetch`'s redirect hooks are switched off. Without this it throws
+// `ForbiddenError` instead of returning the response, the poll below swallows
+// the throw, and the banner freezes on the dead runtime's incident rather than
+// clearing itself.
+function devRuntimeRequestHeaders(token: string): Record<string, string> {
+  return {
+    [DEV_RUNTIME_TOKEN_HEADER]: token,
+    'x-om-unauthorized-redirect': '0',
+    'x-om-forbidden-redirect': '0',
+  }
+}
+
+async function fetchRuntimeStatus(token: string, signal: AbortSignal): Promise<RuntimeStatus | null> {
+  const response = await apiCall<RuntimeStatus>(DEV_RUNTIME_STATUS_PATH, {
+    headers: devRuntimeRequestHeaders(token),
+    cache: 'no-store',
+    signal,
+  })
+  if (!response.ok) return null
+  return response.result
+}
+
+function useRuntimeStatus(token: string | null): RuntimeStatus | null {
+  const [status, setStatus] = React.useState<RuntimeStatus | null>(null)
+
+  React.useEffect(() => {
+    if (!token) return undefined
+    let cancelled = false
+    const controller = new AbortController()
+
+    const poll = async () => {
+      try {
+        const next = await fetchRuntimeStatus(token, controller.signal)
+        if (!cancelled) setStatus(next)
+      } catch {
+        // A momentarily unreachable bridge must never break the page: keep the
+        // last known status and try again on the next tick.
+      }
+    }
+
+    void poll()
+    const timer = setInterval(() => { void poll() }, POLL_INTERVAL_MS)
+    return () => {
+      cancelled = true
+      controller.abort()
+      clearInterval(timer)
+    }
+  }, [token])
+
+  return status
+}
+
+function reloadPage(): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.location.reload()
+  } catch {
+    // Reload is a convenience affordance; ignore hosts that block it.
+  }
+}
+
+/**
+ * Dev-only, in-app counterpart to the standalone startup splash. It reports the
+ * supervisor's runtime state on an already-open page so a post-ready failure is
+ * visible without switching to the terminal. It never renders in production and
+ * never renders while the runtime is healthy.
+ */
+export function DevRuntimeDiagnosticsBanner() {
+  // The banner must render even when a broken tree left the app without its
+  // i18n provider, so the translator is optional with inline English fallbacks.
+  const translate = useOptionalT()
+  const t = React.useCallback(
+    (key: string, fallback: string) => (translate ? translate(key, fallback) : fallback),
+    [translate],
+  )
+  const [token, setToken] = React.useState<string | null>(null)
+  const [logsUrl, setLogsUrl] = React.useState<string | null>(null)
+  const [expanded, setExpanded] = React.useState(false)
+  const [dismissed, setDismissed] = React.useState<string | null>(null)
+  const [pendingAction, setPendingAction] = React.useState<RuntimeRecoveryAction | null>(null)
+  const [logs, setLogs] = React.useState<DevRuntimeLogSnapshot | null>(null)
+  const [logsOpen, setLogsOpen] = React.useState(false)
+  const [actionError, setActionError] = React.useState<string | null>(null)
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
+  // ConfirmDialog itself calls `useT`, so it can only be mounted where the
+  // provider exists.
+  const canConfirm = translate !== undefined
+
+  React.useEffect(() => {
+    if (!isDevRuntimeBannerEnabled()) return
+    setToken(readDevRuntimeToken())
+    setLogsUrl(readDevRuntimeLogsUrl())
+  }, [])
+
+  const status = useRuntimeStatus(token)
+  const issue = status?.issueSummary ?? null
+  const currentKey = status ? dismissalKey(status, issue) : null
+
+  // Dismissal is view-local and scoped to one generation:fingerprint, so a new
+  // incident — or the same one in a new generation — reappears.
+  React.useEffect(() => {
+    if (currentKey && dismissed && dismissed !== currentKey) setDismissed(null)
+  }, [currentKey, dismissed])
+
+  React.useEffect(() => {
+    if (status?.health === 'ready') setExpanded(false)
+  }, [status?.health])
+
+  // Logs are fetched on demand from the app itself, so opening them never
+  // navigates away from the page being debugged.
+  const toggleLogs = React.useCallback(async () => {
+    if (logsOpen) {
+      setLogsOpen(false)
+      return
+    }
+    setLogsOpen(true)
+    if (!token) return
+    try {
+      const response = await apiCall<DevRuntimeLogSnapshot>(`${DEV_RUNTIME_LOGS_PATH}?cursor=0`, {
+        headers: devRuntimeRequestHeaders(token),
+        cache: 'no-store',
+      })
+      setLogs(response.ok ? response.result : null)
+    } catch {
+      setLogs(null)
+    }
+  }, [logsOpen, token])
+
+  const runRecoveryAction = React.useCallback(async (action: RuntimeRecoveryAction) => {
+    if (!token || pendingAction) return
+    // `migrate` writes to the database and cannot be undone automatically, so it
+    // always goes through the shared confirmation dialog.
+    if (action === 'migrate') {
+      const confirmed = await confirm({
+        title: t('ui.devRuntime.confirm.migrate.title', 'Apply database migrations?'),
+        text: t(
+          'ui.devRuntime.confirm.migrate.text',
+          'This applies pending migrations to your development database. It is not automatically reversible — rolling back is a separate manual task.',
+        ),
+        confirmText: t('ui.devRuntime.actions.migrate', 'Run migrations'),
+        variant: 'destructive',
+      })
+      if (!confirmed) return
+    }
+
+    setPendingAction(action)
+    setActionError(null)
+    try {
+      const response = await apiCall<{ error?: { message?: string } }>(`${DEV_RUNTIME_ACTIONS_PATH}/${action}`, {
+        method: 'POST',
+        headers: devRuntimeRequestHeaders(token),
+        cache: 'no-store',
+      })
+      if (!response.ok) {
+        setActionError(response.result?.error?.message ?? t('ui.devRuntime.actions.failed', 'The recovery action could not be started.'))
+      }
+    } catch {
+      setActionError(t('ui.devRuntime.actions.failed', 'The recovery action could not be started.'))
+    } finally {
+      setPendingAction(null)
+    }
+  }, [token, pendingAction, confirm, t])
+
+  if (!status || !VISIBLE_HEALTH.includes(status.health)) return null
+  if (currentKey && dismissed === currentKey) return null
+
+  const tone = HEALTH_TONE[status.health]
+  const isBusy = status.recovery?.busy === true
+  const headline = t(`ui.devRuntime.health.${status.health}`, DEFAULT_HEALTH_COPY[status.health])
+  const title = issue?.title ?? t('ui.devRuntime.noIncident', 'No incident details available')
+
+  return (
+    <div
+      data-testid="dev-runtime-diagnostics-banner"
+      data-health={status.health}
+      role={status.health === 'unavailable' ? 'alert' : 'status'}
+      aria-live={status.health === 'unavailable' ? 'assertive' : 'polite'}
+      // Floating bottom-right dev overlay, lifted clear of the support-chat
+      // launcher that sits in that corner. Third-party launchers ship their own
+      // 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]}`}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <p className="font-medium">
+            {headline}
+            <span aria-hidden="true"> · </span>
+            {title}
+          </p>
+          {issue?.detail ? <p className="mt-0.5 break-words">{issue.detail}</p> : null}
+        </div>
+        {/* Dismiss stays pinned to the corner instead of joining the wrapping
+            action row, where it used to orphan onto a line of its own. */}
+        <IconButton
+          type="button"
+          variant="ghost"
+          size="sm"
+          aria-label={t('ui.devRuntime.actions.dismiss', 'Dismiss')}
+          onClick={() => setDismissed(currentKey)}
+        >
+          <X className="size-4" aria-hidden="true" />
+        </IconButton>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-1">
+          {issue ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              aria-expanded={expanded}
+              onClick={() => setExpanded((value) => !value)}
+              className={`whitespace-nowrap ${TONE_ACTION_CLASSES[tone]}`}
+            >
+              {expanded
+                ? <ChevronUp className="mr-1 size-4" aria-hidden="true" />
+                : <ChevronDown className="mr-1 size-4" aria-hidden="true" />}
+              {expanded
+                ? t('ui.devRuntime.actions.hideDetails', 'Hide details')
+                : t('ui.devRuntime.actions.showDetails', 'Show details')}
+            </Button>
+          ) : null}
+          {!isBusy ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={reloadPage}
+              className={`whitespace-nowrap ${TONE_ACTION_CLASSES[tone]}`}
+            >
+              <RefreshCw className="mr-1 size-4" aria-hidden="true" />
+              {t('ui.devRuntime.actions.retry', 'Retry')}
+            </Button>
+          ) : null}
+          {!isBusy && token
+            ? resolveOfferedActions(issue, { canConfirm }).map((action) => {
+                const ActionIcon = ACTION_ICONS[action]
+                return (
+                  <Button
+                    key={action}
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    disabled={pendingAction !== null}
+                    onClick={() => { void runRecoveryAction(action) }}
+                    className={`whitespace-nowrap ${TONE_ACTION_CLASSES[tone]}`}
+                  >
+                    <ActionIcon className="mr-1 size-4" aria-hidden="true" />
+                    {t(`ui.devRuntime.actions.${action}`, DEFAULT_ACTION_COPY[action])}
+                  </Button>
+                )
+              })
+            : null}
+          {token ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              aria-expanded={logsOpen}
+              onClick={() => { void toggleLogs() }}
+              className={`whitespace-nowrap ${TONE_ACTION_CLASSES[tone]}`}
+            >
+              <ScrollText className="mr-1 size-4" aria-hidden="true" />
+              {logsOpen
+                ? t('ui.devRuntime.actions.hideLogs', 'Hide logs')
+                : t('ui.devRuntime.actions.viewLogs', 'View logs')}
+            </Button>
+          ) : null}
+      </div>
+
+      {actionError ? <p className="text-xs font-medium">{actionError}</p> : null}
+
+      {expanded && issue ? (
+        <dl className="grid grid-cols-1 gap-x-6 gap-y-1 text-xs sm:grid-cols-2">
+          <DetailRow label={t('ui.devRuntime.details.code', 'Error code')} value={issue.code} />
+          <DetailRow label={t('ui.devRuntime.details.source', 'Source')} value={issue.source} />
+          <DetailRow label={t('ui.devRuntime.details.occurrences', 'Occurrences')} value={String(issue.occurrences)} />
+          <DetailRow label={t('ui.devRuntime.details.generation', 'Runtime generation')} value={String(issue.generation)} />
+          <DetailRow label={t('ui.devRuntime.details.firstSeen', 'First seen')} value={issue.firstSeenAt} />
+          <DetailRow label={t('ui.devRuntime.details.lastSeen', 'Last seen')} value={issue.lastSeenAt} />
+          {issue.path ? <DetailRow label={t('ui.devRuntime.details.path', 'Path')} value={issue.path} /> : null}
+        </dl>
+      ) : null}
+      {logsOpen ? (
+        <div className="rounded-md border border-current/20 bg-black/20">
+          {logs && logs.lines.length > 0 ? (
+            <pre className="max-h-48 overflow-auto whitespace-pre-wrap break-words p-2 font-mono text-xs leading-relaxed">
+              {logs.lines.map((line) => `${line.at.slice(11, 19)}  ${line.text}`).join('\n')}
+            </pre>
+          ) : (
+            <p className="p-2 text-xs">{t('ui.devRuntime.logs.empty', 'No diagnostic lines yet.')}</p>
+          )}
+          {logsUrl ? (
+            <p className="border-t border-current/20 px-2 py-1 text-xs opacity-80">
+              {t('ui.devRuntime.logs.splashHint', 'Full startup stream:')}{' '}
+              <a className="underline" href={logsUrl} target="_blank" rel="noreferrer">{logsUrl}</a>
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+
+      {canConfirm ? ConfirmDialogElement : null}
+    </div>
+  )
+}
+
+const DEFAULT_ACTION_COPY: Record<RuntimeRecoveryAction, string> = {
+  generate: 'Run generators',
+  migrate: 'Run migrations',
+  restart: 'Restart runtime',
+}
+
+const DEFAULT_HEALTH_COPY: Record<RuntimeHealth, string> = {
+  starting: 'Runtime starting',
+  ready: 'Runtime ready',
+  degraded: 'Runtime degraded',
+  recovering: 'Runtime recovering',
+  unavailable: 'Runtime unavailable',
+}
+
+function DetailRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex gap-2">
+      <dt className="shrink-0 opacity-80">{label}</dt>
+      <dd className="min-w-0 break-words font-mono">{value}</dd>
+    </div>
+  )
+}
+
+export default DevRuntimeDiagnosticsBanner

package/src/backend/dev/DevRuntimeReporter.tsx

@@ -0,0 +1,46 @@
+"use client"
+import * as React from 'react'
+import { reportDevRuntimeError } from '@open-mercato/shared/lib/dev-runtime/report'
+
+function isChunkLoadFailure(message: string): boolean {
+  const haystack = message.toLowerCase()
+  return haystack.includes('chunkloaderror')
+    || haystack.includes('loading chunk')
+    || haystack.includes('loading css chunk')
+}
+
+/**
+ * Dev-only client island that forwards uncaught browser failures to the local
+ * supervisor. It registers bounded listeners only, adds no context provider,
+ * and stays silent when the collector token is absent (production, CI, or
+ * diagnostics disabled).
+ */
+export function DevRuntimeReporter() {
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return undefined
+
+    const handleError = (event: ErrorEvent) => {
+      const message = event.message ?? ''
+      reportDevRuntimeError({
+        kind: isChunkLoadFailure(message) ? 'chunk-load-error' : 'window-error',
+        error: event.error,
+        message: message || undefined,
+      })
+    }
+
+    const handleRejection = (event: PromiseRejectionEvent) => {
+      reportDevRuntimeError({ kind: 'unhandled-rejection', error: event.reason })
+    }
+
+    window.addEventListener('error', handleError)
+    window.addEventListener('unhandledrejection', handleRejection)
+    return () => {
+      window.removeEventListener('error', handleError)
+      window.removeEventListener('unhandledrejection', handleRejection)
+    }
+  }, [])
+
+  return null
+}
+
+export default DevRuntimeReporter

package/src/backend/forms/FormHeader.tsx

@@ -23,6 +23,8 @@ export type FormHeaderEditProps = FormHeaderBaseProps & {
   mode?: 'edit'
   /** Small title next to the back link */
   title?: string
+  /** Semantic level for the title. Defaults to 2 for section-level compatibility. */
+  titleHeadingLevel?: 1 | 2
   /** Structured action buttons (Delete/Cancel/Save) */
   actions?: FormActionButtonsProps
   /** Custom right-side content (overrides `actions`) */
@@ -96,9 +98,11 @@ function EditHeader({
   backHref,
   resolvedBackLabel,
   title,
+  titleHeadingLevel = 2,
   actions,
   actionsContent,
 }: FormHeaderEditProps & { resolvedBackLabel: string }) {
+  const TitleHeading = titleHeadingLevel === 1 ? 'h1' : 'h2'
   return (
     <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
       <div className="flex items-center gap-3">
@@ -107,7 +111,7 @@ function EditHeader({
             &larr; {resolvedBackLabel}
           </Link>
         ) : null}
-        {title ? <div className="text-base font-medium">{title}</div> : null}
+        {title ? <TitleHeading className="text-base font-medium">{title}</TitleHeading> : null}
       </div>
       {actionsContent ?? (actions ? <FormActionButtons {...actions} /> : null)}
     </div>

package/src/backend/messages/MessageComposer.tsx

@@ -141,6 +141,7 @@ export function MessageComposer(props: MessageComposerProps) {
     <CrudForm<Record<string, unknown>>
       backHref={backHref}
       title={composeWithContextPreview.composerTitle}
+      titleHeadingLevel={2}
       fields={createMessageComposeFormGroups(composeWithContextPreview)}
       initialValues={{}}
       submitLabel={composeWithContextPreview.submitLabel}