fix(explorer): Hover state fixes (#102372)

Prevents conflicting focus between input area and hover focus on blocks.
If you type, the hovering won't steal focus. If you hover, the input
won't appear focused.
(address Josh's feedback)

Author: roaga

static/app/views/seerExplorer/explorerPanel.tsx

@@ -18,7 +18,7 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
 
   const [inputValue, setInputValue] = useState('');
   const [focusedBlockIndex, setFocusedBlockIndex] = useState(-1); // -1 means input is focused
-  const [showSlashCommands, setShowSlashCommands] = useState(false);
+  const [isSlashCommandsVisible, setIsSlashCommandsVisible] = useState(false);
   const [isMinimized, setIsMinimized] = useState(false); // state for slide-down
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -27,6 +27,7 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
     Map<number, (key: 'Enter' | 'ArrowUp' | 'ArrowDown') => boolean>
   >(new Map());
   const panelRef = useRef<HTMLDivElement>(null);
+  const hoveredBlockIndex = useRef<number>(-1);
 
   // Custom hooks
   const {panelSize, handleMaxSize, handleMedSize} = usePanelSizing();
@@ -112,6 +113,32 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
     blockRefs.current = blockRefs.current.slice(0, blocks.length);
   }, [blocks]);
 
+  // Auto-focus input when user starts typing while a block is focused
+  useEffect(() => {
+    if (!isVisible) {
+      return undefined;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (focusedBlockIndex !== -1) {
+        const isPrintableChar =
+          e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
+
+        if (isPrintableChar) {
+          e.preventDefault();
+          setFocusedBlockIndex(-1);
+          textareaRef.current?.focus();
+          setInputValue(prev => prev + e.key);
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isVisible, focusedBlockIndex]);
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Escape' && isPolling && !interruptRequested) {
       e.preventDefault();
@@ -139,10 +166,6 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
       textareaRef.current?.focus();
     }
 
-    // Check if we should show slash commands
-    const shouldShow = value.startsWith('/') && !value.includes(' ') && value.length > 1;
-    setShowSlashCommands(shouldShow);
-
     // Auto-resize textarea
     const textarea = e.target;
     textarea.style.height = 'auto';
@@ -155,6 +178,7 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
   };
 
   const handleInputClick = () => {
+    hoveredBlockIndex.current = -1;
     setFocusedBlockIndex(-1);
     textareaRef.current?.focus();
     setIsMinimized(false);
@@ -168,20 +192,15 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
     // Execute the command
     command.handler();
 
-    // Clear input and hide slash commands
+    // Clear input
     setInputValue('');
-    setShowSlashCommands(false);
 
     // Reset textarea height
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto';
     }
   };
 
-  const handleSlashCommandsClose = () => {
-    setShowSlashCommands(false);
-  };
-
   const panelContent = (
     <PanelContainers
       ref={panelRef}
@@ -206,7 +225,23 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
               isFocused={focusedBlockIndex === index}
               isPolling={isPolling}
               onClick={() => handleBlockClick(index)}
-              onMouseEnter={() => setFocusedBlockIndex(index)}
+              onMouseEnter={() => {
+                // Don't change focus while slash commands menu is open or if already on this block
+                if (isSlashCommandsVisible || hoveredBlockIndex.current === index) {
+                  return;
+                }
+
+                hoveredBlockIndex.current = index;
+                setFocusedBlockIndex(index);
+                if (document.activeElement === textareaRef.current) {
+                  textareaRef.current?.blur();
+                }
+              }}
+              onMouseLeave={() => {
+                if (hoveredBlockIndex.current === index) {
+                  hoveredBlockIndex.current = -1;
+                }
+              }}
               onDelete={() => deleteFromIndex(index)}
               onNavigate={() => setIsMinimized(true)}
               onRegisterEnterHandler={handler => {
@@ -220,14 +255,13 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
         ref={textareaRef}
         inputValue={inputValue}
         focusedBlockIndex={focusedBlockIndex}
-        showSlashCommands={showSlashCommands}
         isPolling={isPolling}
         interruptRequested={interruptRequested}
         onInputChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onInputClick={handleInputClick}
         onCommandSelect={handleCommandSelect}
-        onSlashCommandsClose={handleSlashCommandsClose}
+        onSlashCommandsVisibilityChange={setIsSlashCommandsVisible}
         onMaxSize={handleMaxSize}
         onMedSize={handleMedSize}
         onClear={startNewSession}

static/app/views/seerExplorer/inputSection.tsx

@@ -17,8 +17,7 @@ interface InputSectionProps {
   onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
   onMaxSize: () => void;
   onMedSize: () => void;
-  onSlashCommandsClose: () => void;
-  showSlashCommands: boolean;
+  onSlashCommandsVisibilityChange: (isVisible: boolean) => void;
   ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
@@ -32,7 +31,7 @@ function InputSection({
   onKeyDown,
   onInputClick,
   onCommandSelect,
-  onSlashCommandsClose,
+  onSlashCommandsVisibilityChange,
   onMaxSize,
   onMedSize,
   ref,
@@ -56,7 +55,7 @@ function InputSection({
         <SlashCommands
           inputValue={inputValue}
           onCommandSelect={onCommandSelect}
-          onClose={onSlashCommandsClose}
+          onVisibilityChange={onSlashCommandsVisibilityChange}
           onMaxSize={onMaxSize}
           onMedSize={onMedSize}
           onClear={onClear}

static/app/views/seerExplorer/slashCommands.tsx

@@ -13,19 +13,19 @@ export interface SlashCommand {
 interface SlashCommandsProps {
   inputValue: string;
   onClear: () => void;
-  onClose: () => void;
   onCommandSelect: (command: SlashCommand) => void;
   onMaxSize: () => void;
   onMedSize: () => void;
+  onVisibilityChange?: (isVisible: boolean) => void;
 }
 
 function SlashCommands({
   inputValue,
   onCommandSelect,
-  onClose,
   onMaxSize,
   onMedSize,
   onClear,
+  onVisibilityChange,
 }: SlashCommandsProps) {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const openFeedbackForm = useFeedbackForm();
@@ -86,6 +86,11 @@ function SlashCommands({
     setSelectedIndex(0);
   }, [filteredCommands]);
 
+  // Notify parent when visibility changes
+  useEffect(() => {
+    onVisibilityChange?.(showSuggestions);
+  }, [showSuggestions, onVisibilityChange]);
+
   // Handle keyboard navigation with higher priority
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
@@ -109,16 +114,11 @@ function SlashCommands({
             onCommandSelect(filteredCommands[selectedIndex]);
           }
           break;
-        case 'Escape':
-          e.preventDefault();
-          e.stopPropagation();
-          onClose();
-          break;
         default:
           break;
       }
     },
-    [showSuggestions, selectedIndex, filteredCommands, onCommandSelect, onClose]
+    [showSuggestions, selectedIndex, filteredCommands, onCommandSelect]
   );
 
   useEffect(() => {
@@ -162,7 +162,7 @@ const SuggestionsPanel = styled('div')`
   border-bottom: none;
   border-radius: ${p => p.theme.borderRadius};
   box-shadow: ${p => p.theme.dropShadowHeavy};
-  max-height: 200px;
+  max-height: 500px;
   overflow-y: auto;
   z-index: 10;
 `;