Clean up project root - remove 51 obsolete files

Deleted:
- 26 old markdown summary/documentation files
- 16 debug/test Python scripts (debug_*, test_*, diagnose_*)
- 10 untracked JSON files from api_response_samples
- terms-of-usage.md, pane_not_found.png

Also includes pending web app changes:
- Jobs management UI (JobsView, Sidebar components)
- API routes for job streaming and comparison
- Enhanced ReviewAnalytics and ScraperTest components

Final clean structure:
├── api_server_production.py  (main entry)
├── modules/                  (core Python)
├── web/                      (Next.js frontend)
├── tests/                    (test suite)
├── docs/                     (documentation)
└── examples/                 (usage examples)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

web/components/ScraperTest.tsx

@@ -13,7 +13,7 @@ interface Review {
   review_id: string;
 }
 
-interface JobStatus {
+export interface JobStatus {
   job_id: string;
   status: 'pending' | 'running' | 'completed' | 'failed';
   url: string;
@@ -25,9 +25,19 @@ interface JobStatus {
   total_reviews: number | null;
   scrape_time: number | null;
   error_message: string | null;
+  // Business metadata for tracking and comparison
+  business_name: string | null;
+  business_address: string | null;
+  rating_snapshot: number | null;
+  total_reviews_snapshot: number | null;
 }
 
-export default function ScraperTest() {
+interface ScraperTestProps {
+  onJobsChange?: (jobs: JobStatus[]) => void;
+  onSelectReviews?: (reviews: Review[], businessName: string, jobId: string) => void;
+}
+
+export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTestProps = {}) {
   const [searchQuery, setSearchQuery] = useState('');
   const [searchedQuery, setSearchedQuery] = useState('');
   const [jobs, setJobs] = useState<Map<string, JobStatus>>(new Map());
@@ -44,6 +54,8 @@ export default function ScraperTest() {
   const [businessName, setBusinessName] = useState<string | null>(null);
   const [businessAddress, setBusinessAddress] = useState<string | null>(null);
   const [businessRating, setBusinessRating] = useState<number | null>(null);
+  const [businessImage, setBusinessImage] = useState<string | null>(null);
+  const [businessCategory, setBusinessCategory] = useState<string | null>(null);
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
   const pollingIntervals = useRef<Map<string, NodeJS.Timeout>>(new Map());
   const abortControllerRef = useRef<AbortController | null>(null);
@@ -80,9 +92,18 @@ export default function ScraperTest() {
       setBusinessName(null);
       setBusinessAddress(null);
       setBusinessRating(null);
+      setBusinessImage(null);
+      setBusinessCategory(null);
     }
   }, [searchQuery, searchedQuery]);
 
+  // Notify parent when jobs change
+  useEffect(() => {
+    if (onJobsChange) {
+      onJobsChange(Array.from(jobs.values()));
+    }
+  }, [jobs, onJobsChange]);
+
   // Check for reviews function (called manually when user clicks Validate)
   const checkReviews = async (query: string) => {
     // Abort any previous validation request
@@ -96,6 +117,8 @@ export default function ScraperTest() {
     setBusinessName(null);
     setBusinessAddress(null);
     setBusinessRating(null);
+    setBusinessImage(null);
+    setBusinessCategory(null);
     setError('');
 
     // Create new abort controller with 30 second timeout
@@ -123,6 +146,8 @@ export default function ScraperTest() {
         setBusinessName(data.name);
         setBusinessAddress(data.address);
         setBusinessRating(data.rating);
+        setBusinessImage(data.image_url);
+        setBusinessCategory(data.category);
       } else {
         console.error('Failed to get business info:', data.error);
         // Business not found
@@ -226,7 +251,13 @@ export default function ScraperTest() {
       const response = await fetch('/api/scrape', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ url }),
+        body: JSON.stringify({
+          url,
+          business_name: businessName,
+          business_address: businessAddress,
+          rating_snapshot: businessRating,
+          total_reviews_snapshot: availableReviewCount,
+        }),
       });
 
       const data = await response.json();
@@ -245,10 +276,15 @@ export default function ScraperTest() {
           created_at: new Date().toISOString(),
           started_at: null,
           completed_at: null,
+          updated_at: new Date().toISOString(),
           reviews_count: null,
           total_reviews: null,
           scrape_time: null,
           error_message: null,
+          business_name: businessName,
+          business_address: businessAddress,
+          rating_snapshot: businessRating,
+          total_reviews_snapshot: availableReviewCount,
         });
         return newMap;
       });
