From 749ae42acbcbfdecd071f98d048761830d375229 Mon Sep 17 00:00:00 2001
From: Jose Henrique <jose.henrique.ivan@gmail.com>
Date: Sat, 28 Mar 2026 11:13:58 -0300
Subject: [PATCH] small changes

---
 .../src/components/PipelineProgress.tsx       |  2 +-
 packages/frontend/src/pages/Recom.css         | 79 +++++++++++++++++++
 packages/frontend/src/pages/Recom.tsx         | 51 +++++++++++-
 3 files changed, 130 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/PipelineProgress.tsx b/packages/frontend/src/components/PipelineProgress.tsx
index e10a454..18275c2 100644
--- a/packages/frontend/src/components/PipelineProgress.tsx
+++ b/packages/frontend/src/components/PipelineProgress.tsx
@@ -4,7 +4,7 @@ import type { StageMap, StageStatus } from '../types/index.js';
 const STAGES: { key: keyof StageMap; label: string }[] = [
   { key: 'interpreter', label: 'Interpreting Preferences' },
   { key: 'retrieval', label: 'Generating Candidates' },
-  { key: 'ranking', label: 'Ranking Shows' },
+  { key: 'ranking', label: 'Ranking Candidates' },
   { key: 'curator', label: 'Curating Results' },
 ];
 
diff --git a/packages/frontend/src/pages/Recom.css b/packages/frontend/src/pages/Recom.css
index 9f2659f..c7a2dd7 100644
--- a/packages/frontend/src/pages/Recom.css
+++ b/packages/frontend/src/pages/Recom.css
@@ -16,6 +16,85 @@
   margin-bottom: 24px;
 }
 
+/* ── Request Info Panel ─────────────────────────────────── */
+
+.rec-info-panel {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 24px;
+  overflow: hidden;
+}
+
+.rec-info-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  gap: 8px;
+}
+
+.rec-info-toggle:hover {
+  background: var(--bg-surface-2);
+}
+
+.rec-info-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.rec-info-chevron {
+  font-size: 10px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.rec-info-body {
+  padding: 0 16px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-top: 1px solid var(--border);
+  padding-top: 14px;
+}
+
+.rec-info-row {
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+}
+
+.rec-info-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  flex-shrink: 0;
+  width: 72px;
+}
+
+.rec-info-value {
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.rec-info-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 100px;
+  background: rgba(99, 102, 241, 0.15);
+  color: var(--accent);
+}
+
 .error-state {
   color: var(--text-muted);
 }
diff --git a/packages/frontend/src/pages/Recom.tsx b/packages/frontend/src/pages/Recom.tsx
index c907a2d..5f5e0f2 100644
--- a/packages/frontend/src/pages/Recom.tsx
+++ b/packages/frontend/src/pages/Recom.tsx
@@ -31,6 +31,7 @@ export function Recom({ id }: RecomProps) {
   const [stages, setStages] = useState<StageMap>(DEFAULT_STAGES);
   const [sseUrl, setSseUrl] = useState<string | null>(null);
   const [showModal, setShowModal] = useState(false);
+  const [infoExpanded, setInfoExpanded] = useState(true);
 
   useEffect(() => {
     setRec(null);
@@ -114,6 +115,55 @@ export function Recom({ id }: RecomProps) {
 
       <main class="main-content">
         <div class="recom-content">
+          {rec && (
+            <div class="content-area">
+              <div class="rec-info-panel">
+                <button class="rec-info-toggle" onClick={() => setInfoExpanded((e) => !e)}>
+                  <span class="rec-info-title">{rec.title}</span>
+                  <span class="rec-info-chevron">{infoExpanded ? '▲' : '▼'}</span>
+                </button>
+                {infoExpanded && (
+                  <div class="rec-info-body">
+                    {rec.main_prompt && (
+                      <div class="rec-info-row">
+                        <span class="rec-info-label">Description</span>
+                        <span class="rec-info-value">{rec.main_prompt}</span>
+                      </div>
+                    )}
+                    {rec.liked_shows && (
+                      <div class="rec-info-row">
+                        <span class="rec-info-label">Liked</span>
+                        <span class="rec-info-value">{rec.liked_shows}</span>
+                      </div>
+                    )}
+                    {rec.disliked_shows && (
+                      <div class="rec-info-row">
+                        <span class="rec-info-label">Disliked</span>
+                        <span class="rec-info-value">{rec.disliked_shows}</span>
+                      </div>
+                    )}
+                    {rec.themes && (
+                      <div class="rec-info-row">
+                        <span class="rec-info-label">Themes</span>
+                        <span class="rec-info-value">{rec.themes}</span>
+                      </div>
+                    )}
+                    <div class="rec-info-row">
+                      <span class="rec-info-label">Media</span>
+                      <span class="rec-info-value">{rec.media_type === 'tv_show' ? 'TV Shows' : 'Movies'}</span>
+                    </div>
+                    {rec.use_web_search && (
+                      <div class="rec-info-row">
+                        <span class="rec-info-label">Web Search</span>
+                        <span class="rec-info-badge">enabled</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
           {isRunning && (
             <div class="content-area">
               <PipelineProgress stages={stages} />
@@ -122,7 +172,6 @@ export function Recom({ id }: RecomProps) {
 
           {!isRunning && rec?.status === 'done' && rec.recommendations && (
             <div class="content-area">
-              <h2 class="rec-title">{rec.title}</h2>
               <div class="cards-grid">
                 {rec.recommendations.map((show) => (
                   <RecommendationCard