Merge remote-tracking branch 'upstream/main'

app/commit.json

@@ -1 +1 @@
-{ "commit": "78505ed2f347dd3a7778b4c1c7c38c89ecacedd3" , "version": "" }
+{ "commit": "6987ceae9e1e91bec301f9e25ed9e8e03449d806" , "version": "" }

app/components/chat/Messages.client.tsx

@@ -73,8 +73,8 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                 </div>
                 {!isUserMessage && (
                   <div className="flex gap-2 flex-col lg:flex-row">
-                    <WithTooltip tooltip="Revert to this message">
                     {messageId && (
+                      <WithTooltip tooltip="Revert to this message">
                         <button
                           onClick={() => handleRewind(messageId)}
                           key="i-ph:arrow-u-up-left"
@@ -83,8 +83,8 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                             'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
                           )}
                         />
-                      )}
                       </WithTooltip>
+                    )}
 
                     <WithTooltip tooltip="Fork chat from this message">
                       <button

app/components/settings/debug/DebugTab.tsx

@@ -22,6 +22,12 @@ interface SystemInfo {
   timezone: string;
   memory: string;
   cores: number;
+  deviceType: string;
+  colorDepth: string;
+  pixelRatio: number;
+  online: boolean;
+  cookiesEnabled: boolean;
+  doNotTrack: boolean;
 }
 
 interface IProviderConfig {
@@ -62,14 +68,100 @@ function getSystemInfo(): SystemInfo {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   };
 
+  const getBrowserInfo = (): string => {
+    const ua = navigator.userAgent;
+    let browser = 'Unknown';
+
+    if (ua.includes('Firefox/')) {
+      browser = 'Firefox';
+    } else if (ua.includes('Chrome/')) {
+      if (ua.includes('Edg/')) {
+        browser = 'Edge';
+      } else if (ua.includes('OPR/')) {
+        browser = 'Opera';
+      } else {
+        browser = 'Chrome';
+      }
+    } else if (ua.includes('Safari/')) {
+      if (!ua.includes('Chrome')) {
+        browser = 'Safari';
+      }
+    }
+
+    // Extract version number
+    const match = ua.match(new RegExp(`${browser}\\/([\\d.]+)`));
+    const version = match ? ` ${match[1]}` : '';
+
+    return `${browser}${version}`;
+  };
+
+  const getOperatingSystem = (): string => {
+    const ua = navigator.userAgent;
+    const platform = navigator.platform;
+
+    if (ua.includes('Win')) {
+      return 'Windows';
+    }
+
+    if (ua.includes('Mac')) {
+      if (ua.includes('iPhone') || ua.includes('iPad')) {
+        return 'iOS';
+      }
+
+      return 'macOS';
+    }
+
+    if (ua.includes('Linux')) {
+      return 'Linux';
+    }
+
+    if (ua.includes('Android')) {
+      return 'Android';
+    }
+
+    return platform || 'Unknown';
+  };
+
+  const getDeviceType = (): string => {
+    const ua = navigator.userAgent;
+
+    if (ua.includes('Mobile')) {
+      return 'Mobile';
+    }
+
+    if (ua.includes('Tablet')) {
+      return 'Tablet';
+    }
+
+    return 'Desktop';
+  };
+
+  // Get more detailed memory info if available
+  const getMemoryInfo = (): string => {
+    if ('memory' in performance) {
+      const memory = (performance as any).memory;
+      return `${formatBytes(memory.jsHeapSizeLimit)} (Used: ${formatBytes(memory.usedJSHeapSize)})`;
+    }
+
+    return 'Not available';
+  };
+
   return {
-    os: navigator.platform,
+    os: getOperatingSystem(),
-    browser: navigator.userAgent.split(' ').slice(-1)[0],
+    browser: getBrowserInfo(),
     screen: `${window.screen.width}x${window.screen.height}`,
     language: navigator.language,
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    memory: formatBytes(performance?.memory?.jsHeapSizeLimit || 0),
+    memory: getMemoryInfo(),
     cores: navigator.hardwareConcurrency || 0,
+    deviceType: getDeviceType(),
+
+    // Add new fields
+    colorDepth: `${window.screen.colorDepth}-bit`,
+    pixelRatio: window.devicePixelRatio,
+    online: navigator.onLine,
+    cookiesEnabled: navigator.cookieEnabled,
+    doNotTrack: navigator.doNotTrack === '1',
   };
 }
 
