tests/response/large-response-crash-prevention.spec.ts (1)

14-42: Consider adding test.step for better report readability.

Per coding guidelines, wrapping logical sections (create collection, create request, send request, verify warning) in test.step would improve generated report clarity.

packages/bruno-app/src/utils/common/index.js (3)

327-424: Consider extracting duplicated large-response handling logic.

The same pattern appears for html, javascript, and text/raw modes:

if (isVeryLargeResponse) {
  if (typeof data === 'string') { return data; }
  if (data === null || data === undefined) { return String(data); }
  if (typeof data === 'object') { return safeStringifyJSON(data, false); }
  return String(data);
}

Extract to a helper function to reduce duplication:

+const handleLargeResponse = (data) => {
+  if (typeof data === 'string') return data;
+  if (data === null || data === undefined) return String(data);
+  if (typeof data === 'object') return safeStringifyJSON(data, false);
+  return String(data);
+};
+
 // Then use in each mode:
 if (mode.includes('html')) {
-  if (isVeryLargeResponse) {
-    if (typeof data === 'string') {
-      return data;
-    }
-    if (data === null || data === undefined) {
-      return String(data);
-    }
-    if (typeof data === 'object') {
-      return safeStringifyJSON(data, false);
-    }
-    return String(data);
-  }
+  if (isVeryLargeResponse) return handleLargeResponse(data);

---

450-466: Inconsistent function declaration style.

These new functions use function keyword while the rest of the file uses arrow function exports (e.g., export const simpleHash = (str) => {). Consider using arrow functions for consistency.

-export function prettifyHtmlString(htmlString) {
+export const prettifyHtmlString = (htmlString) => {
   if (typeof htmlString !== 'string') return htmlString;
   // ...
-};
+};

---

385-400: Empty string return on error may hide formatting issues.

When hex encoding fails, returning '' silently could confuse users. Consider logging a warning or returning a more informative fallback.

       } catch (stringError) {
-        return '';
+        console.warn('Failed to format hex view:', stringError);
+        return '';
       }
     }
-    return '';
+    console.warn('Failed to format hex view for non-string data');
+    return '';

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/TextPreview.js (1)

3-23: Consider adding a display name for better debugging.

The component uses memo but lacks a displayName, which can make React DevTools harder to navigate.

Apply this diff:

 const TextPreview = memo(({ data }) => {
   const displayData = useMemo(() => {
     if (data === null || data === undefined) {
       return String(data);
     }
     if (typeof data === 'object') {
       try {
         return JSON.stringify(data);
       } catch {
         return String(data);
       }
     }
     return String(data);
   }, [data]);

   return (
     <div className="p-4 font-mono text-[13px] whitespace-pre-wrap break-words overflow-auto overflow-x-hidden w-full max-w-full h-full">
       {displayData}
     </div>
   );
 });

+TextPreview.displayName = 'TextPreview';
+
 export default TextPreview;

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/JsonPreview.js (2)

7-25: Extract helper function outside component for better performance.

The validateJsonData helper is recreated on every render. Since it doesn't depend on props or state, extracting it outside the component body will improve performance.

Apply this diff:

 import React from 'react';
 import ReactJson from 'react-json-view';
 import ErrorAlert from 'components/ErrorAlert/index';

