From efd31d9293713234cabeb5b56af5e135bda62f53 Mon Sep 17 00:00:00 2001
From: maaz519 <maaz@insigniaconsultancy.com>
Date: Sat, 18 Jul 2026 18:53:33 +0530
Subject: [PATCH] fix(inbox): show sent mail in the unified inbox + fix compose
 attach button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- inbox merges crm.mail.list threads (kind MAIL) into crm.inbox.list items so
  sent/received mail actually appears in the one surface; mail shows in the
  Open view (it has no inbox work-item state) and opens in MailReader on click.
  Mail rows are read/reply only — no Done/Snooze/Archive (crm.inbox.transition
  doesn't apply to a mail thread).
- compose Attachments block was wrapped in <Field> (a <label>), so the label
  hijacked the Attach button's click via label→file-input association and the
  picker misfired. Use a plain div with the same field styling.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/dashboard/inbox.tsx |  8 ++++---
 src/components/dashboard/mail.tsx  |  7 ++++--
 src/lib/inbox-api.ts               | 35 +++++++++++++++++++++++++++++-
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/components/dashboard/inbox.tsx b/src/components/dashboard/inbox.tsx
index 56b0e15..ff2c0c7 100644
--- a/src/components/dashboard/inbox.tsx
+++ b/src/components/dashboard/inbox.tsx
@@ -14,6 +14,7 @@ import { useInboxData, type InboxState, type UiInboxItem } from "@/lib/inbox-api
 import { MailReader, NewMailModal } from "./mail";
 
 const KIND_LABEL: Record<string, string> = {
+  MAIL: "Mail",
   MENTION: "Mention", NEEDS_REPLY: "Needs reply", NEEDS_REVIEW: "Needs review", NEEDS_APPROVAL: "Needs approval",
   SUPPORT_UPDATE: "Support", MEETING_FOLLOWUP: "Meeting", DIGEST: "Digest", SYSTEM_ALERT: "Alert", CRM_OWNER_INTEREST: "Owner",
 };
@@ -103,7 +104,7 @@ function ItemRow({ it, active, onClick }: { it: UiInboxItem; active: boolean; on
       }}
     >
       <span style={{ marginTop: 2, color: isMention ? "var(--orange)" : "var(--text-2)", flexShrink: 0 }}>
-        <Icon name={it.threadId ? "chat" : isMention ? "chat" : "bell"} size={18} />
+        <Icon name={it.kind === "MAIL" ? "mail" : it.threadId ? "chat" : isMention ? "chat" : "bell"} size={18} />
       </span>
       <div style={{ flex: 1, minWidth: 0 }}>
         <div style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>
@@ -122,8 +123,9 @@ function Detail({ it, onError, onDone, onSnooze, onArchive }: {
 }) {
   return (
     <>
-      {/* Item actions bar (works for every item, threaded or not) */}
-      {it.state === "OPEN" && (
+      {/* Item actions bar — only for real inbox work-items. Mail isn't an inbox item
+          (no crm.inbox.transition), so it gets read/reply only, no Done/Snooze/Archive. */}
+      {it.state === "OPEN" && it.kind !== "MAIL" && (
         <div style={{ display: "flex", gap: 6, padding: "10px 16px", borderBottom: "1px solid var(--border)", justifyContent: "flex-end" }}>
           <Btn variant="ghost" icon="clock" onClick={onSnooze}>Snooze</Btn>
           <Btn variant="outline" icon="check" onClick={onDone}>Done</Btn>
diff --git a/src/components/dashboard/mail.tsx b/src/components/dashboard/mail.tsx
index 49b7c19..9ee09da 100644
--- a/src/components/dashboard/mail.tsx
+++ b/src/components/dashboard/mail.tsx
@@ -216,13 +216,16 @@ export function NewMailModal({ open, onClose, onSent, onError }: { open: boolean
       <Field label="Subject"><input value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="Subject" style={inputStyle} /></Field>
       <Field label="Message"><textarea value={body} onChange={(e) => setBody(e.target.value)} placeholder="Write your message…" rows={6} style={{ ...inputStyle, resize: "vertical" }} /></Field>
 
-      <Field label="Attachments">
+      {/* NOT a <Field> (which is a <label>): a label wrapping the file input would hijack the
+          Attach button's click via label→input association and open the picker erratically. */}
+      <div className="ds-field">
+        <span className="ds-field-lbl">Attachments</span>
         <input ref={fileRef} type="file" multiple style={{ display: "none" }} onChange={onPickFile} />
         <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
           <Btn variant="outline" icon="paperclip" onClick={() => fileRef.current?.click()} disabled={uploading || staged.length >= 10}>{uploading ? "Uploading…" : "Attach"}</Btn>
           {staged.map((f, i) => <StagedChip key={`${f.contentRef}_${i}`} file={f} onRemove={() => setStaged((s) => s.filter((_, j) => j !== i))} />)}
         </div>
-      </Field>
+      </div>
     </Modal>
   );
 }
diff --git a/src/lib/inbox-api.ts b/src/lib/inbox-api.ts
index 8ea701d..6f3d2e6 100644
--- a/src/lib/inbox-api.ts
+++ b/src/lib/inbox-api.ts
@@ -11,6 +11,7 @@
 import { useCallback, useMemo, useState } from "react";
 import { useAppShell, useQuery } from "@abe-kap/appshell-sdk/react";
 import { isShellConfigured } from "./appshell";
+import type { MailThread } from "./mail-api";
 
 export type InboxState = "OPEN" | "SNOOZED" | "DONE" | "ARCHIVED" | "CANCELLED" | "STALE";
 export interface UiInboxItem {
@@ -34,11 +35,43 @@ export function useInboxData(state?: InboxState): InboxData {
 function useLiveInbox(state?: InboxState): InboxData {
   const { sdk } = useAppShell();
   const q = useQuery<UiInboxItem[]>("crm.inbox.list", state ? { state } : {});
+  // Mail lives in crm-mail threads, NOT the inbox projection — fold it into the one unified
+  // surface. Mail has no inbox work-item state, so it only shows in the Open (or unfiltered) view.
+  const showMail = !state || state === "OPEN";
+  const mq = useQuery<MailThread[]>("crm.mail.list", {});
+
+  const items = useMemo<UiInboxItem[]>(() => {
+    const inboxItems = q.data ?? [];
+    const mailItems: UiInboxItem[] = showMail
+      ? (mq.data ?? []).map((t) => ({
+          id: `mail:${t.threadId}`,
+          kind: "MAIL",
+          state: "OPEN" as InboxState,
+          title: t.subject || "(no subject)",
+          ...(t.lastMessage ? { summary: t.lastMessage } : {}),
+          priority: t.unread > 0 ? "HIGH" : "LOW",
+          threadId: t.threadId,
+          createdAt: t.lastAt ?? "",
+        }))
+      : [];
+    // Newest first; mail and inbox items interleave by time.
+    return [...mailItems, ...inboxItems].sort((a, b) => (b.createdAt ?? "").localeCompare(a.createdAt ?? ""));
+  }, [q.data, mq.data, showMail]);
+
   const transition = useCallback(async (id: string, next: InboxState) => {
     await sdk.command("crm.inbox.transition", { id, state: next });
     q.refetch();
   }, [sdk, q]);
-  return { live: true, loading: q.loading, error: q.error?.message ?? null, items: q.data ?? [], transition, refetch: q.refetch };
+
+  return {
+    live: true,
+    loading: q.loading || (showMail && mq.loading),
+    // Don't let a mail-list hiccup blank the whole inbox — surface only the inbox error.
+    error: q.error?.message ?? null,
+    items,
+    transition,
+    refetch: () => { q.refetch(); mq.refetch(); },
+  };
 }
 
 const MOCK_ITEMS: UiInboxItem[] = [