@open-mercato/ui 0.9.0 → 0.9.1-develop.7462.1.94c09f158f

package/dist/backend/progress/useProgressSse.js

@@ -5,6 +5,7 @@ import { useAppEvent } from "../injection/useAppEvent.js";
 import { subscribeProgressUpdate } from "@open-mercato/shared/lib/frontend/progressEvents";
 import { applyLocalProgressUpdate, isLocalProgressJob } from "./useProgressPoll.js";
 const SSE_PROGRESS_SYNC_INTERVAL = 5e3;
+const SSE_PROGRESS_IDLE_RECONCILE_INTERVAL = 3e4;
 function isVisibleProgressJob(job) {
   return job.meta?.hiddenFromTopBar !== true;
 }
@@ -56,10 +57,17 @@ function useProgressSse() {
   React.useEffect(() => {
     void fetchJobs();
   }, [fetchJobs]);
+  const hasActiveJobs = activeJobs.length > 0;
   React.useEffect(() => {
-    let interval = setInterval(() => {
-      void fetchJobs();
-    }, SSE_PROGRESS_SYNC_INTERVAL);
+    let interval = null;
+    const startInterval = () => {
+      if (interval) clearInterval(interval);
+      if (document.hidden) return;
+      interval = setInterval(() => {
+        void fetchJobs();
+      }, hasActiveJobs ? SSE_PROGRESS_SYNC_INTERVAL : SSE_PROGRESS_IDLE_RECONCILE_INTERVAL);
+    };
+    startInterval();
     const onVisibilityChange = () => {
       if (document.hidden) {
         if (interval) {
@@ -68,10 +76,7 @@ function useProgressSse() {
         }
       } else {
         void fetchJobs();
-        if (interval) clearInterval(interval);
-        interval = setInterval(() => {
-          void fetchJobs();
-        }, SSE_PROGRESS_SYNC_INTERVAL);
+        startInterval();
       }
     };
     document.addEventListener("visibilitychange", onVisibilityChange);
@@ -79,7 +84,7 @@ function useProgressSse() {
       if (interval) clearInterval(interval);
       document.removeEventListener("visibilitychange", onVisibilityChange);
     };
-  }, [fetchJobs]);
+  }, [fetchJobs, hasActiveJobs]);
   React.useEffect(() => {
     return subscribeProgressUpdate((detail) => {
       applyLocalProgressUpdate(detail, setActiveJobs, setRecentlyCompleted);

package/dist/backend/progress/useProgressSse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/progress/useProgressSse.ts"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { apiCall } from '../utils/apiCall'\nimport { useAppEvent } from '../injection/useAppEvent'\nimport { subscribeProgressUpdate } from '@open-mercato/shared/lib/frontend/progressEvents'\nimport type { ProgressJobDto, UseProgressPollResult } from './useProgressPoll'\nimport { applyLocalProgressUpdate, isLocalProgressJob } from './useProgressPoll'\n\nconst SSE_PROGRESS_SYNC_INTERVAL = 5000\n\nfunction isVisibleProgressJob(job: ProgressJobDto): boolean {\n  return job.meta?.hiddenFromTopBar !== true\n}\n\nfunction isActiveStatus(status: ProgressJobDto['status']): boolean {\n  return status === 'pending' || status === 'running'\n}\n\nfunction isTerminalStatus(status: ProgressJobDto['status']): boolean {\n  return status === 'completed' || status === 'failed' || status === 'cancelled'\n}\n\nfunction upsertJob(list: ProgressJobDto[], job: ProgressJobDto): ProgressJobDto[] {\n  if (!isVisibleProgressJob(job)) {\n    return list.filter((item) => item.id !== job.id)\n  }\n  const next = [job, ...list.filter((item) => item.id !== job.id)]\n  return next.sort(\n    (a, b) =>\n      new Date(b.startedAt ?? b.finishedAt ?? 0).getTime()\n      - new Date(a.startedAt ?? a.finishedAt ?? 0).getTime(),\n  )\n}\n\nexport function useProgressSse(): UseProgressPollResult {\n  const [activeJobs, setActiveJobs] = React.useState<ProgressJobDto[]>([])\n  const [recentlyCompleted, setRecentlyCompleted] = React.useState<ProgressJobDto[]>([])\n  const [isLoading, setIsLoading] = React.useState(true)\n  const [error, setError] = React.useState<string | null>(null)\n\n  const fetchJobs = React.useCallback(async () => {\n    try {\n      const result = await apiCall<{ active: ProgressJobDto[]; recentlyCompleted: ProgressJobDto[] }>(\n        '/api/progress/active',\n      )\n      if (result.ok && result.result) {\n        setActiveJobs((prev) => [\n          ...prev.filter((job) => isLocalProgressJob(job) && isActiveStatus(job.status)),\n          ...result.result!.active.filter(isVisibleProgressJob),\n        ])\n        setRecentlyCompleted((prev) => [\n          ...prev.filter((job) => isLocalProgressJob(job) && isTerminalStatus(job.status)),\n          ...result.result!.recentlyCompleted.filter(isVisibleProgressJob),\n        ].slice(0, 10))\n        setError(null)\n      }\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to fetch progress')\n    } finally {\n      setIsLoading(false)\n    }\n  }, [])\n\n  const refresh = React.useCallback(() => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  React.useEffect(() => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  React.useEffect(() => {\n    let interval: ReturnType<typeof setInterval> | null = setInterval(() => {\n      void fetchJobs()\n    }, SSE_PROGRESS_SYNC_INTERVAL)\n\n    const onVisibilityChange = () => {\n      if (document.hidden) {\n        if (interval) {\n          clearInterval(interval)\n          interval = null\n        }\n      } else {\n        void fetchJobs()\n        if (interval) clearInterval(interval)\n        interval = setInterval(() => {\n          void fetchJobs()\n        }, SSE_PROGRESS_SYNC_INTERVAL)\n      }\n    }\n\n    document.addEventListener('visibilitychange', onVisibilityChange)\n    return () => {\n      if (interval) clearInterval(interval)\n      document.removeEventListener('visibilitychange', onVisibilityChange)\n    }\n  }, [fetchJobs])\n\n  React.useEffect(() => {\n    return subscribeProgressUpdate((detail) => {\n      applyLocalProgressUpdate(detail, setActiveJobs, setRecentlyCompleted)\n    })\n  }, [])\n\n  useAppEvent(\n    'progress.job.updated',\n    (event) => {\n      const payload = event.payload as Partial<ProgressJobDto> & { jobId?: string }\n      const jobId = payload?.jobId\n      if (!jobId) {\n        void fetchJobs()\n        return\n      }\n      const status = (payload.status as ProgressJobDto['status']) ?? 'running'\n      const job: ProgressJobDto = {\n        id: jobId,\n        jobType: payload.jobType ?? 'progress',\n        name: payload.name ?? payload.jobType ?? 'Progress job',\n        description: payload.description ?? null,\n        meta: (payload.meta && typeof payload.meta === 'object') ? payload.meta as Record<string, unknown> : null,\n        status,\n        progressPercent: payload.progressPercent ?? 0,\n        processedCount: payload.processedCount ?? 0,\n        totalCount: payload.totalCount ?? null,\n        etaSeconds: payload.etaSeconds ?? null,\n        cancellable: payload.cancellable ?? false,\n        startedAt: payload.startedAt ?? null,\n        finishedAt: payload.finishedAt ?? null,\n        errorMessage: payload.errorMessage ?? null,\n      }\n\n      if (isTerminalStatus(status)) {\n        setActiveJobs((prev) => prev.filter((item) => item.id !== jobId))\n        setRecentlyCompleted((prev) => upsertJob(prev, job).slice(0, 10))\n        return\n      }\n\n      setActiveJobs((prev) =>\n        upsertJob(prev, job),\n      )\n    },\n    [fetchJobs],\n  )\n\n  useAppEvent('progress.job.created', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  useAppEvent('progress.job.started', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  useAppEvent('progress.job.completed', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  useAppEvent('progress.job.failed', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  useAppEvent('progress.job.cancelled', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  useAppEvent('om:bridge:reconnected', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  React.useEffect(() => {\n    const onFocus = () => {\n      void fetchJobs()\n    }\n    window.addEventListener('focus', onFocus)\n    return () => window.removeEventListener('focus', onFocus)\n  }, [fetchJobs])\n\n  return { activeJobs, recentlyCompleted, isLoading, error, refresh }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { apiCall } from '../utils/apiCall'\nimport { useAppEvent } from '../injection/useAppEvent'\nimport { subscribeProgressUpdate } from '@open-mercato/shared/lib/frontend/progressEvents'\nimport type { ProgressJobDto, UseProgressPollResult } from './useProgressPoll'\nimport { applyLocalProgressUpdate, isLocalProgressJob } from './useProgressPoll'\n\nconst SSE_PROGRESS_SYNC_INTERVAL = 5000\nconst SSE_PROGRESS_IDLE_RECONCILE_INTERVAL = 30000\n\nfunction isVisibleProgressJob(job: ProgressJobDto): boolean {\n  return job.meta?.hiddenFromTopBar !== true\n}\n\nfunction isActiveStatus(status: ProgressJobDto['status']): boolean {\n  return status === 'pending' || status === 'running'\n}\n\nfunction isTerminalStatus(status: ProgressJobDto['status']): boolean {\n  return status === 'completed' || status === 'failed' || status === 'cancelled'\n}\n\nfunction upsertJob(list: ProgressJobDto[], job: ProgressJobDto): ProgressJobDto[] {\n  if (!isVisibleProgressJob(job)) {\n    return list.filter((item) => item.id !== job.id)\n  }\n  const next = [job, ...list.filter((item) => item.id !== job.id)]\n  return next.sort(\n    (a, b) =>\n      new Date(b.startedAt ?? b.finishedAt ?? 0).getTime()\n      - new Date(a.startedAt ?? a.finishedAt ?? 0).getTime(),\n  )\n}\n\nexport function useProgressSse(): UseProgressPollResult {\n  const [activeJobs, setActiveJobs] = React.useState<ProgressJobDto[]>([])\n  const [recentlyCompleted, setRecentlyCompleted] = React.useState<ProgressJobDto[]>([])\n  const [isLoading, setIsLoading] = React.useState(true)\n  const [error, setError] = React.useState<string | null>(null)\n\n  const fetchJobs = React.useCallback(async () => {\n    try {\n      const result = await apiCall<{ active: ProgressJobDto[]; recentlyCompleted: ProgressJobDto[] }>(\n        '/api/progress/active',\n      )\n      if (result.ok && result.result) {\n        setActiveJobs((prev) => [\n          ...prev.filter((job) => isLocalProgressJob(job) && isActiveStatus(job.status)),\n          ...result.result!.active.filter(isVisibleProgressJob),\n        ])\n        setRecentlyCompleted((prev) => [\n          ...prev.filter((job) => isLocalProgressJob(job) && isTerminalStatus(job.status)),\n          ...result.result!.recentlyCompleted.filter(isVisibleProgressJob),\n        ].slice(0, 10))\n        setError(null)\n      }\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to fetch progress')\n    } finally {\n      setIsLoading(false)\n    }\n  }, [])\n\n  const refresh = React.useCallback(() => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  React.useEffect(() => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  // The cross-process bridge (packages/events/src/bridge.ts) delivers\n  // broadcast events over Postgres LISTEN/NOTIFY, which has no replay: a\n  // notify published during a listener reconnect window is lost for good.\n  // Poll fast while a job is active, and fall back to a slow reconciliation\n  // poll while idle so a missed `progress.job.created` still surfaces.\n  // See `.ai/lessons/worker-emitted-progress-needs-polling-fallback-even.md`.\n  const hasActiveJobs = activeJobs.length > 0\n\n  React.useEffect(() => {\n    let interval: ReturnType<typeof setInterval> | null = null\n\n    const startInterval = () => {\n      if (interval) clearInterval(interval)\n      if (document.hidden) return\n      interval = setInterval(() => {\n        void fetchJobs()\n      }, hasActiveJobs ? SSE_PROGRESS_SYNC_INTERVAL : SSE_PROGRESS_IDLE_RECONCILE_INTERVAL)\n    }\n\n    startInterval()\n\n    const onVisibilityChange = () => {\n      if (document.hidden) {\n        if (interval) {\n          clearInterval(interval)\n          interval = null\n        }\n      } else {\n        void fetchJobs()\n        startInterval()\n      }\n    }\n\n    document.addEventListener('visibilitychange', onVisibilityChange)\n    return () => {\n      if (interval) clearInterval(interval)\n      document.removeEventListener('visibilitychange', onVisibilityChange)\n    }\n  }, [fetchJobs, hasActiveJobs])\n\n  React.useEffect(() => {\n    return subscribeProgressUpdate((detail) => {\n      applyLocalProgressUpdate(detail, setActiveJobs, setRecentlyCompleted)\n    })\n  }, [])\n\n  useAppEvent(\n    'progress.job.updated',\n    (event) => {\n      const payload = event.payload as Partial<ProgressJobDto> & { jobId?: string }\n      const jobId = payload?.jobId\n      if (!jobId) {\n        void fetchJobs()\n        return\n      }\n      const status = (payload.status as ProgressJobDto['status']) ?? 'running'\n      const job: ProgressJobDto = {\n        id: jobId,\n        jobType: payload.jobType ?? 'progress',\n        name: payload.name ?? payload.jobType ?? 'Progress job',\n        description: payload.description ?? null,\n        meta: (payload.meta && typeof payload.meta === 'object') ? payload.meta as Record<string, unknown> : null,\n        status,\n        progressPercent: payload.progressPercent ?? 0,\n        processedCount: payload.processedCount ?? 0,\n        totalCount: payload.totalCount ?? null,\n        etaSeconds: payload.etaSeconds ?? null,\n        cancellable: payload.cancellable ?? false,\n        startedAt: payload.startedAt ?? null,\n        finishedAt: payload.finishedAt ?? null,\n        errorMessage: payload.errorMessage ?? null,\n      }\n\n      if (isTerminalStatus(status)) {\n        setActiveJobs((prev) => prev.filter((item) => item.id !== jobId))\n        setRecentlyCompleted((prev) => upsertJob(prev, job).slice(0, 10))\n        return\n      }\n\n      setActiveJobs((prev) =>\n        upsertJob(prev, job),\n      )\n    },\n    [fetchJobs],\n  )\n\n  useAppEvent('progress.job.created', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  useAppEvent('progress.job.started', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  useAppEvent('progress.job.completed', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  useAppEvent('progress.job.failed', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  useAppEvent('progress.job.cancelled', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  useAppEvent('om:bridge:reconnected', () => {\n    void fetchJobs()\n  }, [fetchJobs])\n\n  React.useEffect(() => {\n    const onFocus = () => {\n      void fetchJobs()\n    }\n    window.addEventListener('focus', onFocus)\n    return () => window.removeEventListener('focus', onFocus)\n  }, [fetchJobs])\n\n  return { activeJobs, recentlyCompleted, isLoading, error, refresh }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.9.0",
+  "version": "0.9.1-develop.7462.1.94c09f158f",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.9.0",
+    "@open-mercato/shared": "0.9.1-develop.7462.1.94c09f158f",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.9.0",
+    "@open-mercato/shared": "0.9.1-develop.7462.1.94c09f158f",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
@@ -186,5 +186,6 @@
     "type": "git",
     "url": "https://github.com/open-mercato/open-mercato",
     "directory": "packages/ui"
-  }
+  },
+  "stableVersion": "0.9.0"
 }

package/src/backend/CrudForm.tsx

@@ -1008,7 +1008,16 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   const navigationConfirmPendingRef = React.useRef(false)
   const submitNavigationBypassRef = React.useRef(false)
   const submitNavigationBypassTimeoutRef = React.useRef<number | null>(null)
-  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false)
+  const [hasUnsavedChanges, setHasUnsavedChangesState] = React.useState(false)
+  const hasUnsavedChangesRef = React.useRef(false)
+  // Writing a state hook the value it already holds still re-runs this whole
+  // component once before React bails out. The dirty check runs on every edit,
+  // so the flag is only written when it actually flips.
+  const setHasUnsavedChanges = React.useCallback((next: boolean) => {
+    if (hasUnsavedChangesRef.current === next) return
+    hasUnsavedChangesRef.current = next
+    setHasUnsavedChangesState(next)
+  }, [])
   const popStateRollbackRef = React.useRef(false)
   const shouldBypassUnsavedChangesGuardRef = React.useRef(shouldBypassUnsavedChangesGuard)
   React.useEffect(() => {
@@ -1033,7 +1042,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     const dirty = currentSnapshot !== snapshot
     isDirtyRef.current = dirty
     setHasUnsavedChanges(dirty)
-  }, [embedded, trackDirtyWhenEmbedded, values])
+  }, [embedded, trackDirtyWhenEmbedded, values, setHasUnsavedChanges])
 
   React.useEffect(() => {
     onDirtyChange?.(hasUnsavedChanges)
@@ -1083,7 +1092,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     everEditedFieldIdsRef.current.clear()
     isDirtyRef.current = false
     setHasUnsavedChanges(false)
-  }, [])
+  }, [setHasUnsavedChanges])
 
   const confirmUnsavedChanges = React.useCallback(async (): Promise<boolean> => {
     if (!isDirtyRef.current || typeof window === 'undefined') return true
@@ -1201,7 +1210,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       window.history.pushState = originalPushState
       window.history.replaceState = originalReplaceState
     }
-  }, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router, trackDirtyWhenEmbedded])
+  }, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router, trackDirtyWhenEmbedded, setHasUnsavedChanges])
 
   const { widgets: primaryInjectionWidgets } = useInjectionWidgets(resolvedInjectionSpotId, {
     context: injectionContext,
@@ -1629,6 +1638,15 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       {extraActions}
     </>
   ) : undefined
+  const renderFooterActions = !hideFooterActions && !formReadOnly
+  const embeddedExtraActions = renderFooterActions ? undefined : extraActions
+  const embeddedHeaderActions = versionHistoryEnabled || headerInjectionAction || embeddedExtraActions ? (
+    <>
+      {versionHistoryEnabled ? versionHistoryAction : null}
+      {headerInjectionAction}
+      {embeddedExtraActions}
+    </>
+  ) : undefined
 
   // Auto-append custom fields for this entityId
   React.useEffect(() => {
@@ -2699,18 +2717,29 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       ) {
         activeFieldChangeDispatchRef.current = null
       }
+      // Re-run the dispatcher only when an edit queued behind this dispatch is
+      // still waiting. Bumping unconditionally re-rendered the whole form a
+      // second time for every keystroke, even with no widget listening.
       if (
         fieldChangeDispatcherMountedRef.current &&
-        fieldChangeFormGenerationRef.current === dispatchToken.formGeneration
+        fieldChangeFormGenerationRef.current === dispatchToken.formGeneration &&
+        pendingFieldChangeEventsRef.current.length > 0
       ) {
         setFieldChangeDispatchVersion((version) => version + 1)
       }
     })
   }, [extendedInjectionEventsEnabled, fieldChangeDispatchVersion, triggerInjectionEvent, values])
 