+// Helper function to validate and parse JSON data
+const validateJsonData = (data) => {
+  // If data is already an object or array, use it directly
+  if (typeof data === 'object' && data !== null) {
+    return { data, error: null };
+  }
+
+  // If data is a string, try to parse it
+  if (typeof data === 'string') {
+    try {
+      const parsed = JSON.parse(data);
+      return { data: parsed, error: null };
+    } catch (e) {
+      return { data: null, error: `Invalid JSON format: ${e.message}` };
+    }
+  }
+
+  // For other types, return error
+  return { data: null, error: 'Invalid input. Expected a JSON object, array, or valid JSON string.' };
+};
+
 const JsonPreview = ({ data, displayedTheme }) => {
-  // Helper function to validate and parse JSON data
-  const validateJsonData = (data) => {
-    // If data is already an object or array, use it directly
-    if (typeof data === 'object' && data !== null) {
-      return { data, error: null };
-    }
-
-    // If data is a string, try to parse it
-    if (typeof data === 'string') {
-      try {
-        const parsed = JSON.parse(data);
-        return { data: parsed, error: null };
-      } catch (e) {
-        return { data: null, error: `Invalid JSON format: ${e.message}` };
-      }
-    }
-
-    // For other types, return error
-    return { data: null, error: 'Invalid input. Expected a JSON object, array, or valid JSON string.' };
-  };
-
   // Validate and parse JSON data
   const jsonData = validateJsonData(data);

---

5-61: Consider adding a display name for better debugging.

Adding a displayName will make this component easier to identify in React DevTools.

Add after the component definition:

 const JsonPreview = ({ data, displayedTheme }) => {
   // ... component implementation
 };

+JsonPreview.displayName = 'JsonPreview';
+
 export default JsonPreview;

packages/bruno-app/src/components/ErrorAlert/index.js (2)

13-13: Add error handling for JSON.stringify to prevent crashes.

JSON.stringify will throw if message contains circular references. Since this component handles error display, it should be resilient to malformed input.

Apply this diff:

-          <div className="error-message">{typeof message === 'string' ? message : JSON.stringify(message, null, 2)}</div>
+          <div className="error-message">
+            {typeof message === 'string' ? message : (() => {
+              try {
+                return JSON.stringify(message, null, 2);
+              } catch {
+                return String(message);
+              }
+            })()}
+          </div>

---

9-9: Consider making margins configurable via props.

Hardcoded margin classes (mt-4 mb-2) reduce reusability. Consider accepting a className prop to allow customization when needed.

Example implementation:

-const ErrorAlert = ({ title, message, onClose }) => {
+const ErrorAlert = ({ title, message, onClose, className = 'mt-4 mb-2' }) => {
   if (!message) return null;

   return (
-    <StyledWrapper className="mt-4 mb-2">
+    <StyledWrapper className={className}>

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/VideoPreview.js (1)

1-3: Consolidate React imports.

Minor cleanup: merge the two React import statements.

-import React from 'react';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';

packages/bruno-app/src/components/ErrorAlert/StyledWrapper.js (1)

13-13: Fragile dark theme detection.

Comparing against a hardcoded hex value ('#1e1e1e') is brittle. If the theme's background color changes, this condition breaks.

Consider using a dedicated theme property if available (e.g., props.theme.mode === 'dark') or define the background colors in the theme itself.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/XmlPreview.js (2)

27-32: Move isValidTreeData outside the component.

This function is recreated on every render. Move it to module scope since it doesn't depend on component state or props.

+const isValidTreeData = (data) => {
+  if (data === null || data === undefined) return false;
+  if (typeof data === 'object' && !Array.isArray(data)) return true;
+  if (Array.isArray(data)) return true;
+  return false;
+};
+
 export default function XmlPreview({ data, defaultExpanded = true }) {
   // ...
-  const isValidTreeData = (data) => {
-    if (data === null || data === undefined) return false;
-    if (typeof data === 'object' && !Array.isArray(data)) return true;
-    if (Array.isArray(data)) return true;
-    return false;
-  };

---

175-177: Remove unused variables.

hasArrayValue and arrayLength are declared but never used. Array nodes are handled earlier at lines 82-99.

-  // Determine if this node's value is an array
-  const hasArrayValue = Array.isArray(node);
-  const arrayLength = hasArrayValue ? node.length : 0;

packages/bruno-app/src/components/ButtonDropdown/index.jsx (2)

20-20: Unused dropdownTippyRef - remove or utilize.

The ref is assigned but never read. If intended for programmatic dropdown control (e.g., closing on selection), implement that; otherwise, remove the dead code.

Also applies to: 42-44

---

46-48: Consider inlining handleOptionSelect.

This wrapper only calls onChange without additional logic. Per coding guidelines, avoid single-line abstractions that only increase the call stack.

-  const handleOptionSelect = (optionValue) => {
-    onChange(optionValue);
-  };
...
-                onClick={() => handleOptionSelect(option.value)}
+                onClick={() => onChange(option.value)}

packages/bruno-app/src/utils/response/index.js (1)

213-218: MP4 detection may miss some valid files.

The MP4/MOV ftyp box can have sizes other than 0x18 or 0x20. Consider checking just for the ftyp signature at bytes 4-7 regardless of box size.

-  if (bytes[0] === 0x00 && bytes[1] === 0x00 && bytes[2] === 0x00
-    && (bytes[3] === 0x18 || bytes[3] === 0x20)
-    && bytes[4] === 0x66 && bytes[5] === 0x74 && bytes[6] === 0x79 && bytes[7] === 0x70) {
+  // ftyp box - check signature at offset 4 regardless of box size
+  if (bytes[4] === 0x66 && bytes[5] === 0x74 && bytes[6] === 0x79 && bytes[7] === 0x70) {
     return 'video/mp4';
   }

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js (1)

1-1: useMemo is imported but not used.

Remove unused import to keep the codebase clean.

-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (1)

117-125: Unused responseEncoding in dependency array.

responseEncoding is listed as a dependency but not passed to formatResponse. Either remove from deps or pass it to the function if needed.

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js (1)

53-63: Pretty‑print objects in the text fallback (same as earlier review)

The comment says “render safely as formatted text”, but JSON.stringify(data, null) won’t pretty‑print objects; it produces a single‑line JSON string.

You can pass a spacing argument to improve readability:

-  } else if (typeof data === 'object') {
-    displayContent = JSON.stringify(data, null);
+  } else if (typeof data === 'object') {
+    displayContent = JSON.stringify(data, null, 2);

This matches the intent of a “formatted” safe text fallback without changing behavior for other types.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js (2)

10-28: Tighten MutationObserver usage and avoid redundant state updates

The drag detection works, but observing watchTarget with subtree: true plus unguarded setIsDragging can cause a lot of state churn when classes change frequently.

Consider:

• Deduping updates so React state only changes when the value actually flips.
• Running an initial checkDragging() so isDragging is correct even before the first mutation.

For example:

  useEffect(() => {
    if (!webviewContainerRef.current) return;

    const checkDragging = () => {
-      const hasDraggingParent = webviewContainerRef.current?.closest('.dragging');
-      setIsDragging(!!hasDraggingParent);
+      const hasDraggingParent = !!webviewContainerRef.current?.closest('.dragging');
+      setIsDragging(prev => (prev === hasDraggingParent ? prev : hasDraggingParent));
    };

    const watchTarget = webviewContainerRef.current.closest('[class*="flex"]') || document.body;

    const mutationObserver = new MutationObserver(checkDragging);
    mutationObserver.observe(watchTarget, {
      attributes: true,
      attributeFilter: ['class'],
      subtree: true
    });

+    checkDragging();
+
    return () => mutationObserver.disconnect();
  }, []);

If feasible, also narrowing watchTarget to the smallest container that actually toggles the .dragging class would help keep observer load down.

---

30-36: Guard HTML detection to string data before running validators

Right now isValidHtml(data) || isValidHtmlSnippet(data) is evaluated for any data type. If those utilities are written for strings, it’s safer and a bit cheaper to short‑circuit non‑string values before running HTML heuristics and calling .includes:

-  if (isValidHtml(data) || isValidHtmlSnippet(data)) {
+  if (typeof data === 'string' && (isValidHtml(data) || isValidHtmlSnippet(data))) {

This makes the intent explicit and avoids surprising behavior if non‑string data is ever passed in.

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

packages/bruno-app/src/components/ErrorAlert/StyledWrapper.js (1)

8-8: Use shared theme border radius instead of literal rem

border-radius: 0.375rem; should likely use the base radius from the theme (whatever the canonical token is here) for consistency with the rest of the design system, instead of an inline rem value. Based on learnings, surface radii should come from theme tokens.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js (1)

57-58: Add indentation argument to JSON.stringify for readable output.

The fallback text rendering stringifies objects without indentation, making complex objects harder to read.

   } else if (typeof data === 'object') {
-    displayContent = JSON.stringify(data, null);
+    displayContent = JSON.stringify(data, null, 2);
   }

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/XmlPreview.js (1)

228-262: DOM manipulation bypasses React reconciliation.

The array collapse/expand logic uses direct DOM queries (parentElement.querySelector, classList.toggle) instead of React state. Extract this into a separate component with its own useState for expansion control, consistent with how XmlNode handles expansion.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js (1)

87-88: Add alt attribute for accessibility.

The image element is missing an alt attribute, which is required for screen readers.

-      return <img src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} />;
+      return <img src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} alt="Response preview" />;

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (3)

107-115: Condition detectedContentType !== undefined is always true.

detectContentTypeFromBuffer returns string | null, never undefined. The check should be !== null or simplified.

   useEffect(() => {
-    if (isInitialRun && (detectedContentType !== undefined && contentType !== undefined)) {
+    if (isInitialRun && contentType !== undefined) {
       const initial = getDefaultResponseFormat(contentType);
       setSelectedFormat(initial.format);
       setSelectedTab(initial.tab);
       setIsInitialRun(false);
     }
-  }, [contentType, isInitialRun, detectedContentType]);
+  }, [contentType, isInitialRun]);

---

131-150: Add fallback return and fix dependencies.

The useMemo can implicitly return undefined if selectedFormat is unexpected. Also, contentType is in the dependency array but detectedContentType is what's actually used.

       // for all other content types, return preview-text
       return 'preview-text';
     }
-  }, [selectedFormat, contentType, dataBuffer]);
+    return 'preview-text'; // fallback for unexpected formats
+  }, [selectedFormat, detectedContentType]);

