Make request status badges prominent and easier to scan

frontend/app/MyRequests.tsx

@@ -254,9 +254,9 @@ export default function HomePage() {
 
   const requestCardState = (value?: string) => {
     const label = String(value ?? '').toLowerCase()
-    if (label.includes('ready') || label.includes('available')) return { key: 'ready', label: value || 'Ready', progress: 100 }
-    if (label.includes('declined') || label.includes('failed') || label.includes('error')) return { key: 'attention', label: value || 'Needs attention', progress: 12 }
     if (label.includes('partial')) return { key: 'attention', label: value || 'Partially ready', progress: 65 }
+    if (!/not |unavailable|waiting/.test(label) && (label.includes('ready') || label.includes('available'))) return { key: 'ready', label: value || 'Ready', progress: 100 }
+    if (label.includes('declined') || label.includes('failed') || label.includes('error')) return { key: 'attention', label: value || 'Needs attention', progress: 12 }
     if (label.includes('working') || label.includes('progress') || label.includes('download')) return { key: 'processing', label: value || 'In progress', progress: 58 }
     return { key: 'waiting', label: value || 'Waiting', progress: 4 }
   }
@@ -391,8 +391,12 @@ export default function HomePage() {
                 )}
                 <span className="recent-info">
                   <span className="recent-title">{item.title || 'Untitled'}{item.year ? ` (${item.year})` : ''}</span>
+                  <span className="recent-status-badge">
+                    <span aria-hidden="true">{({ ready: '✓', processing: '↻', attention: '!', waiting: '◷' })[requestCardState(item.statusLabel).key]}</span>
+                    {item.statusLabel || 'Status not available yet'}
+                  </span>
                   <span className="recent-meta">
-                    {item.statusLabel || 'Status not available yet'} · Request {item.id}
+                    Request {item.id}
                     {item.createdAt ? ` · ${formatRequestTime(item.createdAt)}` : ''}
                   </span>
                 </span>

frontend/app/ops-redesign.css

@@ -3121,12 +3121,31 @@ textarea:focus {
   font-size: 0.68rem;
 }
 .home-recent-grid .recent-meta::before {
-  width: 7px;
+  content: none;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--ops-faint);
-  content: "";
 }
+.home-recent-grid .recent-status-badge {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 9px;
+  max-width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #9c8044;
+  border-radius: 8px;
+  background: #352c1b;
+  color: #ffe0a0;
+  font-family: "DM Sans", sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.35;
+  text-align: left;
+  text-transform: none;
+  overflow-wrap: anywhere;
+}
+.home-recent-grid .recent-status-badge > span { flex: 0 0 auto; font-size: 1.2rem; }
+.home-recent-grid .is-ready .recent-status-badge { color: #a7f3cd; background: #16372b; border-color: #398663; }
+.home-recent-grid .is-processing .recent-status-badge { color: #b6e6ff; background: #183344; border-color: #448bad; }
+.home-recent-grid .is-attention .recent-status-badge { color: #ffd2b4; background: #40281e; border-color: #aa7150; }
 .home-recent-grid .is-processing .recent-meta::before { background: var(--ops-primary-2); }
 .home-recent-grid .is-attention .recent-meta::before { background: var(--ops-coral); }
 .home-recent-grid .is-ready .recent-meta::before { background: var(--ops-green); }