From bb8a5da45e053e82f12f55950011efbe21ed032e Mon Sep 17 00:00:00 2001
From: Jose Henrique <jose.henrique.ivan@gmail.com>
Date: Tue, 31 Mar 2026 17:21:50 -0300
Subject: [PATCH] adding stuff

---
 deploy/recommender.yaml                       | 11 +++++++
 .../backend/src/routes/recommendations.ts     | 15 ++++++++++
 packages/frontend/src/api/client.ts           |  4 +++
 packages/frontend/src/components/Cards.css    |  2 ++
 .../src/components/PipelineProgress.css       |  4 +++
 .../src/components/PipelineProgress.tsx       | 12 ++++++--
 packages/frontend/src/components/Sidebar.css  | 21 ++++++++++++++
 packages/frontend/src/components/Sidebar.tsx  | 10 ++++++-
 .../frontend/src/hooks/useRecommendations.ts  |  7 +++++
 packages/frontend/src/pages/Recom.tsx         | 29 +++++++++++++++----
 10 files changed, 106 insertions(+), 9 deletions(-)

diff --git a/deploy/recommender.yaml b/deploy/recommender.yaml
index 46456cd..9e3dc8b 100644
--- a/deploy/recommender.yaml
+++ b/deploy/recommender.yaml
@@ -30,6 +30,17 @@ spec:
                 secretKeyRef:
                   name: recommender-secrets
                   key: DATABASE_URL
+            - name: BEARER_TOKEN
+              valueFrom:
+                secretKeyRef:
+                  name: recommender-secrets
+                  key: BEARER_TOKEN
+            - name: PROVIDER_URL
+              value: "https://openrouter.ai/api/v1"
+            - name: MODEL_NAME
+              value: "openai/gpt-5.4"
+            - name: AI_PROVIDER
+              value: "GENERIC"
           resources:
             requests:
               memory: "256Mi"
diff --git a/packages/backend/src/routes/recommendations.ts b/packages/backend/src/routes/recommendations.ts
index 0bb0948..0a1233f 100644
--- a/packages/backend/src/routes/recommendations.ts
+++ b/packages/backend/src/routes/recommendations.ts
@@ -116,6 +116,21 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
     }
   });
 
