feat(frontend): Phase 3.6 — History page with timing bars, expandable cards, and pagination

.plans/package3_enhancement_plan.md

@@ -2,7 +2,7 @@
 
 **Source**: User request (2026-04-25)  
 **Scope**: System Prompt Configuration Page + Query History Page  
-**Status**: 🔧 In Progress (3.1 ✅, 3.2 ✅, 3.3 ✅, 3.4 ✅, 3.5 ✅, next: 3.6)
+**Status**: ✅ Package 3 Complete (3.1 ✅, 3.2 ✅, 3.3 ✅, 3.4 ✅, 3.5 ✅, 3.6 ✅)
 
 ---
 

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import { NavBar } from './components/NavBar'
 import { LTTPage } from './pages/LTTPage'
 import { RAGDatabasePage } from './pages/RAGDatabasePage'
 import { SystemPromptsPage } from './pages/SystemPromptsPage'
+import { HistoryPage } from './pages/HistoryPage'
 import { PdfViewerPage } from './pages/PdfViewerPage'
 
 export default function App(): JSX.Element {
@@ -23,6 +24,7 @@ export default function App(): JSX.Element {
                     <Route path="/" element={<LTTPage />} />
                     <Route path="/rag-database" element={<RAGDatabasePage />} />
                     <Route path="/system-prompts" element={<SystemPromptsPage />} />
+                    <Route path="/history" element={<HistoryPage />} />
                   </Routes>
                 </div>
               </div>

frontend/src/components/HistoryCard.tsx

@@ -0,0 +1,279 @@
+import React, { useState } from 'react'
+import { ChevronDown, ChevronUp, Trash2, ChevronRight } from 'lucide-react'
+import { useQueryHistoryDetail } from '../lib/queries'
+import { getPdfViewerUrl } from '../lib/api'
+import { TimingBar } from './TimingBar'
+import type { QueryHistorySummary, SourceMetadata } from '../types'
+
+interface HistoryCardProps {
+  item: QueryHistorySummary
+  onDelete: (id: number) => void
+  isDeleting: boolean
+}
+
+const formatDate = (dateStr: string): string => {
+  try {
+    const date = new Date(dateStr)
+    return date.toLocaleString()
+  } catch {
+    return dateStr
+  }
+}
+
+const formatTime = (ms: number): string => {
+  if (ms >= 1000) {
+    return `${(ms / 1000).toFixed(1)}s`
+  }
+  return `${Math.round(ms)}ms`
+}
+
+interface CollapsibleSectionProps {
+  title: string
+  children: React.ReactNode
+}
+
+const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({ title, children }) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div className="border border-gray-200 rounded-lg bg-white">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+      >
+        {isOpen ? (
+          <ChevronDown className="w-4 h-4 text-gray-500" />
+        ) : (
+          <ChevronRight className="w-4 h-4 text-gray-500" />
+        )}
+        {title}
+      </button>
+      {isOpen && (
+        <div className="px-3 pb-3">
+          <div className="mt-2 overflow-x-auto bg-gray-50 rounded p-3">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const HistoryCard: React.FC<HistoryCardProps> = ({
+  item,
+  onDelete,
+  isDeleting,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const { data: detail, isLoading: isLoadingDetail } = useQueryHistoryDetail(
+    isExpanded ? item.id : null
+  )
+
+  const handleDelete = () => {
+    if (window.confirm('Delete this query history entry?')) {
+      onDelete(item.id)
+    }
+  }
+
+  const inputText = item.input_text.length > 100
+    ? `${item.input_text.slice(0, 100)}...`
+    : item.input_text
+
+  let extractedQuestions: string[] = []
+  if (detail?.extracted_questions) {
+    try {
+      const parsed = JSON.parse(detail.extracted_questions)
+      if (Array.isArray(parsed)) {
+        extractedQuestions = parsed
+      }
+    } catch {}
+  }
+
+  let sources: SourceMetadata[] = []
+  if (detail?.sources) {
+    try {
+      const parsed = JSON.parse(detail.sources)
+      if (Array.isArray(parsed)) {
+        sources = parsed
+      }
+    } catch {}
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+      <div
+        className={`flex items-center gap-3 ${isExpanded ? 'p-4' : 'px-4 py-3'}`}
+      >
+        <button
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex-shrink-0 text-gray-500 hover:text-gray-700 transition-colors"
+          aria-label={isExpanded ? 'Collapse' : 'Expand'}
+        >
+          {isExpanded ? (
+            <ChevronUp className="w-5 h-5" />
+          ) : (
+            <ChevronDown className="w-5 h-5" />
+          )}
+        </button>
+
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-medium text-gray-900 truncate">{inputText}</div>
+          <div className="flex items-center gap-2 mt-0.5">
+            <span className="text-xs text-gray-500">{formatDate(item.created_at)}</span>
+            <span className="text-xs text-gray-400">•</span>
+            <span className="text-xs text-gray-500">{formatTime(item.total_time_ms)}</span>
+            <span className="text-xs text-gray-400">•</span>
+            <span className="text-xs text-gray-500">
+              {item.chunks_retrieved_count} → {item.chunks_filtered_count} filtered
+            </span>
+            {item.profile_used && (
+              <>
+                <span className="text-xs text-gray-400">•</span>
+                <span className="inline-flex bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded">
+                  Profile {item.profile_used}
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+
+        <button
+          type="button"
+          onClick={handleDelete}
+          disabled={isDeleting}
+          className="flex-shrink-0 flex items-center gap-1 px-2 py-1 text-sm text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          aria-label="Delete"
+        >
+          <Trash2 className="w-4 h-4" />
+        </button>
+      </div>
+
+      {isExpanded && (
+        <div className="px-4 pb-4 space-y-4">
+          {isLoadingDetail ? (
+            <div className="space-y-3">
+              <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
+              <div className="h-3 bg-gray-200 rounded animate-pulse w-full" />
+              <div className="h-3 bg-gray-200 rounded animate-pulse w-4/5" />
+              <div className="h-3 bg-gray-200 rounded animate-pulse w-3/4" />
+              <div className="h-3 bg-gray-200 rounded animate-pulse w-full" />
+            </div>
+          ) : detail ? (
+            <>
+              <div className="space-y-1">
+                <TimingBar
+                  decomposerTimeMs={detail.decomposer_time_ms}
+                  retrieverTimeMs={detail.retriever_time_ms}
+                  filterTimeMs={detail.filter_time_ms}
+                  generatorTimeMs={detail.generator_time_ms}
+                  totalTimeMs={detail.total_time_ms}
+                />
+              </div>
+
+              {extractedQuestions.length > 0 && (
+                <div>
+                  <h4 className="text-sm font-medium text-gray-700 mb-2">Extracted Questions</h4>
+                  <ol className="list-decimal list-inside space-y-1">
+                    {extractedQuestions.map((q, idx) => (
+                      <li key={idx} className="text-sm text-gray-700">{q}</li>
+                    ))}
+                  </ol>
+                </div>
+              )}
+
+              {detail.decompose_prompt && (
+                <CollapsibleSection title="Decompose Prompt">
+                  <pre className="text-xs font-mono whitespace-pre-wrap break-all text-gray-700">{detail.decompose_prompt}</pre>
+                </CollapsibleSection>
+              )}
+
+              {detail.chunks_retrieved && (
+                <CollapsibleSection title="Retrieved Chunks">
+                  <pre className="text-xs font-mono whitespace-pre-wrap break-all text-gray-700">{detail.chunks_retrieved}</pre>
+                </CollapsibleSection>
+              )}
+
+              {detail.filter_prompt && (
+                <CollapsibleSection title="Filter Prompt">
+                  <pre className="text-xs font-mono whitespace-pre-wrap break-all text-gray-700">{detail.filter_prompt}</pre>
+                </CollapsibleSection>
+              )}
+
+              {detail.chunks_filtered && (
+                <CollapsibleSection title="Filtered Chunks">
+                  <pre className="text-xs font-mono whitespace-pre-wrap break-all text-gray-700">{detail.chunks_filtered}</pre>
+                </CollapsibleSection>
+              )}
+
+              {detail.generate_prompt && (
+                <CollapsibleSection title="Generate Prompt">
+                  <pre className="text-xs font-mono whitespace-pre-wrap break-all text-gray-700">{detail.generate_prompt}</pre>
+                </CollapsibleSection>
+              )}
+
+              {detail.final_answer && (
+                <div>
+                  <h4 className="text-sm font-medium text-gray-700 mb-2">Final Answer</h4>
+                  <div className="text-sm text-gray-700 whitespace-pre-wrap">{detail.final_answer}</div>
+                </div>
+              )}
+
+              {sources.length > 0 && (
+                <div>
+                  <h4 className="text-sm font-medium text-gray-700 mb-2">Sources</h4>
+                  <ul className="space-y-1">
+                    {sources.map((source, idx) => (
+                      <li key={idx} className="text-sm">
+                        {source.chunk_file_path ? (
+                          <a
+                            href={getPdfViewerUrl(
+                              source.chunk_file_path,
+                              source.page_number ?? undefined,
+                              source.filename
+                            )}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-blue-600 hover:text-blue-800 hover:underline"
+                          >
+                            {source.filename} (chunk {source.chunk_index}
+                            {source.page_number !== null && source.page_number !== undefined
+                              ? `, page ${source.page_number}`
+                              : ''}
+                            )
+                          </a>
+                        ) : (
+                          <span className="text-gray-700">
+                            {source.filename} (chunk {source.chunk_index}
+                            {source.page_number !== null && source.page_number !== undefined
+                              ? `, page ${source.page_number}`
+                              : ''}
+                            )
+                          </span>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              {detail.profile_used && (
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-gray-600">Profile used:</span>
+                  <span className="inline-flex bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded">
+                    {detail.profile_used}
+                  </span>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="text-sm text-gray-500 text-center py-4">
+              Failed to load details
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/HistoryList.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { Loader2 } from 'lucide-react'
+import { HistoryCard } from './HistoryCard'
+import type { QueryHistorySummary } from '../types'
+
+interface HistoryListProps {
+  items: QueryHistorySummary[]
+  hasMore: boolean
+  onLoadMore: () => void
+  isLoadingMore: boolean
+  onDelete: (id: number) => void
+  isDeleting: boolean
+  onClearAll: () => void
+  isClearing: boolean
+}
+
+export const HistoryList: React.FC<HistoryListProps> = ({
+  items,
+  hasMore,
+  onLoadMore,
+  isLoadingMore,
+  onDelete,
+  isDeleting,
+  onClearAll,
+  isClearing,
+}) => {
+  const handleClearAll = () => {
+    if (window.confirm('Are you sure you want to clear all query history? This cannot be undone.')) {
+      onClearAll()
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {items.length > 0 && (
+        <div className="flex justify-end">
+          <button
+            type="button"
+            onClick={handleClearAll}
+            disabled={isClearing}
+            className="px-3 py-1.5 text-sm font-medium text-red-600 border border-red-300 rounded hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+          >
+            {isClearing ? 'Clearing...' : 'Clear All'}
+          </button>
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {items.map((item) => (
+          <HistoryCard
+            key={item.id}
+            item={item}
+            onDelete={onDelete}
+            isDeleting={isDeleting}
+          />
+        ))}
+      </div>
+
+      {hasMore && (
+        <div className="flex justify-center pt-4">
+          <button
+            type="button"
+            onClick={onLoadMore}
+            disabled={isLoadingMore}
+            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+          >
+            {isLoadingMore && <Loader2 className="w-4 h-4 animate-spin" />}
+            {isLoadingMore ? 'Loading...' : 'Load More'}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/NavBar.tsx

@@ -41,6 +41,30 @@ export const NavBar: React.FC = () => {
         >
           System Prompts
         </NavLink>
+        <NavLink
+          to="/history"
+          className={({ isActive }) =>
+            `text-sm font-medium transition-colors ${
+              isActive
+                ? 'text-gray-900 border-b-2 border-gray-900'
+                : 'text-gray-500 hover:text-gray-700 border-b-2 border-transparent'
+            }`
+          }
+        >
+          History
+        </NavLink>
+        <NavLink
+          to="/history"
+          className={({ isActive }) =>
+            `text-sm font-medium transition-colors ${
+              isActive
+                ? 'text-gray-900 border-b-2 border-gray-900'
+                : 'text-gray-500 hover:text-gray-700 border-b-2 border-transparent'
+            }`
+          }
+        >
+          History
+        </NavLink>
       </div>
     </nav>
   )

frontend/src/components/TimingBar.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+interface TimingBarProps {
+  decomposerTimeMs: number
+  retrieverTimeMs: number
+  filterTimeMs: number
+  generatorTimeMs: number
+  totalTimeMs: number
+}
+
+const formatTime = (ms: number): string => {
+  if (ms >= 1000) {
+    return `${(ms / 1000).toFixed(1)}s`
+  }
+  return `${Math.round(ms)}ms`
+}
+
+interface BarSegment {
+  label: string
+  timeMs: number
+  colorClass: string
+}
+
+export const TimingBar: React.FC<TimingBarProps> = ({
+  decomposerTimeMs,
+  retrieverTimeMs,
+  filterTimeMs,
+  generatorTimeMs,
+  totalTimeMs,
+}) => {
+  const segments: BarSegment[] = [
+    { label: 'Decompose', timeMs: decomposerTimeMs, colorClass: 'bg-blue-400' },
+    { label: 'Retrieve', timeMs: retrieverTimeMs, colorClass: 'bg-green-400' },
+    { label: 'Filter', timeMs: filterTimeMs, colorClass: 'bg-amber-400' },
+    { label: 'Generate', timeMs: generatorTimeMs, colorClass: 'bg-purple-400' },
+  ]
+
+  const maxTime = totalTimeMs > 0 ? totalTimeMs : 1
+
+  return (
+    <div className="space-y-1">
+      {segments.map((segment) => {
+        const widthPercent = maxTime > 0 ? (segment.timeMs / maxTime) * 100 : 0
+        return (
+          <div key={segment.label}>
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-gray-500">{segment.label}</span>
+              <span className="text-xs text-gray-500">{formatTime(segment.timeMs)}</span>
+            </div>
+            <div className="h-3 rounded-sm bg-gray-100 overflow-hidden">
+              <div
+                data-testid="timing-bar-fill"
+                className={`h-full rounded-sm ${segment.colorClass} transition-all duration-300`}
+                style={{ width: `${widthPercent}%` }}
+              />
+            </div>
+          </div>
+        )
+      })}
+      <div className="flex items-center justify-between pt-1">
+        <span className="text-xs font-medium text-gray-600">Total</span>
+        <span className="text-xs font-medium text-gray-600">{formatTime(totalTimeMs)}</span>
+      </div>
+    </div>
+  )
+}

frontend/src/lib/api.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import type { QueryRequest, QueryResponse, QueryStreamEvent, IngestResponse, DocumentListResponse, ChunkInfo, DeleteResponse, PromptProfileListResponse, PromptSetResponse, PromptUpdateRequest, PromptBatchUpdateRequest, PromptActivateResponse, PromptStatusResponse } from '../types'
+import type { QueryRequest, QueryResponse, QueryStreamEvent, IngestResponse, DocumentListResponse, ChunkInfo, DeleteResponse, PromptProfileListResponse, PromptSetResponse, PromptUpdateRequest, PromptBatchUpdateRequest, PromptActivateResponse, PromptStatusResponse, QueryHistoryList, QueryHistoryDetail, HistoryStats, HistoryDeleteResponse } from '../types'
 
 const BASE_URL: string = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8000/api/v1'
 
@@ -118,3 +118,28 @@ export const resetPrompts = async (name: string, step?: string): Promise<PromptS
   const resp = await apiClient.put<PromptStatusResponse>(`/prompts/profiles/${name}/reset`, step ? { step } : {})
   return resp.data
 }
+
+export const listQueryHistory = async (limit = 50, offset = 0): Promise<QueryHistoryList> => {
+  const resp = await apiClient.get<QueryHistoryList>(`/history?limit=${limit}&offset=${offset}`)
+  return resp.data
+}
+
+export const getQueryHistoryDetail = async (id: number): Promise<QueryHistoryDetail> => {
+  const resp = await apiClient.get<QueryHistoryDetail>(`/history/${id}`)
+  return resp.data
+}
+
+export const deleteQueryHistory = async (id: number): Promise<HistoryDeleteResponse> => {
+  const resp = await apiClient.delete<HistoryDeleteResponse>(`/history/${id}`)
+  return resp.data
+}
+
+export const clearQueryHistory = async (): Promise<HistoryDeleteResponse> => {
+  const resp = await apiClient.delete<HistoryDeleteResponse>('/history')
+  return resp.data
+}
+
+export const getHistoryStats = async (): Promise<HistoryStats> => {
+  const resp = await apiClient.get<HistoryStats>('/history/stats')
+  return resp.data
+}

frontend/src/lib/queries.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { queryDocument, queryDocumentStream, ingestDocument, listDocuments, listChunks, deleteDocument, deleteChunk, listPromptProfiles, getPromptProfile, activatePromptProfile, updatePrompt, updateAllPrompts, resetPrompts } from './api'
+import { queryDocument, queryDocumentStream, ingestDocument, listDocuments, listChunks, deleteDocument, deleteChunk, listPromptProfiles, getPromptProfile, activatePromptProfile, updatePrompt, updateAllPrompts, resetPrompts, listQueryHistory, getQueryHistoryDetail, deleteQueryHistory, clearQueryHistory, getHistoryStats } from './api'
-import type { QueryRequest, QueryResponse, QueryStreamEvent, SourceMetadata, IngestResponse, DocumentListResponse, ChunkInfo, DeleteResponse, PromptProfileListResponse, PromptSetResponse, PromptUpdateRequest, PromptBatchUpdateRequest, PromptActivateResponse, PromptStatusResponse } from '../types'
+import type { QueryRequest, QueryResponse, QueryStreamEvent, SourceMetadata, IngestResponse, DocumentListResponse, ChunkInfo, DeleteResponse, PromptProfileListResponse, PromptSetResponse, PromptUpdateRequest, PromptBatchUpdateRequest, PromptActivateResponse, PromptStatusResponse, QueryHistoryList, QueryHistoryDetail, HistoryStats, HistoryDeleteResponse } from '../types'
 import { useState, useCallback, useRef } from 'react'
 
 export const queryClient = new QueryClient()
@@ -200,6 +200,48 @@ export const useResetPrompts = () => {
   })
 }
 
+export const useQueryHistoryList = (limit = 50, offset = 0) => {
+  return useQuery<QueryHistoryList, Error>({
+    queryKey: ['history', { limit, offset }],
+    queryFn: () => listQueryHistory(limit, offset),
+  })
+}
+
+export const useQueryHistoryDetail = (id: number | null) => {
+  return useQuery<QueryHistoryDetail, Error>({
+    queryKey: ['history', id],
+    queryFn: () => getQueryHistoryDetail(id!),
+    enabled: id !== null,
+  })
+}
+
+export const useDeleteQueryHistory = () => {
+  const queryClient = useQueryClient()
+  return useMutation<HistoryDeleteResponse, Error, number>({
+    mutationFn: deleteQueryHistory,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['history'] })
+    },
+  })
+}
+
+export const useClearQueryHistory = () => {
+  const queryClient = useQueryClient()
+  return useMutation<HistoryDeleteResponse, Error, void>({
+    mutationFn: clearQueryHistory,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['history'] })
+    },
+  })
+}
+
+export const useHistoryStats = () => {
+  return useQuery<HistoryStats, Error>({
+    queryKey: ['history', 'stats'],
+    queryFn: getHistoryStats,
+  })
+}
+
 export const AppQueryProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 }

frontend/src/pages/HistoryPage.tsx

@@ -0,0 +1,165 @@
+import React, { useState, useEffect } from 'react'
+import { AlertCircle, RotateCcw, Clock } from 'lucide-react'
+import { useQueryClient } from '@tanstack/react-query'
+import {
+  useQueryHistoryList,
+  useHistoryStats,
+  useDeleteQueryHistory,
+  useClearQueryHistory,
+} from '../lib/queries'
+import { HistoryList } from '../components/HistoryList'
+import type { QueryHistorySummary } from '../types'
+
+const formatTime = (ms: number): string => {
+  if (ms >= 1000) {
+    return `${(ms / 1000).toFixed(1)}s`
+  }
+  return `${Math.round(ms)}ms`
+}
+
+export const HistoryPage: React.FC = () => {
+  const [offset, setOffset] = useState(0)
+  const [allItems, setAllItems] = useState<QueryHistorySummary[]>([])
+  const limit = 20
+
+  const queryClient = useQueryClient()
+
+  const {
+    data: historyData,
+    isLoading: isLoadingHistory,
+    error: historyError,
+  } = useQueryHistoryList(limit, offset)
+
+  const { data: statsData } = useHistoryStats()
+
+  const deleteMutation = useDeleteQueryHistory()
+  const clearMutation = useClearQueryHistory()
+
+  useEffect(() => {
+    if (historyData?.queries) {
+      if (offset === 0) {
+        setAllItems(historyData.queries)
+      } else {
+        setAllItems((prev) => {
+          const existingIds = new Set(prev.map((item) => item.id))
+          const newItems = historyData.queries.filter((item) => !existingIds.has(item.id))
+          return [...prev, ...newItems]
+        })
+      }
+    }
+  }, [historyData, offset])
+
+  const handleLoadMore = () => {
+    setOffset((prev) => prev + limit)
+  }
+
+  const handleDelete = (id: number) => {
+    deleteMutation.mutate(id, {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['history'] })
+      },
+    })
+  }
+
+  const handleClearAll = () => {
+    clearMutation.mutate(undefined, {
+      onSuccess: () => {
+        setOffset(0)
+        queryClient.invalidateQueries({ queryKey: ['history'] })
+      },
+    })
+  }
+
+  const hasMore = historyData
+    ? historyData.offset + historyData.limit < historyData.total
+    : false
+
+  if (isLoadingHistory && offset === 0) {
+    return (
+      <div className="h-full flex flex-col bg-gray-50">
+        <div className="border-b border-gray-200 bg-white px-6 py-4">
+          <h1 className="text-2xl font-bold text-gray-900">History</h1>
+        </div>
+        <div className="flex-1 overflow-auto p-6">
+          <div data-testid="history-loading-skeleton" className="space-y-3">
+            <div className="h-20 bg-gray-200 rounded animate-pulse" />
+            <div className="h-20 bg-gray-200 rounded animate-pulse" />
+            <div className="h-20 bg-gray-200 rounded animate-pulse" />
+            <div className="h-20 bg-gray-200 rounded animate-pulse" />
+            <div className="h-20 bg-gray-200 rounded animate-pulse" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (historyError) {
+    return (
+      <div className="h-full flex flex-col bg-gray-50">
+        <div className="border-b border-gray-200 bg-white px-6 py-4">
+          <h1 className="text-2xl font-bold text-gray-900">History</h1>
+        </div>
+        <div className="flex-1 overflow-auto p-6">
+          <div className="bg-red-50 border border-red-200 text-red-700 rounded p-4">
+            <div className="flex items-center gap-2">
+              <AlertCircle className="w-5 h-5" />
+              <span>Failed to load history: {historyError.message}</span>
+            </div>
+            <button
+              type="button"
+              onClick={() => queryClient.invalidateQueries({ queryKey: ['history'] })}
+              className="mt-3 flex items-center gap-1.5 text-sm font-medium text-red-700 hover:text-red-800"
+            >
+              <RotateCcw className="w-3.5 h-3.5" />
+              Retry
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const hasItems = allItems.length > 0
+
+  return (
+    <div className="h-full flex flex-col bg-gray-50">
+      <div className="border-b border-gray-200 bg-white px-6 py-4">
+        <h1 className="text-2xl font-bold text-gray-900">History</h1>
+        {statsData && hasItems && (
+          <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
+            <span>Total queries: {statsData.total_queries}</span>
+            <span className="text-gray-300">|</span>
+            <span>Avg time: {formatTime(statsData.avg_time_ms)}</span>
+            <span className="text-gray-300">|</span>
+            <span>Avg chunks: {statsData.avg_chunks_retrieved.toFixed(1)} → {statsData.avg_chunks_filtered.toFixed(1)} filtered</span>
+            <span className="text-gray-300">|</span>
+            <span>Top profile: {statsData.most_used_profile ?? 'None'}</span>
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1 overflow-auto p-6">
+        {!hasItems ? (
+          <div className="h-full flex items-center justify-center bg-white/50 rounded-lg border border-gray-200">
+            <div className="text-center space-y-2">
+              <Clock className="mx-auto w-12 h-12 text-gray-600" />
+              <div className="text-gray-700 font-semibold">No queries yet</div>
+              <div className="text-sm text-gray-500">Submit a query from the LTT page to see it here.</div>
+            </div>
+          </div>
+        ) : (
+          <HistoryList
+            items={allItems}
+            hasMore={hasMore}
+            onLoadMore={handleLoadMore}
+            isLoadingMore={isLoadingHistory && offset > 0}
+            onDelete={handleDelete}
+            isDeleting={deleteMutation.isPending}
+            onClearAll={handleClearAll}
+            isClearing={clearMutation.isPending}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/test/components/HistoryCard.test.tsx

@@ -0,0 +1,269 @@
+import React from 'react'
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { HistoryCard } from '../../components/HistoryCard'
+import type { QueryHistorySummary, QueryHistoryDetail } from '../../types'
+
+vi.mock('../../lib/api', async () => {
+  const actual = await vi.importActual('../../lib/api')
+  return {
+    ...(actual as Record<string, unknown>),
+    getQueryHistoryDetail: vi.fn(),
+  }
+})
+
+import { getQueryHistoryDetail } from '../../lib/api'
+
+const mockGetQueryHistoryDetail = vi.mocked(getQueryHistoryDetail)
+
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+}
+
+function renderWithClient(ui: React.ReactElement) {
+  const qc = createQueryClient()
+  return render(<QueryClientProvider client={qc}>{ui}</QueryClientProvider>)
+}
+
+describe('HistoryCard', () => {
+  const mockItem: QueryHistorySummary = {
+    id: 42,
+    input_text: 'What is the NEC4 contract about?',
+    total_time_ms: 3500,
+    chunks_retrieved_count: 8,
+    chunks_filtered_count: 4,
+    profile_used: 'profile_a',
+    created_at: '2024-03-15T10:30:00Z',
+  }
+
+  const mockDetail: QueryHistoryDetail = {
+    id: 42,
+    input_text: 'What is the NEC4 contract about?',
+    extracted_questions: '["What is NEC4?","What are the contract terms?"]',
+    decompose_prompt: 'Break down the following question...',
+    decomposer_time_ms: 500,
+    retriever_time_ms: 200,
+    chunks_retrieved: '<chunk index="0">...</chunk>',
+    chunks_retrieved_count: 8,
+    filter_prompt: 'Filter relevant chunks...',
+    filter_time_ms: 150,
+    chunks_filtered: '<chunk index="0">...</chunk><chunk index="1">...</chunk>',
+    chunks_filtered_count: 4,
+    generate_prompt: 'Answer based on context...',
+    generator_time_ms: 300,
+    total_time_ms: 1150,
+    final_answer: '- NEC4 is a suite of contracts\n- Key terms include...',
+    sources: '[{"filename":"nec4.pdf","upload_date":"2024-01-01","content_summary":"NEC4 overview","chunk_index":0,"page_number":5,"chunk_file_path":"chunk_0.pdf"}]',
+    profile_used: 'profile_a',
+    created_at: '2024-03-15T10:30:00Z',
+  }
+
+  const mockOnDelete = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders collapsed card with input_text', () => {
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    expect(screen.getByText('What is the NEC4 contract about?')).toBeInTheDocument()
+  })
+
+  it('truncates long input_text to approximately 100 characters', () => {
+    const longText = 'A'.repeat(200)
+    const longItem = { ...mockItem, input_text: longText }
+    renderWithClient(<HistoryCard item={longItem} onDelete={mockOnDelete} isDeleting={false} />)
+    const truncated = screen.getByText(/A{100}\.\.\./)
+    expect(truncated.textContent!.length).toBeLessThanOrEqual(103)
+  })
+
+  it('shows created_at formatted date', () => {
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    expect(screen.getByText(/2024/)).toBeInTheDocument()
+  })
+
+  it('shows total_time_ms', () => {
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    expect(screen.getByText('3.5s')).toBeInTheDocument()
+  })
+
+  it('shows profile badge when profile_used is set', () => {
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    expect(screen.getByText(/profile_a/)).toBeInTheDocument()
+  })
+
+  it('does not show profile badge when profile_used is null', () => {
+    const noProfileItem = { ...mockItem, profile_used: null }
+    renderWithClient(<HistoryCard item={noProfileItem} onDelete={mockOnDelete} isDeleting={false} />)
+    expect(screen.queryByText(/Profile/)).not.toBeInTheDocument()
+  })
+
+  it('shows chunk count summary', () => {
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    expect(screen.getByText(/8 → 4 filtered/)).toBeInTheDocument()
+  })
+
+  it('shows expand button in collapsed state', () => {
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    const expandBtn = screen.getByLabelText('Expand')
+    expect(expandBtn).toBeInTheDocument()
+  })
+
+  it('clicking expand fetches detail via useQueryHistoryDetail', async () => {
+    mockGetQueryHistoryDetail.mockResolvedValueOnce(mockDetail)
+
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Expand'))
+    })
+
+    await waitFor(() => {
+      expect(mockGetQueryHistoryDetail).toHaveBeenCalledWith(42)
+    })
+  })
+
+  it('expanded view shows collapse toggle button', async () => {
+    mockGetQueryHistoryDetail.mockResolvedValueOnce(mockDetail)
+
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Expand'))
+    })
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Collapse')).toBeInTheDocument()
+    })
+  })
+
+  it('expanded view shows TimingBar with timing data', async () => {
+    mockGetQueryHistoryDetail.mockResolvedValueOnce(mockDetail)
+
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Expand'))
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Decompose')).toBeInTheDocument()
+      expect(screen.getByText('Retrieve')).toBeInTheDocument()
+      expect(screen.getByText('Filter')).toBeInTheDocument()
+      expect(screen.getByText('Generate')).toBeInTheDocument()
+    })
+  })
+
+  it('expanded view shows extracted questions parsed from JSON', async () => {
+    mockGetQueryHistoryDetail.mockResolvedValueOnce(mockDetail)
+
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Expand'))
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('What is NEC4?')).toBeInTheDocument()
+      expect(screen.getByText('What are the contract terms?')).toBeInTheDocument()
+    })
+  })
+
+  it('expanded view shows final answer', async () => {
+    mockGetQueryHistoryDetail.mockResolvedValueOnce(mockDetail)
+
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Expand'))
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText(/NEC4 is a suite of contracts/)).toBeInTheDocument()
+    })
+  })
+
+  it('expanded view shows source links that are clickable', async () => {
+    mockGetQueryHistoryDetail.mockResolvedValueOnce(mockDetail)
+
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Expand'))
+    })
+
+    await waitFor(() => {
+      const sourceLink = screen.getByRole('link', { name: /nec4\.pdf/i })
+      expect(sourceLink).toBeInTheDocument()
+      expect(sourceLink).toHaveAttribute('href', expect.stringContaining('/pdf-viewer'))
+      expect(sourceLink).toHaveAttribute('target', '_blank')
+    })
+  })
+
+  it('delete button calls onDelete with correct id after confirmation', () => {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+
+    fireEvent.click(screen.getByLabelText('Delete'))
+
+    expect(confirmSpy).toHaveBeenCalled()
+    expect(mockOnDelete).toHaveBeenCalledWith(42)
+    confirmSpy.mockRestore()
+  })
+
+  it('delete button does not call onDelete when confirmation is cancelled', () => {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+
+    fireEvent.click(screen.getByLabelText('Delete'))
+
+    expect(confirmSpy).toHaveBeenCalled()
+    expect(mockOnDelete).not.toHaveBeenCalled()
+    confirmSpy.mockRestore()
+  })
+
+  it('shows isDeleting state with disabled button', () => {
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={true} />)
+    const deleteBtn = screen.getByLabelText('Delete')
+    expect(deleteBtn).toBeDisabled()
+  })
+
+  it('has collapsible sections for prompts in expanded view', async () => {
+    mockGetQueryHistoryDetail.mockResolvedValueOnce(mockDetail)
+
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Expand'))
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Decompose Prompt')).toBeInTheDocument()
+      expect(screen.getByText('Filter Prompt')).toBeInTheDocument()
+      expect(screen.getByText('Generate Prompt')).toBeInTheDocument()
+    })
+  })
+
+  it('has collapsible sections for chunk XML in expanded view', async () => {
+    mockGetQueryHistoryDetail.mockResolvedValueOnce(mockDetail)
+
+    renderWithClient(<HistoryCard item={mockItem} onDelete={mockOnDelete} isDeleting={false} />)
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Expand'))
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Retrieved Chunks')).toBeInTheDocument()
+      expect(screen.getByText('Filtered Chunks')).toBeInTheDocument()
+    })
+  })
+
+  it('shows correct profile text for profile_b', () => {
+    const profileBItem = { ...mockItem, profile_used: 'profile_b' }
+    renderWithClient(<HistoryCard item={profileBItem} onDelete={mockOnDelete} isDeleting={false} />)
+    expect(screen.getByText(/profile_b/)).toBeInTheDocument()
+  })
+
+  it('shows correct profile text for profile_c', () => {
+    const profileCItem = { ...mockItem, profile_used: 'profile_c' }
+    renderWithClient(<HistoryCard item={profileCItem} onDelete={mockOnDelete} isDeleting={false} />)
+    expect(screen.getByText(/profile_c/)).toBeInTheDocument()
+  })
+})

frontend/src/test/components/HistoryPage.test.tsx

@@ -0,0 +1,266 @@
+import React from 'react'
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { HistoryPage } from '../../pages/HistoryPage'
+import type { QueryHistorySummary, HistoryStats } from '../../types'
+
+vi.mock('../../lib/api', async () => {
+  const actual = await vi.importActual('../../lib/api')
+  return {
+    ...(actual as Record<string, unknown>),
+    listQueryHistory: vi.fn(),
+    getHistoryStats: vi.fn(),
+    deleteQueryHistory: vi.fn(),
+    clearQueryHistory: vi.fn(),
+  }
+})
+
+import { listQueryHistory, getHistoryStats, clearQueryHistory } from '../../lib/api'
+
+const mockListQueryHistory = vi.mocked(listQueryHistory)
+const mockGetHistoryStats = vi.mocked(getHistoryStats)
+const mockClearQueryHistory = vi.mocked(clearQueryHistory)
+
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+}
+
+function renderHistoryPage() {
+  const qc = createQueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <HistoryPage />
+    </QueryClientProvider>
+  )
+}
+
+const makeHistoryItem = (id: number, overrides?: Partial<QueryHistorySummary>): QueryHistorySummary => ({
+  id,
+  input_text: `Query question ${id}`,
+  total_time_ms: 1000 + id * 100,
+  chunks_retrieved_count: 10,
+  chunks_filtered_count: 5,
+  profile_used: 'profile_a',
+  created_at: `2024-03-${String(id).padStart(2, '0')}T10:00:00Z`,
+  ...overrides,
+})
+
+describe('HistoryPage', () => {
+  const defaultStats: HistoryStats = {
+    total_queries: 2,
+    avg_time_ms: 1500,
+    avg_chunks_retrieved: 10,
+    avg_chunks_filtered: 5,
+    most_used_profile: 'profile_a',
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetHistoryStats.mockResolvedValue(defaultStats)
+  })
+
+  it('shows loading skeleton while data is loading', () => {
+    mockListQueryHistory.mockReturnValue(new Promise(() => {}))
+    mockGetHistoryStats.mockReturnValue(new Promise(() => {}))
+
+    renderHistoryPage()
+
+    expect(screen.getByRole('heading', { name: 'History' })).toBeInTheDocument()
+  })
+
+  it('shows error banner with retry button on API error', async () => {
+    mockListQueryHistory.mockRejectedValueOnce(new Error('Network error'))
+
+    renderHistoryPage()
+
+    await waitFor(() => {
+      expect(screen.getByText(/Failed to load history/i)).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /retry/i })).toBeInTheDocument()
+    })
+  })
+
+  it('retry button refetches data', async () => {
+    mockListQueryHistory.mockRejectedValueOnce(new Error('Network error'))
+    mockListQueryHistory.mockResolvedValueOnce({
+      queries: [makeHistoryItem(1)],
+      total: 1,
+      limit: 20,
+      offset: 0,
+    })
+
+    renderHistoryPage()
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /retry/i })).toBeInTheDocument()
+    })
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /retry/i }))
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText(/Query question 1/)).toBeInTheDocument()
+    })
+  })
+
+  it('shows empty state when list is empty', async () => {
+    mockListQueryHistory.mockResolvedValueOnce({
+      queries: [],
+      total: 0,
+      limit: 20,
+      offset: 0,
+    })
+
+    renderHistoryPage()
+
+    await waitFor(() => {
+      expect(screen.getByText(/no queries yet/i)).toBeInTheDocument()
+    })
+  })
+
+  it('shows history items when data is loaded', async () => {
+    const items = [makeHistoryItem(1), makeHistoryItem(2), makeHistoryItem(3)]
+    mockListQueryHistory.mockResolvedValueOnce({
+      queries: items,
+      total: 3,
+      limit: 20,
+      offset: 0,
+    })
+
+    renderHistoryPage()
+
+    await waitFor(() => {
+      expect(screen.getByText(/Query question 1/)).toBeInTheDocument()
+    })
+    expect(screen.getByText(/Query question 2/)).toBeInTheDocument()
+    expect(screen.getByText(/Query question 3/)).toBeInTheDocument()
+  })
+
+  it('shows stats bar when stats are loaded', async () => {
+    mockListQueryHistory.mockResolvedValueOnce({
+      queries: [makeHistoryItem(1)],
+      total: 1,
+      limit: 20,
+      offset: 0,
+    })
+
+    renderHistoryPage()
+
+    await waitFor(() => {
+      expect(screen.getByText(/Total queries: 2/)).toBeInTheDocument()
+      expect(screen.getByText(/Avg time: 1\.5s/)).toBeInTheDocument()
+      expect(screen.getByText(/Top profile: profile_a/)).toBeInTheDocument()
+    })
+  })
+
+  it('shows Load More button when more items are available', async () => {
+    const items = Array.from({ length: 5 }, (_, i) => makeHistoryItem(i + 1))
+    mockListQueryHistory.mockResolvedValueOnce({
+      queries: items,
+      total: 30,
+      limit: 20,
+      offset: 0,
+    })
+
+    renderHistoryPage()
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /load more/i })).toBeInTheDocument()
+    })
+  })
+
+  it('clicking Load More fetches additional items', async () => {
+    const firstBatch = Array.from({ length: 5 }, (_, i) => makeHistoryItem(i + 1))
+    const secondBatch = Array.from({ length: 3 }, (_, i) => makeHistoryItem(i + 6))
+
+    mockListQueryHistory.mockResolvedValueOnce({
+      queries: firstBatch,
+      total: 30,
+      limit: 20,
+      offset: 0,
+    })
+    mockListQueryHistory.mockResolvedValueOnce({
+      queries: secondBatch,
+      total: 30,
+      limit: 20,
+      offset: 20,
+    })
+
+    renderHistoryPage()
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /load more/i })).toBeInTheDocument()
+    })
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /load more/i }))
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText(/Query question 6/)).toBeInTheDocument()
+    })
+  })
+
+  it('Clear All button shows confirmation and calls API', async () => {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+    mockClearQueryHistory.mockResolvedValueOnce({ status: 'ok', deleted_count: 5 })
+    mockListQueryHistory.mockResolvedValueOnce({
+      queries: [makeHistoryItem(1)],
+      total: 1,
+      limit: 20,
+      offset: 0,
+    })
+
+    renderHistoryPage()
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /clear all/i })).toBeInTheDocument()
+    })
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /clear all/i }))
+    })
+
+    expect(confirmSpy).toHaveBeenCalled()
+    expect(mockClearQueryHistory).toHaveBeenCalled()
+    confirmSpy.mockRestore()
+  })
+
+  it('Clear All does not proceed when confirmation is cancelled', async () => {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
+    mockListQueryHistory.mockResolvedValueOnce({
+      queries: [makeHistoryItem(1)],
+      total: 1,
+      limit: 20,
+      offset: 0,
+    })
+
+    renderHistoryPage()
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /clear all/i })).toBeInTheDocument()
+    })
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /clear all/i }))
+    })
+
+    expect(confirmSpy).toHaveBeenCalled()
+    expect(mockClearQueryHistory).not.toHaveBeenCalled()
+    confirmSpy.mockRestore()
+  })
+
+  it('page title History is always visible even in error state', async () => {
+    mockListQueryHistory.mockRejectedValueOnce(new Error('Network error'))
+
+    renderHistoryPage()
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: /history/i })).toBeInTheDocument()
+    })
+  })
+})

