From 90269608bcc90910a45caf387309ed1db76cc712 Mon Sep 17 00:00:00 2001
From: Woody <woody.ck.tse@gmail.com>
Date: Wed, 29 Apr 2026 13:42:08 +0800
Subject: [PATCH] fix: display highlight tracking data in history page UI

- Add highlight_prompt, highlight_response, highlight_time_ms to QueryHistoryDetail type
- Add 'Highlights' bar segment with pink color in TimingBar component
- Pass highlightTimeMs to TimingBar in HistoryCard expanded view
- Add collapsible sections for highlight prompt and response in HistoryCard detail
---
 frontend/src/components/HistoryCard.tsx | 13 +++++++++++++
 frontend/src/components/TimingBar.tsx   |  3 +++
 frontend/src/types/index.ts             |  3 +++
 3 files changed, 19 insertions(+)

diff --git a/frontend/src/components/HistoryCard.tsx b/frontend/src/components/HistoryCard.tsx
index 512f2f7..a6490fa 100644
--- a/frontend/src/components/HistoryCard.tsx
+++ b/frontend/src/components/HistoryCard.tsx
@@ -168,6 +168,7 @@ export const HistoryCard: React.FC<HistoryCardProps> = ({
                   retrieverTimeMs={detail.retriever_time_ms}
                   filterTimeMs={detail.filter_time_ms}
                   generatorTimeMs={detail.generator_time_ms}
+                  highlightTimeMs={detail.highlight_time_ms}
                   totalTimeMs={detail.total_time_ms}
                 />
               </div>
@@ -213,6 +214,18 @@ export const HistoryCard: React.FC<HistoryCardProps> = ({
                 </CollapsibleSection>
               )}
 
+              {detail.highlight_prompt && (
+                <CollapsibleSection title="Highlight Prompt">
+                  <pre className="text-xs font-mono whitespace-pre-wrap break-all text-gray-700">{detail.highlight_prompt}</pre>
+                </CollapsibleSection>
+              )}
+
+              {detail.highlight_response && (
+                <CollapsibleSection title="Highlight Response">
+                  <pre className="text-xs font-mono whitespace-pre-wrap break-all text-gray-700">{detail.highlight_response}</pre>
+                </CollapsibleSection>
+              )}
+
               {detail.final_answer && (
                 <div>
                   <h4 className="text-sm font-medium text-gray-700 mb-2">Final Answer</h4>
diff --git a/frontend/src/components/TimingBar.tsx b/frontend/src/components/TimingBar.tsx
index e416f84..c6735ee 100644
--- a/frontend/src/components/TimingBar.tsx
+++ b/frontend/src/components/TimingBar.tsx
@@ -5,6 +5,7 @@ interface TimingBarProps {
   retrieverTimeMs: number
   filterTimeMs: number
   generatorTimeMs: number
+  highlightTimeMs?: number
   totalTimeMs: number
 }
 
@@ -26,6 +27,7 @@ export const TimingBar: React.FC<TimingBarProps> = ({
   retrieverTimeMs,
   filterTimeMs,
   generatorTimeMs,
+  highlightTimeMs,
   totalTimeMs,
 }) => {
   const segments: BarSegment[] = [
@@ -33,6 +35,7 @@ export const TimingBar: React.FC<TimingBarProps> = ({
     { label: 'Retrieve', timeMs: retrieverTimeMs, colorClass: 'bg-green-400' },
     { label: 'Filter', timeMs: filterTimeMs, colorClass: 'bg-amber-400' },
     { label: 'Generate', timeMs: generatorTimeMs, colorClass: 'bg-purple-400' },
+    { label: 'Highlights', timeMs: highlightTimeMs ?? 0, colorClass: 'bg-pink-400' },
   ]
 
   const maxTime = totalTimeMs > 0 ? totalTimeMs : 1
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 7a32e74..d29c503 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -151,6 +151,9 @@ export interface QueryHistoryDetail {
   final_answer: string | null
   sources: string | null
   profile_used: string | null
+  highlight_prompt: string | null
+  highlight_response: string | null
+  highlight_time_ms: number
   created_at: string
 }