UI enhancement

frontend/src/components/MailDetail.jsx

@@ -6,8 +6,13 @@ import {
   Trash2,
   X,
 } from "lucide-react";
+import AgentSpark from "./AgentSpark";
 import SenderAvatar from "./SenderAvatar";
 import { senderDisplayName } from "../utils/senderAvatar";
+import { attachmentCount } from "../utils/inboxSignals";
+
+const ICON = { size: 18, strokeWidth: 1.75 };
+const ICON_SM = { size: 16, strokeWidth: 1.75 };
 
 function joinAddresses(value) {
   if (!value) return "";
@@ -41,12 +46,17 @@ export default function MailDetail({
   onTrash,
   onRestore,
   onDelete,
+  onExtractActions,
+  onSummarizeThread,
+  onAnalyzeAttachment,
 }) {
+  const files = email ? attachmentCount(email) : 0;
+
   return (
     <article className={`mail-detail${email || loading ? " open" : ""}`} aria-live="polite">
       <header className="mail-detail-toolbar">
         <button type="button" onClick={onClose} aria-label="Back to message list">
-          <ArrowLeft size={18} />
+          <ArrowLeft {...ICON} />
         </button>
         <div>
           {email && (
@@ -57,12 +67,12 @@ export default function MailDetail({
               title={email.is_read ? "Mark unread" : "Mark read"}
               aria-label={email.is_read ? "Mark unread" : "Mark read"}
             >
-              {email.is_read ? <Mail size={17} /> : <MailOpen size={17} />}
+              {email.is_read ? <Mail {...ICON} /> : <MailOpen {...ICON} />}
             </button>
           )}
           {email && mailbox === "trash" && (
             <button type="button" disabled={busy} onClick={onRestore} title="Restore" aria-label="Restore message">
-              <RotateCcw size={17} />
+              <RotateCcw {...ICON} />
             </button>
           )}
           {email && (
@@ -74,11 +84,11 @@ export default function MailDetail({
               title={mailbox === "trash" ? "Delete permanently" : "Move to trash"}
               aria-label={mailbox === "trash" ? "Delete message permanently" : "Move message to trash"}
             >
-              <Trash2 size={17} />
+              <Trash2 {...ICON} />
             </button>
           )}
           <button className="mail-detail-close" type="button" onClick={onClose} aria-label="Close message">
-            <X size={18} />
+            <X size={18} strokeWidth={1.75} />
           </button>
         </div>
       </header>
@@ -87,6 +97,19 @@ export default function MailDetail({
       {error && <div className="mail-detail-state error" role="alert">{error}</div>}
       {email && !loading && (
         <div className="mail-detail-content">
+          <div className="mail-detail-agent-bar">
+            <button type="button" className="agent-action subtle" onClick={onExtractActions}>
+              <AgentSpark /> Extract actions
+            </button>
+            <button type="button" className="agent-action subtle" onClick={onSummarizeThread}>
+              <AgentSpark /> Summarize thread
+            </button>
+            {files > 0 && (
+              <button type="button" className="agent-action subtle" onClick={onAnalyzeAttachment}>
+                <AgentSpark /> Analyze attachment
+              </button>
+            )}
+          </div>
           <h2>{email.subject?.trim() || "(No subject)"}</h2>
           <div className="mail-detail-meta">
             <div>