diff --git a/package.json b/package.json
index fe5bebe9c..50aa8ddff 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@fingerprintjs/fingerprintjs-pro-react": "^2.7.1",
     "@floating-ui/react": "^0.27.19",
     "@kapaai/react-sdk": "^0.9.10",
     "@modelcontextprotocol/sdk": "^1.29.0",
@@ -131,7 +132,7 @@
     "@tanstack/devtools-vite": "^0.7.0",
     "@tanstack/react-devtools": "^0.10.5",
     "@tanstack/react-query-devtools": "^5.100.11",
-    "@tanstack/redact": "^0.0.12",
+    "@tanstack/redact": "^0.0.13",
     "@types/hast": "^3.0.4",
     "@types/node": "^25.5.0",
     "@types/pg": "^8.20.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9df46d2ea..45dfb9012 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
 
   .:
     dependencies:
+      '@fingerprintjs/fingerprintjs-pro-react':
+        specifier: ^2.7.1
+        version: 2.7.1
       '@floating-ui/react':
         specifier: ^0.27.19
         version: 0.27.19(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -322,8 +325,8 @@ importers:
         specifier: ^5.100.11
         version: 5.100.11(@tanstack/react-query@5.100.11(react@19.2.3))(react@19.2.3)
       '@tanstack/redact':
-        specifier: ^0.0.12
-        version: 0.0.12(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.8.3))
+        specifier: ^0.0.13
+        version: 0.0.13(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.8.3))
       '@types/hast':
         specifier: ^3.0.4
         version: 3.0.4
@@ -3900,8 +3903,8 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
-  '@tanstack/redact@0.0.12':
-    resolution: {integrity: sha512-LwUUMUi5p4CkG/YgLqS51x+tUX6H5vfQmJLf7s2rYLuxtskQrhHE/D35JT+oUJaQzXjCU4patJ/6JVFVcL0yUw==}
+  '@tanstack/redact@0.0.13':
+    resolution: {integrity: sha512-pcyIIB0b2Xa5v+6YOQb03u4ngK39Lr93WxiYADEMfbC/AKzcsepAl6qnxBShMZ6WlnftLm48NApmv4X690vFnQ==}
     peerDependencies:
       vite: '>=5'
     peerDependenciesMeta:
@@ -11973,7 +11976,7 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  '@tanstack/redact@0.0.12(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.8.3))':
+  '@tanstack/redact@0.0.13(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.8.3))':
     optionalDependencies:
       vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.8.3)
 