@@ -323,6 +359,7 @@ export default function ScraperTest() {
     { name: '🏪 Small (~79)', query: 'R. Fleitas Peluqueros Gran Canaria' },
     { name: '🚗 Medium (~589)', query: 'ClickRent Gran Canaria' },
     { name: '🏥 Large (~2000+)', query: 'Hospital Universitario Doctor Negrín Las Palmas' },
+    { name: '🛒 Alcampo', query: 'Alcampo Hipermarket Las Palmas' },
   ];
 
   return (
@@ -376,13 +413,33 @@ export default function ScraperTest() {
             <button
               onClick={handleSearch}
               disabled={searchQuery.trim().length < 2 || isCheckingReviews}
-              className="px-6 py-3 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
+              className={`px-6 py-3 font-semibold rounded-xl transition-all flex items-center gap-2 ${
+                hasReviews === true && searchQuery.trim() === searchedQuery
+                  ? 'bg-green-600 text-white hover:bg-green-700'
+                  : hasReviews === false && searchQuery.trim() === searchedQuery
+                  ? 'bg-yellow-500 text-white hover:bg-yellow-600'
+                  : 'bg-blue-600 text-white hover:bg-blue-700'
+              } disabled:bg-gray-300 disabled:cursor-not-allowed`}
             >
               {isCheckingReviews ? (
                 <>
                   <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                   Validating...
                 </>
+              ) : hasReviews === true && searchQuery.trim() === searchedQuery ? (
+                <>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                  {availableReviewCount?.toLocaleString()} reviews
+                </>
+              ) : hasReviews === false && searchQuery.trim() === searchedQuery ? (
+                <>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                  No reviews
+                </>
               ) : (
                 <>
                   <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -477,49 +534,84 @@ export default function ScraperTest() {
               {hasReviews ? (
                 // Success - Show Business Card
                 <div className="bg-white border-2 border-green-500 rounded-2xl shadow-lg overflow-hidden mb-4">
-                  {/* Header */}
-                  <div className="bg-gradient-to-r from-green-500 to-emerald-500 px-6 py-4">
-                    <div className="flex items-center gap-2 text-white">
-                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                      </svg>
-                      <span className="font-bold text-lg">Business Found</span>
+                  {/* Business Card Layout */}
+                  <div className="flex">
+                    {/* Business Image */}
+                    {businessImage && (
+                      <div className="w-40 h-40 flex-shrink-0 bg-gray-200">
+                        <img
+                          src={businessImage}
+                          alt={businessName || 'Business'}
+                          className="w-full h-full object-cover"
+                          onError={(e) => {
+                            // Hide image on error
+                            (e.target as HTMLImageElement).style.display = 'none';
+                          }}
+                        />
+                      </div>
+                    )}
+
+                    {/* Business Info */}
+                    <div className="flex-1 p-5">
+                      {/* Category Badge + Verified */}
+                      <div className="flex items-center gap-2 mb-2">
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-green-100 text-green-700 text-xs font-semibold rounded-full">
+                          <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                          </svg>
+                          Verified
+                        </span>
+                        {businessCategory && (
+                          <span className="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs font-medium rounded-full">
+                            {businessCategory}
+                          </span>
+                        )}
+                      </div>
+
+                      {/* Business Name */}
+                      <h3 className="text-xl font-bold text-gray-900 mb-2 leading-tight">{businessName}</h3>
+
+                      {/* Rating + Reviews Row */}
+                      <div className="flex items-center gap-3 mb-2">
+                        {businessRating && (
+                          <div className="flex items-center gap-1">
+                            <span className="text-lg font-bold text-gray-900">{businessRating.toFixed(1)}</span>
+                            <div className="flex items-center">
+                              {[...Array(5)].map((_, i) => (
+                                <svg
+                                  key={i}
+                                  className={`w-4 h-4 ${i < Math.floor(businessRating) ? 'text-yellow-400' : 'text-gray-300'}`}
+                                  fill="currentColor"
+                                  viewBox="0 0 20 20"
+                                >
+                                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                                </svg>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        {availableReviewCount !== null && availableReviewCount > 0 && (
+                          <span className="text-sm text-gray-600 font-medium">
+                            ({availableReviewCount.toLocaleString()} reviews)
+                          </span>
+                        )}
+                      </div>
+
+                      {/* Address */}
+                      {businessAddress && (
+                        <div className="flex items-start gap-1.5 text-gray-500 text-sm">
+                          <svg className="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                          </svg>
+                          <span className="line-clamp-2">{businessAddress}</span>
+                        </div>
+                      )}
                     </div>
                   </div>
 
-                  {/* Business Info */}
-                  <div className="p-6">
-                    {/* Business Name */}
-                    <h3 className="text-2xl font-bold text-gray-900 mb-3">{businessName}</h3>
-
-                    {/* Rating */}
-                    {businessRating && (
-                      <div className="flex items-center gap-1 mb-3">
-                        <span className="text-2xl font-bold text-gray-900">{businessRating.toFixed(1)}</span>
-                        <div className="flex items-center ml-1">
-                          {[...Array(5)].map((_, i) => (
-                            <svg
-                              key={i}
-                              className={`w-5 h-5 ${i < Math.floor(businessRating) ? 'text-yellow-400' : 'text-gray-300'}`}
-                              fill="currentColor"
-                              viewBox="0 0 20 20"
-                            >
-                              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                            </svg>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Address */}
-                    {businessAddress && (
-                      <div className="flex items-start gap-2 text-gray-600 mb-4">
-                        <span className="text-lg">📍</span>
-                        <span className="text-sm">{businessAddress}</span>
-                      </div>
-                    )}
-
-                    {/* Start Scraping Button */}
+                  {/* Start Scraping Button */}
+                  <div className="px-5 pb-5">
                     <form onSubmit={handlePreviewBusiness}>
                       <button
                         type="submit"
@@ -536,7 +628,7 @@ export default function ScraperTest() {
                             <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                             </svg>
-                            Start Scraping Reviews
+                            Scrape {availableReviewCount?.toLocaleString()} Reviews
                           </>
                         )}
                       </button>
@@ -711,7 +803,13 @@ export default function ScraperTest() {
 
                         setReviews(reviewsData.reviews);
                         setActiveJobId(job.job_id);
-                        setShowAnalytics(true);
+
+                        // Call parent callback if provided (for right panel display)
+                        if (onSelectReviews) {
+                          onSelectReviews(reviewsData.reviews, searchedQuery || 'Business', job.job_id);
+                        } else {
+                          setShowAnalytics(true);
+                        }
                       } catch (err) {
                         console.error('Failed to fetch reviews:', err);
                         setError(err instanceof Error ? err.message : 'Failed to load reviews for analysis');

web/components/Sidebar.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+interface SidebarProps {
+  activeView: 'newScrape' | 'jobs' | 'reports';
+  onViewChange: (view: 'newScrape' | 'jobs' | 'reports') => void;
+  jobCount: number;
+}
+
+export default function Sidebar({ activeView, onViewChange, jobCount }: SidebarProps) {
+  const navItems = [
+    {
+      id: 'newScrape' as const,
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+        </svg>
+      ),
+      label: 'New Scrape',
+    },
+    {
+      id: 'jobs' as const,
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+        </svg>
+      ),
+      label: 'Jobs',
+      badge: jobCount > 0 ? jobCount : undefined,
+    },
+    {
+      id: 'reports' as const,
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+        </svg>
+      ),
+      label: 'Reports',
+    },
+  ];
+
+  return (
+    <div className="w-20 bg-gray-900 flex flex-col items-center py-6 gap-2">
+      {navItems.map((item) => (
+        <button
+          key={item.id}
+          onClick={() => onViewChange(item.id)}
+          className={`relative w-14 h-14 rounded-xl flex flex-col items-center justify-center gap-1 transition-all ${
+            activeView === item.id
+              ? 'bg-blue-600 text-white shadow-lg'
+              : 'text-gray-400 hover:bg-gray-800 hover:text-white'
+          }`}
+          title={item.label}
+        >
+          {item.icon}
+          <span className="text-[10px] font-medium">{item.label.split(' ')[0]}</span>
+          {item.badge !== undefined && (
+            <span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
+              {item.badge > 99 ? '99+' : item.badge}
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}