frontend/src/test/components/TimingBar.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { TimingBar } from '../../components/TimingBar'
+
+describe('TimingBar', () => {
+  const defaultProps = {
+    decomposerTimeMs: 500,
+    retrieverTimeMs: 200,
+    filterTimeMs: 150,
+    generatorTimeMs: 300,
+    totalTimeMs: 1000,
+  }
+
+  it('renders all 4 stage labels', () => {
+    render(<TimingBar {...defaultProps} />)
+    expect(screen.getByText('Decompose')).toBeInTheDocument()
+    expect(screen.getByText('Retrieve')).toBeInTheDocument()
+    expect(screen.getByText('Filter')).toBeInTheDocument()
+    expect(screen.getByText('Generate')).toBeInTheDocument()
+  })
+
+  it('renders total time', () => {
+    render(<TimingBar {...defaultProps} />)
+    expect(screen.getByText('1.0s')).toBeInTheDocument()
+  })
+
+  it('renders bars with proportional widths based on time contribution', () => {
+    const { container } = render(<TimingBar {...defaultProps} />)
+    const bars = container.querySelectorAll('[data-testid="timing-bar-fill"]')
+    expect(bars).toHaveLength(4)
+
+    // decomposer=500/1000=50%, retriever=200/1000=20%, filter=150/1000=15%, generator=300/1000=30%
+    expect(bars[0]).toHaveStyle({ width: '50%' })
+    expect(bars[1]).toHaveStyle({ width: '20%' })
+    expect(bars[2]).toHaveStyle({ width: '15%' })
+    expect(bars[3]).toHaveStyle({ width: '30%' })
+  })
+
+  it('handles zero total time without division by zero', () => {
+    const { container } = render(
+      <TimingBar
+        {...defaultProps}
+        decomposerTimeMs={0}
+        retrieverTimeMs={0}
+        filterTimeMs={0}
+        generatorTimeMs={0}
+        totalTimeMs={0}
+      />
+    )
+    const bars = container.querySelectorAll('[data-testid="timing-bar-fill"]')
+    expect(bars).toHaveLength(4)
+    bars.forEach((bar) => {
+      expect(bar).toHaveStyle({ width: '0%' })
+    })
+  })
+
+  it('formats times >= 1000ms as seconds with 1 decimal', () => {
+    render(
+      <TimingBar
+        decomposerTimeMs={500}
+        retrieverTimeMs={200}
+        filterTimeMs={150}
+        generatorTimeMs={300}
+        totalTimeMs={1500}
+      />
+    )
+    expect(screen.getByText('1.5s')).toBeInTheDocument()
+  })
+
+  it('formats times < 1000ms as milliseconds', () => {
+    render(
+      <TimingBar
+        decomposerTimeMs={100}
+        retrieverTimeMs={200}
+        filterTimeMs={150}
+        generatorTimeMs={300}
+        totalTimeMs={750}
+      />
+    )
+    expect(screen.getByText('750ms')).toBeInTheDocument()
+  })
+
+  it('handles zero time for a single stage with bar width 0%', () => {
+    const { container } = render(
+      <TimingBar
+        decomposerTimeMs={0}
+        retrieverTimeMs={200}
+        filterTimeMs={150}
+        generatorTimeMs={300}
+        totalTimeMs={650}
+      />
+    )
+    const bars = container.querySelectorAll('[data-testid="timing-bar-fill"]')
+    expect(bars[0]).toHaveStyle({ width: '0%' })
+  })
+
+  it('uses correct Tailwind color classes for each stage', () => {
+    const { container } = render(<TimingBar {...defaultProps} />)
+    const bars = container.querySelectorAll('[data-testid="timing-bar-fill"]')
+
+    // Decompose = blue-400
+    expect(bars[0]).toHaveClass('bg-blue-400')
+    // Retrieve = green-400
+    expect(bars[1]).toHaveClass('bg-green-400')
+    // Filter = amber-400
+    expect(bars[2]).toHaveClass('bg-amber-400')
+    // Generate = purple-400
+    expect(bars[3]).toHaveClass('bg-purple-400')
+  })
+
+  it('renders individual stage times alongside labels', () => {
+    render(<TimingBar {...defaultProps} />)
+    expect(screen.getByText('500ms')).toBeInTheDocument()
+    expect(screen.getByText('200ms')).toBeInTheDocument()
+    expect(screen.getByText('150ms')).toBeInTheDocument()
+    expect(screen.getByText('300ms')).toBeInTheDocument()
+  })
+
+  it('renders a "Total" label alongside the total time', () => {
+    render(<TimingBar {...defaultProps} />)
+    expect(screen.getByText(/total/i)).toBeInTheDocument()
+  })
+})

