Wave 7: Integrate JobDevTools into job detail page (FINAL)

- Task #18: Complete integration of all JobDevTools components
  - Updated job detail page (/jobs/[id]) with full JobDevTools UI
  - Connected SSE stream for real-time structured logs + metrics
  - Added crash-report and retry API routes for Next.js
  - Added format conversion for old/new log formats
  - Added DevTools links to JobsView modal and actions column
  - Wired up CrashReport retry with auto-fix parameters
  - Integrated SessionPanel for fingerprint display
  - Integrated MetricsDashboard for real-time charts

Job DevTools implementation complete: 18/18 tasks

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

web/app/api/jobs/[jobId]/crash-report/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+/**
+ * GET /api/jobs/[jobId]/crash-report
+ *
+ * Fetches the crash report for a failed or partial job.
+ * Returns detailed crash analysis including pattern identification,
+ * confidence score, suggested fixes, and auto-fix parameters.
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ jobId: string }> }
+) {
+  try {
+    const { jobId } = await params;
+
+    const response = await fetch(`${API_BASE_URL}/jobs/${jobId}/crash-report`, {
+      headers: {
+        'Accept': 'application/json',
+      },
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: data.detail || 'Failed to get crash report' },
+        { status: response.status }
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Crash report API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to get crash report' },
+      { status: 500 }
+    );
+  }
+}

web/app/api/jobs/[jobId]/retry/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+/**
+ * POST /api/jobs/[jobId]/retry
+ *
+ * Retries a failed or partial job, optionally applying auto-fix parameters.
+ *
+ * Query params:
+ * - apply_fix: boolean (default: false) - Whether to apply auto-fix parameters
+ *   based on crash analysis (e.g., reduced batch size for memory issues)
+ *
+ * Returns the new job ID for tracking the retry attempt.
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ jobId: string }> }
+) {
+  try {
+    const { jobId } = await params;
+    const searchParams = request.nextUrl.searchParams;
+    const applyFix = searchParams.get('apply_fix') === 'true';
+
+    const response = await fetch(
+      `${API_BASE_URL}/jobs/${jobId}/retry?apply_fix=${applyFix}`,
+      {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: data.detail || 'Failed to retry job' },
+        { status: response.status }
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Retry job API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to retry job' },
+      { status: 500 }
+    );
+  }
+}

web/app/jobs/[id]/page.tsx

@@ -1,12 +1,20 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { useJobs } from '@/contexts/JobsContext';
 import { JobStatus } from '@/components/ScraperTest';
+import JobDevTools, {
+  StructuredLog,
+  MetricsData,
+  SessionFingerprint as DevToolsSessionFingerprint,
+} from '@/components/JobDevTools';
+import CrashReport, { CrashReportData } from '@/components/JobDevTools/CrashReport';
+import SessionPanel, { SessionFingerprint as DetailedSessionFingerprint } from '@/components/JobDevTools/SessionPanel';
+import MetricsDashboard, { MetricsSample } from '@/components/JobDevTools/MetricsDashboard';
 
-interface LogEntry {
+interface OldLogEntry {
   timestamp: string;
   level: string;
   message: string;
@@ -17,7 +25,7 @@ interface JobLogs {
   job_id: string;
   status: string;
   error_message: string | null;
-  logs: LogEntry[];
+  logs: OldLogEntry[] | StructuredLog[];
   log_count: number;
 }
 
@@ -39,42 +47,412 @@ function extractBusinessName(job: JobStatus): string {
   }
 }
 
+/**
+ * Check if a log entry is in the old format (has 'source' property)
+ * or new structured format (has 'category' property)
+ */
+function isOldLogFormat(log: OldLogEntry | StructuredLog): log is OldLogEntry {
+  return 'source' in log && !('category' in log);
+}
+
+/**
+ * Convert old log format to new StructuredLog format
+ */
+function convertOldToStructured(oldLog: OldLogEntry): StructuredLog {
+  // Map old source to new category
+  const categoryMap: Record<string, StructuredLog['category']> = {
+    browser: 'browser',
+    scraper: 'scraper',
+    network: 'network',
+    system: 'system',
+  };
+
+  // Map old level to new level
+  const levelMap: Record<string, StructuredLog['level']> = {
+    DEBUG: 'DEBUG',
+    INFO: 'INFO',
+    WARNING: 'WARN',
+    WARN: 'WARN',
+    ERROR: 'ERROR',
+    FATAL: 'FATAL',
+  };
+
+  const timestamp = oldLog.timestamp;
+  const timestampMs = new Date(timestamp).getTime();
+
+  return {
+    timestamp,
+    timestamp_ms: timestampMs || Date.now(),
+    level: levelMap[oldLog.level?.toUpperCase()] || 'INFO',
+    category: categoryMap[oldLog.source] || 'system',
+    message: oldLog.message,
+  };
+}
+
+/**
+ * Convert array of logs to structured format if needed
+ */
+function normalizeLogsTOStructured(logs: (OldLogEntry | StructuredLog)[]): StructuredLog[] {
+  return logs.map((log) => {
+    if (isOldLogFormat(log)) {
+      return convertOldToStructured(log);
+    }
+    return log as StructuredLog;
+  });
+}
+
 export default function JobDetailPage() {
   const params = useParams();
   const router = useRouter();
   const { jobs, refreshJobs } = useJobs();
   const [job, setJob] = useState<JobStatus | null>(null);
-  const [logs, setLogs] = useState<JobLogs | null>(null);
+  const [structuredLogs, setStructuredLogs] = useState<StructuredLog[]>([]);
+  const [metricsData, setMetricsData] = useState<MetricsData | undefined>(undefined);
+  const [metricsHistory, setMetricsHistory] = useState<MetricsSample[]>([]);
+  const [crashReport, setCrashReport] = useState<CrashReportData | null>(null);
+  const [sessionFingerprint, setSessionFingerprint] = useState<DetailedSessionFingerprint | undefined>(undefined);
+  const [isStreaming, setIsStreaming] = useState(false);
   const [isLoadingLogs, setIsLoadingLogs] = useState(false);
+  const [isLoadingCrashReport, setIsLoadingCrashReport] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [retryFeedback, setRetryFeedback] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
 
   const jobId = params.id as string;
+  const eventSourceRef = useRef<EventSource | null>(null);
 
   // Find job from context or fetch it
   useEffect(() => {
-    const foundJob = jobs.find(j => j.job_id === jobId);
+    const foundJob = jobs.find((j) => j.job_id === jobId);
     if (foundJob) {
       setJob(foundJob);
     } else {
       // Fetch job directly if not in context
       fetch(`/api/jobs/${jobId}`)
-        .then(res => res.json())
+        .then((res) => res.json())
-        .then(data => setJob(data))
+        .then((data) => setJob(data))
         .catch(console.error);
     }
   }, [jobId, jobs]);
 
-  // Fetch logs
+  // Fetch initial logs when job is loaded
   useEffect(() => {
     if (!jobId) return;
+
     setIsLoadingLogs(true);
     fetch(`/api/jobs/${jobId}/logs`)
-      .then(res => res.json())
+      .then((res) => res.json())
-      .then(data => setLogs(data))
+      .then((data: JobLogs) => {
+        if (data.logs && data.logs.length > 0) {
+          const normalized = normalizeLogsTOStructured(data.logs);
+          setStructuredLogs(normalized);
+        }
+      })
       .catch(console.error)
       .finally(() => setIsLoadingLogs(false));
   }, [jobId]);
 
+  // Connect to SSE stream for running jobs
+  useEffect(() => {
+    if (!job || job.status !== 'running') {
+      // Close any existing connection for non-running jobs
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+        setIsStreaming(false);
+      }
+      return;
+    }
+
+    // Create SSE connection
+    const eventSource = new EventSource(`/api/jobs/${jobId}/stream`);
+    eventSourceRef.current = eventSource;
+
+    eventSource.onopen = () => {
+      console.log('SSE connected for job:', jobId);
+      setIsStreaming(true);
+    };
+
+    eventSource.onerror = (err) => {
+      console.error('SSE error:', err);
+      setIsStreaming(false);
+      // Try to reconnect after a delay
+      setTimeout(() => {
+        if (eventSourceRef.current === eventSource) {
+          eventSource.close();
+          // Will reconnect on next render cycle if job is still running
+        }
+      }, 3000);
+    };
+
+    // Handle structured log events
+    eventSource.addEventListener('log', (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        // Handle {"type": "log", "data": {...}} format
+        const logData = data.data || data;
+
+        const newLog: StructuredLog = {
+          timestamp: logData.timestamp || new Date().toISOString(),
+          timestamp_ms: logData.timestamp_ms || Date.now(),
+          level: logData.level || 'INFO',
+          category: logData.category || 'system',
+          message: logData.message || '',
+          metrics: logData.metrics,
+          network: logData.network,
+        };
+
+        setStructuredLogs((prev) => [...prev, newLog]);
+      } catch (err) {
+        console.error('Failed to parse log event:', err);
+      }
+    });
+
+    // Handle metrics events
+    eventSource.addEventListener('metrics', (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        // Handle {"type": "metrics", "data": {...}} format
+        const metricsPayload = data.data || data;
+
+        setMetricsData({
+          cpu_percent: metricsPayload.cpu_percent,
+          memory_mb: metricsPayload.memory_mb,
+          duration_ms: metricsPayload.duration_ms,
+          requests_made: metricsPayload.requests_made,
+          reviews_scraped: metricsPayload.reviews_extracted || metricsPayload.reviews_scraped,
+        });
+
+        // Add to metrics history for charts
+        const sample: MetricsSample = {
+          timestamp_ms: metricsPayload.timestamp_ms || Date.now(),
+          reviews_extracted: metricsPayload.reviews_extracted || 0,
+          scroll_count: metricsPayload.scroll_count || 0,
+          memory_mb: metricsPayload.memory_mb || 0,
+          extraction_rate: metricsPayload.extraction_rate || 0,
+        };
+
+        setMetricsHistory((prev) => [...prev, sample]);
+      } catch (err) {
+        console.error('Failed to parse metrics event:', err);
+      }
+    });
+
+    // Handle job progress events (from existing SSE format)
+    eventSource.addEventListener('job_progress', (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        setJob((prev) =>
+          prev
+            ? {
+                ...prev,
+                reviews_count: data.reviews_count,
+                total_reviews: data.total_reviews,
+                scrape_time: data.scrape_time,
+              }
+            : prev
+        );
+      } catch (err) {
+        console.error('Failed to parse job_progress event:', err);
+      }
+    });
+
+    // Handle job completed
+    eventSource.addEventListener('job_completed', (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        setJob((prev) =>
+          prev
+            ? {
+                ...prev,
+                status: 'completed',
+                reviews_count: data.reviews_count,
+                total_reviews: data.total_reviews,
+                scrape_time: data.scrape_time,
+              }
+            : prev
+        );
+        eventSource.close();
+        setIsStreaming(false);
+        refreshJobs();
+      } catch (err) {
+        console.error('Failed to parse job_completed event:', err);
+      }
+    });
+
+    // Handle job failed
+    eventSource.addEventListener('job_failed', (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        setJob((prev) =>
+          prev
+            ? {
+                ...prev,
+                status: 'failed',
+                error_message: data.error || data.error_message,
+              }
+            : prev
+        );
+        eventSource.close();
+        setIsStreaming(false);
+        refreshJobs();
+        // Fetch crash report when job fails
+        fetchCrashReport();
+      } catch (err) {
+        console.error('Failed to parse job_failed event:', err);
+      }
+    });
+
+    // Handle job partial
+    eventSource.addEventListener('job_partial', (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        setJob((prev) =>
+          prev
+            ? {
+                ...prev,
+                status: 'partial',
+                reviews_count: data.reviews_count,
+                error_message: data.error || data.error_message,
+              }
+            : prev
+        );
+        eventSource.close();
+        setIsStreaming(false);
+        refreshJobs();
+        // Fetch crash report for partial jobs too
+        fetchCrashReport();
+      } catch (err) {
+        console.error('Failed to parse job_partial event:', err);
+      }
+    });
+
+    // Handle initial state (all current logs)
+    eventSource.addEventListener('initial_state', (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.logs && data.logs.length > 0) {
+          const normalized = normalizeLogsTOStructured(data.logs);
+          setStructuredLogs(normalized);
+        }
+      } catch (err) {
+        console.error('Failed to parse initial_state event:', err);
+      }
+    });
+
+    // Handle generic message events
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+
+        // Check for type field to route to correct handler
+        if (data.type === 'log') {
+          const logData = data.data || data;
+          const newLog: StructuredLog = {
+            timestamp: logData.timestamp || new Date().toISOString(),
+            timestamp_ms: logData.timestamp_ms || Date.now(),
+            level: logData.level || 'INFO',
+            category: logData.category || 'system',
+            message: logData.message || '',
+            metrics: logData.metrics,
+            network: logData.network,
+          };
+          setStructuredLogs((prev) => [...prev, newLog]);
+        } else if (data.type === 'metrics') {
+          const metricsPayload = data.data || data;
+          setMetricsData({
+            cpu_percent: metricsPayload.cpu_percent,
+            memory_mb: metricsPayload.memory_mb,
+            duration_ms: metricsPayload.duration_ms,
+            requests_made: metricsPayload.requests_made,
+            reviews_scraped: metricsPayload.reviews_extracted || metricsPayload.reviews_scraped,
+          });
+        }
+      } catch {
+        // Ignore non-JSON messages
+      }
+    };
+
+    return () => {
+      eventSource.close();
+      eventSourceRef.current = null;
+      setIsStreaming(false);
+    };
+  }, [job?.status, jobId, refreshJobs]);
+
+  // Fetch crash report when job status is failed or partial
+  const fetchCrashReport = useCallback(async () => {
+    if (!jobId) return;
+
+    setIsLoadingCrashReport(true);
+    try {
+      const response = await fetch(`/api/jobs/${jobId}/crash-report`);
+      if (response.ok) {
+        const data = await response.json();
+        setCrashReport(data);
+      }
+    } catch (err) {
+      console.error('Failed to fetch crash report:', err);
+    } finally {
+      setIsLoadingCrashReport(false);
+    }
+  }, [jobId]);
+
+  // Fetch crash report if job is failed or partial on load
+  useEffect(() => {
+    if (job && (job.status === 'failed' || job.status === 'partial')) {
+      fetchCrashReport();
+    }
+  }, [job?.status, fetchCrashReport]);
+
+  // Extract session fingerprint from job metadata
+  useEffect(() => {
+    if (!job) return;
+
+    // Try to get session fingerprint from job metadata
+    fetch(`/api/jobs/${jobId}`)
+      .then((res) => res.json())
+      .then((fullJob) => {
+        if (fullJob.metadata) {
+          const metadata =
+            typeof fullJob.metadata === 'string'
+              ? JSON.parse(fullJob.metadata)
+              : fullJob.metadata;
+
+          if (metadata.session_fingerprint) {
+            setSessionFingerprint(metadata.session_fingerprint);
+          } else if (metadata.browser_fingerprint) {
+            // Convert browser fingerprint to session fingerprint format
+            const bf = metadata.browser_fingerprint;
+            setSessionFingerprint({
+              user_agent: bf.userAgent || '',
+              platform: bf.platform || '',
+              language: bf.language || '',
+              languages: bf.languages || [bf.language || ''],
+              timezone: bf.timezone || '',
+              screen: {
+                width: bf.viewport?.width || 1920,
+                height: bf.viewport?.height || 1080,
+                colorDepth: 24,
+              },
+              viewport: bf.viewport || { width: 1920, height: 1080 },
+              webgl_vendor: '',
+              webgl_renderer: '',
+              canvas_fingerprint: '',
+              hardware_concurrency: 4,
+              device_memory: 8,
+              bot_detection_tests: {
+                webdriver_hidden: true,
+                chrome_runtime: true,
+                permissions_query: true,
+              },
+              captured_at: new Date().toISOString(),
+            });
+          }
+        }
+      })
+      .catch(console.error);
+  }, [job, jobId]);
+
   const handleDelete = async () => {
     if (!confirm('Are you sure you want to delete this job?')) return;
     setIsDeleting(true);
@@ -89,6 +467,24 @@ export default function JobDetailPage() {
     }
   };
 