-  const onBlurRequest = React.useCallback((fieldId: string) => {
-    void validateFieldOnBlur(fieldId)
+  // `validateFieldOnBlur` is rebuilt whenever the form values change. Passing
+  // that identity down would invalidate every memoized field control on each
+  // keystroke, so the fields get a stable callback that reads the latest one.
+  const validateFieldOnBlurRef = React.useRef(validateFieldOnBlur)
+  React.useLayoutEffect(() => {
+    validateFieldOnBlurRef.current = validateFieldOnBlur
   }, [validateFieldOnBlur])
+  const onBlurRequest = React.useCallback((fieldId: string) => {
+    void validateFieldOnBlurRef.current(fieldId)
+  }, [])
 
   const handleFieldsetSelectionChange = React.useCallback(
     (entityId: string, nextCode: string | null) => {
@@ -3899,8 +3928,8 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               submit: formReadOnly ? undefined : { formId, pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon },
             }}
           />
-        ) : headerExtraActions ? (
-          <div className="flex justify-end gap-2 mb-2">{headerExtraActions}</div>
+        ) : embeddedHeaderActions ? (
+          <div className="flex justify-end gap-2 mb-2">{embeddedHeaderActions}</div>
         ) : null}
         {contentHeader}
         <DataLoader
@@ -3938,7 +3967,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               {hasSecondaryColumn ? <div className={densityStackMd} data-crud-injection-region>{col2Content}</div> : null}
             </div>
             {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
-            {hideFooterActions || formReadOnly ? null : (
+            {renderFooterActions ? (
               <FormFooter
                 embedded={embedded}
                 className={dialogFooterClass}
@@ -3952,7 +3981,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                   submit: { pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
                 }}
               />
-            )}
+            ) : null}
             </form>,
           )}
         </DataLoader>
