fixes!

Dockerfile

@@ -7,7 +7,7 @@ COPY package.json package-lock.json ./
 COPY packages/backend/package.json  ./packages/backend/package.json
 COPY packages/frontend/package.json ./packages/frontend/package.json
 
-RUN npm ci --ignore-scripts
+RUN npm ci
 
 # ─── Stage 2: Build the Preact frontend ──────────────────────────────────────
 FROM deps AS build-frontend

deploy/recommender.yaml

@@ -18,7 +18,7 @@ spec:
           image: git.ivanch.me/ivanch/recommender:latest
           imagePullPolicy: Always
           ports:
-            - containerPort: 8080
+            - containerPort: 80
           env:
             - name: OPENAI_API_KEY
               valueFrom:
@@ -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"
@@ -48,7 +59,7 @@ spec:
     app: recommender
   ports:
     - port: 80
-      targetPort: 8080
+      targetPort: 80
 ---
 apiVersion: networking.k8s.io/v1
 kind: Ingress

entrypoint.sh

@@ -4,5 +4,8 @@ set -e
 # Start Nginx in the background
 nginx &
 
+# Run migrations
+node /app/node_modules/.bin/tsx /app/packages/backend/src/migrate.ts
+
 # Start the Node.js backend
 exec node /app/node_modules/.bin/tsx /app/packages/backend/src/index.ts

package-lock.json

@@ -3822,6 +3822,15 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/preact-router": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/preact-router/-/preact-router-4.1.2.tgz",
+      "integrity": "sha512-uICUaUFYh+XQ+6vZtQn1q+X6rSqwq+zorWOCLWPF5FAsQh3EJ+RsDQ9Ee+fjk545YWQHfUxhrBAaemfxEnMOUg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "preact": ">=10"
+      }
+    },
     "node_modules/process-warning": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-5.0.0.tgz",
