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>

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>
+  )
+}

frontend/src/components/KeywordsDisplay.tsx

@@ -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>
-  )
-}

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

frontend/src/types/index.ts

@@ -12,7 +12,7 @@ export interface QueryRequest {
 }
 
 export interface QueryResponse {
-  keywords: string[]
+  extracted_questions: string[]
   answer: string
   sources: SourceMetadata[]
 }