diff --git a/ee/tabby-ui/app/(dashboard)/experiments/components/feature-list.tsx b/ee/tabby-ui/app/(dashboard)/experiments/components/feature-list.tsx
index 5c9b89a4fa11..04286f1de769 100644
--- a/ee/tabby-ui/app/(dashboard)/experiments/components/feature-list.tsx
+++ b/ee/tabby-ui/app/(dashboard)/experiments/components/feature-list.tsx
@@ -2,6 +2,7 @@
 
 import {
   useEnableCodeBrowserQuickActionBar,
+  useEnableDeveloperMode,
   useEnableSearch
 } from '@/lib/experiment-flags'
 import { Switch } from '@/components/ui/switch'
@@ -10,6 +11,7 @@ export default function FeatureList() {
   const [quickActionBar, toggleQuickActionBar] =
     useEnableCodeBrowserQuickActionBar()
   const [search, toggleSearch] = useEnableSearch()
+  const [developerMode, toggleDeveloperMode] = useEnableDeveloperMode()
   return (
     <>
       {!quickActionBar.loading && (
@@ -39,6 +41,22 @@ export default function FeatureList() {
           <Switch checked={search.value} onCheckedChange={toggleSearch} />
         </div>
       )}
+      {!developerMode.loading && (
+        <div className="flex items-center space-x-4 rounded-md border p-4">
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-medium leading-none">
+              {developerMode.title}
+            </p>
+            <p className="text-sm text-muted-foreground">
+              {developerMode.description}
+            </p>
+          </div>
+          <Switch
+            checked={developerMode.value}
+            onCheckedChange={toggleDeveloperMode}
+          />
+        </div>
+      )}
     </>
   )
 }
diff --git a/ee/tabby-ui/app/search/components/dev-panel.tsx b/ee/tabby-ui/app/search/components/dev-panel.tsx
new file mode 100644
index 000000000000..54b96f8d336a
--- /dev/null
+++ b/ee/tabby-ui/app/search/components/dev-panel.tsx
@@ -0,0 +1,75 @@
+import React, { lazy, Suspense, useEffect, useRef } from 'react'
+
+import { useEnableDeveloperMode } from '@/lib/experiment-flags'
+import { useCurrentTheme } from '@/lib/hooks/use-current-theme'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { IconChevronDown, IconClose } from '@/components/ui/icons'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { ListSkeleton } from '@/components/skeleton'
+
+const ReactJsonView = lazy(() => import('react-json-view'))
+
+interface DevPanelProps {
+  isFullScreen: boolean
+  onToggleFullScreen: (fullScreen: boolean) => void
+  value: object | undefined
+  onClose: () => void
+}
+
+export const DevPanel: React.FC<DevPanelProps> = ({
+  value,
+  isFullScreen,
+  onToggleFullScreen,
+  onClose
+}) => {
+  const [enableDeveloperMode] = useEnableDeveloperMode()
+  const { theme } = useCurrentTheme()
+  const scrollAreaRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (value) {
+      scrollAreaRef.current?.children?.[1]?.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      })
+    }
+  }, [value])
+
+  if (!enableDeveloperMode?.value) return null
+
+  if (!open) return null
+
+  return (
+    <div className="flex h-full flex-col px-3 pt-2">
+      <div className="flex items-center justify-end pb-2">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={e => onToggleFullScreen(!isFullScreen)}
+          >
+            <IconChevronDown
+              className={cn('transition-all', isFullScreen ? '' : 'rotate-180')}
+            />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <IconClose />
+          </Button>
+        </div>
+      </div>
+      <Suspense fallback={<ListSkeleton className="p-2" />}>
+        {value ? (
+          <ScrollArea className="flex-1" ref={scrollAreaRef}>
+            <ReactJsonView
+              theme={theme === 'dark' ? 'tomorrow' : 'rjv-default'}
+              src={value}
+              style={{ fontSize: '0.75rem' }}
+              collapseStringsAfterLength={120}
+            />
+          </ScrollArea>
+        ) : null}
+      </Suspense>
+    </div>
+  )
+}
diff --git a/ee/tabby-ui/app/search/components/search.tsx b/ee/tabby-ui/app/search/components/search.tsx
index 83e3b03e949e..063c9c0bc2df 100644
--- a/ee/tabby-ui/app/search/components/search.tsx
+++ b/ee/tabby-ui/app/search/components/search.tsx
@@ -3,6 +3,7 @@
 import {
   createContext,
   CSSProperties,
+  MouseEventHandler,
   useContext,
   useEffect,
   useMemo,
@@ -21,7 +22,7 @@ import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
 import { SESSION_STORAGE_KEY } from '@/lib/constants'
-import { useEnableSearch } from '@/lib/experiment-flags'
+import { useEnableDeveloperMode, useEnableSearch } from '@/lib/experiment-flags'
 import { useCurrentTheme } from '@/lib/hooks/use-current-theme'
 import { useLatest } from '@/lib/hooks/use-latest'
 import { useIsChatEnabled } from '@/lib/hooks/use-server-info'
@@ -42,6 +43,7 @@ import {
 } from '@/components/ui/hover-card'
 import {
   IconBlocks,
+  IconBug,
   IconChevronLeft,
   IconChevronRight,
   IconLayers,
@@ -51,6 +53,11 @@ import {
   IconSpinner,
   IconStop
 } from '@/components/ui/icons'
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+} from '@/components/ui/resizable'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -66,13 +73,22 @@ import UserPanel from '@/components/user-panel'
 
 import './search.css'
 
+import { pick } from 'lodash-es'
+import { ImperativePanelHandle } from 'react-resizable-panels'
 import { Context } from 'tabby-chat-panel/index'
 import { useQuery } from 'urql'
 
 import { RepositoryListQuery } from '@/lib/gql/generates/graphql'
 import { repositoryListQuery } from '@/lib/tabby/query'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from '@/components/ui/tooltip'
 import { CodeReferences } from '@/components/chat/question-answer'
 
+import { DevPanel } from './dev-panel'
+
 interface Source {
   title: string
   link: string
@@ -98,6 +114,8 @@ type SearchContextValue = {
   onSubmitSearch: (question: string) => void
   extraRequestContext: Record<string, any>
   repositoryList: RepositoryListQuery['repositoryList'] | undefined
+  setDevPanelOpen: (v: boolean) => void
+  setConversationIdForDev: (v: string | undefined) => void
 }
 
 export const SearchContext = createContext<SearchContextValue>(
@@ -137,6 +155,13 @@ export function Search() {
   const router = useRouter()
   const initCheckRef = useRef(false)
   const { theme } = useCurrentTheme()
+  const [devPanelOpen, setDevPanelOpen] = useState(false)
+  const [conversationIdForDev, setConversationIdForDev] = useState<
+    string | undefined
+  >()
+  const devPanelRef = useRef<ImperativePanelHandle>(null)
+  const [devPanelSize, setDevPanelSize] = useState(45)
+  const prevDevPanelSize = useRef(devPanelSize)
 
   const [{ data }] = useQuery({
     query: repositoryListQuery
@@ -149,6 +174,26 @@ export function Search() {
 
   const isLoadingRef = useLatest(isLoading)
 
+  const valueForDev = useMemo(() => {
+    const _conversation = conversation.find(
+      item => item.id === conversationIdForDev
+    )
+    if (_conversation) {
+      return pick(_conversation, 'relevant_documents', 'relevant_code')
+    }
+    return {
+      answers: conversation
+        .filter(o => o.role === 'assistant')
+        .map(o => pick(o, 'relevant_documents', 'relevant_code'))
+    }
+  }, [conversationIdForDev, conversation])
+
+  const onPanelLayout = (sizes: number[]) => {
+    if (sizes?.[1]) {
+      setDevPanelSize(sizes[1])
+    }
+  }
+
   // Check sessionStorage for initial message or most recent conversation
   useEffect(() => {
     if (initCheckRef.current) return
@@ -323,6 +368,15 @@ export function Search() {
     )
   }, [extraContext])
 
+  useEffect(() => {
+    if (devPanelOpen) {
+      devPanelRef.current?.expand()
+      devPanelRef.current?.resize(devPanelSize)
+    } else {
+      devPanelRef.current?.collapse()
+    }
+  }, [devPanelOpen])
+
   const onSubmitSearch = (question: string, ctx?: AnswerEngineExtraContext) => {
     const previousMessages = conversation.map(message => ({
       role: message.role,
@@ -409,6 +463,18 @@ export function Search() {
     triggerRequest(answerRequest)
   }
 
+  const onToggleFullScreen = (fullScreen: boolean) => {
+    let nextSize = prevDevPanelSize.current
+    if (fullScreen) {
+      nextSize = 100
+    } else if (nextSize === 100) {
+      nextSize = 45
+    }
+    devPanelRef.current?.resize(nextSize)
+    setDevPanelSize(nextSize)
+    prevDevPanelSize.current = devPanelSize
+  }
+
   if (!searchFlag.value || !isChatEnabled || !isReady) {
     return <></>
   }
@@ -420,122 +486,160 @@ export function Search() {
   return (
     <SearchContext.Provider
       value={{
-        isLoading: isLoading,
-        onRegenerateResponse: onRegenerateResponse,
-        onSubmitSearch: onSubmitSearch,
+        isLoading,
+        onRegenerateResponse,
+        onSubmitSearch,
         extraRequestContext: extraContext,
-        repositoryList
+        repositoryList,
+        setDevPanelOpen,
+        setConversationIdForDev
       }}
     >
       <div className="transition-all" style={style}>
-        <header className="flex h-16 items-center justify-between px-4">
-          <div className="flex items-center gap-x-6">
-            <Button
-              variant="ghost"
-              className="-ml-1 pl-0 text-sm text-muted-foreground"
-              onClick={() => router.back()}
-            >
-              <IconChevronLeft className="mr-1 h-5 w-5" />
-              Home
-            </Button>
-          </div>
-          <div className="flex items-center gap-x-6">
-            <ClientOnly>
-              <ThemeToggle />
-            </ClientOnly>
-            <UserPanel showHome={false} showSetting>
-              <UserAvatar className="h-10 w-10 border" />
-            </UserPanel>
-          </div>
-        </header>
-
-        <main className="h-[calc(100%-4rem)] overflow-auto pb-8 lg:pb-0">
-          <ScrollArea className="h-full" ref={contentContainerRef}>
-            <div className="mx-auto px-4 pb-32 lg:max-w-4xl lg:px-0">
-              <div className="flex flex-col">
-                {conversation.map((item, idx) => {
-                  if (item.role === 'user') {
-                    return (
-                      <div key={item.id + idx}>
-                        {idx !== 0 && <Separator />}
-                        <div className="pb-2 pt-8">
-                          <MessageMarkdown message={item.content} headline />
-                        </div>
-                      </div>
-                    )
+        <ResizablePanelGroup direction="vertical" onLayout={onPanelLayout}>
+          <ResizablePanel>
+            <header className="flex h-16 items-center justify-between px-4">
+              <div className="flex items-center gap-x-6">
+                <Button
+                  variant="ghost"
+                  className="-ml-1 pl-0 text-sm text-muted-foreground"
+                  onClick={() => router.back()}
+                >
+                  <IconChevronLeft className="mr-1 h-5 w-5" />
+                  Home
+                </Button>
+              </div>
+              <div className="flex items-center gap-x-6">
+                <ClientOnly>
+                  <ThemeToggle />
+                </ClientOnly>
+                <UserPanel showHome={false} showSetting>
+                  <UserAvatar className="h-10 w-10 border" />
+                </UserPanel>
+              </div>
+            </header>
+
+            <main className="h-[calc(100%-4rem)] overflow-auto pb-8 lg:pb-0">
+              <ScrollArea className="h-full" ref={contentContainerRef}>
+                <div className="mx-auto px-4 pb-32 lg:max-w-4xl lg:px-0">
+                  <div className="flex flex-col">
+                    {conversation.map((item, idx) => {
+                      if (item.role === 'user') {
+                        return (
+                          <div key={item.id + idx}>
+                            {idx !== 0 && <Separator />}
+                            <div className="pb-2 pt-8">
+                              <MessageMarkdown
+                                message={item.content}
+                                headline
+                              />
+                            </div>
+                          </div>
+                        )
+                      }
+                      if (item.role === 'assistant') {
+                        return (
+                          <div key={item.id + idx} className="pb-8 pt-2">
+                            <AnswerBlock
+                              answer={item}
+                              showRelatedQuestion={
+                                idx === conversation.length - 1
+                              }
+                            />
+                          </div>
+                        )
+                      }
+                      return <></>
+                    })}
+                  </div>
+                </div>
+              </ScrollArea>
+
+              {container && (
+                <ButtonScrollToBottom
+                  className="!fixed !bottom-[5.4rem] !right-4 !top-auto z-40 border-muted-foreground lg:!bottom-[2.85rem]"
+                  container={container}
+                  offset={100}
+                  // On mobile browsers(Chrome & Safari) in dark mode, using `background: hsl(var(--background))`
+                  // result in `rgba(0, 0, 0, 0)`. To prevent this, explicitly set --background
+                  style={
+                    theme === 'dark'
+                      ? ({ '--background': '0 0% 12%' } as CSSProperties)
+                      : {}
                   }
-                  if (item.role === 'assistant') {
-                    return (
-                      <div key={item.id + idx} className="pb-8 pt-2">
-                        <AnswerBlock
-                          answer={item}
-                          showRelatedQuestion={idx === conversation.length - 1}
-                        />
-                      </div>
-                    )
+                />
+              )}
+
+              <div
+                className={cn(
+                  'fixed bottom-5 left-0 z-30 flex min-h-[5rem] w-full flex-col items-center gap-y-2',
+                  {
+                    'opacity-100 translate-y-0': showSearchInput,
+                    'opacity-0 translate-y-10': !showSearchInput
                   }
-                  return <></>
-                })}
+                )}
+                style={Object.assign(
+                  { transition: 'all 0.35s ease-out' },
+                  theme === 'dark'
+                    ? ({ '--background': '0 0% 12%' } as CSSProperties)
+                    : {}
+                )}
+              >
+                <Button
+                  className={cn('bg-background', {
+                    'opacity-0 pointer-events-none': !showStop,
+                    'opacity-100': showStop
+                  })}
+                  style={{
+                    transition: 'opacity 0.55s ease-out'
+                  }}
+                  variant="outline"
+                  onClick={stop}
+                >
+                  <IconStop className="mr-2" />
+                  Stop generating
+                </Button>
+                {!devPanelOpen && (
+                  <div
+                    className={cn(
+                      'relative z-20 flex justify-center self-stretch px-4'
+                    )}
+                  >
+                    <TextAreaSearch
+                      onSearch={onSubmitSearch}
+                      className="lg:max-w-4xl"
+                      placeholder="Ask a follow up question"
+                      isLoading={isLoading}
+                      isFollowup
+                      extraContext={extraContext}
+                    />
+                  </div>
+                )}
               </div>
-            </div>
-          </ScrollArea>
-
-          {container && (
-            <ButtonScrollToBottom
-              className="!fixed !bottom-[5.4rem] !right-4 !top-auto z-40 border-muted-foreground lg:!bottom-[2.85rem]"
-              container={container}
-              offset={100}
-              // On mobile browsers(Chrome & Safari) in dark mode, using `background: hsl(var(--background))`
-              // result in `rgba(0, 0, 0, 0)`. To prevent this, explicitly set --background
-              style={
-                theme === 'dark'
-                  ? ({ '--background': '0 0% 12%' } as CSSProperties)
-                  : {}
-              }
-            />
-          )}
-
-          <div
+            </main>
+          </ResizablePanel>
+          <ResizableHandle
             className={cn(
-              'fixed bottom-5 left-0 z-30 flex min-h-[5rem] w-full flex-col items-center gap-y-2',
-              {
-                'opacity-100 translate-y-0': showSearchInput,
-                'opacity-0 translate-y-10': !showSearchInput
-              }
-            )}
-            style={Object.assign(
-              { transition: 'all 0.35s ease-out' },
-              theme === 'dark'
-                ? ({ '--background': '0 0% 12%' } as CSSProperties)
-                : {}
+              'hidden !h-[4px] border-none bg-background shadow-[0px_-4px_4px_rgba(0,0,0,0.2)] hover:bg-blue-500 active:bg-blue-500 dark:shadow-[0px_-4px_4px_rgba(255,255,255,0.2)]',
+              devPanelOpen && 'block'
             )}
+          />
+          <ResizablePanel
+            collapsible
+            collapsedSize={0}
+            defaultSize={0}
+            ref={devPanelRef}
+            onCollapse={() => setDevPanelOpen(false)}
+            className="z-50"
           >
-            <Button
-              className={cn('bg-background', {
-                'opacity-0 pointer-events-none': !showStop,
-                'opacity-100': showStop
-              })}
-              style={{
-                transition: 'opacity 0.55s ease-out'
-              }}
-              variant="outline"
-              onClick={stop}
-            >
-              <IconStop className="mr-2" />
-              Stop generating
-            </Button>
-            <div className="relative z-20 flex justify-center self-stretch px-4">
-              <TextAreaSearch
-                onSearch={onSubmitSearch}
-                className="lg:max-w-4xl"
-                placeholder="Ask a follow up question"
-                isLoading={isLoading}
-                isFollowup
-                extraContext={extraContext}
-              />
-            </div>
-          </div>
-        </main>
+            <DevPanel
+              onClose={() => setDevPanelOpen(false)}
+              value={valueForDev}
+              isFullScreen={devPanelSize === 100}
+              onToggleFullScreen={onToggleFullScreen}
+            />
+          </ResizablePanel>
+        </ResizablePanelGroup>
       </div>
     </SearchContext.Provider>
   )
@@ -548,8 +652,14 @@ function AnswerBlock({
   answer: ConversationMessage
   showRelatedQuestion: boolean
 }) {
-  const { onRegenerateResponse, onSubmitSearch, isLoading } =
-    useContext(SearchContext)
+  const {
+    onRegenerateResponse,
+    onSubmitSearch,
+    isLoading,
+    setDevPanelOpen,
+    setConversationIdForDev
+  } = useContext(SearchContext)
+  const [enableDeveloperMode] = useEnableDeveloperMode()
 
   const [showMoreSource, setShowMoreSource] = useState(false)
 
@@ -638,8 +748,10 @@ function AnswerBlock({
             {answer.relevant_documents.map((source, index) => (
               <SourceCard
                 key={source.link + index}
+                conversationId={answer.id}
                 source={source}
                 showMore={showMoreSource}
+                // showDevTooltip={enableDev.value}
               />
             ))}
           </div>
@@ -668,6 +780,18 @@ function AnswerBlock({
             })}
           />
           <p className="text-sm font-bold leading-none">Answer</p>
+          {enableDeveloperMode.value && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => {
+                setConversationIdForDev(answer.id)
+                setDevPanelOpen(true)
+              }}
+            >
+              <IconBug />
+            </Button>
+          )}
         </div>
 
         {/* Relevant code */}
@@ -677,6 +801,7 @@ function AnswerBlock({
             className="mt-1 text-sm"
             onContextClick={onCodeContextClick}
             defaultOpen
+            // enableTooltip={enableDev.value}
           />
         )}
 
@@ -753,49 +878,86 @@ const normalizedText = (input: string) => {
 }
 
 function SourceCard({
+  conversationId,
   source,
-  showMore
+  showMore,
+  showDevTooltip
 }: {
+  conversationId: string
   source: Source
   showMore: boolean
+  showDevTooltip?: boolean
 }) {
+  const { setDevPanelOpen, setConversationIdForDev } = useContext(SearchContext)
   const { hostname } = new URL(source.link)
+  const [devTooltipOpen, setDevTooltipOpen] = useState(false)
+
+  const onOpenChange = (v: boolean) => {
+    if (!showDevTooltip) return
+    setDevTooltipOpen(v)
+  }
+
+  const onTootipClick: MouseEventHandler<HTMLDivElement> = e => {
+    e.stopPropagation()
+    setConversationIdForDev(conversationId)
+    setDevPanelOpen(true)
+  }
+
   return (
-    <div
-      className="flex cursor-pointer flex-col justify-between gap-y-1 rounded-lg border bg-card p-3 hover:bg-card/60"
-      style={{
-        height: showMore
-          ? `${SOURCE_CARD_STYLE.expand}rem`
-          : `${SOURCE_CARD_STYLE.compress}rem`,
-        transition: 'all 0.25s ease-out'
-      }}
-      onClick={() => window.open(source.link)}
+    <Tooltip
+      open={devTooltipOpen}
+      onOpenChange={onOpenChange}
+      delayDuration={0}
     >
-      <div className="flex flex-col gap-y-0.5">
-        <p className="line-clamp-1 w-full overflow-hidden text-ellipsis break-all text-xs font-semibold">
-          {source.title}
-        </p>
-        <p
-          className={cn(
-            ' w-full overflow-hidden text-ellipsis break-all text-xs text-muted-foreground',
-            {
-              'line-clamp-2': showMore,
-              'line-clamp-1': !showMore
-            }
-          )}
+      <TooltipTrigger asChild>
+        <div
+          className="flex cursor-pointer flex-col justify-between rounded-lg border bg-card p-3 hover:bg-card/60"
+          style={{
+            height: showMore
+              ? `${SOURCE_CARD_STYLE.expand}rem`
+              : `${SOURCE_CARD_STYLE.compress}rem`,
+            transition: 'all 0.25s ease-out'
+          }}
+          onClick={() => window.open(source.link)}
         >
-          {normalizedText(source.snippet)}
-        </p>
-      </div>
-      <div className="flex items-center text-xs text-muted-foreground">
-        <div className="flex w-full flex-1 items-center">
-          <SiteFavicon hostname={hostname} />
-          <p className="ml-1 overflow-hidden text-ellipsis">
-            {hostname.replace('www.', '').split('/')[0]}
-          </p>
+          <div className="flex flex-1 flex-col justify-between gap-y-1">
+            <div className="flex flex-col gap-y-0.5">
+              <p className="line-clamp-1 w-full overflow-hidden text-ellipsis break-all text-xs font-semibold">
+                {source.title}
+              </p>
+              <p
+                className={cn(
+                  ' w-full overflow-hidden text-ellipsis break-all text-xs text-muted-foreground',
+                  {
+                    'line-clamp-2': showMore,
+                    'line-clamp-1': !showMore
+                  }
+                )}
+              >
+                {normalizedText(source.snippet)}
+              </p>
+            </div>
+            <div className="flex items-center text-xs text-muted-foreground">
+              <div className="flex w-full flex-1 items-center">
+                <SiteFavicon hostname={hostname} />
+                <p className="ml-1 overflow-hidden text-ellipsis">
+                  {hostname.replace('www.', '').split('/')[0]}
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </TooltipTrigger>
+      <TooltipContent
+        align="start"
+        className="cursor-pointer p-2"
+        onClick={onTootipClick}
+      >
+        <div className="mb-2">Source info</div>
+        <p>Score: xxxx</p>
+        <p>Ranking: xxxx</p>
+      </TooltipContent>
+    </Tooltip>
   )
 }
 
diff --git a/ee/tabby-ui/components/chat/question-answer.tsx b/ee/tabby-ui/components/chat/question-answer.tsx
index 776452f1a3b1..f4ffc88f9e9b 100644
--- a/ee/tabby-ui/components/chat/question-answer.tsx
+++ b/ee/tabby-ui/components/chat/question-answer.tsx
@@ -1,7 +1,7 @@
 // Inspired by Chatbot-UI and modified to fit the needs of this project
 // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx
 
-import React from 'react'
+import React, { ReactNode, useState } from 'react'
 import Image from 'next/image'
 import tabbyLogo from '@/assets/tabby.png'
 import { isNil } from 'lodash-es'
@@ -18,6 +18,11 @@ import {
 } from '@/lib/types/chat'
 import { cn } from '@/lib/utils'
 import { CodeBlock } from '@/components/ui/codeblock'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from '@/components/ui/tooltip'
 import { MemoizedReactMarkdown } from '@/components/markdown'
 
 import { CopyButton } from '../copy-button'
@@ -441,13 +446,17 @@ interface ContextReferencesProps {
   className?: string
   onContextClick?: (context: Context) => void
   defaultOpen?: boolean
+  enableTooltip?: boolean
+  onTooltipClick?: () => void
 }
 export const CodeReferences = ({
   contexts,
   userContexts,
   className,
   onContextClick,
-  defaultOpen
+  defaultOpen,
+  enableTooltip,
+  onTooltipClick
 }: ContextReferencesProps) => {
   const totalContextLength = (userContexts?.length || 0) + contexts.length
   const isMultipleReferences = totalContextLength > 1
@@ -483,6 +492,17 @@ export const CodeReferences = ({
                 key={`assistant-${index}`}
                 context={item}
                 onContextClick={onContextClick}
+                enableTooltip={enableTooltip}
+                tooltipContent={
+                  enableTooltip ? (
+                    <div>
+                      <div className="mb-2">Code info</div>
+                      <p>Score: xxxx</p>
+                      <p>Ranking: xxxx</p>
+                    </div>
+                  ) : null
+                }
+                onTooltipClick={onTooltipClick}
               />
             )
           })}
@@ -495,12 +515,19 @@ export const CodeReferences = ({
 function ContextItem({
   context,
   clickable = true,
-  onContextClick
+  onContextClick,
+  enableTooltip,
+  tooltipContent,
+  onTooltipClick
 }: {
   context: Context
   clickable?: boolean
   onContextClick?: (context: Context) => void
+  enableTooltip?: boolean
+  tooltipContent?: ReactNode
+  onTooltipClick?: () => void
 }) {
+  const [tooltipOpen, setTooltipOpen] = useState(false)
   const isMultiLine =
     !isNil(context.range?.start) &&
     !isNil(context.range?.end) &&
@@ -508,30 +535,50 @@ function ContextItem({
   const pathSegments = context.filepath.split('/')
   const fileName = pathSegments[pathSegments.length - 1]
   const path = pathSegments.slice(0, pathSegments.length - 1).join('/')
+
+  const onTooltipOpenChange = (v: boolean) => {
+    if (!enableTooltip || !tooltipContent) return
+
+    setTooltipOpen(v)
+  }
+
   return (
-    <div
-      className={cn('rounded-md border p-2', {
-        'cursor-pointer hover:bg-accent': clickable,
-        'cursor-default pointer-events-auto': !clickable
-      })}
-      onClick={e => clickable && onContextClick?.(context)}
+    <Tooltip
+      open={tooltipOpen}
+      onOpenChange={onTooltipOpenChange}
+      delayDuration={0}
     >
-      <div className="flex items-center gap-1 overflow-hidden">
-        <IconFile className="shrink-0" />
-        <div className="flex-1 truncate" title={context.filepath}>
-          <span>{fileName}</span>
-          {context.range?.start && (
-            <span className="text-muted-foreground">
-              :{context.range.start}
-            </span>
-          )}
-          {isMultiLine && (
-            <span className="text-muted-foreground">-{context.range.end}</span>
-          )}
-          <span className="ml-2 text-xs text-muted-foreground">{path}</span>
+      <TooltipTrigger asChild>
+        <div
+          className={cn('rounded-md border p-2', {
+            'cursor-pointer hover:bg-accent': clickable,
+            'cursor-default pointer-events-auto': !clickable
+          })}
+          onClick={e => clickable && onContextClick?.(context)}
+        >
+          <div className="flex items-center gap-1 overflow-hidden">
+            <IconFile className="shrink-0" />
+            <div className="flex-1 truncate" title={context.filepath}>
+              <span>{fileName}</span>
+              {context.range?.start && (
+                <span className="text-muted-foreground">
+                  :{context.range.start}
+                </span>
+              )}
+              {isMultiLine && (
+                <span className="text-muted-foreground">
+                  -{context.range.end}
+                </span>
+              )}
+              <span className="ml-2 text-xs text-muted-foreground">{path}</span>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </TooltipTrigger>
+      <TooltipContent align="start" onClick={onTooltipClick}>
+        {tooltipContent}
+      </TooltipContent>
+    </Tooltip>
   )
 }
 
diff --git a/ee/tabby-ui/components/ui/icons.tsx b/ee/tabby-ui/components/ui/icons.tsx
index 87a9e116b1d2..3a26a7e10055 100644
--- a/ee/tabby-ui/components/ui/icons.tsx
+++ b/ee/tabby-ui/components/ui/icons.tsx
@@ -6,6 +6,7 @@ import {
   Blocks,
   BookOpenText,
   Box,
+  Bug,
   ChevronsDownUp,
   CirclePlay,
   FileText,
@@ -1522,6 +1523,10 @@ function IconApplyInEditor({
   return <IndentIncrease className={cn('h-4 w-4', className)} {...props} />
 }
 
+function IconBug({ className, ...props }: React.ComponentProps<typeof Bug>) {
+  return <Bug className={cn('h-4 w-4', className)} {...props} />
+}
+
 export {
   IconEdit,
   IconNextChat,
@@ -1606,5 +1611,6 @@ export {
   IconBox,
   IconTag,
   IconFileText,
-  IconApplyInEditor
+  IconApplyInEditor,
+  IconBug
 }
diff --git a/ee/tabby-ui/lib/experiment-flags.ts b/ee/tabby-ui/lib/experiment-flags.ts
index c197a991117b..73bd26bbaf3d 100644
--- a/ee/tabby-ui/lib/experiment-flags.ts
+++ b/ee/tabby-ui/lib/experiment-flags.ts
@@ -114,3 +114,14 @@ const enableSearchFactory = new ExperimentFlagFactory(
 )
 export const EXP_enable_search = enableSearchFactory.defineGlobalVar()
 export const useEnableSearch = enableSearchFactory.defineHook()
+
+const enableDeveloperModeFactory = new ExperimentFlagFactory(
+  'enable_developer_mode',
+  'Developer Mode',
+  'Enable the developer mode. The features involved include the Answer Engine.',
+  false
+)
+
+export const EXP_enable_developer_mode =
+  enableDeveloperModeFactory.defineGlobalVar()
+export const useEnableDeveloperMode = enableDeveloperModeFactory.defineHook()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be683a40adbd..06ba8371fc6f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -323,10 +323,10 @@ importers:
         version: 2.2.3
       esbuild-plugin-copy:
         specifier: ^2.1.1
-        version: 2.1.1(esbuild@0.19.12)
+        version: 2.1.1(esbuild@0.20.2)
       esbuild-plugin-polyfill-node:
         specifier: ^0.3.0
-        version: 0.3.0(esbuild@0.19.12)
+        version: 0.3.0(esbuild@0.20.2)
       eslint:
         specifier: ^8.55.0
         version: 8.57.0
@@ -10512,7 +10512,7 @@ snapshots:
       '@babel/traverse': 7.23.5
       '@babel/types': 7.23.5
       convert-source-map: 2.0.0
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -10901,7 +10901,7 @@ snapshots:
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/parser': 7.23.5
       '@babel/types': 7.23.5
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -11433,7 +11433,7 @@ snapshots:
   '@eslint/eslintrc@2.1.2':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       espree: 9.6.1
       globals: 13.22.0
       ignore: 5.3.1
@@ -11843,7 +11843,7 @@ snapshots:
       '@types/json-stable-stringify': 1.0.36
       '@whatwg-node/fetch': 0.9.14
       chalk: 4.1.2
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       dotenv: 16.3.1
       graphql: 16.8.1
       graphql-request: 6.1.0(encoding@0.1.13)(graphql@16.8.1)
@@ -11931,7 +11931,7 @@ snapshots:
   '@humanwhocodes/config-array@0.11.11':
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -13883,7 +13883,7 @@ snapshots:
       '@typescript-eslint/type-utils': 7.4.0(eslint@8.50.0)(typescript@5.2.2)
       '@typescript-eslint/utils': 7.4.0(eslint@8.50.0)(typescript@5.2.2)
       '@typescript-eslint/visitor-keys': 7.4.0
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       eslint: 8.50.0
       graphemer: 1.4.0
       ignore: 5.3.1
@@ -13900,7 +13900,7 @@ snapshots:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       eslint: 8.50.0
     optionalDependencies:
       typescript: 5.2.2
@@ -14006,7 +14006,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 7.4.0(typescript@5.2.2)
       '@typescript-eslint/utils': 7.4.0(eslint@8.50.0)(typescript@5.2.2)
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       eslint: 8.50.0
       ts-api-utils: 1.3.0(typescript@5.2.2)
     optionalDependencies:
@@ -14026,7 +14026,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.2
@@ -14085,7 +14085,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 7.4.0
       '@typescript-eslint/visitor-keys': 7.4.0
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -14569,7 +14569,7 @@ snapshots:
 
   agent-base@7.1.0:
     dependencies:
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
 
@@ -15591,6 +15591,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.3.4:
+    dependencies:
+      ms: 2.1.2
+
   debug@4.3.4(supports-color@8.1.1):
     dependencies:
       ms: 2.1.2
@@ -15992,11 +15996,11 @@ snapshots:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
-  esbuild-plugin-copy@2.1.1(esbuild@0.19.12):
+  esbuild-plugin-copy@2.1.1(esbuild@0.20.2):
     dependencies:
       chalk: 4.1.2
       chokidar: 3.6.0
-      esbuild: 0.19.12
+      esbuild: 0.20.2
       fs-extra: 10.1.0
       globby: 11.1.0
 
@@ -16006,6 +16010,12 @@ snapshots:
       esbuild: 0.19.12
       import-meta-resolve: 3.1.1
 
+  esbuild-plugin-polyfill-node@0.3.0(esbuild@0.20.2):
+    dependencies:
+      '@jspm/core': 2.0.1
+      esbuild: 0.20.2
+      import-meta-resolve: 3.1.1
+
   esbuild@0.19.11:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.19.11
@@ -16115,7 +16125,7 @@ snapshots:
       '@typescript-eslint/parser': 5.62.0(eslint@8.50.0)(typescript@5.2.2)
       eslint: 8.50.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.50.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint@8.50.0))(eslint@8.50.0)
       eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
       eslint-plugin-jsx-a11y: 6.7.1(eslint@8.50.0)
       eslint-plugin-react: 7.33.2(eslint@8.50.0)
@@ -16164,12 +16174,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.50.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint@8.50.0))(eslint@8.50.0):
     dependencies:
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       enhanced-resolve: 5.15.0
       eslint: 8.50.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.50.0))(eslint@8.50.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0)
       eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
       fast-glob: 3.3.1
       get-tsconfig: 4.7.2
@@ -16185,14 +16195,14 @@ snapshots:
     dependencies:
       eslint: 9.3.0
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.50.0))(eslint@8.50.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 5.62.0(eslint@8.50.0)(typescript@5.2.2)
       eslint: 8.50.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.50.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint@8.50.0))(eslint@8.50.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -16244,7 +16254,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.50.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.50.0))(eslint@8.50.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1(@typescript-eslint/parser@5.62.0(eslint@8.50.0)(typescript@5.2.2))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0)
       has: 1.0.3
       is-core-module: 2.13.0
       is-glob: 4.0.3
@@ -16512,7 +16522,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -17376,7 +17386,7 @@ snapshots:
   http-proxy-agent@7.0.0:
     dependencies:
       agent-base: 7.1.0
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
 
@@ -17397,7 +17407,7 @@ snapshots:
   https-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.0
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
 
@@ -18577,7 +18587,7 @@ snapshots:
   micromark@3.2.0:
     dependencies:
       '@types/debug': 4.1.9
-      debug: 4.3.4(supports-color@9.4.0)
+      debug: 4.3.4
       decode-named-character-reference: 1.0.2
       micromark-core-commonmark: 1.1.0
       micromark-factory-space: 1.1.0