diff --git a/src/Elastic.Documentation.Site/Assets/eui-icons-cache.ts b/src/Elastic.Documentation.Site/Assets/eui-icons-cache.ts
index 64ad3d6b4..df60b9ae9 100644
--- a/src/Elastic.Documentation.Site/Assets/eui-icons-cache.ts
+++ b/src/Elastic.Documentation.Site/Assets/eui-icons-cache.ts
@@ -1,10 +1,13 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck: EUI icons do not have types
 import { icon as EuiIconVisualizeApp } from '@elastic/eui/es/components/icon/assets/app_visualize'
+import { icon as EuiIconArrowEnd } from '@elastic/eui/es/components/icon/assets/arrowEnd'
+import { icon as EuiIconArrowStart } from '@elastic/eui/es/components/icon/assets/arrowStart'
 import { icon as EuiIconArrowDown } from '@elastic/eui/es/components/icon/assets/arrow_down'
 import { icon as EuiIconArrowLeft } from '@elastic/eui/es/components/icon/assets/arrow_left'
 import { icon as EuiIconArrowRight } from '@elastic/eui/es/components/icon/assets/arrow_right'
 import { icon as EuiIconCheck } from '@elastic/eui/es/components/icon/assets/check'
+import { icon as EuiIconComment } from '@elastic/eui/es/components/icon/assets/comment'
 import { icon as EuiIconCopy } from '@elastic/eui/es/components/icon/assets/copy'
 import { icon as EuiIconCopyClipboard } from '@elastic/eui/es/components/icon/assets/copy_clipboard'
 import { icon as EuiIconCross } from '@elastic/eui/es/components/icon/assets/cross'
@@ -59,4 +62,7 @@ appendIconComponentCache({
     copy: EuiIconCopy,
     play: EuiIconPlay,
     sortUp: EuiIconSortUp,
+    arrowStart: EuiIconArrowStart,
+    arrowEnd: EuiIconArrowEnd,
+    comment: EuiIconComment,
 })
diff --git a/src/Elastic.Documentation.Site/Assets/modal.css b/src/Elastic.Documentation.Site/Assets/modal.css
index 66af72638..207742cde 100644
--- a/src/Elastic.Documentation.Site/Assets/modal.css
+++ b/src/Elastic.Documentation.Site/Assets/modal.css
@@ -29,3 +29,35 @@
 		@apply text-ink-dark hover:text-ink text-2xl font-bold no-underline;
 	}
 }
+
+/* Search or Ask AI animation for secondary buttons */
+
+@keyframes slideInFromRight {
+	from {
+		right: 8px;
+		opacity: 0;
+	}
+	to {
+		right: 40px;
+		opacity: 1;
+	}
+}
+
+@keyframes slideOutToRight {
+	from {
+		right: 40px;
+		opacity: 1;
+	}
+	to {
+		right: 8px;
+		opacity: 0;
+	}
+}
+
+.slideInSearchOrAskAiInputAnimation {
+	animation: slideInFromRight 0.2s ease-out forwards;
+}
+
+.slideOutSearchOrAskAiInputAnimation {
+	animation: slideOutToRight 0.2s ease-out forwards;
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
index cb8084193..66c1e5ec2 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
@@ -37,7 +37,7 @@ const ALL_SUGGESTIONS: AskAiSuggestion[] = [
     },
 ]
 