@@ -384,10 +476,31 @@ export default function DebugTab() {
                 <p className="text-xs text-bolt-elements-textSecondary">Operating System</p>
                 <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.os}</p>
               </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Device Type</p>
+                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.deviceType}</p>
+              </div>
               <div>
                 <p className="text-xs text-bolt-elements-textSecondary">Browser</p>
                 <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.browser}</p>
               </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Display</p>
+                <p className="text-sm font-medium text-bolt-elements-textPrimary">
+                  {systemInfo.screen} ({systemInfo.colorDepth}) @{systemInfo.pixelRatio}x
+                </p>
+              </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Connection</p>
+                <p className="text-sm font-medium flex items-center gap-2">
+                  <span
+                    className={`inline-block w-2 h-2 rounded-full ${systemInfo.online ? 'bg-green-500' : 'bg-red-500'}`}
+                  />
+                  <span className={`${systemInfo.online ? 'text-green-600' : 'text-red-600'}`}>
+                    {systemInfo.online ? 'Online' : 'Offline'}
+                  </span>
+                </p>
+              </div>
               <div>
                 <p className="text-xs text-bolt-elements-textSecondary">Screen Resolution</p>
                 <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.screen}</p>

app/components/settings/features/FeaturesTab.tsx

@@ -3,8 +3,8 @@ import { Switch } from '~/components/ui/Switch';
 import { useSettings } from '~/lib/hooks/useSettings';
 
 export default function FeaturesTab() {
-
+  const { debug, enableDebugMode, isLocalModel, enableLocalModels, enableEventLogs, latestBranch, enableLatestBranch } =
-  const { debug, enableDebugMode, isLocalModel, enableLocalModels, enableEventLogs, latestBranch, enableLatestBranch } = useSettings();
+    useSettings();
 
   const handleToggle = (enabled: boolean) => {
     enableDebugMode(enabled);

app/components/ui/IconButton.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, forwardRef, type ForwardedRef } from 'react';
 import { classNames } from '~/utils/classNames';
 
 type IconSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
@@ -25,8 +25,11 @@ type IconButtonWithChildrenProps = {
 
 type IconButtonProps = IconButtonWithoutChildrenProps | IconButtonWithChildrenProps;
 
+// Componente IconButton com suporte a refs
 export const IconButton = memo(
-  ({
+  forwardRef(
+    (
+      {
         icon,
         size = 'xl',
         className,
@@ -36,9 +39,12 @@ export const IconButton = memo(
         title,
         onClick,
         children,
-  }: IconButtonProps) => {
+      }: IconButtonProps,
+      ref: ForwardedRef<HTMLButtonElement>,
+    ) => {
       return (
         <button
+          ref={ref}
           className={classNames(
             'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
             {
@@ -60,6 +66,7 @@ export const IconButton = memo(
         </button>
       );
     },
+  ),
 );
 
 function getIconSize(size: IconSize) {

app/components/ui/Tooltip.tsx

@@ -1,8 +1,9 @@
 import * as Tooltip from '@radix-ui/react-tooltip';
+import { forwardRef, type ForwardedRef, type ReactElement } from 'react';
 
 interface TooltipProps {
   tooltip: React.ReactNode;
-  children: React.ReactNode;
+  children: ReactElement;
   sideOffset?: number;
   className?: string;
   arrowClassName?: string;
@@ -12,7 +13,9 @@ interface TooltipProps {
   delay?: number;
 }
 
-const WithTooltip = ({
+const WithTooltip = forwardRef(
+  (
+    {
       tooltip,
       children,
       sideOffset = 5,
@@ -22,7 +25,9 @@ const WithTooltip = ({
       position = 'top',
       maxWidth = 250,
       delay = 0,
-}: TooltipProps) => {
+    }: TooltipProps,
+    _ref: ForwardedRef<HTMLElement>,
+  ) => {
     return (
       <Tooltip.Root delayDuration={delay}>
         <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
@@ -68,6 +73,7 @@ const WithTooltip = ({
         </Tooltip.Portal>
       </Tooltip.Root>
     );
-};
+  },
+);
 
 export default WithTooltip;

app/lib/hooks/useSettings.tsx

@@ -99,6 +99,7 @@ export function useSettings() {
     if (checkCommit === undefined) {
       checkCommit = commit.commit;
     }
+
     if (savedLatestBranch === undefined || checkCommit !== commit.commit) {
       // If setting hasn't been set by user, check version
       checkIsStableVersion().then((isStable) => {