From a9690f7323e4e69e42f15eaf4dc1a15417f02670 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Fri, 12 Jun 2026 11:29:01 -0600
Subject: [PATCH 1/9] Add AI dock drawer

---
 src/components/AppDevtools.tsx  |   3 +
 src/components/Dropdown.tsx     |   9 +
 src/components/Navbar.tsx       |  33 +-
 src/components/SearchButton.tsx | 121 ++++-
 src/components/SearchModal.tsx  | 904 +++++++++++++++++++++++++++-----
 src/components/ThemeToggle.tsx  |   7 +-
 src/contexts/SearchContext.tsx  |  70 ++-
 src/styles/app.css              |  10 +
 8 files changed, 1004 insertions(+), 153 deletions(-)

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/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..fec295469 100644
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -2,27 +2,130 @@ 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) {
   return (
     <Button
       type="button"
       data-search-trigger
+      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..ea66eb293 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -19,7 +19,6 @@ import {
 import { liteClient } from 'algoliasearch/lite'
 import {
   X,
-  CircleX,
   Search,
   SearchSlash,
   ChevronDown,
@@ -29,7 +28,7 @@ import {
   Copy,
   ExternalLink,
   History,
-  RotateCcw,
+  MessageSquarePlus,
   ThumbsDown,
   ThumbsUp,
   Maximize2,
@@ -186,6 +185,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 +480,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 +514,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 +535,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 +948,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 +1028,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 +1045,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 +1071,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 +1136,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 +1307,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 +1321,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 +1358,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 +1379,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 +1395,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 +1415,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 +1462,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 +1477,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 +1532,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 +1556,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 +1580,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 +1689,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 +1826,7 @@ function KapaChatPanel({
                     addFeedback(qa.id, reaction)
                   }
                 }}
+                compact={isDock}
               />
             )
           })
@@ -1579,9 +1839,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 +1886,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 +1986,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 +2003,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)
@@ -1710,7 +2029,11 @@ function SearchPanel({
     <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 +2049,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 +2071,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 +2084,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 +2110,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 +2119,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 +2136,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 +2253,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 +2274,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 +2284,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 +2330,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"
           >
@@ -2529,6 +2904,7 @@ export function SearchModal() {
                 isFullHeight={isFullHeight}
                 onToggleFullHeight={toggleFullHeight}
                 newChatRequestId={newChatRequestId}
+                surface="modal"
               />
             </SearchFiltersProvider>
           </InstantSearch>
@@ -2548,3 +2924,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;
+}

From d5af614242d04390d27eb038da9160745ff44d6e Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Fri, 12 Jun 2026 22:25:18 -0600
Subject: [PATCH 2/9] Fix Kapa RSC dependency resolution

---
 package.json   | 1 +
 pnpm-lock.yaml | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/package.json b/package.json
index fe5bebe9c..c71580863 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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9df46d2ea..b01c8f03e 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)

From c4bafd0b26b2db6fd01e1027d4542c4bbc2e4a6a Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Fri, 12 Jun 2026 22:38:10 -0600
Subject: [PATCH 3/9] Bundle React shim in server output

---
 vite.config.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/vite.config.ts b/vite.config.ts
index 8adf54a5f..33b2e8772 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -75,6 +75,8 @@ const useSyncExternalStoreShimIndexAlias = {
   replacement: '@tanstack/redact',
 }
 
+const reactShimNoExternals = ['@tanstack/redact']
+
 export default defineConfig({
   envDir,
   resolve: {
@@ -107,6 +109,7 @@ export default defineConfig({
   environments: {
     rsc: {
       resolve: {
+        noExternal: reactShimNoExternals,
         external: [
           '@tanstack/react-start-server',
           '@tanstack/react-router/ssr/server',
@@ -140,6 +143,7 @@ export default defineConfig({
       'normalize-wheel',
       '@tanstack/react-hotkeys',
       '@webcontainer/api',
+      ...reactShimNoExternals,
     ],
   },
   optimizeDeps: {

From 0a791df42af0010215c0aed3ac1b93e96cdbfc3a Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Fri, 12 Jun 2026 22:45:27 -0600
Subject: [PATCH 4/9] Bundle Kapa browser deps in server output

---
 vite.config.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index 33b2e8772..bea27a89f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -75,7 +75,12 @@ const useSyncExternalStoreShimIndexAlias = {
   replacement: '@tanstack/redact',
 }
 
-const reactShimNoExternals = ['@tanstack/redact']
+const serverBundledClientPackages = [
+  '@tanstack/redact',
+  '@fingerprintjs/fingerprintjs-pro-react',
+  '@fingerprintjs/fingerprintjs-pro-spa',
+  '@fingerprintjs/fingerprintjs-pro',
+]
 
 export default defineConfig({
   envDir,
@@ -109,7 +114,7 @@ export default defineConfig({
   environments: {
     rsc: {
       resolve: {
-        noExternal: reactShimNoExternals,
+        noExternal: serverBundledClientPackages,
         external: [
           '@tanstack/react-start-server',
           '@tanstack/react-router/ssr/server',
@@ -118,6 +123,7 @@ export default defineConfig({
     },
     ssr: {
       resolve: {
+        noExternal: serverBundledClientPackages,
         external: [
           ...rscSsrExternals,
           ...sentrySsrExternals,
@@ -143,7 +149,7 @@ export default defineConfig({
       'normalize-wheel',
       '@tanstack/react-hotkeys',
       '@webcontainer/api',
-      ...reactShimNoExternals,
+      ...serverBundledClientPackages,
     ],
   },
   optimizeDeps: {

From 21808a3bfe0beba119b7a2fe846a2cdbbc9c9769 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Fri, 12 Jun 2026 23:15:09 -0600
Subject: [PATCH 5/9] Harden Kapa server bundling

---
 vite.config.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index bea27a89f..c18a01a5d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -75,11 +75,12 @@ const useSyncExternalStoreShimIndexAlias = {
   replacement: '@tanstack/redact',
 }
 
+// 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 = [
   '@tanstack/redact',
-  '@fingerprintjs/fingerprintjs-pro-react',
-  '@fingerprintjs/fingerprintjs-pro-spa',
-  '@fingerprintjs/fingerprintjs-pro',
+  '@kapaai/react-sdk',
+  /^@fingerprintjs\//,
 ]
 
 export default defineConfig({

From 7cc031e701dd1d10eda22d318845e92f8472b119 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Sat, 13 Jun 2026 14:46:41 -0600
Subject: [PATCH 6/9] Unmount modal search panel on close

---
 src/components/SearchModal.tsx | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
index ea66eb293..7bcd969cb 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -2894,21 +2894,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}
-                surface="modal"
-              />
-            </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}

From 0c0f29bf8bd7b2fc2cf7cfea863d7711ac1f5ae3 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Sat, 13 Jun 2026 15:03:59 -0600
Subject: [PATCH 7/9] Fix docs nav after AI search close

---
 src/components/DocsLayout.tsx  | 19 ++++++++++---------
 src/components/SearchModal.tsx |  6 ++++++
 2 files changed, 16 insertions(+), 9 deletions(-)

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/SearchModal.tsx b/src/components/SearchModal.tsx
index 7bcd969cb..ef6c30007 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -2025,6 +2025,12 @@ function SearchPanel({
     [],
   )
 
+  React.useEffect(() => {
+    return () => {
+      apiService.abortCurrent()
+    }
+  }, [apiService])
+
   return (
     <div
       className={twMerge(

From 46aa04895d51d9c2d08cd9827b470b43b666a0b8 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Sat, 13 Jun 2026 15:25:04 -0600
Subject: [PATCH 8/9] Make Redact disable mode consistent

---
 src/components/SearchModal.tsx |  2 ++
 vite.config.ts                 | 21 ++++++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
index ef6c30007..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'
diff --git a/vite.config.ts b/vite.config.ts
index c18a01a5d..d63c62165 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,6 +14,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)
@@ -78,7 +79,7 @@ const useSyncExternalStoreShimIndexAlias = {
 // 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 = [
-  '@tanstack/redact',
+  ...(shouldUseRedact ? ['@tanstack/redact'] : []),
   '@kapaai/react-sdk',
   /^@fingerprintjs\//,
 ]
@@ -91,11 +92,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: {
@@ -238,7 +245,7 @@ export default defineConfig({
     },
   },
   plugins: [
-    redact(),
+    ...(shouldUseRedact ? [redact()] : []),
     ...(isDev
       ? [
           tanstackDevtools({

From 05662800d7c55b3a88ed03a805e8d96f3d8e1894 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Sat, 13 Jun 2026 17:16:59 -0600
Subject: [PATCH 9/9] Fix Redact external store subscription loop

---
 patches/@tanstack__redact@0.0.12.patch | 213 +++++++++++++++++++++++++
 pnpm-workspace.yaml                    |   3 +
 src/components/SearchButton.tsx        |   5 +-
 3 files changed, 220 insertions(+), 1 deletion(-)
 create mode 100644 patches/@tanstack__redact@0.0.12.patch

diff --git a/patches/@tanstack__redact@0.0.12.patch b/patches/@tanstack__redact@0.0.12.patch
new file mode 100644
index 000000000..3a728dabb
--- /dev/null
+++ b/patches/@tanstack__redact@0.0.12.patch
@@ -0,0 +1,213 @@
+diff --git a/dist/dom/dispatcher.js b/dist/dom/dispatcher.js
+index c130c58e9c549caed9e0a9ea0d0afdd2edb12913..3f0c88fae664b270095ba38079c90c14d19149e2 100644
+--- a/dist/dom/dispatcher.js
++++ b/dist/dom/dispatcher.js
+@@ -185,33 +185,69 @@ function makeDispatcherImpl() {
+     useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
+       const fiber = getCurrentFiber();
+       const hook = nextHook();
++      const store = hook.queue ?? {
++        getSnapshot,
++        getServerSnapshot
++      };
++      hook.queue = store;
++      store.getSnapshot = getSnapshot;
++      store.getServerSnapshot = getServerSnapshot;
+       const root = fiber.root ?? findRootFromFiber(fiber);
+       const isHydrating = Boolean(root?.hydrating);
+       const value = isHydrating && getServerSnapshot ? getServerSnapshot() : getSnapshot();
+       hook.state = value;
+-      if (hook.cleanup == null) {
+-        const forceUpdate = () => {
+-          let next;
+-          try {
+-            next = getSnapshot();
+-          } catch {
+-            scheduleUpdate(fiber);
+-            return;
+-          }
+-          if (!Object.is(hook.state, next)) {
+-            hook.state = next;
+-            scheduleUpdate(fiber);
++      const deps = [subscribe];
++      if (hook.deps === void 0 || !depsEqual(hook.deps, deps)) {
++        hook.deps = deps;
++        const effect = {
++          tag: "layout",
++          deps,
++          destroy: void 0,
++          create: () => {
++            if (hook.cleanup) {
++              try {
++                hook.cleanup();
++              } catch {
++              }
++              if (fiber.cleanups) {
++                const i = fiber.cleanups.indexOf(hook.cleanup);
++                if (i >= 0) fiber.cleanups.splice(i, 1);
++              }
++              hook.cleanup = null;
++            }
++            let unsubscribed = false;
++            const cleanup = () => {
++              unsubscribed = true;
++              if (typeof unsubscribe === "function") {
++                unsubscribe();
++              }
++            };
++            const forceUpdate = () => {
++              if (unsubscribed || fiber.unmounted) {
++                return;
++              }
++              let next;
++              try {
++                next = store.getSnapshot();
++              } catch {
++                scheduleUpdate(fiber);
++                return;
++              }
++              if (!Object.is(hook.state, next)) {
++                hook.state = next;
++                scheduleUpdate(fiber);
++              }
++            };
++            const unsubscribe = subscribe(forceUpdate);
++            if (isHydrating && store.getServerSnapshot) {
++              queueMicrotask(() => queueMicrotask(forceUpdate));
++            }
++            forceUpdate();
++            hook.cleanup = cleanup;
++            return cleanup;
+           }
+         };
+-        const unsubscribe = subscribe(forceUpdate);
+-        hook.cleanup = unsubscribe;
+-        if (typeof unsubscribe === "function") {
+-          fiber.cleanups ||= [];
+-          fiber.cleanups.push(unsubscribe);
+-        }
+-        if (isHydrating && getServerSnapshot) {
+-          queueMicrotask(() => queueMicrotask(forceUpdate));
+-        }
++        enqueueEffect(fiber, effect);
+       }
+       return value;
+     },
+diff --git a/src/dom/dispatcher.ts b/src/dom/dispatcher.ts
+index 2701ec903e2d5f42ee52e01c7222883f15790e43..eb91f1d4cb7d286a0e9d4e950cf34e0122275826 100644
+--- a/src/dom/dispatcher.ts
++++ b/src/dom/dispatcher.ts
+@@ -226,6 +226,16 @@ function makeDispatcherImpl() {
+     ): T {
+       const fiber = getCurrentFiber()
+       const hook = nextHook()
++      const store: {
++        getSnapshot: () => T
++        getServerSnapshot?: () => T
++      } = hook.queue ?? {
++        getSnapshot,
++        getServerSnapshot,
++      }
++      hook.queue = store
++      store.getSnapshot = getSnapshot
++      store.getServerSnapshot = getServerSnapshot
+ 
+       // During hydration, use the server snapshot (if provided) so the tree
+       // matches the SSR output. Components like TanStack Router's ClientOnly
+@@ -238,37 +248,67 @@ function makeDispatcherImpl() {
+         isHydrating && getServerSnapshot ? getServerSnapshot() : getSnapshot()
+       hook.state = value
+ 
+-      if (hook.cleanup == null) {
+-        const forceUpdate = () => {
+-          let next: T
+-          try {
+-            next = getSnapshot()
+-          } catch {
+-            scheduleUpdate(fiber)
+-            return
+-          }
+-          if (!Object.is(hook.state, next)) {
+-            hook.state = next
+-            scheduleUpdate(fiber)
+-          }
+-        }
+-        const unsubscribe = subscribe(forceUpdate)
+-        hook.cleanup = unsubscribe
+-        // Register with fiber so unmountFiber runs it. Without this, the store
+-        // keeps holding forceUpdate and every store update schedules an already-
+-        // unmounted fiber — its rerender walks stale .parent pointers and mounts
+-        // zombie DOM into the old parent.
+-        if (typeof unsubscribe === 'function') {
+-          fiber.cleanups ||= []
+-          fiber.cleanups.push(unsubscribe)
+-        }
++      const deps = [subscribe]
++      if (hook.deps === undefined || !depsEqual(hook.deps, deps)) {
++        hook.deps = deps
++        const effect: Effect = {
++          tag: 'layout',
++          deps,
++          destroy: undefined,
++          create: () => {
++            if (hook.cleanup) {
++              try {
++                hook.cleanup()
++              } catch {
++                // ignore cleanup failures
++              }
++              if (fiber.cleanups) {
++                const i = fiber.cleanups.indexOf(hook.cleanup)
++                if (i >= 0) fiber.cleanups.splice(i, 1)
++              }
++              hook.cleanup = null
++            }
++
++            let unsubscribed = false
++            const cleanup = () => {
++              unsubscribed = true
++              if (typeof unsubscribe === 'function') {
++                unsubscribe()
++              }
++            }
++            const forceUpdate = () => {
++              if (unsubscribed || fiber.unmounted) {
++                return
++              }
++
++              let next: T
++              try {
++                next = store.getSnapshot()
++              } catch {
++                scheduleUpdate(fiber)
++                return
++              }
++
++              if (!Object.is(hook.state, next)) {
++                hook.state = next
++                scheduleUpdate(fiber)
++              }
++            }
++            const unsubscribe = subscribe(forceUpdate)
++
++            // If we served the server snapshot, run a post-hydration check so
++            // components like `useHydrated()` flip from false → true after the
++            // initial render commits. Queued late so hydration finishes first.
++            if (isHydrating && store.getServerSnapshot) {
++              queueMicrotask(() => queueMicrotask(forceUpdate))
++            }
+ 
+-        // If we served the server snapshot, run a post-hydration check so
+-        // components like `useHydrated()` flip from false → true after the
+-        // initial render commits. Queued late so hydration finishes first.
+-        if (isHydrating && getServerSnapshot) {
+-          queueMicrotask(() => queueMicrotask(forceUpdate))
++            forceUpdate()
++            hook.cleanup = cleanup
++            return cleanup
++          },
+         }
++        enqueueEffect(fiber, effect)
+       }
+       return value
+     },
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 4e45eaf49..210c7021c 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -26,3 +26,6 @@ allowBuilds:
   # sentry
   '@sentry/cli': false
   '@fingerprintjs/fingerprintjs-pro-react': false
+
+patchedDependencies:
+  '@tanstack/redact@0.0.12': patches/@tanstack__redact@0.0.12.patch
diff --git a/src/components/SearchButton.tsx b/src/components/SearchButton.tsx
index fec295469..615580267 100644
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -23,10 +23,13 @@ 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={iconOnly ? 'icon' : 'ghost'}