feat: split research workflows and results into dedicated workspaces

CHANGELOG.md

@@ -1,8 +1,25 @@
 # Changelog
 
-All notable changes to this project are documented in this file.
+All notable changes to this project will be documented in this file.
 
-## 2026-04-12
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## [Unreleased]
+
+## [2026-04-19]
+
+### Added
+- Added separate `Research` and `Results` workspaces so new runs and saved run browsing live in distinct flows while preserving bundled map selection.
+- Added dedicated Basic and Deep Research results views, plus a public landing page and dedicated auth route for the unauthenticated experience.
+
+### Changed
+- Made Basic research map-first by requiring a dropped pin or current location, sending coordinate-based searches through the API, and cleaning up shared map presentation.
+- Simplified shared Google Maps rendering by moving Basic, Deep Research, and result review maps onto the same cleaner visual style.
+
+### Fixed
+- Fixed local logout behavior so the session cookie is cleared consistently and optional session-id logout requests can remove the active server session record.
+
+## [2026-04-12]
 
 ### Changed
 - Improved local development networking by making API env loading work with `.env.local`, adding LAN-friendly API URL fallback behavior, and fixing development CORS handling.
@@ -17,7 +34,7 @@ All notable changes to this project are documented in this file.
 ### Removed
 - Removed stale local metadata, placeholder postal seeding code, and leftover Supabase-era repository artifacts.
 
-## 2026-03-27
+## [2026-03-27]
 
 ### Changed
 - Migrated the app from a Supabase runtime to a local Fastify API with PostgreSQL, PostGIS, and cookie-based session auth.
@@ -32,7 +49,7 @@ All notable changes to this project are documented in this file.
 ### Removed
 - Removed the Supabase browser client, Edge Function runtime, and Supabase migration artifacts from the active app stack.
 
-## 2026-03-26
+## [2026-03-26]
 
 ### Added
 - Initial Leads4Less app with React and Vite.

package-lock.json

@@ -31,6 +31,8 @@
       "devDependencies": {
         "@types/node": "^22.14.0",
         "@types/pg": "^8.20.0",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
         "autoprefixer": "^10.4.21",
         "tailwindcss": "^4.1.14",
         "tsx": "^4.21.0",
@@ -1597,6 +1599,26 @@
         "pg-types": "^2.2.0"
       }
     },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
     "node_modules/@vis.gl/react-google-maps": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@vis.gl/react-google-maps/-/react-google-maps-1.7.1.tgz",
@@ -1888,6 +1910,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",

package.json

