fix(seer): use standard hotkey for minimize behavior, remove tab hijacking (#112993)

Seer panel currently hijacks the `Tab` key to act as a hotkey when the
panel is minimized, breaking keyboard-based navigation. Since `Tab` is
the native "move focus" keybinding, keyboard users are effectively
trapped in the Seer panel with no way to navigate to other focusable
elements on the page.

This PR updates the implementation to use the normal `Cmd+/` keybinding
to open the panel when it's minimized. It also removes the stateful
placeholder since typing any message will refocus the textarea.

Author: natemoo-re

static/app/views/seerExplorer/explorerPanel.tsx

@@ -50,7 +50,12 @@ import {
 } from 'sentry/views/seerExplorer/utils';
 
 export function ExplorerPanel() {
-  const {isOpen: isVisible, openExplorerPanel} = useExplorerPanel();
+  const {
+    isOpen: isVisible,
+    openExplorerPanel,
+    isMinimized,
+    setIsMinimized,
+  } = useExplorerPanel();
   const {getPageReferrer} = usePageReferrer();
   const organization = useOrganization({allowNull: true});
   const {projects} = useProjects();
@@ -61,7 +66,6 @@ export function ExplorerPanel() {
 
   const [inputValue, setInputValue] = useState('');
   const [focusedBlockIndex, setFocusedBlockIndex] = useState(-1); // -1 means input is focused
-  const [isMinimized, setIsMinimized] = useState(false); // state for slide-down
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const blockRefs = useRef<Array<HTMLDivElement | null>>([]);
@@ -132,7 +136,7 @@ export function ExplorerPanel() {
     switchToRun,
     sessionRunId: runId ?? undefined,
     sessionBlocks: sessionData?.blocks,
-    onUnminimize: useCallback(() => setIsMinimized(false), []),
+    onUnminimize: useCallback(() => setIsMinimized(false), [setIsMinimized]),
   });
 
   // Extract repo_pr_states from session
@@ -184,7 +188,20 @@ export function ExplorerPanel() {
         textareaRef.current?.focus();
       }, 100);
     }
