feat: Implement analysis job tracking with progress timeline and enhanced data source status management.

app/(app)/opportunities/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useMutation, useQuery } from 'convex/react'
 import { api } from '@/convex/_generated/api'
@@ -10,6 +10,7 @@ import { Badge } from '@/components/ui/badge'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Slider } from '@/components/ui/slider'
 import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Progress } from '@/components/ui/progress'
 import { Separator } from '@/components/ui/separator'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
@@ -37,6 +38,7 @@ import {
   ExternalLink, 
   MessageSquare, 
   Twitter,
+  Globe,
   Users,
   HelpCircle,
   Filter,
@@ -55,8 +57,10 @@ import type {
   EnhancedProductAnalysis, 
   Opportunity, 
   PlatformConfig, 
-  SearchStrategy 
+  SearchStrategy,
+  SearchConfig
 } from '@/lib/types'
+import { estimateSearchTime } from '@/lib/query-generator'
 
 const STRATEGY_INFO: Record<SearchStrategy, { name: string; description: string }> = {
   'direct-keywords': { name: 'Direct Keywords', description: 'People looking for your product category' },
@@ -68,11 +72,64 @@ const STRATEGY_INFO: Record<SearchStrategy, { name: string; description: string
   'recommendation': { name: 'Recommendations', description: '"What do you use" requests' }
 }
 
+const STRATEGY_GROUPS: { title: string; description: string; strategies: SearchStrategy[] }[] = [
+  {
+    title: "High intent",
+    description: "People actively looking or comparing options.",
+    strategies: ["direct-keywords", "competitor-alternative", "comparison", "recommendation"],
+  },
+  {
+    title: "Problem-driven",
+    description: "Pain and frustration expressed in public threads.",
+    strategies: ["problem-pain", "emotional-frustrated"],
+  },
+  {
+    title: "Learning intent",
+    description: "Educational and how-to discovery signals.",
+    strategies: ["how-to"],
+  },
+]
+
+const GOAL_PRESETS: {
+  id: string
+  title: string
+  description: string
+  strategies: SearchStrategy[]
+  intensity: 'broad' | 'balanced' | 'targeted'
+  maxQueries: number
+}[] = [
+  {
+    id: "high-intent",
+    title: "High-intent leads",
+    description: "Shortlist people actively searching to buy or switch.",
+    strategies: ["direct-keywords", "competitor-alternative", "comparison", "recommendation"],
+    intensity: "targeted",
+    maxQueries: 30,
+  },
+  {
+    id: "pain-first",
+    title: "Problem pain",
+    description: "Find people expressing frustration or blockers.",
+    strategies: ["problem-pain", "emotional-frustrated"],
+    intensity: "balanced",
+    maxQueries: 40,
+  },
+  {
+    id: "market-scan",
+    title: "Market scan",
+    description: "Broader sweep to map demand and platforms.",
+    strategies: ["direct-keywords", "problem-pain", "how-to", "recommendation"],
+    intensity: "broad",
+    maxQueries: 50,
+  },
+]
+
 export default function OpportunitiesPage() {
   const router = useRouter()
   const { selectedProjectId } = useProject()
   const upsertOpportunities = useMutation(api.opportunities.upsertBatch)
   const updateOpportunity = useMutation(api.opportunities.updateStatus)
+  const createSearchJob = useMutation(api.searchJobs.create)
   const [analysis, setAnalysis] = useState<EnhancedProductAnalysis | null>(null)
   const [platforms, setPlatforms] = useState<PlatformConfig[]>([])
   const [strategies, setStrategies] = useState<SearchStrategy[]>([
@@ -81,6 +138,8 @@ export default function OpportunitiesPage() {
     'competitor-alternative'
   ])
   const [intensity, setIntensity] = useState<'broad' | 'balanced' | 'targeted'>('balanced')
+  const [maxQueries, setMaxQueries] = useState(50)
+  const [goalPreset, setGoalPreset] = useState<string>('high-intent')
   const [isSearching, setIsSearching] = useState(false)
   const [opportunities, setOpportunities] = useState<Opportunity[]>([])
   const [generatedQueries, setGeneratedQueries] = useState<any[]>([])
@@ -90,6 +149,7 @@ export default function OpportunitiesPage() {
   const [stats, setStats] = useState<any>(null)
   const [searchError, setSearchError] = useState('')
   const [missingSources, setMissingSources] = useState<any[]>([])
+  const [lastSearchConfig, setLastSearchConfig] = useState<SearchConfig | null>(null)
   const [statusFilter, setStatusFilter] = useState('all')
   const [intentFilter, setIntentFilter] = useState('all')
   const [minScore, setMinScore] = useState(0)
@@ -97,6 +157,8 @@ export default function OpportunitiesPage() {
   const [statusInput, setStatusInput] = useState('new')
   const [notesInput, setNotesInput] = useState('')
   const [tagsInput, setTagsInput] = useState('')
+  const planLoadedRef = useRef<string | null>(null)
+  const defaultPlatformsRef = useRef<PlatformConfig[] | null>(null)
 
   const projects = useQuery(api.projects.getProjects)
   const latestAnalysis = useQuery(
@@ -143,12 +205,18 @@ export default function OpportunitiesPage() {
     api.dataSources.getProjectDataSources,
     selectedProjectId ? { projectId: selectedProjectId as any } : "skip"
   )
+  const searchJobs = useQuery(
+    api.searchJobs.listByProject,
+    selectedProjectId ? { projectId: selectedProjectId as any } : "skip"
+  )
 
   const selectedProject = projects?.find((project: any) => project._id === selectedProjectId)
   const selectedSourceIds = selectedProject?.dorkingConfig?.selectedSourceIds || []
   const activeSources = selectedSources?.filter((source: any) =>
     selectedSourceIds.includes(source._id)
   ) || []
+  const enabledPlatforms = platforms.filter((platform) => platform.enabled)
+  const estimatedMinutes = estimateSearchTime(Math.max(maxQueries, 1), enabledPlatforms.map((platform) => platform.id))
 
   useEffect(() => {
     const stored = localStorage.getItem('productAnalysis')
@@ -167,16 +235,76 @@ export default function OpportunitiesPage() {
       .then(data => {
         if (data) {
           setPlatforms(data.platforms)
+          defaultPlatformsRef.current = data.platforms
         }
       })
   }, [router])
 
+  useEffect(() => {
+    if (!selectedProjectId) return
+    if (platforms.length === 0) return
+    if (planLoadedRef.current === selectedProjectId) return
+
+    const key = `searchPlan:${selectedProjectId}`
+    const stored = localStorage.getItem(key)
+    if (stored) {
+      try {
+        const parsed = JSON.parse(stored)
+        if (Array.isArray(parsed.strategies)) {
+          setStrategies(parsed.strategies)
+        }
+        if (parsed.intensity === 'broad' || parsed.intensity === 'balanced' || parsed.intensity === 'targeted') {
+          setIntensity(parsed.intensity)
+        }
+        if (typeof parsed.maxQueries === 'number') {
+          setMaxQueries(Math.min(Math.max(parsed.maxQueries, 10), 50))
+        }
+        if (typeof parsed.goalPreset === 'string') {
+          setGoalPreset(parsed.goalPreset)
+        }
+        if (Array.isArray(parsed.platformIds)) {
+          setPlatforms((prev) =>
+            prev.map((platform) => ({
+              ...platform,
+              enabled: parsed.platformIds.includes(platform.id),
+            }))
+          )
+        }
+      } catch {
+        // Ignore invalid cached config.
+      }
+    } else if (defaultPlatformsRef.current) {
+      setStrategies(['direct-keywords', 'problem-pain', 'competitor-alternative'])
+      setIntensity('balanced')
+      setMaxQueries(50)
+      setGoalPreset('high-intent')
+      setPlatforms(defaultPlatformsRef.current)
+    }
+
+    planLoadedRef.current = selectedProjectId
+  }, [selectedProjectId, platforms])
+
   useEffect(() => {
     if (!analysis && latestAnalysis) {
       setAnalysis(latestAnalysis as any)
     }
   }, [analysis, latestAnalysis])
 
+  useEffect(() => {
+    if (!selectedProjectId) return
+    if (planLoadedRef.current !== selectedProjectId) return
+
+    const key = `searchPlan:${selectedProjectId}`
+    const payload = {
+      goalPreset,
+      strategies,
+      intensity,
+      maxQueries,
+      platformIds: platforms.filter((platform) => platform.enabled).map((platform) => platform.id),
+    }
+    localStorage.setItem(key, JSON.stringify(payload))
+  }, [selectedProjectId, goalPreset, strategies, intensity, maxQueries, platforms])
+
   useEffect(() => {
     if (!analysis && latestAnalysis === null) {
       router.push('/onboarding')
@@ -197,7 +325,16 @@ export default function OpportunitiesPage() {
     )
   }
 
-  const executeSearch = async () => {
+  const applyGoalPreset = (presetId: string) => {
+    const preset = GOAL_PRESETS.find((item) => item.id === presetId)
+    if (!preset) return
+    setGoalPreset(preset.id)
+    setStrategies(preset.strategies)
+    setIntensity(preset.intensity)
+    setMaxQueries(preset.maxQueries)
+  }
+
+  const executeSearch = async (overrideConfig?: SearchConfig) => {
     if (!analysis) return
     if (!selectedProjectId) return
 
@@ -206,17 +343,27 @@ export default function OpportunitiesPage() {
     setSearchError('')
     
     try {
-      const config = {
-        platforms,
+      const config = overrideConfig ?? {
+        platforms: platforms.map((platform) => ({
+          ...platform,
+          icon: platform.icon ?? "",
+          searchTemplate: platform.searchTemplate ?? "",
+        })),
         strategies,
         intensity,
-        maxResults: intensity === 'broad' ? 80 : intensity === 'balanced' ? 50 : 30
+        maxResults: Math.min(maxQueries, 50)
       }
+      setLastSearchConfig(config as SearchConfig)
+
+      const jobId = await createSearchJob({
+        projectId: selectedProjectId as any,
+        config,
+      })
 
       const response = await fetch('/api/opportunities', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ projectId: selectedProjectId, config })
+        body: JSON.stringify({ projectId: selectedProjectId, config, jobId })
       })
 
       if (response.redirected) {
@@ -224,13 +371,14 @@ export default function OpportunitiesPage() {
         return
       }
 
-      const data = await response.json()
+      const responseText = await response.text()
+      const data = responseText ? JSON.parse(responseText) : null
 
       if (!response.ok) {
-        throw new Error(data.error || 'Failed to search for opportunities')
+        throw new Error(data?.error || 'Failed to search for opportunities')
       }
 
-      if (data.success) {
+      if (data?.success) {
         const mapped = data.data.opportunities.map((opp: Opportunity) => ({
           ...opp,
           status: 'new',
@@ -256,6 +404,8 @@ export default function OpportunitiesPage() {
             softPitch: opp.softPitch,
           })),
         })
+      } else {
+        throw new Error('Search returned no data')
       }
     } catch (error: any) {
       console.error('Search error:', error)
@@ -307,80 +457,162 @@ export default function OpportunitiesPage() {
 
   if (!analysis) return null
 
+  const latestJob = searchJobs && searchJobs.length > 0 ? searchJobs[0] : null
+
   return (
     <div className="flex h-screen">
       {/* Sidebar */}
-      <div className="w-80 border-r border-border bg-card flex flex-col">
-        <div className="p-4 border-b border-border">
+      <div className="w-96 border-r border-border bg-card flex flex-col">
+        <div className="p-4 border-b border-border space-y-1">
           <h2 className="font-semibold flex items-center gap-2">
             <Target className="h-5 w-5" />
-            Search Configuration
+            Search Plan
           </h2>
+          <p className="text-xs text-muted-foreground">
+            Pick a goal, tune channels, then run the scan.
+          </p>
         </div>
 
         <ScrollArea className="flex-1 p-4 space-y-6">
+          {/* Goal presets */}
+          <div className="space-y-3">
+            <Label className="text-sm font-medium uppercase text-muted-foreground">Goal</Label>
+            <div className="grid gap-2">
+              {GOAL_PRESETS.map((preset) => (
+                <button
+                  key={preset.id}
+                  type="button"
+                  onClick={() => applyGoalPreset(preset.id)}
+                  className={`rounded-lg border px-3 py-2 text-left transition ${
+                    goalPreset === preset.id
+                      ? "border-foreground/60 bg-muted/50"
+                      : "border-border/60 hover:border-foreground/30 hover:bg-muted/40"
+                  }`}
+                >
+                  <div className="text-sm font-semibold">{preset.title}</div>
+                  <div className="text-xs text-muted-foreground">{preset.description}</div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <Separator />
+
           {/* Platforms */}
           <div className="space-y-3">
-            <Label className="text-sm font-medium uppercase text-muted-foreground">Platforms</Label>
-            <div className="space-y-2">
-              {platforms.map(platform => (
-                <div key={platform.id} className="flex items-center space-x-2">
-                  <Checkbox
-                    id={platform.id}
-                    checked={platform.enabled}
-                    onCheckedChange={() => togglePlatform(platform.id)}
-                  />
-                  <Label htmlFor={platform.id} className="cursor-pointer flex-1">{platform.name}</Label>
-                </div>
-              ))}
+            <Label className="text-sm font-medium uppercase text-muted-foreground">Channels</Label>
+            <div className="grid gap-2">
+              {platforms.map(platform => {
+                const isEnabled = platform.enabled
+                const iconMap: Record<string, JSX.Element> = {
+                  reddit: <MessageSquare className="h-4 w-4" />,
+                  twitter: <Twitter className="h-4 w-4" />,
+                  hackernews: <Zap className="h-4 w-4" />,
+                  indiehackers: <Users className="h-4 w-4" />,
+                  quora: <HelpCircle className="h-4 w-4" />,
+                  stackoverflow: <Filter className="h-4 w-4" />,
+                  linkedin: <Globe className="h-4 w-4" />
+                }
+                return (
+                  <button
+                    key={platform.id}
+                    type="button"
+                    onClick={() => togglePlatform(platform.id)}
+                    className={`flex items-center justify-between rounded-lg border px-3 py-2 text-left transition ${
+                      isEnabled
+                        ? "border-foreground/50 bg-muted/50"
+                        : "border-border/60 hover:border-foreground/30 hover:bg-muted/40"
+                    }`}
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className="flex h-7 w-7 items-center justify-center rounded-md bg-background">
+                        {iconMap[platform.id] || <Globe className="h-4 w-4" />}
+                      </div>
+                      <div>
+                        <div className="text-sm font-medium">{platform.name}</div>
+                        <div className="text-xs text-muted-foreground">
+                          {isEnabled ? "Included" : "Excluded"}
+                        </div>
+                      </div>
+                    </div>
+                    <Checkbox checked={isEnabled} />
+                  </button>
+                )
+              })}
             </div>
           </div>
 
           <Separator />
 
           {/* Strategies */}
-          <div className="space-y-3">
-            <Label className="text-sm font-medium uppercase text-muted-foreground">Strategies</Label>
-            <div className="space-y-2">
-              {(Object.keys(STRATEGY_INFO) as SearchStrategy[]).map(strategy => (
-                <div key={strategy} className="flex items-start space-x-2">
-                  <Checkbox
-                    id={strategy}
-                    checked={strategies.includes(strategy)}
-                    onCheckedChange={() => toggleStrategy(strategy)}
-                  />
-                  <div className="flex-1">
-                    <Label htmlFor={strategy} className="cursor-pointer">
-                      {STRATEGY_INFO[strategy].name}
-                    </Label>
-                    <p className="text-xs text-muted-foreground">{STRATEGY_INFO[strategy].description}</p>
-                  </div>
+          <div className="space-y-4">
+            <Label className="text-sm font-medium uppercase text-muted-foreground">Signals</Label>
+            {STRATEGY_GROUPS.map((group) => (
+              <div key={group.title} className="space-y-2">
+                <div>
+                  <div className="text-sm font-semibold">{group.title}</div>
+                  <div className="text-xs text-muted-foreground">{group.description}</div>
                 </div>
-              ))}
-            </div>
+                <div className="space-y-2">
+                  {group.strategies.map((strategy) => (
+                    <div key={strategy} className="flex items-start gap-2 rounded-md border border-border/60 px-2 py-2">
+                      <Checkbox
+                        id={strategy}
+                        checked={strategies.includes(strategy)}
+                        onCheckedChange={() => toggleStrategy(strategy)}
+                      />
+                      <div className="flex-1">
+                        <Label htmlFor={strategy} className="cursor-pointer text-sm font-medium">
+                          {STRATEGY_INFO[strategy].name}
+                        </Label>
+                        <p className="text-xs text-muted-foreground">{STRATEGY_INFO[strategy].description}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
           </div>
 
           <Separator />
 
-          {/* Intensity */}
-          <div className="space-y-3">
-            <Label className="text-sm font-medium uppercase text-muted-foreground">Intensity</Label>
-            <Slider
-              value={[intensity === 'broad' ? 0 : intensity === 'balanced' ? 50 : 100]}
-              onValueChange={([v]) => setIntensity(v < 33 ? 'broad' : v < 66 ? 'balanced' : 'targeted')}
-              max={100}
-              step={50}
-            />
-            <div className="flex justify-between text-xs text-muted-foreground">
-              <span>Broad</span>
-              <span>Targeted</span>
+          {/* Depth + Queries */}
+          <div className="space-y-4">
+            <Label className="text-sm font-medium uppercase text-muted-foreground">Depth</Label>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>Broad</span>
+                <span>Targeted</span>
+              </div>
+              <Slider
+                value={[intensity === 'broad' ? 0 : intensity === 'balanced' ? 50 : 100]}
+                onValueChange={([v]) => setIntensity(v < 33 ? 'broad' : v < 66 ? 'balanced' : 'targeted')}
+                max={100}
+                step={50}
+              />
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs font-medium uppercase text-muted-foreground">Max Queries</Label>
+                <span className="text-xs text-muted-foreground">{maxQueries}</span>
+              </div>
+              <Slider
+                value={[maxQueries]}
+                onValueChange={([v]) => setMaxQueries(v)}
+                min={10}
+                max={50}
+                step={5}
+              />
+              <div className="text-xs text-muted-foreground">
+                Up to {maxQueries} queries · est. {estimatedMinutes} min
+              </div>
             </div>
           </div>
         </ScrollArea>
 
-        <div className="p-4 border-t border-border">
+        <div className="p-4 border-t border-border space-y-2">
           <Button 
-            onClick={executeSearch} 
+            onClick={() => executeSearch()} 
             disabled={
               isSearching ||
               platforms.filter(p => p.enabled).length === 0 ||
@@ -390,6 +622,19 @@ export default function OpportunitiesPage() {
           >
             {isSearching ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Searching...</> : <><Search className="mr-2 h-4 w-4" /> Find Opportunities</>}
           </Button>
+          <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
+            <span>{enabledPlatforms.length || 0} channels</span>
+            <span>·</span>
+            <span>{strategies.length} signals</span>
+            <span>·</span>
+            <span>max {maxQueries} queries</span>
+          </div>
+          {platforms.filter(p => p.enabled).length === 0 && (
+            <p className="text-xs text-muted-foreground">Select at least one platform to search.</p>
+          )}
+          {selectedSourceIds.length === 0 && (
+            <p className="text-xs text-muted-foreground">Select data sources to build search context.</p>
+          )}
         </div>
       </div>
 
@@ -397,7 +642,7 @@ export default function OpportunitiesPage() {
       <div className="flex-1 overflow-auto p-6">
         <div className="max-w-4xl mx-auto space-y-6">
           {/* Header */}
-          <div className="flex items-center justify-between">
+          <div className="flex flex-wrap items-center justify-between gap-3">
             <div>
               <h1 className="text-2xl font-bold">Opportunity Finder</h1>
               <p className="text-muted-foreground">Discover potential customers for {analysis.productName}</p>
@@ -415,6 +660,42 @@ export default function OpportunitiesPage() {
               </div>
             )}
           </div>
+          <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
+            <Badge variant="outline">Goal: {GOAL_PRESETS.find((preset) => preset.id === goalPreset)?.title || "Custom"}</Badge>
+            <Badge variant="outline">Intensity: {intensity}</Badge>
+            <Badge variant="outline">Max queries: {maxQueries}</Badge>
+          </div>
+          {latestJob && (latestJob.status === "running" || latestJob.status === "pending") && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm">Search in progress</CardTitle>
+                <CardDescription>
+                  Current job: {latestJob.status}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                <Progress value={typeof latestJob.progress === "number" ? latestJob.progress : 10} />
+                <div className="text-xs text-muted-foreground">
+                  {typeof latestJob.progress === "number" ? `${latestJob.progress}% complete` : "Starting..."}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+          {latestJob && latestJob.status === "failed" && (
+            <Alert variant="destructive">
+              <AlertDescription>
+                Search failed: {latestJob.error || "Unknown error"}.{" "}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="ml-2"
+                  onClick={() => executeSearch((latestJob.config as SearchConfig) || lastSearchConfig || undefined)}
+                >
+                  Retry
+                </Button>
+              </AlertDescription>
+            </Alert>
+          )}
           {searchError && (
             <Alert variant="destructive">
               <AlertDescription>{searchError}</AlertDescription>
@@ -451,7 +732,15 @@ export default function OpportunitiesPage() {
           {missingSources.length > 0 && (
             <Alert>
               <AlertDescription>
-                Some selected sources don&apos;t have analysis yet. Run onboarding or re-analyze them for best results.
+                Some selected sources don&apos;t have analysis yet:{" "}
+                {missingSources
+                  .map((missing) =>
+                    activeSources.find((source: any) => source._id === missing.sourceId)?.name ||
+                    activeSources.find((source: any) => source._id === missing.sourceId)?.url ||
+                    missing.sourceId
+                  )
+                  .join(", ")}
+                . Run onboarding or re-analyze them for best results.
               </AlertDescription>
             </Alert>
           )}