Clarify and live-refresh media indexing state

frontend/app/requests/[id]/page.tsx

@@ -23,6 +23,7 @@ type PipelineStage = {
   id: string
   label: string
   state: 'complete' | 'active' | 'partial' | 'attention' | 'waiting' | string
+  stateLabel?: string
   summary: string
   available?: number
   missing?: number
@@ -227,6 +228,7 @@ const fallbackStatusLabel = (state: string) => {
 const fallbackPipeline = (snapshot: Snapshot): PipelineStage[] => {
   const approved = snapshot.state !== 'REQUESTED'
   const complete = ['COMPLETED', 'AVAILABLE'].includes(snapshot.state)
+  const indexing = snapshot.state === 'IMPORTING'
   return [
     { id: 'requested', label: 'Requested', state: 'complete', summary: 'Request received' },
     {
@@ -245,9 +247,14 @@ const fallbackPipeline = (snapshot: Snapshot): PipelineStage[] => {
     { id: 'download', label: 'Download', state: 'waiting', summary: 'No download attempt yet' },
     {
       id: 'available',
-      label: 'Available',
-      state: complete ? 'complete' : 'waiting',
-      summary: complete ? 'Available to watch' : 'Not available on the media server yet',
+      label: complete ? 'Available to watch' : indexing ? 'Adding to Grizzlyflix' : 'Media server',
+      state: complete ? 'complete' : indexing ? 'active' : 'waiting',
+      stateLabel: complete ? 'Ready' : indexing ? 'Indexing' : 'Waiting',
+      summary: complete
+        ? 'This title is ready to watch in Grizzlyflix.'
+        : indexing
+          ? 'The download is complete. Grizzlyflix is indexing this title now.'
+          : 'This title has not reached Grizzlyflix yet.',
       link: snapshot.raw?.jellyfin?.link,
     },
   ]
@@ -276,6 +283,11 @@ export default function RequestTimelinePage() {
   const [historyActions, setHistoryActions] = useState<ActionHistory[]>([])
   const [operationProgress, setOperationProgress] = useState<OperationProgress | null>(null)
   const [isAdmin, setIsAdmin] = useState(false)
+  const awaitingMediaIndex = Boolean(
+    snapshot?.presentation?.pipeline?.some(
+      (stage) => stage.id === 'available' && stage.state === 'active'
+    )
+  )
 
   useEffect(() => {
     if (!requestId) return
@@ -355,12 +367,12 @@ export default function RequestTimelinePage() {
         if (!stopped) console.error(error)
       }
     }
-    const timer = window.setInterval(() => void refresh(), 15_000)
+    const timer = window.setInterval(() => void refresh(), awaitingMediaIndex ? 5_000 : 15_000)
     return () => {
       stopped = true
       window.clearInterval(timer)
     }
-  }, [requestId, router])
+  }, [awaitingMediaIndex, requestId, router])
 
   const liveDownloadKey = useMemo(() => {
     const downloadStage = snapshot?.presentation?.pipeline?.find((stage) => stage.id === 'download')
@@ -741,7 +753,7 @@ export default function RequestTimelinePage() {
               <>
                 <div className="request-stage-topline">
                   <span className="request-stage-number">{String(index + 1).padStart(2, '0')}</span>
-                  <span className={`request-stage-state state-${stage.state}`}>{stage.state}</span>
+                  <span className={`request-stage-state state-${stage.state}`}>{stage.stateLabel ?? stage.state}</span>
                 </div>
                 <h3>{stage.label}</h3>
                 <p>{stage.summary}</p>