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

app/(app)/dashboard/page.tsx

@@ -9,6 +9,7 @@ import { Badge } from "@/components/ui/badge"
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import { useMutation } from "convex/react"
+import { Progress } from "@/components/ui/progress"
 
 export default function Page() {
     const { selectedProjectId } = useProject()
@@ -21,8 +22,13 @@ export default function Page() {
         api.projects.getSearchContext,
         selectedProjectId ? { projectId: selectedProjectId as any } : "skip"
     )
+    const analysisJobs = useQuery(
+        api.analysisJobs.listByProject,
+        selectedProjectId ? { projectId: selectedProjectId as any } : "skip"
+    )
     const updateDataSourceStatus = useMutation(api.dataSources.updateDataSourceStatus)
     const createAnalysis = useMutation(api.analyses.createAnalysis)
+    const createAnalysisJob = useMutation(api.analysisJobs.create)
     const [reanalyzingId, setReanalyzingId] = useState<string | null>(null)
     const analysis = useQuery(
         api.analyses.getLatestByProject,
@@ -75,10 +81,15 @@ export default function Page() {
         })
 
         try {
+            const jobId = await createAnalysisJob({
+                projectId: selectedProjectId as any,
+                dataSourceId: source._id,
+            })
+
             const response = await fetch("/api/analyze", {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ url: source.url }),
+                body: JSON.stringify({ url: source.url, jobId }),
             })
 
             const data = await response.json()
