ui adjustments (#2371)

* adjust folder inclusion, ssr logging

* avoid stale chunks

* prevent hydration mismatch

Author: breardon2011

ui/server-start.js

@@ -31,7 +31,12 @@ const server = createServer(async (req, res) => {
     const pathname = url.pathname;
 
     // Try to serve static files from dist/client first
-    if (pathname.startsWith('/assets/') || pathname === '/favicon.svg' || pathname === '/favicon.png' || pathname === '/favicon.ico') {
+    // Serve: /assets/*, *.js, *.css, *.json, images, fonts, favicons
+    const staticExtensions = ['.js', '.mjs', '.css', '.json', '.png', '.jpg', '.gif', '.ico', '.svg', '.woff', '.woff2'];
+    const isStaticFile = pathname.startsWith('/assets/') || 
+                         staticExtensions.some(ext => pathname.endsWith(ext));
+    
+    if (isStaticFile) {
       try {
         const filePath = join(__dirname, 'dist', 'client', pathname);
         const content = await readFile(filePath);
@@ -67,7 +72,14 @@ const server = createServer(async (req, res) => {
     });
 
     // Call the TanStack Start fetch handler
+    const ssrStart = Date.now();
     const response = await serverHandler.fetch(request);
+    const ssrTime = Date.now() - ssrStart;
+    
+    // Log slow SSR requests
+    if (ssrTime > 1000) {
+      console.log(`⚠️  SLOW SSR: ${req.method} ${pathname} took ${ssrTime}ms`);
+    }
 
     // Convert Web Standard Response to Node.js response
     res.statusCode = response.status;
@@ -77,6 +89,11 @@ const server = createServer(async (req, res) => {
     response.headers.forEach((value, key) => {
       res.setHeader(key, value);
     });
+    
+    // Prevent caching of HTML to avoid stale chunk references for now 
+    if (response.headers.get('content-type')?.includes('text/html')) {
+      res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
+    }
 
     // Stream the response body
     if (response.body) {

ui/src/hooks/use-mobile.tsx

@@ -10,7 +10,8 @@ export function useIsMobile() {
     typeof window !== "undefined" &&
     window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches
 
-  const [isMobile, setIsMobile] = React.useState<boolean>(get)
+
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 
   useIsomorphicLayoutEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
@@ -19,6 +20,6 @@ export function useIsMobile() {
     mql.addEventListener("change", onChange)
     return () => mql.removeEventListener("change", onChange)
   }, [])
-
-  return isMobile
+  // prevent hydration mismatch before effect is called
+  return isMobile ?? false
 }