changes and improvements

packages/frontend/src/components/Cards.css

@@ -57,6 +57,11 @@
   color: #f87171;
 }
 
+.badge-magenta {
+  background: rgba(217, 70, 239, 0.15);
+  color: #e879f9;
+}
+
 .card-title {
   font-size: 16px;
   font-weight: 600;
@@ -67,7 +72,42 @@
   font-size: 13px;
   color: var(--text-muted);
   line-height: 1.5;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
+}
+
+.genre-badge {
+  font-size: 10px;
+  font-weight: 500;
+  background: rgba(148, 163, 184, 0.12);
+  color: var(--text-dim);
+  display: inline-block;
+  margin-bottom: 10px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.pros-cons-table {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.pros-col,
+.cons-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pro-item {
+  color: #4ade80;
+}
+
+.con-item {
+  color: #f87171;
 }
 
 .card-feedback {

packages/frontend/src/components/RecommendationCard.tsx

@@ -9,6 +9,7 @@ interface RecommendationCardProps {
 }
 
 const CATEGORY_COLORS: Record<CuratorCategory, string> = {
+  'Full Match': 'badge-magenta',
   'Definitely Like': 'badge-green',
   'Might Like': 'badge-blue',
   'Questionable': 'badge-yellow',
@@ -48,6 +49,19 @@ export function RecommendationCard({ show, existingFeedback, onFeedback }: Recom
       </div>
       <p class="card-explanation">{show.explanation}</p>
 
+      {show.genre && <span class="badge genre-badge">{show.genre}</span>}
+
+      {(show.pros?.length > 0 || show.cons?.length > 0) && (
+        <div class="pros-cons-table">
+          <div class="pros-col">
+            {show.pros?.map((p) => <span class="pro-item">+ {p}</span>)}
+          </div>
+          <div class="cons-col">
+            {show.cons?.map((c) => <span class="con-item">- {c}</span>)}
+          </div>
+        </div>
+      )}
+
       <div class="card-feedback">
         <div class="star-rating">
           {[1, 2, 3].map((star) => {

packages/frontend/src/pages/Recom.tsx

@@ -185,6 +185,11 @@ export function Recom({ id }: RecomProps) {
                       </div>
                     )}
                     <div class="rec-info-row rec-info-delete-row">
+                      {!isRunning && (
+                        <button class="btn-rerun btn-rerank" onClick={handleRetry}>
+                          Re-run Pipeline
+                        </button>
+                      )}
                       <button
                         class="btn-danger"
                         onClick={() => {
@@ -223,9 +228,6 @@ export function Recom({ id }: RecomProps) {
                 ))}
               </div>
               <div class="rerank-section">
-                <button class="btn-rerank btn-rerun" onClick={handleRetry}>
-                  Re-run Pipeline
-                </button>
                 <button
                   class="btn-rerank"
                   onClick={handleRerank}

packages/frontend/src/types/index.ts

@@ -1,11 +1,14 @@
 export type MediaType = 'tv_show' | 'movie';
 
-export type CuratorCategory = 'Definitely Like' | 'Might Like' | 'Questionable' | 'Will Not Like';
+export type CuratorCategory = 'Full Match' | 'Definitely Like' | 'Might Like' | 'Questionable' | 'Will Not Like';
 
 export interface CuratorOutput {
   title: string;
   explanation: string;
   category: CuratorCategory;
+  genre: string;
+  pros: string[];
+  cons: string[];
 }
 
 export type RecommendationStatus = 'pending' | 'running' | 'done' | 'error';