+  const handleRetry = useCallback(
+    (applyFix: boolean) => {
+      setRetryFeedback({
+        type: 'success',
+        message: applyFix
+          ? 'Retrying job with auto-fix applied...'
+          : 'Retrying job without modifications...',
+      });
+
+      // Refresh jobs to pick up the new job
+      setTimeout(() => {
+        refreshJobs();
+        setRetryFeedback(null);
+      }, 2000);
+    },
+    [refreshJobs]
+  );
+
   if (!job) {
     return (
       <div className="h-full flex items-center justify-center">
@@ -99,12 +495,15 @@ export default function JobDetailPage() {
 
   const businessName = extractBusinessName(job);
   const canViewAnalytics = job.reviews_count && job.reviews_count > 0;
+  const showCrashReport = (job.status === 'failed' || job.status === 'partial') && crashReport;
 
   return (
     <div className="h-full overflow-y-auto p-6">
       {/* Breadcrumb */}
       <div className="mb-4 flex items-center gap-2 text-sm text-gray-500">
-        <Link href="/jobs" className="hover:text-blue-600">Jobs</Link>
+        <Link href="/jobs" className="hover:text-blue-600">
+          Jobs
+        </Link>
         <span>/</span>
         <span className="text-gray-900 font-medium">{jobId.slice(0, 8)}...</span>
       </div>
@@ -118,13 +517,19 @@ export default function JobDetailPage() {
               <p className="text-gray-500 text-sm">{job.business_address}</p>
             )}
           </div>
-          <span className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold ${
+          <span
-            job.status === 'completed' ? 'bg-green-100 text-green-800' :
+            className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold ${
-            job.status === 'partial' ? 'bg-orange-100 text-orange-800' :
+              job.status === 'completed'
-            job.status === 'running' ? 'bg-blue-100 text-blue-800' :
+                ? 'bg-green-100 text-green-800'
-            job.status === 'failed' ? 'bg-red-100 text-red-800' :
+                : job.status === 'partial'
-            'bg-gray-100 text-gray-800'
+                ? 'bg-orange-100 text-orange-800'
-          }`}>
+                : job.status === 'running'
+                ? 'bg-blue-100 text-blue-800'
+                : job.status === 'failed'
+                ? 'bg-red-100 text-red-800'
+                : 'bg-gray-100 text-gray-800'
+            }`}
+          >
             {job.status === 'running' && (
               <div className="w-2 h-2 border border-current border-t-transparent rounded-full animate-spin" />
             )}
@@ -136,13 +541,17 @@ export default function JobDetailPage() {
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
           {job.reviews_count !== null && (
             <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-              <div className="text-2xl font-bold text-blue-800">{job.reviews_count.toLocaleString()}</div>
+              <div className="text-2xl font-bold text-blue-800">
+                {job.reviews_count.toLocaleString()}
+              </div>
               <div className="text-xs font-medium text-blue-600">Reviews</div>
             </div>
           )}
           {job.scrape_time !== null && (
             <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
-              <div className="text-2xl font-bold text-green-800">{formatDuration(job.scrape_time)}</div>
+              <div className="text-2xl font-bold text-green-800">
+                {formatDuration(job.scrape_time)}
+              </div>
               <div className="text-xs font-medium text-green-600">Duration</div>
             </div>
           )}
@@ -175,8 +584,18 @@ export default function JobDetailPage() {
               href={`/analytics/${jobId}`}
               className="flex-1 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-semibold transition-colors flex items-center justify-center gap-2"
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg
-                <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" />
+                className="w-5 h-5"
+                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>
               View Analytics
             </Link>
@@ -187,8 +606,18 @@ export default function JobDetailPage() {
             rel="noopener noreferrer"
             className="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-semibold transition-colors flex items-center justify-center gap-2"
           >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              className="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+              />
             </svg>
             Open in Maps
           </a>
@@ -200,20 +629,38 @@ export default function JobDetailPage() {
             {isDeleting ? (
               <div className="w-5 h-5 border-2 border-red-500 border-t-transparent rounded-full animate-spin" />
             ) : (
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                className="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                />
               </svg>
             )}
             Delete
           </button>
         </div>
 
-        {/* Error Message */}
+        {/* Error Message (legacy - shown when no crash report) */}
-        {job.error_message && (
+        {job.error_message && !showCrashReport && (
           <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
             <div className="flex items-start gap-2">
-              <svg className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <svg
-                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                  clipRule="evenodd"
+                />
               </svg>
               <div>
                 <p className="font-semibold text-red-800">Error</p>
@@ -222,67 +669,116 @@ export default function JobDetailPage() {
             </div>
           </div>
         )}
-      </div>
 
-      {/* Logs Section */}
+        {/* Retry Feedback */}
-      <div className="bg-white border-2 border-gray-200 rounded-xl overflow-hidden">
+        {retryFeedback && (
-        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-          <h2 className="text-lg font-bold text-gray-900">Logs</h2>
-          {logs && (
-            <span className="text-sm text-gray-500">{logs.log_count} entries</span>
-          )}
-        </div>
-
-        <div className="max-h-[500px] overflow-y-auto p-4 bg-gray-900">
-          {isLoadingLogs ? (
-            <div className="flex items-center justify-center py-8">
-              <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
-            </div>
-          ) : logs && logs.logs.length > 0 ? (
-            <div className="space-y-1 font-mono text-xs">
-              {[...logs.logs]
-                .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
-                .map((log, idx) => (
           <div
-                    key={idx}
+            className={`mt-4 p-4 rounded-lg ${
-                    className={`px-2 py-1 rounded ${
+              retryFeedback.type === 'success'
-                      log.level === 'ERROR' ? 'bg-red-900/30 text-red-300' :
+                ? 'bg-green-50 border border-green-200 text-green-800'
-                      log.level === 'WARNING' ? 'bg-yellow-900/30 text-yellow-300' :
+                : 'bg-red-50 border border-red-200 text-red-800'
-                      log.level === 'INFO' ? 'text-green-300' :
-                      'text-gray-400'
             }`}
           >
-                    <span className="text-gray-500">
+            <div className="flex items-center gap-2">
-                      {new Date(log.timestamp).toLocaleTimeString()}
+              {retryFeedback.type === 'success' ? (
-                    </span>
+                <svg className="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
-                    {' '}
+                  <path
-                    <span className={`font-bold ${
+                    fillRule="evenodd"
-                      log.level === 'ERROR' ? 'text-red-400' :
+                    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"
-                      log.level === 'WARNING' ? 'text-yellow-400' :
+                    clipRule="evenodd"
-                      log.level === 'INFO' ? 'text-blue-400' :
+                  />
-                      'text-gray-500'
+                </svg>
-                    }`}>
-                      [{log.level}]
-                    </span>
-                    {' '}
-                    <span className={`${
-                      log.source === 'browser' ? 'text-purple-400' : 'text-green-400'
-                    }`}>
-                      [{log.source}]
-                    </span>
-                    {' '}
-                    <span>{log.message}</span>
-                  </div>
-                ))}
-            </div>
               ) : (
-            <div className="text-center text-gray-500 py-8">
+                <svg className="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
-              <p className="font-medium">No logs available</p>
+                  <path
-              <p className="text-sm">Logs are recorded during scraping</p>
+                    fillRule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              )}
+              <span className="font-medium">{retryFeedback.message}</span>
+            </div>
           </div>
         )}
       </div>
+
+      {/* Crash Report Section (for failed/partial jobs) */}
+      {showCrashReport && (
+        <div className="mb-6">
+          <CrashReport
+            jobId={jobId}
+            crashReport={crashReport}
+            onRetry={handleRetry}
+          />
         </div>
+      )}
+
+      {/* Metrics Dashboard (for running jobs) */}
+      {job.status === 'running' && metricsHistory.length > 0 && (
+        <div className="bg-gray-900 rounded-xl border-2 border-gray-700 p-6 mb-6">
+          <MetricsDashboard
+            metricsHistory={metricsHistory}
+            currentMetrics={metricsHistory[metricsHistory.length - 1]}
+            isStreaming={isStreaming}
+          />
+        </div>
+      )}
+
+      {/* Session Panel (if fingerprint available) */}
+      {sessionFingerprint && (
+        <div className="mb-6">
+          <SessionPanel fingerprint={sessionFingerprint} />
+        </div>
+      )}
+
+      {/* Job DevTools - Main Log Viewer */}
+      <div className="mb-6">
+        {isLoadingLogs ? (
+          <div className="bg-gray-900 rounded-xl border-2 border-gray-700 p-8 flex items-center justify-center">
+            <div className="text-center">
+              <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-3" />
+              <p className="text-gray-400">Loading logs...</p>
+            </div>
+          </div>
+        ) : (
+          <JobDevTools
+            logs={structuredLogs}
+            metrics={metricsData}
+            crashReport={
+              crashReport
+                ? {
+                    error_type: crashReport.crash_type,
+                    error_message: crashReport.error_message,
+                    stack_trace: crashReport.analysis?.description,
+                    timestamp: crashReport.created_at,
+                    context: crashReport.analysis?.auto_fix_params,
+                  }
+                : undefined
+            }
+            sessionFingerprint={
+              sessionFingerprint
+                ? {
+                    session_id: jobId,
+                    browser_version: sessionFingerprint.user_agent,
+                    proxy_used: false,
+                    locale: sessionFingerprint.language,
+                    viewport: sessionFingerprint.viewport,
+                  }
+                : undefined
+            }
+            isStreaming={isStreaming}
+          />
+        )}
+      </div>
+
+      {/* Loading Crash Report Indicator */}
+      {isLoadingCrashReport && (
+        <div className="fixed bottom-4 right-4 bg-gray-900 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2">
+          <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+          Loading crash report...
+        </div>
+      )}
     </div>
   );
 }

web/components/JobsView.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import Link from 'next/link';
 import {
   useReactTable,
   getCoreRowModel,
@@ -822,6 +823,18 @@ export default function JobsView({ jobs, onSelectJob, isLoadingJob, onRefresh }:
                 );
               })()}
 
+              {/* View DevTools */}
+              <Link
+                href={`/jobs/${job.job_id}`}
+                className="p-1.5 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors"
+                title="View DevTools"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                </svg>
+              </Link>
+
               {/* View Logs */}
               {(() => {
                 const isStuck = job.status === 'running' &&
@@ -1491,6 +1504,16 @@ export default function JobsView({ jobs, onSelectJob, isLoadingJob, onRefresh }:
                   View Reviews
                 </button>
               )}
+              <Link
+                href={`/jobs/${monitoredJob.job_id}`}
+                onClick={() => stopMonitoring()}
+                className="py-2.5 px-6 bg-purple-600 text-white rounded-lg font-semibold hover:bg-purple-700 transition-colors flex items-center gap-2"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                </svg>
+                DevTools
+              </Link>
               <button
                 onClick={() => stopMonitoring()}
                 className={`${monitoredJob.status === 'completed' && monitoredJob.reviews_count ? '' : 'flex-1'} py-2.5 px-6 bg-gray-900 text-white rounded-lg font-semibold hover:bg-gray-800 transition-colors`}