@@ -3982,8 +4011,8 @@ export function CrudForm<TValues extends Record<string, unknown>>({
             submit: formReadOnly ? undefined : { formId, pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon },
           }}
         />
-      ) : headerExtraActions ? (
-        <div className="flex justify-end gap-2 mb-2">{headerExtraActions}</div>
+      ) : embeddedHeaderActions ? (
+        <div className="flex justify-end gap-2 mb-2">{embeddedHeaderActions}</div>
       ) : null}
       {contentHeader}
       <DataLoader
@@ -4036,7 +4065,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               })}
             </div>
             {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
-            {hideFooterActions || formReadOnly ? null : (
+            {renderFooterActions ? (
               <FormFooter
                 embedded={embedded}
                 className={dialogFooterClass}
@@ -4050,7 +4079,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                   submit: { pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon },
                 }}
               />
-            )}
+            ) : null}
           </form>
           </div>,
         )}

package/src/backend/FlashMessages.tsx

@@ -35,10 +35,37 @@ function isSameOriginFlashNavigation(): boolean {
   }
 }
 
+// A page that flashes from a mount effect (e.g. reading an OAuth callback's
+// result params) can run before any `<FlashMessages />` host has attached its
+// listener: on a full page load hydration is split across Suspense boundaries,
+// so the page's effects may commit ahead of the hosts' and the event would be
+// dropped. Keep the latest undelivered message briefly and let the hosts that
+// start listening in the same commit show it, so the primary-host election
+// stays in sync.
+const PENDING_FLASH_MAX_AGE_MS = 5000
+let listeningFlashHostCount = 0
+let pendingFlash: { message: string; type: FlashKind; queuedAt: number } | null = null
+
+function readPendingFlash(): { message: string; type: FlashKind } | null {
+  const pending = pendingFlash
+  if (!pending) return null
+  if (Date.now() - pending.queuedAt > PENDING_FLASH_MAX_AGE_MS) {
+    pendingFlash = null
+    return null
+  }
+  setTimeout(() => {
+    if (pendingFlash === pending) pendingFlash = null
+  }, 0)
+  return pending
+}
+
 // Programmatic API to show a flash message without navigation.
 // Consumers can import { flash } and call flash('text', 'error').
 export function flash(message: string, type: FlashKind = 'info') {
   if (typeof window === 'undefined') return
+  if (listeningFlashHostCount === 0) {
+    pendingFlash = { message, type, queuedAt: Date.now() }
+  }
   const evt = new CustomEvent('flash', { detail: { message, type } })
   window.dispatchEvent(evt)
 }