frontend/src/types/index.ts

@@ -90,3 +90,56 @@ export interface PromptStatusResponse {
   step?: string
   reset_step?: string
 }
+
+export interface QueryHistorySummary {
+  id: number
+  input_text: string
+  total_time_ms: number
+  chunks_retrieved_count: number
+  chunks_filtered_count: number
+  profile_used: string | null
+  created_at: string
+}
+
+export interface QueryHistoryList {
+  queries: QueryHistorySummary[]
+  total: number
+  limit: number
+  offset: number
+}
+
+export interface QueryHistoryDetail {
+  id: number
+  input_text: string
+  extracted_questions: string | null
+  decompose_prompt: string | null
+  decomposer_time_ms: number
+  retriever_time_ms: number
+  chunks_retrieved: string | null
+  chunks_retrieved_count: number
+  filter_prompt: string | null
+  filter_time_ms: number
+  chunks_filtered: string | null
+  chunks_filtered_count: number
+  generate_prompt: string | null
+  generator_time_ms: number
+  total_time_ms: number
+  final_answer: string | null
+  sources: string | null
+  profile_used: string | null
+  created_at: string
+}
+
+export interface HistoryStats {
+  total_queries: number
+  avg_time_ms: number
+  avg_chunks_retrieved: number
+  avg_chunks_filtered: number
+  most_used_profile: string | null
+}
+
+export interface HistoryDeleteResponse {
+  status: string
+  deleted_id?: number
+  deleted_count?: number
+}