UI enhancement

frontend/src/components/AgAgentPanel.jsx

@@ -1,29 +1,26 @@
+import { useState } from "react";
 import {
   Calendar,
-  CalendarClock,
+  Check,
+  ChevronRight,
   FileSearch,
   ListChecks,
-  MessageCircle,
+  PenLine,
   Receipt,
+  Send,
   Star,
 } from "lucide-react";
 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();
-  const period = hour < 12 ? "Good morning" : hour < 17 ? "Good afternoon" : "Good evening";
-  return `${period}, ${name}`;
-}
+const ICON = { size: 14, strokeWidth: 1.75 };
 
 const cards = [
-  { 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" },
+  { 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: "invoices", label: "Invoices & bills", hint: "This week", icon: Receipt, tone: "amber" },
 ];
 
 export default function AgAgentPanel({
@@ -33,11 +30,20 @@ export default function AgAgentPanel({
   insight,
   onQuickAction,
   onOpenEmail,
+  onAgentAsk,
 }) {
   const { stats, needsReply, today, deadlines } = inboxContext(emails);
-  const firstName = account?.first_name || "there";
+  const [agentQuery, setAgentQuery] = useState("");
   const hasSignals = stats.important + stats.actionItems + stats.meetings + stats.invoices > 0;
 
+  function submitAgentQuery(event) {
+    event.preventDefault();
+    const query = agentQuery.trim();
+    if (!query) return;
+    onAgentAsk?.(query);
+    setAgentQuery("");
+  }
+
   return (
     <section className="agent-panel" aria-label="AG Agent">
       <header className="agent-panel-head">
@@ -48,25 +54,24 @@ export default function AgAgentPanel({
         </div>
       </header>
 
-      <div className="agent-panel-hello">
-        <strong>{greeting(firstName)}</strong>
-        {!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>
-
       <AgentInsight insight={insight} />
 
-      {!insight && hasSignals ? (
+      {!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>No urgent messages or outstanding actions.</p>
+          <small>Inbox is quiet right now.</small>
+        </div>
+      )}
+
+      {!insight && hasSignals && (
         <div className="agent-stat-grid">
           {cards.map((card) => {
             const Icon = card.icon;
             const count = stats[card.key] || 0;
+            const caption = card.captionKey && stats[card.captionKey]
+              ? `${stats[card.captionKey]} ${card.captionSuffix}`
+              : card.hint;
             return (
               <button
                 key={card.key}
@@ -77,51 +82,49 @@ export default function AgAgentPanel({
                 <Icon {...ICON} />
                 <strong>{count}</strong>
                 <span>{card.label}</span>
-                <small>{card.key === "important" && stats.importantFromClients
-                  ? `${stats.importantFromClients} from clients`
-                  : card.hint}</small>
+                <small>{caption}</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>
       )}
 
+      {!insight && focus && hasSignals && <p className="agent-panel-note">{focus}</p>}
+
       <div className="agent-quick">
         <h3>Quick actions</h3>
         <div>
-          <button type="button" className="agent-action subtle" onClick={() => onQuickAction("summarize")}>
+          <button type="button" className="agent-quick-btn agent-quick-btn-agent" onClick={() => onQuickAction("summarize")}>
             <AgentSpark /> Summarize inbox
           </button>
-          <button type="button" className="agent-action subtle" onClick={() => onQuickAction("draft")}>
-            <AgentSpark /> Draft replies
+          <button type="button" className="agent-quick-btn agent-quick-btn-agent" onClick={() => onQuickAction("draft")}>
+            <PenLine {...ICON} /> Draft replies
           </button>
-          <button type="button" onClick={() => onQuickAction("attachments")}>
+          <button type="button" className="agent-quick-btn" onClick={() => onQuickAction("attachments")}>
             <FileSearch {...ICON} /> Find attachments
           </button>
-          <button type="button" onClick={() => onQuickAction("actions")}>
+          <button type="button" className="agent-quick-btn" onClick={() => onQuickAction("actions")}>
             <ListChecks {...ICON} /> Show action items
           </button>
         </div>
       </div>
 
       {!insight && today.length > 0 && (
-        <section className="agent-context-block">
-          <h3>Today</h3>
+        <section className="agent-context-block agent-agenda">
+          <div className="agent-context-head">
+            <h3>Today&apos;s agenda</h3>
+            <button type="button" className="agent-context-link">View calendar</button>
+          </div>
           <ul>
             {today.map((item) => (
-              <li key={`${item.time}-${item.label}`}>
-                <time>{item.time}</time>
-                <span>{item.label}</span>
+              <li key={`${item.time}-${item.label}`} className={`agent-agenda-row tone-${item.tone || "green"}`}>
+                <span className="agent-agenda-bar" aria-hidden="true" />
+                <div>
+                  <time>{item.time}</time>
+                  <strong>{item.label}</strong>
+                  {item.venue && <small>{item.venue}</small>}
+                </div>
+                <ChevronRight size={14} strokeWidth={1.75} />
               </li>
             ))}
           </ul>
@@ -130,13 +133,13 @@ export default function AgAgentPanel({
 
       {!insight && needsReply.length > 0 && (
         <section className="agent-context-block">
-          <h3>Needs reply</h3>
-          <ul>
-            {needsReply.map((item) => (
+          <h3>Needs attention</h3>
+          <ul className="agent-attention-list">
+            {needsReply.slice(0, 3).map((item) => (
               <li key={item.id}>
                 <button type="button" onClick={() => onOpenEmail?.(item.id)}>
-                  <span>{item.name}</span>
-                  <em>{item.age}</em>
+                  <span className="agent-attention-name">{item.name}</span>
+                  <span className="agent-attention-meta">{item.status} · {item.age}</span>
                 </button>
               </li>
             ))}
@@ -145,8 +148,8 @@ export default function AgAgentPanel({
       )}
 
       {!insight && deadlines.length > 0 && (
-        <section className="agent-context-block">
-          <h3><CalendarClock size={16} strokeWidth={1.75} /> Deadlines</h3>
+        <section className="agent-context-block agent-deadlines">
+          <h3>Deadlines</h3>
           <ul>
             {deadlines.map((item) => (
               <li key={`${item.label}-${item.due}`}>
@@ -157,6 +160,17 @@ export default function AgAgentPanel({
           </ul>
         </section>
       )}
+
+      <form className="agent-ask-input" onSubmit={submitAgentQuery}>
+        <input
+          value={agentQuery}
+          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>
+      </form>
     </section>
   );
 }