UI enhancement

2026-10-03 22:45:46 +05:30 · 2026-10-03 22:45:46 +05:30 · 1a15409b2d
commit 1a15409b2d
parent 53922952c6
6 changed files with 295 additions and 214 deletions
--- a/frontend/src/components/AgAgentPanel.jsx
+++ b/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>
  );
 }
--- a/frontend/src/components/DashboardPage.jsx
+++ b/frontend/src/components/DashboardPage.jsx
@ -64,7 +64,7 @@ function SidebarSection({ title, children, className = "" }) {
 }

 function NavBadge({ value }) {
-  if (!value) return null;
+  if (!value || value <= 0) return null;
  return <em>{value}</em>;
 }

@ -86,6 +86,7 @@ export default function DashboardPage() {
    starred: 0,
    important: 0,
    drafts: 0,
+    actionItems: 0,
    labels: {},
  });
  const handleStats = useCallback((stats) => setMailStats(stats), []);
@ -237,7 +238,7 @@ export default function DashboardPage() {
                type="button"
                onClick={() => selectMailItem(label)}
              >
-                <ItemIcon size={15} />
+                <ItemIcon size={16} strokeWidth={1.75} />
                <span>{label}</span>
                <NavBadge value={countKey ? mailStats[countKey] : 0} />
              </button>
@ -271,8 +272,9 @@ export default function DashboardPage() {
                type="button"
                onClick={() => selectAgentItem(label, actionKey)}
              >
-                <ItemIcon size={15} />
+                <ItemIcon size={16} strokeWidth={1.75} />
                <span>{label}</span>
+                <NavBadge value={actionKey === "actions" ? mailStats.actionItems : 0} />
              </button>
            ))}
          </nav>
--- a/frontend/src/components/MailRow.jsx
+++ b/frontend/src/components/MailRow.jsx
@ -11,7 +11,7 @@ import SenderAvatar from "./SenderAvatar";
 import { senderDisplayName } from "../utils/senderAvatar";
 import { attachmentCount, emailLabels } from "../utils/inboxSignals";

