adding continuous

deploy/recommender.yaml

@@ -38,7 +38,7 @@ spec:
             - name: PROVIDER_URL
               value: "https://openrouter.ai/api/v1"
             - name: MODEL_NAME
-              value: "openai/gpt-5.4"
+              value: "z-ai/glm-5.1"
             - name: AI_PROVIDER
               value: "GENERIC"
           resources:

packages/backend/src/agent.ts

@@ -23,13 +23,21 @@ export const miniModel = isGeneric ? (process.env.MODEL_NAME ?? 'default') : 'gp
 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> {
+function isJsonParseError(err: unknown): boolean {
+  if (err instanceof SyntaxError) return true;
+  if (!(err instanceof Error)) return false;
+
+  // Some providers wrap JSON parsing failures in plain Error objects.
+  return /not valid json|unexpected token|json/i.test(err.message);
+}
+
+export async function parseWithRetry<T>(fn: () => Promise<T>, retries = 3): Promise<T> {
   let lastErr: unknown;
   for (let attempt = 0; attempt <= retries; attempt++) {
     try {
       return await fn();
     } catch (err) {
-      if (err instanceof SyntaxError && attempt < retries) {
+      if (isJsonParseError(err) && attempt < retries) {
         lastErr = err;
         continue;
       }

packages/backend/src/agents/curator.ts

@@ -64,7 +64,6 @@ Rules:
     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") },

packages/backend/src/agents/ranking.ts

@@ -47,7 +47,6 @@ export async function runRanking(
     const response = await parseWithRetry(() => openai.responses.parse({
       model: defaultModel,
       temperature: 0.2,
-      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.

packages/backend/src/agents/retrieval.ts

@@ -25,7 +25,6 @@ export async function runRetrieval(
   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") },

packages/backend/src/agents/retrievalContinuous.ts

@@ -0,0 +1,116 @@
+import { openai, defaultModel, serviceOptions, supportsWebSearch, parseWithRetry } from '../agent.js';
+import type { InterpreterOutput, RetrievalCandidate, MediaType } from '../types/agents.js';
+import { z } from 'zod';
+import { zodTextFormat } from 'openai/helpers/zod';
+
+const RetrievalBatchSchema = z.object({
+  candidates: z.array(z.object({
+    title: z.string(),
+    type: z.enum(['movie', 'tv']),
+    year: z.string(),
+    reason: z.string()
+  }))
+});
+
+export interface RetrievalBatchOutput {
+  candidates: Array<{
+    title: string;
+    type: 'movie' | 'tv';
+    year: string;
+    reason: string;
+  }>;
+}
+
+const RetrievalCandidateSchema = z.object({
+  title: z.string(),
+  reason: z.string()
+});
+
+export interface RetrievalOutput {
+  candidates: RetrievalCandidate[];
+}
+
+function buildSystemPrompt(
+  interpreterOutput: InterpreterOutput,
+  mediaType: MediaType,
+  useWebSearch: boolean,
+  hardRequirements: boolean,
+  seenTitles: string[]
+): string {
+  const mediaLabel = mediaType === 'movie' ? 'movie' : 'TV show';
+  const mediaLabelPlural = mediaType === 'movie' ? 'movies' : 'TV shows';
+
+  let prompt = `You are a ${mediaLabel} recommendation specialist. Your task is to recommend titles that match the user's taste profile.
+
+USER TASTE PROFILE:
+- Liked ${mediaLabelPlural}: ${interpreterOutput.liked.join(', ') || '(none)'}
+- Disliked ${mediaLabelPlural}: ${interpreterOutput.disliked.join(', ') || '(none)'}
+- Themes: ${interpreterOutput.themes.join(', ') || '(none)'}
+- Tone: ${interpreterOutput.tone.join(', ') || '(none)'}
+- Requirements: ${interpreterOutput.requirements.join(', ') || '(none)'}
+- Avoid: ${interpreterOutput.avoid.join(', ') || '(none)'}
+
+RESPONSE FORMAT:
+Output exactly 10 recommendations in the following JSON format. No additional text.
+
+[
+  { "title": "Title Name", "type": "movie"|"tv", "year": "2024", "reason": "1-sentence why it matches" },
+  ...
+]
+
+REQUIREMENTS:
+- Output exactly 10 titles, no more, no less
+- Each title must include: title, type (movie/tv), year, and a concise reason
+- Prioritize variety across themes and decades
+- Do not include titles the user already mentioned as liked/disliked
+${seenTitles.length > 0 ? `- Do NOT repeat the following titles that have already been suggested: ${seenTitles.join(', ')}` : ''}
+${useWebSearch ? '\n- Use web search to find recent and accurate titles, including newer releases' : ''}
+${hardRequirements ? '\n- Strictly follow ALL requirements. Exclude any candidate that does not meet every stated requirement.' : ''}
+- If asked for "more 10" or "more recommendations", provide 10 new recommendations following the same format`;
+
+  return prompt;
+}
+
+export async function runRetrievalBatch(
+  interpreterOutput: InterpreterOutput,
+  mediaType: MediaType,
+  useWebSearch: boolean,
+  hardRequirements: boolean,
+  seenTitles: string[],
+  previousResponseId: string | null
+): Promise<{ candidates: RetrievalCandidate[]; responseId: string }> {
+  const canSearch = useWebSearch && supportsWebSearch;
+  const systemPrompt = buildSystemPrompt(interpreterOutput, mediaType, useWebSearch, hardRequirements, seenTitles);
+
+  let input: string;
+
+  if (previousResponseId === null) {
+    input = 'Please recommend 10 titles that match my taste profile. Output exactly 10 recommendations in the specified JSON format.';
+  } else {
+    input = 'Give me 10 more recommendations following the same JSON format as before.';
+  }
+
+  const response = await parseWithRetry(() => openai.responses.parse({
+    model: defaultModel,
+    ...serviceOptions,
+    ...(canSearch ? { tools: [{ type: 'web_search' as const }] } : {}),
+    ...(previousResponseId ? { previous_response_id: previousResponseId } : {}),
+    text: { format: zodTextFormat(RetrievalBatchSchema, "candidates") },
+    instructions: systemPrompt,
+    input: input,
+  }));
+
+  const parsed = response.output_parsed as RetrievalBatchOutput | undefined;
+  const responseId = response.id;
+
+  if (!parsed || !parsed.candidates) {
+    return { candidates: [], responseId };
+  }
+
+  const candidates: RetrievalCandidate[] = parsed.candidates.map((c) => ({
+    title: c.title,
+    reason: c.reason,
+  }));
+
+  return { candidates, responseId };
+}

packages/backend/src/agents/validator.ts

@@ -30,7 +30,6 @@ async function runValidatorChunk(
   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') },

packages/backend/src/pipelineStreams.ts

@@ -0,0 +1,93 @@
+import type { SSEEvent } from './types/agents.js';
+
+type Listener = (event: SSEEvent) => void;
+
+interface PipelineSession {
+  history: SSEEvent[];
+  listeners: Set<Listener>;
+  terminal: boolean;
+  cleanupTimer: NodeJS.Timeout | null;
+}
+
+const sessions = new Map<string, PipelineSession>();
+const CLEANUP_DELAY_MS = 10 * 60 * 1000;
+
+function getOrCreateSession(recId: string): PipelineSession {
+  const existing = sessions.get(recId);
+  if (existing) {
+    if (existing.cleanupTimer) {
+      clearTimeout(existing.cleanupTimer);
+      existing.cleanupTimer = null;
+    }
+    return existing;
+  }
+
+  const session: PipelineSession = {
+    history: [],
+    listeners: new Set(),
+    terminal: false,
+    cleanupTimer: null,
+  };
+  sessions.set(recId, session);
+  return session;
+}
+
+function scheduleCleanup(recId: string, session: PipelineSession): void {
+  if (session.cleanupTimer) {
+    clearTimeout(session.cleanupTimer);
+  }
+
+  session.cleanupTimer = setTimeout(() => {
+    const current = sessions.get(recId);
+    if (current === session && current.listeners.size === 0) {
+      sessions.delete(recId);
+    }
+  }, CLEANUP_DELAY_MS);
+}
+
+export function resetPipelineSession(recId: string): void {
+  const existing = sessions.get(recId);
+  if (existing?.cleanupTimer) {
+    clearTimeout(existing.cleanupTimer);
+  }
+  sessions.delete(recId);
+}
+
+export function publishPipelineEvent(recId: string, event: SSEEvent): void {
+  const session = getOrCreateSession(recId);
+  session.history.push(event);
+
+  for (const listener of session.listeners) {
+    listener(event);
+  }
+
+  if (event.stage === 'complete' || event.status === 'error') {
+    session.terminal = true;
+    if (session.listeners.size === 0) {
+      scheduleCleanup(recId, session);
+    }
+  }
+}
+
+export function getPipelineHistory(recId: string): SSEEvent[] {
+  return sessions.get(recId)?.history ?? [];
+}
+
+export function hasPipelineSession(recId: string): boolean {
+  return sessions.has(recId);
+}
+
+export function subscribeToPipelineEvents(recId: string, listener: Listener): () => void {
+  const session = getOrCreateSession(recId);
+  session.listeners.add(listener);
+
+  return () => {
+    const current = sessions.get(recId);
+    if (!current) return;
+
+    current.listeners.delete(listener);
+    if (current.terminal && current.listeners.size === 0) {
+      scheduleCleanup(recId, current);
+    }
+  };
+}

packages/backend/src/pipelines/continuous.ts

@@ -0,0 +1,300 @@
+import { eq } from 'drizzle-orm';
+import { db } from '../db.js';
+import { recommendations } from '../db/schema.js';
+import { runInterpreter } from '../agents/interpreter.js';
+import { runRetrievalBatch } from '../agents/retrievalContinuous.js';
+import { runValidator } from '../agents/validator.js';
+import { runRanking } from '../agents/ranking.js';
+import { runCurator } from '../agents/curator.js';
+import type { CuratorOutput, InterpreterOutput, MediaType, RankingOutput, RetrievalCandidate, SSEEvent } from '../types/agents.js';
+import { generateTitle } from '../agents/titleGenerator.js';
+
+function log(msg: string, data?: unknown) {
+  const ts = new Date().toISOString();
+  if (data !== undefined) {
+    console.log(`[continuous-pipeline] [${ts}] ${msg}`, data);
+  } else {
+    console.log(`[continuous-pipeline] [${ts}] ${msg}`);
+  }
+}
+
+function deduplicateCandidates(candidates: RetrievalCandidate[], seenTitles: Set<string>): RetrievalCandidate[] {
+  return candidates.filter((c) => {
+    const key = c.title.toLowerCase();
+    if (seenTitles.has(key)) return false;
+    seenTitles.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()))];
+}
+
+interface ContinuousPipelineInput {
+  likedShows: string;
+  dislikedShows?: string;
+  themes?: string;
+  requirements?: string;
+  avoid?: string;
+  totalCount: number;
+  useWebSearch: boolean;
+  validateResults: boolean;
+  mediaType: MediaType;
+}
+
+export async function runContinuousPipeline(
+  recId: string,
+  input: ContinuousPipelineInput,
+  sseWrite: (event: SSEEvent) => void,
+): Promise<CuratorOutput[]> {
+  const startTime = Date.now();
+  const {
+    likedShows,
+    dislikedShows = '',
+    themes = '',
+    requirements = '',
+    avoid = '',
+    totalCount,
+    useWebSearch,
+    validateResults,
+    mediaType,
+  } = input;
+
+  const totalBatches = Math.ceil(totalCount / 10);
+  const allSeenTitles = new Set<string>();
+  let previousResponseId: string | null = null;
+  let interpreterOutput: InterpreterOutput | null = null;
+  const accumulatedCandidates: RetrievalCandidate[] = [];
+
+  log(`Starting continuous pipeline: ${totalCount} titles (${totalBatches} batches), mediaType=${mediaType}, webSearch=${useWebSearch}, validate=${validateResults}`);
+
+  try {
+    // --- Interpreter (runs once) ---
+    log('Interpreter: start');
+    sseWrite({ stage: 'interpreter', status: 'start' });
+    const t0 = Date.now();
+
+    interpreterOutput = await runInterpreter({
+      main_prompt: themes || 'recommend shows based on user preferences',
+      liked_shows: likedShows,
+      disliked_shows: dislikedShows,
+      themes: themes,
+      media_type: mediaType,
+    });
+
+    log(`Interpreter: done (${Date.now() - t0}ms)`, {
+      liked: interpreterOutput.liked,
+      themes: interpreterOutput.themes,
+    });
+    sseWrite({ stage: 'interpreter', status: 'done', data: interpreterOutput });
+
+    // --- Retrieval (batched, chained) ---
+    log(`Retrieval: start (${totalBatches} batches)`);
+    sseWrite({ stage: 'retrieval', status: 'start' });
+
+    const hardRequirements = requirements.length > 0;
+
+    for (let batchIndex = 0; batchIndex < totalBatches; batchIndex++) {
+      log(`Retrieval batch ${batchIndex + 1}/${totalBatches}: start`);
+      sseWrite({
+        stage: 'retrieval',
+        status: 'start',
+        data: {
+          batch: batchIndex + 1,
+          totalBatches,
+          totalCandidates: accumulatedCandidates.length,
+        },
+      });
+
+      const seenTitlesArray = Array.from(allSeenTitles);
+      const result = await runRetrievalBatch(
+        interpreterOutput,
+        mediaType,
+        useWebSearch,
+        hardRequirements,
+        seenTitlesArray,
+        previousResponseId
+      );
+
+      previousResponseId = result.responseId;
+
+      // Deduplicate against previously seen titles
+      const deduped = deduplicateCandidates(result.candidates, allSeenTitles);
+      accumulatedCandidates.push(...deduped);
+
+      log(`Retrieval batch ${batchIndex + 1}/${totalBatches}: done, ${deduped.length} new candidates (total: ${accumulatedCandidates.length})`);
+    }
+
+    log(`Retrieval: complete, ${accumulatedCandidates.length} total candidates`);
+    sseWrite({
+      stage: 'retrieval',
+      status: 'done',
+      data: {
+        totalBatches,
+        totalCandidates: accumulatedCandidates.length,
+      },
+    });
+
+    // --- Validator (optional, per batch already done during retrieval) ---
+    // Note: In continuous mode, we could run validator after each batch
+    // For now, we'll run it once after all batches if validateResults is true
+    let candidatesForRanking = accumulatedCandidates;
+
+    if (validateResults && candidatesForRanking.length > 0) {
+      log(`Validator: start (${candidatesForRanking.length} candidates)`);
+      sseWrite({ stage: 'validator', status: 'start' });
+
+      const tV = Date.now();
+      const validatorOutput = await runValidator(candidatesForRanking, mediaType);
+      const verified = validatorOutput.candidates.filter((c) => !c.isTrash);
+      const trashCount = validatorOutput.candidates.length - verified.length;
+
+      candidatesForRanking = verified.map(({ title, reason }) => ({ title, reason }));
+      allSeenTitles.clear();
+      candidatesForRanking.forEach((c) => allSeenTitles.add(c.title.toLowerCase()));
+
+      log(`Validator: done (${Date.now() - tV}ms) — removed ${trashCount} trash entries`);
+      sseWrite({ stage: 'validator', status: 'done', data: { removed: trashCount, remaining: candidatesForRanking.length } });
+    } else {
+      sseWrite({ stage: 'validator', status: 'done', data: { skipped: !validateResults } });
+    }
+
+    // --- Ranking (bucketed) ---
+    log(`Ranking: start (${candidatesForRanking.length} candidates)`);
+    sseWrite({ stage: 'ranking', status: 'start' });
+    const t2 = Date.now();
+
+    const rankBucketCount = Math.ceil(candidatesForRanking.length / 15) || 1;
+    const candidateBuckets = splitIntoBuckets(candidatesForRanking, rankBucketCount);
+
+    const rankingBuckets = await Promise.all(
+      candidateBuckets.map((bucket) =>
+        runRanking(interpreterOutput!, { candidates: bucket }, mediaType, hardRequirements)
+      )
+    );
+
+    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(`Ranking: done (${Date.now() - t2}ms)`, {
+      full_match: rankingOutput.full_match.length,
+      definitely_like: rankingOutput.definitely_like.length,
+      might_like: rankingOutput.might_like.length,
+    });
+    sseWrite({ stage: 'ranking', status: 'done', data: rankingOutput });
+
+    // print all ranked titles for debuggings
+    log('Ranked titles:', {
+      full_match: rankingOutput.full_match,
+      definitely_like: rankingOutput.definitely_like,
+      might_like: rankingOutput.might_like,
+      questionable: rankingOutput.questionable,
+      will_not_like: rankingOutput.will_not_like,
+    });
+
+    // --- Curator (bucketed) ---
+    log(`Curator: start`);
+    sseWrite({ stage: '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 = Math.ceil(categorizedItems.length / 15) || 1;
+    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(`Curator: done (${Date.now() - t3}ms) — ${curatorOutput.length} items curated`);
+    sseWrite({ stage: 'curator', status: 'done', data: curatorOutput });
+
+    // Generate AI title
+    let aiTitle = 'Continuous Recommendations';
+    try {
+      log('Title generation: start');
+      aiTitle = await generateTitle(interpreterOutput, mediaType);
+      log(`Title generation: done — "${aiTitle}"`);
+    } catch (err) {
+      log(`Title generation failed: ${String(err)}`);
+    }
+
+    // Sort by category order
+    const CATEGORY_ORDER: Record<string, number> = {
+      'Full Match': 0,
+      'Definitely Like': 1,
+      'Might Like': 2,
+      'Questionable': 3,
+      'Will Not Like': 4,
+    };
+    curatorOutput.sort((a, b) => (CATEGORY_ORDER[a.category] ?? 99) - (CATEGORY_ORDER[b.category] ?? 99));
+
+    // Save to database (update existing record)
+    log('Saving results to DB');
+    await db
+      .update(recommendations)
+      .set({
+        title: aiTitle,
+        main_prompt: themes || 'Continuous recommendations',
+        liked_shows: likedShows,
+        disliked_shows: dislikedShows,
+        themes: themes,
+        brainstorm_count: totalCount,
+        media_type: mediaType,
+        use_web_search: useWebSearch,
+        use_validator: validateResults,
+        status: 'done',
+        recommendations: curatorOutput,
+      })
+      .where(eq(recommendations.id, recId));
+
+    sseWrite({ stage: 'complete', status: 'done', data: { id: recId, title: aiTitle, batchCount: totalBatches } });
+
+    log(`Pipeline complete (total: ${Date.now() - startTime}ms), saved as ${recId}`);
+    return curatorOutput;
+
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    log(`Pipeline error: ${message}`);
+
+    // Update status to error
+    await db
+      .update(recommendations)
+      .set({ status: 'error' })
+      .where(eq(recommendations.id, recId));
+
+    sseWrite({ stage: 'curator', status: 'error', data: { message } });
+    return [];
+  }
+}

packages/backend/src/routes/recommendations.ts

@@ -3,8 +3,26 @@ 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 { runContinuousPipeline } from '../pipelines/continuous.js';
 import type { MediaType, SSEEvent } from '../types/agents.js';
 import { supportsWebSearch } from '../agent.js';
+import {
+  getPipelineHistory,
+  hasPipelineSession,
+  publishPipelineEvent,
+  resetPipelineSession,
+  subscribeToPipelineEvents,
+} from '../pipelineStreams.js';
+
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+function isUuid(id: string): boolean {
+  return UUID_RE.test(id);
+}
+
+function writeSSE(raw: typeof import('node:http').ServerResponse.prototype, event: SSEEvent): void {
+  raw.write(`data: ${JSON.stringify(event)}\n\n`);
+}
 
 export default async function recommendationsRoute(fastify: FastifyInstance) {
   // POST /recommendations — create record, return { id }
@@ -64,6 +82,94 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
     return reply.code(201).send({ id: rec?.id });
   });
 
+  // POST /recommendations/continuous — create record and run continuous pipeline with SSE
+  fastify.post('/recommendations/continuous', async (request, reply) => {
+    const body = request.body as {
+      liked_shows: string;
+      disliked_shows?: string;
+      themes?: string;
+      requirements?: string;
+      avoid?: string;
+      total_count: number;
+      media_type?: string;
+      use_web_search?: boolean;
+      validate_results?: boolean;
+    };
+
+    const mediaType: MediaType = body.media_type === 'movie' ? 'movie' : 'tv_show';
+    const useWebSearch = body.use_web_search === true;
+    const validateResults = body.validate_results === true && supportsWebSearch;
+    const totalCount = Number.isFinite(body.total_count) ? Math.min(100, Math.max(10, body.total_count)) : 30;
+
+    // Create record first with pending status
+    const title = body.themes?.trim().split(/\s+/).slice(0, 5).join(' ') || 'Continuous Recommendations';
+    const [rec] = await db
+      .insert(recommendations)
+      .values({
+        title,
+        main_prompt: body.themes ?? 'Continuous recommendations',
+        liked_shows: body.liked_shows,
+        disliked_shows: body.disliked_shows ?? '',
+        themes: body.themes ?? '',
+        brainstorm_count: totalCount,
+        media_type: mediaType,
+        use_web_search: useWebSearch,
+        use_validator: validateResults,
+        status: 'pending',
+      })
+      .returning({ id: recommendations.id });
+
+    if (!rec) {
+      return reply.code(500).send({ error: 'Failed to create recommendation record' });
+    }
+
+    const recId = rec.id;
+    resetPipelineSession(recId);
+
+    // Set SSE headers and hijack
+    reply.raw.setHeader('Content-Type', 'text/event-stream');
+    reply.raw.setHeader('Cache-Control', 'no-cache');
+    reply.raw.setHeader('Connection', 'keep-alive');
+    reply.raw.setHeader('Access-Control-Allow-Origin', '*');
+    reply.raw.flushHeaders();
+    reply.hijack();
+
+    // Immediately send the record ID so frontend can navigate to it
+    reply.raw.write(`data: ${JSON.stringify({ type: 'created', id: recId })}\n\n`);
+
+    const sseWrite = (event: SSEEvent) => {
+      publishPipelineEvent(recId, event);
+      try {
+        writeSSE(reply.raw, event);
+      } catch {
+        // Client disconnected
+      }
+    };
+
+    try {
+      // Update status to running
+      await db
+        .update(recommendations)
+        .set({ status: 'running' })
+        .where(eq(recommendations.id, recId));
+
+      // Run the continuous pipeline (it will now update the existing record)
+      await runContinuousPipeline(recId, {
+        likedShows: body.liked_shows,
+        dislikedShows: body.disliked_shows ?? '',
+        themes: body.themes ?? '',
+        requirements: body.requirements ?? '',
+        avoid: body.avoid ?? '',
+        totalCount,
+        useWebSearch,
+        validateResults,
+        mediaType,
+      }, sseWrite);
+    } finally {
+      reply.raw.end();
+    }
+  });
+
   // GET /recommendations — list all
   fastify.get('/recommendations', async (_request, reply) => {
     const rows = await db
@@ -82,6 +188,7 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
   // GET /recommendations/:id — full record
   fastify.get('/recommendations/:id', async (request, reply) => {
     const { id } = request.params as { id: string };
+    if (!isUuid(id)) return reply.code(404).send({ error: 'Not found' });
     const [rec] = await db
       .select()
       .from(recommendations)
@@ -94,6 +201,7 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
   // GET /recommendations/:id/stream — SSE pipeline stream
   fastify.get('/recommendations/:id/stream', async (request, reply) => {
     const { id } = request.params as { id: string };
+    if (!isUuid(id)) return reply.code(404).send({ error: 'Not found' });
     const [rec] = await db
       .select()
       .from(recommendations)
@@ -113,7 +221,7 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
     // an in-flight pipeline that is still running server-side.
     const sseWrite = (event: SSEEvent) => {
       try {
-        reply.raw.write(`data: ${JSON.stringify(event)}\n\n`);
+        writeSSE(reply.raw, event);
       } catch {
         // Client disconnected — pipeline continues, writes are silently dropped
       }
@@ -136,6 +244,34 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
       // 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') {
+        if (hasPipelineSession(id)) {
+          const history = getPipelineHistory(id);
+          for (const event of history) {
+            sseWrite(event);
+          }
+
+          const lastEvent = history[history.length - 1];
+          if (lastEvent && (lastEvent.stage === 'complete' || lastEvent.status === 'error')) {
+            return;
+          }
+
+          await new Promise<void>((resolve) => {
+            const unsubscribe = subscribeToPipelineEvents(id, (event) => {
+              sseWrite(event);
+              if (event.stage === 'complete' || event.status === 'error') {
+                unsubscribe();
+                resolve();
+              }
+            });
+
+            request.raw.on('close', () => {
+              unsubscribe();
+              resolve();
+            });
+          });
+          return;
+        }
+
         const POLL_INTERVAL_MS = 2000;
         const TIMEOUT_MS = 20 * 60 * 1000; // 20 minutes hard ceiling
         const start = Date.now();
@@ -161,6 +297,7 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
       }
 
       // status === 'pending' — start the pipeline normally.
+      resetPipelineSession(id);
 
       // Load all feedback to potentially inject as context
       const feedbackRows = await db.select().from(feedback);
@@ -175,7 +312,10 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
               .join('\n')
           : undefined;
 
-      await runPipeline(rec, sseWrite, feedbackContext);
+      await runPipeline(rec, (event) => {
+        publishPipelineEvent(id, event);
+        sseWrite(event);
+      }, feedbackContext);
     } finally {
       reply.raw.end();
     }
@@ -184,6 +324,7 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
   // DELETE /recommendations/:id — delete a recommendation
   fastify.delete('/recommendations/:id', async (request, reply) => {
     const { id } = request.params as { id: string };
+    if (!isUuid(id)) return reply.code(404).send({ error: 'Not found' });
     const [rec] = await db
       .select({ id: recommendations.id })
       .from(recommendations)
@@ -199,6 +340,7 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
   // 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 };
+    if (!isUuid(id)) return reply.code(404).send({ error: 'Not found' });
     const [rec] = await db
       .select({ id: recommendations.id })
       .from(recommendations)
@@ -210,6 +352,7 @@ export default async function recommendationsRoute(fastify: FastifyInstance) {
       .update(recommendations)
       .set({ status: 'pending' })
       .where(eq(recommendations.id, id));
+    resetPipelineSession(id);
 
     return reply.send({ ok: true });
   });

packages/backend/src/types/agents.ts

@@ -67,3 +67,28 @@ export interface SSEEvent {
   status: SSEStatus;
   data?: unknown;
 }
+
+export interface ContinuousSession {
+  sessionId: string;
+  mediaType: MediaType;
+  interpreterOutput: InterpreterOutput;
+  accumulatedCandidates: RetrievalCandidate[];
+  previousResponseId: string | null;
+  batchCount: number;
+  totalCount: number;
+  useWebSearch: boolean;
+  validateResults: boolean;
+  allSeenTitles: Set<string>;
+}
+
+export interface ContinuousStartRequest {
+  mediaType: 'tv_show' | 'movie';
+  likedShows: string;
+  dislikedShows?: string;
+  themes?: string;
+  requirements?: string;
+  avoid?: string;
+  totalCount: number;
+  useWebSearch: boolean;
+  validateResults: boolean;
+}

packages/frontend/src/api/client.ts

@@ -66,3 +66,81 @@ export function getFeedback(): Promise<FeedbackEntry[]> {
 export function deleteRecommendation(id: string): Promise<{ ok: boolean }> {
   return request(`/recommendations/${id}`, { method: 'DELETE' });
 }
+
+export function createContinuousRecommendation(body: {
+  liked_shows: string;
+  disliked_shows?: string;
+  themes?: string;
+  requirements?: string;
+  avoid?: string;
+  total_count: number;
+  media_type: MediaType;
+  use_web_search?: boolean;
+  validate_results?: boolean;
+}): Promise<{ id: string }> {
+  return (async () => {
+    const res = await fetch(`${BASE}/recommendations/continuous`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'text/event-stream',
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(`HTTP ${res.status}: ${text}`);
+    }
+
+    if (!res.body) {
+      throw new Error('Missing response stream for continuous recommendation');
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    try {
+      while (true) {
+        const { value, done } = await reader.read();
+
+        if (value) {
+          buffer += decoder.decode(value, { stream: !done });
+        }
+
+        let boundary = buffer.indexOf('\n\n');
+        while (boundary !== -1) {
+          const rawEvent = buffer.slice(0, boundary).trim();
+          buffer = buffer.slice(boundary + 2);
+
+          if (rawEvent) {
+            const dataLine = rawEvent
+              .split('\n')
+              .find((line) => line.startsWith('data:'));
+
+            if (dataLine) {
+              const payload = dataLine.slice(5).trim();
+              const event = JSON.parse(payload) as { type?: string; id?: string };
+
+              if (event.type === 'created' && event.id) {
+                await reader.cancel();
+                return { id: event.id };
+              }
+            }
+          }
+
+          boundary = buffer.indexOf('\n\n');
+        }
+
+        if (done) {
+          break;
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+
+    throw new Error('Continuous recommendation stream ended before returning an id');
+  })();
+}

packages/frontend/src/components/Modal.css

@@ -1,307 +1,577 @@
-/* ── Modal ──────────────────────────────────────────────── */
-
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.6);
+  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 100;
+  padding: 24px;
-  backdrop-filter: blur(2px);
+  background:
+    radial-gradient(circle at top, rgba(56, 189, 248, 0.12), transparent 32%),
+    radial-gradient(circle at bottom right, rgba(251, 191, 36, 0.12), transparent 28%),
+    rgba(6, 8, 12, 0.76);
+  backdrop-filter: blur(12px);
 }
 
 .modal {
-  background: var(--bg-surface);
+  width: min(900px, 100%);
-  border: 1px solid var(--border);
+  max-height: min(92vh, 980px);
-  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);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 28px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
+    linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(17, 24, 39, 0.96));
+  box-shadow:
+    0 32px 90px rgba(0, 0, 0, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
+.modal-hero,
 .modal-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  padding: 20px 20px 0;
+  gap: 24px;
+  padding: 28px 30px 0;
 }
 
+.modal-hero h2,
 .modal-header h2 {
-  font-size: 18px;
+  font-size: clamp(1.8rem, 3vw, 2.35rem);
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  color: #f8fafc;
+}
+
+.modal-hero-copy {
+  max-width: 560px;
+  margin-top: 12px;
+  color: rgba(226, 232, 240, 0.72);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.modal-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(56, 189, 248, 0.14);
+  color: #7dd3fc;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.modal-close,
+.modal-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+}
+
+.modal-close:hover:not(:disabled),
+.modal-back:hover:not(:disabled) {
+  transform: translateY(-1px);
+  color: #f8fafc;
+  border-color: rgba(125, 211, 252, 0.34);
+  background: rgba(56, 189, 248, 0.08);
+}
+
+.modal-close:disabled,
+.modal-back:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.modal-header-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.modal-type-select,
+.modal-form {
+  padding: 28px 30px 30px;
+}
+
+.modal-type-select {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.modal-section {
+  padding: 22px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 24px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 100%),
+    rgba(15, 23, 42, 0.58);
+}
+
+.modal-section-header {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  margin-bottom: 18px;
+}
+
+.modal-section-header h3,
+.settings-card-header h3 {
+  font-size: 1.08rem;
+  color: #f8fafc;
+}
+
+.modal-section-header p,
+.settings-card-header p {
+  margin-top: 4px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.modal-section-step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(251, 191, 36, 0.16));
+  color: #f8fafc;
   font-weight: 700;
 }
 
-.modal-close {
+.modal-type-cards,
-  background: none;
+.mode-cards,
-  border: none;
+.modal-form-grid {
-  font-size: 22px;
+  display: grid;
-  color: var(--text-muted);
+  gap: 16px;
-  cursor: pointer;
-  line-height: 1;
-  padding: 0;
 }
 
-.modal-close:hover {
+.modal-type-cards,
-  color: var(--text);
+.mode-cards {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.type-card,
+.mode-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 20px 20px 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 22px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
+    rgba(30, 41, 59, 0.68);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.type-card:hover,
+.mode-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(125, 211, 252, 0.4);
+  box-shadow: 0 18px 32px rgba(2, 8, 23, 0.25);
+}
+
+.type-card--selected,
+.mode-card--active {
+  border-color: rgba(125, 211, 252, 0.55);
+  background:
+    linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(251, 191, 36, 0.06)),
+    rgba(17, 24, 39, 0.92);
+  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.14);
+}
+
+.type-card-icon {
+  display: inline-block;
+  font-size: 1.55rem;
+  line-height: 1;
+  margin: 0 2px 0 0;
+  transform: translateY(1px);
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
+}
+
+.type-card-label,
+.mode-card-label {
+  color: #f8fafc;
+  font-size: 1.04rem;
+  font-weight: 700;
+}
+
+.type-card-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.type-card-desc,
+.mode-card-desc {
+  color: rgba(226, 232, 240, 0.72);
+  line-height: 1.55;
+  font-size: 0.92rem;
+}
+
+.mode-card-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(251, 191, 36, 0.14);
+  color: #fcd34d;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.modal-type-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.modal-selection-summary,
+.modal-summary-strip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.summary-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: #e2e8f0;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.summary-pill--accent {
+  background: rgba(56, 189, 248, 0.12);
+  border-color: rgba(125, 211, 252, 0.22);
+  color: #7dd3fc;
+}
+
+.summary-caption {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.modal-continue {
+  padding-inline: 22px;
 }
 
 .modal-form {
-  padding: 20px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 22px;
+}
+
+.modal-form-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
-  flex: 1;
+}
+
+.form-group--full {
+  grid-column: 1 / -1;
 }
 
 .form-group label {
-  font-size: 13px;
+  color: #e2e8f0;
-  font-weight: 500;
+  font-size: 0.92rem;
-  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.form-help {
+  color: var(--text-dim);
+  font-size: 0.8rem;
+  line-height: 1.5;
 }
 
 .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%;
+  padding: 13px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 16px;
+  background: rgba(15, 23, 42, 0.66);
+  color: #f8fafc;
+  font: inherit;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 }
 
-.form-input[type="range"] {
+.form-input::placeholder,
-  padding: 0;
+.form-textarea::placeholder {
-  cursor: pointer;
+  color: #64748b;
 }
 
 .form-input:focus,
 .form-textarea:focus {
-  border-color: var(--accent);
+  border-color: rgba(125, 211, 252, 0.52);
+  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
+  background: rgba(15, 23, 42, 0.86);
+}
+
+.form-input[type='range'] {
+  padding: 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  cursor: pointer;
 }
 
 .form-textarea {
   resize: vertical;
-  min-height: 80px;
+  min-height: 120px;
 }
 
-.modal-actions {
+.form-textarea--hero {
-  display: flex;
+  min-height: 138px;
-  justify-content: flex-end;
-  gap: 10px;
-  padding-top: 4px;
 }
 
-/* ── Type selection step ─────────────────────────────────── */
+.settings-card {
-
-.modal-type-select {
-  padding: 16px 20px 28px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 16px;
+  padding: 22px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at top right, rgba(56, 189, 248, 0.07), transparent 28%),
+    rgba(15, 23, 42, 0.58);
 }
 
-.modal-type-hint {
+.slider-card {
-  font-size: 14px;
+  padding: 16px 18px;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(15, 23, 42, 0.72);
+}
+
+.slider-card--compact {
+  padding: 14px 16px;
+}
+
+.slider-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 12px;
+}
+
+.slider-label {
+  display: block;
+  color: #f8fafc;
+  font-weight: 600;
+}
+
+.slider-copy {
+  display: block;
+  margin-top: 4px;
   color: var(--text-muted);
-  margin: 0;
+  font-size: 0.82rem;
+  line-height: 1.5;
 }
 
-.modal-type-cards {
+.slider-value {
-  display: grid;
+  min-width: 48px;
-  grid-template-columns: 1fr 1fr;
+  padding: 8px 10px;
-  gap: 14px;
+  border-radius: 12px;
-}
+  background: rgba(56, 189, 248, 0.12);
-
+  color: #7dd3fc;
-.type-card {
+  font-weight: 700;
-  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 {
+.toggle-stack {
-  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;
+  flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
 
-.modal-back {
+.toggle-card {
-  background: none;
+  padding: 15px 16px;
-  border: none;
+  border-radius: 18px;
-  font-size: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
-  color: var(--text-muted);
+  background: rgba(15, 23, 42, 0.6);
-  cursor: pointer;
-  line-height: 1;
-  padding: 0 4px 0 0;
 }
 
-.modal-back:hover {
+.toggle-card--disabled {
-  color: var(--text);
+  opacity: 0.55;
-}
-
-/* ── 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;
+  gap: 4px;
 }
 
 .toggle-title {
-  font-size: 14px;
+  color: #f8fafc;
-  font-weight: 500;
+  font-weight: 600;
-  color: var(--text);
 }
 
 .toggle-desc {
-  font-size: 12px;
   color: var(--text-muted);
+  font-size: 0.84rem;
+  line-height: 1.5;
 }
 
 .toggle-switch {
-  flex-shrink: 0;
-  width: 40px;
-  height: 22px;
-  background: var(--bg-surface-2);
-  border: 1px solid var(--border);
-  border-radius: 11px;
   position: relative;
+  flex-shrink: 0;
+  width: 52px;
+  height: 30px;
+  border: 1px solid rgba(255, 255, 255, 0.11);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
   cursor: pointer;
-  transition: background 0.2s, border-color 0.2s;
+  transition: background 0.2s ease, border-color 0.2s ease;
 }
 
 .toggle-switch.on {
-  background: var(--accent);
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.95), rgba(14, 165, 233, 0.85));
-  border-color: var(--accent);
+  border-color: rgba(125, 211, 252, 0.4);
-}
-
-.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 ──────────────────────────────── */
+.toggle-knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.2s ease;
+}
+
+.toggle-switch.on .toggle-knob {
+  transform: translateX(22px);
+}
 
 .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;
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid rgba(125, 211, 252, 0.14);
+  background: rgba(8, 47, 73, 0.15);
 }
 
-.mode-buttons {
+.segmented-control {
-  display: flex;
+  display: grid;
-  gap: 8px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
 }
 
-.mode-btn {
+.segmented-control-btn {
-  flex: 1;
+  padding: 12px 14px;
-  padding: 8px 0;
+  border-radius: 14px;
-  background: var(--bg-surface);
+  border: 1px solid rgba(255, 255, 255, 0.08);
-  border: 1px solid var(--border);
+  background: rgba(15, 23, 42, 0.66);
-  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: inherit;
-  font-family: inherit;
+  font-weight: 600;
+  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
 }
 
-.mode-btn--active {
+.segmented-control-btn--active {
-  background: var(--accent-dim);
+  background: rgba(56, 189, 248, 0.12);
-  border-color: var(--accent);
+  border-color: rgba(125, 211, 252, 0.34);
-  color: var(--accent);
+  color: #7dd3fc;
 }
 
-.mode-btn:hover:not(.mode-btn--active) {
+.modal-actions {
-  background: var(--bg-surface-3);
+  display: flex;
-  border-color: var(--text-dim);
+  justify-content: flex-end;
-  color: var(--text);
+  gap: 12px;
+  padding-top: 2px;
 }
 
-.mode-desc {
+@media (max-width: 860px) {
-  display: block;
+  .modal {
-  margin-top: 4px;
+    width: 100%;
-}
+    border-radius: 24px;
+  }
+
+  .modal-hero,
+  .modal-header,
+  .modal-type-select,
+  .modal-form {
+    padding-inline: 22px;
+  }
+}
+
+@media (max-width: 720px) {
+  .modal-backdrop {
+    padding: 12px;
+  }
+
+  .modal-hero,
+  .modal-header {
+    flex-direction: column;
+  }
+
+  .modal-close {
+    align-self: flex-end;
+  }
+
+  .modal-type-cards,
+  .mode-cards,
+  .modal-form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .modal-type-footer,
+  .modal-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .toggle-label,
+  .slider-card-header {
+    align-items: flex-start;
+  }
+}

packages/frontend/src/components/NewRecommendationModal.tsx

@@ -1,7 +1,9 @@
-import { useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
 import type { MediaType } from '../types/index.js';
 import './Modal.css';
 
+type GenerationMode = 'brainstorm' | 'continuous';
+
 interface NewRecommendationModalProps {
   onClose: () => void;
   onSubmit: (body: {
@@ -9,6 +11,8 @@ interface NewRecommendationModalProps {
     liked_shows: string;
     disliked_shows: string;
     themes: string;
+    requirements?: string;
+    avoid?: string;
     brainstorm_count?: number;
     media_type: MediaType;
     use_web_search?: boolean;
@@ -17,58 +21,140 @@ interface NewRecommendationModalProps {
     self_expansive?: boolean;
     expansive_passes?: number;
     expansive_mode?: 'soft' | 'extreme';
+    generation_mode?: GenerationMode;
+    total_count?: number;
+    validate_results?: boolean;
   }) => Promise<void>;
 }
 
+const MEDIA_OPTIONS: Array<{
+  type: MediaType;
+  icon: string;
+  label: string;
+  description: string;
+}> = [
+  {
+    type: 'tv_show',
+    icon: '📺',
+    label: 'TV Shows',
+    description: 'Serialized stories, limited series, and long-form comfort watches.',
+  },
+  {
+    type: 'movie',
+    icon: '🎬',
+    label: 'Movies',
+    description: 'Feature films, prestige cinema, and one-night picks.',
+  },
+];
+
+const MODE_OPTIONS: Array<{
+  mode: GenerationMode;
+  label: string;
+  badge: string;
+  description: string;
+}> = [
+  {
+    mode: 'brainstorm',
+    label: 'Brainstorm',
+    badge: 'Best for variety',
+    description: 'Explore a broad pool of options, then rank and curate the strongest fits.',
+  },
+  {
+    mode: 'continuous',
+    label: 'Continuous',
+    badge: 'Best for deep search',
+    description: 'Generate recommendations in chained batches for a steadier, longer-running hunt.',
+  },
+];
+
 export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationModalProps) {
-  const [step, setStep] = useState<'type' | 'form'>('type');
+  const [step, setStep] = useState<'type' | 'mode' | 'form'>('type');
   const [mediaType, setMediaType] = useState<MediaType>('tv_show');
+  const [generationMode, setGenerationMode] = useState<GenerationMode>('brainstorm');
   const [mainPrompt, setMainPrompt] = useState('');
   const [likedShows, setLikedShows] = useState('');
   const [dislikedShows, setDislikedShows] = useState('');
   const [themes, setThemes] = useState('');
+  const [requirements, setRequirements] = useState('');
+  const [avoid, setAvoid] = useState('');
   const [brainstormCount, setBrainstormCount] = useState(100);
+  const [totalCount, setTotalCount] = useState(30);
   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 [validateResults, setValidateResults] = useState(false);
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !loading) {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [loading, onClose]);
+
   const mediaLabel = mediaType === 'movie' ? 'Movie' : 'TV Show';
   const mediaPluralLabel = mediaType === 'movie' ? 'movies' : 'shows';
 
   const handleSelectType = (type: MediaType) => {
     setMediaType(type);
-    setStep('form');
+    setStep('mode');
   };
 
   const handleWebSearchToggle = () => {
     const next = !useWebSearch;
     setUseWebSearch(next);
-    if (!next) setUseValidator(false);
+    if (!next) {
+      setUseValidator(false);
+      setValidateResults(false);
+    }
   };
 
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
-    if (!mainPrompt.trim()) return;
+    if (generationMode === 'brainstorm' && !mainPrompt.trim()) return;
+    if (!likedShows.trim()) return;
+
     setLoading(true);
     try {
-      await onSubmit({
+      if (generationMode === 'brainstorm') {
-        main_prompt: mainPrompt.trim(),
+        await onSubmit({
-        liked_shows: likedShows.trim(),
+          main_prompt: mainPrompt.trim(),
-        disliked_shows: dislikedShows.trim(),
+          liked_shows: likedShows.trim(),
-        themes: themes.trim(),
+          disliked_shows: dislikedShows.trim(),
-        brainstorm_count: brainstormCount,
+          themes: themes.trim(),
-        media_type: mediaType,
+          brainstorm_count: brainstormCount,
-        use_web_search: useWebSearch,
+          media_type: mediaType,
-        use_validator: useValidator,
+          use_web_search: useWebSearch,
-        hard_requirements: useHardRequirements,
+          use_validator: useValidator,
-        self_expansive: selfExpansive,
+          hard_requirements: useHardRequirements,
-        expansive_passes: selfExpansive ? expansivePasses : 1,
+          self_expansive: selfExpansive,
-        expansive_mode: expansiveMode,
+          expansive_passes: selfExpansive ? expansivePasses : 1,
-      });
+          expansive_mode: expansiveMode,
+          generation_mode: 'brainstorm',
+        });
+      } else {
+        await onSubmit({
+          main_prompt: '',
+          liked_shows: likedShows.trim(),
+          disliked_shows: dislikedShows.trim(),
+          themes: themes.trim(),
+          requirements: requirements.trim(),
+          avoid: avoid.trim(),
+          media_type: mediaType,
+          use_web_search: useWebSearch,
+          validate_results: validateResults,
+          generation_mode: 'continuous',
+          total_count: totalCount,
+        });
+      }
+
       onClose();
     } finally {
       setLoading(false);
@@ -76,33 +162,105 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
   };
 
   const handleBackdropClick = (e: MouseEvent) => {
-    if ((e.target as HTMLElement).classList.contains('modal-backdrop')) {
+    if ((e.target as HTMLElement).classList.contains('modal-backdrop') && !loading) {
       onClose();
     }
   };
 
+  const selectedMode = MODE_OPTIONS.find((option) => option.mode === generationMode);
+
   return (
     <div class="modal-backdrop" onClick={handleBackdropClick}>
-      <div class="modal">
+      <div class="modal" role="dialog" aria-modal="true" aria-labelledby="recommendation-modal-title">
         {step === 'type' ? (
           <>
-            <div class="modal-header">
+            <div class="modal-hero">
-              <h2>New Recommendation</h2>
+              <div>
-              <button class="modal-close" onClick={onClose} aria-label="Close">×</button>
+                <div class="modal-eyebrow">Create Recommendation</div>
+                <h2 id="recommendation-modal-title">Shape the kind of discovery session you want.</h2>
+                <p class="modal-hero-copy">
+                  Pick a format, choose how deep the search should go, and we&apos;ll take it from there.
+                </p>
+              </div>
+              <button class="modal-close" onClick={onClose} aria-label="Close" disabled={loading}>×</button>
             </div>
+
             <div class="modal-type-select">
-              <p class="modal-type-hint">What would you like recommendations for?</p>
+              <section class="modal-section">
-              <div class="modal-type-cards">
+                <div class="modal-section-header">
-                <button class="type-card" onClick={() => handleSelectType('tv_show')}>
+                  <span class="modal-section-step">1</span>
-                  <span class="type-card-icon">📺</span>
+                  <div>
-                  <span class="type-card-label">TV Shows</span>
+                    <h3>Choose your format</h3>
-                  <span class="type-card-desc">Series &amp; episodic content</span>
+                    <p>Start with the kind of thing you want to watch next.</p>
-                </button>
+                  </div>
-                <button class="type-card" onClick={() => handleSelectType('movie')}>
+                </div>
-                  <span class="type-card-icon">🎬</span>
+                <div class="modal-type-cards">
-                  <span class="type-card-label">Movies</span>
+                  {MEDIA_OPTIONS.map((option) => (
-                  <span class="type-card-desc">Feature films &amp; cinema</span>
+                    <button
+                      key={option.type}
+                      type="button"
+                      class={`type-card${mediaType === option.type ? ' type-card--selected' : ''}`}
+                      onClick={() => handleSelectType(option.type)}
+                    >
+                      <span class="type-card-title-row">
+                        <span class="type-card-icon">{option.icon}</span>
+                        <span class="type-card-label">{option.label}</span>
+                      </span>
+                      <span class="type-card-desc">{option.description}</span>
+                    </button>
+                  ))}
+                </div>
+              </section>
+            </div>
+          </>
+        ) : step === 'mode' ? (
+          <>
+            <div class="modal-header">
+              <div class="modal-header-left">
+                <button class="modal-back" onClick={() => setStep('type')} aria-label="Back" disabled={loading}>
+                  ←
                 </button>
+                <div>
+                  <div class="modal-eyebrow">Step 2 of 3</div>
+                  <h2 id="recommendation-modal-title">Choose the pipeline style.</h2>
+                </div>
+              </div>
+              <button class="modal-close" onClick={onClose} aria-label="Close" disabled={loading}>×</button>
+            </div>
+
+            <div class="modal-type-select">
+              <section class="modal-section">
+                <div class="modal-section-header">
+                  <span class="modal-section-step">2</span>
+                  <div>
+                    <h3>Pick the search mode</h3>
+                    <p>Go broad for variety or deeper for a more persistent search.</p>
+                  </div>
+                </div>
+                <div class="mode-cards">
+                  {MODE_OPTIONS.map((option) => (
+                    <button
+                      key={option.mode}
+                      type="button"
+                      class={`mode-card${generationMode === option.mode ? ' mode-card--active' : ''}`}
+                      onClick={() => {
+                        setGenerationMode(option.mode);
+                        setStep('form');
+                      }}
+                    >
+                      <span class="mode-card-badge">{option.badge}</span>
+                      <span class="mode-card-label">{option.label}</span>
+                      <span class="mode-card-desc">{option.description}</span>
+                    </button>
+                  ))}
+                </div>
+              </section>
+
+              <div class="modal-type-footer">
+                <div class="modal-selection-summary">
+                  <span class="summary-pill">{mediaType === 'movie' ? 'Movies' : 'TV Shows'}</span>
+                  <span class="summary-pill">{selectedMode?.label}</span>
+                </div>
               </div>
             </div>
           </>
@@ -110,178 +268,301 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
           <>
             <div class="modal-header">
               <div class="modal-header-left">
-                <button class="modal-back" onClick={() => setStep('type')} aria-label="Back">←</button>
+                <button class="modal-back" onClick={() => setStep('mode')} aria-label="Back" disabled={loading}>
-                <h2>New {mediaLabel} Recommendation</h2>
+                  ←
+                </button>
+                <div>
+                  <div class="modal-eyebrow">Step 3 of 3</div>
+                  <h2 id="recommendation-modal-title">Tell us what a great match looks like.</h2>
+                </div>
               </div>
-              <button class="modal-close" onClick={onClose} aria-label="Close">×</button>
+              <button class="modal-close" onClick={onClose} aria-label="Close" disabled={loading}>×</button>
             </div>
 
             <form class="modal-form" onSubmit={handleSubmit}>
-              <div class="form-group">
+              <div class="modal-summary-strip">
-                <label for="main-prompt">What are you looking for?</label>
+                <span class="summary-pill">{mediaType === 'movie' ? 'Movies' : 'TV Shows'}</span>
-                <textarea
+                <span class="summary-pill summary-pill--accent">{selectedMode?.label}</span>
-                  id="main-prompt"
+                <span class="summary-caption">
-                  class="form-textarea"
+                  {generationMode === 'brainstorm'
-                  placeholder={`Describe what you want to watch. Be as specific as you like — mood, themes, setting, what you've enjoyed before...`}
+                    ? 'Fast wide search with ranking and curation.'
-                  value={mainPrompt}
+                    : 'Longer chained search that keeps exploring in batches.'}
-                  onInput={(e) => setMainPrompt((e.target as HTMLTextAreaElement).value)}
+                </span>
-                  rows={5}
-                  required
-                />
               </div>
 
-              <div class="form-group">
+              {generationMode === 'brainstorm' && (
-                <label for="liked-shows">{mediaLabel}s you liked</label>
+                <div class="form-group form-group--full">
-                <input
+                  <label for="main-prompt">What are you looking for?</label>
-                  id="liked-shows"
+                  <textarea
-                  type="text"
+                    id="main-prompt"
-                  class="form-input"
+                    class="form-textarea form-textarea--hero"
-                  placeholder={mediaType === 'movie' ? 'e.g. Inception, The Godfather' : 'e.g. Breaking Bad, The Wire'}
+                    placeholder="Describe the mood, themes, setting, pacing, or vibe you want right now."
-                  value={likedShows}
+                    value={mainPrompt}
-                  onInput={(e) => setLikedShows((e.target as HTMLInputElement).value)}
+                    onInput={(e) => setMainPrompt((e.target as HTMLTextAreaElement).value)}
-                />
+                    rows={5}
+                    required
+                  />
+                </div>
+              )}
+
+              <div class="modal-form-grid">
+                <div class="form-group">
+                  <label for="liked-shows">{mediaLabel}s you liked</label>
+                  <input
+                    id="liked-shows"
+                    type="text"
+                    class="form-input"
+                    placeholder={mediaType === 'movie' ? 'e.g. Inception, The Godfather' : 'e.g. Breaking Bad, The Wire'}
+                    value={likedShows}
+                    onInput={(e) => setLikedShows((e.target as HTMLInputElement).value)}
+                    required
+                  />
+                  <span class="form-help">A few strong examples help the pipeline lock onto your taste.</span>
+                </div>
+
+                <div class="form-group">
+                  <label for="disliked-shows">{mediaLabel}s you disliked</label>
+                  <input
+                    id="disliked-shows"
+                    type="text"
+                    class="form-input"
+                    placeholder={mediaType === 'movie' ? 'e.g. Transformers' : 'e.g. Game of Thrones'}
+                    value={dislikedShows}
+                    onInput={(e) => setDislikedShows((e.target as HTMLInputElement).value)}
+                  />
+                  <span class="form-help">Optional, but useful when you want to steer away from common misses.</span>
+                </div>
+
+                <div class={`form-group${generationMode === 'continuous' ? '' : ' form-group--full'}`}>
+                  <label for="themes">Themes, moods, and preferences</label>
+                  <input
+                    id="themes"
+                    type="text"
+                    class="form-input"
+                    placeholder="e.g. tense, grounded sci-fi, emotional, political intrigue"
+                    value={themes}
+                    onInput={(e) => setThemes((e.target as HTMLInputElement).value)}
+                  />
+                </div>
+
+                {generationMode === 'continuous' && (
+                  <>
+                    <div class="form-group">
+                      <label for="requirements">Hard requirements</label>
+                      <input
+                        id="requirements"
+                        type="text"
+                        class="form-input"
+                        placeholder="e.g. 2020+, under 2 hours, streaming on Netflix"
+                        value={requirements}
+                        onInput={(e) => setRequirements((e.target as HTMLInputElement).value)}
+                      />
+                    </div>
+
+                    <div class="form-group">
+                      <label for="avoid">Avoid</label>
+                      <input
+                        id="avoid"
+                        type="text"
+                        class="form-input"
+                        placeholder="e.g. gore, bleak endings, broad comedy"
+                        value={avoid}
+                        onInput={(e) => setAvoid((e.target as HTMLInputElement).value)}
+                      />
+                    </div>
+                  </>
+                )}
               </div>
 
-              <div class="form-group">
+              <div class="settings-card">
-                <label for="disliked-shows">{mediaLabel}s you disliked</label>
+                <div class="settings-card-header">
-                <input
+                  <h3>Tuning</h3>
-                  id="disliked-shows"
+                  <p>Adjust depth, validation, and how aggressively the search expands.</p>
-                  type="text"
+                </div>
-                  class="form-input"
-                  placeholder={mediaType === 'movie' ? 'e.g. Transformers' : 'e.g. Game of Thrones'}
-                  value={dislikedShows}
-                  onInput={(e) => setDislikedShows((e.target as HTMLInputElement).value)}
-                />
-              </div>
 
-              <div class="form-group">
+                {generationMode === 'continuous' ? (
-                <label for="themes">Themes and requirements</label>
+                  <div class="slider-card">
-                <input
+                    <div class="slider-card-header">
-                  id="themes"
+                      <div>
-                  type="text"
+                        <span class="slider-label">Total recommendations</span>
-                  class="form-input"
+                        <span class="slider-copy">Generated in batches of 10 through the continuous pipeline.</span>
-                  placeholder="e.g. dramatic setting, historical, sci-fi, etc."
+                      </div>
-                  value={themes}
+                      <span class="slider-value">{totalCount}</span>
-                  onInput={(e) => setThemes((e.target as HTMLInputElement).value)}
+                    </div>
-                />
-              </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"
+                      id="total-count"
                       type="range"
                       class="form-input"
-                      min={1}
+                      min={10}
-                      max={5}
+                      max={100}
-                      step={1}
+                      step={10}
-                      value={expansivePasses}
+                      value={totalCount}
-                      onInput={(e) => setExpansivePasses(Number((e.target as HTMLInputElement).value))}
+                      onInput={(e) => setTotalCount(Number((e.target as HTMLInputElement).value))}
                     />
                   </div>
-                  <div class="form-group">
+                ) : (
-                    <label>Mode</label>
+                  <div class="slider-card">
-                    <div class="mode-buttons">
+                    <div class="slider-card-header">
+                      <div>
+                        <span class="slider-label">Brainstorm pool size</span>
+                        <span class="slider-copy">Higher values search wider before ranking and curation.</span>
+                      </div>
+                      <span class="slider-value">{brainstormCount}</span>
+                    </div>
+                    <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="toggle-stack">
+                  <div class="toggle-card">
+                    <label class="toggle-label" for="web-search">
+                      <div class="toggle-text">
+                        <span class="toggle-title">Use Web Search</span>
+                        <span class="toggle-desc">Pull in live web context for fresher, more grounded {mediaPluralLabel}.</span>
+                      </div>
+                      <button
+                        id="web-search"
+                        type="button"
+                        class={`toggle-switch${useWebSearch ? ' on' : ''}`}
+                        aria-pressed={useWebSearch}
+                        onClick={handleWebSearchToggle}
+                      >
+                        <div class="toggle-knob" />
+                      </button>
+                    </label>
+                  </div>
+
+                  {generationMode === 'brainstorm' ? (
+                    <>
+                      <div class={`toggle-card${!useWebSearch ? ' toggle-card--disabled' : ''}`}>
+                        <label class="toggle-label">
+                          <div class="toggle-text">
+                            <span class="toggle-title">Validator Agent</span>
+                            <span class="toggle-desc">
+                              Verify brainstormed candidates against real metadata before ranking.
+                            </span>
+                          </div>
+                          <button
+                            type="button"
+                            class={`toggle-switch${useValidator ? ' on' : ''}${!useWebSearch ? ' toggle-switch-disabled' : ''}`}
+                            aria-pressed={useValidator}
+                            onClick={() => useWebSearch && setUseValidator((value) => !value)}
+                          >
+                            <div class="toggle-knob" />
+                          </button>
+                        </label>
+                      </div>
+
+                      <div class="toggle-card">
+                        <label class="toggle-label">
+                          <div class="toggle-text">
+                            <span class="toggle-title">Hard Requirements</span>
+                            <span class="toggle-desc">Bias ranking toward strict fit instead of softer exploratory matches.</span>
+                          </div>
+                          <button
+                            type="button"
+                            class={`toggle-switch${useHardRequirements ? ' on' : ''}`}
+                            aria-pressed={useHardRequirements}
+                            onClick={() => setUseHardRequirements((value) => !value)}
+                          >
+                            <div class="toggle-knob" />
+                          </button>
+                        </label>
+                      </div>
+
+                      <div class="toggle-card">
+                        <label class="toggle-label">
+                          <div class="toggle-text">
+                            <span class="toggle-title">Self Expansive Search</span>
+                            <span class="toggle-desc">Run extra passes using earlier full matches as context.</span>
+                          </div>
+                          <button
+                            type="button"
+                            class={`toggle-switch${selfExpansive ? ' on' : ''}`}
+                            aria-pressed={selfExpansive}
+                            onClick={() => setSelfExpansive((value) => !value)}
+                          >
+                            <div class="toggle-knob" />
+                          </button>
+                        </label>
+                      </div>
+                    </>
+                  ) : (
+                    <div class={`toggle-card${!useWebSearch ? ' toggle-card--disabled' : ''}`}>
+                      <label class="toggle-label">
+                        <div class="toggle-text">
+                          <span class="toggle-title">Validate Results</span>
+                          <span class="toggle-desc">Verify continuous batches against real metadata before final ranking.</span>
+                        </div>
+                        <button
+                          type="button"
+                          class={`toggle-switch${validateResults ? ' on' : ''}${!useWebSearch ? ' toggle-switch-disabled' : ''}`}
+                          aria-pressed={validateResults}
+                          onClick={() => useWebSearch && setValidateResults((value) => !value)}
+                        >
+                          <div class="toggle-knob" />
+                        </button>
+                      </label>
+                    </div>
+                  )}
+                </div>
+
+                {generationMode === 'brainstorm' && selfExpansive && (
+                  <div class="expansive-options">
+                    <div class="slider-card slider-card--compact">
+                      <div class="slider-card-header">
+                        <div>
+                          <span class="slider-label">Extra passes</span>
+                          <span class="slider-copy">How many additional exploration rounds to run.</span>
+                        </div>
+                        <span class="slider-value">{expansivePasses}</span>
+                      </div>
+                      <input
+                        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="segmented-control">
                       <button
                         type="button"
-                        class={`mode-btn${expansiveMode === 'soft' ? ' mode-btn--active' : ''}`}
+                        class={`segmented-control-btn${expansiveMode === 'soft' ? ' segmented-control-btn--active' : ''}`}
                         onClick={() => setExpansiveMode('soft')}
                       >
                         Soft
                       </button>
                       <button
                         type="button"
-                        class={`mode-btn${expansiveMode === 'extreme' ? ' mode-btn--active' : ''}`}
+                        class={`segmented-control-btn${expansiveMode === 'extreme' ? ' segmented-control-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>
 
               <div class="modal-actions">
                 <button type="button" class="btn-secondary" onClick={onClose} disabled={loading}>
                   Cancel
                 </button>
-                <button type="submit" class="btn-primary" disabled={loading || !mainPrompt.trim()}>
+                <button type="submit" class="btn-primary" disabled={loading}>
-                  {loading ? 'Starting…' : 'Get Recommendations'}
+                  {loading ? 'Creating…' : generationMode === 'brainstorm' ? 'Start Recommendation' : 'Start Continuous Search'}
                 </button>
               </div>
             </form>

packages/frontend/src/hooks/useRecommendations.ts

@@ -3,12 +3,35 @@ import type { MediaType, RecommendationSummary, FeedbackEntry } from '../types/i
 import {
   listRecommendations,
   createRecommendation,
+  createContinuousRecommendation,
   rerankRecommendation,
   submitFeedback,
   getFeedback,
   deleteRecommendation,
 } from '../api/client.js';
 
+type GenerationMode = 'brainstorm' | 'continuous';
+
+interface CreateBody {
+  main_prompt: string;
+  liked_shows: string;
+  disliked_shows: string;
+  themes: string;
+  requirements?: string;
+  avoid?: 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';
+  generation_mode?: GenerationMode;
+  total_count?: number;
+  validate_results?: boolean;
+}
+
 export function useRecommendations() {
   const [list, setList] = useState<RecommendationSummary[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -30,21 +53,27 @@ export function useRecommendations() {
   }, [refreshList, refreshFeedback]);
 
   const createNew = useCallback(
-    async (body: {
+    async (body: CreateBody) => {
-      main_prompt: string;
+      let id = '';
-      liked_shows: string;
+
-      disliked_shows: string;
+      if (body.generation_mode === 'continuous') {
-      themes: string;
+        const result = await createContinuousRecommendation({
-      brainstorm_count?: number;
+          liked_shows: body.liked_shows,
-      media_type: MediaType;
+          disliked_shows: body.disliked_shows,
-      use_web_search?: boolean;
+          themes: body.themes,
-      use_validator?: boolean;
+          requirements: body.requirements ?? '',
-      hard_requirements?: boolean;
+          avoid: body.avoid ?? '',
-      self_expansive?: boolean;
+          total_count: body.total_count ?? 30,
-      expansive_passes?: number;
+          media_type: body.media_type,
-      expansive_mode?: 'soft' | 'extreme';
+          use_web_search: body.use_web_search,
-    }) => {
+          validate_results: body.validate_results,
-      const { id } = await createRecommendation(body);
+        });
+        id = result.id;
+      } else {
+        const result = await createRecommendation(body);
+        id = result.id;
+      }
+      
       await refreshList();
       setSelectedId(id);
       return id;

packages/frontend/src/pages/Home.tsx

@@ -16,12 +16,24 @@ export function Home() {
     liked_shows: string;
     disliked_shows: string;
     themes: string;
+    requirements?: string;
+    avoid?: 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';
+    generation_mode?: 'brainstorm' | 'continuous';
+    total_count?: number;
+    validate_results?: boolean;
   }) => {
     const id = await createNew(body);
-    route(`/recom/${id}`);
+    if (id) {
+      route(`/recom/${id}`);
+    }
   };
 
   return (

packages/frontend/src/pages/Recom.tsx

@@ -194,9 +194,14 @@ export function Recom({ id }: RecomProps) {
     self_expansive?: boolean;
     expansive_passes?: number;
     expansive_mode?: 'soft' | 'extreme';
+    generation_mode?: 'brainstorm' | 'continuous';
+    total_count?: number;
+    validate_results?: boolean;
   }) => {
     const newId = await createNew(body);
-    route(`/recom/${newId}`);
+    if (newId) {
+      route(`/recom/${newId}`);
+    }
   };
 
   const isRunning = rec?.status === 'running' || rec?.status === 'pending' || sseKey !== null;