+  // DELETE /recommendations/:id — delete a recommendation
+  fastify.delete('/recommendations/:id', async (request, reply) => {
+    const { id } = request.params as { id: string };
+    const [rec] = await db
+      .select({ id: recommendations.id })
+      .from(recommendations)
+      .where(eq(recommendations.id, id));
+
+    if (!rec) return reply.code(404).send({ error: 'Not found' });
+
+    await db.delete(recommendations).where(eq(recommendations.id, id));
+
+    return reply.send({ ok: true });
+  });
+
   // POST /recommendations/:id/rerank — reset status so client can re-open SSE stream
   fastify.post('/recommendations/:id/rerank', async (request, reply) => {
     const { id } = request.params as { id: string };
diff --git a/packages/frontend/src/api/client.ts b/packages/frontend/src/api/client.ts
index 780668b..7401303 100644
--- a/packages/frontend/src/api/client.ts
+++ b/packages/frontend/src/api/client.ts
@@ -55,3 +55,7 @@ export function submitFeedback(body: {
 export function getFeedback(): Promise<FeedbackEntry[]> {
   return request('/feedback');
 }
+
+export function deleteRecommendation(id: string): Promise<{ ok: boolean }> {
+  return request(`/recommendations/${id}`, { method: 'DELETE' });
+}
diff --git a/packages/frontend/src/components/Cards.css b/packages/frontend/src/components/Cards.css
index e295894..d748e91 100644
--- a/packages/frontend/src/components/Cards.css
+++ b/packages/frontend/src/components/Cards.css
@@ -125,6 +125,8 @@
   padding: 16px 0 32px;
   display: flex;
   justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
 .btn-rerank {
diff --git a/packages/frontend/src/components/PipelineProgress.css b/packages/frontend/src/components/PipelineProgress.css
index 5bee258..7dc22ed 100644
--- a/packages/frontend/src/components/PipelineProgress.css
+++ b/packages/frontend/src/components/PipelineProgress.css
@@ -84,3 +84,7 @@
 .pipeline-step-label {
   font-weight: 500;
 }
+
+.pipeline-retry {
+  margin-top: 20px;
+}
diff --git a/packages/frontend/src/components/PipelineProgress.tsx b/packages/frontend/src/components/PipelineProgress.tsx
index 18275c2..0ae0629 100644
--- a/packages/frontend/src/components/PipelineProgress.tsx
+++ b/packages/frontend/src/components/PipelineProgress.tsx
@@ -10,6 +10,7 @@ const STAGES: { key: keyof StageMap; label: string }[] = [
 
 interface PipelineProgressProps {
   stages: StageMap;
+  onRetry?: () => void;
 }
 
 function StageIcon({ status }: { status: StageStatus }) {
@@ -25,10 +26,12 @@ function StageIcon({ status }: { status: StageStatus }) {
   }
 }
 
-export function PipelineProgress({ stages }: PipelineProgressProps) {
+export function PipelineProgress({ stages, onRetry }: PipelineProgressProps) {
+  const hasError = Object.values(stages).some((s) => s === 'error');
+
   return (
     <div class="pipeline-progress">
-      <h3 class="pipeline-title">Generating Recommendations…</h3>
+      <h3 class="pipeline-title">{hasError ? 'Pipeline Failed' : 'Generating Recommendations…'}</h3>
       <ul class="pipeline-steps">
         {STAGES.map(({ key, label }) => (
           <li key={key} class={`pipeline-step pipeline-step--${stages[key]}`}>
@@ -37,6 +40,11 @@ export function PipelineProgress({ stages }: PipelineProgressProps) {
           </li>
         ))}
       </ul>
+      {hasError && onRetry && (
+        <div class="pipeline-retry">
+          <button class="btn-primary" onClick={onRetry}>Re-run Pipeline</button>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/packages/frontend/src/components/Sidebar.css b/packages/frontend/src/components/Sidebar.css
index adc65d1..cd9e37c 100644
--- a/packages/frontend/src/components/Sidebar.css
+++ b/packages/frontend/src/components/Sidebar.css
@@ -142,4 +142,25 @@
 .sidebar-type-movie {
   background: rgba(245, 158, 11, 0.15);
   color: #fbbf24;
+}
+
+.sidebar-item-delete {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 2px;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s;
+}
+
+.sidebar-item:hover .sidebar-item-delete {
+  opacity: 1;
+}
+
+.sidebar-item-delete:hover {
+  color: var(--red);
 }
\ No newline at end of file
diff --git a/packages/frontend/src/components/Sidebar.tsx b/packages/frontend/src/components/Sidebar.tsx
index 92762a8..e98c619 100644
--- a/packages/frontend/src/components/Sidebar.tsx
+++ b/packages/frontend/src/components/Sidebar.tsx
@@ -6,6 +6,7 @@ interface SidebarProps {
   selectedId: string | null;
   onSelect: (id: string) => void;
   onNewClick: () => void;
+  onDelete?: (id: string) => void;
 }
 
 function statusIcon(status: RecommendationSummary['status']): string {
@@ -26,7 +27,7 @@ function statusClass(status: RecommendationSummary['status']): string {
   }
 }
 
-export function Sidebar({ list, selectedId, onSelect, onNewClick }: SidebarProps) {
+export function Sidebar({ list, selectedId, onSelect, onNewClick, onDelete }: SidebarProps) {
   return (
     <aside class="sidebar">
       <div class="sidebar-header">
@@ -56,6 +57,13 @@ export function Sidebar({ list, selectedId, onSelect, onNewClick }: SidebarProps
             <span class={`sidebar-type-badge sidebar-type-${item.media_type}`}>
               {item.media_type === 'movie' ? 'Film' : 'TV'}
             </span>
+            {onDelete && (
+              <button
+                class="sidebar-item-delete"
+                onClick={(e) => { e.stopPropagation(); onDelete(item.id); }}
+                title="Delete"
+              >×</button>
+            )}
           </li>
         ))}
       </ul>
diff --git a/packages/frontend/src/hooks/useRecommendations.ts b/packages/frontend/src/hooks/useRecommendations.ts
index a8de9c2..6acde5a 100644
--- a/packages/frontend/src/hooks/useRecommendations.ts
+++ b/packages/frontend/src/hooks/useRecommendations.ts
@@ -6,6 +6,7 @@ import {
   rerankRecommendation,
   submitFeedback,
   getFeedback,
+  deleteRecommendation,
 } from '../api/client.js';
 
 export function useRecommendations() {
@@ -71,6 +72,11 @@ export function useRecommendations() {
     [],
   );
 
+  const deleteRec = useCallback(async (id: string) => {
+    await deleteRecommendation(id);
+    setList((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+
   return {
     list,
     selectedId,
@@ -81,5 +87,6 @@ export function useRecommendations() {
     submitFeedback: handleSubmitFeedback,
     updateStatus,
     refreshList,
+    deleteRec,
   };
 }
diff --git a/packages/frontend/src/pages/Recom.tsx b/packages/frontend/src/pages/Recom.tsx
index 5f5e0f2..6043152 100644
--- a/packages/frontend/src/pages/Recom.tsx
+++ b/packages/frontend/src/pages/Recom.tsx
@@ -25,7 +25,7 @@ const DEFAULT_STAGES: StageMap = {
 const STAGE_ORDER: (keyof StageMap)[] = ['interpreter', 'retrieval', 'ranking', 'curator'];
 
 export function Recom({ id }: RecomProps) {
-  const { list, feedback, submitFeedback, rerank, updateStatus, refreshList, createNew } = useRecommendationsContext();
+  const { list, feedback, submitFeedback, rerank, updateStatus, refreshList, createNew, deleteRec } = useRecommendationsContext();
 
   const [rec, setRec] = useState<Recommendation | null>(null);
   const [stages, setStages] = useState<StageMap>(DEFAULT_STAGES);
@@ -70,6 +70,7 @@ export function Recom({ id }: RecomProps) {
       if (event.status === 'error') {
         setSseUrl(null);
         updateStatus(id, 'error');
+        setRec((prev) => (prev ? { ...prev, status: 'error' as const } : null));
         const stageKey = event.stage as PipelineStage;
         if (stageKey !== 'complete') {
           setStages((prev) => ({ ...prev, [stageKey as keyof StageMap]: 'error' }));
@@ -81,11 +82,23 @@ export function Recom({ id }: RecomProps) {
 
   useSSE(sseUrl, handleSSEEvent);
 
+  const handleRetry = async () => {
+    await rerank(id);
+    setStages(DEFAULT_STAGES);
+    setSseUrl(`/api/recommendations/${id}/stream`);
+    setRec((prev) => (prev ? { ...prev, status: 'pending' as const } : null));
+  };
+
   const handleRerank = async () => {
     await rerank(id);
     setStages(DEFAULT_STAGES);
     setSseUrl(`/api/recommendations/${id}/stream`);
-    setRec((prev) => (prev ? { ...prev, status: 'pending' } : null));
+    setRec((prev) => (prev ? { ...prev, status: 'pending' as const } : null));
+  };
+
+  const handleDelete = async (sid: string) => {
+    await deleteRec(sid);
+    if (sid === id) route('/');
   };
 
   const handleCreateNew = async (body: {
@@ -111,6 +124,7 @@ export function Recom({ id }: RecomProps) {
         selectedId={id}
         onSelect={(sid) => route(`/recom/${sid}`)}
         onNewClick={() => setShowModal(true)}
+        onDelete={handleDelete}
       />
 
       <main class="main-content">
@@ -166,7 +180,7 @@ export function Recom({ id }: RecomProps) {
 
           {isRunning && (
             <div class="content-area">
-              <PipelineProgress stages={stages} />
+              <PipelineProgress stages={stages} onRetry={handleRetry} />
             </div>
           )}
 
@@ -185,6 +199,9 @@ 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}
@@ -200,9 +217,9 @@ export function Recom({ id }: RecomProps) {
           {!isRunning && rec?.status === 'error' && (
             <div class="content-area error-state">
               <h2>Something went wrong</h2>
-              <p>The pipeline encountered an error. You can try again by clicking Re-rank.</p>
-              <button class="btn-primary" onClick={handleRerank}>
-                Try Again
+              <p>The pipeline encountered an error. You can try again by clicking the button below.</p>
+              <button class="btn-primary" onClick={handleRetry}>
+                Re-run Pipeline
               </button>
             </div>
           )}