refactor: ai assistant revamp, query execution guards (#547)

* refactor: use chronological view in the assistant response, render thinking blocks

* submodule

* turn based message model with full tool call history in conversations

* submodule

* query run result bug fixes, show notifications consistently

* tests

* modal layout fix

* query run abortion handling, bug fixes

* submodule

* pass abort signal

* max tokens errors

* reviews

* reviews pt2

* add timeout cleanup

* function rename - splice guard

* query execution synchronization updates

* timeout cleanup, remove unncessarry dep

* remove the key from code block

* simplifications for query run

* update dep

* extra guards

* abort tests

* single transaction for indexeddb queries

* query execution races around chat/script and chat completions tool limit

- cancel active query on script-confirm so chat/editor queries don't
  orphan on the server when the "Run script" dialog is confirmed
- add onStop hook to markActive so confirmPending unblocks when the
  active execution is a multi-query selection script
- release _active when the script loop breaks via scriptStopRef
- drain pending microtasks before the script loop starts so iteration
  zero's "Running..." notification and glyph spinner aren't clobbered
  by a pending chat-abort addNotification
- chat completions provider: drop tools from last-round follow-up so
  MAX_TOOL_CALL_ROUNDS actually terminates the loop

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix editor unmount

* submodule

* autofocus on input

* submodule, java version

* reviews

* reword open in editor to diff preview

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: emrberk

e2e/tests/console/aiAssistant.spec.js

@@ -15,6 +15,7 @@ import { BrainIcon } from "../SetupAIAssistant/BrainIcon"
 import {
   buildOperationSections,
   formatDurationMs,
+  getIsExpandableSection,
   getSectionDuration,
   type OperationSection,
 } from "./AssistantModes"
@@ -209,34 +210,6 @@ const CloseCircleIcon = styled(CloseCircle)`
   flex-shrink: 0;
 `
 
-const GradientCheckCircleIcon = ({ size = 20 }: { size?: number }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 256 256"
-    style={{ flexShrink: 0 }}
-  >
-    <defs>
-      <linearGradient
-        id="checkCircleGradient"
-        x1="128"
-        x2="128"
-        y1="24"
-        y2="232"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#d14671" />
-        <stop offset="1" stopColor="#892c6c" />
-      </linearGradient>
-    </defs>
-    <path
-      fill="url(#checkCircleGradient)"
-      d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"
-    />
-  </svg>
-)
-
 const CollapsedSectionsWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -270,20 +243,22 @@ const formatDetailedStatusMessage = (
   return status
 }
 
-const getIsExpandableSection = (section: OperationSection) => {
-  return [
-    AIOperationStatus.InvestigatingTable,
-    AIOperationStatus.InvestigatingDocs,
-  ].includes(section.type)
-}
+const ThinkingContent = styled.div`
+  font-size: 1.3rem;
+  color: ${color("gray2")};
+  padding: 0 2.8rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+  opacity: 0.7;
+`
 
 type AssistantModesCompactProps = {
   operationHistory: OperationHistory
   status?: AIOperationStatus | null
   isLive?: boolean
   onScrollNeeded?: () => void
   collapsed?: boolean
-  responseStart?: number
+  endTimestamp?: number
 }
 
 export const AssistantModesCompact: React.FC<AssistantModesCompactProps> = ({
@@ -292,7 +267,7 @@ export const AssistantModesCompact: React.FC<AssistantModesCompactProps> = ({
   isLive = false,
   onScrollNeeded,
   collapsed = false,
-  responseStart,
+  endTimestamp,
 }) => {
   const theme = useTheme()
   const [collapsedSections, setCollapsedSections] = useState<
@@ -360,9 +335,12 @@ export const AssistantModesCompact: React.FC<AssistantModesCompactProps> = ({
   const durationText = useMemo(() => {
     if (operationHistory.length === 0) return null
     const firstTimestamp = operationHistory[0]?.timestamp
-    if (!firstTimestamp || !responseStart) return null
-    return formatDurationMs(responseStart - firstTimestamp)
-  }, [operationHistory, responseStart])
+    const lastTimestamp =
+      endTimestamp ?? operationHistory[operationHistory.length - 1]?.timestamp
+    if (!firstTimestamp || !lastTimestamp || firstTimestamp === lastTimestamp)
+      return null
+    return formatDurationMs(lastTimestamp - firstTimestamp)
+  }, [operationHistory, endTimestamp])
 
   if (operationHistory.length === 0) {
     return null
@@ -381,8 +359,12 @@ export const AssistantModesCompact: React.FC<AssistantModesCompactProps> = ({
     const sectionDuration = getSectionDuration(
       section,
       nextSection,
-      responseStart,
+      !nextSection ? endTimestamp : undefined,
     )
+    const thinkingSegmentText =
+      section.type === AIOperationStatus.Thinking
+        ? (section.operations[0]?.content ?? "")
+        : ""
 
     return (
       <ModeHeader
@@ -394,10 +376,22 @@ export const AssistantModesCompact: React.FC<AssistantModesCompactProps> = ({
           $expanded={isExpanded}
           $isExpandable={isExpandable}
           data-hook={`assistant-mode-${section.type.toLowerCase().replace(/\s+/g, "-")}`}
-          role="presentation"
+          role={isExpandable ? "button" : "presentation"}
+          tabIndex={isExpandable ? 0 : undefined}
+          aria-expanded={isExpandable ? isExpanded : undefined}
           onClick={
             isExpandable ? () => handleToggleSection(section.id) : undefined
           }
+          onKeyDown={
+            isExpandable
+              ? (e: React.KeyboardEvent) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    handleToggleSection(section.id)
+                  }
+                }
+              : undefined
+          }
         >
           <ReasoningIcon>
             {section.active ? (
@@ -420,7 +414,16 @@ export const AssistantModesCompact: React.FC<AssistantModesCompactProps> = ({
             )}
           </Box>
         </ModeHeaderTop>
-        {isExpandable && (
+        {isExpandable && section.type === AIOperationStatus.Thinking && (
+          <ExpandableWrapper $expanded={isExpanded}>
+            <ExpandableContent>
+              {thinkingSegmentText ? (
+                <ThinkingContent>{thinkingSegmentText}</ThinkingContent>
+              ) : null}
+            </ExpandableContent>
+          </ExpandableWrapper>
+        )}
+        {isExpandable && section.type !== AIOperationStatus.Thinking && (
           <ExpandableWrapper $expanded={isExpanded}>
             <ExpandableContent>
               <ReasoningThread>
@@ -594,10 +597,18 @@ export const AssistantModesCompact: React.FC<AssistantModesCompactProps> = ({
             $expanded={collapsedProcessingExpanded}
             $isExpandable
             onClick={() => setCollapsedProcessingExpanded((prev) => !prev)}
+            onKeyDown={(e: React.KeyboardEvent) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault()
+                setCollapsedProcessingExpanded((prev) => !prev)
+              }
+            }}
             data-hook="assistant-mode-processing-collapsed"
-            role="presentation"
+            role="button"
+            tabIndex={0}
+            aria-expanded={collapsedProcessingExpanded}
           >
-            <GradientCheckCircleIcon size={20} />
+            <CheckIcon />
             <ModeTitle $isActive={false}>
               {durationText ? `Thought for ${durationText}` : "Thought"}
             </ModeTitle>

e2e/utils/aiAssistant.js

@@ -1,10 +1,6 @@
 import React, { useState, useMemo, useRef, useEffect } from "react"
-import styled, { css } from "styled-components"
-import {
-  CheckboxCircle,
-  CloseCircle,
-  Stop as StopFill,
-} from "@styled-icons/remix-fill"
+import styled, { css, useTheme } from "styled-components"
+import { CheckboxCircle, CloseCircle } from "@styled-icons/remix-fill"
 import { SidebarSimpleIcon, XIcon } from "@phosphor-icons/react"
 import {
   useAIStatus,
@@ -18,43 +14,47 @@ import { pinkLinearGradientHorizontal } from "../../theme"
 import { getAllModelOptions } from "../../utils/ai"
 import { useAIConversation } from "../../providers/AIConversationProvider"
 import { Button } from "../../components/Button"
+import { AIStopButton } from "../AIStopButton"
 import { BrainIcon } from "../SetupAIAssistant/BrainIcon"
 import { AssistantModes, buildOperationSections } from "./AssistantModes"
 import { CircleNotchSpinner } from "../../scenes/Editor/Monaco/icons"
 import { useSelector } from "react-redux"
 import { selectors } from "../../store"
 
-const CaretGradient = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    {...props}
-  >
-    <path
-      d="M4.5 15L12 7.5L19.5 15"
-      stroke="url(#paint0_linear_214_5568)"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <defs>
-      <linearGradient
-        id="paint0_linear_214_5568"
-        x1="12"
-        y1="7.5"
-        x2="12"
-        y2="15"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#D14671" />
-        <stop offset="1" stopColor="#892C6C" />
-      </linearGradient>
-    </defs>
-  </svg>
-)
+const CaretGradient = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme()
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4.5 15L12 7.5L19.5 15"
+        stroke="url(#paint0_linear_214_5568)"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_214_5568"
+          x1="12"
+          y1="7.5"
+          x2="12"
+          y2="15"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={theme.color.pink} />
+          <stop offset="1" stopColor={theme.color.pinkGradientEnd} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
 
 const Container = styled.div`
   position: absolute;
@@ -214,26 +214,6 @@ const WorkingText = styled.div`
   text-transform: uppercase;
 `
 
-const AIStopButton = styled(Button)`
-  width: 2.2rem;
-  height: 2.2rem;
-  flex-shrink: 0;
-  border-radius: 100%;
-  background: #da152832;
-  border: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-
-  &:hover {
-    background: ${({ theme }) => theme.color.red} !important;
-    svg {
-      color: ${({ theme }) => theme.color.foreground};
-    }
-  }
-`
-
 const ViewChatButton = styled(Button).attrs({ skin: "transparent" })`
   gap: 1rem;
 `
@@ -415,17 +395,20 @@ export const AIStatusIndicator: React.FC = () => {
       <Header>
         <HeaderLeft>
           <AISparkle size={24} variant="filled" />
-          <WorkingText data-hook="ai-status-text">
+          <WorkingText
+            role="status"
+            aria-live="polite"
+            data-hook="ai-status-text"
+          >
             {isAborted ? "Cancelled" : isCompleted ? "Completed" : "Working..."}
           </WorkingText>
           {isBlockingAIStatus(status) && (
             <AIStopButton
               title="Cancel current operation"
+              ariaLabel="Cancel current AI operation"
               onClick={abortOperation}
-              data-hook="ai-status-stop"
-            >
-              <StopFill size="14px" color="#da1e28" />
-            </AIStopButton>
+              dataHook="ai-status-stop"
+            />
           )}
           {chatWindowState.activeConversationId && (
             <ViewChatButton

src/components/AIStatusIndicator/AssistantModes.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import styled, { useTheme } from "styled-components"
+import { Stop as StopFill } from "@styled-icons/remix-fill"
+import { color } from "../../utils"
+import { Button } from "../Button"
+
+type Props = {
+  size?: "sm" | "md"
+  title?: string
+  ariaLabel?: string
+  onClick?: () => void
+  dataHook?: string
+  className?: string
+}
+
+const SIZES = {
+  sm: "2.2rem",
+  md: "2.6rem",
+} as const
+
+const StyledButton = styled(Button)<{ $size: keyof typeof SIZES }>`
+  width: ${({ $size }) => SIZES[$size]};
+  height: ${({ $size }) => SIZES[$size]};
+  flex-shrink: 0;
+  border-radius: 100%;
+  background: ${color("aiStopButtonBg")};
+  border: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+
+  &:hover {
+    background: ${({ theme }) => theme.color.red} !important;
+    svg {
+      color: ${({ theme }) => theme.color.foreground};
+    }
+  }
+`
+
+export const AIStopButton: React.FC<Props> = ({
+  size = "sm",
+  title,
+  ariaLabel,
+  onClick,
+  dataHook,
+  className,
+}) => {
+  const theme = useTheme()
+  return (
+    <StyledButton
+      $size={size}
+      title={title}
+      aria-label={ariaLabel}
+      onClick={onClick}
+      data-hook={dataHook}
+      className={className}
+    >
+      <StopFill size="14px" color={theme.color.aiStopButtonFg} />
+    </StyledButton>
+  )
+}