ui improvements

frontend/src/components/AgAgentPanel.jsx

@@ -0,0 +1,110 @@
+import {
+  Calendar,
+  FileSearch,
+  ListChecks,
+  PenLine,
+  Receipt,
+  Sparkles,
+  Star,
+} from "lucide-react";
+import { inboxIntelligence } from "../utils/inboxSignals";
+
+function greeting(name) {
+  const hour = new Date().getHours();
+  const period = hour < 12 ? "Good morning" : hour < 17 ? "Good afternoon" : "Good evening";
+  return `${period}, ${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",
+  },
+];
+
+export default function AgAgentPanel({ account, emails, focus, onQuickAction }) {
+  const stats = inboxIntelligence(emails);
+  const firstName = account?.first_name || "there";
+
+  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>
+        <div>
+          <h2>AG Agent</h2>
+          <p>Your email co-pilot</p>
+        </div>
+      </header>
+
+      <div className="agent-panel-hello">
+        <strong>{greeting(firstName)}</strong>
+        <span>Here&apos;s what needs your attention.</span>
+        {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>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="agent-quick">
+        <h3>Quick actions</h3>
+        <div>
+          <button type="button" onClick={() => onQuickAction("summarize")}>
+            <Sparkles size={14} /> Summarize inbox
+          </button>
+          <button type="button" onClick={() => onQuickAction("draft")}>
+            <PenLine size={14} /> Draft replies
+          </button>
+          <button type="button" onClick={() => onQuickAction("attachments")}>
+            <FileSearch size={14} /> Find attachments
+          </button>
+          <button type="button" onClick={() => onQuickAction("actions")}>
+            <ListChecks size={14} /> Show action items
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}