feat: add Rosetta detection for Apple Silicon (#5717)

* feat: add Rosetta detection for Apple Silicon

* fix: update class attributes to className for React compatibility

packages/bruno-app/src/pages/Bruno/index.js

@@ -13,6 +13,7 @@ import 'codemirror/theme/material.css';
 import 'codemirror/theme/monokai.css';
 import 'codemirror/addon/scroll/simplescrollbars.css';
 import Devtools from 'components/Devtools';
+import Portal from 'components/Portal';
 
 require('codemirror/mode/javascript/javascript');
 require('codemirror/mode/xml/xml');
@@ -52,6 +53,7 @@ export default function Main() {
   const showHomePage = useSelector((state) => state.app.showHomePage);
   const isConsoleOpen = useSelector((state) => state.logs.isConsoleOpen);
   const mainSectionRef = useRef(null);
+  const [showRosettaBanner, setShowRosettaBanner] = useState(false);
 
   const className = classnames({
     'is-dragging': isDragging
@@ -64,10 +66,11 @@ export default function Main() {
 
     const { ipcRenderer } = window;
 
-    const removeAppLoadedListener = ipcRenderer.on('main:app-loaded', () => {
+    const removeAppLoadedListener = ipcRenderer.on('main:app-loaded', (init) => {
       if (mainSectionRef.current) {
         mainSectionRef.current.setAttribute('data-app-state', 'loaded');
       }
+      setShowRosettaBanner(init.isRunningInRosetta);
     });
 
     return () => {
@@ -77,10 +80,23 @@ export default function Main() {
 
   return (
     // <ErrorCapture>
-      <div id="main-container" className="flex flex-col h-screen max-h-screen overflow-hidden">
-        <div
-          ref={mainSectionRef}
-          className="flex-1 min-h-0 flex"
+    <div id="main-container" className="flex flex-col h-screen max-h-screen overflow-hidden">
+      {showRosettaBanner ? (
+        <Portal>
+          <div className="fixed bottom-0 left-0 right-0 z-10 bg-amber-100 border border-amber-400 text-amber-700 px-4 py-3" role="alert">
+            <strong className="font-bold">WARNING:</strong>
+            <div>
+              It looks like Bruno was launched as the Intel (x64) build under Rosetta on your Apple Silicon Mac. This can cause reduced performance and unexpected behavior.
+            </div>
+            <button className="absolute right-2 top-0 text-xl" onClick={() => setShowRosettaBanner(!showRosettaBanner)}>
+              &times;
+            </button>
+          </div>
+        </Portal>
+      ) : null}
+      <div
+        ref={mainSectionRef}
+        className="flex-1 min-h-0 flex"
           data-app-state="loading"
           style={{
             height: isConsoleOpen ? `calc(100vh - 22px - ${isConsoleOpen ? '300px' : '0px'})` : 'calc(100vh - 22px)'

packages/bruno-electron/src/index.js

@@ -46,6 +46,7 @@ const { getDomainsWithCookies } = require('./utils/cookies');
 const { cookiesStore } = require('./store/cookies');
 const onboardUser = require('./app/onboarding');
 const SystemMonitor = require('./app/system-monitor');
+const { getIsRunningInRosetta } = require('./utils/arch');
 
 const lastOpenedCollections = new LastOpenedCollections();
 const systemMonitor = new SystemMonitor();
@@ -203,7 +204,9 @@ app.on('ready', async () => {
       console.error('Failed to load cookies for renderer', err);
     }
 
-    mainWindow.webContents.send('main:app-loaded');
+    mainWindow.webContents.send('main:app-loaded', {
+      isRunningInRosetta: getIsRunningInRosetta()
+    });
 
     // Start system monitoring for FileSync
     systemMonitor.start(mainWindow);

packages/bruno-electron/src/utils/arch.js

@@ -0,0 +1,18 @@
+const getIsRunningInRosetta = () => {
+  const isMac = process.platform === 'darwin';
+  const isArm64 = process.arch === 'arm64';
+
+  if (!isMac) return false;
+  if (isArm64) return false;
+
+  const os = require('os');
+  const isRunningOnSilicon = os.cpus().find((d) => d.model.includes('Apple'));
+  if (!isRunningOnSilicon) {
+    return false;
+  }
+  return true;
+};
+
+module.exports = {
+  getIsRunningInRosetta
+};