src/components/dashboard/dashboard.tsx

@@ -16,7 +16,6 @@ import { Rules } from "./rules";
 import { AiAssistant } from "./ai-assistant";
 import { TeamManagement } from "./team-management";
 import { Messenger } from "./messenger";
-import { Mail } from "./mail";
 import { Inbox } from "./inbox";
 import "../../app/dashboard/dashboard.css";
 
@@ -49,7 +48,6 @@ export function Dashboard() {
               : active === "rules" ? <Rules />
               : active === "ai" ? <AiAssistant />
               : active === "messenger" ? <Messenger />
-              : active === "mail" ? <Mail />
               : active === "inbox" ? <Inbox />
               : active === "team" ? <TeamManagement />
               : <ComingSoon title={title} icon={item?.icon ?? "dashboard"} onGo={setActive} />}

src/components/dashboard/inbox.tsx

@@ -1,16 +1,17 @@
 "use client";
 
 // ============================================================
-// Inbox — a personalized work/awareness feed IIOS projects from
-// events (mentions, needs-reply, support updates, …), surfaced via
-// the be-crm data door (crm.inbox.*). List + filter by state, and
-// mark items done / snoozed / archived. Items are created by IIOS's
-// projector, never here. Mock when the Shell isn't configured.
+// Inbox — the ONE unified communication surface. It lists everything
+// IIOS surfaces for you (mentions, needs-reply, system alerts, support
+// updates, …) AND the mail behind them: click an item tied to a thread
+// and its conversation opens on the right to read + reply. Compose new
+// mail from here too. Items come from crm.inbox.*; threads from crm.mail.*.
 // ============================================================
 
-import { useState } from "react";
-import { Btn, Icon, PageHead, Pill } from "./ui";
+import { useEffect, useState } from "react";
+import { Btn, Icon, PageHead, Pill, useToast } from "./ui";
 import { useInboxData, type InboxState, type UiInboxItem } from "@/lib/inbox-api";
+import { MailReader, NewMailModal } from "./mail";
 
 const KIND_LABEL: Record<string, string> = {
   MENTION: "Mention", NEEDS_REPLY: "Needs reply", NEEDS_REVIEW: "Needs review", NEEDS_APPROVAL: "Needs approval",
@@ -23,10 +24,22 @@ const FILTERS: { value: InboxState; label: string }[] = [
 export function Inbox() {
   const [filter, setFilter] = useState<InboxState>("OPEN");
   const inbox = useInboxData(filter);
+  const toast = useToast();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [newOpen, setNewOpen] = useState(false);
+
+  useEffect(() => {
+    if ((!selectedId || !inbox.items.some((i) => i.id === selectedId)) && inbox.items[0]) setSelectedId(inbox.items[0].id);
+  }, [inbox.items, selectedId]);
+
+  const selected = inbox.items.find((i) => i.id === selectedId) ?? null;
 
   return (
     <div className="view">
-      <PageHead eyebrow="Communication" title="Inbox" subtitle="Mentions, replies and updates that need your attention" icon="bell" />
+      <PageHead
+        eyebrow="Communication" title="Inbox" subtitle="Mentions, messages, system alerts and mail — all in one place" icon="bell"
+        actions={<Btn icon="plus" onClick={() => setNewOpen(true)}>New mail</Btn>}
+      />
       {!inbox.live && (
         <div style={{ margin: "0 0 14px", padding: "8px 14px", borderRadius: 10, background: "var(--panel-2)", color: "var(--muted)", fontSize: 13, border: "1px solid var(--border)" }}>
           Demo mode — running on mock data. It goes live once the Shell + be-crm are connected.
@@ -39,47 +52,97 @@ export function Inbox() {
         ))}
       </div>
 
-      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
-        {inbox.loading && <div style={{ padding: 20, color: "var(--muted)" }}>Loading…</div>}
-        {!inbox.loading && inbox.items.length === 0 && (
-          <div style={{ padding: 28, color: "var(--muted)", textAlign: "center" }}>Nothing here — you&apos;re all caught up 🎉</div>
-        )}
-        {inbox.items.map((it) => (
-          <InboxRow
-            key={it.id} it={it}
-            onDone={() => inbox.transition(it.id, "DONE")}
-            onSnooze={() => inbox.transition(it.id, "SNOOZED")}
-            onArchive={() => inbox.transition(it.id, "ARCHIVED")}
-          />
-        ))}
+      <div className="card" style={{ display: "flex", height: 620, padding: 0, overflow: "hidden" }}>
+        {/* Left — the unified item list */}
+        <aside style={{ width: 360, borderRight: "1px solid var(--border)", overflowY: "auto", background: "var(--panel)" }}>
+          {inbox.loading && <div style={{ padding: 20, color: "var(--muted)" }}>Loading…</div>}
+          {!inbox.loading && inbox.items.length === 0 && (
+            <div style={{ padding: 28, color: "var(--muted)", textAlign: "center" }}>Nothing here — you&apos;re all caught up 🎉</div>
+          )}
+          {inbox.items.map((it) => (
+            <ItemRow key={it.id} it={it} active={it.id === selectedId} onClick={() => setSelectedId(it.id)} />
+          ))}
+        </aside>
+
+        {/* Right — read the mail behind the item, or the item detail */}
+        <section style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "var(--bg)" }}>
+          {selected ? (
+            <Detail
+              it={selected}
+              onError={(m) => toast.push({ tone: "error", title: "Failed", desc: m })}
+              onDone={() => inbox.transition(selected.id, "DONE")}
+              onSnooze={() => inbox.transition(selected.id, "SNOOZED")}
+              onArchive={() => inbox.transition(selected.id, "ARCHIVED")}
+            />
+          ) : (
+            <div style={{ margin: "auto", color: "var(--muted)", textAlign: "center" }}>
+              <Icon name="bell" size={38} /><p>Select an item to read</p>
+            </div>
+          )}
+        </section>
       </div>
+
+      <NewMailModal
+        open={newOpen} onClose={() => setNewOpen(false)}
+        onSent={() => { setNewOpen(false); inbox.refetch(); toast.push({ tone: "success", title: "Sent" }); }}
+        onError={(m) => toast.push({ tone: "error", title: "Couldn't send", desc: m })}
+      />
     </div>
   );
 }
 