@@ -222,7 +249,13 @@ function FlashMessagesInner() {
       showFlash(text, t)
     }
     window.addEventListener('flash', handler as EventListener)
-    return () => window.removeEventListener('flash', handler as EventListener)
+    listeningFlashHostCount += 1
+    const pending = readPendingFlash()
+    if (pending) showFlash(pending.message, pending.type)
+    return () => {
+      listeningFlashHostCount -= 1
+      window.removeEventListener('flash', handler as EventListener)
+    }
   }, [showFlash])
 
   const handleDismiss = React.useCallback(() => {

package/src/backend/__tests__/CrudForm.embeddedExtraActions.test.tsx

@@ -0,0 +1,114 @@
+/** @jest-environment jsdom */
+
+/**
+ * An embedded CrudForm is the body of a dialog: its footer is the only action
+ * row the user sees, and hosts put the dialog's Cancel button there by passing
+ * it through `extraActions`. Rendering that same node again in the embedded
+ * header strip produced two Cancel buttons in one dialog (issue #6750).
+ *
+ * The contract pinned here:
+ *
+ *   1. embedded + a rendered footer  -> `extraActions` appear once, in the footer,
+ *   2. embedded + no footer          -> they fall back to the header strip rather
+ *                                       than disappearing, and
+ *   3. not embedded                  -> the intentional FormHeader/FormFooter
+ *                                       mirroring is untouched.
+ */
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({ confirm: jest.fn().mockResolvedValue(true), ConfirmDialogElement: null }),
+}))
+jest.mock('../custom-fields/FieldDefinitionsManager', () => {
+  const React = require('react')
+  return { __esModule: true, FieldDefinitionsManager: React.forwardRef(() => <div />) }
+})
+jest.mock('../utils/customFieldForms', () => ({
+  __esModule: true,
+  buildFormFieldFromCustomFieldDef: jest.fn(),
+  buildFormFieldsFromCustomFields: jest.fn(() => []),
+  fetchCustomFieldFormStructure: jest.fn(),
+}))
+
+import * as React from 'react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { Button } from '../../primitives/button'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+const fields: CrudField[] = [{ id: 'name', label: 'Name', type: 'text' }]
+const groups: CrudFormGroup[] = [{ id: 'basic', title: 'Basic', column: 1, fields: ['name'] }]
+
+type FormOptions = {
+  embedded?: boolean
+  hideFooterActions?: boolean
+  readOnly?: boolean
+}
+
+function renderForm({ embedded = true, hideFooterActions, readOnly }: FormOptions = {}) {
+  const { container } = renderWithProviders(
+    <CrudForm
+      fields={fields}
+      groups={groups}
+      initialValues={{ name: 'x' }}
+      onSubmit={jest.fn()}
+      submitLabel="Apply"
+      embedded={embedded}
+      hideFooterActions={hideFooterActions}
+      readOnly={readOnly}
+      extraActions={(
+        <Button type="button" variant="ghost">Cancel</Button>
+      )}
+    />,
+  )
+  return container
+}
+
+function cancelButtons(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>('button')).filter(
+    (button) => button.textContent?.trim() === 'Cancel',
+  )
+}
+
+describe('CrudForm embedded extraActions', () => {
+  it('renders a single Cancel action, in the footer beside the submit button', () => {
+    const container = renderForm()
+    const cancels = cancelButtons(container)
+
+    expect(cancels).toHaveLength(1)
+
+    const form = container.querySelector('form')
+    expect(form).not.toBeNull()
+    expect(form!.contains(cancels[0])).toBe(true)
+
+    const submit = container.querySelector<HTMLElement>('button[type="submit"]')
+    expect(submit?.textContent).toContain('Apply')
+    expect(cancels[0].parentElement).toBe(submit?.parentElement)
+  })
+
+  it('keeps the actions visible in the header strip when the footer is hidden', () => {
+    const container = renderForm({ hideFooterActions: true })
+    const cancels = cancelButtons(container)
+
+    expect(cancels).toHaveLength(1)
+    expect(container.querySelector('form')?.contains(cancels[0])).toBe(false)
+  })
+
+  it('keeps the actions visible in the header strip when the form is read-only', () => {
+    const container = renderForm({ readOnly: true })
+    const cancels = cancelButtons(container)
+
+    expect(cancels).toHaveLength(1)
+    expect(container.querySelector('form')?.contains(cancels[0])).toBe(false)
+  })
+
+  it('leaves the non-embedded header/footer mirroring in place', () => {
+    const container = renderForm({ embedded: false })
+
+    expect(cancelButtons(container)).toHaveLength(2)
+  })
+})

