feat(seer-explorer): add hook to open explorer (#104540)

Adds a re-usable hook to open the Seer Explorer panel, supporting
options to start a new run or open an existing run ID, and also to send
an initial message.

Update the dynamic grouping explorer button to use this hook instead of
requiring copy paste

Closes AIML-1966

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: roaga

static/app/views/issueList/pages/dynamicGrouping.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useMemo, useState} from 'react';
+import {Fragment, useCallback, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Tag} from '@sentry/scraps/badge';
@@ -52,6 +52,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
+import {openSeerExplorer} from 'sentry/views/seerExplorer/openSeerExplorer';
 
 const CLUSTERS_PER_PAGE = 20;
 
@@ -129,29 +130,6 @@ function formatClusterPromptForSeer(cluster: ClusterSummary): string {
   return `I'd like to investigate this cluster of issues:\n\n${message}\n\nPlease help me understand the root cause and potential fixes for these related issues.`;
 }
 
-/**
- * Opens Seer Explorer by simulating the Cmd+/ or Ctrl+/ keyboard shortcut.
- * User can then paste with Cmd+V / Ctrl+V.
- */
-function openSeerExplorerWithClipboard(): void {
-  // Simulate keyboard shortcut to open Seer Explorer (Cmd+/ or Ctrl+/)
-  const isMac = navigator.platform.toUpperCase().includes('MAC');
-
-  // Create a KeyboardEvent with the proper keyCode (191 = '/')
-  // useHotkeys checks evt.keyCode, so we need to set it explicitly
-  const event = new KeyboardEvent('keydown', {
-    key: '/',
-    code: 'Slash',
-    keyCode: 191,
-    which: 191,
-    metaKey: isMac,
-    ctrlKey: !isMac,
-    bubbles: true,
-  } as KeyboardEventInit);
-
-  document.dispatchEvent(event);
-}
-
 interface TopIssuesResponse {
   data: ClusterSummary[];
   last_updated?: string;
@@ -373,14 +351,24 @@ function ClusterCard({
   const clusterStats = useClusterStats(cluster.group_ids);
   const {copy} = useCopyToClipboard();
 
-  const handleSendToSeer = () => {
-    copy(formatClusterPromptForSeer(cluster), {
-      successMessage: t('Copied to clipboard. Paste into Seer Explorer with Cmd+V'),
-    });
-    setTimeout(() => {
-      openSeerExplorerWithClipboard();
-    }, 100);
-  };
+  // Track the Seer Explorer run ID for this cluster so subsequent clicks reopen the same chat
+  const seerRunIdRef = useRef<number | null>(null);
+
+  const handleSendToSeer = useCallback(() => {
+    if (seerRunIdRef.current) {
+      // Reopen existing chat
+      openSeerExplorer({runId: seerRunIdRef.current});
+    } else {
+      // Start a new chat with the cluster prompt
+      openSeerExplorer({
+        startNewRun: true,
+        initialMessage: formatClusterPromptForSeer(cluster),
+        onRunCreated: runId => {
+          seerRunIdRef.current = runId;
+        },
+      });
+    }
+  }, [cluster]);
 
   const handleCopyMarkdown = () => {
     copy(formatClusterInfoForClipboard(cluster));

static/app/views/seerExplorer/emptyState.tsx

@@ -1,13 +1,23 @@
 import styled from '@emotion/styled';
 
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {IconSeer} from 'sentry/icons';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 
-function EmptyState() {
+interface EmptyStateProps {
+  isLoading?: boolean;
+}
+
+function EmptyState({isLoading}: EmptyStateProps) {
   return (
     <Container>
-      <IconSeer size="xl" variant="waiting" />
-      <Text>Ask Seer anything about your application.</Text>
+      {isLoading ? (
+        <LoadingIndicator size={32} />
+      ) : (
+        <IconSeer size="xl" variant="waiting" />
+      )}
+      <Text>{!isLoading && t('Ask Seer anything about your application.')}</Text>
     </Container>
   );
 }

static/app/views/seerExplorer/explorerPanel.spec.tsx

@@ -147,6 +147,7 @@ describe('ExplorerPanel', () => {
         runId: null,
         setRunId: jest.fn(),
         respondToUserInput: jest.fn(),
+        switchToRun: jest.fn(),
         createPR: jest.fn(),
       });
 

static/app/views/seerExplorer/explorerPanel.tsx

@@ -13,6 +13,7 @@ import {usePanelSizing} from 'sentry/views/seerExplorer/hooks/usePanelSizing';
 import {usePendingUserInput} from 'sentry/views/seerExplorer/hooks/usePendingUserInput';
 import {useSeerExplorer} from 'sentry/views/seerExplorer/hooks/useSeerExplorer';
 import InputSection from 'sentry/views/seerExplorer/inputSection';
+import {useExternalOpen} from 'sentry/views/seerExplorer/openSeerExplorer';
 import PanelContainers, {
   BlocksContainer,
 } from 'sentry/views/seerExplorer/panelContainers';
@@ -48,11 +49,21 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
     isPolling,
     interruptRun,
     interruptRequested,
-    setRunId,
+    switchToRun,
     respondToUserInput,
     createPR,
   } = useSeerExplorer();
 
+  // Handle external open events (from openSeerExplorer() calls)
+  const {isWaitingForSessionData} = useExternalOpen({
+    isVisible,
+    sendMessage,
+    startNewSession,
+    switchToRun,
+    sessionRunId: sessionData?.run_id,
+    sessionBlocks: sessionData?.blocks,
+  });
+
   // Extract repo_pr_states from session
   const repoPRStates = useMemo(
     () => sessionData?.repo_pr_states ?? {},
@@ -237,7 +248,7 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
         onMedSize: handleMedSize,
         onNew: startNewSession,
       },
-      onChangeSession: setRunId,
+      onChangeSession: switchToRun,
       menuAnchorRef: sessionHistoryButtonRef,
       inputAnchorRef: textareaRef,
       prWidgetAnchorRef: prWidgetButtonRef,
@@ -464,7 +475,7 @@ function ExplorerPanel({isVisible = false}: ExplorerPanelProps) {
       {menu}
       <BlocksContainer ref={scrollContainerRef} onClick={handlePanelBackgroundClick}>
         {isEmptyState ? (
-          <EmptyState />
+          <EmptyState isLoading={isWaitingForSessionData} />
         ) : (
           <Fragment>
             {blocks.map((block: Block, index: number) => (

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

@@ -143,11 +143,14 @@ export const useSeerExplorer = () => {
   );
 
   const sendMessage = useCallback(
-    async (query: string, insertIndex?: number) => {
+    async (query: string, insertIndex?: number, explicitRunId?: number | null) => {
       if (!orgSlug) {
         return;
       }
 
+      // explicitRunId: undefined = use current runId, null = force new run, number = use that run
+      const effectiveRunId = explicitRunId === undefined ? runId : explicitRunId;
+
       // Capture a coarse ASCII screenshot of the user's screen for extra context
       const screenshot = captureAsciiSnapshot?.();
 
@@ -196,7 +199,7 @@ export const useSeerExplorer = () => {
 
       try {
         const response = (await api.requestPromise(
-          `/organizations/${orgSlug}/seer/explorer-chat/${runId ? `${runId}/` : ''}`,
+          `/organizations/${orgSlug}/seer/explorer-chat/${effectiveRunId ? `${effectiveRunId}/` : ''}`,
           {
             method: 'POST',
             data: {
@@ -208,7 +211,7 @@ export const useSeerExplorer = () => {
         )) as SeerExplorerChatResponse;
 
         // Set run ID if this is a new session
-        if (!runId) {
+        if (!effectiveRunId) {
           setRunId(response.run_id);
         }
 
@@ -221,7 +224,7 @@ export const useSeerExplorer = () => {
         setOptimistic(null);
         setApiQueryData<SeerExplorerResponse>(
           queryClient,
-          makeSeerExplorerQueryKey(orgSlug, runId || undefined),
+          makeSeerExplorerQueryKey(orgSlug, effectiveRunId || undefined),
           makeErrorSeerExplorerData(e?.responseJSON?.detail ?? 'An error occurred')
         );
       }
@@ -480,13 +483,37 @@ export const useSeerExplorer = () => {
     interruptRequested,
   ]);
 
+  /** Switches to a different run and fetches its latest state. */
+  const switchToRun = useCallback(
+    (newRunId: number) => {
+      // Clear any optimistic state from previous run
+      setOptimistic(null);
+      setDeletedFromIndex(null);
+      setWaitingForResponse(false);
+      setInterruptRequested(false);
+
+      // Set the new run ID
+      setRunId(newRunId);
+
+      // Invalidate the query to force a fresh fetch
+      if (orgSlug) {
+        queryClient.invalidateQueries({
+          queryKey: makeSeerExplorerQueryKey(orgSlug, newRunId),
+        });
+      }
+    },
+    [orgSlug, queryClient, setRunId]
+  );
+
   return {
     sessionData: filteredSessionData,
     isPolling: isPolling(filteredSessionData, waitingForResponse),
     isPending,
     sendMessage,
     runId,
     setRunId,
+    /** Switches to a different run and fetches its latest state. */
+    switchToRun,
     /** Resets the run id, blocks, and other state. The new session isn't actually created until the user sends a message. */
     startNewSession,
     deleteFromIndex,