-export const AskAiSuggestions = () => {
+export const AskAiSuggestions = ({ disabled }: { disabled?: boolean }) => {
     const { submitQuestion } = useChatActions()
     const { setModalMode } = useModalActions()
     const { euiTheme } = useEuiTheme()
@@ -64,9 +64,12 @@ export const AskAiSuggestions = () => {
                         fullWidth
                         size="s"
                         onClick={() => {
-                            submitQuestion(suggestion.question)
-                            setModalMode('askAi')
+                            if (!disabled) {
+                                submitQuestion(suggestion.question)
+                                setModalMode('askAi')
+                            }
                         }}
+                        disabled={disabled}
                     >
                         {suggestion.question}
                     </EuiButton>
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.test.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.test.tsx
index 6171b8f26..3210356dd 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.test.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.test.tsx
@@ -13,6 +13,7 @@ jest.mock('./chat.store', () => ({
     useChatActions: jest.fn(() => ({
         submitQuestion: jest.fn(),
         clearChat: jest.fn(),
+        clearNon429Errors: jest.fn(),
         setAiProvider: jest.fn(),
     })),
 }))
@@ -29,6 +30,44 @@ jest.mock('./AskAiSuggestions', () => ({
     ),
 }))
 
+// Mock AiProviderSelector
+jest.mock('./AiProviderSelector', () => ({
+    AiProviderSelector: () => (
+        <div data-testid="ai-provider-selector">Provider Selector</div>
+    ),
+}))
+
+// Mock modal.store
+jest.mock('../modal.store', () => ({
+    useModalActions: jest.fn(() => ({
+        setModalMode: jest.fn(),
+        openModal: jest.fn(),
+        closeModal: jest.fn(),
+        toggleModal: jest.fn(),
+    })),
+}))
+
+// Mock cooldown hooks
+jest.mock('./useAskAiCooldown', () => ({
+    useIsAskAiCooldownActive: jest.fn(() => false),
+    useAskAiCooldown: jest.fn(() => null),
+    useAskAiCooldownActions: jest.fn(() => ({
+        setCooldown: jest.fn(),
+        updateCooldown: jest.fn(),
+        notifyCooldownFinished: jest.fn(),
+        acknowledgeCooldownFinished: jest.fn(),
+    })),
+}))
+
+jest.mock('../useCooldown', () => ({
+    useCooldown: jest.fn(),
+}))
+
+// Mock SearchOrAskAiErrorCallout
+jest.mock('../SearchOrAskAiErrorCallout', () => ({
+    SearchOrAskAiErrorCallout: () => null,
+}))
+
 const mockUseChatMessages = jest.mocked(
     jest.requireMock('./chat.store').useChatMessages
 )
@@ -39,12 +78,14 @@ const mockUseChatActions = jest.mocked(
 describe('Chat Component', () => {
     const mockSubmitQuestion = jest.fn()
     const mockClearChat = jest.fn()
+    const mockClearNon429Errors = jest.fn()
 
     beforeEach(() => {
         jest.clearAllMocks()
         mockUseChatActions.mockReturnValue({
             submitQuestion: mockSubmitQuestion,
             clearChat: mockClearChat,
+            clearNon429Errors: mockClearNon429Errors,
         })
     })
 
@@ -196,7 +237,9 @@ describe('Chat Component', () => {
                 /Ask Elastic Docs AI Assistant/i
             )
             await user.type(input, question)
-            await user.click(screen.getByRole('button', { name: /send/i }))
+            await user.click(
+                screen.getByRole('button', { name: /send message/i })
+            )
 
             // Assert
             expect(mockSubmitQuestion).toHaveBeenCalledWith(question)
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
index 367b0fb3f..1c50ff1fc 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
@@ -1,8 +1,10 @@
 /** @jsxImportSource @emotion/react */
+import { SearchOrAskAiErrorCallout } from '../SearchOrAskAiErrorCallout'
 import { AiProviderSelector } from './AiProviderSelector'
 import { AskAiSuggestions } from './AskAiSuggestions'
 import { ChatMessageList } from './ChatMessageList'
 import { useChatActions, useChatMessages } from './chat.store'
+import { useIsAskAiCooldownActive } from './useAskAiCooldown'
 import {
     useEuiOverflowScroll,
     EuiButtonEmpty,
@@ -15,7 +17,6 @@ import {
     EuiTitle,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
-import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 const containerStyles = css`
@@ -48,11 +49,22 @@ const scrollToBottom = (container: HTMLDivElement | null) => {
 }
 
 // Header shown when a conversation exists
-const NewConversationHeader = ({ onClick }: { onClick: () => void }) => (
+const NewConversationHeader = ({
+    onClick,
+    disabled,
+}: {
+    onClick: () => void
+    disabled?: boolean
+}) => (
     <EuiFlexItem grow={false}>
         <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
             <EuiFlexItem grow={false}>
-                <EuiButtonEmpty size="xs" onClick={onClick} iconType="refresh">
+                <EuiButtonEmpty
+                    size="xs"
+                    onClick={onClick}
+                    iconType="refresh"
+                    disabled={disabled}
+                >
                     New conversation
                 </EuiButtonEmpty>
             </EuiFlexItem>
@@ -63,10 +75,13 @@ const NewConversationHeader = ({ onClick }: { onClick: () => void }) => (
 
 export const Chat = () => {
     const messages = useChatMessages()
-    const { submitQuestion, clearChat } = useChatActions()
+    const { submitQuestion, clearChat, clearNon429Errors, cancelStreaming } =
+        useChatActions()
+    const isCooldownActive = useIsAskAiCooldownActive()
     const inputRef = useRef<HTMLInputElement>(null)
     const scrollRef = useRef<HTMLDivElement>(null)
     const lastMessageStatusRef = useRef<string | null>(null)
+    const abortFunctionRef = useRef<(() => void) | null>(null)
     const [inputValue, setInputValue] = useState('')
 
     const dynamicScrollableStyles = css`
@@ -74,10 +89,36 @@ export const Chat = () => {
         ${useEuiOverflowScroll('y', true)}
     `
 
+    // Check if there's an active streaming query
+    const isStreaming =
+        messages.length > 0 &&
+        messages[messages.length - 1].type === 'ai' &&
+        messages[messages.length - 1].status === 'streaming'
+
+    // Handle abort function from StreamingAiMessage
+    const handleAbortReady = (abort: () => void) => {
+        console.log('[Chat] Abort function ready, storing in ref')
+        abortFunctionRef.current = abort
+    }
+
+    // Clear abort function when streaming ends
+    useEffect(() => {
+        if (!isStreaming) {
+            abortFunctionRef.current = null
+        }
+    }, [isStreaming])
+
     const handleSubmit = useCallback(
         (question: string) => {
             if (!question.trim()) return
 
+            // Prevent submission during countdown
+            if (isCooldownActive) {
+                return
+            }
+
+            clearNon429Errors()
+
             submitQuestion(question.trim())
 
             if (inputRef.current) {
@@ -88,9 +129,26 @@ export const Chat = () => {
             // Scroll to bottom after new message
             setTimeout(() => scrollToBottom(scrollRef.current), 100)
         },
-        [submitQuestion]
+        [submitQuestion, isCooldownActive, clearNon429Errors]
     )
 
+    const handleButtonClick = useCallback(() => {
+        console.log('[Chat] Button clicked', {
+            isStreaming,
+            hasAbortFunction: !!abortFunctionRef.current,
+        })
+        if (isStreaming && abortFunctionRef.current) {
+            // Interrupt current query
+            console.log('[Chat] Calling abort function')
+            abortFunctionRef.current()
+            abortFunctionRef.current = null
+            // Update message status from 'streaming' to 'complete'
+            cancelStreaming()
+        } else if (inputRef.current) {
+            handleSubmit(inputRef.current.value)
+        }
+    }, [isStreaming, handleSubmit, cancelStreaming])
+
     // Refocus input when AI answer transitions to complete
     useEffect(() => {
         if (messages.length > 0) {
@@ -126,43 +184,62 @@ export const Chat = () => {
             <EuiSpacer size="m" />
 
             {messages.length > 0 && (
-                <NewConversationHeader onClick={clearChat} />
+                <NewConversationHeader
+                    onClick={clearChat}
+                    disabled={isCooldownActive}
+                />
             )}
 
             <EuiFlexItem grow={true} css={scrollContainerStyles}>
                 <div ref={scrollRef} css={dynamicScrollableStyles}>
                     {messages.length === 0 ? (
-                        <EuiEmptyPrompt
-                            iconType="logoElastic"
-                            title={
-                                <h2>Hi! I'm the Elastic Docs AI Assistant</h2>
-                            }
-                            body={
-                                <>
-                                    <p>
-                                        I can help answer your questions about
-                                        Elastic documentation. <br />
-                                        Ask me anything about Elasticsearch,
-                                        Kibana, Observability, Security, and
-                                        more.
-                                    </p>
-                                    <EuiSpacer size="m" />
-                                    <AiProviderSelector />
-                                </>
-                            }
-                            footer={
-                                <>
-                                    <EuiTitle size="xxs">
-                                        <h3>Try asking me:</h3>
-                                    </EuiTitle>
-                                    <EuiSpacer size="s" />
-                                    <AskAiSuggestions />
-                                </>
-                            }
-                        />
+                        <>
+                            <EuiEmptyPrompt
+                                iconType="logoElastic"
+                                title={
+                                    <h2>
+                                        Hi! I'm the Elastic Docs AI Assistant
+                                    </h2>
+                                }
+                                body={
+                                    <>
+                                        <p>
+                                            I can help answer your questions
+                                            about Elastic documentation. <br />
+                                            Ask me anything about Elasticsearch,
+                                            Kibana, Observability, Security, and
+                                            more.
+                                        </p>
+                                        <EuiSpacer size="m" />
+                                        <AiProviderSelector />
+                                    </>
+                                }
+                                footer={
+                                    <>
+                                        <EuiTitle size="xxs">
+                                            <h3>Try asking me:</h3>
+                                        </EuiTitle>
+                                        <EuiSpacer size="s" />
+                                        <AskAiSuggestions
+                                            disabled={isCooldownActive}
+                                        />
+                                    </>
+                                }
+                            />
+                            {/* Show error callout when there's a cooldown, even on initial page */}
+                            <div css={messagesStyles}>
+                                <SearchOrAskAiErrorCallout
+                                    error={null}
+                                    domain="askAi"
+                                />
+                            </div>
+                        </>
                     ) : (
                         <div css={messagesStyles}>
-                            <ChatMessageList messages={messages} />
+                            <ChatMessageList
+                                messages={messages}
+                                onAbortReady={handleAbortReady}
+                            />
                         </div>
                     )}
                 </div>
@@ -187,9 +264,12 @@ export const Chat = () => {
                                 handleSubmit(e.currentTarget.value)
                             }
                         }}
+                        disabled={isCooldownActive}
                     />
                     <EuiButtonIcon
-                        aria-label="Send message"
+                        aria-label={
+                            isStreaming ? 'Interrupt query' : 'Send message'
+                        }
                         css={css`
                             position: absolute;
                             right: 8px;
@@ -198,13 +278,12 @@ export const Chat = () => {
                             border-radius: 9999px;
                         `}
                         color="primary"
-                        iconType="sortUp"
-                        display={inputValue.trim() ? 'fill' : 'base'}
-                        onClick={() => {
-                            if (inputRef.current) {
-                                handleSubmit(inputRef.current.value)
-                            }
-                        }}
+                        iconType={isStreaming ? 'cross' : 'comment'}
+                        display={
+                            inputValue.trim() || isStreaming ? 'fill' : 'base'
+                        }
+                        onClick={handleButtonClick}
+                        disabled={isCooldownActive}
                     ></EuiButtonIcon>
                 </div>
                 <EuiSpacer size="m" />
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.test.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.test.tsx
index 90a79238b..7f4f5327b 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.test.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.test.tsx
@@ -1,8 +1,98 @@
+import { ApiError } from '../errorHandling'
 import { ChatMessage } from './ChatMessage'
 import { ChatMessage as ChatMessageType } from './chat.store'
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 
+// Mock EuiCallOut and EuiSpacer for SearchOrAskAiErrorCallout
+jest.mock('@elastic/eui', () => {
+    const actual = jest.requireActual('@elastic/eui')
+    return {
+        ...actual,
+        EuiCallOut: ({
+            title,
+            children,
+            color,
+            iconType,
+            size,
+        }: {
+            title: string
+            children: React.ReactNode
+            color: string
+            iconType: string
+            size: string
+        }) => (
+            <div
+                data-testid="eui-callout"
+                data-title={title}
+                data-color={color}
+                data-icon-type={iconType}
+                data-size={size}
+            >
+                {children}
+            </div>
+        ),
+        EuiSpacer: ({ size }: { size: string }) => (
+            <div data-testid="eui-spacer" data-size={size} />
+        ),
+    }
+})
+
+// Mock domain-specific cooldown hooks
+jest.mock('../Search/useSearchCooldown', () => ({
+    useSearchErrorCalloutState: jest.fn(() => ({
+        hasActiveCooldown: false,
+        countdown: null,
+        awaitingNewInput: false,
+    })),
+}))
+
+jest.mock('../AskAi/useAskAiCooldown', () => ({
+    useAskAiErrorCalloutState: jest.fn(() => ({
+        hasActiveCooldown: false,
+        countdown: null,
+        awaitingNewInput: false,
+    })),
+}))
+
+// Mock errorHandling utilities
+jest.mock('../errorHandling', () => {
+    const actual = jest.requireActual('../errorHandling')
+    return {
+        ...actual,
+        getErrorMessage: jest.fn((error: ApiError | Error | null) => {
+            if (!error) return 'Unknown error'
+            if ('statusCode' in error) {
+                return `Error ${error.statusCode}: ${error.message}`
+            }
+            return error.message
+        }),
+        isApiError: jest.fn((error: ApiError | Error | null) => {
+            return (
+                error instanceof Error &&
+                'statusCode' in error &&
+                error.name === 'ApiError'
+            )
+        }),
+        isRateLimitError: jest.fn((error: ApiError | Error | null) => {
+            return (
+                error instanceof Error &&
+                'statusCode' in error &&
+                (error as ApiError).statusCode === 429
+            )
+        }),
+    }
+})
+
+// Mock rate limit handlers
+jest.mock('./useAskAiRateLimitHandler', () => ({
+    useAskAiRateLimitHandler: jest.fn(),
+}))
+
+jest.mock('../Search/useSearchRateLimitHandler', () => ({
+    useSearchRateLimitHandler: jest.fn(),
+}))
+
 describe('ChatMessage Component', () => {
     beforeEach(() => {
         jest.clearAllMocks()
@@ -138,6 +228,10 @@ describe('ChatMessage Component', () => {
     })
 
     describe('AI messages - error', () => {
+        const testError = new Error('Test error') as ApiError
+        testError.name = 'ApiError'
+        testError.statusCode = 500
+
         const errorMessage: ChatMessageType = {
             id: '4',
             type: 'ai',
@@ -145,6 +239,7 @@ describe('ChatMessage Component', () => {
             conversationId: 'thread-1',
             timestamp: Date.now(),
             status: 'error',
+            error: testError,
         }
 
         it('should show error message', () => {
@@ -152,14 +247,13 @@ describe('ChatMessage Component', () => {
             render(<ChatMessage message={errorMessage} />)
 
             // Assert
-            expect(
-                screen.getByText(/Sorry, there was an error/i)
-            ).toBeInTheDocument()
-            expect(
-                screen.getByText(
-                    /The Elastic Docs AI Assistant encountered an error/i
-                )
-            ).toBeInTheDocument()
+            const callout = screen.getByTestId('eui-callout')
+            expect(callout).toBeInTheDocument()
+            expect(callout).toHaveAttribute(
+                'data-title',
+                'Sorry, there was an error'
+            )
+            expect(callout).toHaveTextContent('Test error')
         })
 
         it('should display previous content before error occurred', () => {
@@ -167,7 +261,12 @@ describe('ChatMessage Component', () => {
             render(<ChatMessage message={errorMessage} />)
 
             // Assert
-            expect(screen.getByText(/Previous content/i)).toBeInTheDocument()
+            // When there's an error, the content is hidden, only the error callout is shown
+            expect(screen.getByTestId('eui-callout')).toBeInTheDocument()
+            // The content is not rendered when hasError is true
+            expect(
+                screen.queryByText(/Previous content/i)
+            ).not.toBeInTheDocument()
         })
     })
 
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
index a026415c0..ba2d5af15 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
@@ -1,13 +1,14 @@
 import { initCopyButton } from '../../../copybutton'
 import { hljs } from '../../../hljs'
-import { AskAiEvent, EventTypes } from './AskAiEvent'
+import { SearchOrAskAiErrorCallout } from '../SearchOrAskAiErrorCallout'
+import { ApiError } from '../errorHandling'
+import { AskAiEvent, ChunkEvent, EventTypes } from './AskAiEvent'
 import { GeneratingStatus } from './GeneratingStatus'
 import { References } from './RelatedResources'
 import { ChatMessage as ChatMessageType } from './chat.store'
 import { useStatusMinDisplay } from './useStatusMinDisplay'
 import {
     EuiButtonIcon,
-    EuiCallOut,
     EuiCopy,
     EuiFlexGroup,
     EuiFlexItem,
@@ -22,8 +23,7 @@ import {
 import { css } from '@emotion/react'
 import DOMPurify from 'dompurify'
 import { Marked, RendererObject, Tokens } from 'marked'
-import * as React from 'react'
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 
 // Create the marked instance once globally (renderer never changes)
 const createMarkedInstance = () => {
@@ -59,8 +59,10 @@ interface ChatMessageProps {
     message: ChatMessageType
     events?: AskAiEvent[]
     streamingContent?: string
-    error?: Error | null
+    error?: ApiError | Error
     onRetry?: () => void
+    onCountdownChange?: (countdown: number | null) => void
+    showError?: boolean
 }
 
 const splitContentAndReferences = (
@@ -90,7 +92,7 @@ const splitContentAndReferences = (
 const getMessageState = (message: ChatMessageType) => ({
     isUser: message.type === 'user',
     isLoading: message.status === 'streaming',
-    isComplete: message.status === 'complete',
+    isComplete: message.status === 'complete' || message.status === 'error',
     hasError: message.status === 'error',
 })
 
@@ -129,6 +131,11 @@ const computeAiStatus = (
 ): string | null => {
     if (isComplete) return null
 
+    // Don't show status if there's an error event
+    if (events.some((e) => e.type === EventTypes.ERROR)) {
+        return null
+    }
+
     // Get events sorted by timestamp (most recent last)
     const statusEvents = events
         .filter(
@@ -162,7 +169,7 @@ const computeAiStatus = (
         case EventTypes.MESSAGE_CHUNK: {
             const allContent = events
                 .filter((m) => m.type === EventTypes.MESSAGE_CHUNK)
-                .map((m) => m.content)
+                .map((m) => (m as ChunkEvent).content)
                 .join('')
 
             if (allContent.includes('<!--REFERENCES')) {
@@ -242,6 +249,7 @@ export const ChatMessage = ({
     streamingContent,
     error,
     onRetry,
+    showError = true,
 }: ChatMessageProps) => {
     const { euiTheme } = useEuiTheme()
     const { isUser, isLoading, isComplete } = getMessageState(message)
@@ -276,7 +284,11 @@ export const ChatMessage = ({
     // message.content is updated atomically with status when CONVERSATION_END arrives
     const content = streamingContent || message.content
 
-    const hasError = message.status === 'error' || !!error
+    const hasError = (message.status === 'error' || !!error) && showError
+
+    // Don't render content for error messages that aren't being shown
+    const shouldRenderContent =
+        !message.status || message.status !== 'error' || hasError
 
     // Only split content and references when complete for better performance
     const { mainContent, referencesJson } = useMemo(() => {
@@ -308,7 +320,7 @@ export const ChatMessage = ({
     // Apply minimum display time to prevent status flickering
     const aiStatus = useStatusMinDisplay(rawAiStatus)
 
-    const ref = React.useRef<HTMLDivElement>(null)
+    const ref = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
         if (isComplete && ref.current) {
@@ -335,91 +347,113 @@ export const ChatMessage = ({
             data-message-type="ai"
             data-message-id={message.id}
         >
-            <EuiFlexItem grow={false}>
-                <div
-                    css={css`
-                        block-size: 32px;
-                        inline-size: 32px;
-                        border-radius: 50%;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                    `}
-                >
-                    {isLoading ? (
-                        <EuiLoadingElastic
-                            size="xl"
-                            css={css`
-                                margin-top: -1px;
-                            `}
-                        />
-                    ) : (
-                        <EuiIcon
-                            name="Elastic Docs AI"
-                            size="xl"
-                            type="logoElastic"
-                        />
-                    )}
-                </div>
-            </EuiFlexItem>
-            <EuiFlexItem>
-                <EuiPanel
-                    paddingSize="m"
-                    hasShadow={false}
-                    hasBorder={false}
-                    css={css`
-                        padding-top: 8px;
-                    `}
-                >
-                    {content && (
-                        <div
-                            ref={ref}
-                            className="markdown-content"
-                            css={css`
-                                font-size: 14px;
-                                & > *:first-child {
-                                    margin-top: 0;
-                                }
-                            `}
-                            dangerouslySetInnerHTML={{ __html: parsed }}
-                        />
-                    )}
-
-                    {referencesJson && (
-                        <References referencesJson={referencesJson} />
-                    )}
-
-                    {content && isLoading && <EuiSpacer size="m" />}
-                    <GeneratingStatus status={aiStatus} />
-
-                    {isComplete && content && (
-                        <>
-                            <EuiSpacer size="m" />
-                            <ActionBar
-                                content={mainContent}
-                                onRetry={onRetry}
+            {!hasError && (
+                <EuiFlexItem grow={false}>
+                    <div
+                        css={css`
+                            block-size: 32px;
+                            inline-size: 32px;
+                            border-radius: 50%;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                        `}
+                    >
+                        {isLoading ? (
+                            <EuiLoadingElastic
+                                size="xl"
+                                css={css`
+                                    margin-top: -1px;
+                                `}
+                            />
+                        ) : (
+                            <EuiIcon
+                                name="Elastic Docs AI"
+                                size="xl"
+                                type="logoElastic"
                             />
-                        </>
-                    )}
-
-                    {hasError && (
-                        <>
-                            <EuiSpacer size="m" />
-                            <EuiCallOut
-                                title="Sorry, there was an error"
-                                color="danger"
-                                iconType="error"
-                                size="s"
+                        )}
+                    </div>
+                </EuiFlexItem>
+            )}
+            {!hasError && shouldRenderContent && (
+                <EuiFlexItem>
+                    <EuiPanel
+                        paddingSize="m"
+                        hasShadow={false}
+                        hasBorder={false}
+                        css={css`
+                            padding-top: 8px;
+                        `}
+                    >
+                        {content && (
+                            <div
+                                ref={ref}
+                                className="markdown-content"
+                                css={css`
+                                    font-size: 14px;
+                                    & > *:first-child {
+                                        margin-top: 0;
+                                    }
+                                `}
+                                dangerouslySetInnerHTML={{ __html: parsed }}
+                            />
+                        )}
+
+                        {referencesJson && (
+                            <References referencesJson={referencesJson} />
+                        )}
+
+                        {content && isLoading && <EuiSpacer size="m" />}
+                        <GeneratingStatus status={aiStatus} />
+
+                        {isComplete && content && (
+                            <>
+                                <EuiSpacer size="m" />
+                                <ActionBar
+                                    content={mainContent}
+                                    onRetry={onRetry}
+                                />
+                            </>
+                        )}
+                    </EuiPanel>
+                </EuiFlexItem>
+            )}
+            {hasError && (
+                <EuiFlexItem>
+                    <EuiFlexGroup
+                        gutterSize="s"
+                        alignItems="flexStart"
+                        responsive={false}
+                    >
+                        <EuiFlexItem grow={false}>
+                            <div
+                                css={css`
+                                    block-size: 32px;
+                                    inline-size: 32px;
+                                    border-radius: 50%;
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: center;
+                                `}
                             >
-                                <p>
-                                    The Elastic Docs AI Assistant encountered an
-                                    error. Please try again.
-                                </p>
-                            </EuiCallOut>
-                        </>
-                    )}
-                </EuiPanel>
-            </EuiFlexItem>
+                                <EuiIcon
+                                    name="Elastic Docs AI"
+                                    size="xl"
+                                    type="logoElastic"
+                                />
+                            </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                            <SearchOrAskAiErrorCallout
+                                error={message.error || error || null}
+                                domain="askAi"
+                                inline={true}
+                            />
+                        </EuiFlexItem>
+                    </EuiFlexGroup>
+                </EuiFlexItem>
+            )}
         </EuiFlexGroup>
     )
 }
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx
index 2668431e0..39fe514c2 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessageList.tsx
@@ -3,12 +3,24 @@ import { StreamingAiMessage } from './StreamingAiMessage'
 import { ChatMessage as ChatMessageType } from './chat.store'
 import { EuiSpacer } from '@elastic/eui'
 import * as React from 'react'
+import { useMemo } from 'react'
 
 interface ChatMessageListProps {
     messages: ChatMessageType[]
+    onAbortReady?: (abort: () => void) => void
 }
 
-export const ChatMessageList = ({ messages }: ChatMessageListProps) => {
+export const ChatMessageList = ({
+    messages,
+    onAbortReady,
+}: ChatMessageListProps) => {
+    const lastErrorMessageId = useMemo(() => {
+        const errorMessages = messages.filter((m) => m.status === 'error')
+        return errorMessages.length > 0
+            ? errorMessages[errorMessages.length - 1].id
+            : null
+    }, [messages])
+
     return (
         <>
             {messages.map((message, index) => (
@@ -19,6 +31,8 @@ export const ChatMessageList = ({ messages }: ChatMessageListProps) => {
                         <StreamingAiMessage
                             message={message}
                             isLast={index === messages.length - 1}
+                            onAbortReady={onAbortReady}
+                            showError={message.id === lastErrorMessageId}
                         />
                     )}
                     {index < messages.length - 1 && <EuiSpacer size="l" />}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/StreamingAiMessage.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/StreamingAiMessage.tsx
index e90ad5547..c89e53ac7 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/StreamingAiMessage.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/StreamingAiMessage.tsx
@@ -1,3 +1,4 @@
+import { ApiError } from '../errorHandling'
 import { EventTypes } from './AskAiEvent'
 import { ChatMessage } from './ChatMessage'
 import {
@@ -11,11 +12,15 @@ import { useEffect, useRef } from 'react'
 interface StreamingAiMessageProps {
     message: ChatMessageType
     isLast: boolean
+    onAbortReady?: (abort: () => void) => void
+    showError?: boolean
 }
 
 export const StreamingAiMessage = ({
     message,
     isLast,
+    onAbortReady,
+    showError,
 }: StreamingAiMessageProps) => {
     const {
         updateAiMessage,
@@ -26,7 +31,7 @@ export const StreamingAiMessage = ({
     const conversationId = useConversationId()
     const contentRef = useRef('')
 
-    const { events, sendQuestion } = useAskAi({
+    const { events, sendQuestion, abort, error } = useAskAi({
         conversationId: conversationId ?? undefined,
         onEvent: (event) => {
             if (event.type === EventTypes.CONVERSATION_START) {
@@ -38,10 +43,15 @@ export const StreamingAiMessage = ({
                 contentRef.current += event.content
             } else if (event.type === EventTypes.ERROR) {
                 // Handle error events from the stream
+                const error = new Error(
+                    event.message || 'An error occurred'
+                ) as ApiError
+                error.statusCode = 500
                 updateAiMessage(
                     message.id,
                     event.message || 'An error occurred',
-                    'error'
+                    'error',
+                    error
                 )
             } else if (event.type === EventTypes.CONVERSATION_END) {
                 updateAiMessage(
@@ -51,22 +61,39 @@ export const StreamingAiMessage = ({
                 )
             }
         },
-        onError: (error) => {
+        onError: (error: ApiError | Error | null) => {
             console.error('[AI Provider] Error in StreamingAiMessage:', {
                 messageId: message.id,
-                errorMessage: error.message,
-                errorStack: error.stack,
-                errorName: error.name,
+                errorMessage: error?.message,
+                errorStack: error?.stack,
+                errorName: error?.name,
                 fullError: error,
             })
             updateAiMessage(
                 message.id,
-                message.content || 'Error occurred',
-                'error'
+                message.content || error?.message || 'Error occurred',
+                'error',
+                error
             )
         },
     })
 
+    // Expose abort function to parent when this is the last message
+    useEffect(() => {
+        console.log('[StreamingAiMessage] Effect triggered', {
+            isLast,
+            status: message.status,
+            hasAbort: !!abort,
+            hasCallback: !!onAbortReady,
+        })
+        if (isLast && message.status === 'streaming') {
+            console.log(
+                '[StreamingAiMessage] Calling onAbortReady with abort function'
+            )
+            onAbortReady?.(abort)
+        }
+    }, [isLast, message.status, abort, onAbortReady])
+
     useEffect(() => {
         if (
             isLast &&
@@ -98,6 +125,8 @@ export const StreamingAiMessage = ({
             message={message}
             events={isLast ? events : []}
             streamingContent={streamingContentToPass}
+            error={message.error || (isLast && error ? error : undefined)}
+            showError={showError}
         />
     )
 }
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/chat.store.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/chat.store.ts
index dcf128117..1296bd511 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/chat.store.ts
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/chat.store.ts
@@ -1,3 +1,4 @@
+import { ApiError, isRateLimitError } from '../errorHandling'
 import { v4 as uuidv4 } from 'uuid'
 import { create } from 'zustand/react'
 
@@ -11,6 +12,7 @@ export interface ChatMessage {
     timestamp: number
     status?: 'streaming' | 'complete' | 'error'
     question?: string // For AI messages, store the question
+    error?: ApiError | Error | null
 }
 
 // Track which AI messages have had their requests sent (persists across remounts)
@@ -25,13 +27,16 @@ interface ChatState {
         updateAiMessage: (
             id: string,
             content: string,
-            status: ChatMessage['status']
+            status: ChatMessage['status'],
+            error?: ApiError | Error | null
         ) => void
         setConversationId: (conversationId: string) => void
         setAiProvider: (provider: AiProvider) => void
         clearChat: () => void
+        clearNon429Errors: () => void
         hasMessageBeenSent: (id: string) => boolean
         markMessageAsSent: (id: string) => void
+        cancelStreaming: () => void
     }
 }
 
@@ -73,11 +78,12 @@ export const chatStore = create<ChatState>((set) => ({
         updateAiMessage: (
             id: string,
             content: string,
-            status: ChatMessage['status']
+            status: ChatMessage['status'],
+            error: ApiError | Error | null = null
         ) => {
             set((state) => ({
                 chatMessages: state.chatMessages.map((msg) =>
-                    msg.id === id ? { ...msg, content, status } : msg
+                    msg.id === id ? { ...msg, content, status, error } : msg
                 ),
             }))
         },
@@ -95,11 +101,41 @@ export const chatStore = create<ChatState>((set) => ({
             set({ chatMessages: [], conversationId: null })
         },
 
+        clearNon429Errors: () => {
+            set((state) => ({
+                chatMessages: state.chatMessages.map((msg) => {
+                    if (
+                        msg.status === 'error' &&
+                        msg.error &&
+                        !isRateLimitError(msg.error)
+                    ) {
+                        return {
+                            ...msg,
+                            status: 'complete',
+                            error: null,
+                            content: '',
+                        }
+                    }
+                    return msg
+                }),
+            }))
+        },
+
         hasMessageBeenSent: (id: string) => sentAiMessageIds.has(id),
 
         markMessageAsSent: (id: string) => {
             sentAiMessageIds.add(id)
         },
+
+        cancelStreaming: () => {
+            set((state) => ({
+                chatMessages: state.chatMessages.map((msg) =>
+                    msg.type === 'ai' && msg.status === 'streaming'
+                        ? { ...msg, status: 'complete' }
+                        : msg
+                ),
+            }))
+        },
     },
 }))
 
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAi.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAi.ts
index 9335d1222..d88e99b05 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAi.ts
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAi.ts
@@ -1,9 +1,11 @@
+import { ApiError, isRateLimitError, isApiError } from '../errorHandling'
 import { AskAiEvent, AskAiEventSchema } from './AskAiEvent'
 import { useAiProvider } from './chat.store'
+import { useAskAiCooldown, useAskAiCooldownActions } from './useAskAiCooldown'
 import { useFetchEventSource } from './useFetchEventSource'
 import { useMessageThrottling } from './useMessageThrottling'
 import { EventSourceMessage } from '@microsoft/fetch-event-source'
-import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import * as z from 'zod'
 
 // Constants
@@ -19,7 +21,7 @@ export type AskAiRequest = z.infer<typeof AskAiRequestSchema>
 export interface UseAskAiResponse {
     events: AskAiEvent[]
     abort: () => void
-    error: Error | null
+    error: ApiError | Error | null
     sendQuestion: (question: string) => Promise<void>
 }
 
@@ -31,7 +33,9 @@ interface Props {
 
 export const useAskAi = (props: Props): UseAskAiResponse => {
     const [events, setEvents] = useState<AskAiEvent[]>([])
-    const [error, setError] = useState<Error | null>(null)
+    const [error, setError] = useState<ApiError | Error | null>(null)
+    const storeCooldown = useAskAiCooldown()
+    const { setCooldown } = useAskAiCooldownActions()
     const lastSentQuestionRef = useRef<string>('')
 
     // Get AI provider from store (user-controlled via UI)
@@ -117,6 +121,7 @@ export const useAskAi = (props: Props): UseAskAiResponse => {
         headers,
         onMessage,
         onError: (error) => {
+            if (!error) return
             console.error('[AI Provider] Error in useFetchEventSource:', {
                 errorMessage: error.message,
                 errorStack: error.stack,
@@ -124,12 +129,26 @@ export const useAskAi = (props: Props): UseAskAiResponse => {
                 fullError: error,
             })
             setError(error)
-            props.onError?.(error)
+            if (
+                isApiError(error) &&
+                isRateLimitError(error) &&
+                error.retryAfter
+            ) {
+                setCooldown(error.retryAfter)
+            }
+            if (error) {
+                props.onError?.(error)
+            }
         },
     })
 
     const sendQuestion = useCallback(
         async (question: string) => {
+            // Prevent sending during cooldown period (check store cooldown)
+            if (storeCooldown !== null && storeCooldown > 0) {
+                return
+            }
+
             if (question.trim() && question !== lastSentQuestionRef.current) {
                 abort()
                 setError(null)
@@ -151,7 +170,7 @@ export const useAskAi = (props: Props): UseAskAiResponse => {
                 }
             }
         },
-        [props.conversationId, sendMessage, abort, clearQueue]
+        [props.conversationId, sendMessage, abort, clearQueue, storeCooldown]
     )
 
     useEffect(() => {
@@ -167,15 +186,19 @@ export const useAskAi = (props: Props): UseAskAiResponse => {
         error,
         sendQuestion,
         abort: () => {
+            console.log('[useAskAi] Abort called')
             abort()
             clearQueue()
         },
     }
 }
 
-function createAskAiRequest(message: string, threadId?: string): AskAiRequest {
+function createAskAiRequest(
+    message: string,
+    conversationId?: string
+): AskAiRequest {
     return AskAiRequestSchema.parse({
         message,
-        threadId,
+        conversationId,
     })
 }
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAiCooldown.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAiCooldown.ts
new file mode 100644
index 000000000..90988f6ff
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAiCooldown.ts
@@ -0,0 +1,41 @@
+import { useCooldownState, useCooldownActions } from '../cooldown.store'
+
+export const useAskAiCooldown = () => {
+    const state = useCooldownState('askAi')
+    return state.cooldown
+}
+
+export const useIsAskAiAwaitingNewInput = () => {
+    const state = useCooldownState('askAi')
+    return state.awaitingNewInput
+}
+
+export const useIsAskAiCooldownActive = () => {
+    const countdown = useAskAiCooldown()
+    return countdown !== null && countdown > 0
+}
+
+export const useAskAiErrorCalloutState = () => {
+    const countdown = useAskAiCooldown()
+    const hasActiveCooldown = useIsAskAiCooldownActive()
+    const awaitingNewInput = useIsAskAiAwaitingNewInput()
+
+    return {
+        countdown,
+        hasActiveCooldown,
+        awaitingNewInput,
+    }
+}
+
+export const useAskAiCooldownActions = () => {
+    const actions = useCooldownActions()
+    return {
+        setCooldown: (cooldown: number | null) =>
+            actions.setCooldown('askAi', cooldown),
+        updateCooldown: (cooldown: number | null) =>
+            actions.updateCooldown('askAi', cooldown),
+        notifyCooldownFinished: () => actions.notifyCooldownFinished('askAi'),
+        acknowledgeCooldownFinished: () =>
+            actions.acknowledgeCooldownFinished('askAi'),
+    }
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAiRateLimitHandler.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAiRateLimitHandler.ts
new file mode 100644
index 000000000..dcfd62700
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useAskAiRateLimitHandler.ts
@@ -0,0 +1,6 @@
+import { ApiError } from '../errorHandling'
+import { useRateLimitHandler } from '../useRateLimitHandler'
+
+export function useAskAiRateLimitHandler(error: ApiError | Error | null) {
+    useRateLimitHandler('askAi', error)
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useFetchEventSource.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useFetchEventSource.ts
index 816c12cad..f492d848b 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useFetchEventSource.ts
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useFetchEventSource.ts
@@ -1,3 +1,8 @@
+import {
+    createApiErrorFromResponse,
+    ApiError,
+    isApiError,
+} from '../errorHandling'
 import {
     fetchEventSource,
     EventSourceMessage,
@@ -23,7 +28,7 @@ export interface UseFetchEventSourceOptions {
     apiEndpoint: string
     headers?: Record<string, string>
     onMessage?: (event: EventSourceMessage) => void
-    onError?: (error: Error) => void
+    onError?: (error: ApiError | Error | null) => void
     onOpen?: (response: Response) => Promise<void>
     onClose?: () => void
 }
@@ -46,7 +51,11 @@ export function useFetchEventSource<TPayload>({
     const abortControllerRef = useRef<AbortController | null>(null)
 
     const abort = useCallback(() => {
+        console.log('[useFetchEventSource] Abort called', {
+            hasController: !!abortControllerRef.current,
+        })
         if (abortControllerRef.current) {
+            console.log('[useFetchEventSource] Aborting controller')
             abortControllerRef.current.abort()
             abortControllerRef.current = null
         }
@@ -85,12 +94,16 @@ export function useFetchEventSource<TPayload>({
                         ) {
                             onOpen?.(response)
                             return
-                        } else if (
-                            response.status >= 400 &&
-                            response.status < 500 &&
-                            response.status !== 429
-                        ) {
-                            throw new FatalError()
+                        } else if (!response.ok) {
+                            // Create an error with status code and headers
+                            const error =
+                                await createApiErrorFromResponse(response)
+
+                            // Abort immediately to stop retries for any API error
+                            controller.abort()
+
+                            onError?.(error)
+                            throw error
                         } else {
                             throw new FatalError()
                         }
@@ -105,14 +118,34 @@ export function useFetchEventSource<TPayload>({
                         onMessage?.(msg)
                     },
                     onerror: (err) => {
-                        throw new FatalError(err?.message || 'Connection error')
+                        if (isApiError(err)) {
+                            // Abort immediately to stop retries for any API error
+                            controller.abort()
+                            onError?.(err)
+                            // Return null to stop retrying immediately
+                            return null
+                        } else {
+                            const error =
+                                err instanceof Error
+                                    ? err
+                                    : (new Error(
+                                          err?.message || 'Connection error'
+                                      ) as ApiError)
+                            onError?.(error)
+                            return undefined
+                        }
                     },
                     onclose: () => {
                         onClose?.()
                     },
                 })
             } catch (error) {
-                if (error instanceof Error && error.name !== 'AbortError') {
+                if (isApiError(error as Error | ApiError | null)) {
+                    onError?.(error as ApiError)
+                } else if (
+                    error instanceof Error &&
+                    error.name !== 'AbortError'
+                ) {
                     onError?.(error)
                 }
             }
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.test.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.test.tsx
index 734d31e8a..9253a098b 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.test.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.test.tsx
@@ -26,6 +26,7 @@ jest.mock('../AskAi/chat.store', () => ({
     useChatActions: jest.fn(() => ({
         submitQuestion: jest.fn(),
         clearChat: jest.fn(),
+        clearNon429Errors: jest.fn(),
         setAiProvider: jest.fn(),
     })),
 }))
@@ -33,13 +34,60 @@ jest.mock('../AskAi/chat.store', () => ({
 jest.mock('../modal.store', () => ({
     useModalActions: jest.fn(() => ({
         setModalMode: jest.fn(),
+        openModal: jest.fn(),
+        closeModal: jest.fn(),
+        toggleModal: jest.fn(),
     })),
 }))
 
+jest.mock('./useSearchCooldown', () => ({
+    useIsSearchCooldownActive: jest.fn(() => false),
+    useSearchCooldown: jest.fn(() => null),
+    useIsSearchAwaitingNewInput: jest.fn(() => false),
+    useSearchCooldownActions: jest.fn(() => ({
+        setCooldown: jest.fn(),
+        updateCooldown: jest.fn(),
+        notifyCooldownFinished: jest.fn(),
+        acknowledgeCooldownFinished: jest.fn(),
+    })),
+}))
+
+jest.mock('../AskAi/useAskAiCooldown', () => ({
+    useIsAskAiCooldownActive: jest.fn(() => false),
+}))
+
+jest.mock('../useCooldown', () => ({
+    useCooldown: jest.fn(),
+}))
+
 jest.mock('./SearchResults', () => ({
     SearchResults: () => <div data-testid="search-results">Search Results</div>,
 }))
 
+jest.mock('./useSearchQuery', () => ({
+    useSearchQuery: jest.fn(() => ({
+        isLoading: false,
+        isFetching: false,
+        data: null,
+        error: null,
+        cancelQuery: jest.fn(),
+    })),
+}))
+
+// Mock SearchOrAskAiErrorCallout
+jest.mock('../SearchOrAskAiErrorCallout', () => ({
+    SearchOrAskAiErrorCallout: () => null,
+}))
+
+// Mock rate limit handlers
+jest.mock('./useSearchRateLimitHandler', () => ({
+    useSearchRateLimitHandler: jest.fn(),
+}))
+
+jest.mock('../AskAi/useAskAiRateLimitHandler', () => ({
+    useAskAiRateLimitHandler: jest.fn(),
+}))
+
 const mockUseSearchTerm = jest.mocked(
     jest.requireMock('./search.store').useSearchTerm
 )
@@ -233,4 +281,33 @@ describe('Search Component', () => {
             expect(screen.getByTestId('search-results')).toBeInTheDocument()
         })
     })
+
+    describe('Search cancellation', () => {
+        const mockUseSearchQuery = jest.mocked(
+            jest.requireMock('./useSearchQuery').useSearchQuery
+        )
+        const mockCancelQuery = jest.fn()
+
+        beforeEach(() => {
+            mockCancelQuery.mockClear()
+        })
+
+        it('should provide cancelQuery function from useSearchQuery', () => {
+            // Arrange
+            mockUseSearchTerm.mockReturnValue('')
+            mockUseSearchQuery.mockReturnValue({
+                isLoading: false,
+                isFetching: false,
+                data: null,
+                error: null,
+                cancelQuery: mockCancelQuery,
+            })
+
+            // Act
+            render(<Search />)
+
+            // Assert - verify the hook is called and returns cancelQuery
+            expect(mockUseSearchQuery).toHaveBeenCalled()
+        })
+    })
 })
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.tsx
index fb0883ed6..985f2323f 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/Search.tsx
@@ -1,11 +1,15 @@
 /** @jsxImportSource @emotion/react */
 import { useChatActions } from '../AskAi/chat.store'
+import { useIsAskAiCooldownActive } from '../AskAi/useAskAiCooldown'
+import { SearchOrAskAiErrorCallout } from '../SearchOrAskAiErrorCallout'
 import { useModalActions } from '../modal.store'
 import { SearchResults } from './SearchResults'
 import { useSearchActions, useSearchTerm } from './search.store'
-import { EuiFieldSearch, EuiSpacer, EuiButton } from '@elastic/eui'
+import { useIsSearchCooldownActive } from './useSearchCooldown'
+import { useSearchQuery } from './useSearchQuery'
+import { EuiFieldText, EuiSpacer, EuiButton, EuiButtonIcon } from '@elastic/eui'
 import { css } from '@emotion/react'
-import * as React from 'react'
+import { useCallback, useRef, useState, useEffect } from 'react'
 
 const askAiButtonStyles = css`
     font-weight: bold;
@@ -16,32 +20,161 @@ export const Search = () => {
     const { setSearchTerm } = useSearchActions()
     const { submitQuestion, clearChat } = useChatActions()
     const { setModalMode } = useModalActions()
+    const isSearchCooldownActive = useIsSearchCooldownActive()
+    const isAskAiCooldownActive = useIsAskAiCooldownActive()
+    const inputRef = useRef<HTMLInputElement>(null)
+    const [inputValue, setInputValue] = useState(searchTerm)
+    const { isLoading, isFetching, cancelQuery, refetch } = useSearchQuery({
+        searchTerm,
+    })
+    const [isButtonVisible, setIsButtonVisible] = useState(false)
+    const [isAnimatingOut, setIsAnimatingOut] = useState(false)
+
+    const triggerSearch = useCallback(() => {
+        refetch()
+    }, [refetch])
+
+    const handleSearch = useCallback(
+        (e?: React.ChangeEvent<HTMLInputElement>) => {
+            const newValue = e?.target.value ?? inputRef.current?.value ?? ''
+            setInputValue(newValue)
+            setSearchTerm(newValue)
+        },
+        [
+            searchTerm,
+            isSearchCooldownActive,
+            isAskAiCooldownActive,
+            clearChat,
+            submitQuestion,
+            setModalMode,
+        ]
+    )
+    const handleChat = useCallback(() => {
+        if (isAskAiCooldownActive || searchTerm.trim() === '') {
+            return
+        }
+        // Always start a new conversation
+        clearChat()
+        submitQuestion(searchTerm)
+        setModalMode('askAi')
+    }, [
+        searchTerm,
+        isAskAiCooldownActive,
+        clearChat,
+        submitQuestion,
+        setModalMode,
+    ])
+
+    // Sync inputValue with searchTerm from store (when cleared externally)
+    useEffect(() => {
+        if (searchTerm === '' && inputValue !== '') {
+            setInputValue('')
+        }
+    }, [searchTerm, inputValue])
+
+    // Handle button visibility and animation
+    useEffect(() => {
+        const hasSearchTerm = searchTerm.trim() !== ''
+
+        if (hasSearchTerm && !isButtonVisible) {
+            // Show button with slide in animation
+            setIsButtonVisible(true)
+            setIsAnimatingOut(false)
+        } else if (!hasSearchTerm && isButtonVisible) {
+            // Start exit animation
+            setIsAnimatingOut(true)
+            // Remove button after animation completes
+            const timer = setTimeout(() => {
+                setIsButtonVisible(false)
+                setIsAnimatingOut(false)
+            }, 200) // Match animation duration
+            return () => clearTimeout(timer)
+        }
+    }, [searchTerm, isButtonVisible])
 
     return (
         <>
             <EuiSpacer size="m" />
-            <EuiFieldSearch
-                autoFocus
-                fullWidth
-                placeholder="Search the docs as you type"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                onSearch={(e) => {
-                    if (e.trim()) {
-                        // Always start a new conversation
-                        clearChat()
-                        submitQuestion(e)
-                        setModalMode('askAi')
-                    }
-                }}
-                isClearable
-            />
+            {!searchTerm.trim() && (
+                <SearchOrAskAiErrorCallout error={null} domain="search" />
+            )}
+            <div
+                css={css`
+                    position: relative;
+                `}
+            >
+                <EuiFieldText
+                    autoFocus
+                    inputRef={inputRef}
+                    fullWidth
+                    placeholder="Search the docs as you type"
+                    value={inputValue}
+                    onChange={handleSearch}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            handleChat()
+                        }
+                    }}
+                    disabled={isSearchCooldownActive}
+                />
+                <EuiButtonIcon
+                    aria-label="Search"
+                    css={css`
+                        position: absolute;
+                        right: 8px;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        border-radius: 9999px;
+                    `}
+                    color="primary"
+                    iconType="search"
+                    display={inputValue.trim() ? 'fill' : 'base'}
+                    onClick={triggerSearch}
+                    disabled={isSearchCooldownActive}
+                    isLoading={isLoading || isFetching}
+                />
+                {isButtonVisible && (
+                    <EuiButtonIcon
+                        aria-label={
+                            isLoading || isFetching
+                                ? 'Cancel search'
+                                : 'Clear search'
+                        }
+                        className={
+                            isAnimatingOut
+                                ? 'slideOutSearchOrAskAiInputAnimation'
+                                : 'slideInSearchOrAskAiInputAnimation'
+                        }
+                        css={css`
+                            position: absolute;
+                            right: 40px;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            border-radius: 9999px;
+                        `}
+                        color="accentSecondary"
+                        iconType={isLoading || isFetching ? 'cross' : 'trash'}
+                        display="fill"
+                        onClick={() => {
+                            if (isLoading || isFetching) {
+                                cancelQuery()
+                            } else {
+                                setSearchTerm('')
+                            }
+                        }}
+                    />
+                )}
+            </div>
             {searchTerm && (
                 <>
                     <EuiSpacer size="s" />
                     <AskAiButton
                         term={searchTerm}
                         onAsk={() => {
+                            // Prevent submission during countdown
+                            if (isAskAiCooldownActive) {
+                                return
+                            }
                             clearChat()
                             if (searchTerm.trim()) submitQuestion(searchTerm)
                             setModalMode('askAi')
@@ -55,10 +188,15 @@ export const Search = () => {
         </>
     )
 }
-
 const AskAiButton = ({ term, onAsk }: { term: string; onAsk: () => void }) => {
+    const isAskAiCooldownActive = useIsAskAiCooldownActive()
     return (
-        <EuiButton iconType="newChat" fullWidth onClick={onAsk}>
+        <EuiButton
+            iconType="newChat"
+            fullWidth
+            onClick={onAsk}
+            disabled={isAskAiCooldownActive}
+        >
             Ask AI about <span css={askAiButtonStyles}>"{term}"</span>
         </EuiButton>
     )
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults.tsx
index 98517e043..516cd6d2b 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults.tsx
@@ -1,3 +1,4 @@
+import { SearchOrAskAiErrorCallout } from '../SearchOrAskAiErrorCallout'
 import { useSearchTerm } from './search.store'
 import { SearchResultItem, useSearchQuery } from './useSearchQuery'
 import {
@@ -20,9 +21,11 @@ export const SearchResults = () => {
     const searchTerm = useSearchTerm()
     const [activePage, setActivePage] = useState(0)
     const debouncedSearchTerm = useDebounce(searchTerm, 300)
+
     useEffect(() => {
         setActivePage(0)
     }, [debouncedSearchTerm])
+
     const { data, error, isLoading, isFetching } = useSearchQuery({
         searchTerm,
         pageNumber: activePage + 1,
@@ -30,69 +33,76 @@ export const SearchResults = () => {
     const { euiTheme } = useEuiTheme()
 
     if (!searchTerm) {
-        return
-    }
-
-    if (error) {
-        return <div>Error loading search results: {error.message}</div>
+        return null
     }
 
     return (
-        <div>
-            <div
-                css={css`
-                    display: flex;
-                    gap: ${euiTheme.size.s};
-                    align-items: center;
-                `}
-            >
-                {isLoading || isFetching ? (
-                    <EuiLoadingSpinner size="s" />
-                ) : (
-                    <EuiIcon type="search" color="subdued" size="s" />
-                )}
-                <EuiText size="xs">
-                    Search results for{' '}
-                    <span
-                        css={css`
-                            font-weight: ${euiTheme.font.weight.bold};
-                        `}
-                    >
-                        {searchTerm}
-                    </span>
-                </EuiText>
-            </div>
-            <EuiSpacer size="s" />
-            {data && (
-                <>
-                    <ul>
-                        {data.results.map((result) => (
-                            <SearchResultListItem
-                                item={result}
-                                key={result.url}
-                            />
-                        ))}
-                    </ul>
-                    <EuiSpacer size="m" />
+        <>
+            <SearchOrAskAiErrorCallout
+                error={error}
+                domain="search"
+                title="Error loading search results"
+            />
+            {error && <EuiSpacer size="s" />}
+
+            {!error && (
+                <div>
                     <div
                         css={css`
                             display: flex;
-                            justify-content: center;
+                            gap: ${euiTheme.size.s};
+                            align-items: center;
                         `}
                     >
-                        <EuiPagination
-                            aria-label="Search results pages"
-                            pageCount={Math.min(data.pageCount, 10)}
-                            activePage={activePage}
-                            onPageClick={(activePage) =>
-                                setActivePage(activePage)
-                            }
-                        />
+                        {isLoading || isFetching ? (
+                            <EuiLoadingSpinner size="s" />
+                        ) : (
+                            <EuiIcon type="search" color="subdued" size="s" />
+                        )}
+                        <EuiText size="xs">
+                            Search results for{' '}
+                            <span
+                                css={css`
+                                    font-weight: ${euiTheme.font.weight.bold};
+                                `}
+                            >
+                                {searchTerm}
+                            </span>
+                        </EuiText>
                     </div>
-                </>
+                    <EuiSpacer size="s" />
+                    {data && (
+                        <>
+                            <ul>
+                                {data.results.map((result) => (
+                                    <SearchResultListItem
+                                        item={result}
+                                        key={result.url}
+                                    />
+                                ))}
+                            </ul>
+                            <EuiSpacer size="m" />
+                            <div
+                                css={css`
+                                    display: flex;
+                                    justify-content: center;
+                                `}
+                            >
+                                <EuiPagination
+                                    aria-label="Search results pages"
+                                    pageCount={Math.min(data.pageCount, 10)}
+                                    activePage={activePage}
+                                    onPageClick={(activePage) =>
+                                        setActivePage(activePage)
+                                    }
+                                />
+                            </div>
+                        </>
+                    )}
+                    <EuiHorizontalRule margin="m" />
+                </div>
             )}
-            <EuiHorizontalRule margin="m" />
-        </div>
+        </>
     )
 }
 
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchCooldown.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchCooldown.ts
new file mode 100644
index 000000000..d371b5655
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchCooldown.ts
@@ -0,0 +1,41 @@
+import { useCooldownState, useCooldownActions } from '../cooldown.store'
+
+export const useSearchCooldown = () => {
+    const state = useCooldownState('search')
+    return state.cooldown
+}
+
+export const useIsSearchAwaitingNewInput = () => {
+    const state = useCooldownState('search')
+    return state.awaitingNewInput
+}
+
+export const useIsSearchCooldownActive = () => {
+    const countdown = useSearchCooldown()
+    return countdown !== null && countdown > 0
+}
+
+export const useSearchErrorCalloutState = () => {
+    const countdown = useSearchCooldown()
+    const hasActiveCooldown = useIsSearchCooldownActive()
+    const awaitingNewInput = useIsSearchAwaitingNewInput()
+
+    return {
+        countdown,
+        hasActiveCooldown,
+        awaitingNewInput,
+    }
+}
+
+export const useSearchCooldownActions = () => {
+    const actions = useCooldownActions()
+    return {
+        setCooldown: (cooldown: number | null) =>
+            actions.setCooldown('search', cooldown),
+        updateCooldown: (cooldown: number | null) =>
+            actions.updateCooldown('search', cooldown),
+        notifyCooldownFinished: () => actions.notifyCooldownFinished('search'),
+        acknowledgeCooldownFinished: () =>
+            actions.acknowledgeCooldownFinished('search'),
+    }
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchQuery.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchQuery.ts
index b379898b6..7e085dc30 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchQuery.ts
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchQuery.ts
@@ -1,5 +1,17 @@
-import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import { createApiErrorFromResponse, shouldRetry } from '../errorHandling'
+import { ApiError } from '../errorHandling'
+import {
+    useIsSearchAwaitingNewInput,
+    useSearchCooldownActions,
+    useIsSearchCooldownActive,
+} from './useSearchCooldown'
+import {
+    keepPreviousData,
+    useQuery,
+    useQueryClient,
+} from '@tanstack/react-query'
 import { useDebounce } from '@uidotdev/usehooks'
+import { useRef, useEffect, useCallback } from 'react'
 import * as z from 'zod'
 
 const SearchResultItemParent = z.object({
@@ -36,12 +48,33 @@ type Props = {
 export const useSearchQuery = ({ searchTerm, pageNumber = 1 }: Props) => {
     const trimmedSearchTerm = searchTerm.trim()
     const debouncedSearchTerm = useDebounce(trimmedSearchTerm, 300)
-    return useQuery<SearchResponse>({
+    const isCooldownActive = useIsSearchCooldownActive()
+    const awaitingNewInput = useIsSearchAwaitingNewInput()
+    const { acknowledgeCooldownFinished } = useSearchCooldownActions()
+    const previousSearchTermRef = useRef(debouncedSearchTerm)
+    const queryClient = useQueryClient()
+
+    useEffect(() => {
+        if (previousSearchTermRef.current !== debouncedSearchTerm) {
+            if (awaitingNewInput) {
+                acknowledgeCooldownFinished()
+            }
+        }
+        previousSearchTermRef.current = debouncedSearchTerm
+    }, [debouncedSearchTerm, awaitingNewInput, acknowledgeCooldownFinished])
+
+    const shouldEnable =
+        !!trimmedSearchTerm &&
+        trimmedSearchTerm.length >= 1 &&
+        !isCooldownActive &&
+        !awaitingNewInput
+
+    const query = useQuery<SearchResponse, ApiError>({
         queryKey: [
             'search',
             { searchTerm: debouncedSearchTerm.toLowerCase(), pageNumber },
         ],
-        queryFn: async () => {
+        queryFn: async ({ signal }) => {
             if (!debouncedSearchTerm || debouncedSearchTerm.length < 1) {
                 return SearchResponse.parse({ results: [], totalResults: 0 })
             }
@@ -51,19 +84,34 @@ export const useSearchQuery = ({ searchTerm, pageNumber = 1 }: Props) => {
             })
 
             const response = await fetch(
-                '/docs/_api/v1/search?' + params.toString()
+                '/docs/_api/v1/search?' + params.toString(),
+                { signal }
             )
             if (!response.ok) {
-                throw new Error(
-                    'Failed to fetch search results: ' + response.statusText
-                )
+                throw await createApiErrorFromResponse(response)
             }
             const data = await response.json()
             return SearchResponse.parse(data)
         },
-        enabled: !!trimmedSearchTerm && trimmedSearchTerm.length >= 1,
+        enabled: shouldEnable,
         refetchOnWindowFocus: false,
+        refetchOnMount: !isCooldownActive,
         placeholderData: keepPreviousData,
         staleTime: 1000 * 60 * 5, // 5 minutes
+        retry: shouldRetry,
     })
+
+    const cancelQuery = useCallback(() => {
+        queryClient.cancelQueries({
+            queryKey: [
+                'search',
+                { searchTerm: debouncedSearchTerm.toLowerCase(), pageNumber },
+            ],
+        })
+    }, [queryClient, debouncedSearchTerm, pageNumber])
+
+    return {
+        ...query,
+        cancelQuery,
+    }
 }
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchRateLimitHandler.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchRateLimitHandler.ts
new file mode 100644
index 000000000..47d651322
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/useSearchRateLimitHandler.ts
@@ -0,0 +1,6 @@
+import { ApiError } from '../errorHandling'
+import { useRateLimitHandler } from '../useRateLimitHandler'
+
+export function useSearchRateLimitHandler(error: ApiError | Error | null) {
+    useRateLimitHandler('search', error)
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiErrorCallout.test.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiErrorCallout.test.tsx
new file mode 100644
index 000000000..7326b68c6
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiErrorCallout.test.tsx
@@ -0,0 +1,420 @@
+import { SearchOrAskAiErrorCallout } from './SearchOrAskAiErrorCallout'
+import { ApiError } from './errorHandling'
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+
+// Mock EuiCallOut and EuiSpacer
+jest.mock('@elastic/eui', () => ({
+    EuiCallOut: ({
+        title,
+        children,
+        color,
+        iconType,
+        size,
+    }: {
+        title: string
+        children: React.ReactNode
+        color: string
+        iconType: string
+        size: string
+    }) => (
+        <div
+            data-testid="eui-callout"
+            data-title={title}
+            data-color={color}
+            data-icon-type={iconType}
+            data-size={size}
+        >
+            {children}
+        </div>
+    ),
+    EuiSpacer: ({ size }: { size: string }) => (
+        <div data-testid="eui-spacer" data-size={size} />
+    ),
+}))
+
+// Mock rate limit handlers
+const mockUseSearchRateLimitHandler = jest.fn()
+const mockUseAskAiRateLimitHandler = jest.fn()
+
+jest.mock('./Search/useSearchRateLimitHandler', () => ({
+    useSearchRateLimitHandler: (error: ApiError | Error | null) =>
+        mockUseSearchRateLimitHandler(error),
+}))
+
+jest.mock('./AskAi/useAskAiRateLimitHandler', () => ({
+    useAskAiRateLimitHandler: (error: ApiError | Error | null) =>
+        mockUseAskAiRateLimitHandler(error),
+}))
+
+// Mock cooldown.store hooks
+const mockSearchState = {
+    countdown: null as number | null,
+    hasActiveCooldown: false,
+    awaitingNewInput: false,
+}
+
+const mockAskAiState = {
+    countdown: null as number | null,
+    hasActiveCooldown: false,
+    awaitingNewInput: false,
+}
+
+jest.mock('./Search/useSearchCooldown', () => ({
+    useSearchErrorCalloutState: jest.fn(() => mockSearchState),
+}))
+
+jest.mock('./AskAi/useAskAiCooldown', () => ({
+    useAskAiErrorCalloutState: jest.fn(() => mockAskAiState),
+}))
+
+const mockUseSearchErrorCalloutState = jest.mocked(
+    jest.requireMock('./Search/useSearchCooldown').useSearchErrorCalloutState
+)
+const mockUseAskAiErrorCalloutState = jest.mocked(
+    jest.requireMock('./AskAi/useAskAiCooldown').useAskAiErrorCalloutState
+)
+
+// Mock errorHandling utilities
+jest.mock('./errorHandling', () => {
+    const actual = jest.requireActual('./errorHandling')
+    return {
+        ...actual,
+        getErrorMessage: jest.fn((error: ApiError | Error | null) => {
+            if (!error) return 'Unknown error'
+            if ('statusCode' in error) {
+                return `Error ${error.statusCode}: ${error.message}`
+            }
+            return error.message
+        }),
+        isApiError: jest.fn((error: ApiError | Error | null) => {
+            return (
+                error instanceof Error &&
+                'statusCode' in error &&
+                error.name === 'ApiError'
+            )
+        }),
+        isRateLimitError: jest.fn((error: ApiError | Error | null) => {
+            return (
+                error instanceof Error &&
+                'statusCode' in error &&
+                (error as ApiError).statusCode === 429
+            )
+        }),
+    }
+})
+
+// Import after mocking to get the mocked versions
+const mockGetErrorMessage = jest.mocked(
+    jest.requireMock('./errorHandling').getErrorMessage
+)
+const mockIsRateLimitError = jest.mocked(
+    jest.requireMock('./errorHandling').isRateLimitError
+)
+
+describe('SearchOrAskAiErrorCallout', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+        mockSearchState.countdown = null
+        mockSearchState.hasActiveCooldown = false
+        mockSearchState.awaitingNewInput = false
+        mockAskAiState.countdown = null
+        mockAskAiState.hasActiveCooldown = false
+        mockAskAiState.awaitingNewInput = false
+        mockUseSearchErrorCalloutState.mockReturnValue(mockSearchState)
+        mockUseAskAiErrorCalloutState.mockReturnValue(mockAskAiState)
+        mockGetErrorMessage.mockImplementation(
+            (error: ApiError | Error | null) => {
+                if (!error) return 'Unknown error'
+                if ('statusCode' in error) {
+                    return `Error ${error.statusCode}: ${error.message}`
+                }
+                return error.message
+            }
+        )
+        mockIsRateLimitError.mockImplementation(
+            (error: ApiError | Error | null) => {
+                return (
+                    error instanceof Error &&
+                    'statusCode' in error &&
+                    (error as ApiError).statusCode === 429
+                )
+            }
+        )
+    })
+
+    describe('Rate limit handler calls', () => {
+        it('should call useSearchRateLimitHandler when domain is search', () => {
+            const error = new Error('Test error') as ApiError
+            error.statusCode = 500
+
+            render(<SearchOrAskAiErrorCallout error={error} domain="search" />)
+
+            expect(mockUseSearchRateLimitHandler).toHaveBeenCalledWith(error)
+            expect(mockUseAskAiRateLimitHandler).toHaveBeenCalledWith(null)
+        })
+
+        it('should call useAskAiRateLimitHandler when domain is askAi', () => {
+            const error = new Error('Test error') as ApiError
+            error.statusCode = 500
+
+            render(<SearchOrAskAiErrorCallout error={error} domain="askAi" />)
+
+            expect(mockUseAskAiRateLimitHandler).toHaveBeenCalledWith(error)
+            expect(mockUseSearchRateLimitHandler).toHaveBeenCalledWith(null)
+        })
+
+        it('should pass null to rate limit handler when error is null', () => {
+            render(<SearchOrAskAiErrorCallout error={null} domain="search" />)
+
+            expect(mockUseSearchRateLimitHandler).toHaveBeenCalledWith(null)
+        })
+    })
+
+    describe('Non-429 errors', () => {
+        it('should display non-429 error immediately', () => {
+            const error = new Error('Server error') as ApiError
+            error.statusCode = 500
+            error.name = 'ApiError'
+            mockGetErrorMessage.mockReturnValue('Error 500: Server error')
+
+            render(<SearchOrAskAiErrorCallout error={error} domain="search" />)
+
+            const callout = screen.getByTestId('eui-callout')
+            expect(callout).toBeInTheDocument()
+            expect(callout).toHaveAttribute(
+                'data-title',
+                'Sorry, there was an error'
+            )
+            expect(callout).toHaveAttribute('data-color', 'danger')
+            expect(
+                screen.getByText('Error 500: Server error')
+            ).toBeInTheDocument()
+        })
+
+        it('should use custom title when provided', () => {
+            const error = new Error('Network error') as ApiError
+            error.statusCode = 503
+            error.name = 'ApiError'
+            mockGetErrorMessage.mockReturnValue('Error 503: Network error')
+
+            render(
+                <SearchOrAskAiErrorCallout
+                    error={error}
+                    domain="search"
+                    title="Custom error title"
+                />
+            )
+
+            const callout = screen.getByTestId('eui-callout')
+            expect(callout).toHaveAttribute('data-title', 'Custom error title')
+        })
+
+        it('should show spacers when inline is false (default)', () => {
+            const error = new Error('Test error') as ApiError
+            error.statusCode = 400
+            error.name = 'ApiError'
+
+            render(<SearchOrAskAiErrorCallout error={error} domain="search" />)
+
+            const spacers = screen.getAllByTestId('eui-spacer')
+            expect(spacers).toHaveLength(2)
+            expect(spacers[0]).toHaveAttribute('data-size', 'm')
+            expect(spacers[1]).toHaveAttribute('data-size', 's')
+        })
+
+        it('should not show spacers when inline is true', () => {
+            const error = new Error('Test error') as ApiError
+            error.statusCode = 400
+            error.name = 'ApiError'
+
+            render(
+                <SearchOrAskAiErrorCallout
+                    error={error}
+                    domain="search"
+                    inline={true}
+                />
+            )
+
+            expect(screen.queryByTestId('eui-spacer')).not.toBeInTheDocument()
+        })
+
+        it('should handle regular Error objects', () => {
+            const error = new Error('Regular error message')
+            mockGetErrorMessage.mockReturnValue('Regular error message')
+
+            render(<SearchOrAskAiErrorCallout error={error} domain="askAi" />)
+
+            expect(
+                screen.getByText('Regular error message')
+            ).toBeInTheDocument()
+        })
+    })
+
+    describe('429 rate limit errors', () => {
+        it('should hide 429 error when cooldown is not active', () => {
+            const error = new Error('Rate limit') as ApiError
+            error.statusCode = 429
+            error.name = 'ApiError'
+            error.retryAfter = 10
+            mockIsRateLimitError.mockReturnValue(true)
+            mockSearchState.hasActiveCooldown = false
+
+            const { container } = render(
+                <SearchOrAskAiErrorCallout error={error} domain="search" />
+            )
+
+            expect(container.firstChild).toBeNull()
+        })
+
+        it('should hide 429 error when cooldown finished and pending acknowledgment', () => {
+            const error = new Error('Rate limit') as ApiError
+            error.statusCode = 429
+            error.name = 'ApiError'
+            error.retryAfter = 10
+            mockIsRateLimitError.mockReturnValue(true)
+            mockSearchState.hasActiveCooldown = true
+            mockSearchState.awaitingNewInput = true
+
+            const { container } = render(
+                <SearchOrAskAiErrorCallout error={error} domain="search" />
+            )
+
+            expect(container.firstChild).toBeNull()
+        })
+
+        it('should show 429 error when cooldown is active', () => {
+            const error = new Error('Rate limit') as ApiError
+            error.statusCode = 429
+            error.name = 'ApiError'
+            error.retryAfter = 10
+            mockIsRateLimitError.mockReturnValue(true)
+            mockSearchState.hasActiveCooldown = true
+            mockSearchState.countdown = 5
+            mockGetErrorMessage.mockReturnValue('Error 429: Rate limit')
+
+            render(<SearchOrAskAiErrorCallout error={error} domain="search" />)
+
+            const callout = screen.getByTestId('eui-callout')
+            expect(callout).toBeInTheDocument()
+            expect(callout).toHaveAttribute('data-title', 'Rate limit exceeded')
+        })
+
+        it('should update retryAfter with countdown when cooldown is active', () => {
+            const error = new Error('Rate limit') as ApiError
+            error.statusCode = 429
+            error.name = 'ApiError'
+            error.retryAfter = 10
+            mockIsRateLimitError.mockReturnValue(true)
+            mockSearchState.hasActiveCooldown = true
+            mockSearchState.countdown = 3
+            mockGetErrorMessage.mockReturnValue('Error 429: Rate limit')
+
+            render(<SearchOrAskAiErrorCallout error={error} domain="search" />)
+
+            // The component should update the error's retryAfter with countdown
+            // This is tested indirectly through getErrorMessage being called
+            expect(mockGetErrorMessage).toHaveBeenCalled()
+        })
+    })
+
+    describe('Cooldown state display', () => {
+        it('should show cooldown message when no error but cooldown is active', () => {
+            mockSearchState.hasActiveCooldown = true
+            mockSearchState.countdown = 15
+            mockGetErrorMessage.mockReturnValue(
+                'Rate limit exceeded. Please wait before trying again.'
+            )
+
+            render(<SearchOrAskAiErrorCallout error={null} domain="search" />)
+
+            const callout = screen.getByTestId('eui-callout')
+            expect(callout).toBeInTheDocument()
+            expect(callout).toHaveAttribute('data-title', 'Rate limit exceeded')
+        })
+
+        it('should not show anything when no error and no active cooldown', () => {
+            mockSearchState.hasActiveCooldown = false
+
+            const { container } = render(
+                <SearchOrAskAiErrorCallout error={null} domain="search" />
+            )
+
+            expect(container.firstChild).toBeNull()
+        })
+
+        it('should create synthetic 429 error when cooldown is active without error', () => {
+            mockAskAiState.hasActiveCooldown = true
+            mockAskAiState.countdown = 20
+            mockGetErrorMessage.mockReturnValue(
+                'Rate limit exceeded. Please wait before trying again.'
+            )
+
+            render(<SearchOrAskAiErrorCallout error={null} domain="askAi" />)
+
+            // Verify the callout is rendered with correct title and message
+            const callout = screen.getByTestId('eui-callout')
+            expect(callout).toBeInTheDocument()
+            expect(callout).toHaveAttribute('data-title', 'Rate limit exceeded')
+            expect(
+                screen.getByText(
+                    'Rate limit exceeded. Please wait before trying again.'
+                )
+            ).toBeInTheDocument()
+            // Verify getErrorMessage was called (component creates synthetic error)
+            expect(mockGetErrorMessage).toHaveBeenCalled()
+        })
+
+        it('should use countdown value for synthetic error retryAfter', () => {
+            mockSearchState.hasActiveCooldown = true
+            mockSearchState.countdown = 30
+            mockGetErrorMessage.mockReturnValue(
+                'Rate limit exceeded. Please wait before trying again.'
+            )
+
+            render(<SearchOrAskAiErrorCallout error={null} domain="search" />)
+
+            // Verify that getErrorMessage was called (component creates synthetic error)
+            expect(mockGetErrorMessage).toHaveBeenCalled()
+        })
+    })
+
+    describe('Domain-specific behavior', () => {
+        it('should use search state when domain is search', () => {
+            mockSearchState.hasActiveCooldown = true
+            mockSearchState.countdown = 10
+            mockGetErrorMessage.mockReturnValue('Rate limit message')
+
+            render(<SearchOrAskAiErrorCallout error={null} domain="search" />)
+
+            expect(mockUseSearchErrorCalloutState).toHaveBeenCalled()
+            expect(mockUseAskAiErrorCalloutState).toHaveBeenCalled()
+        })
+
+        it('should use askAi state when domain is askAi', () => {
+            mockAskAiState.hasActiveCooldown = true
+            mockAskAiState.countdown = 10
+            mockGetErrorMessage.mockReturnValue('Rate limit message')
+
+            render(<SearchOrAskAiErrorCallout error={null} domain="askAi" />)
+
+            expect(mockUseSearchErrorCalloutState).toHaveBeenCalled()
+            expect(mockUseAskAiErrorCalloutState).toHaveBeenCalled()
+        })
+    })
+
+    describe('Callout styling', () => {
+        it('should render callout with correct danger styling', () => {
+            const error = new Error('Test error') as ApiError
+            error.statusCode = 500
+            error.name = 'ApiError'
+
+            render(<SearchOrAskAiErrorCallout error={error} domain="search" />)
+
+            const callout = screen.getByTestId('eui-callout')
+            expect(callout).toHaveAttribute('data-color', 'danger')
+            expect(callout).toHaveAttribute('data-icon-type', 'error')
+            expect(callout).toHaveAttribute('data-size', 's')
+        })
+    })
+})
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiErrorCallout.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiErrorCallout.tsx
new file mode 100644
index 000000000..a6397918c
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiErrorCallout.tsx
@@ -0,0 +1,106 @@
+import { useAskAiErrorCalloutState } from './AskAi/useAskAiCooldown'
+import { useAskAiRateLimitHandler } from './AskAi/useAskAiRateLimitHandler'
+import { useSearchErrorCalloutState } from './Search/useSearchCooldown'
+import { useSearchRateLimitHandler } from './Search/useSearchRateLimitHandler'
+import {
+    ApiError,
+    getErrorMessage,
+    isApiError,
+    isRateLimitError,
+} from './errorHandling'
+import { EuiCallOut, EuiSpacer } from '@elastic/eui'
+
+interface SearchOrAskAiErrorCalloutProps {
+    error: ApiError | Error | null
+    domain: 'search' | 'askAi'
+    inline?: boolean
+    title?: string
+}
+
+/**
+ * Reusable error callout component for SearchOrAskAi.
+ */
+export function SearchOrAskAiErrorCallout({
+    error,
+    domain,
+    inline = false,
+    title = 'Sorry, there was an error',
+}: SearchOrAskAiErrorCalloutProps) {
+    // Use domain-specific hooks based on the domain prop
+    const searchState = useSearchErrorCalloutState()
+    const askAiState = useAskAiErrorCalloutState()
+    const state = domain === 'search' ? searchState : askAiState
+
+    // Use domain-specific rate limit handler
+    useSearchRateLimitHandler(domain === 'search' ? error : null)
+    useAskAiRateLimitHandler(domain === 'askAi' ? error : null)
+
+    const is429Error = error && isRateLimitError(error)
+
+    // Hide 429 errors when cooldown finished (user can retry)
+    if (is429Error && (!state.hasActiveCooldown || state.awaitingNewInput)) {
+        return null
+    }
+
+    // Show non-429 errors immediately
+    if (!is429Error && error) {
+        const errorMessage = getErrorMessage(error)
+        return (
+            <>
+                {!inline && <EuiSpacer size="m" />}
+                <EuiCallOut
+                    title={title}
+                    color="danger"
+                    iconType="error"
+                    size="s"
+                >
+                    {errorMessage}
+                </EuiCallOut>
+                {!inline && <EuiSpacer size="s" />}
+            </>
+        )
+    }
+
+    // Show cooldown message when active (even if no error prop)
+    if (!error && !state.hasActiveCooldown) {
+        return null
+    }
+
+    // Create synthetic 429 error for cooldown display
+    let syntheticError: ApiError | Error | null = error
+
+    if (!syntheticError && state.hasActiveCooldown) {
+        const newSyntheticError = new Error(
+            'Rate limit exceeded. Please wait before trying again.'
+        ) as ApiError
+        newSyntheticError.name = 'ApiError'
+        newSyntheticError.statusCode = 429
+        newSyntheticError.retryAfter = state.countdown ?? 1
+        syntheticError = newSyntheticError
+    }
+
+    if (state.hasActiveCooldown && isApiError(syntheticError)) {
+        if (state.countdown !== null && state.countdown > 0) {
+            syntheticError.retryAfter = state.countdown
+        }
+    }
+
+    const errorMessage = getErrorMessage(syntheticError)
+    const calloutTitle =
+        is429Error || state.hasActiveCooldown ? 'Rate limit exceeded' : title
+
+    return (
+        <>
+            {!inline && <EuiSpacer size="m" />}
+            <EuiCallOut
+                title={calloutTitle}
+                color="danger"
+                iconType="error"
+                size="s"
+            >
+                {errorMessage}
+            </EuiCallOut>
+            {!inline && <EuiSpacer size="s" />}
+        </>
+    )
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
index ec1b7f269..1520c9c8d 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx
@@ -1,6 +1,15 @@
 import { Chat } from './AskAi/Chat'
+import {
+    useAskAiCooldown,
+    useAskAiCooldownActions,
+} from './AskAi/useAskAiCooldown'
 import { Search } from './Search/Search'
+import {
+    useSearchCooldown,
+    useSearchCooldownActions,
+} from './Search/useSearchCooldown'
 import { useModalActions, useModalMode } from './modal.store'
+import { useCooldown } from './useCooldown'
 import {
     EuiBetaBadge,
     EuiText,
@@ -17,6 +26,26 @@ export const SearchOrAskAiModal = React.memo(() => {
     const modalMode = useModalMode()
     const { setModalMode } = useModalActions()
 
+    // Manage cooldown countdowns at the modal level so they continue running when switching tabs
+    const searchCooldown = useSearchCooldown()
+    const { notifyCooldownFinished: notifySearchCooldownFinished } =
+        useSearchCooldownActions()
+    const askAiCooldown = useAskAiCooldown()
+    const { notifyCooldownFinished: notifyAskAiCooldownFinished } =
+        useAskAiCooldownActions()
+
+    useCooldown({
+        domain: 'search',
+        cooldown: searchCooldown,
+        onCooldownFinished: () => notifySearchCooldownFinished(),
+    })
+
+    useCooldown({
+        domain: 'askAi',
+        cooldown: askAiCooldown,
+        onCooldownFinished: () => notifyAskAiCooldownFinished(),
+    })
+
     const tabs: EuiTabbedContentTab[] = useMemo(
         () => [
             {
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/cooldown.store.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/cooldown.store.ts
new file mode 100644
index 000000000..1d4d5b297
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/cooldown.store.ts
@@ -0,0 +1,84 @@
+import { ModalMode } from './modalmodes'
+import { create } from 'zustand/react'
+
+interface CooldownStateData {
+    cooldown: number | null
+    awaitingNewInput: boolean
+}
+
+interface CooldownState {
+    cooldowns: Record<ModalMode, CooldownStateData>
+    actions: {
+        setCooldown: (domain: ModalMode, cooldown: number | null) => void
+        updateCooldown: (domain: ModalMode, cooldown: number | null) => void
+        notifyCooldownFinished: (domain: ModalMode) => void
+        acknowledgeCooldownFinished: (domain: ModalMode) => void
+    }
+}
+
+const cooldownStore = create<CooldownState>((set) => ({
+    cooldowns: {
+        search: {
+            cooldown: null,
+            awaitingNewInput: false,
+        },
+        askAi: {
+            cooldown: null,
+            awaitingNewInput: false,
+        },
+    },
+    actions: {
+        setCooldown: (domain, cooldown) => {
+            set((state) => ({
+                cooldowns: {
+                    ...state.cooldowns,
+                    [domain]: {
+                        cooldown,
+                        awaitingNewInput: false,
+                    },
+                },
+            }))
+        },
+        updateCooldown: (domain, cooldown) => {
+            set((state) => ({
+                cooldowns: {
+                    ...state.cooldowns,
+                    [domain]: {
+                        ...state.cooldowns[domain],
+                        cooldown,
+                    },
+                },
+            }))
+        },
+        notifyCooldownFinished: (domain) => {
+            set((state) => ({
+                cooldowns: {
+                    ...state.cooldowns,
+                    [domain]: {
+                        cooldown: null,
+                        awaitingNewInput: true,
+                    },
+                },
+            }))
+        },
+        acknowledgeCooldownFinished: (domain) => {
+            set((state) => ({
+                cooldowns: {
+                    ...state.cooldowns,
+                    [domain]: {
+                        ...state.cooldowns[domain],
+                        awaitingNewInput: false,
+                    },
+                },
+            }))
+        },
+    },
+}))
+
+export const useCooldownActions = () => cooldownStore((state) => state.actions)
+
+export const useCooldownState = (domain: ModalMode) =>
+    cooldownStore((state) => state.cooldowns[domain])
+
+export { cooldownStore }
+export type { ModalMode } from './modalmodes'
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/errorHandling.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/errorHandling.tsx
new file mode 100644
index 000000000..6370f44dc
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/errorHandling.tsx
@@ -0,0 +1,174 @@
+import { ReactNode } from 'react'
+import * as z from 'zod'
+
+export type ErrorCode = '429' | '503' | '4xx' | '5xx' | 'unknown'
+
+export const ApiErrorSchema = z.object({
+    message: z.string(),
+    statusCode: z.number(),
+    retryAfter: z.number().optional(),
+    rateLimitScope: z.enum(['per-user', 'global']).optional(),
+})
+
+export type ApiError = z.infer<typeof ApiErrorSchema> & Error
+
+export function getErrorCode(statusCode: number): ErrorCode {
+    if (statusCode === 429) return '429'
+    if (statusCode === 503) return '503'
+    if (statusCode >= 400 && statusCode < 500) return '4xx'
+    if (statusCode >= 500) return '5xx'
+    return 'unknown'
+}
+
+export function getErrorMessage(error: ApiError | Error | null): ReactNode {
+    if (isApiError(error)) {
+        switch (getErrorCode(error.statusCode)) {
+            case '429':
+                return (
+                    <p>
+                        You have reached the temporary request limit. Wait{' '}
+                        {error.retryAfter} second
+                        {error.retryAfter !== 1 ? 's' : ''}, then try again.
+                    </p>
+                )
+            case '503':
+                return (
+                    <p>
+                        An unexpected error occurred. Wait a few seconds, then
+                        try again.
+                    </p>
+                )
+            case '4xx':
+                return (
+                    <>
+                        <p>
+                            We are unable to process your request.
+                            <br />
+                            Try rephrasing your question. For example, &quot;How
+                            do I configure an index in Elasticsearch?&quot;
+                        </p>
+                        <p>
+                            If you think this is a bug, open a{' '}
+                            <a
+                                href="https://github.com/elastic/docs-builder/issues/new?template=bug-report.yaml"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                GitHub issue.
+                            </a>
+                        </p>
+                    </>
+                )
+            case '5xx':
+                return (
+                    <>
+                        <p>We are unable to process your request.</p>
+                        <p>
+                            If you think this is a bug, open a{' '}
+                            <a
+                                href="https://github.com/elastic/docs-builder/issues/new?template=bug-report.yaml"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                GitHub issue.
+                            </a>
+                        </p>
+                    </>
+                )
+        }
+    }
+    return <p>An unexpected error occurred. Please try again.</p>
+}
+
+export async function createApiErrorFromResponse(
+    response: Response
+): Promise<ApiError | null> {
+    const statusCode = response.status
+
+    try {
+        const message = await response.text().catch((error) => error.message)
+
+        const errorSchema = ApiErrorSchema.parse({
+            message: message ?? '',
+            statusCode: statusCode,
+        })
+        if (statusCode === 429 || statusCode === 503) {
+            // Check raw statusCode for retryable errors
+            const retryAfterHeader = response.headers.get('Retry-After')
+            const rateLimitScopeHeader =
+                response.headers.get('X-Rate-Limit-Scope')
+
+            if (retryAfterHeader != null) {
+                errorSchema.retryAfter = parseInt(retryAfterHeader, 10)
+            }
+            if (rateLimitScopeHeader != null) {
+                const rateLimitScope =
+                    rateLimitScopeHeader === 'per-user' ||
+                    rateLimitScopeHeader === 'global'
+                        ? rateLimitScopeHeader
+                        : undefined
+                errorSchema.rateLimitScope = rateLimitScope as
+                    | 'per-user'
+                    | 'global'
+                    | undefined
+            }
+        }
+
+        const error = new Error(errorSchema.message) as ApiError
+        error.name = 'ApiError'
+        error.statusCode = errorSchema.statusCode
+        error.retryAfter = errorSchema.retryAfter
+        error.rateLimitScope = errorSchema.rateLimitScope
+        return error
+    } catch (err) {
+        const errorSchema = ApiErrorSchema.parse({
+            message: `Request failed with status ${statusCode}. Error: ${(err as Error)?.message ?? 'Unknown error'}`,
+            statusCode: statusCode,
+            retryAfter: undefined,
+            rateLimitScope: undefined,
+        })
+        const error = new Error(errorSchema.message) as ApiError
+        error.name = 'ApiError'
+        error.statusCode = errorSchema.statusCode
+        return error
+    }
+}
+
+export function shouldRetry(
+    failureCount: number,
+    error: ApiError | null
+): boolean {
+    // Don't retry if we've exhausted retries
+    if (failureCount >= 3) return false
+    // Don't retry for 429 (rate limit) or 503 (service unavailable)
+    if (error && isRetryableError(error)) {
+        return false
+    }
+    // Retry for other errors (up to 3 times)
+    return true
+}
+
+export function isApiError(error: ApiError | Error | null): error is ApiError {
+    return (
+        error instanceof Error &&
+        'statusCode' in error &&
+        error.name === 'ApiError'
+    )
+}
+
+/**
+ * Checks if an error is a rate limit error (429).
+ */
+export function isRateLimitError(error: ApiError | Error | null): boolean {
+    return isApiError(error) && error.statusCode === 429
+}
+
+/**
+ * Checks if an error is retryable (429 or 503).
+ */
+export function isRetryableError(error: ApiError | Error | null): boolean {
+    return (
+        isApiError(error) &&
+        (error.statusCode === 429 || error.statusCode === 503)
+    )
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/modal.store.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/modal.store.ts
index 39d978e2d..7c1741485 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/modal.store.ts
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/modal.store.ts
@@ -1,7 +1,6 @@
+import { ModalMode } from './modalmodes'
 import { create } from 'zustand/react'
 
-export type ModalMode = 'search' | 'askAi'
-
 interface ModalState {
     isOpen: boolean
     mode: ModalMode
@@ -28,3 +27,6 @@ export const useModalIsOpen = () => modalStore((state) => state.isOpen)
 export const useModalActions = () => modalStore((state) => state.actions)
 export const useModalMode = () =>
     modalStore((state: ModalState): ModalMode => state.mode)
+
+export { modalStore }
+export type { ModalMode } from './modalmodes'
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/modalmodes.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/modalmodes.ts
new file mode 100644
index 000000000..fed368358
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/modalmodes.ts
@@ -0,0 +1,2 @@
+/* Defined execution categories for the modal */
+export type ModalMode = 'search' | 'askAi'
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useCooldown.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useCooldown.ts
new file mode 100644
index 000000000..11a2cbd03
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useCooldown.ts
@@ -0,0 +1,59 @@
+import { useCooldownActions } from './cooldown.store'
+import { ModalMode } from './modalmodes'
+import { useEffect, useRef } from 'react'
+
+interface UseCooldownParams {
+    domain: ModalMode
+    cooldown: number | null
+    onCooldownFinished: () => void
+}
+
+export function useCooldown({
+    domain,
+    cooldown,
+    onCooldownFinished,
+}: UseCooldownParams) {
+    const { updateCooldown } = useCooldownActions()
+    const intervalRef = useRef<number | null>(null)
+    const onFinishedRef = useRef(onCooldownFinished)
+
+    useEffect(() => {
+        onFinishedRef.current = onCooldownFinished
+    }, [onCooldownFinished])
+
+    useEffect(() => {
+        // Clear existing interval
+        if (intervalRef.current !== null) {
+            clearInterval(intervalRef.current)
+            intervalRef.current = null
+        }
+
+        // Start countdown if cooldown is set
+        if (cooldown !== null && cooldown > 0) {
+            // Use a ref to track current countdown value across interval ticks
+            const countdownRef = { current: cooldown }
+
+            intervalRef.current = window.setInterval(() => {
+                countdownRef.current -= 1
+
+                if (countdownRef.current <= 0) {
+                    if (intervalRef.current !== null) {
+                        clearInterval(intervalRef.current)
+                        intervalRef.current = null
+                    }
+                    updateCooldown(domain, null)
+                    onFinishedRef.current()
+                } else {
+                    updateCooldown(domain, countdownRef.current)
+                }
+            }, 1000)
+        }
+
+        return () => {
+            if (intervalRef.current !== null) {
+                clearInterval(intervalRef.current)
+                intervalRef.current = null
+            }
+        }
+    }, [domain, cooldown, updateCooldown])
+}
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useRateLimitHandler.ts b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useRateLimitHandler.ts
new file mode 100644
index 000000000..ddfe2fda5
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useRateLimitHandler.ts
@@ -0,0 +1,50 @@
+import {
+    useCooldownState,
+    useCooldownActions,
+    ModalMode,
+} from './cooldown.store'
+import { ApiError, isRateLimitError, isApiError } from './errorHandling'
+import { useEffect, useRef } from 'react'
+
+/**
+ * Generic hook to handle rate limit errors (429) and manage cooldown state.
+ * @param domain - The domain to manage cooldown for ('search' or 'askAi')
+ * @param error - The error to check for rate limiting
+ */
+export function useRateLimitHandler(
+    domain: ModalMode,
+    error: ApiError | Error | null
+) {
+    const state = useCooldownState(domain)
+    const { setCooldown } = useCooldownActions()
+    const previousErrorRetryAfterRef = useRef<number | null>(null)
+
+    useEffect(() => {
+        // Don't process if cooldown just finished and waiting for acknowledgment
+        if (state.awaitingNewInput) {
+            return
+        }
+
+        if (error && isApiError(error) && isRateLimitError(error)) {
+            const retryAfter = error.retryAfter
+            if (retryAfter !== undefined && retryAfter !== null) {
+                const isNewError =
+                    previousErrorRetryAfterRef.current !== retryAfter
+
+                const shouldSetCooldown =
+                    isNewError &&
+                    ((state.cooldown === null &&
+                        previousErrorRetryAfterRef.current === null) ||
+                        (state.cooldown !== null &&
+                            state.cooldown < retryAfter))
+
+                if (shouldSetCooldown) {
+                    setCooldown(domain, retryAfter)
+                    previousErrorRetryAfterRef.current = retryAfter
+                }
+            }
+        } else if (!error) {
+            previousErrorRetryAfterRef.current = null
+        }
+    }, [error, domain, state.cooldown, state.awaitingNewInput, setCooldown])
+}