package/src/backend/__tests__/CrudForm.fieldChangeRenders.test.tsx

@@ -0,0 +1,127 @@
+/** @jest-environment jsdom */
+const triggerEventMock = jest.fn()
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({ confirm: jest.fn(), ConfirmDialogElement: null }),
+}))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: triggerEventMock }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
+
+const mockControlRender = jest.fn()
+jest.mock('../../primitives/textarea', () => {
+  const actual = jest.requireActual('../../primitives/textarea')
+  const ReactActual = jest.requireActual('react')
+  return {
+    ...actual,
+    Textarea: ReactActual.forwardRef((props: Record<string, unknown>, ref: unknown) => {
+      mockControlRender('textarea')
+      return ReactActual.createElement(actual.Textarea, { ...props, ref })
+    }),
+  }
+})
+jest.mock('../../primitives/checkbox', () => {
+  const actual = jest.requireActual('../../primitives/checkbox')
+  const ReactActual = jest.requireActual('react')
+  return {
+    ...actual,
+    Checkbox: ReactActual.forwardRef((props: Record<string, unknown>, ref: unknown) => {
+      mockControlRender('checkbox')
+      return ReactActual.createElement(actual.Checkbox, { ...props, ref })
+    }),
+  }
+})
+
+import * as React from 'react'
+import { act, fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+describe('CrudForm field-change render cost', () => {
+  beforeEach(() => {
+    triggerEventMock.mockReset()
+    triggerEventMock.mockImplementation(async (_event: string, data: Record<string, unknown>) => ({ ok: true, data }))
+  })
+
+  it('renders the form once per steady-state edit when no widget answers the field-change event', async () => {
+    const groupRender = jest.fn()
+    const groups: CrudFormGroup[] = [{
+      id: 'details',
+      bare: true,
+      component: ({ values, setValue }) => {
+        groupRender()
+        return <input aria-label="Draft title" value={String(values.title ?? '')} onChange={(event) => setValue('title', event.target.value)} />
+      },
+    }]
+    renderWithProviders(
+      <CrudForm embedded fields={[]} groups={groups} initialValues={{ title: '' }} injectionSpotId="example:field-change" onSubmit={() => {}} />,
+    )
+    await act(async () => { await Promise.resolve() })
+    const rendersPerEdit: number[] = []
+    for (const value of ['a', 'ab', 'abc', 'abcd']) {
+      groupRender.mockClear()
+      triggerEventMock.mockClear()
+      await act(async () => {
+        fireEvent.change(screen.getByLabelText('Draft title'), { target: { value } })
+        await Promise.resolve()
+        await Promise.resolve()
+      })
+      await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+      expect(screen.getByLabelText('Draft title')).toHaveValue(value)
+      expect(triggerEventMock.mock.calls.filter(([event]) => event === 'onFieldChange')).toHaveLength(1)
+      rendersPerEdit.push(groupRender.mock.calls.length)
+    }
+    expect(rendersPerEdit.slice(1)).toEqual([1, 1, 1])
+  })
+
+  it('leaves the other fields alone while one field is being typed in', async () => {
+    const fields: CrudField[] = [
+      { id: 'title', label: 'Title', type: 'text', required: true },
+      { id: 'notes', label: 'Notes', type: 'textarea' },
+      { id: 'flag', label: 'Flag', type: 'checkbox' },
+    ]
+    const rendered = renderWithProviders(
+      <CrudForm title="Form" fields={fields} initialValues={{ title: '', notes: 'keep', flag: false }} injectionSpotId="example:field-change" onSubmit={() => {}} />,
+      { dict: { 'ui.forms.actions.save': 'Save', 'ui.forms.errors.required': 'Required' } },
+    )
+    const input = rendered.container.querySelector('[data-crud-field-id="title"] input') as HTMLInputElement
+    const edit = async (value: string) => {
+      await act(async () => {
+        fireEvent.change(input, { target: { value } })
+        await Promise.resolve()
+      })
+      await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    }
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    expect(mockControlRender).toHaveBeenCalledWith('textarea')
+    expect(mockControlRender).toHaveBeenCalledWith('checkbox')
+    await edit('a')
+    mockControlRender.mockClear()
+    await edit('ab')
+    await edit('abc')
+    expect(input).toHaveValue('abc')
+    expect(mockControlRender).not.toHaveBeenCalled()
+
+    // The stable blur callback must still validate against the latest values.
+    await act(async () => { fireEvent.blur(input) })
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    expect(screen.queryByText('Required')).not.toBeInTheDocument()
+    await edit('')
+    await act(async () => { fireEvent.blur(input) })
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    expect(await screen.findByText('Required')).toBeInTheDocument()
+  })
+})

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

@@ -125,6 +125,71 @@ describe('FlashMessages', () => {
     expect(screen.getAllByText('Project team updated.')).toHaveLength(1)
   })
 
+  /**
+   * Regression for #6402: on a full page load a page's mount effect can commit
+   * before any host attaches its listener, so the event used to be dropped and
+   * the user saw nothing. Rendering the flasher first reproduces that ordering.
+   */
+  it('shows a flash dispatched before any host was listening once a host mounts', () => {
+    function FlashesOnMount() {
+      React.useEffect(() => {
+        flash('Channel connected (gmail).', 'success')
+      }, [])
+      return null
+    }
+
+    renderWithProviders(
+      <>
+        <FlashesOnMount />
+        <FlashMessages />
+      </>,
+    )
+
+    expect(screen.getByText('Channel connected (gmail).')).toBeInTheDocument()
+    const badge = document.querySelector('[data-slot="alert-icon-badge"]')
+    expect(badge?.getAttribute('data-status')).toBe('success')
+  })
+
+  it('renders an early flash once when several hosts mount in the same commit', () => {
+    flash('This connection link was already used.', 'error')
+
+    renderWithProviders(
+      <>
+        <FlashMessages />
+        <FlashMessages />
+      </>,
+    )
+
+    expect(screen.getAllByText('This connection link was already used.')).toHaveLength(1)
+    const badge = document.querySelector('[data-slot="alert-icon-badge"]')
+    expect(badge?.getAttribute('data-status')).toBe('error')
+  })
+
+  it('does not replay an early flash to a host that mounts later', () => {
+    flash('Already delivered.', 'success')
+    const first = renderWithProviders(<FlashMessages />)
+    expect(screen.getByText('Already delivered.')).toBeInTheDocument()
+    first.unmount()
+
+    act(() => {
+      jest.advanceTimersByTime(0)
+    })
+
+    renderWithProviders(<FlashMessages />)
+    expect(screen.queryByText('Already delivered.')).not.toBeInTheDocument()
+  })
+
+  it('drops an undelivered flash that is older than the pending window', () => {
+    flash('Too old to show.', 'success')
+
+    act(() => {
+      jest.advanceTimersByTime(5001)
+    })
+
+    renderWithProviders(<FlashMessages />)
+    expect(screen.queryByText('Too old to show.')).not.toBeInTheDocument()
+  })
+
   it('auto-dismisses programmatic flashes', () => {
     renderWithProviders(<FlashMessages />)