Add runtime asset and layout diagnostics to index.php and implement asset versioning in head.php

index.php

@@ -964,3 +964,60 @@ $recipesJson = json_encode(array_values(array_map(function($r) use ($lang) {
 
 })();
 </script>
+
+<script>
+// #region agent log
+window.addEventListener('load', function() {
+  var styleSheet = Array.prototype.find.call(document.styleSheets, function(sheet) {
+    return (sheet.href || '').indexOf('/assets/style.css') !== -1;
+  });
+  var parsedSelectors = [];
+  var parsedRuleCount = null;
+  try {
+    var rules = styleSheet ? Array.prototype.slice.call(styleSheet.cssRules) : [];
+    parsedRuleCount = rules.length;
+    parsedSelectors = rules
+      .map(function(rule) { return rule.selectorText || ''; })
+      .filter(function(selector) {
+        return selector.indexOf('nav-trigger') !== -1 ||
+          selector.indexOf('nav-overlay') !== -1 ||
+          selector.indexOf('recipe-stage') !== -1 ||
+          selector.indexOf('swipe-track') !== -1;
+      });
+  } catch (e) {
+    parsedRuleCount = 'inaccessible:' + e.name;
+  }
+
+  var navTrigger = document.querySelector('.nav-trigger');
+  var navOverlay = document.querySelector('.nav-overlay');
+  var stageSlide = document.querySelector('.recipe-stage__slide');
+  var swipeTrack = document.querySelector('#swipeTrack');
+  var navTriggerStyle = navTrigger ? getComputedStyle(navTrigger) : null;
+  var navOverlayStyle = navOverlay ? getComputedStyle(navOverlay) : null;
+  var stageSlideStyle = stageSlide ? getComputedStyle(stageSlide) : null;
+  var swipeTrackStyle = swipeTrack ? getComputedStyle(swipeTrack) : null;
+
+  Promise.resolve()
+    .then(function() {
+      return fetch('/assets/style.css', { cache: 'reload' })
+        .then(function(response) {
+          return response.text().then(function(text) {
+            return {
+              status: response.status,
+              length: text.length,
+              navTriggerIndex: text.indexOf('.nav-trigger'),
+              recipeStageIndex: text.indexOf('.recipe-stage'),
+              swipeTrackIndex: text.indexOf('.swipe-track')
+            };
+          });
+        })
+        .catch(function(error) {
+          return { error: String(error) };
+        });
+    })
+    .then(function(freshCss) {
+      fetch('http://127.0.0.1:7292/ingest/ae7aab4e-c316-43ae-86e2-5693ba7bf7ab',{method:'POST',headers:{'Content-Type':'application/json','X-Debug-Session-Id':'783487'},body:JSON.stringify({sessionId:'783487',runId:'initial',hypothesisId:'H1,H2,H3,H4,H5',location:'index.php:968',message:'homepage runtime asset and layout diagnostics',data:{userAgent:navigator.userAgent,viewport:{width:window.innerWidth,height:window.innerHeight,dpr:window.devicePixelRatio},styleHref:styleSheet ? styleSheet.href : null,parsedRuleCount:parsedRuleCount,parsedSelectors:parsedSelectors,freshCss:freshCss,libraries:{gsap:typeof window.gsap,scrollTrigger:typeof window.ScrollTrigger,lenis:typeof window.Lenis},support:{clipPath:CSS.supports('clip-path','inset(0 0 0% 0)'),dvh:CSS.supports('height','100dvh'),backdropFilter:CSS.supports('backdrop-filter','blur(1px)') || CSS.supports('-webkit-backdrop-filter','blur(1px)')},computed:{navTrigger:{position:navTriggerStyle ? navTriggerStyle.position : null,display:navTriggerStyle ? navTriggerStyle.display : null},navOverlay:{position:navOverlayStyle ? navOverlayStyle.position : null,clipPath:navOverlayStyle ? navOverlayStyle.clipPath : null},stageSlide:{position:stageSlideStyle ? stageSlideStyle.position : null,opacity:stageSlideStyle ? stageSlideStyle.opacity : null,transform:stageSlideStyle ? stageSlideStyle.transform : null},swipeTrack:{overflowX:swipeTrackStyle ? swipeTrackStyle.overflowX : null,display:swipeTrackStyle ? swipeTrackStyle.display : null},pinSpacer:!!document.querySelector('.pin-spacer'),swipeCardCount:document.querySelectorAll('.swipe-card').length}},timestamp:Date.now()})}).catch(()=>{});
+    });
+});
+// #endregion
+</script>

partials/head.php

@@ -1,6 +1,10 @@
 <?php
 $pageTitle   = $pageTitle   ?? 'FlixCooks | Food Blog & Recipes';
 $description = $description ?? 'Seasonal recipes, tested tips, and approachable cooking for busy weeknights.';
+$assetVersion = static function (string $assetPath): string {
+    $absolutePath = dirname(__DIR__) . '/' . ltrim($assetPath, '/');
+    return is_file($absolutePath) ? (string) filemtime($absolutePath) : '1';
+};
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -18,8 +22,8 @@ $description = $description ?? 'Seasonal recipes, tested tips, and approachable
   <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 
   <!-- Main stylesheet -->
-  <link rel="stylesheet" href="/assets/style.css">
-  <script src="/assets/fc-local.js" defer></script>
+  <link rel="stylesheet" href="/assets/style.css?v=<?php echo e($assetVersion('/assets/style.css')); ?>">
+  <script src="/assets/fc-local.js?v=<?php echo e($assetVersion('/assets/fc-local.js')); ?>" defer></script>
 
   <!-- GSAP + ScrollTrigger (CDN) -->
   <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>