-function InboxRow({ it, onDone, onSnooze, onArchive }: { it: UiInboxItem; onDone: () => void; onSnooze: () => void; onArchive: () => void }) {
+function ItemRow({ it, active, onClick }: { it: UiInboxItem; active: boolean; onClick: () => void }) {
   const isMention = it.kind === "MENTION";
   return (
-    <div style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "14px 18px", borderBottom: "1px solid var(--border)" }}>
-      <span style={{ marginTop: 2, color: isMention ? "var(--orange)" : "var(--text-2)" }}>
-        <Icon name={isMention ? "chat" : "bell"} size={18} />
+    <button
+      onClick={onClick}
+      style={{
+        display: "flex", gap: 10, alignItems: "flex-start", width: "100%", textAlign: "left",
+        padding: "13px 16px", border: "none", borderBottom: "1px solid var(--border)", cursor: "pointer",
+        background: active ? "var(--panel-2)" : "transparent", color: "var(--text)",
+      }}
+    >
+      <span style={{ marginTop: 2, color: isMention ? "var(--orange)" : "var(--text-2)", flexShrink: 0 }}>
+        <Icon name={it.threadId ? "chat" : isMention ? "chat" : "bell"} size={18} />
       </span>
       <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
+        <div style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>
           <Pill tone={isMention ? "warn" : "muted"}>{KIND_LABEL[it.kind] ?? it.kind}</Pill>
-          <span style={{ fontWeight: 600 }}>{it.title}</span>
+          <span style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{it.title}</span>
         </div>
-        {it.summary && <div style={{ color: "var(--muted)", fontSize: 13, marginTop: 3 }}>{it.summary}</div>}
+        {it.summary && <div style={{ color: "var(--muted)", fontSize: 12.5, marginTop: 3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{it.summary}</div>}
       </div>
-      {it.state === "OPEN" ? (
-        <div style={{ display: "flex", gap: 6, flexShrink: 0 }}>
+      {it.state !== "OPEN" && <Pill tone="muted">{it.state.toLowerCase()}</Pill>}
+    </button>
+  );
+}
+
+function Detail({ it, onError, onDone, onSnooze, onArchive }: {
+  it: UiInboxItem; onError: (m: string) => void; onDone: () => void; onSnooze: () => void; onArchive: () => void;
+}) {
+  return (
+    <>
+      {/* Item actions bar (works for every item, threaded or not) */}
+      {it.state === "OPEN" && (
+        <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>
           <Btn variant="ghost" icon="x" onClick={onArchive}>Archive</Btn>
         </div>
-      ) : (
-        <Pill tone="muted">{it.state.toLowerCase()}</Pill>
       )}
-    </div>
+
+      {it.threadId ? (
+        // A message/mail item → open the conversation to read + reply.
+        <div style={{ flex: 1, minHeight: 0 }}>
+          <MailReader threadId={it.threadId} subject={it.title} onError={onError} />
+        </div>
+      ) : (
+        // A non-threaded item (e.g. a system alert) → show its detail.
+        <div style={{ flex: 1, overflowY: "auto", padding: 22 }}>
+          <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 6 }}>{it.title}</div>
+          {it.summary && <div style={{ color: "var(--muted)", fontSize: 14, lineHeight: 1.55 }}>{it.summary}</div>}
+        </div>
+      )}
+    </>
   );
 }

src/components/dashboard/mail.tsx

@@ -1,16 +1,15 @@
 "use client";
 
 // ============================================================
-// Mail — a dedicated reader for app-to-app and email messages,
-// powered by IIOS via the be-crm data door (crm.mail.*). Distinct
-// from Messenger (chat) and from the work-item Inbox: this shows the
-// actual mail (subject + rendered body) and lets you read + reply +
-// compose. HTML bodies render inside a sandboxed iframe (no scripts).
+// Mail components used INSIDE the Inbox (not a separate tab).
+// The Inbox is the one unified surface — mentions, system messages
+// and mail all live there. These render the mail body + reply, and
+// compose a new message. HTML bodies render in a sandboxed iframe.
 // ============================================================
 
 import { type CSSProperties, useEffect, useState } from "react";
-import { Avatar, Btn, Field, Icon, Modal, PageHead, Pill, useToast } from "./ui";
-import { useMailThreads, useMailThread, useMailCompose, type MailThread, type MailPerson } from "@/lib/mail-api";
+import { Avatar, Btn, Field, Icon, Modal, Pill } from "./ui";
+import { useMailThread, useMailCompose, type MailPerson } from "@/lib/mail-api";
 
 const timeOf = (iso?: string) => {
   if (!iso) return "";
@@ -23,87 +22,9 @@ const inputStyle: CSSProperties = {
   background: "var(--panel)", color: "var(--text)", fontSize: 14, outline: "none",
 };
 
-export function Mail() {
-  const list = useMailThreads();
-  const toast = useToast();
-  const [selected, setSelected] = useState<string | null>(null);
-  const [newOpen, setNewOpen] = useState(false);
-
-  useEffect(() => {
-    if ((!selected || !list.threads.some((t) => t.threadId === selected)) && list.threads[0]) {
-      setSelected(list.threads[0].threadId);
-    }
-  }, [list.threads, selected]);
-
-  const current = list.threads.find((t) => t.threadId === selected) ?? null;
-
-  return (
-    <div className="view">
-      <PageHead
-        eyebrow="Communication" title="Mail" subtitle="Read and send app messages and email — everything in one place" icon="chat"
-        actions={<Btn icon="plus" onClick={() => setNewOpen(true)}>New mail</Btn>}
-      />
-      {!list.live && (
-        <div style={{ margin: "0 0 14px", padding: "8px 14px", borderRadius: 10, background: "var(--panel-2)", color: "var(--muted)", fontSize: 13, border: "1px solid var(--border)" }}>
-          Demo mode — running on mock data. It goes live once the Shell + be-crm are connected.
-        </div>
-      )}
-
-      <div className="card" style={{ display: "flex", height: 640, padding: 0, overflow: "hidden" }}>
-        <aside style={{ width: 320, borderRight: "1px solid var(--border)", overflowY: "auto", background: "var(--panel)" }}>
-          {list.loading && <div style={{ padding: 16, color: "var(--muted)" }}>Loading…</div>}
-          {!list.loading && list.threads.length === 0 && (
-            <div style={{ padding: 16, color: "var(--muted)" }}>No mail yet. Compose a new message.</div>
-          )}
-          {list.threads.map((t) => (
-            <ThreadRow key={t.threadId} t={t} active={t.threadId === selected} onClick={() => setSelected(t.threadId)} />
-          ))}
-        </aside>
-
-        <section style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "var(--bg)" }}>
-          {current ? (
-            <Reader key={current.threadId} thread={current} onError={(m) => toast.push({ tone: "error", title: "Failed", desc: m })} />
-          ) : (
-            <div style={{ margin: "auto", color: "var(--muted)", textAlign: "center" }}>
-              <Icon name="chat" size={38} /><p>Select or compose a message</p>
-            </div>
-          )}
-        </section>
-      </div>
-
-      <NewMailModal
-        open={newOpen} onClose={() => setNewOpen(false)}
-        onSent={() => { setNewOpen(false); list.refetch(); toast.push({ tone: "success", title: "Sent" }); }}
-        onError={(m) => toast.push({ tone: "error", title: "Couldn't send", desc: m })}
-      />
-    </div>
-  );
-}
-
-function ThreadRow({ t, active, onClick }: { t: MailThread; active: boolean; onClick: () => void }) {
-  return (
-    <button
-      onClick={onClick}
-      style={{
-        display: "block", width: "100%", textAlign: "left", padding: "12px 16px", border: "none",
-        borderBottom: "1px solid var(--border)", cursor: "pointer",
-        background: active ? "var(--panel-2)" : "transparent", color: "var(--text)",
-      }}
-    >
-      <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center" }}>
-        <span style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.subject || "(no subject)"}</span>
-        <span style={{ color: "var(--muted)", fontSize: 11, flexShrink: 0 }}>{timeOf(t.lastAt)}</span>
-      </div>
-      <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center", marginTop: 3 }}>
-        <span style={{ color: "var(--muted)", fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.lastMessage ?? "No messages"}</span>
-        {t.unread > 0 && <span style={{ background: "var(--orange)", color: "#fff", borderRadius: 999, fontSize: 11, padding: "1px 7px", flexShrink: 0 }}>{t.unread}</span>}
-      </div>
-    </button>
-  );
-}
-
-function Reader({ thread, onError }: { thread: MailThread; onError: (m: string) => void }) {
-  const t = useMailThread(thread.threadId);
+/** Reader + reply for one mail thread. Used in the Inbox detail pane when an item has a threadId. */
+export function MailReader({ threadId, subject, onError }: { threadId: string; subject: string; onError: (m: string) => void }) {
+  const t = useMailThread(threadId);
   const [draft, setDraft] = useState("");
   const [sending, setSending] = useState(false);
 
@@ -117,29 +38,26 @@ function Reader({ thread, onError }: { thread: MailThread; onError: (m: string)
   }
 
   return (
-    <>
-      <header style={{ padding: "14px 20px", borderBottom: "1px solid var(--border)" }}>
-        <div style={{ fontWeight: 700, fontSize: 16 }}>{thread.subject || "(no subject)"}</div>
-        <div style={{ color: "var(--muted)", fontSize: 12, marginTop: 2 }}>{thread.participants.length} participant(s)</div>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }}>
+      <header style={{ padding: "12px 18px", borderBottom: "1px solid var(--border)" }}>
+        <div style={{ fontWeight: 700, fontSize: 15 }}>{subject || "(no subject)"}</div>
       </header>
-
-      <div style={{ flex: 1, overflowY: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
+      <div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
         {t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>Loading…</div>}
-        {!t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>No messages in this thread.</div>}
+        {!t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>No messages.</div>}
         {t.messages.map((m) => (
           <div key={m.interactionId} style={{ border: "1px solid var(--border)", borderRadius: 12, background: "var(--panel)", overflow: "hidden" }}>
-            <div style={{ padding: "8px 14px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--muted)" }}>
+            <div style={{ padding: "7px 12px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--muted)" }}>
               <span>{m.kind === "EMAIL" ? "Email" : "Reply"}{m.actorId ? ` · ${m.actorId.replace(/^(pp_|cust_)/, "").slice(0, 8)}` : ""}</span>
               <span>{timeOf(m.occurredAt)}</span>
             </div>
             {m.html
-              ? <iframe sandbox="" srcDoc={m.html} title="mail body" style={{ width: "100%", height: 220, border: "none", background: "#fff" }} />
-              : <div style={{ padding: 14, whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14 }}>{m.text}</div>}
+              ? <iframe sandbox="" srcDoc={m.html} title="mail body" style={{ width: "100%", height: 200, border: "none", background: "#fff" }} />
+              : <div style={{ padding: 12, whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14 }}>{m.text}</div>}
           </div>
         ))}
       </div>
-
-      <footer style={{ display: "flex", gap: 8, padding: 14, borderTop: "1px solid var(--border)" }}>
+      <footer style={{ display: "flex", gap: 8, padding: 12, borderTop: "1px solid var(--border)" }}>
         <input
           value={draft} onChange={(e) => setDraft(e.target.value)}
           onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void reply(); } }}
