feat(web): enhance debugging capabilities across components

- Integrated debug logging in main application file to track boot process.
- Added layout width logging in PageShell and various ReUI components to monitor rendering dimensions.
- Implemented chart size logging in dashboard analytics components for better performance insights.
- Enhanced OpsDashboard and ResourcePage with width tracking to improve layout responsiveness.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/reui-kit/settings-shell.tsx

@@ -1,10 +1,11 @@
-import type { ReactNode } from 'react'
+import { useEffect, useRef, type ReactNode } from 'react'
 import { Link, Outlet, useRouterState } from '@tanstack/react-router'
 import { SettingsIcon } from 'lucide-react'
 
 import { useIsMobile } from '@cfdm/ui/hooks/use-mobile'
 import { cn } from '@cfdm/ui/lib/utils'
 import { PageShell } from '@/components/page-shell'
+import { debugAgentLog } from '@/lib/debug-agent-log'
 
 export interface SettingsTabConfig {
   id: string
@@ -34,11 +35,28 @@ export function SettingsShell({
   tabs = DEFAULT_TABS,
 }: SettingsShellProps) {
   const isMobile = useIsMobile()
+  const rootRef = useRef<HTMLDivElement>(null)
   const pathname = useRouterState({ select: (s) => s.location.pathname })
 
+  useEffect(() => {
+    const el = rootRef.current
+    if (!el) return
+    debugAgentLog(
+      'settings-shell.tsx:mount',
+      'settings shell width',
+      {
+        pathname,
+        clientWidth: el.clientWidth,
+        maxWidth: getComputedStyle(el).maxWidth,
+        className: el.className,
+      },
+      'A',
+    )
+  }, [pathname])
+
   return (
     <PageShell>
-      <div className="mx-auto flex w-full max-w-4xl flex-col gap-6">
+      <div ref={rootRef} className="mx-auto flex w-full max-w-4xl flex-col gap-6">
         <header className="px-1">
           <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
           <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">