-  }, [isVisible]);
+  }, [isVisible, setIsMinimized]);
+
+  // Focus textarea whenever the panel transitions from minimized → unminimized
+  const prevIsMinimizedRef = useRef(isMinimized);
+  useEffect(() => {
+    if (prevIsMinimizedRef.current && !isMinimized) {
+      allowHoverFocusChange.current = false;
+      setTimeout(() => {
+        setFocusedBlockIndex(-1);
+        textareaRef.current?.focus();
+      }, 100);
+    }
+    prevIsMinimizedRef.current = isMinimized;
+  }, [isMinimized]);
 
   // Detect clicks outside the panel to minimize it (but not when seer drawer is open)
   useEffect(() => {
@@ -202,7 +219,7 @@ export function ExplorerPanel() {
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [isVisible, focusedBlockIndex, isSeerDrawerOpen]);
+  }, [isVisible, focusedBlockIndex, isSeerDrawerOpen, setIsMinimized]);
 
   // Track scroll position to detect if user scrolled up
   useEffect(() => {
@@ -384,7 +401,7 @@ export function ExplorerPanel() {
   const handlePanelBackgroundClick = useCallback(() => {
     setIsMinimized(false);
     closeMenu();
-  }, [closeMenu]);
+  }, [closeMenu, setIsMinimized]);
 
   // Close menu when clicking outside of it
   useEffect(() => {
@@ -424,21 +441,8 @@ export function ExplorerPanel() {
 
   const handleUnminimize = useCallback(() => {
     setIsMinimized(false);
-    // Disable hover focus changes until mouse actually moves
-    allowHoverFocusChange.current = false;
-    // Restore focus to the previously focused block if it exists and is valid
-    if (focusedBlockIndex >= 0 && focusedBlockIndex < blocks.length) {
-      setTimeout(() => {
-        blockRefs.current[focusedBlockIndex]?.scrollIntoView({block: 'nearest'});
-      }, 100);
-    } else {
-      // No valid block focus, focus input
-      setTimeout(() => {
-        setFocusedBlockIndex(-1);
-        textareaRef.current?.focus();
-      }, 100);
-    }
-  }, [focusedBlockIndex, blocks.length]);
+    // focus/scroll side-effects are handled by the prevIsMinimizedRef effect above
+  }, [setIsMinimized]);
 
   const isAwaitingUserInput = sessionData?.status === 'awaiting_user_input';
   const pendingInput = sessionData?.pending_user_input;
@@ -527,6 +531,7 @@ export function ExplorerPanel() {
     isMinimized,
     isFileApprovalPending,
     isQuestionPending,
+    setIsMinimized,
   ]);
 
   useBlockNavigation({
@@ -710,7 +715,6 @@ export function ExplorerPanel() {
       <InputSection
         blocks={blocks}
         enabled={!readOnly}
-        focusedBlockIndex={focusedBlockIndex}
         inputValue={inputValue}
         interruptRequested={interruptRequested}
         wasJustInterrupted={wasJustInterrupted}

static/app/views/seerExplorer/hooks/useBlockNavigation.spec.tsx

@@ -165,29 +165,27 @@ describe('useBlockNavigation', () => {
   });
 
   describe('Tab Navigation', () => {
-    it('always returns to input on Tab', () => {
+    it('does not intercept Tab key (allows native browser focus management)', () => {
       const props = {...defaultProps, focusedBlockIndex: 1};
       renderHook(() => useBlockNavigation(props));
 
-      const event = new KeyboardEvent('keydown', {key: 'Tab'});
+      const event = new KeyboardEvent('keydown', {key: 'Tab', cancelable: true});
       document.dispatchEvent(event);
 
-      expect(props.setFocusedBlockIndex).toHaveBeenCalledWith(-1);
-      expect(props.textareaRef.current?.focus).toHaveBeenCalled();
-      expect(mockTextarea.scrollIntoView).toHaveBeenCalledWith({
-        block: 'nearest',
-        behavior: 'smooth',
-      });
+      expect(props.setFocusedBlockIndex).not.toHaveBeenCalled();
+      expect(props.textareaRef.current?.focus).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
     });
 
-    it('focuses textarea even when already at input', () => {
+    it('does not intercept Tab key when at input', () => {
       renderHook(() => useBlockNavigation(defaultProps));
 
-      const event = new KeyboardEvent('keydown', {key: 'Tab'});
+      const event = new KeyboardEvent('keydown', {key: 'Tab', cancelable: true});
       document.dispatchEvent(event);
 
-      expect(defaultProps.setFocusedBlockIndex).toHaveBeenCalledWith(-1);
-      expect(defaultProps.textareaRef.current?.focus).toHaveBeenCalled();
+      expect(defaultProps.setFocusedBlockIndex).not.toHaveBeenCalled();
+      expect(defaultProps.textareaRef.current?.focus).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
     });
   });
 
@@ -206,7 +204,7 @@ describe('useBlockNavigation', () => {
       const props = {...defaultProps, isOpen: true};
       renderHook(() => useBlockNavigation(props));
 
-      const event = new KeyboardEvent('keydown', {key: 'Tab'});
+      const event = new KeyboardEvent('keydown', {key: 'ArrowUp'});
       document.dispatchEvent(event);
 
       expect(props.setFocusedBlockIndex).toHaveBeenCalled();
@@ -311,11 +309,15 @@ describe('useBlockNavigation', () => {
       });
     });
 
-    it('handles null textarea ref gracefully', () => {
-      const props = {...defaultProps, textareaRef: {current: null}};
+    it('handles null textarea ref gracefully on ArrowDown from last block', () => {
+      const props = {
+        ...defaultProps,
+        focusedBlockIndex: 2,
+        textareaRef: {current: null},
+      };
       renderHook(() => useBlockNavigation(props));
 
-      const event = new KeyboardEvent('keydown', {key: 'Tab'});
+      const event = new KeyboardEvent('keydown', {key: 'ArrowDown'});
       document.dispatchEvent(event);
 
       // Should not throw error with null textarea ref

static/app/views/seerExplorer/hooks/useBlockNavigation.tsx

@@ -99,19 +99,6 @@ export function useBlockNavigation({
             }
           }
         }
-      } else if (e.key === 'Tab') {
-        e.preventDefault();
-        onNavigate?.();
-        if (isMinimized && focusedBlockIndex >= 0 && focusedBlockIndex < blocks.length) {
-          scrollToElement(blockRefs.current[focusedBlockIndex] ?? null);
-        } else {
-          setFocusedBlockIndex(-1);
-          const textareaElement = textareaRef.current;
-          if (textareaElement) {
-            textareaElement.focus();
-            scrollToElement(textareaElement);
-          }
-        }
       } else if (e.key === 'Enter' && focusedBlockIndex >= 0) {
         e.preventDefault();
         onKeyPress?.(focusedBlockIndex, 'Enter');

static/app/views/seerExplorer/inputSection.tsx

@@ -33,7 +33,6 @@ interface QuestionActions {
 interface InputSectionProps {
   blocks: Block[];
   enabled: boolean;
-  focusedBlockIndex: number;
   inputValue: string;
   interruptRequested: boolean;
   isPolling: boolean;
@@ -58,7 +57,6 @@ export function InputSection({
   blocks,
   enabled,
   inputValue,
-  focusedBlockIndex,
   isMinimized = false,
   isPolling,
   interruptRequested,
@@ -82,12 +80,9 @@ export function InputSection({
   }, [blocks]);
   const getPlaceholder = () => {
     if (wasJustInterrupted) {
-      return 'Interrupted. What should Seer do instead?';
+      return t('Interrupted. What should Seer do instead?');
     }
-    if (focusedBlockIndex !== -1) {
-      return 'Press Tab ⇥ to return here';
-    }
-    return 'Type your message or / command and press Enter ↵';
+    return t('Type your message or / command and press Enter ↵');
   };
 
   // Handle keyboard shortcuts for file approval

static/app/views/seerExplorer/panelContainers.tsx

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
 import {AnimatePresence, motion} from 'framer-motion';
 
+import {Hotkey} from '@sentry/scraps/hotkey';
 import {Flex, Stack} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
 import {IconSeer} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import type {Block, PanelSize} from 'sentry/views/seerExplorer/types';
 import {getToolsStringFromBlock} from 'sentry/views/seerExplorer/utils';
 
@@ -121,7 +122,11 @@ export function PanelContainers({
                     style={{width: '100%'}}
                   >
                     <IconSeer animation={isPolling ? 'loading' : 'waiting'} size="lg" />
-                    <Text size="xs">{t('Tab ⇥ to continue')}</Text>
+                    <Text size="xs">
+                      {tct('[hotkey] to continue', {
+                        hotkey: <Hotkey value={['cmd+/', 'ctrl+/']} />,
+                      })}
+                    </Text>
                     <Text size="xs" variant="muted" ellipsis style={{maxWidth: '100%'}}>
                       {statusText}
                     </Text>
@@ -202,7 +207,7 @@ const PanelContent = styled('div')`
   background: ${p => p.theme.tokens.background.primary};
   border: 1px solid ${p => p.theme.tokens.border.primary};
   border-radius: ${p => p.theme.radius.md};
-  box-shadow: ${p => p.theme.dropShadowHeavy};
+  box-shadow: ${p => p.theme.shadow.high};
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -221,25 +226,11 @@ const MinimizedOverlay = styled(motion.div)`
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${p => p.theme.tokens.background.primary};
+  background: ${p => p.theme.tokens.background.overlay};
   border-radius: ${p => p.theme.radius.md};
   border: 1px solid ${p => p.theme.tokens.border.primary};
   z-index: 1;
   cursor: pointer;
-
-  /* Purple tint */
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: ${p => p.theme.tokens.background.transparent.accent.muted};
-    border-radius: inherit;
-    z-index: -1;
-    pointer-events: none;
-  }
 `;
 
 const MinimizedCorner = styled('div')`

static/app/views/seerExplorer/useExplorerPanel.tsx

@@ -13,21 +13,26 @@ import {useGlobalModal} from 'sentry/components/globalModal/useGlobalModal';
 
 type ExplorerPanelContextValue = {
   closeExplorerPanel: () => void;
+  isMinimized: boolean;
   isOpen: boolean;
   openExplorerPanel: () => void;
+  setIsMinimized: (value: boolean) => void;
   toggleExplorerPanel: () => void;
 };
 
 const ExplorerPanelContext = createContext<ExplorerPanelContextValue>({
   closeExplorerPanel: () => {},
+  isMinimized: false,
   isOpen: false,
   openExplorerPanel: () => {},
+  setIsMinimized: () => {},
   toggleExplorerPanel: () => {},
 });
 
 export function ExplorerPanelProvider({children}: {children: ReactNode}) {
   // Initialize the global explorer panel state. Includes hotkeys.
   const [isOpen, setIsOpen] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
 
   const openExplorerPanel = useCallback(() => {
     setIsOpen(true);
@@ -44,11 +49,13 @@ export function ExplorerPanelProvider({children}: {children: ReactNode}) {
   const contextValue = useMemo(
     () => ({
       isOpen,
+      isMinimized,
       openExplorerPanel,
       closeExplorerPanel,
+      setIsMinimized,
       toggleExplorerPanel,
     }),
-    [isOpen, openExplorerPanel, closeExplorerPanel, toggleExplorerPanel]
+    [isOpen, isMinimized, openExplorerPanel, closeExplorerPanel, toggleExplorerPanel]
   );
 
   // Hot keys for toggling the explorer panel.
@@ -60,7 +67,13 @@ export function ExplorerPanelProvider({children}: {children: ReactNode}) {
       : [
           {
             match: ['command+/', 'ctrl+/', 'command+.', 'ctrl+.'],
-            callback: () => toggleExplorerPanel(),
+            callback: () => {
+              if (isOpen && isMinimized) {
+                setIsMinimized(false);
+              } else {
+                toggleExplorerPanel();
+              }
+            },
             includeInputs: true,
           },
         ]