UI minor brush ups

frontend/src/components/AgAgentPanel.jsx

@@ -5,6 +5,7 @@ import {
   ChevronRight,
   FileSearch,
   ListChecks,
+  Paperclip,
   PenLine,
   Receipt,
   Send,
@@ -12,6 +13,7 @@ import {
 } from "lucide-react";
 import AgentInsight from "./AgentInsight";
 import AgentSpark from "./AgentSpark";
+import SenderAvatar from "./SenderAvatar";
 import { inboxContext } from "../utils/inboxSignals";
 
 const ICON = { size: 14, strokeWidth: 1.75 };
@@ -19,10 +21,16 @@ const ICON = { size: 14, strokeWidth: 1.75 };
 const cards = [
   { key: "important", label: "Important emails", captionKey: "importantFromClients", captionSuffix: "from clients", icon: Star, tone: "rose" },
   { key: "actionItems", label: "Action items", hint: "Need response", icon: ListChecks, tone: "blue" },
-  { key: "meetings", label: "Meetings mentioned", hint: "On calendar", icon: Calendar, tone: "green" },
+  { key: "meetings", label: "Meetings mentioned", hint: "In your emails", icon: Calendar, tone: "green" },
   { key: "invoices", label: "Invoices & bills", hint: "This week", icon: Receipt, tone: "amber" },
 ];
 
+function greeting(name) {
+  const hour = new Date().getHours();
+  const period = hour < 12 ? "Good morning" : hour < 17 ? "Good afternoon" : "Good evening";
+  return `${period}, ${name}`;
+}
+
 export default function AgAgentPanel({
   account,
   emails,
@@ -34,6 +42,7 @@ export default function AgAgentPanel({
 }) {
   const { stats, needsReply, today, deadlines } = inboxContext(emails);
   const [agentQuery, setAgentQuery] = useState("");
+  const firstName = account?.first_name || "there";
   const hasSignals = stats.important + stats.actionItems + stats.meetings + stats.invoices > 0;
 
   function submitAgentQuery(event) {
@@ -56,9 +65,16 @@ export default function AgAgentPanel({
 
       <AgentInsight insight={insight} />
 
+      {!insight && hasSignals && (
+        <div className="agent-panel-hello">
+          <strong>{greeting(firstName)}</strong>
+          <span>Here&apos;s what needs your attention today.</span>
+        </div>
+      )}
+
       {!insight && !hasSignals && (
         <div className="agent-caught-up">
-          <p className="agent-caught-up-lead"><Check size={14} strokeWidth={2} /> You&apos;re all caught up.</p>
+          <p className="agent-caught-up-lead"><Check size={15} strokeWidth={2} /> You&apos;re all caught up.</p>
           <p>No urgent messages or outstanding actions.</p>
           <small>Inbox is quiet right now.</small>
         </div>
@@ -79,7 +95,7 @@ export default function AgAgentPanel({
                 className={`agent-stat agent-stat-${card.tone}`}
                 onClick={() => onQuickAction(card.key)}
               >
-                <Icon {...ICON} />
+                <span className="agent-stat-icon"><Icon {...ICON} /></span>
                 <strong>{count}</strong>
                 <span>{card.label}</span>
                 <small>{caption}</small>
@@ -95,16 +111,20 @@ export default function AgAgentPanel({
         <h3>Quick actions</h3>
         <div>
           <button type="button" className="agent-quick-btn agent-quick-btn-agent" onClick={() => onQuickAction("summarize")}>
-            <AgentSpark /> Summarize inbox
+            <span className="agent-quick-icon"><AgentSpark /></span>
+            <span>Summarize inbox</span>
           </button>
           <button type="button" className="agent-quick-btn agent-quick-btn-agent" onClick={() => onQuickAction("draft")}>
-            <PenLine {...ICON} /> Draft replies
+            <span className="agent-quick-icon"><PenLine {...ICON} /></span>
+            <span>Draft replies</span>
           </button>
           <button type="button" className="agent-quick-btn" onClick={() => onQuickAction("attachments")}>
-            <FileSearch {...ICON} /> Find attachments
+            <span className="agent-quick-icon"><FileSearch {...ICON} /></span>
+            <span>Find attachments</span>
           </button>
           <button type="button" className="agent-quick-btn" onClick={() => onQuickAction("actions")}>
-            <ListChecks {...ICON} /> Show action items
+            <span className="agent-quick-icon"><ListChecks {...ICON} /></span>
+            <span>Show action items</span>
           </button>
         </div>
       </div>
@@ -138,8 +158,12 @@ export default function AgAgentPanel({
             {needsReply.slice(0, 3).map((item) => (
               <li key={item.id}>
                 <button type="button" onClick={() => onOpenEmail?.(item.id)}>
-                  <span className="agent-attention-name">{item.name}</span>
-                  <span className="agent-attention-meta">{item.status} · {item.age}</span>
+                  <SenderAvatar email={emails.find((entry) => entry.id === item.id) || { sender: { name: item.name } }} className="agent-attention-avatar" />
+                  <span className="agent-attention-copy">
+                    <span className="agent-attention-name">{item.name}</span>
+                    <span className="agent-attention-meta">{item.status}</span>
+                  </span>
+                  <em>{item.age}</em>
                 </button>
               </li>
             ))}
@@ -167,8 +191,11 @@ export default function AgAgentPanel({
           onChange={(event) => setAgentQuery(event.target.value)}
           placeholder="Ask about your emails..."
         />
-        <button type="submit" aria-label="Send to agent" disabled={!agentQuery.trim()}>
-          <Send size={16} strokeWidth={1.75} />
+        <button type="button" className="agent-ask-attach" aria-label="Attach context" title="Attach context">
+          <Paperclip size={15} strokeWidth={1.75} />
+        </button>
+        <button type="submit" className="agent-ask-send" aria-label="Send to agent" disabled={!agentQuery.trim()}>
+          <Send size={15} strokeWidth={1.75} />
         </button>
       </form>
     </section>