diff --git a/src/components/AppDevtools.tsx b/src/components/AppDevtools.tsx
index 0912d8b35..7fa587ed6 100644
--- a/src/components/AppDevtools.tsx
+++ b/src/components/AppDevtools.tsx
@@ -8,6 +8,9 @@ export function AppDevtools() {
 
   return (
     <TanStackDevtools
+      config={{
+        customTrigger: <span className="hidden" aria-hidden="true" />,
+      }}
       plugins={[
         {
           name: 'TanStack Query',
diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx
index 3cf7f42eb..f348e9c40 100644
--- a/src/components/DocsLayout.tsx
+++ b/src/components/DocsLayout.tsx
@@ -857,7 +857,16 @@ export function DocsLayout({
     const groupContent = (
       <>
         {group.collapsible ? (
-          <summary className="text-[.8em] font-bold leading-4 px-2 ts-sidebar-label">
+          <summary
+            className="text-[.8em] font-bold leading-4 px-2 ts-sidebar-label"
+            onClick={(event) => {
+              event.preventDefault()
+              setOpenGroups((prev) => ({
+                ...prev,
+                [groupKey]: !(prev[groupKey] ?? false),
+              }))
+            }}
+          >
             {group.label}
           </summary>
         ) : (
@@ -1013,14 +1022,6 @@ export function DocsLayout({
         key={`group-${i}`}
         className="[&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em] [&>summary]:marker:leading-4 relative select-none"
         open={openGroups[groupKey] ?? false}
-        onToggle={(event) => {
-          const nextOpen = event.currentTarget.open
-          setOpenGroups((prev) =>
-            prev[groupKey] === nextOpen
-              ? prev
-              : { ...prev, [groupKey]: nextOpen },
-          )
-        }}
       >
         {groupContent}
       </details>
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 555cecf63..2754c6a1e 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -21,6 +21,9 @@ type DropdownContentProps = {
   align?: 'start' | 'center' | 'end'
   sideOffset?: number
   portal?: boolean
+  onFocus?: React.FocusEventHandler<HTMLDivElement>
+  onPointerEnter?: React.PointerEventHandler<HTMLDivElement>
+  onPointerLeave?: React.PointerEventHandler<HTMLDivElement>
 }
 
 type DropdownItemProps = {
@@ -65,11 +68,17 @@ export function DropdownContent({
   align = 'end',
   sideOffset = 6,
   portal = true,
+  onFocus,
+  onPointerEnter,
+  onPointerLeave,
 }: DropdownContentProps) {
   const content = (
     <DropdownMenu.Content
       align={align}
       sideOffset={sideOffset}
+      onFocus={onFocus}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
       className={twMerge(
         'dropdown-content z-[1200] min-w-48 rounded-lg p-1.5',
         'border border-gray-200 dark:border-gray-700',
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index eb73a9cb9..330ff4132 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -8,6 +8,9 @@ const LazyNavbarAuthControls = React.lazy(() =>
     default: m.NavbarAuthControls,
   })),
 )
+const LazyAiDock = React.lazy(() =>
+  import('./SearchModal').then((m) => ({ default: m.AiDock })),
+)
 import { NavbarCartButton } from './NavbarCartButton'
 import { Link, useLocation, useMatches } from '@tanstack/react-router'
 import { NetlifyImage } from './NetlifyImage'
@@ -29,9 +32,10 @@ import {
   Sparkles,
 } from 'lucide-react'
 import { ThemeToggle } from './ThemeToggle'
-import { SearchButton } from './SearchButton'
+import { AiDockButton, SearchButton } from './SearchButton'
 import { libraries, SIDEBAR_LIBRARY_IDS, type LibrarySlim } from '~/libraries'
 import { useClickOutside } from '~/hooks/useClickOutside'
+import { useSearchContext } from '~/contexts/SearchContext'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import {
   Dropdown,
@@ -137,6 +141,27 @@ const MobileCard = ({
   </Card>
 )
 
+function AiDockMount() {
+  const { isAiDockOpen } = useSearchContext()
+  const [hasActivated, setHasActivated] = React.useState(isAiDockOpen)
+
+  React.useEffect(() => {
+    if (isAiDockOpen) {
+      setHasActivated(true)
+    }
+  }, [isAiDockOpen])
+
+  if (!hasActivated && !isAiDockOpen) {
+    return null
+  }
+
+  return (
+    <React.Suspense fallback={null}>
+      <LazyAiDock />
+    </React.Suspense>
+  )
+}
+
 export function Navbar({ children }: { children: React.ReactNode }) {
   const matches = useMatches()
 
@@ -265,11 +290,12 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       </div>
       <div className="flex items-center gap-1.5 sm:gap-2">
         <div className="hidden min-[750px]:block">{socialLinks}</div>
+        <ThemeToggle />
         <div className="hidden sm:block">
-          <SearchButton />
+          <SearchButton iconOnly />
         </div>
-        <ThemeToggle />
         <NavbarCartButton />
+        <AiDockButton />
         <div className="flex items-center gap-2">
           {canLoadAuthControls ? (
             <React.Suspense fallback={loginButtonFallback}>
@@ -747,6 +773,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
           {children}
         </div>
       </div>
+      <AiDockMount />
     </>
   )
 }
diff --git a/src/components/SearchButton.tsx b/src/components/SearchButton.tsx
index 9b80de02d..615580267 100644
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -2,27 +2,133 @@ import * as React from 'react'
 import { Command, Search } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { Button } from '~/ui'
+import { useSearchContext } from '~/contexts/SearchContext'
 
 interface SearchButtonProps {
   className?: string
-  children?: React.ReactNode
+  iconOnly?: boolean
 }
 
-export function SearchButton({ className }: SearchButtonProps) {
+function AiGlyph() {
+  return (
+    <span className="relative flex h-5 w-5 items-center justify-center">
+      <span className="text-xs font-black leading-none tracking-normal">
+        AI
+      </span>
+    </span>
+  )
+}
+
+export function SearchButton({
+  className,
+  iconOnly = false,
+}: SearchButtonProps) {
+  const { openSearch } = useSearchContext()
+
   return (
     <Button
       type="button"
-      data-search-trigger
+      data-search-trigger="true"
+      onClick={openSearch}
+      aria-label="Search TanStack docs"
       aria-haspopup="dialog"
-      variant="ghost"
-      size="xs"
-      className={twMerge('gap-2 bg-gray-500/5 dark:bg-gray-500/30', className)}
+      variant={iconOnly ? 'icon' : 'ghost'}
+      color="gray"
+      size={iconOnly ? 'icon-sm' : 'xs'}
+      title="Search"
+      className={twMerge(
+        iconOnly
+          ? 'h-7 w-7 rounded-md p-0'
+          : 'gap-2 bg-gray-500/5 dark:bg-gray-500/30',
+        className,
+      )}
     >
       <Search className="w-3.5 h-3.5" />
-      <span>Search...</span>
-      <div className="flex items-center bg-gray-500/10 dark:bg-gray-500/30 rounded px-1 py-0.5 gap-0.5 text-[10px] whitespace-nowrap">
-        <Command className="w-2.5 h-2.5" /> K
-      </div>
+      {iconOnly ? (
+        <span className="sr-only">Search</span>
+      ) : (
+        <>
+          <span>Search...</span>
+          <div className="flex items-center bg-gray-500/10 dark:bg-gray-500/30 rounded px-1 py-0.5 gap-0.5 text-[10px] whitespace-nowrap">
+            <Command className="w-2.5 h-2.5" /> K
+          </div>
+        </>
+      )}
+    </Button>
+  )
+}
+
+export function AiDockButton({ className }: { className?: string }) {
+  const {
+    cancelAiDockHoverClose,
+    closeAiDock,
+    isAiDockDirty,
+    isAiDockOpen,
+    openAiDock,
+    scheduleAiDockHoverClose,
+  } = useSearchContext()
+  const openedByHoverRef = React.useRef(false)
+
+  const handlePointerEnter = (event: React.PointerEvent<HTMLButtonElement>) => {
+    if (event.pointerType === 'touch') {
+      return
+    }
+
+    cancelAiDockHoverClose()
+
+    if (isAiDockDirty && !isAiDockOpen) {
+      openedByHoverRef.current = true
+      openAiDock()
+    }
+  }
+
+  const handlePointerLeave = (event: React.PointerEvent<HTMLButtonElement>) => {
+    if (event.pointerType === 'touch') {
+      return
+    }
+
+    openedByHoverRef.current = false
+
+    if (isAiDockDirty) {
+      scheduleAiDockHoverClose()
+    }
+  }
+
+  const handleClick = () => {
+    if (openedByHoverRef.current) {
+      openedByHoverRef.current = false
+      return
+    }
+
+    if (isAiDockOpen) {
+      closeAiDock()
+      return
+    }
+
+    openAiDock()
+  }
+
+  return (
+    <Button
+      type="button"
+      onClick={handleClick}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      aria-label={isAiDockOpen ? 'Close AI panel' : 'Open AI panel'}
+      aria-haspopup="dialog"
+      aria-pressed={isAiDockOpen}
+      variant="ghost"
+      size="icon-sm"
+      title="Ask AI"
+      className={twMerge(
+        'h-7 w-8 rounded-md p-0 bg-gray-500/5 dark:bg-gray-500/30',
+        isAiDockOpen &&
+          'bg-cyan-500/10 text-cyan-700 dark:bg-cyan-400/15 dark:text-cyan-300 border-cyan-500/20 dark:border-cyan-300/20',
+        className,
+      )}
+    >
+      <AiGlyph />
+      <span className="sr-only">Ask AI</span>
     </Button>
   )
 }
diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
index 021982fc5..e099a6a16 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { createPortal } from 'react-dom'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
@@ -19,7 +21,6 @@ import {
 import { liteClient } from 'algoliasearch/lite'
 import {
   X,
-  CircleX,
   Search,
   SearchSlash,
   ChevronDown,
@@ -29,7 +30,7 @@ import {
   Copy,
   ExternalLink,
   History,
-  RotateCcw,
+  MessageSquarePlus,
   ThumbsDown,
   ThumbsUp,
   Maximize2,
@@ -186,6 +187,53 @@ const searchClient = liteClient(
   '10c34d6a5c89f6048cf644d601e65172',
 )
 const searchIndexName = 'tanstack-test'
+const AI_DOCK_WIDTH_STORAGE_KEY = 'tanstack-ai-dock-width'
+const AI_DOCK_MIN_WIDTH = 320
+const AI_DOCK_DEFAULT_WIDTH = 360
+const AI_DOCK_MAX_WIDTH_RATIO = 0.5
+const AI_DOCK_MAXIMIZED_WIDTH = 1200
+
+type SearchSurface = 'modal' | 'dock'
+type AiDockStyle = React.CSSProperties & {
+  '--ai-dock-width': string
+  '--ai-dock-max-width': string
+}
+
+function getAiDockMaxWidth(viewportWidth: number) {
+  return Math.max(
+    AI_DOCK_MIN_WIDTH,
+    Math.floor(viewportWidth * AI_DOCK_MAX_WIDTH_RATIO),
+  )
+}
+
+function clampAiDockWidth(width: number, viewportWidth: number) {
+  return Math.min(
+    Math.max(Math.round(width), AI_DOCK_MIN_WIDTH),
+    getAiDockMaxWidth(viewportWidth),
+  )
+}
+
+function readAiDockWidth() {
+  if (typeof window === 'undefined') {
+    return AI_DOCK_DEFAULT_WIDTH
+  }
+
+  const storedWidth = Number(localStorage.getItem(AI_DOCK_WIDTH_STORAGE_KEY))
+
+  if (!Number.isFinite(storedWidth)) {
+    return clampAiDockWidth(AI_DOCK_DEFAULT_WIDTH, window.innerWidth)
+  }
+
+  return clampAiDockWidth(storedWidth, window.innerWidth)
+}
+
+function writeAiDockWidth(width: number) {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  localStorage.setItem(AI_DOCK_WIDTH_STORAGE_KEY, String(Math.round(width)))
+}
 
 function buildSearchFilters({
   selectedLibrary,
@@ -434,6 +482,25 @@ function DynamicFilters() {
   )
 }
 
+function getInternalLinkTarget(hrefValue: string) {
+  const internalUrl = hrefValue.includes('//tanstack.com')
+    ? hrefValue.split('//tanstack.com')[1]
+    : hrefValue
+  const [internalPath, internalHash] = internalUrl.split('#')
+  const isInternal =
+    hrefValue.includes('//tanstack.com') || hrefValue.startsWith('/')
+  const isRoutableInternal =
+    internalPath.startsWith('/') &&
+    !internalPath.startsWith('//') &&
+    internalPath !== '/api' &&
+    !internalPath.startsWith('/api/') &&
+    !/\.[a-z0-9]+$/i.test(internalPath)
+
+  return isInternal && isRoutableInternal
+    ? { path: internalPath, hash: internalHash }
+    : null
+}
+
 const SafeLink = React.forwardRef(
   (
     {
@@ -449,20 +516,9 @@ const SafeLink = React.forwardRef(
     ref: React.Ref<HTMLAnchorElement>,
   ) => {
     const hrefValue = href ?? ''
-    const internalUrl = hrefValue.includes('//tanstack.com')
-      ? hrefValue.split('//tanstack.com')[1]
-      : hrefValue
-    const [internalPath, internalHash] = internalUrl.split('#')
-    const isInternal =
-      hrefValue.includes('//tanstack.com') || hrefValue.startsWith('/')
-    const isRoutableInternal =
-      internalPath.startsWith('/') &&
-      !internalPath.startsWith('//') &&
-      internalPath !== '/api' &&
-      !internalPath.startsWith('/api/') &&
-      !/\.[a-z0-9]+$/i.test(internalPath)
-
-    if (!isInternal || !isRoutableInternal) {
+    const internalTarget = getInternalLinkTarget(hrefValue)
+
+    if (!internalTarget) {
       return (
         <a
           href={href}
@@ -481,8 +537,8 @@ const SafeLink = React.forwardRef(
 
     return (
       <Link
-        to={internalPath}
-        hash={internalHash}
+        to={internalTarget.path}
+        hash={internalTarget.hash}
         className={className}
         onKeyDown={onKeyDown}
         role={role}
@@ -894,13 +950,71 @@ function SourceScopeBadges({
   )
 }
 
+function ChatControlTooltip({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      aria-hidden="true"
+      data-chat-control-tooltip
+      className="pointer-events-none absolute right-0 top-full z-30 mt-1.5 whitespace-nowrap rounded-md bg-gray-900 px-2 py-1 text-[11px] font-medium text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100 group-focus:opacity-100 group-focus-visible:opacity-100 dark:bg-gray-100 dark:text-gray-900"
+    >
+      {children}
+    </span>
+  )
+}
+
+const compactChatControlClass =
+  'group relative h-8 w-8 justify-center rounded-lg bg-transparent shadow-none border-transparent hover:border-gray-200 focus-visible:border-gray-200 dark:hover:border-white/10 dark:focus-visible:border-white/10'
+
+function DockMaximizeButton({
+  isMaximized,
+  onToggle,
+}: {
+  isMaximized: boolean
+  onToggle: () => void
+}) {
+  const label = isMaximized ? 'Minimize panel' : 'Maximize panel'
+
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      title={label}
+      aria-label={label}
+      aria-pressed={isMaximized}
+      className={twMerge(
+        'pointer-events-auto flex items-center text-xs backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 disabled:opacity-40 disabled:hover:text-gray-400 dark:disabled:hover:text-gray-500 shadow-sm transition-colors',
+        compactChatControlClass,
+      )}
+    >
+      {isMaximized ? (
+        <Minimize2 className="w-3.5 h-3.5" />
+      ) : (
+        <Maximize2 className="w-3.5 h-3.5" />
+      )}
+      <ChatControlTooltip>{label}</ChatControlTooltip>
+    </button>
+  )
+}
+
 function CopyChatButton({
   conversation,
+  compact = false,
 }: {
   conversation: Array<KapaDisplayQA>
+  compact?: boolean
 }) {
   const [copied, setCopied] = React.useState(false)
   const hasConversation = conversation.length > 0
+  const label = copied ? 'Copied' : 'Copy chat'
+  const resetCopiedTimerRef = React.useRef<number | null>(null)
+
+  React.useEffect(() => {
+    return () => {
+      if (resetCopiedTimerRef.current) {
+        window.clearTimeout(resetCopiedTimerRef.current)
+      }
+    }
+  }, [])
 
   const handleCopy = () => {
     const text = conversation
@@ -916,8 +1030,15 @@ function CopyChatButton({
     }
 
     navigator.clipboard.writeText(text).then(() => {
+      if (resetCopiedTimerRef.current) {
+        window.clearTimeout(resetCopiedTimerRef.current)
+      }
+
       setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
+      resetCopiedTimerRef.current = window.setTimeout(() => {
+        setCopied(false)
+        resetCopiedTimerRef.current = null
+      }, 2000)
     })
   }
 
@@ -926,14 +1047,23 @@ function CopyChatButton({
       type="button"
       onClick={handleCopy}
       disabled={!hasConversation}
-      className="pointer-events-auto flex items-center gap-1 px-2 py-1 text-xs rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 disabled:opacity-40 disabled:hover:text-gray-400 dark:disabled:hover:text-gray-500 shadow-sm transition-colors"
+      title={label}
+      aria-label={label}
+      className={twMerge(
+        'pointer-events-auto flex items-center text-xs backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 disabled:opacity-40 disabled:hover:text-gray-400 dark:disabled:hover:text-gray-500 shadow-sm transition-colors',
+        compact
+          ? compactChatControlClass
+          : 'gap-1 px-2 py-1 rounded-md bg-white/80 dark:bg-black/80',
+        copied &&
+          'border-green-500/30 bg-green-500/10 text-green-600 hover:bg-green-500/15 hover:text-green-700 dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-300 dark:hover:bg-green-400/15 dark:hover:text-green-200',
+      )}
     >
       {copied ? (
-        <Check className="w-3 h-3 text-green-500" />
+        <Check className="w-3.5 h-3.5" />
       ) : (
         <Copy className="w-3 h-3" />
       )}
-      {copied ? 'Copied' : 'Copy chat'}
+      {compact ? <ChatControlTooltip>{label}</ChatControlTooltip> : label}
     </button>
   )
 }
@@ -943,29 +1073,59 @@ function KapaHistoryButton({
   activeThreadId,
   isBusy,
   onSelect,
+  compact = false,
 }: {
   items: Array<KapaHistoryItem>
   activeThreadId: string | null
   isBusy: boolean
   onSelect: (item: KapaHistoryItem) => void
+  compact?: boolean
 }) {
+  const { cancelAiDockHoverClose } = useSearchContext()
+  const cancelPendingDockClose = React.useCallback(() => {
+    if (!compact) {
+      return
+    }
+
+    cancelAiDockHoverClose()
+  }, [cancelAiDockHoverClose, compact])
+
   return (
-    <Dropdown modal={false}>
+    <Dropdown
+      modal={false}
+      onOpenChange={(open) => {
+        if (open) {
+          cancelPendingDockClose()
+        }
+      }}
+    >
       <DropdownTrigger>
         <button
           type="button"
           disabled={isBusy}
           aria-label="Chat history"
-          className="pointer-events-auto flex items-center gap-1 px-1.5 sm:px-2 py-1 text-xs rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 disabled:opacity-40 disabled:hover:text-gray-400 dark:disabled:hover:text-gray-500 shadow-sm transition-colors"
+          title="Chat history"
+          className={twMerge(
+            'pointer-events-auto flex items-center text-xs backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 disabled:opacity-40 disabled:hover:text-gray-400 dark:disabled:hover:text-gray-500 shadow-sm transition-colors',
+            compact
+              ? compactChatControlClass
+              : 'gap-1 px-1.5 sm:px-2 py-1 rounded-md bg-white/80 dark:bg-black/80',
+          )}
         >
           <History className="w-3 h-3" />
-          <span className="hidden sm:inline">History</span>
+          {compact ? (
+            <ChatControlTooltip>Chat history</ChatControlTooltip>
+          ) : (
+            <span className="hidden sm:inline">History</span>
+          )}
         </button>
       </DropdownTrigger>
       <DropdownContent
         align="end"
         sideOffset={8}
         className="w-72 max-w-[calc(100vw-2rem)]"
+        onFocus={cancelPendingDockClose}
+        onPointerEnter={cancelPendingDockClose}
       >
         {items.length === 0 ? (
           <div className="px-2 py-2 text-xs text-gray-400 dark:text-gray-500">
@@ -978,7 +1138,10 @@ function KapaHistoryButton({
           return (
             <DropdownItem
               key={item.threadId}
-              onSelect={() => onSelect(item)}
+              onSelect={() => {
+                cancelPendingDockClose()
+                onSelect(item)
+              }}
               className="items-start justify-between gap-3 py-2"
             >
               <span className="min-w-0">
@@ -1146,11 +1309,13 @@ function KapaWelcome({
   selectedFramework,
   onSuggestion,
   disabled,
+  compact = false,
 }: {
   selectedLibrary: string
   selectedFramework: string
   onSuggestion: (suggestion: string) => void
   disabled?: boolean
+  compact?: boolean
 }) {
   const suggestions = getKapaSuggestions(selectedLibrary)
 
@@ -1158,7 +1323,12 @@ function KapaWelcome({
     <div>
       <AIMessageHeader />
       <div className="rounded-2xl px-3.5 py-3 bg-white dark:bg-white/[0.06] border border-gray-200 dark:border-white/10 shadow-sm space-y-2.5">
-        <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
+        <p
+          className={twMerge(
+            'text-gray-700 dark:text-gray-300 leading-relaxed',
+            compact ? 'text-[13px]' : 'text-sm',
+          )}
+        >
           Ask a TanStack docs question in plain English.
           {(selectedLibrary || selectedFramework) && (
             <>
@@ -1190,7 +1360,10 @@ function KapaWelcome({
                 type="button"
                 disabled={disabled}
                 onClick={() => onSuggestion(suggestion)}
-                className="text-xs px-2.5 py-1 rounded-full bg-gray-100 dark:bg-white/[0.08] text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/[0.14] disabled:hover:bg-gray-100 dark:disabled:hover:bg-white/[0.08] disabled:opacity-50 disabled:cursor-default transition-colors border border-gray-200 dark:border-white/10 text-left"
+                className={twMerge(
+                  'px-2.5 py-1 rounded-full bg-gray-100 dark:bg-white/[0.08] text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/[0.14] disabled:hover:bg-gray-100 dark:disabled:hover:bg-white/[0.08] disabled:opacity-50 disabled:cursor-default transition-colors border border-gray-200 dark:border-white/10 text-left',
+                  compact ? 'text-[11px]' : 'text-xs',
+                )}
               >
                 {suggestion}
               </button>
@@ -1208,12 +1381,14 @@ function KapaAnswer({
   error,
   onCopyQuestion,
   onFeedback,
+  compact = false,
 }: {
   qa: KapaDisplayQA
   isStreaming: boolean
   error?: string | null
   onCopyQuestion: () => void
   onFeedback: (reaction: 'upvote' | 'downvote') => void
+  compact?: boolean
 }) {
   const canSubmitFeedback =
     qa.id !== null && qa.isFeedbackSubmissionEnabled && qa.reaction === null
@@ -1222,7 +1397,12 @@ function KapaAnswer({
   return (
     <div className="space-y-3">
       <div className="group flex flex-col items-end gap-1">
-        <div className="max-w-[85%] px-3.5 py-2 rounded-2xl rounded-tr-sm bg-gray-900 dark:bg-white text-white dark:text-gray-900 text-sm break-words">
+        <div
+          className={twMerge(
+            'max-w-[85%] px-3.5 py-2 rounded-2xl rounded-tr-sm bg-gray-900 dark:bg-white text-white dark:text-gray-900 break-words',
+            compact ? 'text-[13px]' : 'text-sm',
+          )}
+        >
           {qa.question}
         </div>
         <div className="flex items-center gap-0.5 opacity-60 group-hover:opacity-100 transition-opacity">
@@ -1237,11 +1417,21 @@ function KapaAnswer({
         <AIMessageHeader />
         <div className="rounded-2xl px-3.5 py-2.5 bg-white dark:bg-white/[0.06] border border-gray-200 dark:border-white/10 shadow-sm">
           {hasAnswerError ? (
-            <p className="text-sm text-red-700 dark:text-red-300 leading-relaxed">
+            <p
+              className={twMerge(
+                'text-red-700 dark:text-red-300 leading-relaxed',
+                compact ? 'text-[13px]' : 'text-sm',
+              )}
+            >
               {error}
             </p>
           ) : qa.answer ? (
-            <div className="text-sm text-gray-800 dark:text-gray-200 leading-relaxed break-words">
+            <div
+              className={twMerge(
+                'text-gray-800 dark:text-gray-200 leading-relaxed break-words',
+                compact ? 'text-[13px]' : 'text-sm',
+              )}
+            >
               <Streamdown
                 components={streamdownComponents}
                 isAnimating={isStreaming}
@@ -1274,13 +1464,14 @@ function KapaAnswer({
                 const sourceScope = getSourceScope(source.source_url)
                 const hasSourceScope =
                   !!sourceScope.library || !!sourceScope.framework
+                const internalTarget = getInternalLinkTarget(source.source_url)
 
                 return (
-                  <a
+                  <SafeLink
                     key={source.source_url}
                     href={source.source_url}
-                    target="_blank"
-                    rel="noopener noreferrer"
+                    target={internalTarget ? undefined : '_blank'}
+                    rel={internalTarget ? undefined : 'noopener noreferrer'}
                     className="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] font-medium bg-gray-100 dark:bg-white/[0.06] text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-white/[0.12] hover:text-gray-900 dark:hover:text-gray-200 border border-gray-200 dark:border-white/10 transition-colors max-w-[280px]"
                   >
                     <SourceScopeBadges {...sourceScope} />
@@ -1288,7 +1479,7 @@ function KapaAnswer({
                       <ExternalLink className="w-2.5 h-2.5 flex-none opacity-60" />
                     ) : null}
                     <span className="truncate">{label}</span>
-                  </a>
+                  </SafeLink>
                 )
               })}
             </div>
@@ -1343,12 +1534,18 @@ function KapaChatPanel({
   onToggleFullHeight,
   threadIdOverrideRef,
   newChatRequestId,
+  surface,
+  isDockMaximized = false,
+  onToggleDockMaximized,
 }: {
   onReset: () => void
   isFullHeight: boolean
   onToggleFullHeight: () => void
   threadIdOverrideRef: React.MutableRefObject<string | null>
   newChatRequestId: number
+  surface: SearchSurface
+  isDockMaximized?: boolean
+  onToggleDockMaximized?: () => void
 }) {
   const {
     conversation,
@@ -1361,14 +1558,15 @@ function KapaChatPanel({
     addFeedback,
     error,
   } = useChat()
-  const { closeSearch } = useSearchContext()
-  const { selectedLibrary, selectedFramework, showSearchResults } =
+  const { closeSearch, setAiDockDirty } = useSearchContext()
+  const { selectedLibrary, selectedFramework, showSearchResults, searchQuery } =
     useSearchFilters()
   const scrollRef = React.useRef<HTMLDivElement>(null)
   const { items: historyItems, save: saveHistory } = useKapaChatHistory()
   const [selectedHistoryItem, setSelectedHistoryItem] =
     React.useState<KapaHistoryItem | null>(null)
   const isBusy = isGeneratingAnswer || isPreparingAnswer
+  const isDock = surface === 'dock'
   const isSubmittingRef = React.useRef(false)
   const lockedToBottom = React.useRef(true)
   const handledNewChatRequestId = React.useRef(newChatRequestId)
@@ -1384,6 +1582,16 @@ function KapaChatPanel({
   const hasConversation = displayConversation.length > 0
   const activeThreadId = threadId ?? selectedHistoryItem?.threadId ?? null
 
+  React.useEffect(() => {
+    if (!isDock) {
+      return
+    }
+
+    setAiDockDirty(
+      searchQuery.trim().length > 0 || displayConversation.length > 0 || isBusy,
+    )
+  }, [displayConversation.length, isBusy, isDock, searchQuery, setAiDockDirty])
+
   React.useEffect(() => {
     if (threadId) {
       threadIdOverrideRef.current = threadId
@@ -1483,63 +1691,116 @@ function KapaChatPanel({
       ref={scrollRef}
       className={twMerge(
         'overflow-y-auto flex flex-col',
-        isFullHeight
+        isDock
           ? 'flex-1 min-h-0'
-          : 'flex-1 min-h-0 sm:flex-none sm:max-h-[min(600px,calc(100dvh-2rem-90px))]',
+          : isFullHeight
+            ? 'flex-1 min-h-0'
+            : 'flex-1 min-h-0 sm:flex-none sm:max-h-[min(600px,calc(100dvh-2rem-90px))]',
       )}
     >
-      <div className="sticky top-0 z-10 relative flex items-center justify-between gap-1.5 px-4 sm:px-5 pt-2 pb-1 pointer-events-none">
-        <StickyTopBlur />
-        <div className="relative z-10 flex items-center gap-1">
-          <button
-            type="button"
-            onClick={closeSearch}
-            className="pointer-events-auto flex items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
-            aria-label="Close search"
-          >
-            <X className="w-3.5 h-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={onToggleFullHeight}
-            className="hidden sm:flex pointer-events-auto items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
-            aria-label={isFullHeight ? 'Collapse search' : 'Expand search'}
-          >
-            {isFullHeight ? (
-              <Minimize2 className="w-3 h-3" />
-            ) : (
-              <Maximize2 className="w-3 h-3" />
-            )}
-          </button>
+      <div
+        className={twMerge(
+          'sticky top-0 flex items-center justify-between gap-1.5',
+          isDock
+            ? 'z-20 px-3 py-2 border-b border-gray-200/80 dark:border-white/10 bg-white/90 dark:bg-black/90 backdrop-blur-xl shadow-sm'
+            : 'z-10 pt-2 pb-1 px-4 sm:px-5 pointer-events-none',
+        )}
+      >
+        {isDock ? null : <StickyTopBlur />}
+        <div className="relative z-10 flex items-center gap-1 min-w-0">
+          {isDock ? (
+            <div className="min-w-0 py-1.5">
+              <div className="truncate text-sm font-bold leading-4 text-gray-900 dark:text-white">
+                TanStack AI
+              </div>
+            </div>
+          ) : (
+            <>
+              <button
+                type="button"
+                onClick={closeSearch}
+                className="pointer-events-auto flex items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
+                aria-label="Close search"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={onToggleFullHeight}
+                className="hidden sm:flex pointer-events-auto items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
+                aria-label={isFullHeight ? 'Collapse search' : 'Expand search'}
+              >
+                {isFullHeight ? (
+                  <Minimize2 className="w-3 h-3" />
+                ) : (
+                  <Maximize2 className="w-3 h-3" />
+                )}
+              </button>
+            </>
+          )}
         </div>
-        <div className="relative z-10 flex items-center gap-1.5">
+        <div
+          className={twMerge(
+            'relative z-10 flex items-center',
+            isDock
+              ? 'gap-0.5 rounded-xl bg-gray-500/5 dark:bg-white/[0.04] p-0.5'
+              : 'gap-1.5',
+          )}
+        >
+          {isDock && onToggleDockMaximized ? (
+            <DockMaximizeButton
+              isMaximized={isDockMaximized}
+              onToggle={onToggleDockMaximized}
+            />
+          ) : null}
           <KapaHistoryButton
             items={historyItems}
             activeThreadId={activeThreadId}
             isBusy={isBusy}
             onSelect={selectHistoryItem}
+            compact={isDock}
           />
           {hasConversation ? (
             <>
-              <CopyChatButton conversation={displayConversation} />
+              <CopyChatButton
+                conversation={displayConversation}
+                compact={isDock}
+              />
               <button
                 type="button"
                 onClick={startNewChat}
-                className="pointer-events-auto flex items-center gap-1 px-2 py-1 text-xs rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
+                title="New chat"
+                aria-label="New chat"
+                className={twMerge(
+                  'pointer-events-auto flex items-center text-xs backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors',
+                  isDock
+                    ? compactChatControlClass
+                    : 'gap-1 px-2 py-1 rounded-md bg-white/80 dark:bg-black/80',
+                )}
               >
-                <RotateCcw className="w-3 h-3" />
-                New chat
+                <MessageSquarePlus className="w-3.5 h-3.5" />
+                {isDock ? (
+                  <ChatControlTooltip>New chat</ChatControlTooltip>
+                ) : (
+                  'New chat'
+                )}
               </button>
             </>
           ) : null}
         </div>
       </div>
-      <div className="flex-1 px-3 sm:px-4 pt-3 pb-[220px] space-y-4">
+      <div
+        className={twMerge(
+          'flex-1 pt-3 space-y-4',
+          isDock ? 'px-3 pb-[260px]' : 'px-3 sm:px-4 pb-[220px]',
+        )}
+      >
         {displayConversation.length === 0 ? (
           <KapaWelcome
             selectedLibrary={showSearchResults ? selectedLibrary : ''}
             selectedFramework={showSearchResults ? selectedFramework : ''}
             onSuggestion={ask}
+            compact={isDock}
           />
         ) : (
           displayConversation.map((qa, index) => {
@@ -1567,6 +1828,7 @@ function KapaChatPanel({
                     addFeedback(qa.id, reaction)
                   }
                 }}
+                compact={isDock}
               />
             )
           })
@@ -1579,9 +1841,14 @@ function KapaChatPanel({
       </div>
       <div className="sticky bottom-0">
         <div className="absolute bottom-full left-0 right-0">
-          <SearchResultsInChat />
+          <SearchResultsInChat surface={surface} />
         </div>
-        <InputBar isBusy={isBusy} onAskAISubmit={ask} onStop={stopGeneration} />
+        <InputBar
+          isBusy={isBusy}
+          onAskAISubmit={ask}
+          onStop={stopGeneration}
+          surface={surface}
+        />
       </div>
     </section>
   )
@@ -1621,49 +1888,96 @@ function StickyTopBlur() {
 function KapaUnavailablePanel({
   isFullHeight,
   onToggleFullHeight,
+  surface,
+  isDockMaximized = false,
+  onToggleDockMaximized,
 }: {
   isFullHeight: boolean
   onToggleFullHeight: () => void
+  surface: SearchSurface
+  isDockMaximized?: boolean
+  onToggleDockMaximized?: () => void
 }) {
-  const { closeSearch } = useSearchContext()
-  const { selectedLibrary, selectedFramework, showSearchResults } =
+  const { closeSearch, setAiDockDirty } = useSearchContext()
+  const { selectedLibrary, selectedFramework, showSearchResults, searchQuery } =
     useSearchFilters()
+  const isDock = surface === 'dock'
+
+  React.useEffect(() => {
+    if (!isDock) {
+      return
+    }
+
+    setAiDockDirty(searchQuery.trim().length > 0)
+  }, [isDock, searchQuery, setAiDockDirty])
 
   return (
     <section
       className={twMerge(
         'overflow-y-auto flex flex-col',
-        isFullHeight
+        isDock
           ? 'flex-1 min-h-0'
-          : 'flex-1 min-h-0 sm:flex-none sm:max-h-[min(600px,calc(100dvh-2rem-90px))]',
+          : isFullHeight
+            ? 'flex-1 min-h-0'
+            : 'flex-1 min-h-0 sm:flex-none sm:max-h-[min(600px,calc(100dvh-2rem-90px))]',
       )}
     >
-      <div className="sticky top-0 z-10 relative flex items-center justify-between gap-1.5 px-4 sm:px-5 pt-2 pb-1 pointer-events-none">
-        <StickyTopBlur />
-        <div className="relative z-10 flex items-center gap-1">
-          <button
-            type="button"
-            onClick={closeSearch}
-            className="pointer-events-auto flex items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
-            aria-label="Close search"
-          >
-            <X className="w-3.5 h-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={onToggleFullHeight}
-            className="hidden sm:flex pointer-events-auto items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
-            aria-label={isFullHeight ? 'Collapse search' : 'Expand search'}
-          >
-            {isFullHeight ? (
-              <Minimize2 className="w-3 h-3" />
-            ) : (
-              <Maximize2 className="w-3 h-3" />
-            )}
-          </button>
+      <div
+        className={twMerge(
+          'sticky top-0 flex items-center justify-between gap-1.5',
+          isDock
+            ? 'z-20 px-3 py-2 border-b border-gray-200/80 dark:border-white/10 bg-white/90 dark:bg-black/90 backdrop-blur-xl shadow-sm'
+            : 'z-10 pt-2 pb-1 px-4 sm:px-5 pointer-events-none',
+        )}
+      >
+        {isDock ? null : <StickyTopBlur />}
+        <div className="relative z-10 flex items-center gap-1 min-w-0">
+          {isDock ? (
+            <div className="min-w-0 py-1.5">
+              <div className="truncate text-sm font-bold leading-4 text-gray-900 dark:text-white">
+                TanStack AI
+              </div>
+            </div>
+          ) : (
+            <>
+              <button
+                type="button"
+                onClick={closeSearch}
+                className="pointer-events-auto flex items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
+                aria-label="Close search"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={onToggleFullHeight}
+                className="hidden sm:flex pointer-events-auto items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
+                aria-label={isFullHeight ? 'Collapse search' : 'Expand search'}
+              >
+                {isFullHeight ? (
+                  <Minimize2 className="w-3 h-3" />
+                ) : (
+                  <Maximize2 className="w-3 h-3" />
+                )}
+              </button>
+            </>
+          )}
         </div>
+        {isDock && onToggleDockMaximized ? (
+          <div className="relative z-10 flex items-center gap-0.5 rounded-xl bg-gray-500/5 dark:bg-white/[0.04] p-0.5">
+            <DockMaximizeButton
+              isMaximized={isDockMaximized}
+              onToggle={onToggleDockMaximized}
+            />
+          </div>
+        ) : null}
       </div>
-      <div className="flex-1 px-3 sm:px-4 pt-3 pb-[220px] space-y-4">
+      <div
+        className={twMerge(
+          'flex-1 pt-3 space-y-4',
+          isDock ? 'px-3 pb-[260px]' : 'px-3 sm:px-4 pb-[220px]',
+        )}
+      >
         <div className="rounded-xl border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-300">
           Kapa is not configured. Add{' '}
           <code className="font-mono">VITE_KAPA_INTEGRATION_ID</code> to enable
@@ -1674,13 +1988,14 @@ function KapaUnavailablePanel({
           selectedFramework={showSearchResults ? selectedFramework : ''}
           onSuggestion={() => {}}
           disabled
+          compact={isDock}
         />
       </div>
       <div className="sticky bottom-0">
         <div className="absolute bottom-full left-0 right-0">
-          <SearchResultsInChat />
+          <SearchResultsInChat surface={surface} />
         </div>
-        <InputBar isBusy onAskAISubmit={() => {}} />
+        <InputBar isBusy onAskAISubmit={() => {}} surface={surface} />
       </div>
     </section>
   )
@@ -1690,10 +2005,16 @@ function SearchPanel({
   isFullHeight,
   onToggleFullHeight,
   newChatRequestId,
+  surface,
+  isDockMaximized = false,
+  onToggleDockMaximized,
 }: {
   isFullHeight: boolean
   onToggleFullHeight: () => void
   newChatRequestId: number
+  surface: SearchSurface
+  isDockMaximized?: boolean
+  onToggleDockMaximized?: () => void
 }) {
   const integrationId = env.VITE_KAPA_INTEGRATION_ID
   const threadIdOverrideRef = React.useRef<string | null>(null)
@@ -1706,11 +2027,21 @@ function SearchPanel({
     [],
   )
 
+  React.useEffect(() => {
+    return () => {
+      apiService.abortCurrent()
+    }
+  }, [apiService])
+
   return (
     <div
       className={twMerge(
         'bg-white/90 dark:bg-black/90 backdrop-blur-lg sm:rounded-[1.75rem] shadow-lg dark:border dark:border-white/20 overflow-hidden',
-        isFullHeight ? 'flex flex-col h-full' : 'h-dvh sm:h-auto flex flex-col',
+        surface === 'dock'
+          ? 'h-full flex flex-col rounded-none sm:rounded-none border-l border-gray-200 bg-white shadow-2xl backdrop-blur-none dark:border-white/10 dark:bg-black'
+          : isFullHeight
+            ? 'flex flex-col h-full'
+            : 'h-dvh sm:h-auto flex flex-col',
       )}
     >
       {integrationId ? (
@@ -1726,12 +2057,18 @@ function SearchPanel({
             onToggleFullHeight={onToggleFullHeight}
             threadIdOverrideRef={threadIdOverrideRef}
             newChatRequestId={newChatRequestId}
+            surface={surface}
+            isDockMaximized={isDockMaximized}
+            onToggleDockMaximized={onToggleDockMaximized}
           />
         </KapaProvider>
       ) : (
         <KapaUnavailablePanel
           isFullHeight={isFullHeight}
           onToggleFullHeight={onToggleFullHeight}
+          surface={surface}
+          isDockMaximized={isDockMaximized}
+          onToggleDockMaximized={onToggleDockMaximized}
         />
       )}
     </div>
@@ -1742,10 +2079,12 @@ function InputBar({
   isBusy,
   onAskAISubmit,
   onStop,
+  surface,
 }: {
   isBusy: boolean
   onAskAISubmit: (question: string) => void
   onStop?: () => void
+  surface: SearchSurface
 }) {
   const { refine } = useSearchBox()
   const { searchQuery, setSearchQuery } = useSearchFilters()
@@ -1753,6 +2092,7 @@ function InputBar({
   const hasQuery = trimmedQuery.length > 0
   const canAsk = trimmedQuery.length >= 3 && !isBusy
   const canStop = isBusy && !!onStop
+  const isDock = surface === 'dock'
   const inputRef = React.useRef<HTMLInputElement>(null)
 
   React.useEffect(() => {
@@ -1778,7 +2118,7 @@ function InputBar({
   }
 
   return (
-    <div className="flex-none px-3 pb-3">
+    <div className={twMerge('flex-none px-3', isDock ? 'pb-4' : 'pb-3')}>
       <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/[0.06] shadow-sm overflow-visible">
         <div className="flex items-center gap-2 px-3 py-2.5">
           <Search className="w-4 h-4 opacity-30 flex-none" />
@@ -1787,7 +2127,11 @@ function InputBar({
               ref={inputRef}
               type="search"
               aria-label="Search"
-              placeholder="Search or ask a question..."
+              placeholder={
+                isDock
+                  ? 'Ask AI or search docs...'
+                  : 'Search or ask a question...'
+              }
               value={searchQuery}
               onChange={(event) => {
                 const nextQuery = event.target.value
@@ -1800,7 +2144,10 @@ function InputBar({
                   submitQuestion()
                 }
               }}
-              className="w-full outline-none [&::-webkit-search-cancel-button]:hidden bg-transparent text-sm text-gray-800 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500"
+              className={twMerge(
+                'w-full outline-none [&::-webkit-search-cancel-button]:hidden bg-transparent text-gray-800 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500',
+                isDock ? 'text-[13px]' : 'text-sm',
+              )}
             />
             <button type="submit" className="hidden" tabIndex={-1}>
               Search
@@ -1914,7 +2261,7 @@ function SearchResultsToggle() {
   )
 }
 
-function SearchResultsInChat() {
+function SearchResultsInChat({ surface }: { surface: SearchSurface }) {
   const { results } = useInstantSearch()
   const { hits, isLastPage, showMore } = useInfiniteHits()
   const sentinelRef = React.useRef<HTMLDivElement>(null)
@@ -1935,6 +2282,7 @@ function SearchResultsInChat() {
   const trimmedQuery = searchQuery.trim()
   const hasQuery = trimmedQuery.length > 0
   const isOpen = hasQuery && showSearchResults
+  const isDock = surface === 'dock'
 
   const clearFramework = () => {
     setSelectedFramework('')
@@ -1944,6 +2292,29 @@ function SearchResultsInChat() {
     setSelectedLibrary('')
   }
 
+  const hideSearchResultsButton = (
+    <button
+      type="button"
+      onClick={hideSearchResults}
+      aria-label="Hide search results"
+      className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-gray-900 text-white shadow-sm transition-colors hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
+    >
+      <X className="w-3 h-3" />
+    </button>
+  )
+
+  const resultSummary =
+    hits.length > 0 ? (
+      <>
+        {results.nbHits} page{results.nbHits === 1 ? '' : 's'} for{' '}
+        <span className="font-medium text-gray-500 dark:text-gray-400">
+          &ldquo;{trimmedQuery}&rdquo;
+        </span>
+      </>
+    ) : (
+      <>No pages found for &ldquo;{trimmedQuery}&rdquo;</>
+    )
+
   React.useEffect(() => {
     const sentinel = sentinelRef.current
     if (!sentinel || !hits.length) return
@@ -1967,42 +2338,54 @@ function SearchResultsInChat() {
     <div
       className="overflow-hidden transition-[height] duration-300"
       style={{
-        height: isOpen ? '210px' : '0px',
+        height: isOpen ? (isDock ? '260px' : '210px') : '0px',
         transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
       }}
     >
-      <div className="px-6">
+      <div className={isDock ? 'px-3' : 'px-6'}>
         <div className="rounded-t-2xl rounded-b-none border border-b-0 border-gray-200 dark:border-white/10 overflow-hidden bg-white dark:bg-white/[0.06]">
-          <div className="px-3 py-1.5 border-b border-gray-100 dark:border-white/[0.06] flex items-center gap-2">
-            <p className="flex-1 text-[11px] text-gray-400 dark:text-gray-500 min-w-0 truncate">
-              {hits.length > 0 ? (
-                <>
-                  {results.nbHits} page{results.nbHits === 1 ? '' : 's'} for{' '}
-                  <span className="font-medium text-gray-500 dark:text-gray-400">
-                    &ldquo;{trimmedQuery}&rdquo;
-                  </span>
-                </>
-              ) : (
-                <>No pages found for &ldquo;{trimmedQuery}&rdquo;</>
-              )}
-            </p>
-            <div className="ml-auto flex min-w-0 items-center justify-end gap-1.5">
-              <FrameworkRefinement compact />
-              <LibraryRefinement compact />
-              <AlgoliaAttribution />
-              <button
-                type="button"
-                onClick={hideSearchResults}
-                aria-label="Hide search results"
-                className="p-0.5 rounded-full text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 transition-colors"
-              >
-                <CircleX className="w-3.5 h-3.5" />
-              </button>
-            </div>
+          <div
+            className={twMerge(
+              'px-3 py-1.5 border-b border-gray-100 dark:border-white/[0.06] flex gap-2',
+              isDock ? 'flex-col items-stretch' : 'items-center',
+            )}
+          >
+            {isDock ? (
+              <>
+                <div className="flex min-w-0 items-center gap-2">
+                  <p className="flex-1 text-[11px] text-gray-400 dark:text-gray-500 min-w-0 truncate">
+                    {resultSummary}
+                  </p>
+                  {hideSearchResultsButton}
+                </div>
+                <div className="flex items-center justify-end">
+                  <AlgoliaAttribution />
+                </div>
+                <div className="flex min-w-0 items-center gap-2">
+                  <FrameworkRefinement compact />
+                  <LibraryRefinement compact />
+                </div>
+              </>
+            ) : (
+              <>
+                <p className="flex-1 text-[11px] text-gray-400 dark:text-gray-500 min-w-0 truncate">
+                  {resultSummary}
+                </p>
+                <div className="ml-auto flex min-w-0 items-center justify-end gap-1.5">
+                  <FrameworkRefinement compact />
+                  <LibraryRefinement compact />
+                  <AlgoliaAttribution />
+                  {hideSearchResultsButton}
+                </div>
+              </>
+            )}
           </div>
           <div
             ref={resultsScrollRef}
-            className="overflow-y-auto h-[180px]"
+            className={twMerge(
+              'overflow-y-auto',
+              isDock ? 'h-[210px]' : 'h-[180px]',
+            )}
             role="listbox"
             aria-label="Search results"
           >
@@ -2519,20 +2902,23 @@ export function SearchModal() {
           <DialogPrimitive.Title className="sr-only">
             Search TanStack docs
           </DialogPrimitive.Title>
-          <InstantSearch
-            searchClient={searchClient}
-            indexName={searchIndexName}
-          >
-            <SearchFiltersProvider>
-              <DynamicFilters />
-              <SearchPanel
-                isFullHeight={isFullHeight}
-                onToggleFullHeight={toggleFullHeight}
-                newChatRequestId={newChatRequestId}
-              />
-            </SearchFiltersProvider>
-          </InstantSearch>
-          {!isFullHeight ? (
+          {isOpen ? (
+            <InstantSearch
+              searchClient={searchClient}
+              indexName={searchIndexName}
+            >
+              <SearchFiltersProvider>
+                <DynamicFilters />
+                <SearchPanel
+                  isFullHeight={isFullHeight}
+                  onToggleFullHeight={toggleFullHeight}
+                  newChatRequestId={newChatRequestId}
+                  surface="modal"
+                />
+              </SearchFiltersProvider>
+            </InstantSearch>
+          ) : null}
+          {isOpen && !isFullHeight ? (
             <button
               type="button"
               onClick={toggleFullHeight}
@@ -2548,3 +2934,263 @@ export function SearchModal() {
     </DialogPrimitive.Root>
   )
 }
+
+export function AiDock() {
+  const {
+    cancelAiDockHoverClose,
+    isAiDockOpen,
+    newChatRequestId,
+    scheduleAiDockHoverClose,
+  } = useSearchContext()
+  const [hasActivated, setHasActivated] = React.useState(isAiDockOpen)
+  const [isDockVisible, setIsDockVisible] = React.useState(false)
+  const [isDockMaximized, setIsDockMaximized] = React.useState(false)
+  const [dockWidth, setDockWidth] = React.useState(readAiDockWidth)
+  const [viewportWidth, setViewportWidth] = React.useState(() =>
+    typeof window === 'undefined'
+      ? AI_DOCK_DEFAULT_WIDTH / AI_DOCK_MAX_WIDTH_RATIO
+      : window.innerWidth,
+  )
+  const [isResizingDock, setIsResizingDock] = React.useState(false)
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const isResizingDockRef = React.useRef(false)
+  const displayedDockWidth = clampAiDockWidth(dockWidth, viewportWidth)
+  const dockMaxWidth = getAiDockMaxWidth(viewportWidth)
+  const dockStyle: AiDockStyle = {
+    '--ai-dock-width': `${displayedDockWidth}px`,
+    '--ai-dock-max-width': `${AI_DOCK_MAXIMIZED_WIDTH}px`,
+  }
+
+  React.useEffect(() => {
+    if (!isAiDockOpen) {
+      setIsDockVisible(false)
+      return
+    }
+
+    setHasActivated(true)
+
+    let enterFrame = 0
+    const mountFrame = requestAnimationFrame(() => {
+      enterFrame = requestAnimationFrame(() => {
+        setIsDockVisible(true)
+      })
+    })
+
+    return () => {
+      cancelAnimationFrame(mountFrame)
+      cancelAnimationFrame(enterFrame)
+    }
+  }, [isAiDockOpen])
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    const handleResize = () => {
+      setViewportWidth(window.innerWidth)
+    }
+
+    handleResize()
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (!isAiDockOpen || !isDockVisible) {
+      return
+    }
+
+    const frame = requestAnimationFrame(() => {
+      contentRef.current
+        ?.querySelector<HTMLInputElement>('input[type="search"]')
+        ?.focus({ preventScroll: true })
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [isAiDockOpen, isDockVisible])
+
+  const toggleDockMaximized = React.useCallback(() => {
+    setIsDockMaximized((current) => !current)
+  }, [])
+
+  const handleResizePointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (isDockMaximized || typeof window === 'undefined') {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      cancelAiDockHoverClose()
+
+      const startX = event.clientX
+      const startWidth = displayedDockWidth
+      let nextWidth = startWidth
+      const previousCursor = document.body.style.cursor
+      const previousUserSelect = document.body.style.userSelect
+
+      isResizingDockRef.current = true
+      setIsResizingDock(true)
+      document.body.style.cursor = 'ew-resize'
+      document.body.style.userSelect = 'none'
+
+      const stopResizing = () => {
+        window.removeEventListener('pointermove', handlePointerMove)
+        window.removeEventListener('pointerup', stopResizing)
+        window.removeEventListener('pointercancel', stopResizing)
+        document.body.style.cursor = previousCursor
+        document.body.style.userSelect = previousUserSelect
+        isResizingDockRef.current = false
+        setIsResizingDock(false)
+        writeAiDockWidth(nextWidth)
+      }
+
+      const handlePointerMove = (moveEvent: PointerEvent) => {
+        const currentViewportWidth = window.innerWidth
+        nextWidth = clampAiDockWidth(
+          startWidth + startX - moveEvent.clientX,
+          currentViewportWidth,
+        )
+        setViewportWidth(currentViewportWidth)
+        setDockWidth(nextWidth)
+      }
+
+      window.addEventListener('pointermove', handlePointerMove)
+      window.addEventListener('pointerup', stopResizing)
+      window.addEventListener('pointercancel', stopResizing)
+    },
+    [cancelAiDockHoverClose, displayedDockWidth, isDockMaximized],
+  )
+
+  const handleResizeKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (isDockMaximized) {
+        return
+      }
+
+      const step = event.shiftKey ? 48 : 16
+      let nextWidth: number | null = null
+
+      if (event.key === 'ArrowLeft') {
+        nextWidth = displayedDockWidth + step
+      } else if (event.key === 'ArrowRight') {
+        nextWidth = displayedDockWidth - step
+      } else if (event.key === 'Home') {
+        nextWidth = AI_DOCK_MIN_WIDTH
+      } else if (event.key === 'End') {
+        nextWidth = dockMaxWidth
+      }
+
+      if (nextWidth === null) {
+        return
+      }
+
+      event.preventDefault()
+
+      const clampedWidth = clampAiDockWidth(nextWidth, viewportWidth)
+      setDockWidth(clampedWidth)
+      writeAiDockWidth(clampedWidth)
+    },
+    [displayedDockWidth, dockMaxWidth, isDockMaximized, viewportWidth],
+  )
+
+  const handlePointerEnter = (event: React.PointerEvent<HTMLElement>) => {
+    if (event.pointerType === 'touch') {
+      return
+    }
+
+    cancelAiDockHoverClose()
+  }
+
+  const handlePointerLeave = (event: React.PointerEvent<HTMLElement>) => {
+    if (event.pointerType === 'touch') {
+      return
+    }
+
+    if (isResizingDockRef.current) {
+      return
+    }
+
+    if (
+      event.relatedTarget instanceof Element &&
+      event.relatedTarget.closest('.dropdown-content')
+    ) {
+      return
+    }
+
+    scheduleAiDockHoverClose()
+  }
+
+  if (!hasActivated) {
+    return null
+  }
+
+  return (
+    <div
+      ref={contentRef}
+      aria-label="TanStack AI"
+      aria-hidden={!isAiDockOpen}
+      style={dockStyle}
+      className={twMerge(
+        'fixed top-[var(--navbar-height)] right-0 bottom-0 z-[1000] w-full max-w-full pointer-events-none',
+        isDockMaximized
+          ? 'sm:w-[min(var(--ai-dock-max-width),100vw)]'
+          : 'sm:w-[var(--ai-dock-width)]',
+        !isResizingDock && 'transition-[width] duration-300 ease-out',
+      )}
+    >
+      <aside
+        onPointerEnter={handlePointerEnter}
+        onPointerLeave={handlePointerLeave}
+        className={twMerge(
+          'pointer-events-auto absolute right-0 top-0 h-full w-full max-w-full text-left outline-none transition-[transform,translate,opacity] duration-300 ease-out',
+          isDockVisible
+            ? 'translate-x-0 opacity-100'
+            : 'translate-x-full opacity-0 pointer-events-none',
+        )}
+      >
+        {!isDockMaximized ? (
+          <div
+            role="separator"
+            aria-label="Resize AI panel"
+            aria-orientation="vertical"
+            aria-valuemin={AI_DOCK_MIN_WIDTH}
+            aria-valuemax={dockMaxWidth}
+            aria-valuenow={displayedDockWidth}
+            tabIndex={0}
+            onPointerDown={handleResizePointerDown}
+            onKeyDown={handleResizeKeyDown}
+            className="group/resize absolute left-0 top-0 z-40 hidden h-full w-3 -translate-x-1.5 cursor-ew-resize touch-none outline-none sm:block"
+          >
+            <div
+              className={twMerge(
+                'absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-transparent transition-colors',
+                isResizingDock
+                  ? 'bg-cyan-500/70'
+                  : 'group-hover/resize:bg-cyan-500/50 group-focus/resize:bg-cyan-500/60',
+              )}
+            />
+          </div>
+        ) : null}
+        <h2 className="sr-only">TanStack AI</h2>
+        <InstantSearch searchClient={searchClient} indexName={searchIndexName}>
+          <SearchFiltersProvider>
+            <DynamicFilters />
+            <SearchPanel
+              isFullHeight
+              onToggleFullHeight={() => {}}
+              newChatRequestId={newChatRequestId}
+              surface="dock"
+              isDockMaximized={isDockMaximized}
+              onToggleDockMaximized={toggleDockMaximized}
+            />
+          </SearchFiltersProvider>
+        </InstantSearch>
+      </aside>
+    </div>
+  )
+}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index f7427794d..25a823ce9 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -20,11 +20,13 @@ export function ThemeToggle() {
 
   return (
     <Button
-      variant="ghost"
-      size="xs"
+      variant="icon"
+      color="gray"
+      size="icon-sm"
       onClick={handleToggleMode}
       aria-label={`Theme: ${label}. Switch to ${nextLabel} mode.`}
       title={`Theme: ${label}. Switch to ${nextLabel} mode.`}
+      className="h-7 w-7 rounded-md p-0"
     >
       {themeMode === 'auto' ? (
         <SunMoon className="w-3.5 h-3.5" />
@@ -34,7 +36,6 @@ export function ThemeToggle() {
           <Moon className="w-3.5 h-3.5 hidden dark:block" />
         </>
       )}
-      <span className="hidden sm:inline">{label}</span>
     </Button>
   )
 }
diff --git a/src/contexts/SearchContext.tsx b/src/contexts/SearchContext.tsx
index 9bf1a74a0..765cda124 100644
--- a/src/contexts/SearchContext.tsx
+++ b/src/contexts/SearchContext.tsx
@@ -8,9 +8,16 @@ const LazySearchModal = React.lazy(() =>
 
 interface SearchContextType {
   isOpen: boolean
+  isAiDockOpen: boolean
+  isAiDockDirty: boolean
   newChatRequestId: number
   openSearch: () => void
+  openAiDock: () => void
   closeSearch: () => void
+  closeAiDock: () => void
+  cancelAiDockHoverClose: () => void
+  scheduleAiDockHoverClose: () => void
+  setAiDockDirty: (isDirty: boolean) => void
 }
 
 const SearchContext = React.createContext<SearchContextType | undefined>(
@@ -19,18 +26,55 @@ const SearchContext = React.createContext<SearchContextType | undefined>(
 
 export function SearchProvider({ children }: { children: React.ReactNode }) {
   const [isOpen, setIsOpen] = React.useState(false)
-  const [hasOpenedSearch, setHasOpenedSearch] = React.useState(false)
+  const [isAiDockOpen, setIsAiDockOpen] = React.useState(false)
+  const [isAiDockDirty, setIsAiDockDirty] = React.useState(false)
+  const [hasLoadedSearch, setHasLoadedSearch] = React.useState(false)
   const [newChatRequestId, setNewChatRequestId] = React.useState(0)
+  const aiDockCloseTimerRef = React.useRef<number | null>(null)
+
+  const cancelAiDockHoverClose = React.useCallback(() => {
+    if (!aiDockCloseTimerRef.current) {
+      return
+    }
+
+    window.clearTimeout(aiDockCloseTimerRef.current)
+    aiDockCloseTimerRef.current = null
+  }, [])
 
   const openSearch = React.useCallback(() => {
-    setHasOpenedSearch(true)
+    setHasLoadedSearch(true)
     setIsOpen(true)
   }, [])
 
+  const openAiDock = React.useCallback(() => {
+    cancelAiDockHoverClose()
+    setIsOpen(false)
+    setIsAiDockOpen(true)
+  }, [cancelAiDockHoverClose])
+
   const closeSearch = React.useCallback(() => {
     setIsOpen(false)
   }, [])
 
+  const closeAiDock = React.useCallback(() => {
+    cancelAiDockHoverClose()
+    setIsAiDockOpen(false)
+  }, [cancelAiDockHoverClose])
+
+  const scheduleAiDockHoverClose = React.useCallback(() => {
+    cancelAiDockHoverClose()
+    aiDockCloseTimerRef.current = window.setTimeout(() => {
+      setIsAiDockOpen(false)
+      aiDockCloseTimerRef.current = null
+    }, 300)
+  }, [cancelAiDockHoverClose])
+
+  React.useEffect(() => {
+    return () => {
+      cancelAiDockHoverClose()
+    }
+  }, [cancelAiDockHoverClose])
+
   const requestNewChat = React.useCallback(() => {
     setNewChatRequestId((current) => current + 1)
   }, [])
@@ -38,11 +82,29 @@ export function SearchProvider({ children }: { children: React.ReactNode }) {
   const value = React.useMemo(
     () => ({
       isOpen,
+      isAiDockOpen,
+      isAiDockDirty,
       newChatRequestId,
       openSearch,
+      openAiDock,
       closeSearch,
+      closeAiDock,
+      cancelAiDockHoverClose,
+      scheduleAiDockHoverClose,
+      setAiDockDirty: setIsAiDockDirty,
     }),
-    [closeSearch, isOpen, newChatRequestId, openSearch],
+    [
+      cancelAiDockHoverClose,
+      closeAiDock,
+      closeSearch,
+      isAiDockDirty,
+      isAiDockOpen,
+      isOpen,
+      newChatRequestId,
+      openAiDock,
+      openSearch,
+      scheduleAiDockHoverClose,
+    ],
   )
 
   React.useEffect(() => {
@@ -93,7 +155,7 @@ export function SearchProvider({ children }: { children: React.ReactNode }) {
   return (
     <SearchContext.Provider value={value}>
       {children}
-      {hasOpenedSearch ? (
+      {hasLoadedSearch ? (
         <React.Suspense fallback={null}>
           <LazySearchModal />
         </React.Suspense>
diff --git a/src/styles/app.css b/src/styles/app.css
index d67695f92..cbfbb3383 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -1223,3 +1223,13 @@ mark {
 .framework-code-block > .codeblock {
   @apply my-4;
 }
+
+/* Kapa injects invisible reCAPTCHA; keep it from occupying the UI corner. */
+.grecaptcha-badge {
+  display: none !important;
+  pointer-events: none !important;
+}
+
+button[aria-label='Open TanStack Devtools'] {
+  display: none !important;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 8adf54a5f..a1888b9fc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,6 @@
 import { sentryTanstackStart } from '@sentry/tanstackstart-react/vite'
 import { defineConfig } from 'vite'
+import type { PluginOption } from 'vite'
 import { redact } from '@tanstack/redact/vite'
 import contentCollections from '@content-collections/vite'
 import { devtools as tanstackDevtools } from '@tanstack/devtools-vite'
@@ -14,6 +15,7 @@ import os from 'node:os'
 import path from 'node:path'
 
 const isDev = process.env.NODE_ENV !== 'production'
+const shouldUseRedact = process.env.DISABLE_REDACT !== 'true'
 const shouldUseSentryPlugin =
   process.env.NODE_ENV === 'production' &&
   Boolean(process.env.SENTRY_AUTH_TOKEN)
@@ -75,6 +77,67 @@ const useSyncExternalStoreShimIndexAlias = {
   replacement: '@tanstack/redact',
 }
 
+const redactOptimizeDepsExcludes = shouldUseRedact
+  ? [
+      'react',
+      'react/jsx-runtime',
+      'react/jsx-dev-runtime',
+      'react/compiler-runtime',
+      'react-dom',
+      'react-dom/client',
+      'react-dom/server',
+      'react-dom/server.edge',
+      'react-dom/server.node',
+      'react-dom/server.bun',
+      'react-dom/server.browser',
+      'react-dom/static',
+      'react-dom/static.edge',
+      'react-dom/static.node',
+      'react-dom/test-utils',
+      'scheduler',
+      'use-sync-external-store',
+      'use-sync-external-store/shim',
+      'use-sync-external-store/shim/index.js',
+      'use-sync-external-store/with-selector',
+      'use-sync-external-store/with-selector.js',
+      'use-sync-external-store/shim/with-selector',
+      'use-sync-external-store/shim/with-selector.js',
+    ]
+  : []
+
+function redactOptimizeDepsGuard(): PluginOption {
+  if (!shouldUseRedact) {
+    return null
+  }
+
+  const blocked = new Set(redactOptimizeDepsExcludes)
+  const prune = (optimizeDeps: { include?: Array<string> } | undefined) => {
+    if (!optimizeDeps?.include) {
+      return
+    }
+
+    optimizeDeps.include = optimizeDeps.include.filter((id) => !blocked.has(id))
+  }
+
+  return {
+    name: 'tanstack-redact-optimize-deps-guard',
+    enforce: 'post',
+    configResolved(config) {
+      prune(config.optimizeDeps)
+      prune(config.environments.client?.optimizeDeps)
+      prune(config.environments.ssr?.optimizeDeps)
+    },
+  }
+}
+
+// These browser-facing packages are imported by RSC assets. Bundle them into
+// server output so Netlify's Node runtime never loads their raw package entries.
+const serverBundledClientPackages = [
+  ...(shouldUseRedact ? ['@tanstack/redact'] : []),
+  '@kapaai/react-sdk',
+  /^@fingerprintjs\//,
+]
+
 export default defineConfig({
   envDir,
   resolve: {
@@ -83,11 +146,17 @@ export default defineConfig({
         find: '~',
         replacement: path.resolve(__dirname, './src'),
       },
-      useSyncExternalStoreShimIndexAlias,
-      ...Object.entries(serverVariantAliases).map(([find, replacement]) => ({
-        find,
-        replacement,
-      })),
+      ...(shouldUseRedact
+        ? [
+            useSyncExternalStoreShimIndexAlias,
+            ...Object.entries(serverVariantAliases).map(
+              ([find, replacement]) => ({
+                find,
+                replacement,
+              }),
+            ),
+          ]
+        : []),
     ],
   },
   server: {
@@ -107,6 +176,7 @@ export default defineConfig({
   environments: {
     rsc: {
       resolve: {
+        noExternal: serverBundledClientPackages,
         external: [
           '@tanstack/react-start-server',
           '@tanstack/react-router/ssr/server',
@@ -115,6 +185,7 @@ export default defineConfig({
     },
     ssr: {
       resolve: {
+        noExternal: serverBundledClientPackages,
         external: [
           ...rscSsrExternals,
           ...sentrySsrExternals,
@@ -140,6 +211,7 @@ export default defineConfig({
       'normalize-wheel',
       '@tanstack/react-hotkeys',
       '@webcontainer/api',
+      ...serverBundledClientPackages,
     ],
   },
   optimizeDeps: {
@@ -155,6 +227,10 @@ export default defineConfig({
       'takumi-js',
       // Don't pre-bundle CLI so we always get fresh changes during dev
       ...(isDev ? ['@tanstack/cli'] : []),
+      // Redact replaces React in client/SSR environments. If Vite prebundles
+      // the real React entries for browser deps, third-party search UI can end
+      // up with a different dispatcher than the Redact renderer.
+      ...redactOptimizeDepsExcludes,
       // `use client` libraries that plugin-rsc pre-bundles inconsistently
       // across client/ssr/rsc envs when combined with our React shim — each
       // env resolves `react` to a different target, so the optimizer's hash
@@ -227,7 +303,7 @@ export default defineConfig({
     },
   },
   plugins: [
-    redact(),
+    ...(shouldUseRedact ? [redact()] : []),
     ...(isDev
       ? [
           tanstackDevtools({
@@ -279,6 +355,7 @@ export default defineConfig({
       },
     }),
     rsc(),
+    redactOptimizeDepsGuard(),
     // Only enable Netlify plugin during build or when NETLIFY env is set
     ...(process.env.NETLIFY || process.env.NODE_ENV === 'production'
       ? [netlify()]