Fix request detail load failures

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

@@ -55,6 +55,44 @@ type ActionHistory = {
   created_at: string
 }
 
+const readApiError = async (response: Response, fallback: string) => {
+  try {
+    const contentType = response.headers.get('content-type') ?? ''
+    if (contentType.includes('application/json')) {
+      const payload = await response.json()
+      if (typeof payload?.detail === 'string' && payload.detail.trim()) {
+        return payload.detail
+      }
+      if (typeof payload?.message === 'string' && payload.message.trim()) {
+        return payload.message
+      }
+    } else {
+      const text = await response.text()
+      if (text.trim()) {
+        return text.trim()
+      }
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  return fallback
+}
+
+const isSnapshotPayload = (value: unknown): value is Snapshot => {
+  if (!value || typeof value !== 'object') {
+    return false
+  }
+  const snapshot = value as Partial<Snapshot>
+  return (
+    typeof snapshot.request_id === 'string' &&
+    typeof snapshot.title === 'string' &&
+    typeof snapshot.request_type === 'string' &&
+    typeof snapshot.state === 'string' &&
+    Array.isArray(snapshot.timeline) &&
+    Array.isArray(snapshot.actions)
+  )
+}
+
 const percentFromTorrent = (torrent: Record<string, any>) => {
   const progress = Number(torrent.progress)
   if (!Number.isNaN(progress) && progress >= 0 && progress <= 1) {
@@ -201,6 +239,7 @@ export default function RequestTimelinePage() {
   const router = useRouter()
   const [snapshot, setSnapshot] = useState<Snapshot | null>(null)
   const [loading, setLoading] = useState(true)
+  const [loadError, setLoadError] = useState<string | null>(null)
   const [showDetails, setShowDetails] = useState(false)
   const [actionMessage, setActionMessage] = useState<string | null>(null)
   const [releaseOptions, setReleaseOptions] = useState<ReleaseOption[]>([])
@@ -214,6 +253,9 @@ export default function RequestTimelinePage() {
       return
     }
     const load = async () => {
+      setLoading(true)
+      setLoadError(null)
+      setSnapshot(null)
       try {
         if (!getToken()) {
           router.push('/login')
@@ -226,12 +268,22 @@ export default function RequestTimelinePage() {
           authFetch(`${baseUrl}/requests/${requestId}/actions?limit=5`),
         ])
 
-        if (snapshotResponse.status === 401) {
+        const authExpired = [snapshotResponse, historyResponse, actionsResponse].some(
+          (response) => response.status === 401
+        )
+        if (authExpired) {
           clearToken()
           router.push('/login')
           return
         }
+        if (!snapshotResponse.ok) {
+          const message = await readApiError(snapshotResponse, 'Unable to load this request.')
+          throw new Error(message)
+        }
         const snapshotData = await snapshotResponse.json()
+        if (!isSnapshotPayload(snapshotData)) {
+          throw new Error('Unable to load this request.')
+        }
         setSnapshot(snapshotData)
         setReleaseOptions([])
         setSearchRan(false)
@@ -251,6 +303,9 @@ export default function RequestTimelinePage() {
         }
       } catch (error) {
         console.error(error)
+        setLoadError(
+          error instanceof Error && error.message ? error.message : 'Unable to load this request.'
+        )
       } finally {
         setLoading(false)
       }
@@ -328,8 +383,12 @@ export default function RequestTimelinePage() {
     )
   }
 
+  if (loadError) {
+    return <main className="card">{loadError}</main>
+  }
+
   if (!snapshot) {
-    return <main className="card">Could not load that request.</main>
+    return <main className="card">Unable to load this request.</main>
   }
 
   const summary =