---

168-178: Missing dependencies in useMemo.

previewFormatOptions, handleFormatChange, and onPreviewTabSelect are referenced but not in the dependency array, which can cause stale closures.

-  }, [selectedFormat, selectedTab]);
+  }, [selectedFormat, selectedTab, previewFormatOptions, handleFormatChange, onPreviewTabSelect]);

Alternatively, wrap handleFormatChange and onPreviewTabSelect in useCallback to stabilize their references.

packages/bruno-app/src/components/ErrorAlert/StyledWrapper.js (2)

4-13: Avoid hard‑coded theme.bg comparison for background color

Branching on props.theme.bg === '#1e1e1e' is brittle and couples this component to a specific dark theme implementation. Prefer a dedicated theme token (e.g. per‑mode background or an errorAlert surface color) so future theme changes don’t require touching this component. Based on learnings, theme props should encapsulate color decisions rather than magic hex checks.

---

34-39: Revisit word-break: break-all for error message readability

word-break: break-all will split words arbitrarily, which can hurt readability for typical error text. If the primary concern is long tokens (e.g. stack traces, UUIDs), consider overflow-wrap: anywhere or word-break: break-word to keep long segments wrapping without aggressively breaking normal words.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js (1)

43-48: Consider hardening webview security preferences.

Explicitly disabling Node integration adds defense in depth for rendering untrusted HTML content.

         <webview
           src={`data:text/html; charset=utf-8,${encodeURIComponent(htmlContent)}`}
-          webpreferences="disableDialogs=true, javascript=yes"
+          webpreferences="disableDialogs=true, javascript=yes, nodeIntegration=no, contextIsolation=yes"
           className="h-full bg-white"
           style={dragStyles}
         />

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/XmlPreview.js (1)

