fix: restore full content and wrap in Suspense for static build

frontend/src/app/processing/page.tsx

@@ -0,0 +1,221 @@
+'use client'
+
+import { useEffect, useState, useRef, Suspense } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
+
+const VOC_COLORS: Record<string, string> = {
+  aeroplane:'#87CEEB', bicycle:'#FFA500', bird:'#FFD700', boat:'#00BFFF',
+  bottle:'#9400D3', bus:'#FF1493', car:'#DC143C', cat:'#FF8C00',
+  chair:'#8B4513', cow:'#D4A017', diningtable:'#D2691E', dog:'#BA55D3',
+  horse:'#FF69B4', motorbike:'#22c55e', person:'#FF4500',
+  'potted plant':'#228B22', sheep:'#B8A40A', sofa:'#00CED1',
+  train:'#3b82f6', 'tv/monitor':'#0D9488',
+}
+
+const STEPS = ['Queued', 'Inferring Frames', 'Encoding H.264', 'Complete']
+
+function ProcessingContent() {
+  const router       = useRouter()
+  const searchParams = useSearchParams()
+  const jobId        = searchParams?.get('id') ?? ''
+  const cardRef      = useRef<HTMLDivElement>(null)
+
+  const [pct,      setPct]      = useState(0)
+  const [status,   setStatus]   = useState('queued')
+  const [detected, setDetected] = useState<string[]>([])
+  const [error,    setError]    = useState<string | null>(null)
+  const [elapsed,  setElapsed]  = useState(0)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  useEffect(() => {
+    setTimeout(() => cardRef.current?.classList.add('scroll-visible'), 50)
+  }, [])
+
+  useEffect(() => {
+    if (!jobId) return
+    const start = Date.now()
+    timerRef.current = setInterval(() => setElapsed(Math.floor((Date.now()-start)/1000)), 1000)
+
+    const wsUrl = `${API_BASE.replace('https','wss').replace('http','ws')}/ws/${jobId}`
+    const ws = new WebSocket(wsUrl)
+
+    ws.onmessage = (evt) => {
+      const data = JSON.parse(evt.data)
+      setStatus(data.status)
+      if (data.pct !== undefined) setPct(data.pct)
+      if (data.detected) setDetected(data.detected)
+      if (data.status === 'done') {
+        setPct(100); clearInterval(timerRef.current!)
+        setTimeout(() => router.push(`/result?id=${jobId}`), 1200)
+      }
+      if (data.status === 'error') { setError(data.error ?? 'Failed'); clearInterval(timerRef.current!) }
+    }
+    ws.onerror = () => pollFallback()
+    return () => { ws.close(); clearInterval(timerRef.current!) }
+  }, [jobId, router])
+
+  const pollFallback = () => {
+    const iv = setInterval(async () => {
+      try {
+        const d = await fetch(`${API_BASE}/api/status/${jobId}`).then(r=>r.json())
+        setStatus(d.status)
+        if (d.pct !== undefined) setPct(d.pct)
+        if (d.detected) setDetected(d.detected)
+        if (d.status === 'done') {
+          clearInterval(iv); clearInterval(timerRef.current!)
+          setTimeout(() => router.push(`/result?id=${jobId}`), 1200)
+        }
+        if (d.status === 'error') { setError(d.error); clearInterval(iv) }
+      } catch {}
+    }, 1200)
+  }
+
+  const fmtTime = (s: number) => `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`
+  const currentStep = status==='queued' ? 0 : status==='processing' ? 1 : status==='done' ? 3 : 2
+
+  return (
+    <div className="max-w-xl mx-auto px-5 py-20">
+      <div
+        ref={cardRef}
+        className="scroll-hidden card p-8 border border-slate-200 shadow-sm"
+        style={{ borderRadius: '20px' }}
+      >
+        <div className="text-center mb-8">
+          <div className={`w-20 h-20 rounded-2xl mx-auto mb-5 flex items-center justify-center
+            ${status==='done'  ? 'bg-green-50 border border-green-200'
+            : status==='error' ? 'bg-red-50 border border-red-200'
+            : 'bg-orange-50 border border-orange-200'}`}>
+            {status==='done' ? (
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+            ) : status==='error' ? (
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2">
+                <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
+              </svg>
+            ) : (
+              <svg className="animate-spin" width="30" height="30" viewBox="0 0 24 24" fill="none" strokeWidth="2">
+                <defs>
+                  <linearGradient id="spin-g" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stopColor="#f97316"/>
+                    <stop offset="100%" stopColor="#fbbf24"/>
+                  </linearGradient>
+                </defs>
+                <path d="M21 12a9 9 0 1 1-6.219-8.56" stroke="url(#spin-g)"/>
+              </svg>
+            )}
+          </div>
+
+          <h1 className="text-xl font-bold text-slate-900 mb-1">
+            {status==='queued'     ? 'In Queue'
+           : status==='processing' ? 'Segmenting…'
+           : status==='done'       ? 'Complete!'
+           : status==='error'      ? 'Failed' : status}
+          </h1>
+          <p className="text-sm text-slate-400">
+            Job <code className="text-orange-500 font-mono text-xs">{jobId?.slice(0,8)}…</code>
+            {status==='processing' && <span className="ml-2 text-slate-400">· {fmtTime(elapsed)}</span>}
+          </p>
+        </div>
+
+        {status !== 'error' && (
+          <div className="mb-7">
+            <div className="flex justify-between text-xs font-medium text-slate-500 mb-2">
+              <span>Progress</span>
+              <span className={pct>=100 ? 'text-green-600' : 'text-orange-500'}>{pct.toFixed(1)}%</span>
+            </div>
+            <div className="progress-track h-2">
+              <div className="progress-fill h-full" style={{ width:`${pct}%` }} />
+            </div>
+          </div>
+        )}
+
+        {status !== 'error' && (
+          <div className="mb-7">
+            <div className="flex items-center gap-0">
+              {STEPS.map((s, i) => (
+                <div key={i} className="flex items-center flex-1">
+                  <div className="flex flex-col items-center gap-1">
+                    <div className={`step-dot ${i < currentStep ? 'done' : i === currentStep ? 'active' : 'pending'}`}>
+                      {i < currentStep
+                        ? <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#15803d" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
+                        : i+1}
+                    </div>
+                    <p className={`text-[9px] font-semibold uppercase tracking-wider whitespace-nowrap
+                      ${i===currentStep ? 'text-orange-500' : i<currentStep ? 'text-green-600' : 'text-slate-300'}`}>
+                      {s}
+                    </p>
+                  </div>
+                  {i < STEPS.length-1 && (
+                    <div className={`h-px flex-1 mx-1 mb-4 ${i < currentStep ? 'bg-green-300' : 'bg-slate-200'}`} />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="p-4 rounded-xl bg-red-50 border border-red-200 text-red-600 text-sm mb-6">
+            <strong>Error:</strong> {error}
+          </div>
+        )}
+
+        {status === 'processing' && (
+          <div className="grid grid-cols-3 gap-3 mb-7">
+            {[
+              { label:'Progress', val:`${pct.toFixed(0)}%`, color:'text-orange-500' },
+              { label:'Objects',  val:`${detected.length}`, color:'text-slate-800'  },
+              { label:'Elapsed',  val:fmtTime(elapsed),     color:'text-slate-800'  },
+            ].map(s => (
+              <div key={s.label} className="text-center p-4 rounded-xl bg-slate-50 border border-slate-100">
+                <p className="text-[10px] text-slate-400 uppercase tracking-widest mb-1">{s.label}</p>
+                <p className={`text-lg font-bold ${s.color}`} style={{fontVariantNumeric:'tabular-nums'}}>{s.val}</p>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {status === 'queued' && (
+          <div className="flex items-center gap-3 p-4 rounded-xl bg-orange-50 border border-orange-100 mb-6">
+            <div className="flex gap-1.5">
+              <span className="bounce-dot bg-orange-400" />
+              <span className="bounce-dot bg-amber-400"  />
+              <span className="bounce-dot bg-yellow-400" />
+            </div>
+            <p className="text-sm text-orange-700">Waiting for a worker to pick up this job…</p>
+          </div>
+        )}
+
+        {detected.length > 0 && (
+          <div className="pt-4 border-t border-slate-100">
+            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">
+              Detected Objects · {detected.length}
+            </p>
+            <div className="flex flex-wrap gap-1.5">
+              {detected.map(cls => (
+                <span key={cls} className="class-pill">
+                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: VOC_COLORS[cls]??'#888' }} />
+                  {cls}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <a href="/" className="mt-8 flex items-center justify-center gap-1.5 text-xs text-slate-400 hover:text-slate-600 transition-colors">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>
+          Back to upload
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default function ProcessingPage() {
+  return (
+    <Suspense fallback={<div className="p-20 text-center text-slate-400">Loading process…</div>}>
+      <ProcessingContent />
+    </Suspense>
+  )
+}

frontend/src/app/result/page.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import { useEffect, useState, useRef, Suspense } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
+
+function ResultContent() {
+  const router       = useRouter()
+  const searchParams = useSearchParams()
+  const jobId        = searchParams?.get('id') ?? ''
+  const videoRef     = useRef<HTMLVideoElement>(null)
+
+  const [status,      setStatus]      = useState<'loading' | 'ready' | 'error'>('loading')
+  const [videoUrl,    setVideoUrl]    = useState<string | null>(null)
+  const [detected,    setDetected]    = useState<string[]>([])
+  const [isPlaying,   setIsPlaying]   = useState(false)
+  const [copied,      setCopied]      = useState(false)
+  const [retries,     setRetries]     = useState(0)
+
+  useEffect(() => {
+    if (!jobId) { setStatus('error'); return }
+
+    const checkStatus = async () => {
+      try {
+        // 1. Check API status
+        const res = await fetch(`${API_BASE}/api/status/${jobId}`)
+        if (!res.ok) throw new Error('Not found')
+        const data = await res.json()
+
+        if (data.status === 'done') {
+          setDetected(data.detected || [])
+          const url = `${API_BASE}/api/video/${jobId}`
+          
+          // 2. Verify file exists with HEAD request
+          const head = await fetch(url, { method: 'HEAD' })
+          if (head.ok) {
+            setVideoUrl(url)
+            setStatus('ready')
+          } else {
+            throw new Error('Video file missing')
+          }
+        } else if (data.status === 'error') {
+          setStatus('error')
+        } else {
+          // Still processing? Wait and retry
+          if (retries < 10) {
+            setTimeout(() => setRetries(r => r + 1), 2000)
+          } else {
+            setStatus('error')
+          }
+        }
+      } catch (err) {
+        if (retries < 5) {
+          setTimeout(() => setRetries(r => r + 1), 2000)
+        } else {
+          setStatus('error')
+        }
+      }
+    }
+
+    checkStatus()
+  }, [jobId, retries])
+
+  const togglePlay = () => {
+    const v = videoRef.current; if (!v) return
+    if (v.paused) { v.play(); setIsPlaying(true) }
+    else          { v.pause(); setIsPlaying(false) }
+  }
+
+  const fmtTime = (s: number) =>
+    `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`
+
+  const copyLink = async () => {
+    await navigator.clipboard.writeText(window.location.href)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  if (status === 'loading') return (
+    <div className="max-w-4xl mx-auto px-5 py-32 text-center">
+      <div className="w-16 h-16 rounded-2xl bg-orange-50 border border-orange-200 flex items-center justify-center mx-auto mb-5">
+        <svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24" fill="none" strokeWidth="2">
+          <defs>
+            <linearGradient id="sg-spin" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#f97316"/>
+              <stop offset="100%" stopColor="#fbbf24"/>
+            </linearGradient>
+          </defs>
+          <path d="M21 12a9 9 0 1 1-6.219-8.56" stroke="url(#sg-spin)"/>
+        </svg>
+      </div>
+      <p className="text-sm font-medium text-slate-600">Loading your result…</p>
+    </div>
+  )
+
+  if (status === 'error') return (
+    <div className="max-w-4xl mx-auto px-5 py-32 text-center">
+      <div className="w-16 h-16 rounded-2xl bg-red-50 border border-red-200 flex items-center justify-center mx-auto mb-5">
+        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="15" y1="9" x2="9" y2="15"/>
+          <line x1="9" y1="9" x2="15" y2="15"/>
+        </svg>
+      </div>
+      <p className="font-semibold text-slate-800 mb-1">Result not available</p>
+      <p className="text-sm text-slate-500 mb-6">The job might still be processing or the file has expired.</p>
+      <div className="flex items-center justify-center gap-3">
+        <button onClick={() => { setStatus('loading'); setRetries(0) }} className="btn-outline px-5 py-2.5 text-sm">Retry</button>
+        <a href="/" className="btn-primary px-5 py-2.5 text-sm">New Upload</a>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="bg-white max-w-5xl mx-auto px-5 py-12">
+      <div className="flex items-start justify-between mb-10 flex-wrap gap-4">
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+            <span className="text-xs font-bold text-green-600 uppercase tracking-widest">Segmentation Finished</span>
+          </div>
+          <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Your AI Result</h1>
+          <p className="text-sm text-slate-500 mt-1">
+            Job ID: <code className="text-orange-500 font-mono">{jobId?.slice(0, 12)}</code>
+          </p>
+        </div>
+
+        <div className="flex gap-2">
+          <button onClick={copyLink} className="btn-outline px-4 py-2.5 text-sm flex items-center gap-2">
+            {copied ? 'Link Copied!' : 'Copy Result Link'}
+          </button>
+          <a href={videoUrl!} download className="btn-primary px-5 py-2.5 text-sm flex items-center gap-2">
+            Download MP4
+          </a>
+        </div>
+      </div>
+
+      <div className="bg-slate-900 rounded-[32px] overflow-hidden shadow-2xl border border-slate-800 relative group aspect-video lg:aspect-auto">
+        <video
+          ref={videoRef}
+          src={videoUrl!}
+          className="w-full h-full max-h-[70vh]"
+          onPlay={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
+          onClick={togglePlay}
+        />
+        
+        <div className="absolute inset-x-0 bottom-0 p-6 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+           <div className="flex items-center justify-between">
+             <button onClick={togglePlay} className="w-12 h-12 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center hover:bg-white/20 transition-all">
+                {isPlaying ? (
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="white"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+                ) : (
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="white"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                )}
+             </button>
+             <div className="px-4 py-2 rounded-full bg-black/40 backdrop-blur-md border border-white/10 text-[10px] font-bold text-white uppercase tracking-widest">
+               DeepLabV3+ Output
+             </div>
+           </div>
+        </div>
+      </div>
+
+      {detected.length > 0 && (
+        <div className="mt-12">
+          <h2 className="text-sm font-bold text-slate-400 uppercase tracking-[0.2em] mb-6 flex items-center gap-3">
+            <span className="h-px bg-slate-100 flex-1" />
+            Detected Objects
+            <span className="h-px bg-slate-100 flex-1" />
+          </h2>
+          <div className="flex flex-wrap justify-center gap-2">
+            {detected.map(cls => (
+              <span key={cls} className="px-4 py-2 rounded-xl bg-slate-50 border border-slate-100 text-sm font-medium text-slate-700 capitalize">
+                {cls}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="mt-16 text-center">
+        <a href="/" className="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-orange-500 transition-colors">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+          Back to upload new video
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default function ResultPage() {
+  return (
+    <Suspense fallback={<div className="p-20 text-center">Loading...</div>}>
+      <ResultContent />
+    </Suspense>
+  )
+}