@@ -45,6 +45,8 @@
   "devDependencies": {
     "@types/node": "^22.14.0",
     "@types/pg": "^8.20.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.4.21",
     "tailwindcss": "^4.1.14",
     "tsx": "^4.21.0",

server/src/auth/sessions.ts

@@ -53,9 +53,15 @@ export function setSessionCookie(reply: FastifyReply, token: string, expiresAt:
 }
 
 export function clearSessionCookie(reply: FastifyReply) {
-  reply.clearCookie(SESSION_COOKIE_NAME, {
+  const env = getEnv();
+
+  reply.setCookie(SESSION_COOKIE_NAME, '', {
     path: '/',
+    httpOnly: true,
     sameSite: 'lax',
+    secure: env.NODE_ENV === 'production',
+    expires: new Date(0),
+    maxAge: 0,
   });
 }
 
@@ -89,6 +95,10 @@ export async function deleteSessionByToken(db: DbClient, token: string) {
   await db.query('delete from public.sessions where token_hash = $1', [hashSessionToken(token)]);
 }
 
+export async function deleteSessionById(db: DbClient, sessionId: string) {
+  await db.query('delete from public.sessions where id = $1', [sessionId]);
+}
+
 export async function getSessionUserByToken(db: DbClient, token: string) {
   const tokenHash = hashSessionToken(token);
   const result = await db.query<SessionRow>(

server/src/routes/auth.ts

@@ -1,7 +1,7 @@
 import type { FastifyPluginAsync, FastifyRequest } from 'fastify';
 import { ZodError, z } from 'zod';
 import { hashPassword, verifyPassword } from '../auth/passwords.js';
-import { clearSessionCookie, createSession, deleteSessionByToken, getSessionTokenFromRequest, getSessionUserByToken, setSessionCookie, } from '../auth/sessions.js';
+import { clearSessionCookie, createSession, deleteSessionById, deleteSessionByToken, getSessionTokenFromRequest, getSessionUserByToken, setSessionCookie, } from '../auth/sessions.js';
 import { createUser, getUserByEmail, toAppUser } from '../auth/users.js';
 import { getDbPool } from '../db/pool.js';
 
@@ -16,6 +16,10 @@ const loginSchema = z.object({
   password: z.string().min(1),
 });
 
+const logoutSchema = z.object({
+  sessionId: z.string().uuid().optional(),
+});
+
 function getRequestMetadata(request: FastifyRequest) {
   return {
     userAgent: request.headers['user-agent'],
@@ -101,9 +105,16 @@ export const authRoutes: FastifyPluginAsync = async (app) => {
 
   app.post('/auth/logout', async (request, reply) => {
     const token = getSessionTokenFromRequest(request);
+    const payload = logoutSchema.safeParse(request.body);
+    const sessionId = payload.success ? payload.data.sessionId : undefined;
+    const db = getDbPool();
 
     if (token) {
-      await deleteSessionByToken(getDbPool(), token);
+      await deleteSessionByToken(db, token);
+    }
+
+    if (sessionId) {
+      await deleteSessionById(db, sessionId);
     }
 
     clearSessionCookie(reply);

server/src/routes/search-jobs.ts

@@ -11,6 +11,8 @@ const runSearchSchema = z.object({
   radiusKm: z.coerce.number().positive().max(50),
   businessType: z.string().trim().min(1),
   keywords: z.string().trim().optional(),
+  lat: z.number().finite().min(-90).max(90).optional(),
+  lng: z.number().finite().min(-180).max(180).optional(),
 });
 
 const jobParamsSchema = z.object({

server/src/search/run-search.ts

@@ -66,7 +66,19 @@ async function executeSearchJobAtCoordinates(
 }
 
 export async function runSearchForUser(db: Pool, userId: string, payload: RunSearchInput): Promise<RunSearchResult> {
-  const job = await createSearchJob(db, userId, payload);
+  const hasProvidedCoordinates = typeof payload.lat === 'number' && typeof payload.lng === 'number';
+  const job = hasProvidedCoordinates
+    ? await createSearchJobForCoordinates(db, userId, {
+        name: payload.name || `${payload.businessType} in ${payload.location}`,
+        city: payload.location,
+        address: payload.location,
+        radiusKm: payload.radiusKm,
+        businessType: payload.businessType,
+        keywords: payload.keywords,
+        lat: payload.lat!,
+        lng: payload.lng!,
+      })
+    : await createSearchJob(db, userId, payload);
   const jobId = job.id;
 
   try {
@@ -75,14 +87,19 @@ export async function runSearchForUser(db: Pool, userId: string, payload: RunSea
       throw new Error('GOOGLE_MAPS_SERVER_KEY is required for running research.');
     }
 
-    const geocoded = await geocodeLocation(payload.location, env.GOOGLE_MAPS_SERVER_KEY);
+    const resolvedCenter = hasProvidedCoordinates
-    await updateSearchJobCenter(db, jobId, geocoded.lat, geocoded.lng);
+      ? { lat: payload.lat!, lng: payload.lng! }
+      : await geocodeLocation(payload.location, env.GOOGLE_MAPS_SERVER_KEY);
+
+    if (!hasProvidedCoordinates) {
+      await updateSearchJobCenter(db, jobId, resolvedCenter.lat, resolvedCenter.lng);
+    }
 
     const completedJob = await executeSearchJobAtCoordinates(db, {
       jobId,
       userId,
-      lat: geocoded.lat,
+      lat: resolvedCenter.lat,
-      lng: geocoded.lng,
+      lng: resolvedCenter.lng,
       radiusKm: payload.radiusKm,
       businessType: payload.businessType,
       keywords: payload.keywords,

server/src/search/types.ts

@@ -56,6 +56,8 @@ export type RunSearchInput = {
   radiusKm: number;
   businessType: string;
   keywords?: string;
+  lat?: number;
+  lng?: number;
 };
 
 export type RunSearchResult = {

src/App.tsx

@@ -1,12 +1,26 @@
 import { type ReactElement, type SVGProps, useEffect, useState } from 'react';
 import { APIProvider } from '@vis.gl/react-google-maps';
-import { AlertCircle, Briefcase, LogIn, ShieldAlert, UserPlus } from 'lucide-react';
+import {
-import { DeepResearchView } from './components/DeepResearchView';
+  AlertCircle,
+  ArrowRight,
+  Briefcase,
+  Building2,
+  Check,
+  LogIn,
+  Map,
+  MapPinned,
+  Search,
+  ShieldAlert,
+  Sparkles,
+  User,
+  UserPlus,
+} from 'lucide-react';
 import { Layout, type AppTab } from './components/Layout';
-import { SearchSetup } from './components/SearchSetup';
 import { Dashboard } from './components/Dashboard';
 import { MapView } from './components/MapView';
-import type { AppUser } from '../shared/types';
+import { ResearchWorkspace } from './components/ResearchWorkspace';
+import { ResultsWorkspace } from './components/ResultsWorkspace';
+import type { SessionUser } from '../shared/types';
 import { getLocalSessionUser, signInWithLocalAuth, signOutWithLocalAuth, signUpWithLocalAuth } from './lib/auth';
 import { hasApiConfig } from './lib/api';
 
@@ -14,7 +28,8 @@ const GOOGLE_MAPS_API_KEY = import.meta.env.VITE_GOOGLE_MAPS_PLATFORM_KEY ?? '';
 const hasValidMapsKey = Boolean(GOOGLE_MAPS_API_KEY) && GOOGLE_MAPS_API_KEY !== 'YOUR_API_KEY';
 
 export default function App() {
-  const [user, setUser] = useState<AppUser | null>(null);
+  const [publicPage, setPublicPage] = useState<'landing' | 'auth'>(() => getPublicPageFromLocation());
+  const [user, setUser] = useState<SessionUser | null>(null);
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState<AppTab>('setup');
   const [selectedJobIds, setSelectedJobIds] = useState<string[]>([]);
@@ -26,6 +41,18 @@ export default function App() {
   const [password, setPassword] = useState('');
   const [displayName, setDisplayName] = useState('');
 
+  useEffect(() => {
+    const handlePopState = () => {
+      setPublicPage(getPublicPageFromLocation());
+    };
+
+    window.addEventListener('popstate', handlePopState);
+
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, []);
+
   useEffect(() => {
     let isMounted = true;
 
@@ -109,6 +136,7 @@ export default function App() {
       });
 
       setUser(nextUser);
+      navigatePublicPage('landing', setPublicPage);
     } catch (error) {
       setAuthError(error instanceof Error ? error.message : 'Authentication failed.');
     } finally {
@@ -117,11 +145,16 @@ export default function App() {
   };
 
   const handleLogout = async () => {
+    const sessionId = user?.sessionId;
+
+    setAuthError(null);
+    setAuthNotice(null);
+    setSelectedJobIds([]);
+    setUser(null);
+    setActiveTab('setup');
+
     try {
-      await signOutWithLocalAuth();
+      await signOutWithLocalAuth(sessionId);
-      setUser(null);
-      setSelectedJobIds([]);
-      setAuthNotice(null);
     } catch (error) {
       setAuthError(error instanceof Error ? error.message : 'Failed to sign out.');
     }
@@ -153,130 +186,39 @@ export default function App() {
   }
 
   if (!user) {
+    const handleSetAuthMode = (mode: 'sign_in' | 'sign_up') => {
+      setAuthMode(mode);
+      setAuthError(null);
+      setAuthNotice(null);
+    };
+
+    if (publicPage === 'auth') {
+      return (
+        <AuthPage
+          authMode={authMode}
+          authError={authError}
+          authNotice={authNotice}
+          displayName={displayName}
+          email={email}
+          isAuthenticating={isAuthenticating}
+          password={password}
+          onDisplayNameChange={setDisplayName}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onGoHome={() => navigatePublicPage('landing', setPublicPage)}
+          onSetAuthMode={handleSetAuthMode}
+          onSubmit={() => void handleLogin()}
+        />
+      );
+    }
+
     return (
-      <div className="flex h-screen flex-col items-center justify-center bg-stone-50 p-4">
+      <LandingPage
-        <div className="w-full max-w-md space-y-8 rounded-2xl bg-white p-8 shadow-xl">
+        onGoToAuth={(mode) => {
-          <div className="text-center">
+          handleSetAuthMode(mode);
-            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
+          navigatePublicPage('auth', setPublicPage);
-              <Briefcase className="h-8 w-8" />
+        }}
-            </div>
+      />
-            <h1 className="mt-6 text-3xl font-bold tracking-tight text-stone-900">Leads4less</h1>
-            <p className="mt-2 text-stone-600">Create a local account to access your lead workspace.</p>
-          </div>
-
-          <div className="grid grid-cols-2 gap-2 rounded-xl bg-stone-100 p-1">
-            <button
-              type="button"
-              onClick={() => {
-                setAuthMode('sign_in');
-                setAuthError(null);
-                setAuthNotice(null);
-              }}
-              className={`rounded-lg px-3 py-2 text-sm font-semibold transition-all ${
-                authMode === 'sign_in' ? 'bg-white text-stone-900 shadow-sm' : 'text-stone-500 hover:text-stone-900'
-              }`}
-            >
-              Sign In
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setAuthMode('sign_up');
-                setAuthError(null);
-                setAuthNotice(null);
-              }}
-              className={`rounded-lg px-3 py-2 text-sm font-semibold transition-all ${
-                authMode === 'sign_up' ? 'bg-white text-stone-900 shadow-sm' : 'text-stone-500 hover:text-stone-900'
-              }`}
-            >
-              Create Account
-            </button>
-          </div>
-
-          {authError && (
-            <div className="flex items-start gap-3 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">
-              <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0" />
-              <div>
-                <p className="font-semibold">Authentication Error</p>
-                <p className="mt-1 opacity-90">{authError}</p>
-              </div>
-            </div>
-          )}
-
-          {authNotice && (
-            <div className="rounded-xl border border-emerald-100 bg-emerald-50 p-4 text-sm text-emerald-700">
-              {authNotice}
-            </div>
-          )}
-
-          <form
-            className="space-y-4"
-            onSubmit={(event) => {
-              event.preventDefault();
-              void handleLogin();
-            }}
-          >
-            {authMode === 'sign_up' && (
-              <div>
-                <label className="mb-2 block text-sm font-semibold text-stone-700">Name</label>
-                <input
-                  type="text"
-                  value={displayName}
-                  onChange={(event) => setDisplayName(event.target.value)}
-                  placeholder="Your name"
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
-                />
-              </div>
-            )}
-
-            <div>
-              <label className="mb-2 block text-sm font-semibold text-stone-700">Email</label>
-              <input
-                type="email"
-                required
-                value={email}
-                onChange={(event) => setEmail(event.target.value)}
-                placeholder="you@example.com"
-                className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
-              />
-            </div>
-
-            <div>
-              <label className="mb-2 block text-sm font-semibold text-stone-700">Password</label>
-              <input
-                type="password"
-                required
-                minLength={6}
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
-                placeholder="At least 6 characters"
-                className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
-              />
-            </div>
-
-            <button
-              type="submit"
-              disabled={isAuthenticating}
-              className="flex w-full items-center justify-center gap-3 rounded-xl bg-emerald-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              {isAuthenticating ? (
-                <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
-              ) : authMode === 'sign_up' ? (
-                <UserPlus className="h-5 w-5" />
-              ) : (
-                <LogIn className="h-5 w-5" />
-              )}
-              {isAuthenticating
-                ? authMode === 'sign_up'
-                  ? 'Creating account...'
-                  : 'Signing in...'
-                : authMode === 'sign_up'
-                  ? 'Create Account'
-                  : 'Sign In'}
-            </button>
-          </form>
-        </div>
-      </div>
     );
   }
 
@@ -306,16 +248,26 @@ export default function App() {
         onLogout={() => void handleLogout()}
       >
         {activeTab === 'setup' && (
-          <SearchSetup
+          <ResearchWorkspace
             user={user}
             selectedJobIds={selectedJobIds}
             onToggleJobSelection={handleToggleJobSelection}
             onSelectCreatedJob={handleSelectCreatedJob}
             onShowSelectedOnMap={handleShowSelectedOnMap}
             onClearSelection={handleClearSelectedJobs}
+            onShowBatchOnMap={handleShowJobIdsOnMap}
+          />
+        )}
+        {activeTab === 'results' && (
+          <ResultsWorkspace
+            user={user}
+            selectedJobIds={selectedJobIds}
+            onToggleJobSelection={handleToggleJobSelection}
+            onShowSelectedOnMap={handleShowSelectedOnMap}
+            onClearSelection={handleClearSelectedJobs}
+            onShowBatchOnMap={handleShowJobIdsOnMap}
           />
         )}
-        {activeTab === 'deepResearch' && <DeepResearchView onShowBatchOnMap={handleShowJobIdsOnMap} />}
         {activeTab === 'dashboard' && <Dashboard user={user} />}
         {activeTab === 'map' && <MapView user={user} jobIds={selectedJobIds} />}
       </Layout>
@@ -323,6 +275,544 @@ export default function App() {
   );
 }
 
+function getPublicPageFromLocation(): 'landing' | 'auth' {
+  if (typeof window === 'undefined') {
+    return 'landing';
+  }
+
+  return window.location.pathname === '/auth' ? 'auth' : 'landing';
+}
+
+function navigatePublicPage(page: 'landing' | 'auth', setPublicPage: (page: 'landing' | 'auth') => void) {
+  const nextPath = page === 'auth' ? '/auth' : '/';
+
+  if (typeof window !== 'undefined' && window.location.pathname !== nextPath) {
+    window.history.pushState({}, '', nextPath);
+  }
+
+  setPublicPage(page);
+}
+
+function LandingPage(props: {
+  onGoToAuth: (mode: 'sign_in' | 'sign_up') => void;
+}) {
+  const { onGoToAuth } = props;
+
+  const featureCards = [
+    {
+      icon: Search,
+      title: 'Research Runs',
+      description: 'Search by city, radius, business type, and keywords without juggling spreadsheets or manual lookups.',
+    },
+    {
+      icon: MapPinned,
+      title: 'Deep Research',
+      description: 'Drop one pin and expand intelligently into nearby postal areas to widen market coverage.',
+    },
+    {
+      icon: Map,
+      title: 'Clean Map View',
+      description: 'Review returned businesses on a focused map built for operational decision-making, not map clutter.',
+    },
+    {
+      icon: Briefcase,
+      title: 'Lead Workspace',
+      description: 'Keep past runs, saved businesses, and mapped results in one place for repeatable prospecting.',
+    },
+  ] as const;
+
+  const audienceCards = [
+    {
+      icon: User,
+      title: 'Personal Use',
+      description: 'For solo operators, freelancers, and independent prospectors who need a focused local research workflow.',
+    },
+    {
+      icon: Building2,
+      title: 'Small Business',
+      description: 'For agencies and local teams running prospecting every week across multiple service areas.',
+    },
+    {
+      icon: Sparkles,
+      title: 'Enterprise',
+      description: 'For larger organizations that need custom research volume, rollout support, and tailored operating limits.',
+    },
+  ] as const;
+
+  const plans = [
+    {
+      name: 'Personal',
+      audience: 'For solo operators',
+      price: '$19',
+      period: '/month',
+      cta: 'Start free',
+      featured: false,
+      items: ['1 user workspace', '40 research runs / month', 'Map view and dashboard history', 'Email support'],
+    },
+    {
+      name: 'Small Business',
+      audience: 'For growing local teams',
+      price: '$79',
+      period: '/month',
+      cta: 'Choose Small Business',
+      featured: true,
+      items: ['Everything in Personal', '250 research runs / month', 'Deep research workflows', 'Extended lead history', 'Priority support'],
+    },
+    {
+      name: 'Enterprise',
+      audience: 'For custom rollouts',
+      price: 'Contact',
+      period: 'sales',
+      cta: 'Talk to sales',
+      featured: false,
+      items: ['Custom research volume', 'Custom onboarding plan', 'Tailored support model', 'Deployment and process guidance'],
+    },
+  ] as const;
+
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.12),_transparent_28%),linear-gradient(180deg,#fafaf9_0%,#f5f5f4_100%)] text-stone-900">
+      <div className="mx-auto max-w-7xl px-4 pb-16 pt-4 sm:px-6 lg:px-8 lg:pb-24">
+        <header className="sticky top-4 z-10 rounded-3xl border border-white/70 bg-white/80 px-5 py-4 shadow-sm backdrop-blur md:px-6">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div className="flex items-center gap-3">
+              <div className="rounded-2xl bg-emerald-600 p-2.5 text-white shadow-sm">
+                <Briefcase className="h-5 w-5" />
+              </div>
+              <div>
+                <p className="text-lg font-bold tracking-tight">Leads4less</p>
+                <p className="text-sm text-stone-500">Local market research for modern teams</p>
+              </div>
+            </div>
+
+            <nav className="flex flex-wrap items-center gap-3 text-sm font-medium text-stone-600">
+              <a href="#product" className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
+                Product
+              </a>
+              <a href="#workflow" className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
+                Workflow
+              </a>
+              <a href="#pricing" className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
+                Pricing
+              </a>
+              <button
+                type="button"
+                onClick={() => onGoToAuth('sign_in')}
+                className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900"
+              >
+                Sign In
+              </button>
+              <button
+                type="button"
+                onClick={() => onGoToAuth('sign_up')}
+                className="inline-flex items-center gap-2 rounded-full bg-emerald-600 px-4 py-2 text-white shadow-sm transition hover:bg-emerald-700"
+              >
+                Sign Up
+                <ArrowRight className="h-4 w-4" />
+              </button>
+            </nav>
+          </div>
+        </header>
+
+        <section className="py-12 lg:py-16">
+          <div className="space-y-8">
+            <div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-700">
+              <Sparkles className="h-4 w-4" />
+              Built for local lead generation workflows
+            </div>
+
+            <div className="space-y-5">
+              <h1 className="max-w-4xl text-5xl font-bold tracking-tight text-stone-950 sm:text-6xl">
+                Research local markets, map opportunities, and build better lead lists faster.
+              </h1>
+              <p className="max-w-3xl text-lg leading-8 text-stone-600 sm:text-xl">
+                Run targeted searches, expand coverage from a single pin, and review every result in one focused workspace designed for real prospecting operations.
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-3 sm:flex-row">
+              <button
+                type="button"
+                onClick={() => onGoToAuth('sign_up')}
+                className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-6 py-4 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700"
+              >
+                Sign Up
+                <ArrowRight className="h-4 w-4" />
+              </button>
+              <a
+                href="#pricing"
+                className="inline-flex items-center justify-center rounded-2xl border border-stone-200 bg-white px-6 py-4 text-sm font-semibold text-stone-700 shadow-sm transition hover:border-stone-300 hover:bg-stone-50"
+              >
+                See pricing
+              </a>
+            </div>
+          </div>
+        </section>
+
+        <section id="product" className="rounded-[2rem] border border-stone-200 bg-white px-6 py-10 shadow-sm sm:px-8 lg:px-10">
+          <div className="max-w-3xl">
+            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Product</p>
+            <h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">One workspace for local lead generation</h2>
+            <p className="mt-4 text-base leading-8 text-stone-600">
+              Leads4less keeps market research, deep area expansion, map review, and saved business history in a single operating flow so your team can move faster without losing context.
+            </p>
+          </div>
+
+          <div className="mt-8 grid gap-4 lg:grid-cols-3">
+            <div className="rounded-3xl bg-stone-950 p-6 text-white lg:col-span-2">
+              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-300">Operational Workflow</p>
+              <p className="mt-4 text-2xl font-bold tracking-tight">Search a market, expand intelligently, and review results visually.</p>
+              <p className="mt-4 max-w-2xl text-sm leading-7 text-stone-300">
+                Instead of stitching together Google tabs, spreadsheets, and hand-written notes, run the full prospecting loop from one product surface built for repeatable research. Launch deeper market coverage from a single map interaction while keeping research, deep research, dashboard, and map review connected in one workspace.
+              </p>
+            </div>
+            <div className="rounded-3xl border border-stone-200 bg-stone-50 p-6">
+              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Best Fit</p>
+              <p className="mt-4 text-2xl font-bold tracking-tight text-stone-900">Local teams who need speed and structure</p>
+              <p className="mt-4 text-sm leading-7 text-stone-600">Built for recurring lead generation, territory research, and targeted market expansion.</p>
+            </div>
+          </div>
+        </section>
+
+        <section id="workflow" className="py-16">
+          <div className="max-w-3xl">
+            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Workflow</p>
+            <h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">A clear research process from first search to mapped review</h2>
+          </div>
+
+          <div className="mt-8 grid gap-4 lg:grid-cols-4">
+            {[
+              ['01', 'Search', 'Start with location, radius, business type, and optional keywords.'],
+              ['02', 'Expand', 'Use deep research to fan out from a pin into nearby postal areas.'],
+              ['03', 'Review', 'Inspect returned businesses on a clean map and in the dashboard.'],
+              ['04', 'Act', 'Keep high-value results organized for follow-up and repeated market work.'],
+            ].map(([step, title, description]) => (
+              <div key={step} className="rounded-3xl border border-stone-200 bg-white p-6 shadow-sm">
+                <p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">{step}</p>
+                <h3 className="mt-4 text-xl font-bold tracking-tight text-stone-900">{title}</h3>
+                <p className="mt-3 text-sm leading-7 text-stone-600">{description}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="rounded-[2rem] border border-stone-200 bg-white px-6 py-10 shadow-sm sm:px-8 lg:px-10">
+          <div className="max-w-3xl">
+            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Who It's For</p>
+            <h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">Designed for personal use, small business teams, and enterprise rollouts</h2>
+          </div>
+
+          <div className="mt-8 grid gap-4 lg:grid-cols-3">
+            {audienceCards.map((audience) => (
+              <div key={audience.title} className="rounded-3xl border border-stone-200 bg-stone-50 p-6">
+                <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-emerald-600 shadow-sm">
+                  <audience.icon className="h-5 w-5" />
+                </div>
+                <h3 className="mt-5 text-xl font-bold tracking-tight text-stone-900">{audience.title}</h3>
+                <p className="mt-3 text-sm leading-7 text-stone-600">{audience.description}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section id="pricing" className="py-16">
+          <div className="max-w-3xl">
+            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Pricing</p>
+            <h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">Choose the plan that matches your research volume</h2>
+            <p className="mt-4 text-base leading-8 text-stone-600">
+              Start small, run local research consistently, and upgrade when your market coverage or team needs expand.
+            </p>
+          </div>
+
+          <div className="mt-8 grid gap-5 xl:grid-cols-3">
+            {plans.map((plan) => (
+              <div
+                key={plan.name}
+                className={`rounded-[2rem] border p-7 shadow-sm ${
+                  plan.featured ? 'border-emerald-300 bg-emerald-50/60 shadow-emerald-100' : 'border-stone-200 bg-white'
+                }`}
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div>
+                    <p className="text-xl font-bold tracking-tight text-stone-900">{plan.name}</p>
+                    <p className="mt-2 text-sm text-stone-600">{plan.audience}</p>
+                  </div>
+                  {plan.featured && (
+                    <span className="rounded-full bg-emerald-600 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white">
+                      Most Popular
+                    </span>
+                  )}
+                </div>
+
+                <div className="mt-8 flex items-end gap-1">
+                  <span className="text-4xl font-bold tracking-tight text-stone-950">{plan.price}</span>
+                  <span className="pb-1 text-sm text-stone-500">{plan.period}</span>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={() => onGoToAuth(plan.name === 'Enterprise' ? 'sign_in' : 'sign_up')}
+                  className={`mt-8 inline-flex w-full items-center justify-center rounded-2xl px-4 py-3 text-sm font-semibold transition ${
+                    plan.featured
+                      ? 'bg-emerald-600 text-white hover:bg-emerald-700'
+                      : 'border border-stone-200 bg-white text-stone-800 hover:bg-stone-50'
+                  }`}
+                >
+                  {plan.cta}
+                </button>
+
+                <div className="mt-8 space-y-3">
+                  {plan.items.map((item) => (
+                    <div key={item} className="flex items-start gap-3 text-sm text-stone-700">
+                      <div className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
+                        <Check className="h-3.5 w-3.5" />
+                      </div>
+                      <span>{item}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="rounded-[2rem] bg-stone-950 px-6 py-12 text-white shadow-sm sm:px-8 lg:px-10">
+          <div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
+            <div className="max-w-3xl">
+              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-300">Start Now</p>
+              <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">Turn local market research into a repeatable system.</h2>
+              <p className="mt-4 text-base leading-8 text-stone-300">
+                Create an account, run your first research job, and build a cleaner lead workflow from day one.
+              </p>
+            </div>
+            <div className="flex flex-col gap-3 sm:flex-row">
+              <button
+                type="button"
+                onClick={() => onGoToAuth('sign_up')}
+                className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-500 px-6 py-4 text-sm font-semibold text-white transition hover:bg-emerald-400"
+              >
+                Choose a plan
+                <ArrowRight className="h-4 w-4" />
+              </button>
+              <a
+                href="#pricing"
+                className="inline-flex items-center justify-center rounded-2xl border border-white/20 px-6 py-4 text-sm font-semibold text-white transition hover:bg-white/10"
+              >
+                Compare plans
+              </a>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function AuthPage(props: {
+  authMode: 'sign_in' | 'sign_up';
+  authError: string | null;
+  authNotice: string | null;
+  displayName: string;
+  email: string;
+  isAuthenticating: boolean;
+  password: string;
+  onDisplayNameChange: (value: string) => void;
+  onEmailChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+  onGoHome: () => void;
+  onSetAuthMode: (mode: 'sign_in' | 'sign_up') => void;
+  onSubmit: () => void;
+}) {
+  const {
+    authMode,
+    authError,
+    authNotice,
+    displayName,
+    email,
+    isAuthenticating,
+    password,
+    onDisplayNameChange,
+    onEmailChange,
+    onPasswordChange,
+    onGoHome,
+    onSetAuthMode,
+    onSubmit,
+  } = props;
+
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.12),_transparent_30%),linear-gradient(180deg,#fafaf9_0%,#f5f5f4_100%)] text-stone-900">
+      <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
+        <header className="rounded-3xl border border-white/70 bg-white/80 px-5 py-4 shadow-sm backdrop-blur md:px-6">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <button type="button" onClick={onGoHome} className="flex items-center gap-3 text-left">
+              <div className="rounded-2xl bg-emerald-600 p-2.5 text-white shadow-sm">
+                <Briefcase className="h-5 w-5" />
+              </div>
+              <div>
+                <p className="text-lg font-bold tracking-tight">Leads4less</p>
+                <p className="text-sm text-stone-500">Local market research for modern teams</p>
+              </div>
+            </button>
+
+            <div className="flex items-center gap-3 text-sm font-medium text-stone-600">
+              <button type="button" onClick={onGoHome} className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
+                Back to home
+              </button>
+            </div>
+          </div>
+        </header>
+
+        <section className="grid gap-10 py-12 lg:grid-cols-[minmax(0,1fr)_440px] lg:items-center lg:py-16">
+          <div className="space-y-8">
+            <div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-700">
+              <Sparkles className="h-4 w-4" />
+              Secure access to your lead workspace
+            </div>
+
+            <div className="space-y-5">
+              <h1 className="max-w-3xl text-5xl font-bold tracking-tight text-stone-950 sm:text-6xl">
+                {authMode === 'sign_up' ? 'Create your workspace and start researching local markets.' : 'Sign in and continue your lead research workflow.'}
+              </h1>
+              <p className="max-w-2xl text-lg leading-8 text-stone-600 sm:text-xl">
+                Access research runs, deep research coverage, clean map review, and saved business history from one focused operating surface.
+              </p>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-3">
+              {[
+                ['Targeted search', 'Run location-based business research with clear inputs and repeatable jobs.'],
+                ['Map review', 'Inspect returned businesses on a cleaner map built for operational use.'],
+                ['Persistent history', 'Keep lead runs and saved businesses available whenever you come back.'],
+              ].map(([title, description]) => (
+                <div key={title} className="rounded-3xl border border-stone-200 bg-white p-5 shadow-sm">
+                  <p className="text-base font-bold tracking-tight text-stone-900">{title}</p>
+                  <p className="mt-2 text-sm leading-7 text-stone-600">{description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="rounded-[2rem] border border-stone-200 bg-white p-6 shadow-xl shadow-stone-200/70 sm:p-8">
+            <div className="mb-6 flex items-center justify-between">
+              <div>
+                <p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Account Access</p>
+                <h2 className="mt-2 text-2xl font-bold tracking-tight text-stone-900">
+                  {authMode === 'sign_up' ? 'Create account' : 'Sign in'}
+                </h2>
+                <p className="mt-2 text-sm text-stone-600">
+                  {authMode === 'sign_up' ? 'Set up your account to start using Leads4less.' : 'Use your account to continue where you left off.'}
+                </p>
+              </div>
+              <div className="rounded-2xl bg-emerald-50 p-3 text-emerald-600">
+                {authMode === 'sign_up' ? <UserPlus className="h-6 w-6" /> : <LogIn className="h-6 w-6" />}
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2 rounded-2xl bg-stone-100 p-1">
+              <button
+                type="button"
+                onClick={() => onSetAuthMode('sign_in')}
+                className={`rounded-xl px-3 py-2.5 text-sm font-semibold transition-all ${
+                  authMode === 'sign_in' ? 'bg-white text-stone-900 shadow-sm' : 'text-stone-500 hover:text-stone-900'
+                }`}
+              >
+                Sign In
+              </button>
+              <button
+                type="button"
+                onClick={() => onSetAuthMode('sign_up')}
+                className={`rounded-xl px-3 py-2.5 text-sm font-semibold transition-all ${
+                  authMode === 'sign_up' ? 'bg-white text-stone-900 shadow-sm' : 'text-stone-500 hover:text-stone-900'
+                }`}
+              >
+                Sign Up
+              </button>
+            </div>
+
+            {authError && (
+              <div className="mt-5 flex items-start gap-3 rounded-2xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">
+                <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0" />
+                <div>
+                  <p className="font-semibold">Authentication Error</p>
+                  <p className="mt-1 opacity-90">{authError}</p>
+                </div>
+              </div>
+            )}
+
+            {authNotice && <div className="mt-5 rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm text-emerald-700">{authNotice}</div>}
+
+            <form
+              className="mt-5 space-y-4"
+              onSubmit={(event) => {
+                event.preventDefault();
+                onSubmit();
+              }}
+            >
+              {authMode === 'sign_up' && (
+                <div>
+                  <label className="mb-2 block text-sm font-semibold text-stone-700">Name</label>
+                  <input
+                    type="text"
+                    value={displayName}
+                    onChange={(event) => onDisplayNameChange(event.target.value)}
+                    placeholder="Your name"
+                    className="w-full rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
+                  />
+                </div>
+              )}
+
+              <div>
+                <label className="mb-2 block text-sm font-semibold text-stone-700">Email</label>
+                <input
+                  type="email"
+                  required
+                  value={email}
+                  onChange={(event) => onEmailChange(event.target.value)}
+                  placeholder="you@example.com"
+                  className="w-full rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
+                />
+              </div>
+
+              <div>
+                <label className="mb-2 block text-sm font-semibold text-stone-700">Password</label>
+                <input
+                  type="password"
+                  required
+                  minLength={6}
+                  value={password}
+                  onChange={(event) => onPasswordChange(event.target.value)}
+                  placeholder="At least 6 characters"
+                  className="w-full rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={isAuthenticating}
+                className="flex w-full items-center justify-center gap-3 rounded-2xl bg-emerald-600 px-4 py-3.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {isAuthenticating ? (
+                  <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
+                ) : authMode === 'sign_up' ? (
+                  <UserPlus className="h-5 w-5" />
+                ) : (
+                  <LogIn className="h-5 w-5" />
+                )}
+                {isAuthenticating
+                  ? authMode === 'sign_up'
+                    ? 'Creating account...'
+                    : 'Signing in...'
+                  : authMode === 'sign_up'
+                    ? 'Create Account'
+                    : 'Sign In'}
+              </button>
+            </form>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
 function ConfigScreen(props: {
   icon: ReactElement;
   title: string;

src/components/BasicResearchMap.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useMemo } from 'react';
+import { Map, Marker, useMap } from '@vis.gl/react-google-maps';
+import { cleanMapOptions } from '../lib/map-styles';
+
+interface BasicResearchMapProps {
+  pin: google.maps.LatLngLiteral | null;
+  radiusKm: number;
+  onPinChange: (nextPin: google.maps.LatLngLiteral) => void;
+}
+
+export function BasicResearchMap({ pin, radiusKm, onPinChange }: BasicResearchMapProps) {
+  const defaultCenter = useMemo(() => pin ?? { lat: 39.5, lng: -98.35 }, [pin]);
+
+  return (
+    <div className="relative h-full min-h-[540px] overflow-hidden rounded-3xl border border-stone-200 bg-stone-100 shadow-sm">
+      <Map
+        defaultCenter={defaultCenter}
+        defaultZoom={5}
+        style={{ width: '100%', height: '100%' }}
+        gestureHandling="greedy"
+        {...cleanMapOptions}
+        onClick={(event) => {
+          const latLng = event.detail.latLng;
+          if (latLng) {
+            onPinChange(latLng);
+          }
+        }}
+      >
+        <BasicResearchOverlay pin={pin} radiusKm={radiusKm} />
+        {pin && (
+          <Marker
+            position={pin}
+            icon={{
+              path: google.maps.SymbolPath.CIRCLE,
+              fillColor: '#059669',
+              fillOpacity: 1,
+              strokeColor: '#064e3b',
+              strokeWeight: 2,
+              scale: 7,
+            }}
+          />
+        )}
+      </Map>
+
+      {!pin && (
+        <div className="pointer-events-none absolute inset-x-6 top-6 rounded-2xl border border-white/20 bg-white/90 p-4 text-sm text-stone-600 shadow-lg backdrop-blur-sm">
+          Click anywhere on the map to drop a pin. Use the Area field to adjust the search circle.
+        </div>
+      )}
+    </div>
+  );
+}
+
+function BasicResearchOverlay({ pin, radiusKm }: { pin: google.maps.LatLngLiteral | null; radiusKm: number }) {
+  const map = useMap();
+
+  useEffect(() => {
+    if (!map || !pin) {
+      return;
+    }
+
+    const circle = new google.maps.Circle({
+      map,
+      center: pin,
+      radius: Math.max(1, radiusKm) * 1000,
+      strokeColor: '#059669',
+      strokeOpacity: 0.9,
+      strokeWeight: 2,
+      fillColor: '#10b981',
+      fillOpacity: 0.12,
+      clickable: false,
+    });
+
+    const bounds = circle.getBounds();
+    if (bounds) {
+      map.fitBounds(bounds, 60);
+    }
+
+    return () => {
+      circle.setMap(null);
+    };
+  }, [map, pin, radiusKm]);
+
+  return null;
+}

src/components/BasicResultsView.tsx

@@ -0,0 +1,309 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  AlertCircle,
+  CalendarDays,
+  Check,
+  CheckCircle2,
+  CircleOff,
+  Clock3,
+  Loader2,
+  MapPin,
+  Search as SearchIcon,
+  SlidersHorizontal,
+} from 'lucide-react';
+import { listSearchJobs } from '../lib/database';
+import type { SearchJob, SearchJobStatus } from '../types';
+import type { AppUser } from '../../shared/types';
+
+interface BasicResultsViewProps {
+  user: AppUser;
+  selectedJobIds: string[];
+  onToggleJobSelection: (jobId: string) => void;
+  onShowSelectedOnMap: () => void;
+  onClearSelection: () => void;
+}
+
+type JobStatusFilter = 'all' | SearchJobStatus;
+type SortOption = 'newest' | 'oldest' | 'results';
+
+const statusOptions: Array<{ value: JobStatusFilter; label: string }> = [
+  { value: 'all', label: 'All statuses' },
+  { value: 'pending', label: 'Pending' },
+  { value: 'running', label: 'Running' },
+  { value: 'completed', label: 'Completed' },
+  { value: 'failed', label: 'Failed' },
+  { value: 'stopped', label: 'Stopped' },
+];
+
+const sortOptions: Array<{ value: SortOption; label: string }> = [
+  { value: 'newest', label: 'Newest first' },
+  { value: 'oldest', label: 'Oldest first' },
+  { value: 'results', label: 'Most results' },
+];
+
+export function BasicResultsView({ user, selectedJobIds, onToggleJobSelection, onShowSelectedOnMap, onClearSelection }: BasicResultsViewProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState<JobStatusFilter>('all');
+  const [sortOrder, setSortOrder] = useState<SortOption>('newest');
+  const [isLoadingHistory, setIsLoadingHistory] = useState(true);
+  const [jobs, setJobs] = useState<SearchJob[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const selectedJobCount = selectedJobIds.length;
+
+  const refreshJobs = useCallback(async () => {
+    setIsLoadingHistory(true);
+
+    try {
+      const nextJobs = await listSearchJobs(user.id, 100);
+      setJobs(nextJobs);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load research jobs.');
+    } finally {
+      setIsLoadingHistory(false);
+    }
+  }, [user.id]);
+
+  useEffect(() => {
+    void refreshJobs();
+  }, [refreshJobs]);
+
+  const filteredJobs = useMemo(() => {
+    const normalizedSearch = searchTerm.trim().toLowerCase();
+
+    const nextJobs = jobs.filter((job) => {
+      const matchesStatus = statusFilter === 'all' || job.status === statusFilter;
+
+      if (!matchesStatus) {
+        return false;
+      }
+
+      if (!normalizedSearch) {
+        return true;
+      }
+
+      const haystack = [job.name, job.businessType, job.city, job.address, job.keywords]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+
+      return haystack.includes(normalizedSearch);
+    });
+
+    nextJobs.sort((left, right) => {
+      if (sortOrder === 'results') {
+        return right.totalResults - left.totalResults;
+      }
+
+      const leftTime = new Date(left.createdAt).getTime();
+      const rightTime = new Date(right.createdAt).getTime();
+
+      return sortOrder === 'oldest' ? leftTime - rightTime : rightTime - leftTime;
+    });
+
+    return nextJobs;
+  }, [jobs, searchTerm, sortOrder, statusFilter]);
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Basic Results</p>
+          <h2 className="mt-2 text-2xl font-bold text-stone-900">Basic research runs</h2>
+          <p className="mt-2 text-sm text-stone-600">Filter the grid to find specific runs, select the ones you want, then send the full selection to the map.</p>
+        </div>
+        <div className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-600 shadow-sm">
+          {filteredJobs.length} shown of {jobs.length}
+        </div>
+      </div>
+
+      <div className="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm">
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_220px_220px]">
+          <label className="space-y-2">
+            <span className="flex items-center gap-2 text-sm font-semibold text-stone-700">
+              <SearchIcon className="h-4 w-4 text-stone-400" />
+              Search
+            </span>
+            <input
+              type="text"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder="Search by name, type, or location"
+              className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
+            />
+          </label>
+
+          <label className="space-y-2">
+            <span className="flex items-center gap-2 text-sm font-semibold text-stone-700">
+              <SlidersHorizontal className="h-4 w-4 text-stone-400" />
+              Status
+            </span>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value as JobStatusFilter)}
+              className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
+            >
+              {statusOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="space-y-2">
+            <span className="text-sm font-semibold text-stone-700">Sort</span>
+            <select
+              value={sortOrder}
+              onChange={(e) => setSortOrder(e.target.value as SortOption)}
+              className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
+            >
+              {sortOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+
+        {selectedJobCount > 0 && (
+          <div className="flex flex-col gap-3 border-t border-stone-100 pt-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <p className="text-sm font-semibold text-emerald-900">{selectedJobCount === 1 ? '1 research job selected' : `${selectedJobCount} research jobs selected`}</p>
+              <p className="text-sm text-stone-600">Use the selection action to open all selected jobs together on the map.</p>
+            </div>
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <button type="button" onClick={onShowSelectedOnMap} className="rounded-xl bg-emerald-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700">
+                Show selected on map ({selectedJobCount})
+              </button>
+              <button type="button" onClick={onClearSelection} className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm font-semibold text-stone-700 transition-all hover:bg-stone-50">
+                Clear selection
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {error && <div className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>}
+
+      {isLoadingHistory ? (
+        <div className="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-5 text-sm text-stone-500 shadow-sm">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          Loading research jobs...
+        </div>
+      ) : filteredJobs.length === 0 ? (
+        <div className="rounded-2xl border border-dashed border-stone-300 bg-white p-10 text-center shadow-sm">
+          <p className="text-lg font-semibold text-stone-900">No research jobs match the current filters.</p>
+          <p className="mt-2 text-sm text-stone-500">Try adjusting the search term, status filter, or sort order.</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {filteredJobs.map((job) => {
+            const statusMeta = getStatusMeta(job.status);
+            const isSelected = selectedJobIds.includes(job.id);
+
+            return (
+              <button
+                type="button"
+                key={job.id}
+                aria-pressed={isSelected}
+                onClick={() => onToggleJobSelection(job.id)}
+                className={`group flex h-full flex-col rounded-2xl border p-5 text-left shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md ${
+                  isSelected ? 'border-emerald-400 bg-emerald-50/70 shadow-emerald-100' : 'border-stone-200 bg-white hover:border-emerald-400'
+                }`}
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="truncate text-lg font-bold text-stone-900 group-hover:text-emerald-700">{job.name}</p>
+                    <p className="mt-1 truncate text-sm text-stone-500">{job.businessType}</p>
+                  </div>
+                  <div className="flex flex-col items-end gap-2">
+                    <span className={statusMeta.badgeClass}>
+                      <statusMeta.icon className={statusMeta.icon === Loader2 ? 'h-3.5 w-3.5 animate-spin' : 'h-3.5 w-3.5'} />
+                      {statusMeta.label}
+                    </span>
+                    <span className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold ${isSelected ? 'bg-emerald-600 text-white' : 'bg-stone-100 text-stone-500'}`}>
+                      {isSelected ? <Check className="h-3.5 w-3.5" /> : <span className="h-2 w-2 rounded-full bg-current opacity-60"></span>}
+                      {isSelected ? 'Selected' : 'Click to select'}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="mt-5 space-y-3 text-sm text-stone-600">
+                  <div className="flex items-start gap-2">
+                    <MapPin className="mt-0.5 h-4 w-4 flex-shrink-0 text-stone-400" />
+                    <span className="line-clamp-2">{formatLocation(job)}</span>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <CalendarDays className="h-4 w-4 flex-shrink-0 text-stone-400" />
+                    <span>{new Date(job.createdAt).toLocaleDateString()}</span>
+                  </div>
+
+                  {job.keywords ? <p className="line-clamp-2 text-stone-500">Keywords: {job.keywords}</p> : null}
+                </div>
+
+                <div className="mt-5 grid grid-cols-2 gap-3 rounded-2xl bg-stone-50 p-4">
+                  <div>
+                    <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Radius</p>
+                    <p className="mt-1 text-base font-bold text-stone-900">{job.radiusKm} km</p>
+                  </div>
+                  <div>
+                    <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Results</p>
+                    <p className="mt-1 text-base font-bold text-stone-900">{job.totalResults}</p>
+                  </div>
+                </div>
+
+                <div className="mt-4 flex items-center justify-between border-t border-stone-100 pt-4 text-sm font-medium text-stone-500">
+                  <span>{job.totalResults === 1 ? '1 lead found' : `${job.totalResults} leads found`}</span>
+                  <span className={isSelected ? 'text-emerald-700' : 'text-stone-400'}>{isSelected ? 'Included in selection' : 'Available to select'}</span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatLocation(job: SearchJob) {
+  const primaryLocation = job.address || job.city || 'Location not available';
+  return `${primaryLocation} (${job.radiusKm} km radius)`;
+}
+
+function getStatusMeta(status: SearchJobStatus) {
+  switch (status) {
+    case 'completed':
+      return {
+        label: 'Completed',
+        icon: CheckCircle2,
+        badgeClass: 'inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700',
+      };
+    case 'running':
+      return {
+        label: 'Running',
+        icon: Loader2,
+        badgeClass: 'inline-flex items-center gap-1 rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700',
+      };
+    case 'failed':
+      return {
+        label: 'Failed',
+        icon: AlertCircle,
+        badgeClass: 'inline-flex items-center gap-1 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-semibold text-red-700',
+      };
+    case 'stopped':
+      return {
+        label: 'Stopped',
+        icon: CircleOff,
+        badgeClass: 'inline-flex items-center gap-1 rounded-full border border-stone-200 bg-stone-100 px-3 py-1 text-xs font-semibold text-stone-700',
+      };
+    case 'pending':
+    default:
+      return {
+        label: 'Pending',
+        icon: Clock3,
+        badgeClass: 'inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700',
+      };
+  }
+}

src/components/DeepResearchPreviewMap.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
-import { AdvancedMarker, Map, Pin, useMap } from '@vis.gl/react-google-maps';
+import { Map, Marker, useMap } from '@vis.gl/react-google-maps';
 import type { DeepResearchPreview } from '../../shared/types';
+import { cleanMapOptions } from '../lib/map-styles';
 
 interface DeepResearchPreviewMapProps {
   pin: google.maps.LatLngLiteral | null;
@@ -29,22 +30,29 @@ export function DeepResearchPreviewMap({ pin, preview, onPinChange }: DeepResear
       <Map
         defaultCenter={defaultCenter}
         defaultZoom={5}
-        mapId="DEMO_MAP_ID"
-        {...({ internalUsageAttributionIds: ['gmp_mcp_codeassist_v1_aistudio'] } as Record<string, unknown>)}
         style={{ width: '100%', height: '100%' }}
         gestureHandling="greedy"
+        {...cleanMapOptions}
         onClick={(event) => {
           const latLng = event.detail.latLng;
           if (latLng) {
             onPinChange(latLng);
           }
         }}
-      >
+        >
         <PreviewOverlay overlay={preview?.overlay ?? null} pin={pin} preview={preview} />
         {pin && (
-          <AdvancedMarker position={pin}>
+          <Marker
-            <Pin background="#059669" glyphColor="#fff" borderColor="#064e3b" />
+            position={pin}
-          </AdvancedMarker>
+            icon={{
+              path: google.maps.SymbolPath.CIRCLE,
+              fillColor: '#059669',
+              fillOpacity: 1,
+              strokeColor: '#064e3b',
+              strokeWeight: 2,
+              scale: 7,
+            }}
+          />
         )}
       </Map>
 
@@ -97,6 +105,12 @@ function PreviewOverlay({
       return;
     }
 
+    if (pin && (!preview || preview.areas.length === 0)) {
+      map.panTo(pin);
+      map.setZoom(15);
+      return;
+    }
+
     const bounds = new google.maps.LatLngBounds();
     let hasBounds = false;
 
@@ -113,7 +127,7 @@ function PreviewOverlay({
     });
 
     if (hasBounds) {
-      map.fitBounds(bounds, 60);
+      map.fitBounds(bounds, 40);
     }
   }, [map, pin, preview]);
 

src/components/DeepResearchResultsView.tsx

@@ -0,0 +1,143 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import type { DeepResearchBatchSummary } from '../../shared/types';
+import { getDeepResearchBatch, listDeepResearchBatches } from '../lib/database';
+
+interface DeepResearchResultsViewProps {
+  onShowBatchOnMap: (jobIds: string[]) => void;
+}
+
+export function DeepResearchResultsView({ onShowBatchOnMap }: DeepResearchResultsViewProps) {
+  const [batches, setBatches] = useState<DeepResearchBatchSummary[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoadingBatches, setIsLoadingBatches] = useState(true);
+  const [activeBatchId, setActiveBatchId] = useState<string | null>(null);
+
+  const refreshBatches = useCallback(async () => {
+    setIsLoadingBatches(true);
+
+    try {
+      const nextBatches = await listDeepResearchBatches();
+      setBatches(nextBatches);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load deep research history.');
+    } finally {
+      setIsLoadingBatches(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshBatches();
+  }, [refreshBatches]);
+
+  const handleOpenBatchOnMap = async (batchId: string) => {
+    setActiveBatchId(batchId);
+    setError(null);
+
+    try {
+      const batch = await getDeepResearchBatch(batchId);
+      if (batch.jobIds.length === 0) {
+        setError('This deep research batch does not have child jobs yet.');
+        return;
+      }
+
+      onShowBatchOnMap(batch.jobIds);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load batch details.');
+    } finally {
+      setActiveBatchId(null);
+    }
+  };
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Deep Research Results</p>
+          <h2 className="mt-2 text-2xl font-bold text-stone-900">Previous deep research batches</h2>
+          <p className="mt-2 text-sm text-stone-600">Review completed or failed batch runs and open their bundled map results.</p>
+        </div>
+        <div className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-600 shadow-sm">
+          {batches.length} batches
+        </div>
+      </div>
+
+      {error && <div className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>}
+
+      {isLoadingBatches ? (
+        <div className="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-5 text-sm text-stone-500 shadow-sm">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          Loading deep research batches...
+        </div>
+      ) : batches.length === 0 ? (
+        <div className="rounded-2xl border border-dashed border-stone-300 bg-white p-10 text-center shadow-sm">
+          <p className="text-lg font-semibold text-stone-900">No deep research batches yet.</p>
+          <p className="mt-2 text-sm text-stone-500">Preview a pin on the map and run your first deep research batch.</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+          {batches.map((batch) => (
+            <div key={batch.id} className="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <p className="text-lg font-bold text-stone-900">{batch.businessType}</p>
+                  <p className="mt-1 text-sm text-stone-500">{batch.basePostalCode ? `${batch.basePostalCode} · ${batch.countryCode ?? 'N/A'}` : 'Base postal area unavailable'}</p>
+                </div>
+                <span className={`rounded-full px-3 py-1 text-xs font-semibold ${statusBadgeClass(batch.status)}`}>{batch.status}</span>
+              </div>
+
+              <div className="mt-4 grid grid-cols-2 gap-3 rounded-2xl bg-stone-50 p-4 text-sm text-stone-600">
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Propagation</p>
+                  <p className="mt-1 text-base font-bold text-stone-900">{batch.propagation}</p>
+                </div>
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Postal Areas</p>
+                  <p className="mt-1 text-base font-bold text-stone-900">{batch.totalPostalAreas}</p>
+                </div>
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Child Jobs</p>
+                  <p className="mt-1 text-base font-bold text-stone-900">{batch.childJobCount}</p>
+                </div>
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Leads</p>
+                  <p className="mt-1 text-base font-bold text-stone-900">{batch.totalResults}</p>
+                </div>
+              </div>
+
+              {batch.keywords && <p className="mt-4 text-sm text-stone-500">Keywords: {batch.keywords}</p>}
+
+              <div className="mt-4 flex items-center justify-between border-t border-stone-100 pt-4 text-sm text-stone-500">
+                <span>Created {new Date(batch.createdAt).toLocaleDateString()}</span>
+                <button
+                  type="button"
+                  onClick={() => void handleOpenBatchOnMap(batch.id)}
+                  disabled={activeBatchId === batch.id}
+                  className="rounded-xl bg-emerald-600 px-4 py-2 font-semibold text-white transition-all hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  {activeBatchId === batch.id ? 'Loading...' : 'Show bundle on map'}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function statusBadgeClass(status: DeepResearchBatchSummary['status']) {
+  switch (status) {
+    case 'completed':
+      return 'bg-emerald-100 text-emerald-800';
+    case 'failed':
+      return 'bg-red-100 text-red-700';
+    case 'running':
+      return 'bg-sky-100 text-sky-700';
+    case 'stopped':
+      return 'bg-stone-200 text-stone-700';
+    case 'pending':
+    default:
+      return 'bg-amber-100 text-amber-700';
+  }
+}

src/components/DeepResearchView.tsx

@@ -1,43 +1,23 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { AlertCircle, Crosshair, Loader2, MapPinned, Sparkles } from 'lucide-react';
-import type { DeepResearchBatchSummary, DeepResearchPreview } from '../../shared/types';
+import type { DeepResearchPreview } from '../../shared/types';
-import { createDeepResearchBatch, getDeepResearchBatch, listDeepResearchBatches, previewDeepResearch } from '../lib/database';
+import { createDeepResearchBatch, previewDeepResearch } from '../lib/database';
 import { DeepResearchPreviewMap } from './DeepResearchPreviewMap';
 
 interface DeepResearchViewProps {
   onShowBatchOnMap: (jobIds: string[]) => void;
+  topContent?: React.ReactNode;
 }
 
-export function DeepResearchView({ onShowBatchOnMap }: DeepResearchViewProps) {
+export function DeepResearchView({ onShowBatchOnMap, topContent }: DeepResearchViewProps) {
   const [pin, setPin] = useState<google.maps.LatLngLiteral | null>(null);
   const [businessType, setBusinessType] = useState('');
   const [keywords, setKeywords] = useState('');
   const [propagation, setPropagation] = useState(1);
   const [preview, setPreview] = useState<DeepResearchPreview | null>(null);
-  const [batches, setBatches] = useState<DeepResearchBatchSummary[]>([]);
-  const [error, setError] = useState<string | null>(null);
   const [previewError, setPreviewError] = useState<string | null>(null);
   const [isPreviewing, setIsPreviewing] = useState(false);
   const [isRunning, setIsRunning] = useState(false);
-  const [isLoadingBatches, setIsLoadingBatches] = useState(true);
-  const [activeBatchId, setActiveBatchId] = useState<string | null>(null);
-
-  const refreshBatches = useCallback(async () => {
-    setIsLoadingBatches(true);
-
-    try {
-      const nextBatches = await listDeepResearchBatches();
-      setBatches(nextBatches);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load deep research history.');
-    } finally {
-      setIsLoadingBatches(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    void refreshBatches();
-  }, [refreshBatches]);
 
   useEffect(() => {
     setPreview(null);
@@ -97,41 +77,21 @@ export function DeepResearchView({ onShowBatchOnMap }: DeepResearchViewProps) {
         keywords: keywords.trim() || undefined,
       });
 
-      setActiveBatchId(batch.id);
-      await refreshBatches();
       if (batch.jobIds.length > 0) {
         onShowBatchOnMap(batch.jobIds);
       }
     } catch (err) {
       setPreviewError(err instanceof Error ? err.message : 'Failed to run deep research.');
     } finally {
-      setActiveBatchId(null);
       setIsRunning(false);
     }
   };
 
-  const handleOpenBatchOnMap = async (batchId: string) => {
-    setActiveBatchId(batchId);
-    setError(null);
-
-    try {
-      const batch = await getDeepResearchBatch(batchId);
-      if (batch.jobIds.length === 0) {
-        setError('This deep research batch does not have child jobs yet.');
-        return;
-      }
-
-      onShowBatchOnMap(batch.jobIds);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load batch details.');
-    } finally {
-      setActiveBatchId(null);
-    }
-  };
-
   return (
     <div className="flex-1 overflow-y-auto bg-stone-50 p-6 sm:p-8">
       <div className="mx-auto max-w-7xl space-y-8">
+        {topContent}
+
         <header className="space-y-2">
           <h1 className="text-3xl font-bold text-stone-900">Deep Research</h1>
           <p className="max-w-3xl text-stone-600">
@@ -272,101 +232,7 @@ export function DeepResearchView({ onShowBatchOnMap }: DeepResearchViewProps) {
             )}
           </div>
         </section>
-
-        <section className="space-y-5">
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
-            <div>
-              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Deep Research History</p>
-              <h2 className="mt-2 text-2xl font-bold text-stone-900">Previous deep research batches</h2>
-              <p className="mt-2 text-sm text-stone-600">Review completed or failed batch runs and open their bundled map results.</p>
-            </div>
-            <div className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-600 shadow-sm">
-              {batches.length} batches
-            </div>
-          </div>
-
-          {error && <div className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>}
-
-          {isLoadingBatches ? (
-            <div className="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-5 text-sm text-stone-500 shadow-sm">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              Loading deep research batches...
-            </div>
-          ) : batches.length === 0 ? (
-            <div className="rounded-2xl border border-dashed border-stone-300 bg-white p-10 text-center shadow-sm">
-              <p className="text-lg font-semibold text-stone-900">No deep research batches yet.</p>
-              <p className="mt-2 text-sm text-stone-500">Preview a pin on the map and run your first deep research batch.</p>
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
-              {batches.map((batch) => (
-                <div key={batch.id} className="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm">
-                  <div className="flex items-start justify-between gap-4">
-                    <div>
-                      <p className="text-lg font-bold text-stone-900">{batch.businessType}</p>
-                      <p className="mt-1 text-sm text-stone-500">
-                        {batch.basePostalCode ? `${batch.basePostalCode} · ${batch.countryCode ?? 'N/A'}` : 'Base postal area unavailable'}
-                      </p>
-                    </div>
-                    <span className={`rounded-full px-3 py-1 text-xs font-semibold ${statusBadgeClass(batch.status)}`}>
-                      {batch.status}
-                    </span>
-                  </div>
-
-                  <div className="mt-4 grid grid-cols-2 gap-3 rounded-2xl bg-stone-50 p-4 text-sm text-stone-600">
-                    <div>
-                      <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Propagation</p>
-                      <p className="mt-1 text-base font-bold text-stone-900">{batch.propagation}</p>
-                    </div>
-                    <div>
-                      <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Postal Areas</p>
-                      <p className="mt-1 text-base font-bold text-stone-900">{batch.totalPostalAreas}</p>
-                    </div>
-                    <div>
-                      <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Child Jobs</p>
-                      <p className="mt-1 text-base font-bold text-stone-900">{batch.childJobCount}</p>
-                    </div>
-                    <div>
-                      <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Leads</p>
-                      <p className="mt-1 text-base font-bold text-stone-900">{batch.totalResults}</p>
-                    </div>
-                  </div>
-
-                  {batch.keywords && <p className="mt-4 text-sm text-stone-500">Keywords: {batch.keywords}</p>}
-
-                  <div className="mt-4 flex items-center justify-between border-t border-stone-100 pt-4 text-sm text-stone-500">
-                    <span>Created {new Date(batch.createdAt).toLocaleDateString()}</span>
-                    <button
-                      type="button"
-                      onClick={() => void handleOpenBatchOnMap(batch.id)}
-                      disabled={activeBatchId === batch.id}
-                      className="rounded-xl bg-emerald-600 px-4 py-2 font-semibold text-white transition-all hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
-                    >
-                      {activeBatchId === batch.id ? 'Loading...' : 'Show bundle on map'}
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </section>
       </div>
     </div>
   );
 }
-
-function statusBadgeClass(status: DeepResearchBatchSummary['status']) {
-  switch (status) {
-    case 'completed':
-      return 'bg-emerald-100 text-emerald-800';
-    case 'failed':
-      return 'bg-red-100 text-red-700';
-    case 'running':
-      return 'bg-sky-100 text-sky-700';
-    case 'stopped':
-      return 'bg-stone-200 text-stone-700';
-    case 'pending':
-    default:
-      return 'bg-amber-100 text-amber-700';
-  }
-}

src/components/Layout.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Search, LayoutDashboard, Map as MapIcon, LogOut, Briefcase, MapPinned } from 'lucide-react';
+import { Search, LayoutDashboard, Map as MapIcon, LogOut, Briefcase, Files } from 'lucide-react';
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import type { AppUser } from '../../shared/types';
 import { getUserAvatarUrl, getUserDisplayName } from '../lib/auth';
 
-export type AppTab = 'setup' | 'deepResearch' | 'dashboard' | 'map';
+export type AppTab = 'setup' | 'results' | 'dashboard' | 'map';
 
 function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -25,7 +25,7 @@ export function Layout({ user, activeTab, setActiveTab, onLogout, children }: La
 
   const navigation = [
     { id: 'setup', name: 'Research', icon: Search },
-    { id: 'deepResearch', name: 'Deep Research', icon: MapPinned },
+    { id: 'results', name: 'Results', icon: Files },
     { id: 'dashboard', name: 'Dashboard', icon: LayoutDashboard },
     { id: 'map', name: 'Map View', icon: MapIcon },
   ] as const;

src/components/MapView.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Map, AdvancedMarker, InfoWindow, Pin, useMap } from '@vis.gl/react-google-maps';
+import { InfoWindow, Map, Marker, useMap } from '@vis.gl/react-google-maps';
 import { Globe, Loader2, MapPin, Navigation, Phone, Star } from 'lucide-react';
 import { listBusinesses, listBusinessesForJobs } from '../lib/database';
+import { cleanMapOptions } from '../lib/map-styles';
 import type { Business } from '../types';
 import type { AppUser } from '../../shared/types';
 
@@ -127,24 +128,25 @@ export function MapView({ user, jobIds }: MapViewProps) {
       <Map
         defaultCenter={center}
         defaultZoom={12}
-        mapId="DEMO_MAP_ID"
-        {...({ internalUsageAttributionIds: ['gmp_mcp_codeassist_v1_aistudio'] } as Record<string, unknown>)}
         style={{ width: '100%', height: '100%' }}
         gestureHandling="greedy"
+        {...cleanMapOptions}
       >
         {businesses.map((business) =>
           typeof business.latitude === 'number' && typeof business.longitude === 'number' ? (
-            <AdvancedMarker
+            <Marker
               key={business.id}
               position={{ lat: business.latitude, lng: business.longitude }}
               onClick={() => setSelected(business)}
-            >
+              icon={{
-              <Pin
+                path: google.maps.SymbolPath.CIRCLE,
-                background={selected?.id === business.id ? '#059669' : '#10b981'}
+                fillColor: selected?.id === business.id ? '#059669' : '#10b981',
-                glyphColor="#fff"
+                fillOpacity: 1,
-                borderColor={selected?.id === business.id ? '#064e3b' : '#065f46'}
+                strokeColor: selected?.id === business.id ? '#064e3b' : '#065f46',
-              />
+                strokeWeight: 2,
-            </AdvancedMarker>
+                scale: selected?.id === business.id ? 8 : 7,
+              }}
+            />
           ) : null,
         )}
 

src/components/ResearchWorkspace.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { MapPinned, Search } from 'lucide-react';
+import type { AppUser } from '../../shared/types';
+import { DeepResearchView } from './DeepResearchView';
+import { SearchSetup } from './SearchSetup';
+
+type ResearchTab = 'research' | 'deepResearch';
+
+interface ResearchWorkspaceProps {
+  user: AppUser;
+  selectedJobIds: string[];
+  onToggleJobSelection: (jobId: string) => void;
+  onSelectCreatedJob: (jobId: string) => void;
+  onShowSelectedOnMap: () => void;
+  onClearSelection: () => void;
+  onShowBatchOnMap: (jobIds: string[]) => void;
+}
+
+export function ResearchWorkspace({
+  user,
+  selectedJobIds,
+  onToggleJobSelection,
+  onSelectCreatedJob,
+  onShowSelectedOnMap,
+  onClearSelection,
+  onShowBatchOnMap,
+}: ResearchWorkspaceProps) {
+  const [activeTab, setActiveTab] = useState<ResearchTab>('research');
+
+  const tabs = (
+    <div className="sticky top-0 z-20 -mx-2 bg-stone-50/95 px-2 pb-2 pt-1 backdrop-blur-sm">
+      <div className="rounded-3xl border border-stone-200 bg-white p-2 shadow-sm">
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          {[
+            {
+              id: 'research' as const,
+              label: 'Basic',
+              icon: Search,
+            },
+            {
+              id: 'deepResearch' as const,
+              label: 'Deep Research',
+              icon: MapPinned,
+            },
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center justify-center gap-2 rounded-2xl px-4 py-3 text-sm font-semibold transition-all ${
+                activeTab === tab.id
+                  ? 'bg-emerald-50 text-emerald-700 shadow-sm'
+                  : 'text-stone-600 hover:bg-stone-50 hover:text-stone-900'
+              }`}
+            >
+              <tab.icon className="h-4 w-4" />
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  return activeTab === 'research' ? (
+    <SearchSetup
+      user={user}
+      onSelectCreatedJob={onSelectCreatedJob}
+      topContent={tabs}
+    />
+  ) : (
+    <DeepResearchView onShowBatchOnMap={onShowBatchOnMap} topContent={tabs} />
+  );
+}

src/components/ResultsWorkspace.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Files, MapPinned } from 'lucide-react';
+import type { AppUser } from '../../shared/types';
+import { BasicResultsView } from './BasicResultsView';
+import { DeepResearchResultsView } from './DeepResearchResultsView';
+
+type ResultsTab = 'basic' | 'deepResearch';
+
+interface ResultsWorkspaceProps {
+  user: AppUser;
+  selectedJobIds: string[];
+  onToggleJobSelection: (jobId: string) => void;
+  onShowSelectedOnMap: () => void;
+  onClearSelection: () => void;
+  onShowBatchOnMap: (jobIds: string[]) => void;
+}
+
+export function ResultsWorkspace({ user, selectedJobIds, onToggleJobSelection, onShowSelectedOnMap, onClearSelection, onShowBatchOnMap }: ResultsWorkspaceProps) {
+  const [activeTab, setActiveTab] = useState<ResultsTab>('basic');
+
+  return (
+    <div className="flex-1 overflow-y-auto bg-stone-50 p-6 sm:p-8">
+      <div className="mx-auto max-w-7xl space-y-8">
+        <div className="sticky top-0 z-20 -mx-2 bg-stone-50/95 px-2 pb-2 pt-1 backdrop-blur-sm">
+          <div className="rounded-3xl border border-stone-200 bg-white p-2 shadow-sm">
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+              {[
+                { id: 'basic' as const, label: 'Basic', icon: Files },
+                { id: 'deepResearch' as const, label: 'Deep Research', icon: MapPinned },
+              ].map((tab) => (
+                <button
+                  key={tab.id}
+                  type="button"
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`flex items-center justify-center gap-2 rounded-2xl px-4 py-3 text-sm font-semibold transition-all ${
+                    activeTab === tab.id ? 'bg-emerald-50 text-emerald-700 shadow-sm' : 'text-stone-600 hover:bg-stone-50 hover:text-stone-900'
+                  }`}
+                >
+                  <tab.icon className="h-4 w-4" />
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <header className="space-y-2">
+          <h1 className="text-3xl font-bold text-stone-900">Results</h1>
+          <p className="max-w-3xl text-stone-600">Browse previous Basic and Deep Research runs, select items, and send them to the map when needed.</p>
+        </header>
+
+        {activeTab === 'basic' ? (
+          <BasicResultsView
+            user={user}
+            selectedJobIds={selectedJobIds}
+            onToggleJobSelection={onToggleJobSelection}
+            onShowSelectedOnMap={onShowSelectedOnMap}
+            onClearSelection={onClearSelection}
+          />
+        ) : (
+          <DeepResearchResultsView onShowBatchOnMap={onShowBatchOnMap} />
+        )}
+      </div>
+    </div>
+  );
+}

src/components/SearchSetup.tsx

@@ -1,139 +1,59 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
-import {
+import { AlertCircle, LocateFixed, Loader2, MapPin, Play } from 'lucide-react';
-  AlertCircle,
+import { runSearch } from '../lib/database';
-  CalendarDays,
-  Check,
-  CheckCircle2,
-  CircleOff,
-  Clock3,
-  Loader2,
-  MapPin,
-  Play,
-  Search as SearchIcon,
-  SlidersHorizontal,
-} from 'lucide-react';
-import { listSearchJobs, runSearch } from '../lib/database';
-import type { SearchJob, SearchJobStatus } from '../types';
 import type { AppUser } from '../../shared/types';
+import { BasicResearchMap } from './BasicResearchMap';
 
 interface SearchSetupProps {
   user: AppUser;
-  selectedJobIds: string[];
-  onToggleJobSelection: (jobId: string) => void;
   onSelectCreatedJob: (jobId: string) => void;
-  onShowSelectedOnMap: () => void;
+  topContent?: React.ReactNode;
-  onClearSelection: () => void;
 }
 
-type JobStatusFilter = 'all' | SearchJobStatus;
-type SortOption = 'newest' | 'oldest' | 'results';
-
-const statusOptions: Array<{ value: JobStatusFilter; label: string }> = [
-  { value: 'all', label: 'All statuses' },
-  { value: 'pending', label: 'Pending' },
-  { value: 'running', label: 'Running' },
-  { value: 'completed', label: 'Completed' },
-  { value: 'failed', label: 'Failed' },
-  { value: 'stopped', label: 'Stopped' },
-];
-
-const sortOptions: Array<{ value: SortOption; label: string }> = [
-  { value: 'newest', label: 'Newest first' },
-  { value: 'oldest', label: 'Oldest first' },
-  { value: 'results', label: 'Most results' },
-];
-
 export function SearchSetup({
-  user,
+  user: _user,
-  selectedJobIds,
-  onToggleJobSelection,
   onSelectCreatedJob,
-  onShowSelectedOnMap,
+  topContent,
-  onClearSelection,
 }: SearchSetupProps) {
   const [name, setName] = useState('');
-  const [location, setLocation] = useState('');
   const [radius, setRadius] = useState(5);
   const [businessType, setBusinessType] = useState('');
   const [keywords, setKeywords] = useState('');
-  const [searchTerm, setSearchTerm] = useState('');
+  const [pin, setPin] = useState<google.maps.LatLngLiteral | null>(null);
-  const [statusFilter, setStatusFilter] = useState<JobStatusFilter>('all');
+  const [locationError, setLocationError] = useState<string | null>(null);
-  const [sortOrder, setSortOrder] = useState<SortOption>('newest');
+  const [locationAction, setLocationAction] = useState<'geolocate' | null>(null);
   const [isSearching, setIsSearching] = useState(false);
-  const [isLoadingHistory, setIsLoadingHistory] = useState(true);
-  const [jobs, setJobs] = useState<SearchJob[]>([]);
   const [error, setError] = useState<string | null>(null);
-  const selectedJobCount = selectedJobIds.length;
 
-  const refreshJobs = useCallback(async () => {
+  const applyPin = useCallback(async (nextPin: google.maps.LatLngLiteral) => {
-    setIsLoadingHistory(true);
+    setPin(nextPin);
-
+    setLocationError(null);
-    try {
+  }, []);
-      const nextJobs = await listSearchJobs(user.id, 100);
-      setJobs(nextJobs);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load research jobs.');
-    } finally {
-      setIsLoadingHistory(false);
-    }
-  }, [user.id]);
-
-  useEffect(() => {
-    void refreshJobs();
-  }, [refreshJobs]);
-
-  const filteredJobs = useMemo(() => {
-    const normalizedSearch = searchTerm.trim().toLowerCase();
-
-    const nextJobs = jobs.filter((job) => {
-      const matchesStatus = statusFilter === 'all' || job.status === statusFilter;
-
-      if (!matchesStatus) {
-        return false;
-      }
-
-      if (!normalizedSearch) {
-        return true;
-      }
-
-      const haystack = [job.name, job.businessType, job.city, job.address, job.keywords]
-        .filter(Boolean)
-        .join(' ')
-        .toLowerCase();
-
-      return haystack.includes(normalizedSearch);
-    });
-
-    nextJobs.sort((left, right) => {
-      if (sortOrder === 'results') {
-        return right.totalResults - left.totalResults;
-      }
-
-      const leftTime = new Date(left.createdAt).getTime();
-      const rightTime = new Date(right.createdAt).getTime();
-
-      return sortOrder === 'oldest' ? leftTime - rightTime : rightTime - leftTime;
-    });
-
-    return nextJobs;
-  }, [jobs, searchTerm, sortOrder, statusFilter]);
 
   const handleRunSearch = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSearching(true);
     setError(null);
+    setLocationError(null);
 
-    try {
+    if (!pin) {
-      const response = await runSearch({
+      setLocationError('Drop a pin on the map or use your current location before running research.');
+      setIsSearching(false);
+      return;
+    }
+
+      try {
+        const response = await runSearch({
         name: name.trim() || undefined,
-        location: location.trim(),
+        location: `${pin.lat.toFixed(5)}, ${pin.lng.toFixed(5)}`,
         radiusKm: radius,
         businessType: businessType.trim(),
         keywords: keywords.trim() || undefined,
-      });
+        lat: pin.lat,
+        lng: pin.lng,
+        });
 
-      await refreshJobs();
+        onSelectCreatedJob(response.job.id);
-      onSelectCreatedJob(response.job.id);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Research failed.');
     } finally {
@@ -141,53 +61,56 @@ export function SearchSetup({
     }
   };
 
+  const handleUseMyLocation = () => {
+    setLocationAction('geolocate');
+    setLocationError(null);
+
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        try {
+          await applyPin({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude,
+          });
+        } catch (err) {
+          setLocationError(err instanceof Error ? err.message : 'Failed to use your current location.');
+        } finally {
+          setLocationAction(null);
+        }
+      },
+      (geoError) => {
+        setLocationError(geoError.message || 'Location access was denied.');
+        setLocationAction(null);
+      },
+      { enableHighAccuracy: true, timeout: 10000 },
+    );
+  };
+
+  const hasLocationPin = Boolean(pin);
+
   return (
     <div className="flex-1 overflow-y-auto bg-stone-50 p-6 sm:p-8">
       <div className="mx-auto max-w-7xl space-y-8">
+        {topContent}
+
         <header className="space-y-2">
-          <h1 className="text-3xl font-bold text-stone-900">Research</h1>
+          <h1 className="text-3xl font-bold text-stone-900">Basic Research</h1>
           <p className="max-w-3xl text-stone-600">
-            Run new research from the form below, then browse every job in a single grid with filters and quick access to map results.
+            Drop a pin on the map, define the search area, and run standard research before reviewing saved jobs below.
           </p>
         </header>
 
-        <section className="rounded-3xl border border-stone-200 bg-white p-6 shadow-sm sm:p-8">
+        <section className="grid grid-cols-1 items-stretch gap-6 xl:grid-cols-[400px_minmax(0,1fr)]">
-          <div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+          <div className="rounded-3xl border border-stone-200 bg-white p-5 shadow-sm sm:p-7">
-            <div>
+            <form onSubmit={handleRunSearch} className="space-y-5">
-              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Research Form</p>
-              <h2 className="mt-2 text-2xl font-bold text-stone-900">Start a new research run</h2>
-              <p className="mt-2 max-w-2xl text-sm text-stone-600">
-                Each run is processed through the local research API, then saved so you can review it later from the dashboard or map view.
-              </p>
-            </div>
-          </div>
-
-          <form onSubmit={handleRunSearch} className="space-y-6">
-            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-4">
-              <div className="space-y-2 xl:col-span-2">
-                <label className="text-sm font-semibold text-stone-700">Location</label>
-                <div className="relative">
-                  <MapPin className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone-400" />
-                  <input
-                    type="text"
-                    required
-                    placeholder="City, address, or zip"
-                    value={location}
-                    onChange={(e) => setLocation(e.target.value)}
-                    className="w-full rounded-xl border border-stone-200 bg-stone-50 py-3 pl-10 pr-4 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
-                  />
-                </div>
-              </div>
-
               <div className="space-y-2">
-                <label className="text-sm font-semibold text-stone-700">Radius (km)</label>
+                <label className="text-sm font-semibold text-stone-700">Research Name</label>
                 <input
-                  type="number"
+                  type="text"
-                  min="1"
+                  placeholder="Give this research a memorable name"
-                  max="50"
+                  value={name}
-                  value={radius}
+                  onChange={(e) => setName(e.target.value)}
-                  onChange={(e) => setRadius(Number.parseInt(e.target.value, 10) || 1)}
+                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
                 />
               </div>
 
@@ -199,289 +122,102 @@ export function SearchSetup({
                   placeholder="e.g. coffee shop, plumber"
                   value={businessType}
                   onChange={(e) => setBusinessType(e.target.value)}
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
+                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
                 />
               </div>
 
-              <div className="space-y-2 xl:col-span-2">
+              <div className="space-y-2">
                 <label className="text-sm font-semibold text-stone-700">Keywords</label>
                 <input
                   type="text"
                   placeholder="e.g. organic, emergency, family-owned"
                   value={keywords}
                   onChange={(e) => setKeywords(e.target.value)}
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
+                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
                 />
               </div>
 
-              <div className="space-y-2 xl:col-span-2">
+              <div className="space-y-2.5">
-                <label className="text-sm font-semibold text-stone-700">Research Name</label>
+                <label className="text-sm font-semibold text-stone-700">Location Source</label>
+                <button
+                  type="button"
+                  onClick={handleUseMyLocation}
+                  disabled={locationAction !== null}
+                  className="inline-flex items-center gap-2 rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm font-semibold text-stone-700 transition hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  <LocateFixed className="h-4 w-4" />
+                  {locationAction === 'geolocate' ? 'Locating...' : 'Use my location'}
+                </button>
+
+                {locationError && (
+                  <div className="flex items-center gap-3 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">
+                    <AlertCircle className="h-5 w-5 flex-shrink-0" />
+                    <span>{locationError}</span>
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-semibold text-stone-700">Area (km radius)</label>
                 <input
-                  type="text"
+                  type="number"
-                  placeholder="Give this research a memorable name"
+                  min="1"
-                  value={name}
+                  max="50"
-                  onChange={(e) => setName(e.target.value)}
+                  value={radius}
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
+                  onChange={(e) => setRadius(Number.parseInt(e.target.value, 10) || 1)}
+                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
                 />
               </div>
-            </div>
 
-            <div className="rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm text-stone-600">
+              <div className="rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 text-sm text-stone-600">
-              Research runs now go through the local API, so the browser no longer writes leads directly into the database.
+                Drop a pin directly on the map or use your current location. The map circle always reflects the current area value.
-            </div>
-
-            {error && (
-              <div className="flex items-center gap-3 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">
-                <AlertCircle className="h-5 w-5 flex-shrink-0" />
-                <span>{error}</span>
               </div>
-            )}
 
-            <button
+              {hasLocationPin && (
-              type="submit"
+                <div className="rounded-2xl border border-emerald-200 bg-emerald-50/70 p-3.5 text-sm text-emerald-900">
-              disabled={isSearching}
+                  <p className="font-semibold">Active search center</p>
-              className="flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 py-3 font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto sm:px-8"
+                  <p className="mt-1">{pin!.lat.toFixed(5)}, {pin!.lng.toFixed(5)}</p>
-            >
+                </div>
-              {isSearching ? (
-                <>
-                  <Loader2 className="h-5 w-5 animate-spin" />
-                  Running Research...
-                </>
-              ) : (
-                <>
-                  <Play className="h-5 w-5" />
-                  Run Research
-                </>
               )}
-            </button>
-          </form>
-        </section>
 
-        <section className="space-y-5">
+              {error && (
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+                <div className="flex items-center gap-3 rounded-xl border border-red-100 bg-red-50 p-3.5 text-sm text-red-700">
-            <div>
+                  <AlertCircle className="h-5 w-5 flex-shrink-0" />
-              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Research Jobs</p>
+                  <span>{error}</span>
-              <h2 className="mt-2 text-2xl font-bold text-stone-900">All research runs</h2>
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={isSearching}
+                className="flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 py-3 font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto sm:px-8"
+              >
+                {isSearching ? (
+                  <>
+                    <Loader2 className="h-5 w-5 animate-spin" />
+                    Running Research...
+                  </>
+                ) : (
+                  <>
+                    <Play className="h-5 w-5" />
+                    Run Research
+                  </>
+                )}
+              </button>
+            </form>
+          </div>
+
+          <div className="flex h-full flex-col gap-4">
+            <BasicResearchMap pin={pin} radiusKm={radius} onPinChange={(nextPin) => void applyPin(nextPin)} />
+            <div className="rounded-3xl border border-stone-200 bg-white p-5 shadow-sm">
+              <h3 className="text-lg font-bold text-stone-900">Map controls</h3>
               <p className="mt-2 text-sm text-stone-600">
-                Filter the grid to find specific runs, select the ones you want, then send the full selection to the map.
+                Drop a pin directly on the map or use your current location. The circle updates from the Area field and the search runs from the active pin.
               </p>
             </div>
-            <div className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-600 shadow-sm">
-              {filteredJobs.length} shown of {jobs.length}
-            </div>
           </div>
-
-          <div className="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm">
-            <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_220px_220px]">
-              <label className="space-y-2">
-                <span className="flex items-center gap-2 text-sm font-semibold text-stone-700">
-                  <SearchIcon className="h-4 w-4 text-stone-400" />
-                  Search
-                </span>
-                <input
-                  type="text"
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  placeholder="Search by name, type, or location"
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
-                />
-              </label>
-
-              <label className="space-y-2">
-                <span className="flex items-center gap-2 text-sm font-semibold text-stone-700">
-                  <SlidersHorizontal className="h-4 w-4 text-stone-400" />
-                  Status
-                </span>
-                <select
-                  value={statusFilter}
-                  onChange={(e) => setStatusFilter(e.target.value as JobStatusFilter)}
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
-                >
-                  {statusOptions.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </select>
-              </label>
-
-              <label className="space-y-2">
-                <span className="text-sm font-semibold text-stone-700">Sort</span>
-                <select
-                  value={sortOrder}
-                  onChange={(e) => setSortOrder(e.target.value as SortOption)}
-                  className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
-                >
-                  {sortOptions.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </select>
-              </label>
-            </div>
-
-            {selectedJobCount > 0 && (
-              <div className="flex flex-col gap-3 border-t border-stone-100 pt-4 sm:flex-row sm:items-center sm:justify-between">
-                <div>
-                  <p className="text-sm font-semibold text-emerald-900">
-                    {selectedJobCount === 1 ? '1 research job selected' : `${selectedJobCount} research jobs selected`}
-                  </p>
-                  <p className="text-sm text-stone-600">Use the selection action to open all selected jobs together on the map.</p>
-                </div>
-                <div className="flex flex-col gap-2 sm:flex-row">
-                  <button
-                    type="button"
-                    onClick={onShowSelectedOnMap}
-                    className="rounded-xl bg-emerald-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700"
-                  >
-                    Show selected on map ({selectedJobCount})
-                  </button>
-                  <button
-                    type="button"
-                    onClick={onClearSelection}
-                    className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm font-semibold text-stone-700 transition-all hover:bg-stone-50"
-                  >
-                    Clear selection
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-
-          {isLoadingHistory ? (
-            <div className="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-5 text-sm text-stone-500 shadow-sm">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              Loading research jobs...
-            </div>
-          ) : filteredJobs.length === 0 ? (
-            <div className="rounded-2xl border border-dashed border-stone-300 bg-white p-10 text-center shadow-sm">
-              <p className="text-lg font-semibold text-stone-900">No research jobs match the current filters.</p>
-              <p className="mt-2 text-sm text-stone-500">Try adjusting the search term, status filter, or sort order.</p>
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
-              {filteredJobs.map((job) => {
-                const statusMeta = getStatusMeta(job.status);
-                const isSelected = selectedJobIds.includes(job.id);
-
-                return (
-                  <button
-                    type="button"
-                    key={job.id}
-                    aria-pressed={isSelected}
-                    onClick={() => onToggleJobSelection(job.id)}
-                    className={`group flex h-full flex-col rounded-2xl border p-5 text-left shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md ${
-                      isSelected
-                        ? 'border-emerald-400 bg-emerald-50/70 shadow-emerald-100'
-                        : 'border-stone-200 bg-white hover:border-emerald-400'
-                    }`}
-                  >
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="min-w-0">
-                        <p className="truncate text-lg font-bold text-stone-900 group-hover:text-emerald-700">{job.name}</p>
-                        <p className="mt-1 truncate text-sm text-stone-500">{job.businessType}</p>
-                      </div>
-                      <div className="flex flex-col items-end gap-2">
-                        <span className={statusMeta.badgeClass}>
-                          <statusMeta.icon className={statusMeta.icon === Loader2 ? 'h-3.5 w-3.5 animate-spin' : 'h-3.5 w-3.5'} />
-                          {statusMeta.label}
-                        </span>
-                        <span
-                          className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold ${
-                            isSelected ? 'bg-emerald-600 text-white' : 'bg-stone-100 text-stone-500'
-                          }`}
-                        >
-                          {isSelected ? <Check className="h-3.5 w-3.5" /> : <span className="h-2 w-2 rounded-full bg-current opacity-60"></span>}
-                          {isSelected ? 'Selected' : 'Click to select'}
-                        </span>
-                      </div>
-                    </div>
-
-                    <div className="mt-5 space-y-3 text-sm text-stone-600">
-                      <div className="flex items-start gap-2">
-                        <MapPin className="mt-0.5 h-4 w-4 flex-shrink-0 text-stone-400" />
-                        <span className="line-clamp-2">{formatLocation(job)}</span>
-                      </div>
-
-                      <div className="flex items-center gap-2">
-                        <CalendarDays className="h-4 w-4 flex-shrink-0 text-stone-400" />
-                        <span>{new Date(job.createdAt).toLocaleDateString()}</span>
-                      </div>
-
-                      {job.keywords ? <p className="line-clamp-2 text-stone-500">Keywords: {job.keywords}</p> : null}
-                    </div>
-
-                    <div className="mt-5 grid grid-cols-2 gap-3 rounded-2xl bg-stone-50 p-4">
-                      <div>
-                        <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Radius</p>
-                        <p className="mt-1 text-base font-bold text-stone-900">{job.radiusKm} km</p>
-                      </div>
-                      <div>
-                        <p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Results</p>
-                        <p className="mt-1 text-base font-bold text-stone-900">{job.totalResults}</p>
-                      </div>
-                    </div>
-
-                    <div className="mt-4 flex items-center justify-between border-t border-stone-100 pt-4 text-sm font-medium text-stone-500">
-                      <span>{job.totalResults === 1 ? '1 lead found' : `${job.totalResults} leads found`}</span>
-                      <span className={isSelected ? 'text-emerald-700' : 'text-stone-400'}>
-                        {isSelected ? 'Included in selection' : 'Available to select'}
-                      </span>
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          )}
         </section>
       </div>
     </div>
   );
 }
-
-function formatLocation(job: SearchJob) {
-  const primaryLocation = job.address || job.city || 'Location not available';
-  return `${primaryLocation} (${job.radiusKm} km radius)`;
-}
-
-function getStatusMeta(status: SearchJobStatus) {
-  switch (status) {
-    case 'completed':
-      return {
-        label: 'Completed',
-        icon: CheckCircle2,
-        badgeClass:
-          'inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700',
-      };
-    case 'running':
-      return {
-        label: 'Running',
-        icon: Loader2,
-        badgeClass:
-          'inline-flex items-center gap-1 rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700',
-      };
-    case 'failed':
-      return {
-        label: 'Failed',
-        icon: AlertCircle,
-        badgeClass:
-          'inline-flex items-center gap-1 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-semibold text-red-700',
-      };
-    case 'stopped':
-      return {
-        label: 'Stopped',
-        icon: CircleOff,
-        badgeClass:
-          'inline-flex items-center gap-1 rounded-full border border-stone-200 bg-stone-100 px-3 py-1 text-xs font-semibold text-stone-700',
-      };
-    case 'pending':
-    default:
-      return {
-        label: 'Pending',
-        icon: Clock3,
-        badgeClass:
-          'inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700',
-      };
-  }
-}

src/lib/auth.ts

@@ -32,8 +32,9 @@ export async function signInWithLocalAuth(payload: { email: string; password: st
   return response.user;
 }
 
-export async function signOutWithLocalAuth() {
+export async function signOutWithLocalAuth(sessionId?: string) {
   await apiRequest<{ success: boolean }>('/auth/logout', {
     method: 'POST',
+    body: JSON.stringify(sessionId ? { sessionId } : {}),
   });
 }

src/lib/database.ts

@@ -1,6 +1,12 @@
 import { apiRequest } from './api';
 import type { Business, SearchJob } from '../types';
-import type { CreateDeepResearchBatchRequest, DeepResearchBatchDetail, DeepResearchBatchSummary, DeepResearchPreview, DeepResearchPreviewRequest } from '../../shared/types';
+import type {
+  CreateDeepResearchBatchRequest,
+  DeepResearchBatchDetail,
+  DeepResearchBatchSummary,
+  DeepResearchPreview,
+  DeepResearchPreviewRequest,
+} from '../../shared/types';
 
 export type SearchJobResultLink = {
   businessId: string;
@@ -13,6 +19,8 @@ export type RunSearchPayload = {
   radiusKm: number;
   businessType: string;
   keywords?: string;
+  lat?: number;
+  lng?: number;
 };
 
 export type RunSearchResponse = {

src/lib/map-styles.ts

@@ -0,0 +1,48 @@
+type CleanMapOptions = Pick<google.maps.MapOptions, 'clickableIcons' | 'streetViewControl' | 'fullscreenControl' | 'mapTypeControl' | 'styles'>;
+
+export const cleanMapOptions: CleanMapOptions = {
+  clickableIcons: false,
+  streetViewControl: false,
+  fullscreenControl: false,
+  mapTypeControl: false,
+  styles: [
+    {
+      featureType: 'poi',
+      stylers: [{ visibility: 'off' }],
+    },
+    {
+      featureType: 'transit',
+      stylers: [{ visibility: 'off' }],
+    },
+    {
+      featureType: 'landscape',
+      elementType: 'labels',
+      stylers: [{ visibility: 'off' }],
+    },
+    {
+      featureType: 'administrative.neighborhood',
+      elementType: 'labels',
+      stylers: [{ visibility: 'off' }],
+    },
+    {
+      featureType: 'administrative.land_parcel',
+      elementType: 'labels',
+      stylers: [{ visibility: 'off' }],
+    },
+    {
+      featureType: 'road.highway',
+      elementType: 'labels',
+      stylers: [{ visibility: 'off' }],
+    },
+    {
+      featureType: 'road.arterial',
+      elementType: 'labels.icon',
+      stylers: [{ visibility: 'off' }],
+    },
+    {
+      featureType: 'road.local',
+      elementType: 'labels.icon',
+      stylers: [{ visibility: 'off' }],
+    },
+  ],
+};

vite.config.ts

@@ -11,6 +11,7 @@ export default defineConfig({
     },
   },
   server: {
+    allowedHosts: ['project-1.duramente.com'],
     hmr: process.env.DISABLE_HMR !== 'true',
   },
 });