feat: add diagnostics and telemetry runtime

src/presentation/design-system/primitives/core.tsx

@@ -341,6 +341,7 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
     const { message } = useLocale();
     const dialogRef = useRef<HTMLDialogElement | null>(null);
     const previousFocusRef = useRef<HTMLElement | null>(null);
+    const focusRestoreGenerationRef = useRef(0);
     const titleId = useId();
     const descriptionId = useId();
     useImperativeHandle(forwardedRef, () => dialogRef.current!, []);
@@ -348,6 +349,8 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
     useEffect(() => {
       const dialog = dialogRef.current;
       if (!dialog) return;
+      const generation = focusRestoreGenerationRef.current + 1;
+      focusRestoreGenerationRef.current = generation;
 
       if (open) {
         previousFocusRef.current =
@@ -371,9 +374,19 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
       }
       const previousFocus = previousFocusRef.current;
       previousFocusRef.current = null;
-      queueMicrotask(() => {
-        if (previousFocus?.isConnected) previousFocus.focus();
-      });
+      const restoreFocus = () => {
+        if (
+          focusRestoreGenerationRef.current === generation &&
+          previousFocus?.isConnected
+        ) {
+          previousFocus.focus();
+        }
+      };
+      if (typeof globalThis.requestAnimationFrame === "function") {
+        const frame = globalThis.requestAnimationFrame(restoreFocus);
+        return () => globalThis.cancelAnimationFrame(frame);
+      }
+      queueMicrotask(restoreFocus);
     }, [open]);
 
     return (

src/presentation/routes/app-router.tsx

@@ -105,9 +105,16 @@ function InvalidRouteSurface({ code }: { code: string }) {
   );
 }
 
-function RouteLifecycle({ definition }: { definition: RouteDefinition }) {
+function RouteLifecycle({
+  definition,
+  buildId,
+}: {
+  definition: RouteDefinition;
+  buildId: string;
+}) {
   const location = useLocation();
   const { message, resolve } = useLocale();
+  const { diagnostics } = useApplication();
   useEffect(() => {
     document.title = message("route.documentTitle", {
       title: resolve(`route.${definition.routeId}.title`),
@@ -122,7 +129,19 @@ function RouteLifecycle({ definition }: { definition: RouteDefinition }) {
     } catch {
       // Non-browser test hosts may not implement scrolling.
     }
-  }, [definition, location.key, location.pathname, message, resolve]);
+    diagnostics.reportRouteChanged({
+      routeId: definition.routeId,
+      buildId,
+    });
+  }, [
+    buildId,
+    definition,
+    diagnostics,
+    location.key,
+    location.pathname,
+    message,
+    resolve,
+  ]);
   return null;
 }
 
@@ -244,7 +263,7 @@ function RegisteredRoute({
   const content = (
     <RouteInputContext.Provider value={parsed.data}>
       <CanonicalRouteRedirect input={parsed.data} />
-      <RouteLifecycle definition={definition} />
+      <RouteLifecycle definition={definition} buildId={buildId} />
       <Suspense fallback={<RouteLoadingSurface definition={definition} />}>
         <ChunkRecoveryBoundary
           chunkId={definition.chunkId}