-const ICON = { size: 16, strokeWidth: 1.75 };
+const ICON = { size: 14, strokeWidth: 1.75 };

 function formatTimestamp(value) {
  if (!value) return "";
@ -98,58 +98,58 @@ export default function MailRow({
        className={`mailbox-star${starred ? " active" : ""}`}
        onClick={(event) => stop(event, () => onToggleStar?.(email, !starred))}
        aria-label={starred ? "Unstar message" : "Star message"}
+        title={starred ? "Unstar" : "Star"}
        aria-pressed={starred}
      >
        <Star size={16} strokeWidth={1.75} fill={starred ? "currentColor" : "none"} />
      </button>
      <SenderAvatar email={email} className="mailbox-avatar" />
-      <div className="mailbox-content">
-        {unread && <i className="mailbox-unread-pip" aria-hidden="true" />}
-        <span className="mailbox-sender">{senderName}</span>
+      <span className="mailbox-sender">{senderName}</span>
+      <span className="mailbox-subject-line">
        <span className="mailbox-subject">{subject}</span>
        {snippet && (
-          <span className="mailbox-preview">
-            <span className="mailbox-preview-sep" aria-hidden="true">—</span>
-            {snippet}
-          </span>
+          <>
+            <span className="mailbox-preview-sep" aria-hidden="true"> — </span>
+            <span className="mailbox-preview">{snippet}</span>
+          </>
        )}
-        {(labels.length > 0 || files > 0) && (
-          <span className="mailbox-meta">
-            {labels.map((label) => (
-              <em key={label.name} className={`mail-label mail-label-${label.tone}`}>{label.name}</em>
-            ))}
-            {files > 0 && (
-              <em className="mail-attachment" title={`${files} attachment${files === 1 ? "" : "s"}`}>
-                <Paperclip {...ICON} />
-                {files > 1 ? files : ""}
-              </em>
-            )}
-          </span>
-        )}
-      </div>
+      </span>
+      {labels.length > 0 && (
+        <div className="mailbox-row-labels">
+          {labels.map((label) => (
+            <em key={label.name} className={`mail-label mail-label-${label.tone}`}>{label.name}</em>
+          ))}
+        </div>
+      )}
+      {files > 0 ? (
+        <span className="mailbox-attachment-icon" title={`${files} attachment${files === 1 ? "" : "s"}`}>
+          <Paperclip {...ICON} />
+        </span>
+      ) : (
+        <span className="mailbox-attachment-icon empty" aria-hidden="true" />
+      )}
      <time className="mailbox-time" dateTime={timestamp || undefined}>{formatTimestamp(timestamp)}</time>
      <div className="mailbox-hover-actions" aria-label="Message actions">
-        <button type="button" onClick={(event) => stop(event, () => onArchive?.(email))}>
-          <Archive {...ICON} /> Archive
+        <button type="button" title="Archive" aria-label="Archive" onClick={(event) => stop(event, () => onArchive?.(email))}>
+          <Archive {...ICON} />
        </button>
-        <span className="mailbox-hover-sep" aria-hidden="true">·</span>
-        <button type="button" onClick={(event) => stop(event, () => onTrash?.(email))}>
-          <Trash2 {...ICON} /> Delete
+        <button type="button" title="Delete" aria-label="Delete" onClick={(event) => stop(event, () => onTrash?.(email))}>
+          <Trash2 {...ICON} />
        </button>
-        <span className="mailbox-hover-sep" aria-hidden="true">·</span>
-        <button type="button" onClick={(event) => stop(event, () => onMarkUnread?.(email))}>
-          <MailOpen {...ICON} /> Mark unread
+        <button type="button" title="Mark unread" aria-label="Mark unread" onClick={(event) => stop(event, () => onMarkUnread?.(email))}>
+          <MailOpen {...ICON} />
        </button>
-        <span className="mailbox-hover-sep" aria-hidden="true">·</span>
-        <button type="button" onClick={(event) => stop(event, () => onSnooze?.(email))}>
-          <Clock3 {...ICON} /> Snooze
+        <button type="button" title="Snooze" aria-label="Snooze" onClick={(event) => stop(event, () => onSnooze?.(email))}>
+          <Clock3 {...ICON} />
        </button>
        <button
          type="button"
-          className="agent-action"
+          className="agent-action-icon"
+          title="Summarize"
+          aria-label="Summarize"
          onClick={(event) => stop(event, () => onSummarize?.(email))}
        >
-          <AgentSpark /> Summarize
+          <AgentSpark />
        </button>
      </div>
    </div>
--- a/frontend/src/components/MailboxView.jsx
+++ b/frontend/src/components/MailboxView.jsx
@ -173,6 +173,7 @@ export default function MailboxView({
      starred: emails.filter((email) => email.is_starred).length,
      important: intel.important,
      drafts: 0,
+      actionItems: intel.actionItems,
      labels: labelCounts(emails),
    });
  }, [emails, onStats]);
@ -586,10 +587,8 @@ export default function MailboxView({
                    >
                      <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"}`}>
-                          {counts[name] || 0}
-                        </span>
+                      {name !== "All Mail" && counts[name] > 0 && (
+                        <span className="mailbox-category-count">{counts[name]}</span>
                      )}
                    </button>
                  ))}
@ -696,6 +695,15 @@ export default function MailboxView({
              const email = listedEmails.find((item) => item.id === emailId);
              if (email) openEmail(email);
            }}
+            onAgentAsk={(query) => {
+              setAgentFocus("");
+              runInsight({
+                title: "Your question",
+                summary: query,
+                details: ["Scanning loaded messages for relevant context"],
+                actions: ["Summarize matching threads", "Draft a reply", "Find related emails"],
+              });
+            }}
          />
          <StickyNotesPanel compact contextEmail={detail} />
        </aside>