@@ -4446,6 +4455,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "packages/backend": {
       "version": "1.0.0",
       "license": "ISC",
@@ -4454,7 +4472,8 @@
         "drizzle-orm": "^0.45.1",
         "fastify": "^5.8.4",
         "openai": "^6.32.0",
-        "postgres": "^3.4.8"
+        "postgres": "^3.4.8",
+        "zod": "^4.3.6"
       },
       "devDependencies": {
         "@types/node": "^24.12.0",
@@ -4466,7 +4485,8 @@
     "packages/frontend": {
       "version": "0.0.0",
       "dependencies": {
-        "preact": "^10.29.0"
+        "preact": "^10.29.0",
+        "preact-router": "^4.1.2"
       },
       "devDependencies": {
         "@preact/preset-vite": "^2.10.4",

packages/backend/.env

@@ -3,4 +3,14 @@
 # In production / Docker, supply these as environment variables.
 
 DATABASE_URL=postgres://user:password@localhost:5432/recommender
+
+# AI provider selection: OPENAI (default) or GENERIC
+AI_PROVIDER=OPENAI
+
+# OpenAI provider settings (used when AI_PROVIDER=OPENAI)
 OPENAI_API_KEY=your-openai-api-key-here
+
+# Generic provider settings (used when AI_PROVIDER=GENERIC)
+PROVIDER_URL=https://your-provider.example.com/v1
+BEARER_TOKEN=your-bearer-token
+MODEL_NAME=your-model-name

packages/backend/drizzle.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'drizzle-kit';
 import * as dotenv from 'dotenv';
 
-dotenv.config();
+dotenv.config({ path: ['.env.local', '.env'] });
 
 export default defineConfig({
   schema: './src/db/schema.ts',

packages/backend/drizzle/0000_wild_joseph.sql

@@ -0,0 +1,22 @@
+CREATE TABLE IF NOT EXISTS "feedback" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"tv_show_name" text NOT NULL,
+	"stars" integer NOT NULL,
+	"feedback" text DEFAULT '' NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "recommendations" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"title" text NOT NULL,
+	"main_prompt" text NOT NULL,
+	"liked_shows" text DEFAULT '' NOT NULL,
+	"disliked_shows" text DEFAULT '' NOT NULL,
+	"themes" text DEFAULT '' NOT NULL,
+	"brainstorm_count" integer DEFAULT 100 NOT NULL,
+	"recommendations" jsonb,
+	"status" text DEFAULT 'pending' NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX IF NOT EXISTS "feedback_tv_show_name_idx" ON "feedback" USING btree ("tv_show_name");

packages/backend/drizzle/0001_add_media_type_web_search.sql

@@ -0,0 +1,9 @@
+ALTER TABLE "recommendations" ADD COLUMN "media_type" text DEFAULT 'tv_show' NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "recommendations" ADD COLUMN "use_web_search" boolean DEFAULT false NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "feedback" RENAME COLUMN "tv_show_name" TO "item_name";
+--> statement-breakpoint
+DROP INDEX "feedback_tv_show_name_idx";
+--> statement-breakpoint
+CREATE UNIQUE INDEX "feedback_item_name_idx" ON "feedback" USING btree ("item_name");

packages/backend/drizzle/0002_add_validator_hard_requirements_expansive.sql

@@ -0,0 +1,9 @@
+ALTER TABLE "recommendations" ADD COLUMN "use_validator" boolean DEFAULT false NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "recommendations" ADD COLUMN "hard_requirements" boolean DEFAULT false NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "recommendations" ADD COLUMN "self_expansive" boolean DEFAULT false NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "recommendations" ADD COLUMN "expansive_passes" integer DEFAULT 1 NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "recommendations" ADD COLUMN "expansive_mode" text DEFAULT 'soft' NOT NULL;

packages/backend/drizzle/meta/0000_snapshot.json

@@ -0,0 +1,161 @@
+{
+  "id": "4ca81e42-26b0-46f5-988e-957360067861",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.feedback": {
+      "name": "feedback",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "tv_show_name": {
+          "name": "tv_show_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "stars": {
+          "name": "stars",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "feedback": {
+          "name": "feedback",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "feedback_tv_show_name_idx": {
+          "name": "feedback_tv_show_name_idx",
+          "columns": [
+            {
+              "expression": "tv_show_name",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.recommendations": {
+      "name": "recommendations",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "main_prompt": {
+          "name": "main_prompt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "liked_shows": {
+          "name": "liked_shows",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "disliked_shows": {
+          "name": "disliked_shows",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "themes": {
+          "name": "themes",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "brainstorm_count": {
+          "name": "brainstorm_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 100
+        },
+        "recommendations": {
+          "name": "recommendations",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'pending'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

packages/backend/drizzle/meta/_journal.json

@@ -0,0 +1,20 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1774479321371,
+      "tag": "0000_wild_joseph",
+      "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "when": 1774900000000,
+      "tag": "0001_add_media_type_web_search",
+      "breakpoints": true
+    }
+  ]
+}

packages/backend/package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "tsx watch src/index.ts"
+    "dev": "tsx watch src/index.ts",
+    "migrate": "tsx src/migrate.ts"
   },
   "keywords": [],
   "author": "",
@@ -16,7 +17,8 @@
     "drizzle-orm": "^0.45.1",
     "fastify": "^5.8.4",
     "openai": "^6.32.0",
-    "postgres": "^3.4.8"
+    "postgres": "^3.4.8",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@types/node": "^24.12.0",

packages/backend/src/agent.ts

@@ -1,21 +1,40 @@
 import OpenAI from 'openai';
 import * as dotenv from 'dotenv';
-dotenv.config();
+dotenv.config({ path: ['.env.local', '.env'] });
 
-export const openai = new OpenAI({
+const AI_PROVIDER = process.env.AI_PROVIDER ?? 'OPENAI';
+const isGeneric = AI_PROVIDER === 'GENERIC';
+
+export const openai = isGeneric
+  ? new OpenAI({
+    apiKey: process.env.BEARER_TOKEN,
+    baseURL: process.env.PROVIDER_URL,
+    timeout: 600000, // 10 minutes
+    maxRetries: 3,
+  })
+  : new OpenAI({
     apiKey: process.env.OPENAI_API_KEY,
+    timeout: 600000, // 10 minutes
+    maxRetries: 3,
   });
 
-export async function askAgent(prompt: string) {
+export const defaultModel = isGeneric ? (process.env.MODEL_NAME ?? 'default') : 'gpt-5.4';
+export const miniModel = isGeneric ? (process.env.MODEL_NAME ?? 'default') : 'gpt-5.4-mini';
+export const serviceOptions = isGeneric ? {} : { service_tier: 'flex' as const };
+export const supportsWebSearch = !isGeneric;
+
+export async function parseWithRetry<T>(fn: () => Promise<T>, retries = 2): Promise<T> {
+  let lastErr: unknown;
+  for (let attempt = 0; attempt <= retries; attempt++) {
     try {
-    const response = await openai.chat.completions.create({
-      model: 'gpt-5.4',
-      service_tier: 'flex',
-      messages: [{ role: 'user', content: prompt }],
-    });
-    return response!.choices![0]!.message!.content;
+      return await fn();
     } catch (err) {
-    console.error('Agent endpoint dummy error:', err instanceof Error ? err.message : err);
-    return 'Agent is in dummy mode or encountered an error.';
+      if (err instanceof SyntaxError && attempt < retries) {
+        lastErr = err;
+        continue;
+      }
+      throw err;
     }
   }
+  throw lastErr;
+}

packages/backend/src/agents/curator.ts

@@ -1,11 +1,31 @@
-import { openai } from '../agent.js';
-import type { InterpreterOutput, RankingOutput, CuratorOutput } from '../types/agents.js';
+import { openai, defaultModel, serviceOptions, supportsWebSearch, parseWithRetry } from '../agent.js';
+import type { InterpreterOutput, RankingOutput, CuratorOutput, MediaType } from '../types/agents.js';
+import { z } from 'zod';
+import { zodTextFormat } from 'openai/helpers/zod';
+
+const CuratorSchema = z.object({
+  shows: z.array(z.object({
+    title: z.string(),
+    explanation: z.string(),
+    category: z.enum(["Full Match", "Definitely Like", "Might Like", "Questionable", "Will Not Like"]),
+    genre: z.string(),
+    pros: z.array(z.string()).max(3),
+    cons: z.array(z.string()).max(3)
+  }))
+});
+
+const CHUNK_SIZE = 20;
 
 export async function runCurator(
   ranking: RankingOutput,
   interpreter: InterpreterOutput,
+  mediaType: MediaType = 'tv_show',
+  useWebSearch = false,
 ): Promise<CuratorOutput[]> {
+  const mediaLabel = mediaType === 'movie' ? 'movie' : 'TV show';
+
   const allShows = [
+    ...(ranking.full_match ?? []).map((t) => ({ title: t, category: 'Full Match' as const })),
     ...ranking.definitely_like.map((t) => ({ title: t, category: 'Definitely Like' as const })),
     ...ranking.might_like.map((t) => ({ title: t, category: 'Might Like' as const })),
     ...ranking.questionable.map((t) => ({ title: t, category: 'Questionable' as const })),
@@ -14,53 +34,48 @@ export async function runCurator(
 
   if (allShows.length === 0) return [];
 
-  const showList = allShows
-    .map((s) => `- "${s.title}" (${s.category})`)
-    .join('\n');
+  const canSearch = useWebSearch && supportsWebSearch;
+  const preferenceSummary = `User preferences summary:
+Liked: ${interpreter.liked.join(', ') || '(none)'}
+Themes: ${interpreter.themes.join(', ') || '(none)'}
+Tone: ${interpreter.tone.join(', ') || '(none)'}
+Character preferences: ${interpreter.character_preferences.join(', ') || '(none)'}
+Avoid: ${interpreter.avoid.join(', ') || '(none)'}
+Requirements: ${interpreter.requirements.join(', ') || '(none)'}`;
 
-  const response = await openai.chat.completions.create({
-    model: 'gpt-5.4-mini',
-    temperature: 0.5,
-    service_tier: 'flex',
-    response_format: { type: 'json_object' },
-    messages: [
-      {
-        role: 'system',
-        content: `You are a TV show recommendation curator. For each show, write a concise 1-2 sentence explanation of why it was assigned to its category based on the user's preferences.
-
-Your output MUST be valid JSON:
-{
-  "shows": [
-    {
-      "title": string,
-      "explanation": string,
-      "category": "Definitely Like" | "Might Like" | "Questionable" | "Will Not Like"
-    }
-  ]
-}
+  const instructions = `You are a ${mediaLabel} recommendation curator. For each ${mediaLabel}, write a concise explanation and surface the most useful details for the user.${useWebSearch ? '\n\nUse web search to verify details and enrich explanations with accurate information.' : ''}
 
 Rules:
 - Preserve the exact title and category as given
-- Keep explanations concise (1-2 sentences max)
-- Reference specific user preferences in the explanation
-- Be honest — explain why "Questionable" or "Will Not Like" shows got that rating`,
-      },
-      {
-        role: 'user',
-        content: `User preferences summary:
-Liked: ${JSON.stringify(interpreter.liked)}
-Themes: ${JSON.stringify(interpreter.themes)}
-Tone: ${JSON.stringify(interpreter.tone)}
-Character preferences: ${JSON.stringify(interpreter.character_preferences)}
-Avoid: ${JSON.stringify(interpreter.avoid)}
+- explanation: 1-2 sentences explaining why it was assigned to its category, referencing specific user preferences
+- genre: 1-3 words capturing the most prominent genre of the title (e.g. "Crime Drama", "Sci-Fi Thriller", "Romantic Comedy")
+- pros: up to 3 short bullet points about what this title does well relative to the user's taste
+- cons: up to 3 short bullet points about what the user might not like based on their preferences
+- Be honest — explain why "Questionable" or "Will Not Like" ${mediaLabel}s got that rating`;
 
-Shows to describe:
-${showList}`,
-      },
-    ],
-  });
-
-  const content = response.choices[0]?.message?.content ?? '{"shows":[]}';
-  const result = JSON.parse(content) as { shows: CuratorOutput[] };
-  return result.shows ?? [];
+  const chunks: typeof allShows[] = [];
+  for (let i = 0; i < allShows.length; i += CHUNK_SIZE) {
+    chunks.push(allShows.slice(i, i + CHUNK_SIZE));
+  }
+
+  const results: CuratorOutput[] = [];
+  for (const chunk of chunks) {
+    const showList = chunk.map((s) => `- "${s.title}" (${s.category})`).join('\n');
+    const response = await parseWithRetry(() => openai.responses.parse({
+      model: defaultModel,
+      temperature: 0.5,
+      max_completion_tokens: 16384,
+      ...serviceOptions,
+      ...(canSearch ? { tools: [{ type: 'web_search' as const }] } : {}),
+      text: { format: zodTextFormat(CuratorSchema, "shows") },
+      instructions,
+      input: `${preferenceSummary}
+
+${mediaLabel}s to describe:
+${showList}`,
+    }));
+    results.push(...(response.output_parsed?.shows ?? []));
+  }
+
+  return results;
 }

packages/backend/src/agents/interpreter.ts

@@ -1,56 +1,54 @@
-import { openai } from '../agent.js';
-import type { InterpreterOutput } from '../types/agents.js';
+import { openai, defaultModel, serviceOptions, parseWithRetry } from '../agent.js';
+import type { InterpreterOutput, MediaType } from '../types/agents.js';
+import { z } from 'zod';
+import { zodTextFormat } from 'openai/helpers/zod';
+
+const InterpreterSchema = z.object({
+  liked: z.array(z.string()),
+  disliked: z.array(z.string()),
+  themes: z.array(z.string()),
+  character_preferences: z.array(z.string()),
+  tone: z.array(z.string()),
+  avoid: z.array(z.string()),
+  requirements: z.array(z.string())
+});
 
 interface InterpreterInput {
   main_prompt: string;
   liked_shows: string;
   disliked_shows: string;
   themes: string;
+  media_type: MediaType;
   feedback_context?: string;
 }
 
 export async function runInterpreter(input: InterpreterInput): Promise<InterpreterOutput> {
+  const mediaLabel = input.media_type === 'movie' ? 'movie' : 'TV show';
   const feedbackSection = input.feedback_context
     ? `\n\nUser Feedback Context (incorporate into preferences):\n${input.feedback_context}`
     : '';
 
-  const response = await openai.chat.completions.create({
-    model: 'gpt-5.4-mini',
+  const response = await parseWithRetry(() => openai.responses.parse({
+    model: defaultModel,
     temperature: 0.2,
-    service_tier: 'flex',
-    response_format: { type: 'json_object' },
-    messages: [
-      {
-        role: 'system',
-        content: `You are a TV show preference interpreter. Transform raw user input into structured, normalized preferences.
-
-Your output MUST be valid JSON matching this schema:
-{
-  "liked": string[],        // shows the user likes
-  "disliked": string[],     // shows the user dislikes
-  "themes": string[],       // normalized themes (e.g. "spy" -> "espionage")
-  "character_preferences": string[], // character types they prefer
-  "tone": string[],         // tone descriptors (e.g. "serious", "grounded", "dark")
-  "avoid": string[]         // things to explicitly avoid
-}
+    ...serviceOptions,
+    text: { format: zodTextFormat(InterpreterSchema, "preferences") },
+    instructions: `You are a ${mediaLabel} preference interpreter. Transform raw user input into structured, normalized preferences.
 
 Rules:
 - Extract implicit preferences from the main prompt
 - Normalize terminology (e.g. "spy" → "espionage", "cop show" → "police procedural")
 - Detect and resolve contradictions (prefer explicit over implicit)
 - Do NOT assume anything not stated or clearly implied
-- Be specific and concrete, not vague`,
-      },
-      {
-        role: 'user',
-        content: `Main prompt: ${input.main_prompt}
-Liked shows: ${input.liked_shows || '(none)'}
-Disliked shows: ${input.disliked_shows || '(none)'}
+- Be specific and concrete, not vague
+- For "requirements": capture explicit hard requirements the user stated that recommendations must satisfy — things like "must be from the 2000s onward", "must have subtitles", "must feature a female lead". Leave empty if no such constraints were stated.`,
+    input: `Main prompt: ${input.main_prompt}
+Liked ${mediaLabel}s: ${input.liked_shows || '(none)'}
+Disliked ${mediaLabel}s: ${input.disliked_shows || '(none)'}
 Themes and requirements: ${input.themes || '(none)'}${feedbackSection}`,
-      },
-    ],
-  });
+  }));
 
-  const content = response.choices[0]?.message?.content ?? '{}';
-  return JSON.parse(content) as InterpreterOutput;
+  return (response.output_parsed as InterpreterOutput) ?? {
+    liked: [], disliked: [], themes: [], character_preferences: [], tone: [], avoid: [], requirements: []
+  };
 }

packages/backend/src/agents/ranking.ts

@@ -1,10 +1,24 @@
-import { openai } from '../agent.js';
-import type { InterpreterOutput, RetrievalOutput, RankingOutput } from '../types/agents.js';
+import { openai, defaultModel, serviceOptions, parseWithRetry } from '../agent.js';
+import type { InterpreterOutput, RetrievalOutput, RankingOutput, MediaType } from '../types/agents.js';
+import { z } from 'zod';
+import { zodTextFormat } from 'openai/helpers/zod';
+
+const RankingSchema = z.object({
+  full_match: z.array(z.string()),
+  definitely_like: z.array(z.string()),
+  might_like: z.array(z.string()),
+  questionable: z.array(z.string()),
+  will_not_like: z.array(z.string())
+});
 
 export async function runRanking(
   interpreter: InterpreterOutput,
   retrieval: RetrievalOutput,
+  mediaType: MediaType = 'tv_show',
+  hardRequirements = false,
 ): Promise<RankingOutput> {
+  const mediaLabel = mediaType === 'movie' ? 'movie' : 'TV show';
+
   // Phase 1: Pre-filter — remove avoidance violations
   const avoidList = interpreter.avoid.map((a) => a.toLowerCase());
   const filtered = retrieval.candidates.filter((c) => {
@@ -19,7 +33,8 @@ export async function runRanking(
     chunks.push(filtered.slice(i, i + CHUNK_SIZE));
   }
 
-  const allBuckets: RankingOutput = {
+  const allTags: RankingOutput = {
+    full_match: [],
     definitely_like: [],
     might_like: [],
     questionable: [],
@@ -29,55 +44,42 @@ export async function runRanking(
   for (const chunk of chunks) {
     const chunkTitles = chunk.map((c) => `- ${c.title}: ${c.reason}`).join('\n');
 
-    const response = await openai.chat.completions.create({
-      model: 'gpt-5.4',
+    const response = await parseWithRetry(() => openai.responses.parse({
+      model: defaultModel,
       temperature: 0.2,
-      service_tier: 'flex',
-      response_format: { type: 'json_object' },
-      messages: [
-        {
-          role: 'system',
-          content: `You are a TV show ranking critic. Assign each show to exactly one of four confidence buckets based on how well it matches the user's preferences.
+      max_completion_tokens: 16384,
+      ...serviceOptions,
+      text: { format: zodTextFormat(RankingSchema, "ranking") },
+      instructions: `You are a ${mediaLabel} ranking critic. Assign each ${mediaLabel} to exactly one of five confidence tags based on how well it matches the user's preferences.
 
-Buckets:
-- "definitely_like": Near-perfect match to all preferences
+Tags:
+- "full_match": 100% match — perfectly satisfies every stated preference, requirement, and avoidance criteria with no compromises
+- "definitely_like": Near-perfect match to all preferences with only minor caveats
 - "might_like": Strong match to most preferences
 - "questionable": Partial alignment, some aspects don't match
 - "will_not_like": Likely mismatch, conflicts with preferences or avoidance criteria
 
-Your output MUST be valid JSON:
-{
-  "definitely_like": string[],
-  "might_like": string[],
-  "questionable": string[],
-  "will_not_like": string[]
-}
+Every ${mediaLabel} in the input must appear in exactly one tag. Use the title exactly as given.${hardRequirements ? '\n\nHARD REQUIREMENTS MODE: Any candidate that does not satisfy every stated requirement must be placed in "will_not_like", regardless of other qualities.' : ''}`,
+      input: `User preferences:
+Liked ${mediaLabel}s: ${interpreter.liked.join(', ') || '(none)'}
+Themes: ${interpreter.themes.join(', ') || '(none)'}
+Character preferences: ${interpreter.character_preferences.join(', ') || '(none)'}
+Tone: ${interpreter.tone.join(', ') || '(none)'}
+Avoid: ${interpreter.avoid.join(', ') || '(none)'}
+Requirements: ${interpreter.requirements.join(', ') || '(none)'}
 
-Every show in the input must appear in exactly one bucket. Use the title exactly as given.`,
-        },
-        {
-          role: 'user',
-          content: `User preferences:
-Liked shows: ${JSON.stringify(interpreter.liked)}
-Themes: ${JSON.stringify(interpreter.themes)}
-Character preferences: ${JSON.stringify(interpreter.character_preferences)}
-Tone: ${JSON.stringify(interpreter.tone)}
-Avoid: ${JSON.stringify(interpreter.avoid)}
-
-Rank these shows:
+Rank these ${mediaLabel}s:
 ${chunkTitles}`,
-        },
-      ],
-    });
+    }));
 
-    const content = response.choices[0]?.message?.content ?? '{}';
-    const chunkResult = JSON.parse(content) as Partial<RankingOutput>;
+    const chunkResult = (response.output_parsed as Partial<RankingOutput>) ?? {};
 
-    allBuckets.definitely_like.push(...(chunkResult.definitely_like ?? []));
-    allBuckets.might_like.push(...(chunkResult.might_like ?? []));
-    allBuckets.questionable.push(...(chunkResult.questionable ?? []));
-    allBuckets.will_not_like.push(...(chunkResult.will_not_like ?? []));
+    allTags.full_match.push(...(chunkResult.full_match ?? []));
+    allTags.definitely_like.push(...(chunkResult.definitely_like ?? []));
+    allTags.might_like.push(...(chunkResult.might_like ?? []));
+    allTags.questionable.push(...(chunkResult.questionable ?? []));
+    allTags.will_not_like.push(...(chunkResult.will_not_like ?? []));
   }
 
-  return allBuckets;
+  return allTags;
 }

packages/backend/src/agents/retrieval.ts

@@ -1,47 +1,55 @@
-import { openai } from '../agent.js';
-import type { InterpreterOutput, RetrievalOutput } from '../types/agents.js';
+import { openai, defaultModel, serviceOptions, supportsWebSearch, parseWithRetry } from '../agent.js';
+import type { InterpreterOutput, RetrievalOutput, MediaType } from '../types/agents.js';
+import { z } from 'zod';
+import { zodTextFormat } from 'openai/helpers/zod';
 
-export async function runRetrieval(input: InterpreterOutput): Promise<RetrievalOutput> {
-  const response = await openai.chat.completions.create({
-    model: 'gpt-5.4',
-    temperature: 0.9,
-    service_tier: 'flex',
-    response_format: { type: 'json_object' },
-    messages: [
-      {
-        role: 'system',
-        content: `You are a TV show candidate generator. Your goal is to brainstorm a LARGE, DIVERSE pool of 60–80 TV show candidates that match the user's structured preferences.
-
-Your output MUST be valid JSON matching this schema:
-{
-  "candidates": [
-    { "title": string, "reason": string }
-  ]
-}
-
-Rules:
-- Include both well-known and obscure shows
-- Prioritize RECALL over precision — it's better to include too many than too few
-- Each "reason" should briefly explain why the show matches the preferences
-- Avoid duplicates
-- Include shows from different decades, countries, and networks
-- Aim for 60–80 candidates minimum`,
-      },
-      {
-        role: 'user',
-        content: `Structured preferences:
-Liked shows: ${JSON.stringify(input.liked)}
-Disliked shows: ${JSON.stringify(input.disliked)}
-Themes: ${JSON.stringify(input.themes)}
-Character preferences: ${JSON.stringify(input.character_preferences)}
-Tone: ${JSON.stringify(input.tone)}
-Avoid: ${JSON.stringify(input.avoid)}
-
-Generate a large, diverse pool of TV show candidates.`,
-      },
-    ],
+const RetrievalSchema = z.object({
+  candidates: z.array(z.object({
+    title: z.string(),
+    reason: z.string()
+  }))
 });
 
-  const content = response.choices[0]?.message?.content ?? '{"candidates":[]}';
-  return JSON.parse(content) as RetrievalOutput;
+export async function runRetrieval(
+  input: InterpreterOutput,
+  brainstormCount = 100,
+  mediaType: MediaType = 'tv_show',
+  useWebSearch = false,
+  hardRequirements = false,
+  previousFullMatches: string[] = [],
+): Promise<RetrievalOutput> {
+  const mediaLabel = mediaType === 'movie' ? 'movie' : 'TV show';
+  const mediaLabelPlural = mediaType === 'movie' ? 'movies' : 'TV shows';
+
+  const canSearch = useWebSearch && supportsWebSearch;
+  const response = await parseWithRetry(() => openai.responses.parse({
+    model: defaultModel,
+    temperature: 0.9,
+    max_completion_tokens: 16384,
+    ...serviceOptions,
+    ...(canSearch ? { tools: [{ type: 'web_search' as const }] } : {}),
+    text: { format: zodTextFormat(RetrievalSchema, "candidates") },
+    instructions: `You are a ${mediaLabel} candidate generator. Your goal is to brainstorm a LARGE, DIVERSE pool of ${brainstormCount} ${mediaLabel} candidates that match the user's structured preferences.${useWebSearch ? '\n\nUse web search to find recent and accurate titles, including newer releases.' : ''}
+
+Rules:
+- Include both well-known and obscure ${mediaLabelPlural}
+- Prioritize RECALL over precision — it's better to include too many than too few
+- Each "reason" should briefly explain why the ${mediaLabel} matches the preferences
+- Avoid duplicates
+- Include ${mediaLabelPlural} from different decades, countries${mediaType === 'tv_show' ? ', and networks' : ', and directors'}
+- The "title" field must contain ONLY the exact title name — no years, descriptions, network names, episode counts, or parenthetical notes. ✗ Bad: "Breaking Bad (2008–2013, AMC)" ✓ Good: "Breaking Bad"
+- Aim for ${brainstormCount} candidates minimum${previousFullMatches.length > 0 ? '\n- Do NOT suggest titles already in the Previous Full Matches list — generate NEW candidates inspired by what made those successful' : ''}${hardRequirements ? '\n\nIMPORTANT: Strictly follow ALL requirements. Exclude any candidate that does not meet every stated requirement.' : ''}`,
+    input: `Structured preferences:
+Liked ${mediaLabelPlural}: ${input.liked.join(', ') || '(none)'}
+Disliked ${mediaLabelPlural}: ${input.disliked.join(', ') || '(none)'}
+Themes: ${input.themes.join(', ') || '(none)'}
+Character preferences: ${input.character_preferences.join(', ') || '(none)'}
+Tone: ${input.tone.join(', ') || '(none)'}
+Avoid: ${input.avoid.join(', ') || '(none)'}
+Requirements: ${input.requirements.join(', ') || '(none)'}${previousFullMatches.length > 0 ? `\n\nPrevious Full Match titles (DO NOT repeat these; use them as inspiration for NEW candidates with similar qualities): ${previousFullMatches.join(', ')}` : ''}
+
+Generate a large, diverse pool of ${mediaLabel} candidates.`,
+  }));
+
+  return (response.output_parsed as RetrievalOutput) ?? { candidates: [] };
 }

packages/backend/src/agents/titleGenerator.ts

@@ -0,0 +1,22 @@
+import { openai, miniModel, serviceOptions } from '../agent.js';
+import type { InterpreterOutput, MediaType } from '../types/agents.js';
+
+export async function generateTitle(interpreter: InterpreterOutput, mediaType: MediaType = 'tv_show'): Promise<string> {
+  const mediaLabel = mediaType === 'movie' ? 'movie' : 'TV show';
+
+  const response = await openai.responses.create({
+    model: miniModel,
+    temperature: 0.7,
+    ...serviceOptions,
+    instructions: `Generate a concise 5-8 word title for a ${mediaLabel} recommendation session.
+Capture the essence of the user's taste — genre, tone, key themes.
+Respond with ONLY the title. No quotes, no trailing punctuation.
+Examples: "Dark Crime Dramas With Moral Ambiguity", "Cozy British Mysteries With Quirky Detectives"`,
+    input: `Liked: ${JSON.stringify(interpreter.liked)}
+Themes: ${JSON.stringify(interpreter.themes)}
+Tone: ${JSON.stringify(interpreter.tone)}
+Character preferences: ${JSON.stringify(interpreter.character_preferences)}`,
+  });
+
+  return (response.output_text ?? '').trim() || 'My Recommendation Session';
+}

packages/backend/src/agents/validator.ts

@@ -0,0 +1,68 @@
+import { openai, defaultModel, serviceOptions, supportsWebSearch, parseWithRetry } from '../agent.js';
+import type { RetrievalCandidate, ValidatorOutput, MediaType } from '../types/agents.js';
+import { z } from 'zod';
+import { zodTextFormat } from 'openai/helpers/zod';
+
+const ValidatorSchema = z.object({
+  candidates: z.array(z.object({
+    title: z.string(),
+    reason: z.string(),
+    isTrash: z.boolean(),
+  })),
+});
+
+const CHUNK_SIZE = 30;
+
+function splitIntoChunks<T>(items: T[], size: number): T[][] {
+  const chunks: T[][] = [];
+  for (let i = 0; i < items.length; i += size) {
+    chunks.push(items.slice(i, i + size));
+  }
+  return chunks;
+}
+
+async function runValidatorChunk(
+  candidates: RetrievalCandidate[],
+  mediaLabel: string,
+): Promise<ValidatorOutput> {
+  const list = candidates.map((c) => `- ${c.title}: ${c.reason}`).join('\n');
+
+  const response = await parseWithRetry(() => openai.responses.parse({
+    model: defaultModel,
+    temperature: 0.1,
+    max_completion_tokens: 16384,
+    ...serviceOptions,
+    ...(supportsWebSearch ? { tools: [{ type: 'web_search' as const }] } : {}),
+    text: { format: zodTextFormat(ValidatorSchema, 'validation') },
+    instructions: `You are a ${mediaLabel} metadata validator. For each candidate in the list, use web search to verify:
+1. The title actually exists as a real, produced ${mediaLabel} (not a made-up or hallucinated title)
+2. Correct the "reason" field with accurate metadata (actual genres, tone, year) if it contains errors
+
+Set isTrash: true for entries that:
+- Do not exist as a real ${mediaLabel}
+- Are clearly hallucinated or fictional titles
+- Are so incorrect that no real match can be identified
+
+Set isTrash: false for real, verifiable ${mediaLabel}s, even if minor metadata corrections are needed.
+Return every candidate — do not drop any entries from the output.`,
+    input: `Validate these ${mediaLabel} candidates:\n${list}`,
+  }));
+
+  return (response.output_parsed as ValidatorOutput) ?? { candidates: [] };
+}
+
+export async function runValidator(
+  candidates: RetrievalCandidate[],
+  mediaType: MediaType = 'tv_show',
+): Promise<ValidatorOutput> {
+  const mediaLabel = mediaType === 'movie' ? 'movie' : 'TV show';
+  const chunks = splitIntoChunks(candidates, CHUNK_SIZE);
+
+  const chunkResults = await Promise.all(
+    chunks.map((chunk) => runValidatorChunk(chunk, mediaLabel))
+  );
+
+  return {
+    candidates: chunkResults.flatMap((r) => r.candidates),
+  };
+}

packages/backend/src/db.ts

@@ -2,7 +2,7 @@ import { drizzle } from 'drizzle-orm/postgres-js';
 import postgres from 'postgres';
 import * as dotenv from 'dotenv';
 
-dotenv.config();
+dotenv.config({ path: ['.env.local', '.env'] });
 
 const connectionString = process.env.DATABASE_URL || 'postgres://user:password@iris.haven:5432/recommender';
 export const client = postgres(connectionString);

packages/backend/src/db/schema.ts

@@ -1,4 +1,4 @@
-import { pgTable, uuid, text, jsonb, timestamp, integer, uniqueIndex } from 'drizzle-orm/pg-core';
+import { pgTable, uuid, text, jsonb, timestamp, integer, uniqueIndex, boolean } from 'drizzle-orm/pg-core';
 import type { CuratorOutput } from '../types/agents.js';
 
 export const recommendations = pgTable('recommendations', {
@@ -8,6 +8,14 @@ export const recommendations = pgTable('recommendations', {
   liked_shows: text('liked_shows').notNull().default(''),
   disliked_shows: text('disliked_shows').notNull().default(''),
   themes: text('themes').notNull().default(''),
+  brainstorm_count: integer('brainstorm_count').notNull().default(100),
+  media_type: text('media_type').notNull().default('tv_show'),
+  use_web_search: boolean('use_web_search').notNull().default(false),
+  use_validator: boolean('use_validator').notNull().default(false),
+  hard_requirements: boolean('hard_requirements').notNull().default(false),
+  self_expansive: boolean('self_expansive').notNull().default(false),
+  expansive_passes: integer('expansive_passes').notNull().default(1),
+  expansive_mode: text('expansive_mode').notNull().default('soft'),
   recommendations: jsonb('recommendations').$type<CuratorOutput[]>(),
   status: text('status').notNull().default('pending'),
   created_at: timestamp('created_at').defaultNow().notNull(),
@@ -17,10 +25,10 @@ export const feedback = pgTable(
   'feedback',
   {
     id: uuid('id').defaultRandom().primaryKey(),
-    tv_show_name: text('tv_show_name').notNull(),
+    item_name: text('item_name').notNull(),
     stars: integer('stars').notNull(),
     feedback: text('feedback').notNull().default(''),
     created_at: timestamp('created_at').defaultNow().notNull(),
   },
-  (table) => [uniqueIndex('feedback_tv_show_name_idx').on(table.tv_show_name)],
+  (table) => [uniqueIndex('feedback_item_name_idx').on(table.item_name)],
 );

packages/backend/src/index.ts

@@ -3,10 +3,10 @@ import * as dotenv from 'dotenv';
 import recommendationsRoute from './routes/recommendations.js';
 import feedbackRoute from './routes/feedback.js';
 
-// Load .env first, then .env.local
-// env vars set on the container take precedence over both files
-dotenv.config();
-dotenv.config({ path: '.env.local', override: true });
+// Load .env.local first, then .env.
+// dotenv 17+ supports array of paths, where the first path has the highest priority.
+// Env vars set on the container (system) will take precedence over both.
+dotenv.config({ path: ['.env.local', '.env'] });
 
 const fastify = Fastify({ logger: true });
 

packages/backend/src/migrate.ts

@@ -0,0 +1,43 @@
+import { drizzle } from 'drizzle-orm/postgres-js';
+import { migrate } from 'drizzle-orm/postgres-js/migrator';
+import postgres from 'postgres';
+import * as dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs/promises';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+dotenv.config({ path: ['.env.local', '.env'] });
+
+const connectionString = process.env.DATABASE_URL;
+
+if (!connectionString) {
+  console.error('DATABASE_URL is not set');
+  process.exit(1);
+}
+
+// Using max: 1 connection since it's only for migration
+const migrationClient = postgres(connectionString, { max: 1 });
+const db = drizzle(migrationClient);
+
+const runMigrations = async () => {
+  console.log('Running database migrations...');
+  try {
+    const folder = path.join(__dirname, '../drizzle');
+    // print all migrations
+    const migrations = await fs.readdir(folder);
+    console.log('Migrations:', JSON.stringify(migrations));
+
+    await migrate(db, { migrationsFolder: folder });
+    console.log('Migrations completed successfully.');
+  } catch (err) {
+    console.error('Error running migrations:', err);
+    process.exit(1);
+  } finally {
+    await migrationClient.end();
+  }
+};
+
+runMigrations();

packages/backend/src/pipelines/recommendation.ts

@@ -3,12 +3,47 @@ import { db } from '../db.js';
 import { recommendations } from '../db/schema.js';
 import { runInterpreter } from '../agents/interpreter.js';
 import { runRetrieval } from '../agents/retrieval.js';
+import { runValidator } from '../agents/validator.js';
 import { runRanking } from '../agents/ranking.js';
 import { runCurator } from '../agents/curator.js';
-import type { CuratorOutput, SSEEvent } from '../types/agents.js';
+import type { CuratorOutput, InterpreterOutput, MediaType, RankingOutput, RetrievalCandidate, SSEEvent } from '../types/agents.js';
+import { generateTitle } from '../agents/titleGenerator.js';
+
+/* -- Agent pipeline --
+[1] Interpreter -> gets user input, transforms into structured data
+[2] Retrieval -> gets candidates from OpenAI (high temperature)
+[2.5] Validator (optional) -> verifies candidates exist, removes trash
+[3] Ranking -> ranks candidates based on user input
+[4] Curator -> curates candidates based on user input
+*/
 
 type RecommendationRecord = typeof recommendations.$inferSelect;
 
+function getBucketCount(count: number): number {
+  return Math.ceil(count / 15);
+}
+
+function deduplicateCandidates(candidates: RetrievalCandidate[], seenTitles?: Set<string>): RetrievalCandidate[] {
+  const seen = seenTitles ?? new Set<string>();
+  return candidates.filter((c) => {
+    const key = c.title.toLowerCase();
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+function splitIntoBuckets<T>(items: T[], n: number): T[][] {
+  const size = Math.ceil(items.length / n);
+  return Array.from({ length: n }, (_, i) => items.slice(i * size, (i + 1) * size))
+    .filter((b) => b.length > 0);
+}
+
+function mergeCuratorOutputs(a: CuratorOutput[], b: CuratorOutput[]): CuratorOutput[] {
+  const seen = new Set(a.map((x) => x.title.toLowerCase()));
+  return [...a, ...b.filter((x) => !seen.has(x.title.toLowerCase()))];
+}
+
 function log(recId: string, msg: string, data?: unknown) {
   const ts = new Date().toISOString();
   if (data !== undefined) {
@@ -18,6 +53,124 @@ function log(recId: string, msg: string, data?: unknown) {
   }
 }
 
+interface SubPipelineCtx {
+  recId: string;
+  interpreterOutput: InterpreterOutput;
+  mediaType: MediaType;
+  useWebSearch: boolean;
+  useValidator: boolean;
+  useHardRequirements: boolean;
+  brainstormCount: number;
+  previousFullMatches: string[];
+  allSeenTitles: Set<string>;
+  stagePrefix: string;
+  sseWrite: (event: SSEEvent) => void;
+}
+
+async function runSubPipeline(ctx: SubPipelineCtx): Promise<CuratorOutput[]> {
+  const {
+    recId, interpreterOutput, mediaType, useWebSearch, useValidator,
+    useHardRequirements, brainstormCount, previousFullMatches,
+    allSeenTitles, stagePrefix, sseWrite,
+  } = ctx;
+
+  const p = (stage: string) => (stagePrefix + stage) as SSEEvent['stage'];
+
+  // --- Retrieval (bucketed) ---
+  log(recId, `${stagePrefix}Retrieval: start`);
+  sseWrite({ stage: p('retrieval'), status: 'start' });
+  const t1 = Date.now();
+  const retrievalBucketCount = getBucketCount(brainstormCount);
+  const perBucketCount = Math.ceil(brainstormCount / retrievalBucketCount);
+  const retrievalBuckets = await Promise.all(
+    Array.from({ length: retrievalBucketCount }, () =>
+      runRetrieval(interpreterOutput, perBucketCount, mediaType, useWebSearch, useHardRequirements, previousFullMatches)
+    )
+  );
+  const allCandidates = retrievalBuckets.flatMap((r) => r.candidates);
+  const dedupedCandidates = deduplicateCandidates(allCandidates, allSeenTitles);
+  log(recId, `${stagePrefix}Retrieval: done (${Date.now() - t1}ms) — ${dedupedCandidates.length} candidates (${retrievalBucketCount} buckets, ${allCandidates.length} before dedup)`, {
+    titles: dedupedCandidates.map((c) => c.title),
+  });
+  sseWrite({ stage: p('retrieval'), status: 'done', data: { candidates: dedupedCandidates } });
+
+  // --- Validator (optional) ---
+  let candidatesForRanking = dedupedCandidates;
+  if (useValidator) {
+    log(recId, `${stagePrefix}Validator: start`);
+    sseWrite({ stage: p('validator'), status: 'start' });
+    const tV = Date.now();
+    const validatorOutput = await runValidator(dedupedCandidates, mediaType);
+    const verified = validatorOutput.candidates.filter((c) => !c.isTrash);
+    const trashCount = validatorOutput.candidates.length - verified.length;
+    candidatesForRanking = verified.map(({ title, reason }) => ({ title, reason }));
+    log(recId, `${stagePrefix}Validator: done (${Date.now() - tV}ms) — removed ${trashCount} trash entries`);
+    sseWrite({ stage: p('validator'), status: 'done', data: { removed: trashCount } });
+  } else {
+    sseWrite({ stage: p('validator'), status: 'done', data: { skipped: true } });
+  }
+
+  // --- Ranking (bucketed) ---
+  log(recId, `${stagePrefix}Ranking: start`);
+  sseWrite({ stage: p('ranking'), status: 'start' });
+  const t2 = Date.now();
+  const rankBucketCount = getBucketCount(candidatesForRanking.length);
+  const candidateBuckets = splitIntoBuckets(candidatesForRanking, rankBucketCount);
+  const rankingBuckets = await Promise.all(
+    candidateBuckets.map((bucket) =>
+      runRanking(interpreterOutput, { candidates: bucket }, mediaType, useHardRequirements)
+    )
+  );
+  const dedupTitles = (titles: string[]) => [...new Map(titles.map((t) => [t.toLowerCase(), t])).values()];
+  const rankingOutput: RankingOutput = {
+    full_match: dedupTitles(rankingBuckets.flatMap((r) => r.full_match)),
+    definitely_like: dedupTitles(rankingBuckets.flatMap((r) => r.definitely_like)),
+    might_like: dedupTitles(rankingBuckets.flatMap((r) => r.might_like)),
+    questionable: dedupTitles(rankingBuckets.flatMap((r) => r.questionable)),
+    will_not_like: dedupTitles(rankingBuckets.flatMap((r) => r.will_not_like)),
+  };
+  log(recId, `${stagePrefix}Ranking: done (${Date.now() - t2}ms) — ${rankBucketCount} buckets`, {
+    full_match: rankingOutput.full_match.length,
+    definitely_like: rankingOutput.definitely_like.length,
+    might_like: rankingOutput.might_like.length,
+    questionable: rankingOutput.questionable.length,
+    will_not_like: rankingOutput.will_not_like.length,
+  });
+  sseWrite({ stage: p('ranking'), status: 'done', data: rankingOutput });
+
+  // --- Curator (bucketed) ---
+  log(recId, `${stagePrefix}Curator: start`);
+  sseWrite({ stage: p('curator'), status: 'start' });
+  const t3 = Date.now();
+  type CategorizedItem = { title: string; category: keyof RankingOutput };
+  const categorizedItems: CategorizedItem[] = [
+    ...rankingOutput.full_match.map((t) => ({ title: t, category: 'full_match' as const })),
+    ...rankingOutput.definitely_like.map((t) => ({ title: t, category: 'definitely_like' as const })),
+    ...rankingOutput.might_like.map((t) => ({ title: t, category: 'might_like' as const })),
+    ...rankingOutput.questionable.map((t) => ({ title: t, category: 'questionable' as const })),
+    ...rankingOutput.will_not_like.map((t) => ({ title: t, category: 'will_not_like' as const })),
+  ];
+  const curatorBucketCount = getBucketCount(categorizedItems.length);
+  const curatorItemBuckets = splitIntoBuckets(categorizedItems, curatorBucketCount);
+  const curatorBucketRankings: RankingOutput[] = curatorItemBuckets.map((bucket) => ({
+    full_match: bucket.filter((i) => i.category === 'full_match').map((i) => i.title),
+    definitely_like: bucket.filter((i) => i.category === 'definitely_like').map((i) => i.title),
+    might_like: bucket.filter((i) => i.category === 'might_like').map((i) => i.title),
+    questionable: bucket.filter((i) => i.category === 'questionable').map((i) => i.title),
+    will_not_like: bucket.filter((i) => i.category === 'will_not_like').map((i) => i.title),
+  }));
+  const curatorBucketOutputs = await Promise.all(
+    curatorBucketRankings.map((ranking) =>
+      runCurator(ranking, interpreterOutput, mediaType, useWebSearch)
+    )
+  );
+  const curatorOutput = curatorBucketOutputs.reduce((acc, bucket) => mergeCuratorOutputs(acc, bucket), [] as CuratorOutput[]);
+  log(recId, `${stagePrefix}Curator: done (${Date.now() - t3}ms) — ${curatorOutput.length} items curated (${curatorBucketCount} buckets)`);
+  sseWrite({ stage: p('curator'), status: 'done', data: curatorOutput });
+
+  return curatorOutput;
+}
+
 export async function runPipeline(
   rec: RecommendationRecord,
   sseWrite: (event: SSEEvent) => void,
@@ -25,8 +178,13 @@ export async function runPipeline(
 ): Promise<CuratorOutput[]> {
   let currentStage: SSEEvent['stage'] = 'interpreter';
   const startTime = Date.now();
+  const mediaType = (rec.media_type ?? 'tv_show') as MediaType;
+  const useWebSearch = rec.use_web_search ?? false;
+  const useValidator = rec.use_validator ?? false;
+  const useHardRequirements = rec.hard_requirements ?? false;
+  const selfExpansive = rec.self_expansive ?? false;
 
-  log(rec.id, `Starting pipeline for "${rec.title}"${feedbackContext ? ' (with feedback context)' : ''}`);
+  log(rec.id, `Starting pipeline for "${rec.title}" [${mediaType}${useWebSearch ? ', web_search' : ''}${useValidator ? ', validator' : ''}${useHardRequirements ? ', hard_req' : ''}${selfExpansive ? `, expansive×${rec.expansive_passes}(${rec.expansive_mode})` : ''}]${feedbackContext ? ' (with feedback context)' : ''}`);
 
   try {
     // Set status to running
@@ -46,6 +204,7 @@ export async function runPipeline(
       liked_shows: rec.liked_shows,
       disliked_shows: rec.disliked_shows,
       themes: rec.themes,
+      media_type: mediaType,
       ...(feedbackContext !== undefined ? { feedback_context: feedbackContext } : {}),
     });
     log(rec.id, `Interpreter: done (${Date.now() - t0}ms)`, {
@@ -57,51 +216,101 @@ export async function runPipeline(
     });
     sseWrite({ stage: 'interpreter', status: 'done', data: interpreterOutput });
 
-    // --- Retrieval ---
+    // --- Pass 1: Retrieval → [Validator?] → Ranking → Curator ---
     currentStage = 'retrieval';
-    log(rec.id, 'Retrieval: start');
-    sseWrite({ stage: 'retrieval', status: 'start' });
-    const t1 = Date.now();
-    const retrievalOutput = await runRetrieval(interpreterOutput);
-    log(rec.id, `Retrieval: done (${Date.now() - t1}ms) — ${retrievalOutput.candidates.length} candidates`, {
-      titles: retrievalOutput.candidates.map((c) => c.title),
+    const allSeenTitles = new Set<string>();
+    const pass1Output = await runSubPipeline({
+      recId: rec.id,
+      interpreterOutput,
+      mediaType,
+      useWebSearch,
+      useValidator,
+      useHardRequirements,
+      brainstormCount: rec.brainstorm_count,
+      previousFullMatches: [],
+      allSeenTitles,
+      stagePrefix: '',
+      sseWrite: (event) => {
+        currentStage = event.stage;
+        sseWrite(event);
+      },
     });
-    sseWrite({ stage: 'retrieval', status: 'done', data: retrievalOutput });
 
-    // --- Ranking ---
-    currentStage = 'ranking';
-    log(rec.id, 'Ranking: start');
-    sseWrite({ stage: 'ranking', status: 'start' });
-    const t2 = Date.now();
-    const rankingOutput = await runRanking(interpreterOutput, retrievalOutput);
-    log(rec.id, `Ranking: done (${Date.now() - t2}ms)`, {
-      definitely_like: rankingOutput.definitely_like.length,
-      might_like: rankingOutput.might_like.length,
-      questionable: rankingOutput.questionable.length,
-      will_not_like: rankingOutput.will_not_like.length,
+    let mergedOutput = pass1Output;
+
+    // --- Self Expansive: extra passes ---
+    if (selfExpansive && rec.expansive_passes > 0) {
+      const allFullMatches = pass1Output
+        .filter((c) => c.category === 'Full Match')
+        .map((c) => c.title);
+
+      for (let i = 0; i < rec.expansive_passes; i++) {
+        const passNum = i + 2;
+        const passCount = rec.expansive_mode === 'extreme' ? rec.brainstorm_count : 60;
+        const passPrefix = `pass${passNum}:` as const;
+
+        log(rec.id, `Self Expansive Pass ${passNum}: start (${passCount} candidates, ${allFullMatches.length} full matches as context)`);
+        currentStage = `${passPrefix}retrieval` as SSEEvent['stage'];
+
+        const passOutput = await runSubPipeline({
+          recId: rec.id,
+          interpreterOutput,
+          mediaType,
+          useWebSearch,
+          useValidator,
+          useHardRequirements,
+          brainstormCount: passCount,
+          previousFullMatches: [...allFullMatches],
+          allSeenTitles,
+          stagePrefix: passPrefix,
+          sseWrite: (event) => {
+            currentStage = event.stage;
+            sseWrite(event);
+          },
         });
-    sseWrite({ stage: 'ranking', status: 'done', data: rankingOutput });
 
-    // --- Curator ---
-    currentStage = 'curator';
-    log(rec.id, 'Curator: start');
-    sseWrite({ stage: 'curator', status: 'start' });
-    const t3 = Date.now();
-    const curatorOutput = await runCurator(rankingOutput, interpreterOutput);
-    log(rec.id, `Curator: done (${Date.now() - t3}ms) — ${curatorOutput.length} shows curated`);
-    sseWrite({ stage: 'curator', status: 'done', data: curatorOutput });
+        mergedOutput = mergeCuratorOutputs(mergedOutput, passOutput);
+
+        const newFullMatches = passOutput
+          .filter((c) => c.category === 'Full Match')
+          .map((c) => c.title);
+        allFullMatches.push(...newFullMatches);
+
+        log(rec.id, `Self Expansive Pass ${passNum}: done — ${passOutput.length} new items, ${mergedOutput.length} total`);
+      }
+    }
+
+    // Generate AI title
+    let aiTitle: string = rec.title;
+    try {
+      log(rec.id, 'Title generation: start');
+      aiTitle = await generateTitle(interpreterOutput, mediaType);
+      log(rec.id, `Title generation: done — "${aiTitle}"`);
+    } catch (err) {
+      log(rec.id, `Title generation failed, keeping initial title: ${String(err)}`);
+    }
+
+    // Sort by category order before saving
+    const CATEGORY_ORDER: Record<string, number> = {
+      'Full Match': 0,
+      'Definitely Like': 1,
+      'Might Like': 2,
+      'Questionable': 3,
+      'Will Not Like': 4,
+    };
+    mergedOutput.sort((a, b) => (CATEGORY_ORDER[a.category] ?? 99) - (CATEGORY_ORDER[b.category] ?? 99));
 
     // Save results to DB
     log(rec.id, 'Saving results to DB');
     await db
       .update(recommendations)
-      .set({ recommendations: curatorOutput, status: 'done' })
+      .set({ recommendations: mergedOutput, status: 'done', title: aiTitle })
       .where(eq(recommendations.id, rec.id));
 
-    sseWrite({ stage: 'complete', status: 'done' });
+    sseWrite({ stage: 'complete', status: 'done', data: { title: aiTitle } });
 
     log(rec.id, `Pipeline complete (total: ${Date.now() - startTime}ms)`);
-    return curatorOutput;
+    return mergedOutput;
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);
     log(rec.id, `Pipeline error at stage "${currentStage}": ${message}`);

packages/backend/src/routes/feedback.ts

@@ -1,13 +1,12 @@
 import type { FastifyInstance } from 'fastify';
-import { eq } from 'drizzle-orm';
 import { db } from '../db.js';
 import { feedback } from '../db/schema.js';
 
 export default async function feedbackRoute(fastify: FastifyInstance) {
-  // POST /feedback — upsert by tv_show_name
+  // POST /feedback — upsert by item_name
   fastify.post('/feedback', async (request, reply) => {
     const body = request.body as {
-      tv_show_name: string;
+      item_name: string;
       stars: number;
       feedback?: string;
     };
@@ -15,12 +14,12 @@ export default async function feedbackRoute(fastify: FastifyInstance) {
     await db
       .insert(feedback)
       .values({
-        tv_show_name: body.tv_show_name,
+        item_name: body.item_name,
         stars: body.stars,
         feedback: body.feedback ?? '',
       })
       .onConflictDoUpdate({
-        target: feedback.tv_show_name,
+        target: feedback.item_name,
         set: {
           stars: body.stars,
           feedback: body.feedback ?? '',

packages/backend/src/routes/recommendations.ts

@@ -3,7 +3,8 @@ import { eq, desc } from 'drizzle-orm';
 import { db } from '../db.js';
 import { recommendations, feedback } from '../db/schema.js';
 import { runPipeline } from '../pipelines/recommendation.js';
-import type { SSEEvent } from '../types/agents.js';
+import type { MediaType, SSEEvent } from '../types/agents.js';
+import { supportsWebSearch } from '../agent.js';
 
 export default async function recommendationsRoute(fastify: FastifyInstance) {
   // POST /recommendations — create record, return { id }
@@ -13,6 +14,14 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
       liked_shows?: string;
       disliked_shows?: string;
       themes?: string;
+      brainstorm_count?: number;
+      media_type?: string;
+      use_web_search?: boolean;
+      use_validator?: boolean;
+      hard_requirements?: boolean;
+      self_expansive?: boolean;
+      expansive_passes?: number;
+      expansive_mode?: string;
     };
 
     const title = (body.main_prompt ?? '')
@@ -21,6 +30,17 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
       .slice(0, 5)
       .join(' ');
 
+    const rawCount = Number(body.brainstorm_count ?? 100);
+    const brainstorm_count = Number.isFinite(rawCount) ? Math.min(200, Math.max(50, rawCount)) : 100;
+    const media_type: MediaType = body.media_type === 'movie' ? 'movie' : 'tv_show';
+    const use_web_search = body.use_web_search === true;
+    const use_validator = body.use_validator === true && supportsWebSearch;
+    const hard_requirements = body.hard_requirements === true;
+    const self_expansive = body.self_expansive === true;
+    const rawPasses = Number(body.expansive_passes ?? 2);
+    const expansive_passes = Number.isFinite(rawPasses) ? Math.min(5, Math.max(1, rawPasses)) : 2;
+    const expansive_mode = body.expansive_mode === 'extreme' ? 'extreme' : 'soft';
+
     const [rec] = await db
       .insert(recommendations)
       .values({
@@ -29,6 +49,14 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
         liked_shows: body.liked_shows ?? '',
         disliked_shows: body.disliked_shows ?? '',
         themes: body.themes ?? '',
+        brainstorm_count,
+        media_type,
+        use_web_search,
+        use_validator,
+        hard_requirements,
+        self_expansive,
+        expansive_passes,
+        expansive_mode,
         status: 'pending',
       })
       .returning({ id: recommendations.id });
@@ -43,6 +71,7 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
         id: recommendations.id,
         title: recommendations.title,
         status: recommendations.status,
+        media_type: recommendations.media_type,
         created_at: recommendations.created_at,
       })
       .from(recommendations)
@@ -63,7 +92,6 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
   });
 
   // GET /recommendations/:id/stream — SSE pipeline stream
-  // Always fetches all current feedback and injects if present (supports rerank flow)
   fastify.get('/recommendations/:id/stream', async (request, reply) => {
     const { id } = request.params as { id: string };
     const [rec] = await db
@@ -73,19 +101,7 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
 
     if (!rec) return reply.code(404).send({ error: 'Not found' });
 
-    // Load all feedback to potentially inject as context
-    const feedbackRows = await db.select().from(feedback);
-    const feedbackContext =
-      feedbackRows.length > 0
-        ? feedbackRows
-            .map(
-              (f) =>
-                `Show: "${f.tv_show_name}" — Rating: ${f.stars}/3 stars${f.feedback ? ` — Comment: ${f.feedback}` : ''}`,
-            )
-            .join('\n')
-        : undefined;
-
-    // Set SSE headers and hijack
+    // Set SSE headers and hijack before any branching
     reply.raw.setHeader('Content-Type', 'text/event-stream');
     reply.raw.setHeader('Cache-Control', 'no-cache');
     reply.raw.setHeader('Connection', 'keep-alive');
@@ -93,17 +109,93 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
     reply.raw.flushHeaders();
     reply.hijack();
 
+    // Resilient write — swallows errors so a disconnected client never crashes
+    // an in-flight pipeline that is still running server-side.
     const sseWrite = (event: SSEEvent) => {
+      try {
         reply.raw.write(`data: ${JSON.stringify(event)}\n\n`);
+      } catch {
+        // Client disconnected — pipeline continues, writes are silently dropped
+      }
     };
 
     try {
+      // Already finished — send a synthetic completion event and close immediately.
+      if (rec.status === 'done') {
+        sseWrite({ stage: 'complete', status: 'done', data: { title: rec.title } });
+        return;
+      }
+
+      // Already errored — send a synthetic error event and close immediately.
+      if (rec.status === 'error') {
+        sseWrite({ stage: 'curator', status: 'error', data: { message: 'Pipeline failed' } });
+        return;
+      }
+
+      // Already running — the pipeline is executing on a previous connection.
+      // Poll the DB until it reaches a terminal state, then report the result.
+      // This prevents starting a duplicate pipeline run on page reload.
+      if (rec.status === 'running') {
+        const POLL_INTERVAL_MS = 2000;
+        const TIMEOUT_MS = 20 * 60 * 1000; // 20 minutes hard ceiling
+        const start = Date.now();
+        while (Date.now() - start < TIMEOUT_MS) {
+          await new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
+          const [current] = await db
+            .select({ status: recommendations.status, title: recommendations.title })
+            .from(recommendations)
+            .where(eq(recommendations.id, id));
+          if (!current || current.status === 'done') {
+            sseWrite({ stage: 'complete', status: 'done', data: { title: current?.title ?? rec.title } });
+            return;
+          }
+          if (current.status === 'error') {
+            sseWrite({ stage: 'curator', status: 'error', data: { message: 'Pipeline failed' } });
+            return;
+          }
+          // Still running — keep polling
+        }
+        // Timed out waiting — report as error
+        sseWrite({ stage: 'curator', status: 'error', data: { message: 'Pipeline timed out' } });
+        return;
+      }
+
+      // status === 'pending' — start the pipeline normally.
+
+      // Load all feedback to potentially inject as context
+      const feedbackRows = await db.select().from(feedback);
+      const mediaLabel = rec.media_type === 'movie' ? 'Movie' : 'Show';
+      const feedbackContext =
+        feedbackRows.length > 0
+          ? feedbackRows
+              .map(
+                (f) =>
+                  `${mediaLabel}: "${f.item_name}" — Rating: ${f.stars}/3 stars${f.feedback ? ` — Comment: ${f.feedback}` : ''}`,
+              )
+              .join('\n')
+          : undefined;
+
       await runPipeline(rec, sseWrite, feedbackContext);
     } finally {
       reply.raw.end();
     }
   });
 
+  // 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 };

packages/backend/src/types/agents.ts

@@ -1,3 +1,5 @@
+export type MediaType = 'tv_show' | 'movie';
+
 export interface InterpreterOutput {
   liked: string[];
   disliked: string[];
@@ -5,6 +7,7 @@ export interface InterpreterOutput {
   character_preferences: string[];
   tone: string[];
   avoid: string[];
+  requirements: string[];
 }
 
 export interface RetrievalCandidate {
@@ -16,22 +19,47 @@ export interface RetrievalOutput {
   candidates: RetrievalCandidate[];
 }
 
+export interface ValidatorCandidate {
+  title: string;
+  reason: string;
+  isTrash: boolean;
+}
+
+export interface ValidatorOutput {
+  candidates: ValidatorCandidate[];
+}
+
 export interface RankingOutput {
+  full_match: string[];
   definitely_like: string[];
   might_like: string[];
   questionable: string[];
   will_not_like: string[];
 }
 
-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 PipelineStage = 'interpreter' | 'retrieval' | 'ranking' | 'curator' | 'complete';
+export type PipelineStage =
+  | 'interpreter'
+  | 'retrieval'
+  | 'validator'
+  | 'ranking'
+  | 'curator'
+  | 'complete'
+  | `pass${number}:retrieval`
+  | `pass${number}:validator`
+  | `pass${number}:ranking`
+  | `pass${number}:curator`;
+
 export type SSEStatus = 'start' | 'done' | 'error';
 
 export interface SSEEvent {

packages/frontend/package.json

@@ -9,7 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "preact": "^10.29.0"
+    "preact": "^10.29.0",
+    "preact-router": "^4.1.2"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.4",

packages/frontend/src/api/client.ts

@@ -1,10 +1,12 @@
-import type { Recommendation, RecommendationSummary, FeedbackEntry } from '../types/index.js';
+import type { MediaType, Recommendation, RecommendationSummary, FeedbackEntry } from '../types/index.js';
 
 const BASE = '/api';
 
 async function request<T>(path: string, options?: RequestInit): Promise<T> {
   const res = await fetch(`${BASE}${path}`, {
-    headers: { 'Content-Type': 'application/json' },
+    headers: {
+      ...(options?.body ? { 'Content-Type': 'application/json' } : {}),
+    },
     ...options,
   });
   if (!res.ok) {
@@ -19,6 +21,14 @@ export function createRecommendation(body: {
   liked_shows: string;
   disliked_shows: string;
   themes: string;
+  brainstorm_count?: number;
+  media_type: MediaType;
+  use_web_search?: boolean;
+  use_validator?: boolean;
+  hard_requirements?: boolean;
+  self_expansive?: boolean;
+  expansive_passes?: number;
+  expansive_mode?: 'soft' | 'extreme';
 }): Promise<{ id: string }> {
   return request('/recommendations', {
     method: 'POST',
@@ -39,7 +49,7 @@ export function rerankRecommendation(id: string): Promise<{ ok: boolean }> {
 }
 
 export function submitFeedback(body: {
-  tv_show_name: string;
+  item_name: string;
   stars: number;
   feedback?: string;
 }): Promise<{ ok: boolean }> {
@@ -52,3 +62,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' });
+}

packages/frontend/src/app.tsx

@@ -1,5 +1,15 @@
+import { Router, Route } from 'preact-router';
 import { Home } from './pages/Home.js';
+import { Recom } from './pages/Recom.js';
+import { RecommendationsProvider } from './context/RecommendationsContext.js';
 
 export function App() {
-  return <Home />;
+  return (
+    <RecommendationsProvider>
+      <Router>
+        <Route path="/" component={Home} />
+        <Route path="/recom/:id" component={Recom} />
+      </Router>
+    </RecommendationsProvider>
+  );
 }

packages/frontend/src/components/Cards.css

@@ -0,0 +1,204 @@
+/* ── Cards ─────────────────────────────────────────────── */
+
+.cards-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 32px;
+}
+
+.card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+  transition: border-color 0.15s;
+}
+
+.card:hover {
+  border-color: var(--bg-surface-3);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+.badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 100px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+}
+
+.badge-green {
+  background: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+}
+
+.badge-blue {
+  background: rgba(59, 130, 246, 0.15);
+  color: #60a5fa;
+}
+
+.badge-yellow {
+  background: rgba(234, 179, 8, 0.15);
+  color: #facc15;
+}
+
+.badge-red {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+}
+
+.badge-magenta {
+  background: rgba(217, 70, 239, 0.15);
+  color: #e879f9;
+}
+
+.badge-verified {
+  background: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+}
+
+.card-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.card-explanation {
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  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;
+  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 {
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
+}
+
+.star-rating {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.star-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
+  color: var(--text-dim);
+  padding: 0 2px;
+  transition: color 0.1s, transform 0.1s;
+}
+
+.star-btn:hover,
+.star-btn.star-active {
+  color: var(--yellow);
+}
+
+.star-btn:hover {
+  transform: scale(1.1);
+}
+
+.feedback-saved {
+  margin-left: 8px;
+  font-size: 12px;
+  color: var(--green);
+  font-weight: 500;
+}
+
+.comment-area {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.comment-input {
+  font-size: 13px;
+  resize: vertical;
+}
+
+/* ── Rerank Button ──────────────────────────────────────── */
+
+.rerank-section {
+  padding: 16px 0 32px;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.btn-rerank {
+  padding: 12px 28px;
+  background: var(--bg-surface-2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.btn-rerank:hover:not(:disabled) {
+  background: var(--bg-surface-3);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.btn-rerank:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

packages/frontend/src/components/Modal.css

@@ -0,0 +1,307 @@
+/* ── Modal ──────────────────────────────────────────────── */
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  backdrop-filter: blur(2px);
+}
+
+.modal {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  width: 650px;
+  max-width: 96vw;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 20px 0;
+}
+
+.modal-header h2 {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 22px;
+  color: var(--text-muted);
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+}
+
+.modal-close:hover {
+  color: var(--text);
+}
+
+.modal-form {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.form-input,
+.form-textarea {
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 14px;
+  padding: 10px 12px;
+  outline: none;
+  transition: border-color 0.15s;
+  font-family: inherit;
+  width: 100%;
+}
+
+.form-input[type="range"] {
+  padding: 0;
+  cursor: pointer;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  border-color: var(--accent);
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 4px;
+}
+
+/* ── Type selection step ─────────────────────────────────── */
+
+.modal-type-select {
+  padding: 16px 20px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.modal-type-hint {
+  font-size: 14px;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.modal-type-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.type-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 4rem 2rem;
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  text-align: center;
+}
+
+.type-card:hover {
+  border-color: var(--accent);
+  background: var(--bg-surface);
+}
+
+.type-card-icon {
+  font-size: 32px;
+  line-height: 1;
+}
+
+.type-card-label {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.type-card-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* ── Modal header back button ────────────────────────────── */
+
+.modal-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.modal-back {
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: var(--text-muted);
+  cursor: pointer;
+  line-height: 1;
+  padding: 0 4px 0 0;
+}
+
+.modal-back:hover {
+  color: var(--text);
+}
+
+/* ── Web search toggle ───────────────────────────────────── */
+
+.form-group-toggle {
+  padding: 12px 0 4px;
+  border-top: 1px solid var(--border);
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  gap: 16px;
+}
+
+.toggle-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.toggle-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.toggle-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.toggle-switch {
+  flex-shrink: 0;
+  width: 40px;
+  height: 22px;
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.toggle-switch.on {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.toggle-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+.toggle-switch.on .toggle-knob {
+  transform: translateX(18px);
+}
+
+/* ── Disabled toggle ─────────────────────────────────────── */
+
+.toggle-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.toggle-switch-disabled {
+  cursor: not-allowed;
+}
+
+/* ── Self Expansive options ──────────────────────────────── */
+
+.expansive-options {
+  padding: 12px 14px;
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: -8px;
+}
+
+.mode-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.mode-btn {
+  flex: 1;
+  padding: 8px 0;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  font-family: inherit;
+}
+
+.mode-btn--active {
+  background: var(--accent-dim);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.mode-btn:hover:not(.mode-btn--active) {
+  background: var(--bg-surface-3);
+  border-color: var(--text-dim);
+  color: var(--text);
+}
+
+.mode-desc {
+  display: block;
+  margin-top: 4px;
+}

packages/frontend/src/components/NewRecommendationModal.tsx

@@ -1,4 +1,6 @@
 import { useState } from 'preact/hooks';
+import type { MediaType } from '../types/index.js';
+import './Modal.css';
 
 interface NewRecommendationModalProps {
   onClose: () => void;
@@ -7,16 +9,47 @@ interface NewRecommendationModalProps {
     liked_shows: string;
     disliked_shows: string;
     themes: string;
+    brainstorm_count?: number;
+    media_type: MediaType;
+    use_web_search?: boolean;
+    use_validator?: boolean;
+    hard_requirements?: boolean;
+    self_expansive?: boolean;
+    expansive_passes?: number;
+    expansive_mode?: 'soft' | 'extreme';
   }) => Promise<void>;
 }
 
 export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationModalProps) {
+  const [step, setStep] = useState<'type' | 'form'>('type');
+  const [mediaType, setMediaType] = useState<MediaType>('tv_show');
   const [mainPrompt, setMainPrompt] = useState('');
   const [likedShows, setLikedShows] = useState('');
   const [dislikedShows, setDislikedShows] = useState('');
   const [themes, setThemes] = useState('');
+  const [brainstormCount, setBrainstormCount] = useState(100);
+  const [useWebSearch, setUseWebSearch] = useState(false);
+  const [useValidator, setUseValidator] = useState(false);
+  const [useHardRequirements, setUseHardRequirements] = useState(false);
+  const [selfExpansive, setSelfExpansive] = useState(false);
+  const [expansivePasses, setExpansivePasses] = useState(2);
+  const [expansiveMode, setExpansiveMode] = useState<'soft' | 'extreme'>('soft');
   const [loading, setLoading] = useState(false);
 
+  const mediaLabel = mediaType === 'movie' ? 'Movie' : 'TV Show';
+  const mediaPluralLabel = mediaType === 'movie' ? 'movies' : 'shows';
+
+  const handleSelectType = (type: MediaType) => {
+    setMediaType(type);
+    setStep('form');
+  };
+
+  const handleWebSearchToggle = () => {
+    const next = !useWebSearch;
+    setUseWebSearch(next);
+    if (!next) setUseValidator(false);
+  };
+
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
     if (!mainPrompt.trim()) return;
@@ -27,6 +60,14 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
         liked_shows: likedShows.trim(),
         disliked_shows: dislikedShows.trim(),
         themes: themes.trim(),
+        brainstorm_count: brainstormCount,
+        media_type: mediaType,
+        use_web_search: useWebSearch,
+        use_validator: useValidator,
+        hard_requirements: useHardRequirements,
+        self_expansive: selfExpansive,
+        expansive_passes: selfExpansive ? expansivePasses : 1,
+        expansive_mode: expansiveMode,
       });
       onClose();
     } finally {
@@ -43,10 +84,37 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
   return (
     <div class="modal-backdrop" onClick={handleBackdropClick}>
       <div class="modal">
+        {step === 'type' ? (
+          <>
             <div class="modal-header">
               <h2>New Recommendation</h2>
               <button class="modal-close" onClick={onClose} aria-label="Close">×</button>
             </div>
+            <div class="modal-type-select">
+              <p class="modal-type-hint">What would you like recommendations for?</p>
+              <div class="modal-type-cards">
+                <button class="type-card" onClick={() => handleSelectType('tv_show')}>
+                  <span class="type-card-icon">📺</span>
+                  <span class="type-card-label">TV Shows</span>
+                  <span class="type-card-desc">Series &amp; episodic content</span>
+                </button>
+                <button class="type-card" onClick={() => handleSelectType('movie')}>
+                  <span class="type-card-icon">🎬</span>
+                  <span class="type-card-label">Movies</span>
+                  <span class="type-card-desc">Feature films &amp; cinema</span>
+                </button>
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            <div class="modal-header">
+              <div class="modal-header-left">
+                <button class="modal-back" onClick={() => setStep('type')} aria-label="Back">←</button>
+                <h2>New {mediaLabel} Recommendation</h2>
+              </div>
+              <button class="modal-close" onClick={onClose} aria-label="Close">×</button>
+            </div>
 
             <form class="modal-form" onSubmit={handleSubmit}>
               <div class="form-group">
@@ -54,7 +122,7 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
                 <textarea
                   id="main-prompt"
                   class="form-textarea"
-              placeholder="Describe what you want to watch. Be as specific as you like — mood, themes, setting, what you've enjoyed before..."
+                  placeholder={`Describe what you want to watch. Be as specific as you like — mood, themes, setting, what you've enjoyed before...`}
                   value={mainPrompt}
                   onInput={(e) => setMainPrompt((e.target as HTMLTextAreaElement).value)}
                   rows={5}
@@ -62,31 +130,29 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
                 />
               </div>
 
-          <div class="form-row">
               <div class="form-group">
-              <label for="liked-shows">Shows you liked</label>
+                <label for="liked-shows">{mediaLabel}s you liked</label>
                 <input
                   id="liked-shows"
                   type="text"
                   class="form-input"
-                placeholder="e.g. Breaking Bad, The Wire"
+                  placeholder={mediaType === 'movie' ? 'e.g. Inception, The Godfather' : 'e.g. Breaking Bad, The Wire'}
                   value={likedShows}
                   onInput={(e) => setLikedShows((e.target as HTMLInputElement).value)}
                 />
               </div>
 
               <div class="form-group">
-              <label for="disliked-shows">Shows you disliked</label>
+                <label for="disliked-shows">{mediaLabel}s you disliked</label>
                 <input
                   id="disliked-shows"
                   type="text"
                   class="form-input"
-                placeholder="e.g. Game of Thrones"
+                  placeholder={mediaType === 'movie' ? 'e.g. Transformers' : 'e.g. Game of Thrones'}
                   value={dislikedShows}
                   onInput={(e) => setDislikedShows((e.target as HTMLInputElement).value)}
                 />
               </div>
-          </div>
 
               <div class="form-group">
                 <label for="themes">Themes and requirements</label>
@@ -100,6 +166,116 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
                 />
               </div>
 
+              <div class="form-group">
+                <label for="brainstorm-count">{mediaLabel}s to brainstorm ({brainstormCount})</label>
+                <input
+                  id="brainstorm-count"
+                  type="range"
+                  class="form-input"
+                  min={50}
+                  max={200}
+                  step={10}
+                  value={brainstormCount}
+                  onInput={(e) => setBrainstormCount(Number((e.target as HTMLInputElement).value))}
+                />
+              </div>
+
+              <div class="form-group-toggle">
+                <label class="toggle-label" for="web-search">
+                  <div class="toggle-text">
+                    <span class="toggle-title">Web Search</span>
+                    <span class="toggle-desc">Use real-time web search for more accurate and up-to-date {mediaPluralLabel}</span>
+                  </div>
+                  <div class={`toggle-switch${useWebSearch ? ' on' : ''}`} onClick={handleWebSearchToggle}>
+                    <div class="toggle-knob" />
+                  </div>
+                </label>
+              </div>
+
+              <div class="form-group-toggle">
+                <label class={`toggle-label${!useWebSearch ? ' toggle-disabled' : ''}`}>
+                  <div class="toggle-text">
+                    <span class="toggle-title">Validator Agent</span>
+                    <span class="toggle-desc">
+                      Verify candidates against real {mediaPluralLabel} metadata using web search
+                      {!useWebSearch && ' (requires Web Search)'}
+                    </span>
+                  </div>
+                  <div
+                    class={`toggle-switch${useValidator ? ' on' : ''}${!useWebSearch ? ' toggle-switch-disabled' : ''}`}
+                    onClick={() => useWebSearch && setUseValidator((v) => !v)}
+                  >
+                    <div class="toggle-knob" />
+                  </div>
+                </label>
+              </div>
+
+              <div class="form-group-toggle">
+                <label class="toggle-label">
+                  <div class="toggle-text">
+                    <span class="toggle-title">Hard Requirements</span>
+                    <span class="toggle-desc">Strictly enforce all specified requirements when generating and ranking</span>
+                  </div>
+                  <div class={`toggle-switch${useHardRequirements ? ' on' : ''}`} onClick={() => setUseHardRequirements((v) => !v)}>
+                    <div class="toggle-knob" />
+                  </div>
+                </label>
+              </div>
+
+              <div class="form-group-toggle">
+                <label class="toggle-label">
+                  <div class="toggle-text">
+                    <span class="toggle-title">Self Expansive Mode</span>
+                    <span class="toggle-desc">Re-run the pipeline using Full Match results to discover more great {mediaPluralLabel}</span>
+                  </div>
+                  <div class={`toggle-switch${selfExpansive ? ' on' : ''}`} onClick={() => setSelfExpansive((v) => !v)}>
+                    <div class="toggle-knob" />
+                  </div>
+                </label>
+              </div>
+
+              {selfExpansive && (
+                <div class="expansive-options">
+                  <div class="form-group">
+                    <label for="expansive-passes">Extra passes ({expansivePasses})</label>
+                    <input
+                      id="expansive-passes"
+                      type="range"
+                      class="form-input"
+                      min={1}
+                      max={5}
+                      step={1}
+                      value={expansivePasses}
+                      onInput={(e) => setExpansivePasses(Number((e.target as HTMLInputElement).value))}
+                    />
+                  </div>
+                  <div class="form-group">
+                    <label>Mode</label>
+                    <div class="mode-buttons">
+                      <button
+                        type="button"
+                        class={`mode-btn${expansiveMode === 'soft' ? ' mode-btn--active' : ''}`}
+                        onClick={() => setExpansiveMode('soft')}
+                      >
+                        Soft
+                      </button>
+                      <button
+                        type="button"
+                        class={`mode-btn${expansiveMode === 'extreme' ? ' mode-btn--active' : ''}`}
+                        onClick={() => setExpansiveMode('extreme')}
+                      >
+                        Extreme
+                      </button>
+                    </div>
+                    <span class="toggle-desc mode-desc">
+                      {expansiveMode === 'soft'
+                        ? 'Each extra pass brainstorms 60 new candidates in 2 buckets'
+                        : `Each extra pass brainstorms ${brainstormCount} new candidates (same as main pass)`}
+                    </span>
+                  </div>
+                </div>
+              )}
+
               <div class="modal-actions">
                 <button type="button" class="btn-secondary" onClick={onClose} disabled={loading}>
                   Cancel
@@ -109,6 +285,8 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
                 </button>
               </div>
             </form>
+          </>
+        )}
       </div>
     </div>
   );

packages/frontend/src/components/PipelineProgress.css

@@ -0,0 +1,113 @@
+/* ── Pipeline Progress ──────────────────────────────────── */
+
+.pipeline-progress {
+  padding: 40px 0;
+}
+
+.pipeline-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 24px;
+}
+
+.pipeline-steps {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.pipeline-step {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 14px;
+}
+
+.pipeline-step--running {
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.pipeline-step--done {
+  border-color: rgba(34, 197, 94, 0.3);
+  background: rgba(34, 197, 94, 0.05);
+}
+
+.pipeline-step--error {
+  border-color: rgba(239, 68, 68, 0.3);
+  background: rgba(239, 68, 68, 0.05);
+}
+
+.stage-icon {
+  font-size: 16px;
+  width: 20px;
+  text-align: center;
+}
+
+.stage-done {
+  color: var(--green);
+}
+
+.stage-error {
+  color: var(--red);
+}
+
+.stage-running {
+  color: var(--accent);
+}
+
+.stage-pending {
+  color: var(--text-dim);
+}
+
+.spinner {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.pipeline-step-label {
+  font-weight: 500;
+}
+
+.pipeline-retry {
+  margin-top: 20px;
+}
+
+.pipeline-step--skipped {
+  border-color: var(--border);
+  background: var(--bg-surface);
+  opacity: 0.45;
+}
+
+.stage-skipped {
+  color: var(--text-dim);
+}
+
+.pipeline-pass-group--extra {
+  margin-top: 20px;
+}
+
+.pipeline-pass-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  margin-bottom: 8px;
+}

packages/frontend/src/components/PipelineProgress.tsx

@@ -1,14 +1,20 @@
+import './PipelineProgress.css';
 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: 'curator', label: 'Curating Results' },
-];
+export interface StageEntry {
+  key: string;
+  label: string;
+}
+
+export interface StageGroup {
+  label: string;
+  stages: StageEntry[];
+}
 
 interface PipelineProgressProps {
+  stageGroups: StageGroup[];
   stages: StageMap;
+  onRetry?: () => void;
 }
 
 function StageIcon({ status }: { status: StageStatus }) {
@@ -19,23 +25,40 @@ function StageIcon({ status }: { status: StageStatus }) {
       return <span class="stage-icon stage-error">✗</span>;
     case 'running':
       return <span class="stage-icon stage-running spinner">⟳</span>;
+    case 'skipped':
+      return <span class="stage-icon stage-skipped">—</span>;
     default:
       return <span class="stage-icon stage-pending">○</span>;
   }
 }
 
-export function PipelineProgress({ stages }: PipelineProgressProps) {
+export function PipelineProgress({ stageGroups, 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>
+      {stageGroups.map((group, gi) => (
+        <div key={gi} class={`pipeline-pass-group${gi > 0 ? ' pipeline-pass-group--extra' : ''}`}>
+          {group.label && <div class="pipeline-pass-label">{group.label}</div>}
           <ul class="pipeline-steps">
-        {STAGES.map(({ key, label }) => (
-          <li key={key} class={`pipeline-step pipeline-step--${stages[key]}`}>
-            <StageIcon status={stages[key]} />
+            {group.stages.map(({ key, label }) => {
+              const status: StageStatus = stages[key] ?? 'pending';
+              return (
+                <li key={key} class={`pipeline-step pipeline-step--${status}`}>
+                  <StageIcon status={status} />
                   <span class="pipeline-step-label">{label}</span>
                 </li>
-        ))}
+              );
+            })}
           </ul>
         </div>
+      ))}
+      {hasError && onRetry && (
+        <div class="pipeline-retry">
+          <button class="btn-primary" onClick={onRetry}>Re-run Pipeline</button>
+        </div>
+      )}
+    </div>
   );
 }

packages/frontend/src/components/RecommendationCard.tsx

@@ -1,21 +1,25 @@
 import { useState } from 'preact/hooks';
+import './Cards.css';
 import type { CuratorOutput, CuratorCategory } from '../types/index.js';
 
 interface RecommendationCardProps {
   show: CuratorOutput;
+  verified?: boolean;
   existingFeedback?: { stars: number; feedback: string };
-  onFeedback: (tv_show_name: string, stars: number, feedback: string) => Promise<void>;
+  onFeedback: (item_name: string, stars: number, feedback: string) => Promise<void>;
 }
 
 const CATEGORY_COLORS: Record<CuratorCategory, string> = {
+  'Full Match': 'badge-magenta',
   'Definitely Like': 'badge-green',
   'Might Like': 'badge-blue',
   'Questionable': 'badge-yellow',
   'Will Not Like': 'badge-red',
 };
 
-export function RecommendationCard({ show, existingFeedback, onFeedback }: RecommendationCardProps) {
+export function RecommendationCard({ show, verified, existingFeedback, onFeedback }: RecommendationCardProps) {
   const [selectedStars, setSelectedStars] = useState(existingFeedback?.stars ?? 0);
+  const [hoverStar, setHoverStar] = useState(0);
   const [comment, setComment] = useState(existingFeedback?.feedback ?? '');
   const [showComment, setShowComment] = useState(false);
   const [submitted, setSubmitted] = useState(!!existingFeedback);
@@ -46,18 +50,39 @@ export function RecommendationCard({ show, existingFeedback, onFeedback }: Recom
       </div>
       <p class="card-explanation">{show.explanation}</p>
 
+      <div class="card-badges">
+        {show.genre && <span class="badge genre-badge">{show.genre}</span>}
+        {verified && <span class="badge badge-verified">Verified</span>}
+      </div>
+
+      {(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) => (
+          {[1, 2, 3].map((star) => {
+            const effective = hoverStar || selectedStars;
+            return (
               <button
                 key={star}
-              class={`star-btn${selectedStars >= star ? ' star-active' : ''}`}
+                class={`star-btn${effective >= star ? ' star-active' : ''}`}
                 onClick={() => handleStarClick(star)}
+                onMouseEnter={() => setHoverStar(star)}
+                onMouseLeave={() => setHoverStar(0)}
                 aria-label={`Rate ${star} star${star > 1 ? 's' : ''}`}
               >
-              {selectedStars >= star ? '★' : '☆'}
+                {effective >= star ? '★' : '☆'}
               </button>
-          ))}
+            );
+          })}
           {submitted && <span class="feedback-saved">Saved</span>}
         </div>
 

packages/frontend/src/components/Sidebar.css

@@ -0,0 +1,166 @@
+/* ── Sidebar ────────────────────────────────────────────── */
+
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--bg-surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  padding: 20px 16px 12px;
+  border-bottom: 1px solid var(--border);
+  text-align: center;
+}
+
+.sidebar-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.3px;
+  text-decoration: none;
+  display: inline-block;
+  transition: color 0.15s ease;
+  padding-bottom: 10px;
+}
+
+.sidebar-title:hover {
+  color: var(--accent);
+}
+
+.btn-new {
+  margin: 12px;
+  padding: 10px 14px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+  text-align: left;
+}
+
+.btn-new:hover {
+  background: var(--accent-hover);
+}
+
+.sidebar-section-label {
+  padding: 8px 16px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+
+.sidebar-list {
+  list-style: none;
+  overflow-y: auto;
+  flex: 1;
+  padding: 4px 8px 8px;
+}
+
+.sidebar-empty {
+  padding: 8px;
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 13px;
+  transition: background 0.1s, color 0.1s;
+  user-select: none;
+}
+
+.sidebar-item:hover {
+  background: var(--bg-surface-2);
+  color: var(--text);
+}
+
+.sidebar-item.selected {
+  background: var(--accent-dim);
+  color: var(--text);
+}
+
+.sidebar-icon {
+  font-size: 12px;
+  width: 16px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.status-done {
+  color: var(--green);
+}
+
+.status-error {
+  color: var(--red);
+}
+
+.status-running {
+  color: var(--accent);
+}
+
+.status-pending {
+  color: var(--text-dim);
+}
+
+.sidebar-item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.sidebar-type-badge {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.sidebar-type-tv_show {
+  background: rgba(99, 102, 241, 0.15);
+  color: #818cf8;
+}
+
+.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);
+}

packages/frontend/src/components/Sidebar.tsx

@@ -1,3 +1,4 @@
+import './Sidebar.css';
 import type { RecommendationSummary } from '../types/index.js';
 
 interface SidebarProps {
@@ -29,7 +30,7 @@ export function Sidebar({ list, selectedId, onSelect, onNewClick }: SidebarProps
   return (
     <aside class="sidebar">
       <div class="sidebar-header">
-        <span class="sidebar-title">Recommender</span>
+        <a href="/" class="sidebar-title">Recommender</a>
       </div>
 
       <button class="btn-new" onClick={onNewClick}>
@@ -52,6 +53,9 @@ export function Sidebar({ list, selectedId, onSelect, onNewClick }: SidebarProps
               {statusIcon(item.status)}
             </span>
             <span class="sidebar-item-title">{item.title}</span>
+            <span class={`sidebar-type-badge sidebar-type-${item.media_type}`}>
+              {item.media_type === 'movie' ? 'Film' : 'TV'}
+            </span>
           </li>
         ))}
       </ul>

packages/frontend/src/context/RecommendationsContext.tsx

@@ -0,0 +1,18 @@
+import { createContext } from 'preact';
+import { useContext } from 'preact/hooks';
+import { useRecommendations } from '../hooks/useRecommendations.js';
+import type { ComponentChildren } from 'preact';
+
+type Value = ReturnType<typeof useRecommendations>;
+
+const Ctx = createContext<Value | null>(null);
+
+export function RecommendationsProvider({ children }: { children: ComponentChildren }) {
+  return <Ctx.Provider value={useRecommendations()}>{children}</Ctx.Provider>;
+}
+
+export function useRecommendationsContext(): Value {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error('Must be inside RecommendationsProvider');
+  return ctx;
+}

packages/frontend/src/hooks/useRecommendations.ts

@@ -1,11 +1,12 @@
 import { useState, useEffect, useCallback } from 'preact/hooks';
-import type { RecommendationSummary, FeedbackEntry } from '../types/index.js';
+import type { MediaType, RecommendationSummary, FeedbackEntry } from '../types/index.js';
 import {
   listRecommendations,
   createRecommendation,
   rerankRecommendation,
   submitFeedback,
   getFeedback,
+  deleteRecommendation,
 } from '../api/client.js';
 
 export function useRecommendations() {
@@ -34,6 +35,14 @@ export function useRecommendations() {
       liked_shows: string;
       disliked_shows: string;
       themes: string;
+      brainstorm_count?: number;
+      media_type: MediaType;
+      use_web_search?: boolean;
+      use_validator?: boolean;
+      hard_requirements?: boolean;
+      self_expansive?: boolean;
+      expansive_passes?: number;
+      expansive_mode?: 'soft' | 'extreme';
     }) => {
       const { id } = await createRecommendation(body);
       await refreshList();
@@ -46,7 +55,6 @@ export function useRecommendations() {
   const rerank = useCallback(
     async (id: string) => {
       await rerankRecommendation(id);
-      // Update local list to show pending status
       setList((prev) =>
         prev.map((r) => (r.id === id ? { ...r, status: 'pending' as const } : r)),
       );
@@ -55,7 +63,7 @@ export function useRecommendations() {
   );
 
   const handleSubmitFeedback = useCallback(
-    async (body: { tv_show_name: string; stars: number; feedback?: string }) => {
+    async (body: { item_name: string; stars: number; feedback?: string }) => {
       await submitFeedback(body);
       await refreshFeedback();
     },
@@ -69,6 +77,15 @@ export function useRecommendations() {
     [],
   );
 
+  const updateTitle = useCallback((id: string, title: string) => {
+    setList((prev) => prev.map((r) => (r.id === id ? { ...r, title } : r)));
+  }, []);
+
+  const deleteRec = useCallback(async (id: string) => {
+    await deleteRecommendation(id);
+    setList((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+
   return {
     list,
     selectedId,
@@ -78,6 +95,8 @@ export function useRecommendations() {
     rerank,
     submitFeedback: handleSubmitFeedback,
     updateStatus,
+    updateTitle,
     refreshList,
+    deleteRec,
   };
 }

packages/frontend/src/hooks/useSSE.ts

@@ -4,10 +4,13 @@ import type { SSEEvent } from '../types/index.js';
 export function useSSE(
   url: string | null,
   onEvent: (event: SSEEvent) => void,
+  onClose?: () => void,
 ): { close: () => void } {
   const esRef = useRef<EventSource | null>(null);
   const onEventRef = useRef(onEvent);
   onEventRef.current = onEvent;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
 
   useEffect(() => {
     if (!url) return;
@@ -32,6 +35,7 @@ export function useSSE(
     es.onerror = () => {
       es.close();
       esRef.current = null;
+      onCloseRef.current?.();
     };
 
     return () => {

packages/frontend/src/index.css

@@ -1,4 +1,6 @@
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -30,7 +32,9 @@
   -webkit-font-smoothing: antialiased;
 }
 
-html, body, #app {
+html,
+body,
+#app {
   height: 100%;
   width: 100%;
   overflow: hidden;
@@ -50,112 +54,7 @@ html, body, #app {
   padding: 32px;
 }
 
-/* ── Sidebar ────────────────────────────────────────────── */
-
-.sidebar {
-  width: var(--sidebar-width);
-  background: var(--bg-surface);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.sidebar-header {
-  padding: 20px 16px 12px;
-  border-bottom: 1px solid var(--border);
-}
-
-.sidebar-title {
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--text);
-  letter-spacing: -0.3px;
-}
-
-.btn-new {
-  margin: 12px;
-  padding: 10px 14px;
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: var(--radius);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.15s;
-  text-align: left;
-}
-
-.btn-new:hover {
-  background: var(--accent-hover);
-}
-
-.sidebar-section-label {
-  padding: 8px 16px 4px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-dim);
-}
-
-.sidebar-list {
-  list-style: none;
-  overflow-y: auto;
-  flex: 1;
-  padding: 4px 8px 8px;
-}
-
-.sidebar-empty {
-  padding: 8px;
-  color: var(--text-dim);
-  font-size: 13px;
-}
-
-.sidebar-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  color: var(--text-muted);
-  font-size: 13px;
-  transition: background 0.1s, color 0.1s;
-  user-select: none;
-}
-
-.sidebar-item:hover {
-  background: var(--bg-surface-2);
-  color: var(--text);
-}
-
-.sidebar-item.selected {
-  background: var(--accent-dim);
-  color: var(--text);
-}
-
-.sidebar-icon {
-  font-size: 12px;
-  width: 16px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.status-done { color: var(--green); }
-.status-error { color: var(--red); }
-.status-running { color: var(--accent); }
-.status-pending { color: var(--text-dim); }
-
-.sidebar-item-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ── Main content areas ─────────────────────────────────── */
+/* ── Shared content areas ───────────────────────────────── */
 
 .empty-state {
   display: flex;
@@ -174,239 +73,6 @@ html, body, #app {
   color: var(--text);
 }
 
-.content-area {
-  max-width: 860px;
-  margin: 0 auto;
-}
-
-.rec-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--text);
-  margin-bottom: 24px;
-}
-
-.error-state {
-  color: var(--text-muted);
-}
-
-.error-state h2 {
-  color: var(--red);
-  margin-bottom: 8px;
-}
-
-.error-state p {
-  margin-bottom: 16px;
-}
-
-/* ── Pipeline Progress ──────────────────────────────────── */
-
-.pipeline-progress {
-  padding: 40px 0;
-}
-
-.pipeline-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: 24px;
-}
-
-.pipeline-steps {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.pipeline-step {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  font-size: 14px;
-}
-
-.pipeline-step--running {
-  border-color: var(--accent);
-  background: var(--accent-dim);
-}
-
-.pipeline-step--done {
-  border-color: rgba(34, 197, 94, 0.3);
-  background: rgba(34, 197, 94, 0.05);
-}
-
-.pipeline-step--error {
-  border-color: rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.05);
-}
-
-.stage-icon {
-  font-size: 16px;
-  width: 20px;
-  text-align: center;
-}
-
-.stage-done { color: var(--green); }
-.stage-error { color: var(--red); }
-.stage-running { color: var(--accent); }
-.stage-pending { color: var(--text-dim); }
-
-.spinner {
-  display: inline-block;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.pipeline-step-label {
-  font-weight: 500;
-}
-
-/* ── Cards ─────────────────────────────────────────────── */
-
-.cards-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 32px;
-}
-
-.card {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px;
-  transition: border-color 0.15s;
-}
-
-.card:hover {
-  border-color: var(--bg-surface-3);
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 8px;
-  flex-wrap: wrap;
-}
-
-.badge {
-  font-size: 11px;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 100px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  flex-shrink: 0;
-}
-
-.badge-green { background: rgba(34,197,94,0.15); color: #4ade80; }
-.badge-blue  { background: rgba(59,130,246,0.15); color: #60a5fa; }
-.badge-yellow{ background: rgba(234,179,8,0.15);  color: #facc15; }
-.badge-red   { background: rgba(239,68,68,0.15);  color: #f87171; }
-
-.card-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text);
-}
-
-.card-explanation {
-  font-size: 13px;
-  color: var(--text-muted);
-  line-height: 1.5;
-  margin-bottom: 12px;
-}
-
-.card-feedback {
-  border-top: 1px solid var(--border);
-  padding-top: 10px;
-}
-
-.star-rating {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.star-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 18px;
-  color: var(--text-dim);
-  padding: 0 2px;
-  transition: color 0.1s, transform 0.1s;
-}
-
-.star-btn:hover,
-.star-btn.star-active {
-  color: var(--yellow);
-}
-
-.star-btn:hover {
-  transform: scale(1.1);
-}
-
-.feedback-saved {
-  margin-left: 8px;
-  font-size: 12px;
-  color: var(--green);
-  font-weight: 500;
-}
-
-.comment-area {
-  margin-top: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.comment-input {
-  font-size: 13px;
-  resize: vertical;
-}
-
-/* ── Rerank Button ──────────────────────────────────────── */
-
-.rerank-section {
-  padding: 16px 0 32px;
-  display: flex;
-  justify-content: center;
-}
-
-.btn-rerank {
-  padding: 12px 28px;
-  background: var(--bg-surface-2);
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
-}
-
-.btn-rerank:hover:not(:disabled) {
-  background: var(--bg-surface-3);
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.btn-rerank:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
 /* ── Buttons ────────────────────────────────────────────── */
 
 .btn-primary {
@@ -450,109 +116,3 @@ html, body, #app {
 .btn-secondary:hover:not(:disabled) {
   background: var(--bg-surface-3);
 }
-
-/* ── Modal ──────────────────────────────────────────────── */
-
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
-  backdrop-filter: blur(2px);
-}
-
-.modal {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  width: 540px;
-  max-width: 96vw;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 20px 0;
-}
-
-.modal-header h2 {
-  font-size: 18px;
-  font-weight: 700;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  font-size: 22px;
-  color: var(--text-muted);
-  cursor: pointer;
-  line-height: 1;
-  padding: 0;
-}
-
-.modal-close:hover {
-  color: var(--text);
-}
-
-.modal-form {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-}
-
-.form-group label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-muted);
-}
-
-.form-row {
-  display: flex;
-  gap: 12px;
-}
-
-.form-input,
-.form-textarea {
-  background: var(--bg-surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text);
-  font-size: 14px;
-  padding: 10px 12px;
-  outline: none;
-  transition: border-color 0.15s;
-  font-family: inherit;
-  width: 100%;
-}
-
-.form-input:focus,
-.form-textarea:focus {
-  border-color: var(--accent);
-}
-
-.form-textarea {
-  resize: vertical;
-  min-height: 80px;
-}
-
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  padding-top: 4px;
-}

packages/frontend/src/pages/Home.css

@@ -0,0 +1,73 @@
+/* ── Landing page ───────────────────────────────────────── */
+
+.landing-layout {
+  display: flex;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.landing-bg {
+  position: absolute;
+  inset: -6px;
+  /* overflow slightly to hide blur edges */
+  background: url('/wallpaper.png') center / cover no-repeat;
+  filter: blur(3px) brightness(0.35);
+  z-index: 0;
+}
+
+.landing-layout .sidebar {
+  position: relative;
+  z-index: 1;
+  background: rgba(26, 29, 39, 0.85);
+  backdrop-filter: blur(8px);
+}
+
+.landing-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  padding: 40px;
+}
+
+.landing-title {
+  font-size: 5rem;
+  font-weight: 800;
+  color: #fff;
+  letter-spacing: -2px;
+  line-height: 1;
+}
+
+.landing-tagline {
+  font-size: 1.4rem;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+}
+
+.btn-gradient {
+  padding: 16px 42px;
+  font-size: 1.20rem;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  cursor: pointer;
+  background: linear-gradient(135deg, rgba(113, 88, 226, 0.8), rgba(61, 59, 243, 0.8));
+  backdrop-filter: blur(6px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
+  letter-spacing: 0.02em;
+}
+
+.btn-gradient:hover {
+  transform: translateY(-2px);
+  color: #fff;
+  background: linear-gradient(135deg, rgba(113, 88, 226, 0.95), rgba(41, 121, 255, 0.95));
+  box-shadow: 0 8px 24px rgba(113, 88, 226, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2);
+}

packages/frontend/src/pages/Home.tsx

@@ -1,186 +1,45 @@
-import { useState, useCallback, useEffect } from 'preact/hooks';
+import { useState } from 'preact/hooks';
+import './Home.css';
+import { route } from 'preact-router';
 import { Sidebar } from '../components/Sidebar.js';
 import { NewRecommendationModal } from '../components/NewRecommendationModal.js';
-import { PipelineProgress } from '../components/PipelineProgress.js';
-import { RecommendationCard } from '../components/RecommendationCard.js';
-import { useRecommendations } from '../hooks/useRecommendations.js';
-import { useSSE } from '../hooks/useSSE.js';
-import { getRecommendation } from '../api/client.js';
-import type { Recommendation, SSEEvent, StageMap, PipelineStage } from '../types/index.js';
-
-const DEFAULT_STAGES: StageMap = {
-  interpreter: 'pending',
-  retrieval: 'pending',
-  ranking: 'pending',
-  curator: 'pending',
-};
-
-const STAGE_ORDER: (keyof StageMap)[] = ['interpreter', 'retrieval', 'ranking', 'curator'];
+import { useRecommendationsContext } from '../context/RecommendationsContext.js';
 
 export function Home() {
-  const {
-    list,
-    selectedId,
-    feedback,
-    setSelectedId,
-    createNew,
-    rerank,
-    submitFeedback,
-    updateStatus,
-    refreshList,
-  } = useRecommendations();
-
+  const { list, createNew } = useRecommendationsContext();
   const [showModal, setShowModal] = useState(false);
-  const [selectedRec, setSelectedRec] = useState<Recommendation | null>(null);
-  const [stages, setStages] = useState<StageMap>(DEFAULT_STAGES);
-  const [sseUrl, setSseUrl] = useState<string | null>(null);
 
-  // Load full recommendation when selected
-  useEffect(() => {
-    if (!selectedId) {
-      setSelectedRec(null);
-      return;
-    }
-    void getRecommendation(selectedId).then((rec) => {
-      setSelectedRec(rec);
-      // If already running or pending, open SSE
-      if (rec.status === 'running' || rec.status === 'pending') {
-        setStages(DEFAULT_STAGES);
-        setSseUrl(`/api/recommendations/${selectedId}/stream`);
-      }
-    });
-  }, [selectedId]);
-
-  const handleSSEEvent = useCallback(
-    (event: SSEEvent) => {
-      if (!selectedId) return;
-
-      if (event.stage !== 'complete') {
-        const stageKey = event.stage as keyof StageMap;
-        if (STAGE_ORDER.includes(stageKey)) {
-          setStages((prev) => ({
-            ...prev,
-            [stageKey]: event.status === 'start' ? 'running' : event.status === 'done' ? 'done' : 'error',
-          }));
-        }
-      }
-
-      if (event.stage === 'complete' && event.status === 'done') {
-        setSseUrl(null);
-        updateStatus(selectedId, 'done');
-        // Reload full recommendation to get results
-        void getRecommendation(selectedId).then(setSelectedRec);
-        void refreshList();
-      }
-
-      if (event.status === 'error') {
-        setSseUrl(null);
-        updateStatus(selectedId, 'error');
-        const stageKey = event.stage as PipelineStage;
-        if (stageKey !== 'complete') {
-          setStages((prev) => ({ ...prev, [stageKey as keyof StageMap]: 'error' }));
-        }
-      }
-    },
-    [selectedId, updateStatus, refreshList],
-  );
-
-  useSSE(sseUrl, handleSSEEvent);
-
-  const handleSelect = (id: string) => {
-    setSseUrl(null);
-    setStages(DEFAULT_STAGES);
-    setSelectedId(id);
-  };
+  const handleSelect = (id: string) => route(`/recom/${id}`);
 
   const handleCreateNew = async (body: {
     main_prompt: string;
     liked_shows: string;
     disliked_shows: string;
     themes: string;
+    brainstorm_count?: number;
+    media_type: import('../types/index.js').MediaType;
+    use_web_search?: boolean;
   }) => {
     const id = await createNew(body);
-    setStages(DEFAULT_STAGES);
-    setSseUrl(`/api/recommendations/${id}/stream`);
+    route(`/recom/${id}`);
   };
 
-  const handleRerank = async () => {
-    if (!selectedId) return;
-    await rerank(selectedId);
-    setStages(DEFAULT_STAGES);
-    setSseUrl(`/api/recommendations/${selectedId}/stream`);
-    setSelectedRec((prev) => (prev ? { ...prev, status: 'pending' } : null));
-  };
-
-  const isRunning =
-    selectedRec?.status === 'running' || selectedRec?.status === 'pending' || !!sseUrl;
-
-  const feedbackMap = new Map(feedback.map((f) => [f.tv_show_name, f]));
-
   return (
-    <div class="layout">
+    <div class="landing-layout">
+      <div class="landing-bg" />
       <Sidebar
         list={list}
-        selectedId={selectedId}
+        selectedId={null}
         onSelect={handleSelect}
         onNewClick={() => setShowModal(true)}
       />
-
-      <main class="main-content">
-        {!selectedId && (
-          <div class="empty-state">
-            <h2>TV Show Recommender</h2>
-            <p>Click <strong>+ New Recommendation</strong> to get started.</p>
-          </div>
-        )}
-
-        {selectedId && isRunning && (
-          <div class="content-area">
-            <PipelineProgress stages={stages} />
-          </div>
-        )}
-
-        {selectedId && !isRunning && selectedRec?.status === 'done' && selectedRec.recommendations && (
-          <div class="content-area">
-            <h2 class="rec-title">{selectedRec.title}</h2>
-
-            <div class="cards-grid">
-              {selectedRec.recommendations.map((show) => (
-                <RecommendationCard
-                  key={show.title}
-                  show={show}
-                  existingFeedback={feedbackMap.get(show.title)}
-                  onFeedback={async (name, stars, comment) => {
-                    await submitFeedback({ tv_show_name: name, stars, feedback: comment });
-                  }}
-                />
-              ))}
-            </div>
-
-            <div class="rerank-section">
-              <button
-                class="btn-rerank"
-                onClick={handleRerank}
-                disabled={feedback.length === 0}
-                title={feedback.length === 0 ? 'Rate at least one show to enable re-ranking' : 'Re-rank based on your feedback'}
-              >
-                Re-rank with Feedback {feedback.length > 0 ? `(${feedback.length} rated)` : ''}
+      <main class="landing-main">
+        <h1 class="landing-title">Recommender</h1>
+        <p class="landing-tagline">Discover your next favorite show or movie, powered by AI.</p>
+        <button class="btn-gradient" onClick={() => setShowModal(true)}>
+          Get Started →
         </button>
-            </div>
-          </div>
-        )}
-
-        {selectedId && !isRunning && selectedRec?.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
-            </button>
-          </div>
-        )}
       </main>
-
       {showModal && (
         <NewRecommendationModal
           onClose={() => setShowModal(false)}

packages/frontend/src/pages/Recom.css

@@ -0,0 +1,149 @@
+/* ── Recom page ─────────────────────────────────────────── */
+
+.recom-content {
+  min-height: 100%;
+}
+
+.content-area {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.rec-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+  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);
+}
+
+.rec-info-delete-row {
+  padding-top: 4px;
+  align-items: center;
+}
+
+/* Shared sizing for the two action buttons in the info panel */
+.btn-danger,
+.rec-info-delete-row .btn-rerun {
+  padding: 5px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: var(--radius);
+  border: 1px solid;
+  background: none;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.btn-danger {
+  border-color: rgba(239, 68, 68, 0.4);
+  color: #f87171;
+}
+
+.btn-danger:hover {
+  background: rgba(239, 68, 68, 0.12);
+  border-color: #f87171;
+}
+
+/* Re-run button — same shape as Delete, neutral tone */
+.rec-info-delete-row .btn-rerun {
+  border-color: var(--border);
+  color: var(--text-muted);
+}
+
+.rec-info-delete-row .btn-rerun:hover {
+  background: var(--bg-surface-2);
+  border-color: var(--text-dim);
+  color: var(--text);
+}
+
+.error-state {
+  color: var(--text-muted);
+}
+
+.error-state h2 {
+  color: var(--red);
+  margin-bottom: 8px;
+}
+
+.error-state p {
+  margin-bottom: 16px;
+}

packages/frontend/src/pages/Recom.tsx

@@ -0,0 +1,355 @@
+import { useState, useCallback, useEffect } from 'preact/hooks';
+import './Recom.css';
+import { route } from 'preact-router';
+import { PipelineProgress } from '../components/PipelineProgress.js';
+import type { StageGroup } from '../components/PipelineProgress.js';
+import { RecommendationCard } from '../components/RecommendationCard.js';
+import { Sidebar } from '../components/Sidebar.js';
+import { NewRecommendationModal } from '../components/NewRecommendationModal.js';
+import { useRecommendationsContext } from '../context/RecommendationsContext.js';
+import { useSSE } from '../hooks/useSSE.js';
+import { getRecommendation } from '../api/client.js';
+import type { Recommendation, SSEEvent, StageMap, StageStatus } from '../types/index.js';
+
+interface RecomProps {
+  id: string;
+  path?: string;
+}
+
+function buildDefaultStages(rec: Recommendation | null): StageMap {
+  const map: StageMap = {
+    interpreter: 'pending',
+    retrieval: 'pending',
+    validator: 'pending',
+    ranking: 'pending',
+    curator: 'pending',
+  };
+  if (rec?.self_expansive && rec.expansive_passes > 0) {
+    for (let i = 0; i < rec.expansive_passes; i++) {
+      const p = i + 2;
+      map[`pass${p}:retrieval`] = 'pending';
+      if (rec.use_validator) map[`pass${p}:validator`] = 'pending';
+      map[`pass${p}:ranking`] = 'pending';
+      map[`pass${p}:curator`] = 'pending';
+    }
+  }
+  return map;
+}
+
+function buildStageGroups(rec: Recommendation | null): StageGroup[] {
+  const baseStages = [
+    { key: 'interpreter', label: 'Interpreting Preferences' },
+    { key: 'retrieval', label: 'Generating Candidates' },
+    { key: 'validator', label: 'Validating Candidates' },
+    { key: 'ranking', label: 'Ranking Candidates' },
+    { key: 'curator', label: 'Curating Results' },
+  ];
+  const groups: StageGroup[] = [{ label: '', stages: baseStages }];
+  if (rec?.self_expansive && rec.expansive_passes > 0) {
+    for (let i = 0; i < rec.expansive_passes; i++) {
+      const p = i + 2;
+      groups.push({
+        label: `Pass ${p}`,
+        stages: [
+          { key: `pass${p}:retrieval`, label: 'Generating Candidates' },
+          ...(rec.use_validator ? [{ key: `pass${p}:validator`, label: 'Validating Candidates' }] : []),
+          { key: `pass${p}:ranking`, label: 'Ranking Candidates' },
+          { key: `pass${p}:curator`, label: 'Curating Results' },
+        ],
+      });
+    }
+  }
+  return groups;
+}
+
+export function Recom({ id }: RecomProps) {
+  const { list, feedback, submitFeedback, rerank, updateStatus, updateTitle, refreshList, createNew, deleteRec } = useRecommendationsContext();
+
+  const [rec, setRec] = useState<Recommendation | null>(null);
+  const [stages, setStages] = useState<StageMap>(buildDefaultStages(null));
+  // sseKey drives the SSE connection. null = inactive; a number = active.
+  // Using a timestamp nonce ensures the URL is always unique on (re)connect,
+  // so useSSE's useEffect always re-runs even if the base path hasn't changed.
+  const [sseKey, setSseKey] = useState<number | null>(null);
+  const [showModal, setShowModal] = useState(false);
+  const [infoExpanded, setInfoExpanded] = useState(true);
+
+  // Derive the actual URL from the key; query param is ignored by the server
+  // but makes the string unique so React/Preact state always treats it as changed.
+  const sseUrl = sseKey !== null ? `/api/recommendations/${id}/stream?_k=${sseKey}` : null;
+
+  useEffect(() => {
+    setRec(null);
+    setStages(buildDefaultStages(null));
+    setSseKey(null);
+    getRecommendation(id)
+      .then((data) => {
+        setRec(data);
+        if (data.status === 'running' || data.status === 'pending') {
+          setStages(buildDefaultStages(data));
+          setSseKey(Date.now());
+        }
+      })
+      .catch(() => route('/'));
+  }, [id]);
+
+  const handleSSEEvent = useCallback(
+    (event: SSEEvent) => {
+      if (event.stage !== 'complete') {
+        const stageKey = event.stage as string;
+        setStages((prev) => {
+          if (!(stageKey in prev)) return prev;
+          const eventData = event.data as { skipped?: boolean } | undefined;
+          let newStatus: StageStatus;
+          if (event.status === 'start') {
+            newStatus = 'running';
+          } else if (event.status === 'done') {
+            newStatus = eventData?.skipped ? 'skipped' : 'done';
+          } else {
+            newStatus = 'error';
+          }
+          return { ...prev, [stageKey]: newStatus };
+        });
+      }
+
+      if (event.stage === 'complete' && event.status === 'done') {
+        const incoming = event.data as { title?: string } | undefined;
+        if (incoming?.title) {
+          updateTitle(id, incoming.title);
+          setRec((prev) => (prev ? { ...prev, title: incoming.title! } : prev));
+        }
+        setSseKey(null);
+        updateStatus(id, 'done');
+        void getRecommendation(id)
+          .then(setRec)
+          .catch(() => {
+            // Fetch failed after completion — poll once more via handleSSEClose logic
+            updateStatus(id, 'done');
+          });
+        void refreshList();
+      }
+
+      if (event.status === 'error') {
+        setSseKey(null);
+        updateStatus(id, 'error');
+        setRec((prev) => (prev ? { ...prev, status: 'error' as const } : null));
+        const stageKey = event.stage as string;
+        if (stageKey !== 'complete') {
+          setStages((prev) => (stageKey in prev ? { ...prev, [stageKey]: 'error' } : prev));
+        }
+      }
+    },
+    [id, updateStatus, updateTitle, refreshList],
+  );
+
+  const handleSSEClose = useCallback(() => {
+    void getRecommendation(id).then((data) => {
+      if (data.status === 'done') {
+        setSseKey(null);
+        setRec(data);
+        const allDone = Object.fromEntries(
+          Object.keys(buildDefaultStages(data)).map((k) => [k, 'done' as StageStatus])
+        );
+        setStages(allDone);
+        updateStatus(id, 'done');
+        void refreshList();
+      } else if (data.status === 'error') {
+        setSseKey(null);
+        setRec(data);
+        updateStatus(id, 'error');
+      } else {
+        // Pipeline still running — reconnect with a new unique key so that
+        // useSSE's useEffect always re-fires even if the base URL is the same.
+        setSseKey(Date.now());
+      }
+    });
+  }, [id, updateStatus, refreshList]);
+
+  useSSE(sseUrl, handleSSEEvent, handleSSEClose);
+
+  const handleRetry = async () => {
+    await rerank(id);
+    setStages(buildDefaultStages(rec));
+    setSseKey(Date.now());
+    setRec((prev) => (prev ? { ...prev, status: 'pending' as const } : null));
+  };
+
+  const handleRerank = async () => {
+    await rerank(id);
+    setStages(buildDefaultStages(rec));
+    setSseKey(Date.now());
+    setRec((prev) => (prev ? { ...prev, status: 'pending' as const } : null));
+  };
+
+  const handleCreateNew = async (body: {
+    main_prompt: string;
+    liked_shows: string;
+    disliked_shows: string;
+    themes: string;
+    brainstorm_count?: number;
+    media_type: import('../types/index.js').MediaType;
+    use_web_search?: boolean;
+    use_validator?: boolean;
+    hard_requirements?: boolean;
+    self_expansive?: boolean;
+    expansive_passes?: number;
+    expansive_mode?: 'soft' | 'extreme';
+  }) => {
+    const newId = await createNew(body);
+    route(`/recom/${newId}`);
+  };
+
+  const isRunning = rec?.status === 'running' || rec?.status === 'pending' || sseKey !== null;
+  const feedbackMap = new Map(feedback.map((f) => [f.item_name, f]));
+  const stageGroups = buildStageGroups(rec);
+
+  return (
+    <div class="layout">
+      <Sidebar
+        list={list}
+        selectedId={id}
+        onSelect={(sid) => route(`/recom/${sid}`)}
+        onNewClick={() => setShowModal(true)}
+      />
+
+      <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>
+                    )}
+                    {rec.use_validator && (
+                      <div class="rec-info-row">
+                        <span class="rec-info-label">Validator</span>
+                        <span class="rec-info-badge">enabled</span>
+                      </div>
+                    )}
+                    {rec.hard_requirements && (
+                      <div class="rec-info-row">
+                        <span class="rec-info-label">Hard Req.</span>
+                        <span class="rec-info-badge">enabled</span>
+                      </div>
+                    )}
+                    {rec.self_expansive && (
+                      <div class="rec-info-row">
+                        <span class="rec-info-label">Self Expansive</span>
+                        <span class="rec-info-badge">{rec.expansive_passes} pass{rec.expansive_passes !== 1 ? 'es' : ''} · {rec.expansive_mode}</span>
+                      </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={() => {
+                          if (confirm('Delete this recommendation?')) {
+                            void deleteRec(id).then(() => route('/'));
+                          }
+                        }}
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {isRunning && (
+            <div class="content-area">
+              <PipelineProgress stageGroups={stageGroups} stages={stages} onRetry={handleRetry} />
+            </div>
+          )}
+
+          {!isRunning && rec?.status === 'done' && rec.recommendations && (
+            <div class="content-area">
+              <div class="cards-grid">
+                {rec.recommendations.map((show) => (
+                  <RecommendationCard
+                    key={show.title}
+                    show={show}
+                    verified={rec.use_validator}
+                    existingFeedback={feedbackMap.get(show.title)}
+                    onFeedback={async (name, stars, comment) => {
+                      await submitFeedback({ item_name: name, stars, feedback: comment });
+                    }}
+                  />
+                ))}
+              </div>
+              <div class="rerank-section">
+                <button
+                  class="btn-rerank"
+                  onClick={handleRerank}
+                  disabled={feedback.length === 0}
+                  title={feedback.length === 0 ? 'Rate at least one show to enable re-ranking' : 'Re-rank based on your feedback'}
+                >
+                  Re-rank with Feedback {feedback.length > 0 ? `(${feedback.length} rated)` : ''}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {!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 the button below.</p>
+              <button class="btn-primary" onClick={handleRetry}>
+                Re-run Pipeline
+              </button>
+            </div>
+          )}
+        </div>
+      </main>
+
+      {showModal && (
+        <NewRecommendationModal
+          onClose={() => setShowModal(false)}
+          onSubmit={handleCreateNew}
+        />
+      )}
+    </div>
+  );
+}

packages/frontend/src/types/index.ts

@@ -1,9 +1,14 @@
-export type CuratorCategory = 'Definitely Like' | 'Might Like' | 'Questionable' | 'Will Not Like';
+export type MediaType = 'tv_show' | 'movie';
+
+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';
@@ -15,6 +20,13 @@ export interface Recommendation {
   liked_shows: string;
   disliked_shows: string;
   themes: string;
+  media_type: MediaType;
+  use_web_search: boolean;
+  use_validator: boolean;
+  hard_requirements: boolean;
+  self_expansive: boolean;
+  expansive_passes: number;
+  expansive_mode: 'soft' | 'extreme';
   recommendations: CuratorOutput[] | null;
   status: RecommendationStatus;
   created_at: string;
@@ -24,18 +36,30 @@ export interface RecommendationSummary {
   id: string;
   title: string;
   status: RecommendationStatus;
+  media_type: MediaType;
   created_at: string;
 }
 
 export interface FeedbackEntry {
   id: string;
-  tv_show_name: string;
+  item_name: string;
   stars: number;
   feedback: string;
   created_at: string;
 }
 
-export type PipelineStage = 'interpreter' | 'retrieval' | 'ranking' | 'curator' | 'complete';
+export type PipelineStage =
+  | 'interpreter'
+  | 'retrieval'
+  | 'validator'
+  | 'ranking'
+  | 'curator'
+  | 'complete'
+  | `pass${number}:retrieval`
+  | `pass${number}:validator`
+  | `pass${number}:ranking`
+  | `pass${number}:curator`;
+
 export type SSEStatus = 'start' | 'done' | 'error';
 
 export interface SSEEvent {
@@ -44,6 +68,6 @@ export interface SSEEvent {
   data?: unknown;
 }
 
-export type StageStatus = 'pending' | 'running' | 'done' | 'error';
+export type StageStatus = 'pending' | 'running' | 'done' | 'error' | 'skipped';
 
-export type StageMap = Record<Exclude<PipelineStage, 'complete'>, StageStatus>;
+export type StageMap = Record<string, StageStatus>;