@@ -114,10 +125,10 @@ export default function Page() {
         <div className="flex flex-1 flex-col gap-6 p-4 lg:p-8">
             <div className="space-y-2">
                 <div className="flex items-center gap-2">
-                    <h1 className="text-2xl font-semibold">{analysis.productName}</h1>
-                    {selectedProject?.name && (
-                        <Badge variant="outline">{selectedProject.name}</Badge>
-                    )}
+                    <h1 className="text-2xl font-semibold">
+                        {selectedProject?.name || analysis.productName}
+                    </h1>
+                    <Badge variant="outline">{analysis.productName}</Badge>
                 </div>
                 <p className="text-muted-foreground">{analysis.tagline}</p>
                 <p className="max-w-3xl text-sm text-muted-foreground">{analysis.description}</p>
@@ -126,7 +137,15 @@ export default function Page() {
             {searchContext?.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:{" "}
+                        {searchContext.missingSources
+                            .map((missing: any) =>
+                                dataSources?.find((source: any) => source._id === missing.sourceId)?.name ||
+                                dataSources?.find((source: any) => source._id === missing.sourceId)?.url ||
+                                missing.sourceId
+                            )
+                            .join(", ")}
+                        . Run onboarding or re-analyze them for best results.
                     </AlertDescription>
                 </Alert>
             )}
@@ -197,6 +216,56 @@ export default function Page() {
                 </CardContent>
             </Card>
 
+            {analysisJobs && analysisJobs.length > 0 && (
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="text-base">Analysis Jobs</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-2 text-sm text-muted-foreground">
+                        {analysisJobs.slice(0, 5).map((job: any) => {
+                            const sourceName = dataSources?.find((source: any) => source._id === job.dataSourceId)?.name
+                                || dataSources?.find((source: any) => source._id === job.dataSourceId)?.url
+                                || "Unknown source"
+                            return (
+                                <div key={job._id} className="space-y-2 rounded-md border border-border p-3">
+                                    <div className="flex items-center justify-between gap-3">
+                                        <div className="truncate">
+                                            <span className="font-medium text-foreground">{sourceName}</span>{" "}
+                                            <span className="text-muted-foreground">
+                                                ({job.status})
+                                            </span>
+                                        </div>
+                                        {job.status === "failed" && (
+                                            <Button
+                                                size="sm"
+                                                variant="outline"
+                                                onClick={() => {
+                                                    const source = dataSources?.find((s: any) => s._id === job.dataSourceId)
+                                                    if (source) void handleReanalyze(source)
+                                                }}
+                                            >
+                                                Retry
+                                            </Button>
+                                        )}
+                                    </div>
+                                    {(job.status === "running" || job.status === "pending") && (
+                                        <div className="space-y-1">
+                                            <Progress value={typeof job.progress === "number" ? job.progress : 10} />
+                                            <div className="text-xs text-muted-foreground">
+                                                {typeof job.progress === "number" ? `${job.progress}% complete` : "Starting..."}
+                                            </div>
+                                        </div>
+                                    )}
+                                    {job.status === "failed" && job.error && (
+                                        <div className="text-xs text-destructive">{job.error}</div>
+                                    )}
+                                </div>
+                            )
+                        })}
+                    </CardContent>
+                </Card>
+            )}
+
             {searchContext?.context && (
                 <Card>
                     <CardHeader>

app/(app)/data-sources/[id]/page.tsx

@@ -0,0 +1,264 @@
+"use client"
+
+import { useParams, useRouter } from "next/navigation"
+import { useMutation, useQuery } from "convex/react"
+import { api } from "@/convex/_generated/api"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Settings } from "lucide-react"
+import * as React from "react"
+
+function formatDate(timestamp?: number) {
+  if (!timestamp) return "Not analyzed yet";
+  return new Date(timestamp).toLocaleString();
+}
+
+export default function DataSourceDetailPage() {
+  const params = useParams<{ id: string }>()
+  const router = useRouter()
+  const dataSourceId = params?.id
+  const dataSource = useQuery(
+    api.dataSources.getById,
+    dataSourceId ? { dataSourceId: dataSourceId as any } : "skip"
+  )
+  const analysis = useQuery(
+    api.analyses.getLatestByDataSource,
+    dataSourceId ? { dataSourceId: dataSourceId as any } : "skip"
+  )
+  const removeDataSource = useMutation(api.dataSources.remove)
+  const [isDeleting, setIsDeleting] = React.useState(false)
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false)
+
+  if (dataSource === undefined) {
+    return (
+      <div className="p-8">
+        <div className="text-sm text-muted-foreground">Loading data source…</div>
+      </div>
+    )
+  }
+
+  if (!dataSource) {
+    return (
+      <div className="p-8">
+        <h1 className="text-2xl font-semibold">Data source not found</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          This data source may have been removed or you no longer have access.
+        </p>
+      </div>
+    )
+  }
+
+  const statusVariant =
+    dataSource.analysisStatus === "completed"
+      ? "secondary"
+      : dataSource.analysisStatus === "failed"
+      ? "destructive"
+      : "outline"
+
+  return (
+    <div className="flex flex-1 flex-col gap-6 p-8">
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <h1 className="text-3xl font-semibold">
+            {dataSource.name || "Data Source"}
+          </h1>
+          <div className="flex items-center gap-2">
+            <Badge variant={statusVariant}>
+              {dataSource.analysisStatus}
+            </Badge>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsDialogOpen(true)}
+              aria-label="Data source settings"
+            >
+              <Settings className="size-4" />
+            </Button>
+          </div>
+        </div>
+        <p className="text-sm text-muted-foreground">{dataSource.url}</p>
+        <div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
+          <span>Last analyzed: {formatDate(dataSource.lastAnalyzedAt)}</span>
+          {dataSource.lastError && (
+            <span className="text-destructive">
+              Error: {dataSource.lastError}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {analysis ? (
+        <>
+          <div className="grid gap-4 md:grid-cols-3">
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm">Features</CardTitle>
+              </CardHeader>
+              <CardContent className="text-2xl font-semibold">
+                {analysis.features.length}
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm">Keywords</CardTitle>
+              </CardHeader>
+              <CardContent className="text-2xl font-semibold">
+                {analysis.keywords.length}
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm">Personas</CardTitle>
+              </CardHeader>
+              <CardContent className="text-2xl font-semibold">
+                {analysis.personas.length}
+              </CardContent>
+            </Card>
+          </div>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Overview</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm text-muted-foreground">
+              <div>
+                <span className="font-medium text-foreground">Product:</span>{" "}
+                {analysis.productName}
+              </div>
+              <div>
+                <span className="font-medium text-foreground">Tagline:</span>{" "}
+                {analysis.tagline}
+              </div>
+              <div>
+                <span className="font-medium text-foreground">Category:</span>{" "}
+                {analysis.category}
+              </div>
+              <div>
+                <span className="font-medium text-foreground">Positioning:</span>{" "}
+                {analysis.positioning}
+              </div>
+              <div className="pt-2">{analysis.description}</div>
+            </CardContent>
+          </Card>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Top Features</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3 text-sm">
+                {analysis.features.slice(0, 6).map((feature) => (
+                  <div key={feature.name}>
+                    <div className="font-medium">{feature.name}</div>
+                    <div className="text-muted-foreground">
+                      {feature.description}
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Pain Points</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3 text-sm">
+                {analysis.problemsSolved.slice(0, 6).map((problem) => (
+                  <div key={problem.problem}>
+                    <div className="font-medium">{problem.problem}</div>
+                    <div className="text-muted-foreground">
+                      Severity: {problem.severity} · {problem.emotionalImpact}
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Personas</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3 text-sm">
+                {analysis.personas.slice(0, 4).map((persona) => (
+                  <div key={`${persona.name}-${persona.role}`}>
+                    <div className="font-medium">
+                      {persona.name} · {persona.role}
+                    </div>
+                    <div className="text-muted-foreground">
+                      {persona.industry} · {persona.companySize}
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Keywords</CardTitle>
+              </CardHeader>
+              <CardContent className="flex flex-wrap gap-2">
+                {analysis.keywords.slice(0, 12).map((keyword) => (
+                  <Badge key={keyword.term} variant="outline">
+                    {keyword.term}
+                  </Badge>
+                ))}
+              </CardContent>
+            </Card>
+          </div>
+        </>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Analysis</CardTitle>
+          </CardHeader>
+          <CardContent className="text-sm text-muted-foreground">
+            No analysis available yet. Trigger a new analysis to populate this
+            data source.
+          </CardContent>
+        </Card>
+      )}
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete data source</DialogTitle>
+            <DialogDescription>
+              This removes the data source and its analyses from the project. This
+              cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsDialogOpen(false)}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={async () => {
+                if (!dataSourceId) return
+                setIsDeleting(true)
+                await removeDataSource({ dataSourceId: dataSourceId as any })
+                router.push("/dashboard")
+              }}
+              disabled={isDeleting}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

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>
           )}