@@ -147,14 +65,15 @@ function Reader({ thread, onError }: { thread: MailThread; onError: (m: string)
         />
         <Btn icon="send" onClick={() => void reply()} disabled={sending || !draft.trim()}>Reply</Btn>
       </footer>
-    </>
+    </div>
   );
 }
 
-function NewMailModal({ open, onClose, onSent, onError }: { open: boolean; onClose: () => void; onSent: () => void; onError: (m: string) => void }) {
+/** Compose a new message — in-app (to a person) or external (to an email). */
+export function NewMailModal({ open, onClose, onSent, onError }: { open: boolean; onClose: () => void; onSent: () => void; onError: (m: string) => void }) {
   const compose = useMailCompose(onSent);
   const [mode, setMode] = useState<"internal" | "external">("internal");
-  const [recipient, setRecipient] = useState("");   // userId (internal) or email (external)
+  const [recipient, setRecipient] = useState("");
   const [subject, setSubject] = useState("");
   const [body, setBody] = useState("");
   const [q, setQ] = useState("");
@@ -177,7 +96,7 @@ function NewMailModal({ open, onClose, onSent, onError }: { open: boolean; onClo
 
   return (
     <Modal
-      open={open} onClose={onClose} title="New mail" subtitle={mode === "internal" ? "To a team member or client (in-app)" : "To an email address"} icon="chat"
+      open={open} onClose={onClose} title="New message" subtitle={mode === "internal" ? "To a team member or client (in-app)" : "To an email address"} icon="chat"
       footer={<>
         <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
         <Btn icon="send" onClick={() => void send()} disabled={!canSend}>{busy ? "Sending…" : "Send"}</Btn>

src/components/dashboard/sidebar.tsx

@@ -33,8 +33,7 @@ export const NAV_GROUPS: NavGroup[] = [
     title: "Communication",
     items: [
       { key: "messenger", label: "Messenger", icon: "send", subtitle: "Chat with your team and clients" },
-      { key: "mail", label: "Mail", icon: "chat", subtitle: "Read and send app messages and email" },
-      { key: "inbox", label: "Inbox", icon: "bell", subtitle: "Mentions, replies and updates for you" },
+      { key: "inbox", label: "Inbox", icon: "bell", subtitle: "Mentions, messages, alerts and mail — all in one" },
     ],
   },
   {
@@ -80,7 +79,7 @@ export const NAV_ITEMS: NavItem[] = NAV_GROUPS.flatMap((g) => g.items);
 // brand-new user with no membership); every other item requires membership, and the
 // items mapped here additionally require the given permission. Unmapped items are
 // shown to any member. This is UX only — be-crm still enforces every action.
-const ALWAYS_VISIBLE = new Set(["dashboard", "profile", "messenger", "mail", "inbox"]);
+const ALWAYS_VISIBLE = new Set(["dashboard", "profile", "messenger", "inbox"]);
 const NAV_PERMISSION: Record<string, string | undefined> = {
   team: "team.manage",
   people: "team.manage",