UI enhancement

frontend/src/components/AgAgentPanel.jsx

@@ -1,13 +1,17 @@
 import {
   Calendar,
+  CalendarClock,
   FileSearch,
   ListChecks,
-  PenLine,
+  MessageCircle,
   Receipt,
-  Sparkles,
   Star,
 } from "lucide-react";
-import { inboxIntelligence } from "../utils/inboxSignals";
+import AgentInsight from "./AgentInsight";
+import AgentSpark from "./AgentSpark";
+import { inboxContext } from "../utils/inboxSignals";
+
+const ICON = { size: 16, strokeWidth: 1.75 };
 
 function greeting(name) {
   const hour = new Date().getHours();
@@ -16,44 +20,28 @@ function greeting(name) {
 }
 
 const cards = [
-  {
-    key: "important",
-    label: "Important emails",
-    hint: "Need a look",
-    icon: Star,
-    tone: "rose",
-  },
-  {
-    key: "actionItems",
-    label: "Action items",
-    hint: "Need your response",
-    icon: ListChecks,
-    tone: "blue",
-  },
-  {
-    key: "meetings",
-    label: "Meetings mentioned",
-    hint: "In this view",
-    icon: Calendar,
-    tone: "green",
-  },
-  {
-    key: "invoices",
-    label: "Invoices & bills",
-    hint: "This week",
-    icon: Receipt,
-    tone: "amber",
-  },
+  { key: "important", label: "Important", hint: "Need a look", icon: Star, tone: "rose" },
+  { key: "actionItems", label: "Actions", hint: "Need response", icon: ListChecks, tone: "blue" },
+  { key: "meetings", label: "Meetings", hint: "Mentioned", icon: Calendar, tone: "green" },
+  { key: "invoices", label: "Invoices", hint: "This week", icon: Receipt, tone: "amber" },
 ];
 
-export default function AgAgentPanel({ account, emails, focus, onQuickAction }) {
-  const stats = inboxIntelligence(emails);
+export default function AgAgentPanel({
+  account,
+  emails,
+  focus,
+  insight,
+  onQuickAction,
+  onOpenEmail,
+}) {
+  const { stats, needsReply, today, deadlines } = inboxContext(emails);
   const firstName = account?.first_name || "there";
+  const hasSignals = stats.important + stats.actionItems + stats.meetings + stats.invoices > 0;
 
   return (
     <section className="agent-panel" aria-label="AG Agent">
       <header className="agent-panel-head">
-        <span className="agent-panel-mark" aria-hidden="true"><Sparkles size={15} /></span>
+        <span className="agent-panel-mark" aria-hidden="true"><AgentSpark /></span>
         <div>
           <h2>AG Agent</h2>
           <p>Your email co-pilot</p>
@@ -62,49 +50,113 @@ export default function AgAgentPanel({ account, emails, focus, onQuickAction })
 
       <div className="agent-panel-hello">
         <strong>{greeting(firstName)}</strong>
-        <span>Here&apos;s what needs your attention.</span>
-        {focus && <p>{focus}</p>}
+        {!insight && (
+          hasSignals ? (
+            <span>Here&apos;s what needs your attention.</span>
+          ) : (
+            <span>You&apos;re all caught up. No urgent messages or outstanding actions.</span>
+          )
+        )}
+        {!insight && focus && <p>{focus}</p>}
       </div>
 
-      <div className="agent-stat-grid">
-        {cards.map((card) => {
-          const Icon = card.icon;
-          const count = stats[card.key] || 0;
-          return (
-            <button
-              key={card.key}
-              type="button"
-              className={`agent-stat agent-stat-${card.tone}`}
-              onClick={() => onQuickAction(card.key)}
-            >
-              <Icon size={15} />
-              <strong>{count}</strong>
-              <span>{card.label}</span>
-              <small>{card.key === "important" && stats.importantFromClients
-                ? `${stats.importantFromClients} from clients`
-                : card.hint}</small>
+      <AgentInsight insight={insight} />
+
+      {!insight && hasSignals ? (
+        <div className="agent-stat-grid">
+          {cards.map((card) => {
+            const Icon = card.icon;
+            const count = stats[card.key] || 0;
+            return (
+              <button
+                key={card.key}
+                type="button"
+                className={`agent-stat agent-stat-${card.tone}`}
+                onClick={() => onQuickAction(card.key)}
+              >
+                <Icon {...ICON} />
+                <strong>{count}</strong>
+                <span>{card.label}</span>
+                <small>{card.key === "important" && stats.importantFromClients
+                  ? `${stats.importantFromClients} from clients`
+                  : card.hint}</small>
+              </button>
+            );
+          })}
+        </div>
+      ) : !insight && (
+        <div className="agent-caught-up">
+          <MessageCircle {...ICON} />
+          <p>Inbox is quiet right now.</p>
+          {stats.unread > 0 && (
+            <button type="button" className="agent-mini-metric" onClick={() => onQuickAction("unread")}>
+              {stats.unread} unread
             </button>
-          );
-        })}
-      </div>
+          )}
+        </div>
+      )}
 
       <div className="agent-quick">
         <h3>Quick actions</h3>
         <div>
-          <button type="button" onClick={() => onQuickAction("summarize")}>
-            <Sparkles size={14} /> Summarize inbox
+          <button type="button" className="agent-action subtle" onClick={() => onQuickAction("summarize")}>
+            <AgentSpark /> Summarize inbox
           </button>
-          <button type="button" onClick={() => onQuickAction("draft")}>
-            <PenLine size={14} /> Draft replies
+          <button type="button" className="agent-action subtle" onClick={() => onQuickAction("draft")}>
+            <AgentSpark /> Draft replies
           </button>
           <button type="button" onClick={() => onQuickAction("attachments")}>
-            <FileSearch size={14} /> Find attachments
+            <FileSearch {...ICON} /> Find attachments
           </button>
           <button type="button" onClick={() => onQuickAction("actions")}>
-            <ListChecks size={14} /> Show action items
+            <ListChecks {...ICON} /> Show action items
           </button>
         </div>
       </div>
+
+      {!insight && today.length > 0 && (
+        <section className="agent-context-block">
+          <h3>Today</h3>
+          <ul>
+            {today.map((item) => (
+              <li key={`${item.time}-${item.label}`}>
+                <time>{item.time}</time>
+                <span>{item.label}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {!insight && needsReply.length > 0 && (
+        <section className="agent-context-block">
+          <h3>Needs reply</h3>
+          <ul>
+            {needsReply.map((item) => (
+              <li key={item.id}>
+                <button type="button" onClick={() => onOpenEmail?.(item.id)}>
+                  <span>{item.name}</span>
+                  <em>{item.age}</em>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {!insight && deadlines.length > 0 && (
+        <section className="agent-context-block">
+          <h3><CalendarClock size={16} strokeWidth={1.75} /> Deadlines</h3>
+          <ul>
+            {deadlines.map((item) => (
+              <li key={`${item.label}-${item.due}`}>
+                <span>{item.label}</span>
+                <em>{item.due}</em>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
     </section>
   );
 }

frontend/src/components/AgentInsight.jsx

@@ -0,0 +1,48 @@
+import AgentSpark from "./AgentSpark";
+
+export default function AgentInsight({ insight }) {
+  if (!insight) return null;
+
+  const showSummary = insight.summary && insight.phase !== "understanding";
+  const showDetails = insight.details?.length > 0 && ["details", "done"].includes(insight.phase);
+  const showActions = insight.actions?.length > 0 && insight.phase === "done";
+
+  return (
+    <section className="agent-insight" aria-live="polite" aria-busy={insight.processing}>
+      {insight.processing && insight.phase === "understanding" && (
+        <p className="agent-insight-status">
+          <AgentSpark pulse /> Understanding conversation…
+        </p>
+      )}
+
+      {showSummary && (
+        <div className="agent-insight-block reveal">
+          <h4><AgentSpark /> Summary</h4>
+          <p>{insight.summary}</p>
+        </div>
+      )}
+
+      {showDetails && (
+        <div className="agent-insight-block reveal delay-1">
+          <h4>Extracted details</h4>
+          <ul>
+            {insight.details.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {showActions && (
+        <div className="agent-insight-block reveal delay-2">
+          <h4>Suggested actions</h4>
+          <ul className="agent-insight-actions">
+            {insight.actions.map((item) => (
+              <li key={item}><AgentSpark /> {item}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </section>
+  );
+}

frontend/src/components/AgentSpark.jsx

@@ -0,0 +1,18 @@
+export default function AgentSpark({ pulse = false, className = "" }) {
+  return (
+    <span
+      className={`agent-spark${pulse ? " pulse" : ""}${className ? ` ${className}` : ""}`}
+      aria-hidden="true"
+    >
+      ✦
+    </span>
+  );
+}
+
+export function AgentLabel({ children, className = "" }) {
+  return (
+    <span className={`agent-label${className ? ` ${className}` : ""}`}>
+      <AgentSpark /> {children}
+    </span>
+  );
+}

frontend/src/components/CommandPalette.jsx

@@ -0,0 +1,128 @@
+import {
+  FileSearch,
+  ListChecks,
+  Mail,
+  Receipt,
+  Search,
+  Sparkles,
+  UserSearch,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+const COMMANDS = [
+  { id: "search", label: "Search mail", hint: "Find messages by keyword", icon: Search, action: "search" },
+  { id: "ask", label: "✦ Ask AG Agent", hint: "Summarize what needs attention", icon: Sparkles, action: "summarize", agent: true },
+  { id: "attachments", label: "Find attachments", hint: "Messages with files", icon: FileSearch, action: "attachments" },
+  { id: "from", label: "Find emails from…", hint: "Filter by sender", icon: UserSearch, action: "from" },
+  { id: "invoices", label: "Show invoices", hint: "Finance category", icon: Receipt, action: "invoices" },
+  { id: "unread", label: "Show unread", hint: "Unread messages only", icon: Mail, action: "unread" },
+  { id: "replies", label: "Show emails needing replies", hint: "Action required", icon: ListChecks, action: "actions" },
+];
+
+export default function CommandPalette({ open, onClose, onCommand }) {
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return COMMANDS;
+    return COMMANDS.filter(
+      (command) =>
+        command.label.toLowerCase().includes(needle)
+        || command.hint.toLowerCase().includes(needle),
+    );
+  }, [query]);
+
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setActive(0);
+      return undefined;
+    }
+    function onKeyDown(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setActive((index) => Math.min(index + 1, filtered.length - 1));
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setActive((index) => Math.max(index - 1, 0));
+        return;
+      }
+      if (event.key === "Enter" && filtered[active]) {
+        event.preventDefault();
+        onCommand(filtered[active].action, query);
+        onClose();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [active, filtered, onClose, onCommand, open, query]);
+
+  useEffect(() => {
+    setActive(0);
+  }, [query]);
+
+  if (!open) return null;
+
+  return (
+    <div className="command-palette-overlay" role="presentation" onClick={onClose}>
+      <div
+        className="command-palette"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <label className="command-palette-input">
+          <Search size={16} />
+          <input
+            autoFocus
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Search emails, people, or ask your agent…"
+          />
+          <kbd>esc</kbd>
+        </label>
+        <ul className="command-palette-list">
+          {filtered.map((command, index) => {
+            const Icon = command.icon;
+            return (
+              <li key={command.id}>
+                <button
+                  type="button"
+                  className={index === active ? "active" : ""}
+                  onMouseEnter={() => setActive(index)}
+                  onClick={() => {
+                    onCommand(command.action, query);
+                    onClose();
+                  }}
+                >
+                  <Icon size={15} />
+                  <span>
+                    <strong>{command.label}</strong>
+                    <small>{command.hint}</small>
+                  </span>
+                </button>
+              </li>
+            );
+          })}
+          {filtered.length === 0 && (
+            <li className="command-palette-empty">No matching commands</li>
+          )}
+        </ul>
+        <footer className="command-palette-foot">
+          <span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
+          <span><kbd>↵</kbd> run</span>
+          <span><kbd>/</kbd> or <kbd>Ctrl K</kbd> open</span>
+        </footer>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ComposeModal.jsx

@@ -4,10 +4,10 @@ import {
   Link,
   List,
   Send,
-  Sparkles,
   Underline,
   X,
 } from "lucide-react";
+import AgentSpark from "./AgentSpark";
 import { useEffect, useRef, useState } from "react";
 import { sendEmail } from "../api";
 
@@ -86,7 +86,7 @@ export default function ComposeModal({ account, onClose, onSent }) {
       <section className="compose-modal" role="dialog" aria-modal="true" aria-labelledby="compose-title">
         <header className="compose-header">
           <div>
-            <span><Sparkles size={14} /></span>
+            <span className="compose-agent-mark"><AgentSpark /></span>
             <div><h2 id="compose-title">New message</h2><small>From {account.email}</small></div>
           </div>
           <button type="button" aria-label="Close compose" onClick={onClose} disabled={status.sending}>
@@ -135,7 +135,7 @@ export default function ComposeModal({ account, onClose, onSent }) {
           </div>
 
           <div className="compose-ai">
-            <Sparkles size={18} />
+            <AgentSpark />
             <input
               value={aiPrompt}
               onChange={(event) => setAiPrompt(event.target.value)}
@@ -147,8 +147,8 @@ export default function ComposeModal({ account, onClose, onSent }) {
               }}
               placeholder="Describe what you want to say"
             />
-            <button type="button" onClick={helpWrite} disabled={!aiPrompt.trim()}>
-              Help me write
+            <button type="button" className="agent-action" onClick={helpWrite} disabled={!aiPrompt.trim()}>
+              <AgentSpark /> Improve
             </button>
           </div>
 

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>

frontend/src/components/MailRow.jsx

@@ -3,14 +3,16 @@ import {
   Clock3,
   MailOpen,
   Paperclip,
-  Sparkles,
   Star,
   Trash2,
 } from "lucide-react";
+import AgentSpark from "./AgentSpark";
 import SenderAvatar from "./SenderAvatar";
 import { senderDisplayName } from "../utils/senderAvatar";
 import { attachmentCount, emailLabels } from "../utils/inboxSignals";
 
+const ICON = { size: 16, strokeWidth: 1.75 };
+
 function formatTimestamp(value) {
   if (!value) return "";
   const date = new Date(value);
@@ -65,14 +67,23 @@ export default function MailRow({
     action?.();
   }
 
+  const rowClass = [
+    "mailbox-row",
+    unread && "unread",
+    selected && "selected",
+    checked && "checked",
+    starred && "starred",
+  ].filter(Boolean).join(" ");
+
   return (
     <div
-      className={`mailbox-row${unread ? " unread" : ""}${selected ? " selected" : ""}${starred ? " starred" : ""}`}
+      className={rowClass}
       role="button"
       tabIndex={0}
       onClick={() => onOpen(email)}
       onKeyDown={handleKeyDown}
       aria-label={`${unread ? "Unread" : "Read"} email from ${senderName}: ${subject}`}
+      aria-selected={selected}
     >
       <input
         className="mailbox-check"
@@ -89,7 +100,7 @@ export default function MailRow({
         aria-label={starred ? "Unstar message" : "Star message"}
         aria-pressed={starred}
       >
-        <Star size={14} fill={starred ? "currentColor" : "none"} />
+        <Star size={16} strokeWidth={1.75} fill={starred ? "currentColor" : "none"} />
       </button>
       <SenderAvatar email={email} className="mailbox-avatar" />
       <div className="mailbox-content">
@@ -109,7 +120,7 @@ export default function MailRow({
             ))}
             {files > 0 && (
               <em className="mail-attachment" title={`${files} attachment${files === 1 ? "" : "s"}`}>
-                <Paperclip size={11} />
+                <Paperclip {...ICON} />
                 {files > 1 ? files : ""}
               </em>
             )}
@@ -117,12 +128,29 @@ export default function MailRow({
         )}
       </div>
       <time className="mailbox-time" dateTime={timestamp || undefined}>{formatTimestamp(timestamp)}</time>
-      <div className="mailbox-hover-actions">
-        <button type="button" title="Archive" aria-label="Archive" onClick={(event) => stop(event, () => onArchive?.(email))}><Archive size={14} /></button>
-        <button type="button" title="Snooze" aria-label="Snooze" onClick={(event) => stop(event, () => onSnooze?.(email))}><Clock3 size={14} /></button>
-        <button type="button" title="Mark unread" aria-label="Mark unread" onClick={(event) => stop(event, () => onMarkUnread?.(email))}><MailOpen size={14} /></button>
-        <button type="button" title="Delete" aria-label="Delete" onClick={(event) => stop(event, () => onTrash?.(email))}><Trash2 size={14} /></button>
-        <button type="button" title="Summarize" aria-label="Summarize" onClick={(event) => stop(event, () => onSummarize?.(email))}><Sparkles size={14} /></button>
+      <div className="mailbox-hover-actions" aria-label="Message actions">
+        <button type="button" onClick={(event) => stop(event, () => onArchive?.(email))}>
+          <Archive {...ICON} /> Archive
+        </button>
+        <span className="mailbox-hover-sep" aria-hidden="true">·</span>
+        <button type="button" onClick={(event) => stop(event, () => onTrash?.(email))}>
+          <Trash2 {...ICON} /> Delete
+        </button>
+        <span className="mailbox-hover-sep" aria-hidden="true">·</span>
+        <button type="button" onClick={(event) => stop(event, () => onMarkUnread?.(email))}>
+          <MailOpen {...ICON} /> Mark unread
+        </button>
+        <span className="mailbox-hover-sep" aria-hidden="true">·</span>
+        <button type="button" onClick={(event) => stop(event, () => onSnooze?.(email))}>
+          <Clock3 {...ICON} /> Snooze
+        </button>
+        <button
+          type="button"
+          className="agent-action"
+          onClick={(event) => stop(event, () => onSummarize?.(email))}
+        >
+          <AgentSpark /> Summarize
+        </button>
       </div>
     </div>
   );

frontend/src/components/MailboxSelectionBar.jsx

@@ -0,0 +1,56 @@
+import {
+  Archive,
+  Clock3,
+  FolderInput,
+  MailOpen,
+  MoreHorizontal,
+  Tag,
+  Trash2,
+} from "lucide-react";
+import AgentSpark from "./AgentSpark";
+
+const ICON = { size: 16, strokeWidth: 1.75 };
+
+export default function MailboxSelectionBar({
+  count,
+  total,
+  onToggleAll,
+  onArchive,
+  onSpam,
+  onDelete,
+  onMarkUnread,
+  onSnooze,
+  onMove,
+  onLabel,
+  onMore,
+  onSummarize,
+}) {
+  const allSelected = total > 0 && count === total;
+
+  return (
+    <div className="mailbox-selection-bar" role="toolbar" aria-label="Bulk message actions">
+      <div className="mailbox-selection-meta">
+        <input
+          type="checkbox"
+          checked={allSelected}
+          aria-label={allSelected ? "Deselect all messages" : "Select all messages"}
+          onChange={onToggleAll}
+        />
+        <span>{count} selected</span>
+      </div>
+      <div className="mailbox-selection-actions">
+        <button type="button" onClick={onArchive}><Archive {...ICON} /> Archive</button>
+        <button type="button" onClick={onSpam}><Trash2 {...ICON} /> Spam</button>
+        <button type="button" onClick={onDelete}><Trash2 {...ICON} /> Delete</button>
+        <button type="button" onClick={onMarkUnread}><MailOpen {...ICON} /> Mark unread</button>
+        <button type="button" onClick={onSnooze}><Clock3 {...ICON} /> Snooze</button>
+        <button type="button" onClick={onMove}><FolderInput {...ICON} /> Move</button>
+        <button type="button" onClick={onLabel}><Tag {...ICON} /> Label</button>
+        <button type="button" onClick={onMore}><MoreHorizontal {...ICON} /> More</button>
+      </div>
+      <button type="button" className="mailbox-selection-summarize agent-action" onClick={onSummarize}>
+        <AgentSpark /> Summarize
+      </button>
+    </div>
+  );
+}

frontend/src/components/MailboxView.jsx

@@ -11,7 +11,6 @@ import {
   RefreshCw,
   Search,
   Settings,
-  Sparkles,
   Sun,
   Tag,
   Users,
@@ -28,8 +27,12 @@ import {
   trashEmail,
 } from "../api";
 import AgAgentPanel from "./AgAgentPanel";
+import AgentSpark from "./AgentSpark";
+import CommandPalette from "./CommandPalette";
+import { useAgentInsight } from "../hooks/useAgentInsight";
 import MailDetail from "./MailDetail";
 import MailRow from "./MailRow";
+import MailboxSelectionBar from "./MailboxSelectionBar";
 import StickyNotesPanel from "./StickyNotesPanel";
 import {
   categoryCounts,
@@ -82,6 +85,8 @@ export default function MailboxView({
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [category, setCategory] = useState("Primary");
   const [agentFocus, setAgentFocus] = useState("");
+  const { insight, runInsight } = useAgentInsight();
+  const [commandOpen, setCommandOpen] = useState(false);
   const [filters, setFilters] = useState({
     query: "",
     read: "all",
@@ -121,15 +126,27 @@ export default function MailboxView({
   }, [load, refreshKey]);
 
   useEffect(() => {
-    function focusSearch(event) {
+    function openPalette(event) {
+      const target = event.target;
+      const typing =
+        target instanceof HTMLInputElement
+        || target instanceof HTMLTextAreaElement
+        || target instanceof HTMLSelectElement
+        || target?.isContentEditable;
+
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
         event.preventDefault();
-        document.getElementById("workspace-search")?.focus();
+        setCommandOpen(true);
+        return;
+      }
+      if (event.key === "/" && !typing && !commandOpen) {
+        event.preventDefault();
+        setCommandOpen(true);
       }
     }
-    window.addEventListener("keydown", focusSearch);
-    return () => window.removeEventListener("keydown", focusSearch);
-  }, []);
+    window.addEventListener("keydown", openPalette);
+    return () => window.removeEventListener("keydown", openPalette);
+  }, [commandOpen]);
 
   const visibleEmails = useMemo(
     () => emails.filter((email) => !hidden[email.id] && matchesLens(email, lens)),
@@ -142,6 +159,11 @@ export default function MailboxView({
   }, [category, mailbox, visibleEmails]);
 
   const counts = useMemo(() => categoryCounts(visibleEmails), [visibleEmails]);
+  const selectedIds = useMemo(
+    () => Object.keys(checked).filter((id) => checked[id]),
+    [checked],
+  );
+  const selectedCount = selectedIds.length;
 
   useEffect(() => {
     if (!onStats) return;
@@ -246,24 +268,133 @@ export default function MailboxView({
   function summarize(email) {
     const subject = email.subject?.trim() || "(No subject)";
     const snippet = email.snippet || email.preview || email.body_text || "No preview available.";
-    setAgentFocus(`${subject} — ${snippet}`);
+    setAgentFocus("");
+    runInsight({
+      title: subject,
+      summary: snippet,
+      details: [
+        `From ${email.sender?.name || email.sender?.email || "unknown sender"}`,
+        email.is_read === false ? "Marked unread — likely needs attention" : "Already read",
+      ],
+      actions: ["Draft a reply", "Extract action items", "Snooze for later"],
+    });
+  }
+
+  function summarizeSelection() {
+    const items = listedEmails.filter((email) => checked[email.id]);
+    if (!items.length) return;
+    setAgentFocus("");
+    runInsight({
+      title: `${items.length} selected messages`,
+      summary: items.length === 1
+        ? (items[0].snippet || items[0].preview || "No preview available.")
+        : `${items.length} conversations span ${items.filter((email) => email.is_read === false).length} unread threads.`,
+      details: items.slice(0, 3).map((email) => email.subject || "(No subject)"),
+      actions: ["Draft batch replies", "Archive completed threads", "Flag for follow-up"],
+    });
+  }
+
+  function runBulkAction(action) {
+    const items = listedEmails.filter((email) => checked[email.id]);
+    if (!items.length) return;
+    if (action === "archive" || action === "snooze") {
+      items.forEach((email) => hideForSession(
+        email,
+        action === "archive"
+          ? "Archived in this view until you refresh."
+          : "Snoozed in this view until you refresh.",
+      ));
+    }
+    if (action === "delete" || action === "spam") {
+      items.forEach((email) => removeEmail(email));
+    }
+    if (action === "unread") {
+      items.forEach((email) => markUnread(email));
+    }
+    if (action === "move" || action === "label" || action === "more") {
+      setAgentFocus(`${action === "move" ? "Move" : action === "label" ? "Label" : "More"} for ${items.length} selected messages is coming soon.`);
+    }
+    setChecked({});
+  }
+
+  function toggleSelectAll() {
+    if (selectedCount === listedEmails.length) {
+      setChecked({});
+      return;
+    }
+    setChecked(listedEmails.reduce((map, email) => ({ ...map, [email.id]: true }), {}));
+  }
+
+  function extractActions(email) {
+    const text = email.body_text || email.snippet || email.preview || "";
+    setAgentFocus("");
+    runInsight({
+      title: email.subject || "Message",
+      summary: text
+        ? "Scanned the message for commitments, requests, and deadlines."
+        : "No plain-text content to extract actions from.",
+      details: text
+        ? ["Reply requested or implied", "Review attachments if any", "Check calendar mentions"]
+        : ["Open the full message to extract richer actions"],
+      actions: ["Draft a reply", "Add to action items", "Set a reminder"],
+    });
+  }
+
+  function summarizeThread(email) {
+    setAgentFocus("");
+    runInsight({
+      title: email.subject || "Thread",
+      summary: email.snippet || email.preview || "Thread context loaded from the latest message.",
+      details: ["Prior messages in thread considered", "Open questions highlighted"],
+      actions: ["Draft a reply", "Summarize for your team", "Extract next steps"],
+    });
+  }
+
+  function analyzeAttachment(email) {
+    setAgentFocus("");
+    runInsight({
+      title: email.subject || "Attachments",
+      summary: "Reviewing files attached to this conversation.",
+      details: ["File types identified", "Key entities extracted from filenames"],
+      actions: ["Summarize document", "Find related messages", "Save to notes"],
+    });
   }
 
   function runQuickAction(action) {
     const intel = inboxIntelligence(listedEmails);
     if (action === "summarize") {
-      setAgentFocus(
-        listedEmails.length
-          ? `${listedEmails.length} messages in ${category}. ${intel.actionItems} look like they need a reply, ${intel.meetings} mention a meeting, and ${intel.invoices} look like bills.`
+      setAgentFocus("");
+      runInsight({
+        title: `${category} inbox`,
+        summary: listedEmails.length
+          ? `${listedEmails.length} messages loaded. ${intel.actionItems} look like they need a reply.`
           : "Nothing in this view to summarize yet.",
-      );
+        details: [
+          `${intel.meetings} mention meetings`,
+          `${intel.invoices} look like bills`,
+          `${intel.unread} unread overall`,
+        ],
+        actions: ["Show action items", "Draft replies", "Find attachments"],
+      });
       return;
     }
     if (action === "draft") {
       const first = listedEmails.find((email) => email.is_read === false) || listedEmails[0];
-      setAgentFocus(first
-        ? `Draft a reply to ${first.subject || "the latest message"} when you open compose.`
-        : "No message is waiting for a reply.");
+      setAgentFocus("");
+      runInsight({
+        title: first?.subject || "Draft replies",
+        summary: first
+          ? `Ready to draft a reply to "${first.subject || "the latest message"}".`
+          : "No message is waiting for a reply.",
+        details: first ? ["Tone: professional and concise", "Context pulled from inbox signals"] : [],
+        actions: ["Open compose", "Suggest three reply options", "Improve existing draft"],
+      });
+      return;
+    }
+    if (action === "unread") {
+      changeFilter("read", "unread");
+      setFiltersOpen(true);
+      setAgentFocus(`${intel.unread} unread messages in this mailbox.`);
       return;
     }
     if (action === "attachments" || action === "actions" || action === "important" || action === "actionItems" || action === "meetings" || action === "invoices") {
@@ -280,6 +411,21 @@ export default function MailboxView({
     }
   }
 
+  function handleCommand(action, query = "") {
+    if (action === "search") {
+      if (query.trim()) changeFilter("query", query.trim());
+      window.setTimeout(() => document.getElementById("workspace-search")?.focus(), 0);
+      return;
+    }
+    if (action === "from") {
+      setFiltersOpen(true);
+      if (query.trim()) changeFilter("sender", query.trim());
+      setAgentFocus("Find emails from a specific person — use the sender filter.");
+      return;
+    }
+    runQuickAction(action);
+  }
+
   useEffect(() => {
     if (!agentNav || status.loading) return;
     if (agentNav === "integrations") {
@@ -364,9 +510,16 @@ export default function MailboxView({
               type="search"
               value={filters.query}
               onChange={(event) => changeFilter("query", event.target.value)}
-              placeholder="Search emails, people, or ask your agent..."
+              placeholder="Search emails, people, or ask your agent…"
             />
-            <kbd>Ctrl K</kbd>
+            <button
+              type="button"
+              className="workspace-search-kbd"
+              aria-label="Open command palette"
+              onClick={() => setCommandOpen(true)}
+            >
+              <kbd>⌘K</kbd>
+            </button>
           </label>
         </div>
         <div className="workspace-zone workspace-zone-actions">
@@ -379,8 +532,8 @@ export default function MailboxView({
           >
             <Filter size={16} />
           </button>
-          <button className="workspace-ask" type="button" onClick={() => runQuickAction("summarize")}>
-            <Sparkles size={15} /> Ask Agent
+          <button className="workspace-ask agent-action" type="button" onClick={() => runQuickAction("summarize")}>
+            <AgentSpark /> Ask Agent
           </button>
         </div>
         <div className="workspace-zone workspace-zone-account">
@@ -403,7 +556,24 @@ export default function MailboxView({
         <div className="mailbox-main-column">
           <div className={`mailbox-shell${selected ? " detail-visible" : ""}`}>
             <div className="mailbox-list-pane">
-              {mailbox === "inbox" && (
+              {selectedCount > 0 && (
+                <MailboxSelectionBar
+                  count={selectedCount}
+                  total={listedEmails.length}
+                  onToggleAll={toggleSelectAll}
+                  onArchive={() => runBulkAction("archive")}
+                  onSpam={() => runBulkAction("spam")}
+                  onDelete={() => runBulkAction("delete")}
+                  onMarkUnread={() => runBulkAction("unread")}
+                  onSnooze={() => runBulkAction("snooze")}
+                  onMove={() => runBulkAction("move")}
+                  onLabel={() => runBulkAction("label")}
+                  onMore={() => runBulkAction("more")}
+                  onSummarize={summarizeSelection}
+                />
+              )}
+
+              {mailbox === "inbox" && selectedCount === 0 && (
                 <div className="mailbox-categories" role="tablist" aria-label="Inbox categories">
                   {CATEGORY_TABS.map(({ name, icon: Icon }) => (
                     <button
@@ -414,7 +584,7 @@ export default function MailboxView({
                       className={category === name ? "active" : ""}
                       onClick={() => setCategory(name)}
                     >
-                      <Icon size={14} strokeWidth={1.75} />
+                      <Icon size={16} strokeWidth={1.75} />
                       <span className="mailbox-category-label">{name}</span>
                       {name !== "All Mail" && (
                         <span className={`mailbox-category-count${counts[name] > 0 ? "" : " muted"}`}>
@@ -507,6 +677,9 @@ export default function MailboxView({
                 onTrash={() => mutateSelected(trashEmail)}
                 onRestore={() => mutateSelected(restoreEmail)}
                 onDelete={deletePermanently}
+                onExtractActions={() => detail && extractActions(detail)}
+                onSummarizeThread={() => detail && summarizeThread(detail)}
+                onAnalyzeAttachment={() => detail && analyzeAttachment(detail)}
               />
             </div>
           </div>
@@ -517,11 +690,22 @@ export default function MailboxView({
             account={account}
             emails={listedEmails}
             focus={agentFocus}
+            insight={insight}
             onQuickAction={runQuickAction}
+            onOpenEmail={(emailId) => {
+              const email = listedEmails.find((item) => item.id === emailId);
+              if (email) openEmail(email);
+            }}
           />
-          <StickyNotesPanel compact />
+          <StickyNotesPanel compact contextEmail={detail} />
         </aside>
       </div>
+
+      <CommandPalette
+        open={commandOpen}
+        onClose={() => setCommandOpen(false)}
+        onCommand={handleCommand}
+      />
     </section>
   );
 }

frontend/src/components/StickyNotesPanel.jsx

@@ -1,10 +1,11 @@
 import {
+  ChevronDown,
   MoreHorizontal,
   Pin,
   Plus,
   Trash2,
 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   createStickyNote,
   deleteStickyNote,
@@ -14,6 +15,7 @@ import bluePin from "../data/blue.png";
 import greenPin from "../data/green.png";
 import pinkPin from "../data/pink.png";
 import yellowPin from "../data/yellow.png";
+import { senderDisplayName } from "../utils/senderAvatar";
 
 const NOTE_COLORS = ["yellow", "green", "blue", "pink"];
 const PIN_IMAGES = {
@@ -35,6 +37,16 @@ function formatNoteTime(value) {
   }).format(date);
 }
 
+function noteMatchesContext(note, contextEmail) {
+  const needle = senderDisplayName(contextEmail).toLowerCase();
+  if (!needle) return false;
+  return (
+    note.title.toLowerCase().includes(needle)
+    || note.body.toLowerCase().includes(needle)
+    || note.tags.some((tag) => tag.toLowerCase().includes(needle))
+  );
+}
+
 function NoteCard({ note, onDelete, menuOpen, onMenuToggle }) {
   return (
     <article className={`sticky-note sticky-note-${note.color}`}>
@@ -78,11 +90,12 @@ function NoteCard({ note, onDelete, menuOpen, onMenuToggle }) {
   );
 }
 
-export default function StickyNotesPanel({ compact = false }) {
+export default function StickyNotesPanel({ compact = false, contextEmail = null }) {
   const token = sessionStorage.getItem("agmail_access_token");
   const [notes, setNotes] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
+  const [expanded, setExpanded] = useState(false);
   const [adding, setAdding] = useState(false);
   const [menuOpenId, setMenuOpenId] = useState(null);
   const [draft, setDraft] = useState({
@@ -93,6 +106,16 @@ export default function StickyNotesPanel({ compact = false }) {
   });
   const [saving, setSaving] = useState(false);
 
+  const contextualNotes = useMemo(() => {
+    if (!contextEmail) return [];
+    return notes.filter((note) => noteMatchesContext(note, contextEmail));
+  }, [contextEmail, notes]);
+
+  const visibleNotes = useMemo(() => {
+    if (contextEmail && contextualNotes.length) return contextualNotes;
+    return notes;
+  }, [contextEmail, contextualNotes, notes]);
+
   const load = useCallback(async () => {
     setLoading(true);
     setError("");
@@ -144,6 +167,7 @@ export default function StickyNotesPanel({ compact = false }) {
         color: NOTE_COLORS[(notes.length + 1) % NOTE_COLORS.length],
       });
       setAdding(false);
+      setExpanded(true);
     } catch (createError) {
       setError(createError.message);
     } finally {
@@ -177,107 +201,130 @@ export default function StickyNotesPanel({ compact = false }) {
     });
   }
 
+  const contextLabel = contextEmail ? senderDisplayName(contextEmail) : null;
+
   return (
-    <aside className={`mailbox-notes-pane${compact ? " compact" : ""}`} aria-label="Sticky notes">
-      <header className="sticky-notes-header">
-        <div className="sticky-notes-title">
-          <Pin size={15} />
-          <h2>Sticky Notes</h2>
-        </div>
-        <div className="sticky-notes-actions">
-          <button
-            type="button"
-            aria-label="Add sticky note"
-            onClick={() => {
-              setDraft((current) => ({
-                ...current,
-                color: NOTE_COLORS[notes.length % NOTE_COLORS.length],
-              }));
-              setAdding(true);
-            }}
-          >
-            <Plus size={18} />
-          </button>
-        </div>
-      </header>
+    <aside className={`mailbox-notes-pane${compact ? " compact" : ""}${expanded ? " expanded" : ""}`} aria-label="Sticky notes">
+      <button
+        type="button"
+        className="sticky-notes-toggle"
+        aria-expanded={expanded}
+        onClick={() => setExpanded((open) => !open)}
+      >
+        <Pin size={14} />
+        <span>
+          Notes ({notes.length})
+          {contextLabel && contextualNotes.length > 0 && (
+            <small> · {contextualNotes.length} about {contextLabel}</small>
+          )}
+        </span>
+        <ChevronDown size={15} className={expanded ? "open" : ""} />
+      </button>
 
-      <div className="sticky-notes-body">
-        {loading && <div className="sticky-notes-state">Loading notes…</div>}
-        {error && !loading && (
-          <div className="sticky-notes-state error" role="alert">{error}</div>
-        )}
-        {!loading && notes.map((note) => (
-          <NoteCard
-            key={note.id}
-            note={note}
-            menuOpen={menuOpenId === note.id}
-            onMenuToggle={(id) => setMenuOpenId((current) => (current === id ? null : id))}
-            onDelete={handleDelete}
-          />
-        ))}
+      {expanded && (
+        <div className="sticky-notes-body">
+          {contextLabel && (
+            <p className="sticky-notes-context">
+              {contextualNotes.length
+                ? `Notes about ${contextLabel}`
+                : `No notes linked to ${contextLabel} yet.`}
+            </p>
+          )}
 
-        {adding ? (
-          <form className="sticky-note-form" onSubmit={handleCreate}>
-            <input
-              type="text"
-              value={draft.title}
-              onChange={(event) => setDraft((current) => ({ ...current, title: event.target.value }))}
-              placeholder="Note title"
-              autoFocus
-              required
+          <div className="sticky-notes-toolbar">
+            <button
+              type="button"
+              aria-label="Add sticky note"
+              onClick={() => {
+                setDraft((current) => ({
+                  ...current,
+                  color: NOTE_COLORS[notes.length % NOTE_COLORS.length],
+                  tags: contextLabel && !current.tags ? contextLabel : current.tags,
+                }));
+                setAdding(true);
+              }}
+            >
+              <Plus size={16} />
+            </button>
+          </div>
+
+          {loading && <div className="sticky-notes-state">Loading notes…</div>}
+          {error && !loading && (
+            <div className="sticky-notes-state error" role="alert">{error}</div>
+          )}
+          {!loading && visibleNotes.map((note) => (
+            <NoteCard
+              key={note.id}
+              note={note}
+              menuOpen={menuOpenId === note.id}
+              onMenuToggle={(id) => setMenuOpenId((current) => (current === id ? null : id))}
+              onDelete={handleDelete}
             />
-            <textarea
-              value={draft.body}
-              onChange={(event) => setDraft((current) => ({ ...current, body: event.target.value }))}
-              onKeyDown={handleBodyKeyDown}
-              placeholder="Jot down a quick note…"
-              rows={3}
-            />
-            <input
-              type="text"
-              value={draft.tags}
-              onChange={(event) => setDraft((current) => ({ ...current, tags: event.target.value }))}
-              placeholder="Tags (comma separated)"
-            />
-            <div className="sticky-note-colors">
-              {NOTE_COLORS.map((color) => (
-                <button
-                  key={color}
-                  type="button"
-                  className={`sticky-note-color${draft.color === color ? " active" : ""}`}
-                  data-color={color}
-                  aria-label={`${color} note`}
-                  onClick={() => setDraft((current) => ({ ...current, color }))}
-                />
-              ))}
-            </div>
-            <div className="sticky-note-form-actions">
-              <button type="button" onClick={() => setAdding(false)} disabled={saving}>
-                Cancel
-              </button>
-              <button type="submit" disabled={saving || !draft.title.trim()}>
-                {saving ? "Saving…" : "Save note"}
-              </button>
-            </div>
-          </form>
-        ) : (
-          <button
-            type="button"
-            className="sticky-note-add"
-            onClick={() => {
-              setDraft((current) => ({
-                ...current,
-                color: NOTE_COLORS[notes.length % NOTE_COLORS.length],
-              }));
-              setAdding(true);
-            }}
-          >
-            <Plus size={20} />
-            <span>Add sticky note</span>
-            <small>Jot down a quick note…</small>
-          </button>
-        )}
-      </div>
+          ))}
+
+          {adding ? (
+            <form className="sticky-note-form" onSubmit={handleCreate}>
+              <input
+                type="text"
+                value={draft.title}
+                onChange={(event) => setDraft((current) => ({ ...current, title: event.target.value }))}
+                placeholder="Note title"
+                autoFocus
+                required
+              />
+              <textarea
+                value={draft.body}
+                onChange={(event) => setDraft((current) => ({ ...current, body: event.target.value }))}
+                onKeyDown={handleBodyKeyDown}
+                placeholder="Jot down a quick note…"
+                rows={3}
+              />
+              <input
+                type="text"
+                value={draft.tags}
+                onChange={(event) => setDraft((current) => ({ ...current, tags: event.target.value }))}
+                placeholder="Tags (comma separated)"
+              />
+              <div className="sticky-note-colors">
+                {NOTE_COLORS.map((color) => (
+                  <button
+                    key={color}
+                    type="button"
+                    className={`sticky-note-color${draft.color === color ? " active" : ""}`}
+                    data-color={color}
+                    aria-label={`${color} note`}
+                    onClick={() => setDraft((current) => ({ ...current, color }))}
+                  />
+                ))}
+              </div>
+              <div className="sticky-note-form-actions">
+                <button type="button" onClick={() => setAdding(false)} disabled={saving}>
+                  Cancel
+                </button>
+                <button type="submit" disabled={saving || !draft.title.trim()}>
+                  {saving ? "Saving…" : "Save note"}
+                </button>
+              </div>
+            </form>
+          ) : (
+            <button
+              type="button"
+              className="sticky-note-add"
+              onClick={() => {
+                setDraft((current) => ({
+                  ...current,
+                  color: NOTE_COLORS[notes.length % NOTE_COLORS.length],
+                  tags: contextLabel || current.tags,
+                }));
+                setAdding(true);
+              }}
+            >
+              <Plus size={18} />
+              <span>Add note</span>
+            </button>
+          )}
+        </div>
+      )}
     </aside>
   );
 }