diff --git a/src/frontend/src/components/MailPanel.tsx b/src/frontend/src/components/MailPanel.tsx
index 97c03b5..5aece33 100644
--- a/src/frontend/src/components/MailPanel.tsx
+++ b/src/frontend/src/components/MailPanel.tsx
@@ -66,7 +66,7 @@ export default function MailPanel() {
 
   const filtered = mails.filter((m: any) => {
     if (filterFrom && m.from !== filterFrom) return false;
-    if (filterUnread && m.is_read) return false;
+    if (filterUnread && ['done', 'failed', 'cancelled'].includes(m.status)) return false;
     return true;
   });
 
@@ -98,14 +98,14 @@ export default function MailPanel() {
             <div key={m.id} onClick={() => setSelectedId(m.id)} style={{
               padding: '10px 14px', borderBottom: '1px solid var(--line)',
               cursor: 'pointer', transition: 'background .15s',
-              background: selectedId === m.id ? 'var(--panel2)' : m.is_read ? 'transparent' : '#0a1530',
+              background: selectedId === m.id ? 'var(--panel2)' : ['done', 'failed', 'cancelled'].includes(m.status) ? 'transparent' : '#0a1530',
             }}
               onMouseEnter={e => e.currentTarget.style.background = 'var(--panel2)'}
-              onMouseLeave={e => e.currentTarget.style.background = selectedId === m.id ? 'var(--panel2)' : m.is_read ? 'transparent' : '#0a1530'}
+              onMouseLeave={e => e.currentTarget.style.background = selectedId === m.id ? 'var(--panel2)' : ['done', 'failed', 'cancelled'].includes(m.status) ? 'transparent' : '#0a1530'}
             >
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                  {!m.is_read && <span style={{ width: 6, height: 6, borderRadius: 3, background: '#6a9eff', display: 'inline-block' }} />}
+                  {!['done', 'failed', 'cancelled'].includes(m.status) && <span style={{ width: 6, height: 6, borderRadius: 3, background: '#6a9eff', display: 'inline-block' }} />}
                   <span style={{ fontSize: 11, color: 'var(--acc)' }}>{m.from || '—'}</span>
                   <span style={{ fontSize: 10, color: 'var(--muted)' }}>→</span>
                   <span style={{ fontSize: 11, color: '#dde4f8' }}>{m.to || '—'}</span>
@@ -113,7 +113,7 @@ export default function MailPanel() {
                 <span style={{ fontSize: 9, color: 'var(--muted)' }}>{fmtTime(m.created_at)}</span>
               </div>
               <div style={{
-                fontSize: 12, fontWeight: m.is_read ? 400 : 600, color: m.is_read ? '#a0aec0' : '#dde4f8',
+                fontSize: 12, fontWeight: ['done', 'failed', 'cancelled'].includes(m.status) ? 400 : 600, color: ['done', 'failed', 'cancelled'].includes(m.status) ? '#a0aec0' : '#dde4f8',
                 overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
               }}>
                 {TYPE_ICON[m.type] || '💬'} {m.title}