From 4c5175834820160875053e52a3f10c900c70e270 Mon Sep 17 00:00:00 2001
From: Woody <woody.ck.tse@gmail.com>
Date: Fri, 24 Apr 2026 16:24:30 +0800
Subject: [PATCH] feat(frontend): replace KeywordsDisplay with
 ExtractedQuestionsDisplay (sub-phase 2.3)

Delete KeywordsDisplay (blue pills) and create ExtractedQuestionsDisplay (numbered list). Rename keywords to extracted_questions in types and LTTPage.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 .../components/ExtractedQuestionsDisplay.tsx  | 47 +++++++++++++++++++
 frontend/src/components/KeywordsDisplay.tsx   | 46 ------------------
 frontend/src/pages/LTTPage.tsx                |  4 +-
 frontend/src/types/index.ts                   |  2 +-
 4 files changed, 50 insertions(+), 49 deletions(-)
 create mode 100644 frontend/src/components/ExtractedQuestionsDisplay.tsx
 delete mode 100644 frontend/src/components/KeywordsDisplay.tsx

diff --git a/frontend/src/components/ExtractedQuestionsDisplay.tsx b/frontend/src/components/ExtractedQuestionsDisplay.tsx
new file mode 100644
index 0000000..41b61b5
--- /dev/null
+++ b/frontend/src/components/ExtractedQuestionsDisplay.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+export interface ExtractedQuestionsDisplayProps {
+  extractedQuestions?: string[]
+  isLoading: boolean
+}
+
+export const ExtractedQuestionsDisplay: React.FC<ExtractedQuestionsDisplayProps> = ({ extractedQuestions, isLoading }) => {
+  if (!isLoading && (!extractedQuestions || extractedQuestions.length === 0)) {
+    return null
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-2">
+        <span className="text-xs text-gray-500 uppercase tracking-wide">Extracted Questions:</span>
+        <div className="space-y-1">
+          {[1, 2, 3].map((i) => (
+            <div
+              key={i}
+              data-testid="extracted-question-skeleton"
+              className="rounded px-3 py-1 bg-gray-200 animate-pulse w-48 h-5"
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div data-testid="extracted-questions-section" className="space-y-2 transition-all duration-300 ease-in-out">
+      <span className="text-xs text-gray-500 uppercase tracking-wide">Extracted Questions:</span>
+      <ol data-testid="extracted-questions-container" className="list-decimal list-inside space-y-1">
+        {extractedQuestions?.map((question, index) => (
+          <li
+            key={index}
+            role="listitem"
+            data-testid={`extracted-question-${index}`}
+            className="text-sm text-gray-700 pl-1"
+          >
+            {question}
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}
diff --git a/frontend/src/components/KeywordsDisplay.tsx b/frontend/src/components/KeywordsDisplay.tsx
deleted file mode 100644
index 5982cca..0000000
--- a/frontend/src/components/KeywordsDisplay.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react'
-
-export interface KeywordsDisplayProps {
-  keywords?: string[]
-  isLoading: boolean
-}
-
-export const KeywordsDisplay: React.FC<KeywordsDisplayProps> = ({ keywords, isLoading }) => {
-  if (!isLoading && (!keywords || keywords.length === 0)) {
-    return null
-  }
-
-  if (isLoading) {
-    return (
-      <div className="space-y-2">
-        <span className="text-xs text-gray-500 uppercase tracking-wide">Extracted Keywords:</span>
-        <div className="flex flex-wrap gap-2">
-          {[1, 2, 3].map((i) => (
-            <div
-              key={i}
-              data-testid="keyword-skeleton"
-              className="rounded-full px-3 py-1 bg-gray-200 animate-pulse w-16 h-6"
-            />
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div data-testid="keywords-section" className="space-y-2 transition-all duration-300 ease-in-out">
-      <span className="text-xs text-gray-500 uppercase tracking-wide">Extracted Keywords:</span>
-      <div data-testid="keywords-container" className="flex flex-wrap">
-        {keywords?.map((keyword, index) => (
-          <span
-            key={index}
-            role="listitem"
-            className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-blue-100 text-blue-800 mr-2 mb-2"
-          >
-            {keyword}
-          </span>
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/frontend/src/pages/LTTPage.tsx b/frontend/src/pages/LTTPage.tsx
index 86d26d9..ebeebb3 100644
--- a/frontend/src/pages/LTTPage.tsx
+++ b/frontend/src/pages/LTTPage.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Film } from 'lucide-react'
 import { useQueryDocument } from '../lib/queries'
 import { QueryInput } from '../components/QueryInput'
-import { KeywordsDisplay } from '../components/KeywordsDisplay'
+import { ExtractedQuestionsDisplay } from '../components/ExtractedQuestionsDisplay'
 import { ResponsePanel } from '../components/ResponsePanel'
 
 const VideoPlaceholder: React.FC = () => {
@@ -30,7 +30,7 @@ export const LTTPage: React.FC = () => {
       </div>
       <div className="border-b border-gray-200 p-6 flex flex-col gap-4 overflow-y-auto min-h-0">
         <QueryInput onSubmit={handleQuerySubmit} isLoading={queryMutation.isPending} />
-        <KeywordsDisplay keywords={queryMutation.data?.keywords} isLoading={queryMutation.isPending} />
+        <ExtractedQuestionsDisplay extractedQuestions={queryMutation.data?.extracted_questions} isLoading={queryMutation.isPending} />
       </div>
       <div className="col-span-2 p-6 border-t border-gray-200 overflow-y-auto min-h-0">
         <ResponsePanel
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 32862cf..baded9f 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -12,7 +12,7 @@ export interface QueryRequest {
 }
 
 export interface QueryResponse {
-  keywords: string[]
+  extracted_questions: string[]
   answer: string
   sources: SourceMetadata[]
 }