Redesign beta Magent UI

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

@@ -374,7 +374,7 @@ export default function RequestTimelinePage() {
 
   if (loading) {
     return (
-      <main className="card">
+      <main className="card request-detail-page">
         <div className="loading-center" role="status" aria-live="polite">
           <div className="spinner" aria-hidden="true" />
           <div className="loading-text">Loading request timeline...</div>
@@ -384,11 +384,43 @@ export default function RequestTimelinePage() {
   }
 
   if (loadError) {
-    return <main className="card">{loadError}</main>
+    return (
+      <main className="card request-detail-page">
+        <section className="request-error-state">
+          <span className="section-kicker">Request unavailable</span>
+          <h1>Unable to load this request</h1>
+          <p>{loadError}</p>
+          <div className="request-error-actions">
+            <button type="button" onClick={() => router.refresh()}>
+              Retry
+            </button>
+            <button type="button" className="ghost-button" onClick={() => router.push('/')}>
+              Back to health
+            </button>
+          </div>
+        </section>
+      </main>
+    )
   }
 
   if (!snapshot) {
-    return <main className="card">Unable to load this request.</main>
+    return (
+      <main className="card request-detail-page">
+        <section className="request-error-state">
+          <span className="section-kicker">Request unavailable</span>
+          <h1>Unable to load this request</h1>
+          <p>The request API did not return a valid timeline payload.</p>
+          <div className="request-error-actions">
+            <button type="button" onClick={() => router.refresh()}>
+              Retry
+            </button>
+            <button type="button" className="ghost-button" onClick={() => router.push('/')}>
+              Back to health
+            </button>
+          </div>
+        </section>
+      </main>
+    )
   }
 
   const summary =
@@ -437,7 +469,7 @@ export default function RequestTimelinePage() {
       : friendlyState(snapshot.state)
 
   return (
-    <main className="card">
+    <main className="card request-detail-page">
       <div className="request-header">
         <div className="request-header-main">
           {resolvedPoster && (