u

src/components/AppShell.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, lazy, Suspense } from 'react';
 import Box from '@mui/material/Box';
 import List from '@mui/material/List';
 import ListItemButton from '@mui/material/ListItemButton';
@@ -21,6 +21,10 @@ import {
 } from '../colors';
 import { ChatFab, ChatDrawer } from './chat';
 
+const BreakpointOverlay = import.meta.env.DEV
+  ? lazy(() => import('./BreakpointOverlay'))
+  : null;
+
 
 const SIDEBAR_WIDTH = 144;
 const SUB_NAV_WIDTH = 88;
@@ -322,6 +326,11 @@ export default function AppShell() {
       </Box>
       <ChatFab />
       <ChatDrawer />
+      {BreakpointOverlay && (
+        <Suspense fallback={null}>
+          <BreakpointOverlay />
+        </Suspense>
+      )}
     </Box>
   );
 }

src/components/BreakpointOverlay.jsx

@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+
+export default function BreakpointOverlay() {
+  if (!import.meta.env.DEV) {
+    return null;
+  }
+
+  const theme = useTheme();
+
+  const breakpoints = useMemo(() => {
+    const values = theme?.breakpoints?.values || {};
+    return [
+      { name: 'xs', width: values.xs || 360, color: 'rgba(239, 68, 68, 0.75)' },
+      { name: 'sm', width: values.sm || 600, color: 'rgba(245, 158, 11, 0.75)' },
+      { name: 'md', width: values.md || 900, color: 'rgba(16, 185, 129, 0.75)' },
+      { name: 'lg', width: values.lg || 1200, color: 'rgba(14, 165, 233, 0.75)' },
+      { name: 'xl', width: values.xl || 1536, color: 'rgba(168, 85, 247, 0.75)' },
+    ];
+  }, [theme]);
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        inset: 0,
+        pointerEvents: 'none',
+        zIndex: 99999,
+        overflow: 'hidden',
+      }}
+    >
+      {breakpoints.map((bp) => (
+        <Box
+          key={bp.name}
+          sx={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            width: bp.width,
+            border: `1px solid ${bp.color}`,
+            boxSizing: 'border-box',
+          }}
+        >
+          <Box
+            component="span"
+            sx={{
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              px: 0.6,
+              py: 0.2,
+              bgcolor: bp.color,
+              color: '#ffffff',
+              fontSize: '10px',
+              fontWeight: 700,
+              fontFamily: 'monospace',
+              lineHeight: 1,
+              borderBottomLeftRadius: 3,
+              userSelect: 'none',
+              letterSpacing: '0.05em',
+              textTransform: 'uppercase',
+            }}
+          >
+            {bp.name}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+}