27-32: Move helper function outside component body.

isValidTreeData is redefined on every render. Extract it to module scope since it has no dependencies on component state or props.

+const isValidTreeData = (data) => {
+  if (data === null || data === undefined) return false;
+  if (typeof data === 'object' && !Array.isArray(data)) return true;
+  if (Array.isArray(data)) return true;
+  return false;
+};
+
 export default function XmlPreview({ data, defaultExpanded = true }) {
   // Parse XML string
   const parsedData = useMemo(() => {
     // ...
   }, [data]);

   // Check for parsing error
   if (parsedData && typeof parsedData === 'object' && parsedData.error) {
     // ...
   }

-  // Validate that data can be rendered as a tree
-  const isValidTreeData = (data) => {
-    if (data === null || data === undefined) return false;
-    if (typeof data === 'object' && !Array.isArray(data)) return true;
-    if (Array.isArray(data)) return true;
-    return false;
-  };
-
   if (!isValidTreeData(parsedData)) {

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js (1)

1-1: Remove unused import.

useMemo is imported but not used in this file.

-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (1)

117-125: Remove unused dependency responseEncoding.

responseEncoding is in the dependency array but not used in the memoized function.

-    [data, dataBuffer, responseEncoding, selectedFormat, filter, isLargeResponse, showLargeResponse]
+    [data, dataBuffer, selectedFormat, filter, isLargeResponse, showLargeResponse]

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components should be used as wrappers to define both self and children component styles; Tailwind classes should be used specifically for layout-based styles

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS may change layout, but Tailwind classes should not define colors

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : In styled components and React components using styled components, use the theme prop to manage CSS colors instead of CSS variables

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js (1)

57-67: Prettify object fallback with JSON.stringify indentation

Right now objects are rendered on a single line because JSON.stringify(data, null) omits the spacing argument. Adding an indentation level will better match the “formatted text” comment and keep output readable.

-  } else if (typeof data === 'object') {
-    displayContent = JSON.stringify(data, null);
+  } else if (typeof data === 'object') {
+    displayContent = JSON.stringify(data, null, 2);

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (2)

46-68: Condition checks undefined but function returns null.

detectContentTypeFromBuffer returns string | null, never undefined. The check on line 61 (detectedContentType === undefined) will never be true, making this condition ineffective.

-    if (detectedContentType === undefined || contentType === undefined) {
+    if (detectedContentType === null && contentType === undefined) {
       return { initialFormat: null, initialTab: null };
     }

Alternatively, if the intent is to wait for valid content type detection, consider !detectedContentType && !contentType.

---

165-184: Missing explicit return and incorrect dependency.

This useMemo can return undefined implicitly if no condition matches (though current logic covers all cases). Also, contentType is in the dependency array but detectedContentType is what's actually used for binary format detection.

       return 'preview-text';
     }
+    return 'preview-text'; // fallback for any unhandled case
-  }, [selectedFormat, contentType, dataBuffer]);
+  }, [selectedFormat, detectedContentType]);

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js (1)

1-13: Consider consolidating .active styling.

The .active class here duplicates the same styling rule in the parent QueryResult/StyledWrapper.js (line 34-36). If the selector component is always nested within QueryResult, the parent's .active rule should cascade. Evaluate if this duplication is necessary for scoping or can be removed.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js (1)

34-38: Consider more robust <head> injection for complex HTML

data.includes('<head>') only catches the exact lowercase token with no attributes; documents with <head> variants (e.g. <head lang="en">, uppercase tags) will be treated as snippets and get a prepended <head>...</head>, which is a bit fragile. You could tighten this later with a case‑insensitive regex on <head[^>]*> if you see real‑world HTML where this matters.

packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/StyledWrapper.js (1)

3-5: Remove empty StyledWrapper or add styles.

An empty styled component adds no value and increases bundle size. If styling is planned for future iterations, add a TODO comment; otherwise, remove this wrapper and render the component directly.

Apply this diff if no styling is needed:

-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-
-`;
-
-export default StyledWrapper;

Then update the consuming component (ResponsePaneActions/index.js) to remove the StyledWrapper import and usage.

packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js (1)

19-27: Consider initializing state from hooks to prevent flicker.

The state is initialized to hardcoded defaults ('raw', 'editor') and updated via useEffect. If initialFormat/initialTab are computed asynchronously, the component renders with incorrect defaults first, potentially causing visual flicker.

Consider initializing state directly from the hooks:

-  const [selectedFormat, setSelectedFormat] = useState('raw');
-  const [selectedTab, setSelectedTab] = useState('editor');
-
-  useEffect(() => {
-    if (initialFormat !== null && initialTab !== null) {
-      setSelectedFormat(initialFormat);
-      setSelectedTab(initialTab);
-    }
-  }, [initialFormat, initialTab]);
+  const [selectedFormat, setSelectedFormat] = useState(initialFormat ?? 'raw');
+  const [selectedTab, setSelectedTab] = useState(initialTab ?? 'editor');

If initialFormat/initialTab update after mount, add the useEffect back to sync changes.

packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js (1)

53-65: Consider adding aria-disabled for better accessibility.

The outer div acts as a button with role="button" and receives focus, but when !hasData, clicks and key presses are silently ignored. Screen readers may still announce the element as interactive.

Apply this diff to improve accessibility:

-    <div role="button" tabIndex={0} onClick={handleClick} title={!children ? 'Copy response to clipboard' : null} onKeyDown={handleKeyDown}>
+    <div 
+      role="button" 
+      tabIndex={hasData ? 0 : -1} 
+      onClick={handleClick} 
+      title={!children ? 'Copy response to clipboard' : null} 
+      onKeyDown={handleKeyDown}
+      aria-disabled={!hasData}
+    >

This prevents focus on the disabled state and properly announces the disabled status to assistive technologies.

packages/bruno-app/src/components/ResponsePane/ResponseDownload/index.js (2)

17-26: Unused Promise return value.

saveResponseToFile returns a Promise, but callers (onClick, handleKeyDown) ignore it. Either remove the return statement or use async/await to handle potential errors consistently.

 const saveResponseToFile = () => {
   if (isDisabled) {
     return;
   }
-  return new Promise((resolve, reject) => {
-    ipcRenderer
-      .invoke('renderer:save-response-to-file', response, item?.requestSent?.url, item.pathname)
-      .then(resolve)
-      .catch((err) => {
-        toast.error(get(err, 'error.message') || 'Something went wrong!');
-        reject(err);
-      });
-  });
+  ipcRenderer
+    .invoke('renderer:save-response-to-file', response, item?.requestSent?.url, item.pathname)
+    .catch((err) => {
+      toast.error(get(err, 'error.message') || 'Something went wrong!');
+    });
 };

---

52-58: Nested interactive elements cause accessibility issues.

A <button> inside a <div role="button"> creates confusing semantics for assistive technologies. Since the outer <div> handles click/keyboard events, the inner button is redundant.

     {children ? children : (
       <StyledWrapper className="flex items-center">
-        <button className="p-1">
+        <span className="p-1">
           <IconDownload size={16} strokeWidth={2} />
-        </button>
+        </span>
       </StyledWrapper>
     )}

packages/bruno-app/src/components/ResponsePane/ResponseClear/index.js (2)

27-31: Inconsistent keyboard event handling.

Unlike ResponseDownload and ResponseBookmark, this handler doesn't call e.preventDefault() for Enter/Space. This could cause unintended form submission if used in a form context.

 const handleKeyDown = (e) => {
   if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault();
     clearResponse();
   }
 };

---

35-41: Nested interactive elements cause accessibility issues.

Same issue as ResponseDownload — a <button> inside a <div role="button"> is semantically redundant and confusing for assistive technologies.

     {children ? children : (
       <StyledWrapper className="flex items-center">
-        <button className="p-1">
+        <span className="p-1">
           <IconEraser size={16} strokeWidth={2} />
-        </button>
+        </span>
       </StyledWrapper>
     )}

packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js (3)

53-72: Redundant disabled check.

The isDisabled check at lines 68-72 is unnecessary — isDisabled is derived from isResponseTooLarge || isStreamingResponse, and you've already handled isResponseTooLarge above. The streaming case is unreachable here since isDisabled would have been caught by click handler being skipped.

   if (isResponseTooLarge) {
     toast.error('Response size exceeds 5MB limit. Cannot save as example.');
     e.preventDefault();
     e.stopPropagation();
     return;
   }

-  if (isDisabled) {
-    e.preventDefault();
-    e.stopPropagation();
-    return;
-  }
+  if (isStreamingResponse) {
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }

---

148-150: Complex ternary for title attribute.

The logic is functionally correct but hard to parse. Consider simplifying.

       title={
-        !children ? disabledMessage : (isDisabled ? disabledMessage : null)
+        (!children || isDisabled) ? disabledMessage : null
       }

This shows the intent more clearly: show the message when there are no children OR when disabled.

---

156-162: Nested interactive elements cause accessibility issues.

Same pattern as other action components — a <button> inside a <div role="button"> is problematic. Replace with a non-interactive element.

       {children ?? (
         <StyledWrapper className="flex items-center">
-          <button className="p-1">
+          <span className="p-1">
             <IconBookmark size={16} strokeWidth={2} />
-          </button>
+          </span>
         </StyledWrapper>
       )}

packages/bruno-app/src/components/ResponsePane/index.js (1)

206-212: Arrow functions recreated on every render.

The inline arrow functions for onFormatChange and onPreviewTabSelect create new function references each render. For a component this size, it's unlikely to cause performance issues, but memoization would be cleaner.

packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js (1)

91-104: Unnecessary ResizeObserver recreation on item change.

The item in the dependency array causes the ResizeObserver to disconnect and reconnect whenever the item prop changes. Since checkSpace only reads DOM dimensions and doesn't depend on item data, this is wasteful.

 useEffect(() => {
   checkSpace();

   const rightSideContainer = actionsRef.current?.closest('.right-side-container');
   if (!rightSideContainer) return;

   const resizeObserver = new ResizeObserver(debouncedCheckSpace);
   resizeObserver.observe(rightSideContainer);

   return () => {
     resizeObserver.disconnect();
     debouncedCheckSpace.cancel();
   };
-}, [item, debouncedCheckSpace]);
+}, [debouncedCheckSpace]);

packages/bruno-app/src/components/ResponsePane/ResponseLayoutToggle/index.js (1)

75-79: Consider preventing default on Space key.

The keyboard handler follows the pattern from ResponseCopy and ResponseClear. However, Space key may cause page scroll. Adding e.preventDefault() would ensure consistent behavior.

   const handleKeyDown = (e) => {
     if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
       toggleOrientation();
     }
   };

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (2)

46-68: Duplicate Buffer conversion logic across three locations.

The same Buffer.from(dataBuffer, 'base64') with try-catch appears in useInitialResponseFormat, useResponsePreviewFormatOptions, and the QueryResult component body. Extract this to a shared utility or custom hook.

// Consider a helper function in utils or a local helper
const safeBufferFromBase64 = (dataBuffer) => {
  if (!dataBuffer) return null;
  try {
    return Buffer.from(dataBuffer, 'base64');
  } catch (error) {
    console.error('Error converting dataBuffer to Buffer:', error);
    return null;
  }
};

Also applies to: 70-105, 118-125

---

156-158: Unused responseEncoding in dependency array.

responseEncoding is listed as a dependency but isn't used in the formattedData memo body.

-    [data, dataBuffer, responseEncoding, selectedFormat, filter, isLargeResponse, showLargeResponse]
+    [data, dataBuffer, selectedFormat, filter, isLargeResponse, showLargeResponse]

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS may change layout, but Tailwind classes should not define colors

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components should be used as wrappers to define both self and children component styles; Tailwind classes should be used specifically for layout-based styles

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : In styled components and React components using styled components, use the theme prop to manage CSS colors instead of CSS variables

Learnt from: sid-bruno
Repo: usebruno/bruno PR: 6266
File: packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js:38-38
Timestamp: 2025-12-02T09:45:31.698Z
Learning: In the ResponseCopy component (packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js), the copy button is intentionally disabled using `!response.data` to prevent copying stream resets which result in empty strings.

packages/bruno-app/src/components/ErrorAlert/StyledWrapper.js (1)

8-8: Prefer theme radius token instead of hard-coded border-radius

border-radius: 0.375rem; should ideally use the shared radius token from the theme (e.g. whatever the base/small radius is) for consistency with the rest of the design system.

tests/utils/page/actions.ts (1)

542-566: switchToEditorTab still clicks the preview tab

switchToEditorTab is currently identical to switchToPreviewTab and still clicks preview-response-tab, so it doesn’t actually ensure the editor view is active and makes tests misleading.

Update switchToEditorTab to target the editor control (whatever test id represents it) or otherwise distinguish its behavior from the preview helper.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js (1)

87-88: Add alt attribute to image for accessibility.

Missing alt attribute on the image element.

-      return <img src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} />;
+      return <img src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} alt="Response preview" />;

packages/bruno-app/src/components/ResponsePane/ResponseLayoutToggle/index.js (1)

91-100: Nested interactive elements create accessibility issues.

The outer <div> with role="button" wraps a <button> (line 93). This creates nested interactive elements which is problematic for screen readers and keyboard navigation.

       {children ? children : (
         <StyledWrapper className="flex items-center w-full">
-          <button className="p-1">
+          <span className="p-1">
             {orientation === 'horizontal' ? (
               <IconDockToBottom />
             ) : (
               <IconDockToRight />
             )}
-          </button>
+          </span>
         </StyledWrapper>
       )}

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (3)

186-190: Fallback CodeMirror mode is non-standard.

'application/text' is not a valid MIME type. Use 'text/plain' instead.

-      .find((option) => option.value === selectedFormat)?.codeMirrorMode || 'application/text';
+      .find((option) => option.value === selectedFormat)?.codeMirrorMode || 'text/plain';

---

86-88: isByteFormatType will throw if contentType is null.

If getContentTypeToCheck() returns null, calling .includes() on it will throw a TypeError.

     const isByteFormatType = (contentType) => {
+      if (!contentType) return false;
       return byteFormatTypes.some((type) => contentType.includes(type));
     };

---

165-184: Missing fallback return and incorrect dependency.

The useMemo can return undefined implicitly. Also, contentType is in the dependency array but detectedContentType (which is actually used) is not.

       // for all other content types, return preview-text
       return 'preview-text';
     }
+    return 'preview-text'; // fallback for unhandled formats
-  }, [selectedFormat, contentType, dataBuffer]);
+  }, [selectedFormat, detectedContentType]);

packages/bruno-app/src/components/ErrorAlert/index.js (1)

5-22: Solid ErrorAlert implementation; consider minor refinements for message handling and accessibility

Overall component behavior looks good and fits the existing styling approach.

Two small, optional polish points:

• Line 6: if (!message) return null will also hide intentionally falsy-but-valid values (e.g. 0, false). If you ever expect those, you might want a stricter check like message == null instead.
• Lines 13 & 15–18: For non‑string messages, JSON.stringify works for plain objects but will produce {} for Error instances and can throw on circular structures. Also, the close affordance is a div with onClick; switching to a <button type="button"> with an aria-label would improve accessibility and keyboard operability.

These are non-blocking; fine to defer if they don’t match current usage.

packages/bruno-app/src/components/ErrorAlert/StyledWrapper.js (1)

13-13: Consider moving background colors to theme tokens instead of hard-coded RGBA

The conditional background:

background-color: ${(props) => (props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.5)' : 'rgba(250, 250, 250, 0.9)')};

relies on a specific hex and literal RGBA values. Wiring these through semantic theme tokens (e.g. dedicated surface/alert background colors) would make it easier to adjust themes and avoid coupling to a single bg hex value.

Based on learnings, using theme-driven colors in styled components keeps them consistent across themes.

tests/utils/page/actions.ts (4)

472-479: Avoid keeping commented-out legacy openRequest

If the old, request-only openRequest is no longer needed, you can drop this commented block and rely on git history instead of keeping dead code in the helper file.

---

480-494: Restore a post-condition assertion and consider centralizing locators

The new openRequest(page, collectionName, requestName) correctly scopes the request to its collection, but you dropped the previous assertion that the active request tab matches requestName. Re‑adding that check would make tests more robust and keep failures localized.

You might also consider factoring this DOM traversal into buildCommonLocators (e.g., a sidebar.collectionRequest(collectionName, requestName) helper) so selectors live in one place.

---

510-527: Merge default timeout with overrides or delegate to sendRequest

sendRequestAndWaitForResponse is handy, but callers that pass { ignoreCase: true } lose the default timeout: 15000. Either:

• Merge options with a default inside the function, e.g. const finalOptions = { timeout: 15000, ...options }, or
• Delegate to sendRequest to keep a single place that clicks “send” and waits for the status element.

This avoids subtle differences in behavior and duplicated logic.

---

529-540: Optional: tighten typing for format

Implementation looks fine. If you already have a central enum/union for response formats, consider typing format as that union instead of string to catch typos at compile time.

packages/bruno-app/src/components/ResponsePane/ResponseDownload/index.js (3)

9-11: Consider hardening against missing ipcRenderer / item in non‑Electron contexts

Destructuring const { ipcRenderer } = window and assuming item is always defined will throw in tests or any non‑Electron environment that mounts this component. If this component can be rendered in such contexts, consider guarding:

• Use const ipcRenderer = window?.ipcRenderer and early‑return (or no‑op + warning) when it’s absent
• Optionally use const response = item?.response || {} and item?.pathname for a bit more safety

This stays cheap at runtime while making the component more robust to accidental reuse.

---

13-26: Avoid wrapping ipcRenderer.invoke in a manual Promise and improve error extraction

ipcRenderer.invoke already returns a Promise, so the extra new Promise wrapper is unnecessary. You can simplify and keep the same behavior:

-  const saveResponseToFile = () => {
-    if (isDisabled) {
-      return;
-    }
-    return new Promise((resolve, reject) => {
-      ipcRenderer
-        .invoke('renderer:save-response-to-file', response, item?.requestSent?.url, item.pathname)
-        .then(resolve)
-        .catch((err) => {
-          toast.error(get(err, 'error.message') || 'Something went wrong!');
-          reject(err);
-        });
-    });
-  };
+  const saveResponseToFile = () => {
+    if (isDisabled) {
+      return;
+    }
+
+    return ipcRenderer
+      .invoke('renderer:save-response-to-file', response, item?.requestSent?.url, item.pathname)
+      .catch((err) => {
+        const message =
+          get(err, 'message') ||
+          get(err, 'error.message') ||
+          'Something went wrong!';
+        toast.error(message);
+        throw err;
+      });
+  };

This removes a Promise anti‑pattern and also makes the error message more resilient if the rejection is a plain Error.

---

28-38: Clean up button semantics to avoid nested interactive controls

Right now the outer element is a div with role="button" / tabIndex and keyboard handling, but the default UI also renders a nested <button>. This leads to:

• Two focusable/interactive elements (outer div and inner button) for a single action
• Confusing semantics for assistive tech and an extra tab stop

Since the outer div is already the interactive surface, you can drop the inner <button> and keep the click/keyboard logic on the wrapper:

-      className={classnames({
-        'opacity-50 cursor-not-allowed': isDisabled
-      })}
+      className={classnames({
+        'opacity-50 cursor-not-allowed': isDisabled
+      })}
     >
-      {children ? children : (
-        <StyledWrapper className="flex items-center">
-          <button className="p-1">
-            <IconDownload size={16} strokeWidth={2} />
-          </button>
-        </StyledWrapper>
-      )}
+      {children ? children : (
+        <StyledWrapper className="flex items-center p-1">
+          <IconDownload size={16} strokeWidth={2} />
+        </StyledWrapper>
+      )}

This keeps the existing visual structure and keyboard behavior while avoiding nested interactive controls.

Also applies to: 40-59

packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js (1)

43-185: Responsive actions bar logic looks solid

The measurement logic (siblings + padding) with a debounced ResizeObserver and the showMenuRef/individualButtonsWidthRef pattern avoids stale state and flicker when switching between inline buttons and the overflow menu. The early return for non‑http-request items also keeps this scoped to HTTP responses.

If you ever need this to run in environments without ResizeObserver (e.g., some tests), a small feature check around its usage would make it even more robust, but it isn’t a blocker for an Electron app.

packages/bruno-app/src/utils/common/index.js (1)

7-9: New formatting pipeline (HTML/JS/hex/base64/text) looks coherent, with minor perf nits

Overall this extension of formatResponse and the new helpers hangs together well:

• getContentType’s JAVASCRIPT_PATTERN and mapping to 'application/javascript' aligns with the new JavaScript mode handling elsewhere.
• The html and javascript branches both honor isVeryLargeResponse before attempting pretty‑printing, and fall back cleanly to the original string if formatting fails.
• Hex handling (mode.includes('hex')) correctly avoids re-encoding strings already detected as hex via isHexFormat, and otherwise generates a standard hex+ASCII dump using formatHexView.
• The text/raw branch reuses rawData for small responses and falls back to type-aware stringification for large payloads, matching the intent to avoid decoding very large buffers.

Two small, non-blocking nits you might consider (now or later):

• For very large but still <50MB payloads, pretty‑printing JS/HTML or generating a full hex dump can still be expensive; if you see UI stalls in practice, it may be worth introducing a lower, format-specific threshold (especially for the hex view).
• In the hex branch, you could potentially reuse the already-decoded buffer from the top of formatResponse instead of re‑decoding dataBufferString, but that’s a micro-optimization and not required for correctness.

Nothing here looks functionally off; the behavior matches the new preview modes.

Also applies to: 105-116, 273-422, 466-557

packages/bruno-app/src/components/ResponsePane/index.js (1)

19-22: Response format/tab wiring and header layout look consistent

The new state + hooks flow is clean:

• useInitialResponseFormat / useResponsePreviewFormatOptions are wired with item.response?.dataBuffer and headers, and the effect only initializes selectedFormat / selectedTab once valid initial values are available—so user changes aren’t overwritten on re-render.
• Passing selectedFormat and selectedTab into QueryResult gives the preview pipeline the context it needs without bloating props elsewhere.
• The header’s right-side container nicely groups the preview selector, status (code/time/size), and actions, and only shows the selector when the Response tab is focused and the pane isn’t loading.

One minor UI edge case to be aware of: for non‑http-request items with a successful response, the parent still renders the actions container, but ResponsePaneActions will early-return null, leaving an empty actions area between separators. If that ever becomes visible for WebSocket or other request types, a parent-level type check before rendering the actions block would tidy it up.

Also applies to: 34-47, 85-103, 173-238

packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js (1)

53-72: Redundant and inefficient guard checks.

The isResponseTooLarge check (lines 61-66) is redundant since isDisabled already encompasses it. Additionally, the isDisabled check (lines 68-72) should be at the top to short-circuit before showing individual error toasts.

   const handleSaveClick = (e) => {
+    if (isDisabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
     if (!response || response.error) {
       toast.error('No valid response to save as example');
       e.preventDefault();
       e.stopPropagation();
       return;
     }
 
-    if (isResponseTooLarge) {
-      toast.error('Response size exceeds 5MB limit. Cannot save as example.');
-      e.preventDefault();
-      e.stopPropagation();
-      return;
-    }
-
-    if (isDisabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return;
-    }
-
     setShowSaveResponseExampleModal(true);
   };

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js (1)

1-1: Remove unused useMemo import.

useMemo is imported but never used in this file.

-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/XmlPreview.js (2)

182-188: Consider keyboard accessibility for expand/collapse buttons.

Using tabIndex={-1} removes these buttons from keyboard navigation. While focus is managed through the parent, users relying solely on keyboard may not be able to expand/collapse individual nodes.

Consider using tabIndex={0} and adding keyboard event handling for Enter/Space to toggle expansion.

---

27-32: Move isValidTreeData outside component.

This function is recreated on every render. Since it has no dependencies on component state or props, move it outside the component.

+const isValidTreeData = (data) => {
+  if (data === null || data === undefined) return false;
+  if (typeof data === 'object' && !Array.isArray(data)) return true;
+  if (Array.isArray(data)) return true;
+  return false;
+};
+
 export default function XmlPreview({ data, defaultExpanded = true }) {
   // ...
-  const isValidTreeData = (data) => {
-    if (data === null || data === undefined) return false;
-    if (typeof data === 'object' && !Array.isArray(data)) return true;
-    if (Array.isArray(data)) return true;
-    return false;
-  };

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (1)

46-68: Consider extracting duplicate buffer conversion logic.

The Buffer.from(dataBuffer, 'base64') conversion with try-catch is repeated in useInitialResponseFormat, useResponsePreviewFormatOptions, and in the component itself. Extract to a shared utility.

// utils/buffer.js or inline helper
const safeBase64ToBuffer = (dataBuffer) => {
  if (!dataBuffer) return null;
  try {
    return Buffer.from(dataBuffer, 'base64');
  } catch (error) {
    console.error('Error converting dataBuffer to Buffer:', error);
    return null;
  }
};

Also applies to: 71-105, 118-124

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro