refactor(inbox): fold mail INTO the Inbox (one unified surface, no Mail tab)

The Inbox is the single communication surface — mentions, needs-reply, system alerts, support updates AND the mail behind them, all in one list. Removed the separate Mail tab. - Inbox is now two-pane: the item list (crm.inbox.*) on the left; clicking an item tied to a thread opens its conversation (MailReader) on the right to read + reply. Non-threaded items (e.g. system alerts) show their detail. Item actions (Done/Snooze/Archive) work for every item. - Compose new mail (in-app or email) from the Inbox header. - mail.tsx trimmed to reusable MailReader + NewMailModal (no standalone tab); sidebar + dashboard reverted to no Mail entry. - The existing work-item Inbox stays the notifier; this makes it the reader too. HTML bodies still render in a sandboxed iframe. tsc + next build clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
feat(mail): dedicated Mail reader in the CRM
2026-07-18 16:43:48 +05:30 · 2026-07-18 16:38:16 +05:30 · 2026-07-16 11:24:03 +00:00 · 2026-07-16 16:52:29 +05:30 · 2026-07-15 21:23:37 +00:00
7 changed files with 717 additions and 107 deletions
@@ -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>
+      )}
+    </>
  );
 }
@@ -0,0 +1,135 @@
+"use client";
+
+// ============================================================
+// 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, Pill } from "./ui";
+import { useMailThread, useMailCompose, type MailPerson } from "@/lib/mail-api";
+
+const timeOf = (iso?: string) => {
+  if (!iso) return "";
+  const d = new Date(iso);
+  return Number.isNaN(+d) ? "" : d.toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+};
+const CUSTOMER_GRAD = "linear-gradient(135deg,#10b981,#059669)";
+const inputStyle: CSSProperties = {
+  width: "100%", padding: "9px 12px", borderRadius: 10, border: "1px solid var(--border)",
+  background: "var(--panel)", color: "var(--text)", fontSize: 14, outline: "none",
+};
+
+/** 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);
+
+  async function reply() {
+    const text = draft.trim();
+    if (!text || sending) return;
+    setDraft(""); setSending(true);
+    try { await t.reply(text); }
+    catch (e) { setDraft(text); onError((e as Error).message); }
+    finally { setSending(false); }
+  }
+
+  return (
+    <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: 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.</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: "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: 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: 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(); } }}
+          placeholder="Reply…" style={inputStyle}
+        />
+        <Btn icon="send" onClick={() => void reply()} disabled={sending || !draft.trim()}>Reply</Btn>
+      </footer>
+    </div>
+  );
+}
+
+/** 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("");
+  const [subject, setSubject] = useState("");
+  const [body, setBody] = useState("");
+  const [q, setQ] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => { if (!open) { setMode("internal"); setRecipient(""); setSubject(""); setBody(""); setQ(""); setBusy(false); } }, [open]);
+
+  const filtered = compose.directory.filter((p) => p.name.toLowerCase().includes(q.trim().toLowerCase()));
+  const canSend = !!recipient && !!subject.trim() && !!body.trim() && !busy;
+
+  async function send() {
+    if (!canSend) return;
+    setBusy(true);
+    try {
+      if (mode === "internal") await compose.sendInternal(recipient, subject.trim(), body.trim());
+      else await compose.sendExternal(recipient.trim(), subject.trim(), body.trim());
+    } catch (e) { onError((e as Error).message); }
+    finally { setBusy(false); }
+  }
+
+  return (
+    <Modal
+      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>
+      </>}
+    >
+      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
+        <Btn variant={mode === "internal" ? "primary" : "outline"} onClick={() => { setMode("internal"); setRecipient(""); }}>In-app</Btn>
+        <Btn variant={mode === "external" ? "primary" : "outline"} onClick={() => { setMode("external"); setRecipient(""); }}>Email</Btn>
+      </div>
+
+      {mode === "internal" ? (
+        <Field label="To (person)">
+          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search people…" style={{ ...inputStyle, marginBottom: 8 }} />
+          <div style={{ maxHeight: 180, overflowY: "auto", display: "flex", flexDirection: "column", gap: 2 }}>
+            {filtered.length === 0 && <div style={{ color: "var(--muted)", padding: 8 }}>No people found.</div>}
+            {filtered.map((p: MailPerson) => (
+              <label key={p.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 10px", borderRadius: 10, cursor: "pointer", background: recipient === p.id ? "var(--panel-2)" : "transparent" }}>
+                <input type="radio" checked={recipient === p.id} onChange={() => setRecipient(p.id)} />
+                <Avatar initials={(p.name.split(/\s+/).map((s) => s[0]).join("").slice(0, 2) || "?").toUpperCase()} size={26} gradient={p.kind === "customer" ? CUSTOMER_GRAD : undefined} />
+                <span style={{ flex: 1 }}>{p.name}</span>
+                <Pill tone="muted">{p.kind}</Pill>
+              </label>
+            ))}
+          </div>
+        </Field>
+      ) : (
+        <Field label="To (email)">
+          <input value={recipient} onChange={(e) => setRecipient(e.target.value)} placeholder="name@company.com" style={inputStyle} />
+        </Field>
+      )}
+
+      <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>
+    </Modal>
+  );
+}
@@ -6,14 +6,14 @@
 // thread view + composer, with a "new chat" people picker that
 // creates a DM (1 person) or group (2+). DM-vs-group and who-can-
 // chat are enforced server-side by IIOS/OPA; this is just UI.
-// Data comes from useMessengerData()/useThread(): local mock when
-// the Shell isn't configured, live be-crm when it is.
+// Live messages, typing, read receipts and reactions come over the
+// IIOS socket (Shell mode); mock keeps the demo working offline.
 // ============================================================

-import { type CSSProperties, useEffect, useRef, useState } from "react";
+import { type CSSProperties, useEffect, useMemo, useRef, useState } from "react";
 import { Avatar, Btn, Field, Icon, Modal, PageHead, Pill, useToast } from "./ui";
-import { useMessengerData, useThread, type Membership, type UiConversation, type UiPerson } from "@/lib/messenger-api";
-import { MessengerSocketProvider } from "@/lib/messenger-socket";
+import { useMessengerData, useThread, type Membership, type UiConversation, type UiMessage, type UiPerson } from "@/lib/messenger-api";
+import { MessengerSocketProvider, useMessengerSocket } from "@/lib/messenger-socket";

 const initialsOf = (name: string) =>
  name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
@@ -24,6 +24,7 @@ const timeOf = (iso?: string) => {
 };
 const GROUP_GRAD = "linear-gradient(135deg,#6366f1,#8b5cf6)";
 const CUSTOMER_GRAD = "linear-gradient(135deg,#10b981,#059669)";
+const REACTION_EMOJIS = ["👍", "❤️", "😂", "😮", "😢", "🎉"];
 const inputStyle: CSSProperties = {
  width: "100%", padding: "9px 12px", borderRadius: 10, border: "1px solid var(--border)",
  background: "var(--panel)", color: "var(--text)", fontSize: 14, outline: "none",
@@ -77,7 +78,7 @@ function MessengerPanel() {

        <section style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
          {current ? (
-            <ThreadView key={current.threadId} conv={current} onError={(msg) => toast.push({ tone: "error", title: "Message failed", desc: msg })} />
+            <ThreadView key={current.threadId} conv={current} nameOf={m.nameOf} onError={(msg) => toast.push({ tone: "error", title: "Message failed", desc: msg })} />
          ) : (
            <div style={{ margin: "auto", color: "var(--muted)", textAlign: "center" }}>
              <Icon name="send" size={38} />
@@ -117,36 +118,55 @@ function ConversationRow({ c, active, onClick }: { c: UiConversation; active: bo
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center" }}>
          <span style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.title}</span>
-          {c.membership === "group" && <Pill tone="muted">group</Pill>}
+          <span style={{ color: "var(--muted)", fontSize: 11, flexShrink: 0 }}>{timeOf(c.lastAt)}</span>
        </div>
-        <div style={{ color: "var(--muted)", fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
-          {c.lastMessage ?? "No messages yet"}
+        <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center" }}>
+          <span style={{ color: "var(--muted)", fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+            {c.lastMessage ?? "No messages yet"}
+          </span>
+          {c.unread > 0 && (
+            <span style={{ background: "var(--orange)", color: "#fff", borderRadius: 999, fontSize: 11, padding: "1px 7px", flexShrink: 0 }}>{c.unread}</span>
+          )}
        </div>
      </div>
-      {c.unread > 0 && (
-        <span style={{ background: "var(--orange)", color: "#fff", borderRadius: 999, fontSize: 11, padding: "1px 7px" }}>{c.unread}</span>
-      )}
    </button>
  );
 }

-function ThreadView({ conv, onError }: { conv: UiConversation; onError: (m: string) => void }) {
+function ThreadView({ conv, nameOf, onError }: { conv: UiConversation; nameOf: (id: string) => string; onError: (m: string) => void }) {
  const t = useThread(conv.threadId);
+  const socket = useMessengerSocket();
  const [draft, setDraft] = useState("");
  const [sending, setSending] = useState(false);
+  const [replyTo, setReplyTo] = useState<UiMessage | null>(null);
  const endRef = useRef<HTMLDivElement>(null);
+  const typingSentAt = useRef(0);

  useEffect(() => { endRef.current?.scrollIntoView({ behavior: "smooth" }); }, [t.messages.length]);

+  const byId = useMemo(() => Object.fromEntries(t.messages.map((m) => [m.id, m])), [t.messages]);
+  const lastMineId = useMemo(() => [...t.messages].reverse().find((m) => m.mine)?.id ?? null, [t.messages]);
+
+  function onDraftChange(v: string) {
+    setDraft(v);
+    const now = Date.now();
+    if (socket && now - typingSentAt.current > 2000) { socket.sendTyping(conv.threadId); typingSentAt.current = now; }
+  }
+
  async function submit() {
    const text = draft.trim();
    if (!text || sending) return;
-    setDraft(""); setSending(true);
-    try { await t.send(text); }
+    const parent = replyTo?.id;
+    setDraft(""); setReplyTo(null); setSending(true);
+    try { await t.send(text, parent ? { parentInteractionId: parent } : undefined); }
    catch (e) { setDraft(text); onError((e as Error).message); }
    finally { setSending(false); }
  }

+  const typingLabel = t.typingUserIds.length === 1
+    ? `${nameOf(t.typingUserIds[0])} is typing…`
+    : t.typingUserIds.length > 1 ? "Several people are typing…" : "";
+
  return (
    <>
      <header style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 18px", borderBottom: "1px solid var(--border)" }}>
@@ -159,28 +179,37 @@ function ThreadView({ conv, onError }: { conv: UiConversation; onError: (m: stri
        </div>
      </header>

-      <div style={{ flex: 1, overflowY: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 8, background: "var(--bg)" }}>
+      <div style={{ flex: 1, overflowY: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 10, background: "var(--bg)" }}>
        {t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>Loading messages…</div>}
        {!t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>No messages yet — say hello 👋</div>}
        {t.messages.map((msg) => (
-          <div key={msg.id} style={{ alignSelf: msg.mine ? "flex-end" : "flex-start", maxWidth: "72%" }}>
-            <div style={{
-              background: msg.mine ? "var(--grad-brand)" : "var(--panel-2)", color: msg.mine ? "#fff" : "var(--text)",
-              padding: "8px 12px", borderRadius: 14,
-              borderBottomRightRadius: msg.mine ? 4 : 14, borderBottomLeftRadius: msg.mine ? 14 : 4,
-              whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14,
-            }}>
-              {msg.text}
-            </div>
-            <div style={{ fontSize: 10.5, color: "var(--muted)", textAlign: msg.mine ? "right" : "left", marginTop: 2 }}>{timeOf(msg.at)}</div>
-          </div>
+          <MessageBubble
+            key={msg.id} msg={msg}
+            parent={msg.parentInteractionId ? byId[msg.parentInteractionId] : undefined}
+            seen={msg.id === lastMineId && t.seenIds.has(msg.id)}
+            showStatus={msg.id === lastMineId}
+            onReact={(emoji) => t.react(msg.id, emoji)}
+            onReply={() => setReplyTo(msg)}
+          />
        ))}
        <div ref={endRef} />
      </div>

+      <div style={{ minHeight: 18, padding: "0 18px", color: "var(--muted)", fontSize: 12, fontStyle: "italic" }}>{typingLabel}</div>
+
+      {replyTo && (
+        <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "0 14px", padding: "8px 12px", borderRadius: 10, background: "var(--panel-2)", borderLeft: "3px solid var(--orange)" }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ fontSize: 11, color: "var(--orange)", fontWeight: 600 }}>Replying to {replyTo.mine ? "yourself" : nameOf(replyTo.senderId ?? "")}</div>
+            <div style={{ fontSize: 12.5, color: "var(--muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{replyTo.text}</div>
+          </div>
+          <button onClick={() => setReplyTo(null)} style={{ background: "none", border: "none", color: "var(--muted)", cursor: "pointer", fontSize: 16 }} aria-label="Cancel reply">×</button>
+        </div>
+      )}
+
      <footer style={{ display: "flex", gap: 8, padding: 14, borderTop: "1px solid var(--border)" }}>
        <input
-          value={draft} onChange={(e) => setDraft(e.target.value)}
+          value={draft} onChange={(e) => onDraftChange(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void submit(); } }}
          placeholder="Type a message…" style={inputStyle}
        />
@@ -190,6 +219,81 @@ function ThreadView({ conv, onError }: { conv: UiConversation; onError: (m: stri
  );
 }

+function MessageBubble({
+  msg, parent, seen, showStatus, onReact, onReply,
+}: {
+  msg: UiMessage; parent?: UiMessage; seen: boolean; showStatus: boolean;
+  onReact: (emoji: string) => void; onReply: () => void;
+}) {
+  const [hover, setHover] = useState(false);
+  const [picker, setPicker] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => { setHover(false); setPicker(false); }}
+      style={{ alignSelf: msg.mine ? "flex-end" : "flex-start", maxWidth: "72%", display: "flex", flexDirection: "column", alignItems: msg.mine ? "flex-end" : "flex-start", position: "relative" }}
+    >
+      {parent && (
+        <div style={{ maxWidth: "100%", padding: "4px 10px", marginBottom: 3, borderRadius: 8, background: "var(--panel-2)", borderLeft: "3px solid var(--orange)", fontSize: 12, color: "var(--muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+          <span style={{ opacity: 0.8 }}>↩ {parent.text}</span>
+        </div>
+      )}
+
+      <div style={{ display: "flex", alignItems: "center", gap: 6, flexDirection: msg.mine ? "row-reverse" : "row" }}>
+        <div style={{
+          background: msg.mine ? "var(--grad-brand)" : "var(--panel)", color: msg.mine ? "#fff" : "var(--text)",
+          padding: "8px 12px", borderRadius: 14,
+          borderBottomRightRadius: msg.mine ? 4 : 14, borderBottomLeftRadius: msg.mine ? 14 : 4,
+          border: msg.mine ? "none" : "1px solid var(--border)",
+          whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14,
+        }}>
+          {msg.text}
+        </div>
+        {hover && (
+          <div style={{ display: "flex", gap: 2, position: "relative" }}>
+            <button onClick={() => setPicker((p) => !p)} title="React" style={actionBtnStyle}>🙂</button>
+            <button onClick={onReply} title="Reply" style={actionBtnStyle}>↩</button>
+            {picker && (
+              <div style={{ position: "absolute", bottom: "100%", [msg.mine ? "right" : "left"]: 0, marginBottom: 4, display: "flex", gap: 2, padding: 4, borderRadius: 999, background: "var(--panel)", border: "1px solid var(--border)", boxShadow: "0 6px 20px rgba(0,0,0,0.35)", zIndex: 5 }}>
+                {REACTION_EMOJIS.map((e) => (
+                  <button key={e} onClick={() => { onReact(e); setPicker(false); }} style={{ ...actionBtnStyle, fontSize: 16 }}>{e}</button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {msg.reactions && msg.reactions.length > 0 && (
+        <div style={{ display: "flex", gap: 4, marginTop: 3, flexWrap: "wrap" }}>
+          {msg.reactions.map((r) => (
+            <button
+              key={r.emoji} onClick={() => onReact(r.emoji)}
+              style={{
+                display: "inline-flex", alignItems: "center", gap: 3, padding: "1px 7px", borderRadius: 999, fontSize: 12, cursor: "pointer",
+                background: r.mine ? "rgba(253,169,19,0.18)" : "var(--panel-2)",
+                border: `1px solid ${r.mine ? "var(--orange)" : "var(--border)"}`, color: "var(--text)",
+              }}
+            >
+              <span>{r.emoji}</span><span style={{ color: "var(--muted)" }}>{r.count}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div style={{ fontSize: 10.5, color: "var(--muted)", marginTop: 2 }}>
+        {timeOf(msg.at)}{showStatus && msg.mine ? ` · ${seen ? "Seen" : "Sent"}` : ""}
+      </div>
+    </div>
+  );
+}
+
+const actionBtnStyle: CSSProperties = {
+  background: "var(--panel-2)", border: "1px solid var(--border)", borderRadius: 8,
+  width: 26, height: 26, display: "grid", placeItems: "center", cursor: "pointer", fontSize: 13, color: "var(--text)", padding: 0,
+};
+
 function NewChatModal({
  open, onClose, directory, onCreate,
 }: {
@@ -33,7 +33,7 @@ export const NAV_GROUPS: NavGroup[] = [
    title: "Communication",
    items: [
      { key: "messenger", label: "Messenger", icon: "send", subtitle: "Chat with your team and clients" },
-      { 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" },
    ],
  },
  {
@@ -0,0 +1,117 @@
+"use client";
+
+// Mail data layer. A dedicated Mail reader over the be-crm data door (crm.mail.*), distinct from
+// the Messenger chat and from the work-item Inbox. Live via the AppShell SDK; a small mock keeps the
+// demo working before the Shell + be-crm are connected.
+//
+// Live contract (be-crm):
+//   query crm.mail.list      {}                          -> MailThread[]
+//   query crm.mail.history   { threadId }                -> MailMessage[]
+//   cmd   crm.mail.reply     { threadId, content }       -> { interactionId, threadId }
+//   cmd   crm.mail.internal  { recipientUserId, subject?, text?, html? } -> { threadId }
+//   cmd   crm.mail.send      { target, subject?, text?, html?, mirrorToUserId? } -> { commandId }
+//   query crm.messenger.directory { kind, limit }        -> people to compose to (reused)
+
+import { useCallback, useMemo, useState } from "react";
+import { useAppShell, useQuery } from "@abe-kap/appshell-sdk/react";
+import { isShellConfigured } from "./appshell";
+
+export interface MailThread {
+  threadId: string; subject: string | null; participants: string[]; unread: number; lastMessage?: string; lastAt?: string;
+}
+export interface MailMessage {
+  interactionId: string; actorId: string | null; kind: string; occurredAt: string; html: string | null; text: string | null;
+}
+export interface MailPerson { id: string; name: string; kind: "staff" | "customer" }
+
+const SHELL = isShellConfigured();
+
+/* ============================ Thread list ============================ */
+
+export interface MailListData {
+  live: boolean; loading: boolean; error: string | null; threads: MailThread[]; refetch: () => void;
+}
+
+export function useMailThreads(): MailListData {
+  if (SHELL) {
+    const q = useQuery<MailThread[]>("crm.mail.list", {});
+    return { live: true, loading: q.loading, error: q.error?.message ?? null, threads: q.data ?? [], refetch: q.refetch };
+  }
+  return { live: false, loading: false, error: null, threads: MOCK_THREADS, refetch: () => {} };
+}
+
+/* ============================ One thread ============================ */
+
+export interface MailThreadData {
+  loading: boolean; error: string | null; messages: MailMessage[]; reply: (content: string) => Promise<void>; refetch: () => void;
+}
+
+export function useMailThread(threadId: string | null): MailThreadData {
+  if (SHELL) return useLiveThread(threadId);
+  return useMockThread(threadId);
+}
+
+function useLiveThread(threadId: string | null): MailThreadData {
+  const { sdk } = useAppShell();
+  const q = useQuery<MailMessage[]>("crm.mail.history", threadId ? { threadId } : { threadId: "" });
+  const reply = useCallback(async (content: string) => {
+    if (!threadId) return;
+    await sdk.command("crm.mail.reply", { threadId, content });
+    q.refetch();
+  }, [sdk, threadId, q]);
+  return { loading: q.loading, error: q.error?.message ?? null, messages: threadId ? (q.data ?? []) : [], reply, refetch: q.refetch };
+}
+
+/* ============================ Compose ============================ */
+
+export interface ComposeData {
+  directory: MailPerson[];
+  sendInternal: (recipientUserId: string, subject: string, text: string) => Promise<void>;
+  sendExternal: (target: string, subject: string, text: string, mirrorToUserId?: string) => Promise<void>;
+}
+
+export function useMailCompose(onSent: () => void): ComposeData {
+  if (SHELL) {
+    const { sdk } = useAppShell();
+    const dirQ = useQuery<MailPerson[]>("crm.messenger.directory", { kind: "all", limit: 100 });
+    const directory = useMemo(() => (dirQ.data ?? []).map((d) => ({ id: (d as unknown as { id: string }).id, name: (d as unknown as { displayName?: string; name?: string }).displayName ?? (d as unknown as { name?: string }).name ?? "", kind: (d as MailPerson).kind })), [dirQ.data]);
+    const sendInternal = useCallback(async (recipientUserId: string, subject: string, text: string) => {
+      await sdk.command("crm.mail.internal", { recipientUserId, subject, text, html: `<p>${escapeHtml(text)}</p>` });
+      onSent();
+    }, [sdk, onSent]);
+    const sendExternal = useCallback(async (target: string, subject: string, text: string, mirrorToUserId?: string) => {
+      await sdk.command("crm.mail.send", { target, subject, text, html: `<p>${escapeHtml(text)}</p>`, ...(mirrorToUserId ? { mirrorToUserId } : {}) });
+      onSent();
+    }, [sdk, onSent]);
+    return { directory, sendInternal, sendExternal };
+  }
+  return { directory: MOCK_PEOPLE, sendInternal: async () => onSent(), sendExternal: async () => onSent() };
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+/* ============================ Mock (demo mode) ============================ */
+
+const now = () => new Date().toISOString();
+const MOCK_PEOPLE: MailPerson[] = [
+  { id: "pp_sofia", name: "Sofia Ramirez", kind: "staff" },
+  { id: "cust_acme", name: "Acme Roofing (Client)", kind: "customer" },
+];
+const MOCK_THREADS: MailThread[] = [
+  { threadId: "mt_1", subject: "Welcome to the Founders Club", participants: ["you", "system"], unread: 1, lastMessage: "Thanks for joining…", lastAt: now() },
+  { threadId: "mt_2", subject: "Storm response — East side", participants: ["you", "pp_sofia"], unread: 0, lastMessage: "Crew rolling out at 7", lastAt: now() },
+];
+function useMockThread(threadId: string | null): MailThreadData {
+  const [extra, setExtra] = useState<MailMessage[]>([]);
+  const base: MailMessage[] = threadId === "mt_1"
+    ? [{ interactionId: "m1", actorId: "system", kind: "EMAIL", occurredAt: now(), html: "<p>Thanks for joining the <b>Founders Club</b>. Set up your account to get started.</p>", text: "Thanks for joining the Founders Club." }]
+    : threadId === "mt_2"
+      ? [{ interactionId: "m2", actorId: "pp_sofia", kind: "EMAIL", occurredAt: now(), html: "<p>Crew is rolling out at 7. Confirm the Henderson scope?</p>", text: "Crew rolling out at 7." }]
+      : [];
+  const reply = useCallback(async (content: string) => {
+    setExtra((l) => [...l, { interactionId: `r_${l.length}`, actorId: "you", kind: "MESSAGE", occurredAt: now(), html: null, text: content }]);
+  }, []);
+  return { loading: false, error: null, messages: threadId ? [...base, ...extra] : [], reply, refetch: () => {} };
+}
@@ -12,10 +12,12 @@
 //   cmd   crm.messenger.send             { threadId, content }   -> MessengerMessage
 //   cmd   crm.messenger.participant.add  { threadId, userId }
 //
-// v1 uses REST + polling for the live stream; v2 swaps in the IIOS MessageSocket (see messenger-socket.ts).
+// v1 uses REST + polling for the live stream; v2 layers the IIOS MessageSocket (messenger-socket.tsx)
+// on top for live messages, typing, read receipts, and reactions.

 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useAppShell, useQuery } from "@abe-kap/appshell-sdk/react";
+import { useAppShell, useAuth, useQuery } from "@abe-kap/appshell-sdk/react";
+import type { AnnotationEvent, AnnotationGroup } from "@insignia/iios-kernel-client";
 import { isShellConfigured } from "./appshell";
 import { useMessengerSocket } from "./messenger-socket";

@@ -25,7 +27,12 @@ export interface UiConversation {
  threadId: string; title: string; subject: string | null; membership: Membership | null;
  participants: string[]; unread: number; lastMessage?: string; lastAt?: string;
 }
-export interface UiMessage { id: string; actorId: string | null; text: string; at: string; mine: boolean }
+export interface UiReaction { emoji: string; count: number; mine: boolean }
+export interface UiMessage {
+  id: string; actorId: string | null; senderId?: string | null; text: string; at: string; mine: boolean;
+  parentInteractionId?: string | null;
+  reactions?: UiReaction[];
+}

 interface DirectoryDTO { id: string; displayName: string; kind: "staff" | "customer" }
 interface ConversationDTO {
@@ -36,9 +43,25 @@ interface MessageDTO { interactionId: string; actorId: string | null; kind: stri

 const SHELL = isShellConfigured();
 const POLL_MS = 4000;
+const TYPING_TTL_MS = 3500;

 const shortId = (id: string) => id.replace(/^(pp_|cust_)/, "").slice(0, 6);

+/** Turn the kernel's generic annotation aggregates into reaction chips. `users` may hold user or
+ *  actor ids depending on the source, so `mine` is best-effort; a fresh annotation event corrects it. */
+export function toReactions(annotations: AnnotationGroup[] | undefined, myId?: string): UiReaction[] {
+  if (!annotations) return [];
+  return annotations
+    .filter((a) => a.type === "reaction" && a.users.length > 0)
+    .map((a) => ({ emoji: a.value, count: a.users.length, mine: !!myId && a.users.includes(myId) }));
+}
+
+function applyAnnotation(prev: UiReaction[] | undefined, e: AnnotationEvent, myId?: string): UiReaction[] {
+  const base = (prev ?? []).filter((r) => r.emoji !== e.value);
+  if (e.type !== "reaction" || e.users.length === 0) return base;
+  return [...base, { emoji: e.value, count: e.users.length, mine: !!myId && e.users.includes(myId) }];
+}
+
 /* ======================================================================== */
 /* Public hooks                                                             */
 /* ======================================================================== */
@@ -55,7 +78,10 @@ export interface MessengerData {
 export interface ThreadData {
  loading: boolean; error: string | null;
  messages: UiMessage[];
-  send: (content: string) => Promise<void>;
+  send: (content: string, opts?: { parentInteractionId?: string }) => Promise<void>;
+  react: (interactionId: string, emoji: string) => void;
+  typingUserIds: string[];
+  seenIds: Set<string>;
  refetch: () => void;
 }

@@ -67,11 +93,14 @@ export function useThread(threadId: string): ThreadData {
 }

 /* ======================================================================== */
-/* Live implementation (be-crm data door)                                   */
+/* Live implementation (be-crm data door + IIOS socket)                     */
 /* ======================================================================== */

 function useLiveMessenger(): MessengerData {
  const { sdk } = useAppShell();
+  const { user } = useAuth();
+  const socket = useMessengerSocket();
+  const myId = user?.id;
  const dirQ = useQuery<DirectoryDTO[]>("crm.messenger.directory", { kind: "all", limit: 100 });
  const convQ = useQuery<ConversationDTO[]>("crm.messenger.conversation.list", {});

@@ -82,9 +111,25 @@ function useLiveMessenger(): MessengerData {
  const nameById = useMemo(() => Object.fromEntries(directory.map((p) => [p.id, p.name])), [directory]);
  const nameOf = useCallback((id: string) => nameById[id] ?? `User ${shortId(id)}`, [nameById]);

+  // Live sidebar previews: patch lastMessage/lastAt the instant a message arrives on any thread,
+  // then reconcile authoritative unread/order with a debounced refetch.
+  const [previews, setPreviews] = useState<Record<string, { lastMessage: string; lastAt: string }>>({});
+  const refetchRef = useRef(convQ.refetch);
+  refetchRef.current = convQ.refetch;
+  useEffect(() => {
+    if (!socket) return;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const off = socket.onAnyMessage((threadId, m) => {
+      setPreviews((p) => ({ ...p, [threadId]: { lastMessage: m.text, lastAt: m.at } }));
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => refetchRef.current(), 600);
+    });
+    return () => { off(); if (timer) clearTimeout(timer); };
+  }, [socket]);
+
  const conversations: UiConversation[] = useMemo(
-    () => (convQ.data ?? []).map((c) => shape(c, nameOf)),
-    [convQ.data, nameOf],
+    () => (convQ.data ?? []).map((c) => shape(c, nameOf, myId, previews[c.threadId])),
+    [convQ.data, nameOf, myId, previews],
  );

  const refetch = useCallback(() => { dirQ.refetch(); convQ.refetch(); }, [dirQ, convQ]);
@@ -111,6 +156,11 @@ function useLiveThread(threadId: string): ThreadData {
  const q = useQuery<MessageDTO[]>("crm.messenger.history", { threadId });
  const [socketMsgs, setSocketMsgs] = useState<UiMessage[]>([]);
  const [myActorId, setMyActorId] = useState<string | null>(null);
+  const myActorIdRef = useRef<string | null>(null);
+  myActorIdRef.current = myActorId;
+  const [typing, setTyping] = useState<Record<string, number>>({}); // userId -> expiry ts
+  const [seenIds, setSeenIds] = useState<Set<string>>(new Set());
+  const myId = socket?.myUserId;

  // REST poll — the fallback whenever the live socket isn't connected.
  const refetchRef = useRef(q.refetch);
@@ -121,29 +171,74 @@ function useLiveThread(threadId: string): ThreadData {
    return () => clearInterval(t);
  }, [socketReady, threadId]);

-  // Socket (primary): load history + subscribe to live messages once connected.
+  // Socket (primary): load history + subscribe to live messages, typing, receipts, reactions.
  useEffect(() => {
    if (!socket || !socketReady) return;
    let alive = true;
-    setSocketMsgs([]);
+    setSocketMsgs([]); setSeenIds(new Set()); setTyping({});
    void socket.openThread(threadId).then((hist) => { if (alive) setSocketMsgs(hist); }).catch(() => {});
-    const unsub = socket.subscribe(threadId, (m) => setSocketMsgs((l) => (l.some((x) => x.id === m.id) ? l : [...l, m])));
-    return () => { alive = false; unsub(); };
-  }, [socket, socketReady, threadId]);
+
+    const offMsg = socket.subscribe(threadId, (m) =>
+      setSocketMsgs((l) => (l.some((x) => x.id === m.id) ? l : [...l, m])),
+    );
+    const offTyping = socket.onTyping(threadId, (userId) =>
+      setTyping((t) => ({ ...t, [userId]: Date.now() + TYPING_TTL_MS })),
+    );
+    // Receipts are a global stream (no threadId). Count only reads by the OTHER side; seenMine then
+    // narrows to my messages in this thread.
+    const offReceipt = socket.onReceipt((e) => {
+      if (e.actorId === myActorIdRef.current) return;
+      setSeenIds((s) => (s.has(e.interactionId) ? s : new Set(s).add(e.interactionId)));
+    });
+    const offAnn = socket.onAnnotation(threadId, (e) =>
+      setSocketMsgs((l) => l.map((m) => (m.id === e.interactionId ? { ...m, reactions: applyAnnotation(m.reactions, e, myId) } : m))),
+    );
+    return () => { alive = false; offMsg(); offTyping(); offReceipt(); offAnn(); };
+  }, [socket, socketReady, threadId, myId]);
+
+  // Learn my own actor id from a message I sent, so receipts from OTHER actors read as "seen".
+  useEffect(() => {
+    const mine = socketMsgs.find((m) => m.mine && m.actorId);
+    if (mine?.actorId && mine.actorId !== myActorId) setMyActorId(mine.actorId);
+  }, [socketMsgs, myActorId]);
+
+  // Tell the server I've read the latest message (drives the other side's "seen" tick).
+  useEffect(() => {
+    if (!socket || !socketReady || socketMsgs.length === 0) return;
+    socket.markRead(threadId, socketMsgs[socketMsgs.length - 1].id);
+  }, [socket, socketReady, threadId, socketMsgs]);
+
+  // Expire stale typing entries.
+  const typingUserIds = useMemo(() => {
+    const now = Date.now();
+    return Object.entries(typing).filter(([, exp]) => exp > now).map(([u]) => u);
+  }, [typing]);
+  useEffect(() => {
+    if (typingUserIds.length === 0) return;
+    const t = setTimeout(() => setTyping((p) => ({ ...p })), TYPING_TTL_MS);
+    return () => clearTimeout(t);
+  }, [typingUserIds.length, typing]);

  const restMsgs: UiMessage[] = useMemo(
    () => (q.data ?? []).map((m) => ({
-      id: m.interactionId, actorId: m.actorId, text: m.text ?? "", at: m.occurredAt,
-      mine: !!myActorId && m.actorId === myActorId,
+      id: m.interactionId, actorId: m.actorId, senderId: null, text: m.text ?? "", at: m.occurredAt,
+      mine: !!myActorId && m.actorId === myActorId, reactions: [],
    })),
    [q.data, myActorId],
  );

  const messages = socketReady ? socketMsgs : restMsgs;

-  const send = useCallback(async (content: string) => {
+  // My messages the other side has read (receipts carry the other actor's id).
+  const seenMine = useMemo(() => {
+    const out = new Set<string>();
+    for (const id of seenIds) if (messages.some((m) => m.id === id && m.mine)) out.add(id);
+    return out;
+  }, [seenIds, messages]);
+
+  const send = useCallback(async (content: string, opts?: { parentInteractionId?: string }) => {
    if (socket && socketReady) {
-      await socket.send(threadId, content); // echoes back over the socket as a 'message' event
+      await socket.send(threadId, content, opts); // echoes back over the socket as a 'message' event
    } else {
      const m = (await sdk.command("crm.messenger.send", { threadId, content })) as MessageDTO;
      if (m.actorId) setMyActorId(m.actorId);
@@ -151,16 +246,35 @@ function useLiveThread(threadId: string): ThreadData {
    }
  }, [socket, socketReady, threadId, sdk, q]);

-  return { loading: q.loading && !socketReady, error: q.error?.message ?? null, messages, send, refetch: q.refetch };
+  const react = useCallback((interactionId: string, emoji: string) => {
+    if (socket && socketReady) socket.react(threadId, interactionId, emoji);
+  }, [socket, socketReady, threadId]);
+
+  return {
+    loading: q.loading && !socketReady, error: q.error?.message ?? null,
+    messages, send, react, typingUserIds, seenIds: seenMine, refetch: q.refetch,
+  };
 }

-function shape(c: ConversationDTO, nameOf: (id: string) => string): UiConversation {
+function shape(
+  c: ConversationDTO,
+  nameOf: (id: string) => string,
+  myId: string | undefined,
+  overlay?: { lastMessage: string; lastAt: string },
+): UiConversation {
+  // A DM's title is the OTHER person — never yourself, and never the raw unknown-id fallback for both.
+  const others = myId ? c.participants.filter((p) => p !== myId) : c.participants;
  const title = c.subject?.trim()
    || (c.membership === "group"
-      ? "Group"
-      : c.participants.map(nameOf).join(", ") || "Conversation");
-  return { threadId: c.threadId, title, subject: c.subject, membership: c.membership,
-    participants: c.participants, unread: c.unread, ...(c.lastMessage ? { lastMessage: c.lastMessage } : {}), ...(c.lastAt ? { lastAt: c.lastAt } : {}) };
+      ? `Group · ${c.participants.length}`
+      : (others.map(nameOf).join(", ") || nameOf(c.participants[0] ?? "") || "Conversation"));
+  const lastMessage = overlay?.lastMessage ?? c.lastMessage;
+  const lastAt = overlay?.lastAt ?? c.lastAt;
+  return {
+    threadId: c.threadId, title, subject: c.subject, membership: c.membership,
+    participants: c.participants, unread: c.unread,
+    ...(lastMessage ? { lastMessage } : {}), ...(lastAt ? { lastAt } : {}),
+  };
 }

 /* ======================================================================== */
@@ -183,9 +297,9 @@ let MOCK_SEQ = 100;
 // conversation list and the open thread stay in sync (no globalThis, no render writes).
 const MOCK_STORE = new Map<string, MockThread>([
  ["th_mock_1", { threadId: "th_mock_1", membership: "dm", subject: null, participants: ["me", "pp_sofia"],
-    messages: [{ id: "m1", actorId: "pp_sofia", text: "Can you review the Henderson estimate?", at: now(), mine: false }] }],
+    messages: [{ id: "m1", actorId: "pp_sofia", text: "Can you review the Henderson estimate?", at: now(), mine: false, reactions: [] }] }],
  ["th_mock_2", { threadId: "th_mock_2", membership: "group", subject: "Storm response — East side", participants: ["me", "pp_dan", "pp_priya"],
-    messages: [{ id: "m2", actorId: "pp_dan", text: "Crew is rolling out at 7.", at: now(), mine: false }] }],
+    messages: [{ id: "m2", actorId: "pp_dan", text: "Crew is rolling out at 7.", at: now(), mine: false, reactions: [] }] }],
 ]);
 const mockListeners = new Set<() => void>();
 const notifyMock = () => mockListeners.forEach((l) => l());
@@ -227,12 +341,31 @@ function useMockMessenger(): MessengerData {
 function useMockThread(threadId: string): ThreadData {
  useMockSubscription();
  const thread = MOCK_STORE.get(threadId);
-  const send = useCallback(async (content: string) => {
+  const send = useCallback(async (content: string, opts?: { parentInteractionId?: string }) => {
    const t = MOCK_STORE.get(threadId);
    if (t) {
-      t.messages = [...t.messages, { id: `m_${MOCK_SEQ++}`, actorId: "me", text: content, at: now(), mine: true }];
+      t.messages = [...t.messages, {
+        id: `m_${MOCK_SEQ++}`, actorId: "me", text: content, at: now(), mine: true, reactions: [],
+        ...(opts?.parentInteractionId ? { parentInteractionId: opts.parentInteractionId } : {}),
+      }];
      notifyMock();
    }
  }, [threadId]);
-  return { loading: false, error: null, messages: thread?.messages ?? [], send, refetch: notifyMock };
+  const react = useCallback((interactionId: string, emoji: string) => {
+    const t = MOCK_STORE.get(threadId);
+    if (!t) return;
+    t.messages = t.messages.map((m) => {
+      if (m.id !== interactionId) return m;
+      const has = (m.reactions ?? []).find((r) => r.emoji === emoji);
+      const reactions = has
+        ? (m.reactions ?? []).filter((r) => r.emoji !== emoji)
+        : [...(m.reactions ?? []), { emoji, count: 1, mine: true }];
+      return { ...m, reactions };
+    });
+    notifyMock();
+  }, [threadId]);
+  return {
+    loading: false, error: null, messages: thread?.messages ?? [], send, react,
+    typingUserIds: [], seenIds: new Set(), refetch: notifyMock,
+  };
 }
@@ -5,20 +5,37 @@
 // the be-crm data door (crm.messenger.realtime). Threads subscribe through a context; the socket
 // re-opens every joined thread on reconnect (handled inside the SDK). In mock mode this is a no-op
 // passthrough and the thread hook falls back to the REST poll.
+//
+// Beyond plain messages, the kernel exposes typing, read receipts, and reactions (generic
+// annotations). This provider fans each server event out to per-thread listeners so the UI can
+// render typing indicators, "seen" ticks, and emoji reactions live.

 import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from "react";
-import { MessageSocket, type Message } from "@insignia/iios-kernel-client";
+import { MessageSocket, type Message, type AnnotationEvent } from "@insignia/iios-kernel-client";
 import { useAuth, useQuery } from "@abe-kap/appshell-sdk/react";
 import { isShellConfigured } from "./appshell";
-import type { UiMessage } from "./messenger-api";
+import { toReactions, type UiMessage } from "./messenger-api";

 interface RealtimeDTO { url: string; audience: string; token?: string }

+export interface ReceiptHit { interactionId: string; actorId: string }
+
 export interface MessengerSocket {
  ready: boolean;
+  myUserId?: string;
  openThread: (threadId: string) => Promise<UiMessage[]>;
-  send: (threadId: string, content: string) => Promise<void>;
+  send: (threadId: string, content: string, opts?: { parentInteractionId?: string }) => Promise<void>;
  subscribe: (threadId: string, cb: (m: UiMessage) => void) => () => void;
+  /** Fires for EVERY inbound message regardless of thread — drives live sidebar previews. */
+  onAnyMessage: (cb: (threadId: string, m: UiMessage) => void) => () => void;
+  sendTyping: (threadId: string) => void;
+  onTyping: (threadId: string, cb: (userId: string) => void) => () => void;
+  markRead: (threadId: string, interactionId: string) => void;
+  /** The kernel's receipt event carries no threadId, so this is a global stream; the thread hook
+   *  filters to receipts for its own (mine) messages. */
+  onReceipt: (cb: (e: ReceiptHit) => void) => () => void;
+  react: (threadId: string, interactionId: string, emoji: string) => void;
+  onAnnotation: (threadId: string, cb: (e: AnnotationEvent) => void) => () => void;
 }

 const Ctx = createContext<MessengerSocket | null>(null);
@@ -27,8 +44,10 @@ export function useMessengerSocket(): MessengerSocket | null { return useContext
 const SHELL = isShellConfigured();

 const toUi = (m: Message, myUserId?: string): UiMessage => ({
-  id: m.id, actorId: m.senderActorId ?? null, text: m.content ?? "", at: m.createdAt,
+  id: m.id, actorId: m.senderActorId ?? null, senderId: m.senderId ?? null, text: m.content ?? "", at: m.createdAt,
  mine: !!myUserId && m.senderId === myUserId,
+  ...(m.parentInteractionId ? { parentInteractionId: m.parentInteractionId } : {}),
+  reactions: toReactions(m.annotations, myUserId),
 });

 export function MessengerSocketProvider({ children }: { children: ReactNode }) {
@@ -37,15 +56,33 @@ export function MessengerSocketProvider({ children }: { children: ReactNode }) {
  return <LiveSocketProvider>{children}</LiveSocketProvider>;
 }

+// A tiny per-thread listener registry, reused for messages / typing / receipts / annotations.
+function makeRegistry<T>() {
+  const map = new Map<string, Set<(v: T) => void>>();
+  const add = (key: string, cb: (v: T) => void) => {
+    if (!map.has(key)) map.set(key, new Set());
+    map.get(key)!.add(cb);
+    return () => { map.get(key)?.delete(cb); };
+  };
+  const emit = (key: string, v: T) => map.get(key)?.forEach((cb) => cb(v));
+  return { add, emit };
+}
+
 function LiveSocketProvider({ children }: { children: ReactNode }) {
  const { user } = useAuth();
  const rt = useQuery<RealtimeDTO>("crm.messenger.realtime", {});
  const [ready, setReady] = useState(false);
  const socketRef = useRef<MessageSocket | null>(null);
-  const listeners = useRef<Map<string, Set<(m: UiMessage) => void>>>(new Map());
  const myRef = useRef<string | undefined>(user?.id);
  myRef.current = user?.id;

+  // One registry per event kind, keyed by threadId (plus a global message fan-out).
+  const msgReg = useRef(makeRegistry<UiMessage>()).current;
+  const anyMsg = useRef(new Set<(threadId: string, m: UiMessage) => void>()).current;
+  const typingReg = useRef(makeRegistry<string>()).current;
+  const receiptSet = useRef(new Set<(e: ReceiptHit) => void>()).current;
+  const annReg = useRef(makeRegistry<AnnotationEvent>()).current;
+
  const url = rt.data?.url;
  const token = rt.data?.token;

@@ -55,12 +92,19 @@ function LiveSocketProvider({ children }: { children: ReactNode }) {
    socketRef.current = socket;
    const offConnected = socket.onConnected(() => setReady(true));
    const offMessage = socket.on("message", (m) => {
-      const cbs = listeners.current.get(m.threadId);
-      if (cbs && cbs.size) { const ui = toUi(m, myRef.current); cbs.forEach((cb) => cb(ui)); }
+      const ui = toUi(m, myRef.current);
+      msgReg.emit(m.threadId, ui);
+      anyMsg.forEach((cb) => cb(m.threadId, ui));
    });
+    const offTyping = socket.on("typing", (e) => { if (e.userId !== myRef.current) typingReg.emit(e.threadId, e.userId); });
+    const offReceipt = socket.on("receipt", (e) => receiptSet.forEach((cb) => cb({ interactionId: e.interactionId, actorId: e.actorId })));
+    const offAnn = socket.on("annotation", (e) => annReg.emit(e.threadId, e));
    socket.connect();
-    return () => { offConnected(); offMessage(); socket.disconnect(); socketRef.current = null; setReady(false); };
-  }, [url, token]);
+    return () => {
+      offConnected(); offMessage(); offTyping(); offReceipt(); offAnn();
+      socket.disconnect(); socketRef.current = null; setReady(false);
+    };
+  }, [url, token, msgReg, anyMsg, typingReg, receiptSet, annReg]);

  const openThread = useCallback(async (threadId: string): Promise<UiMessage[]> => {
    const s = socketRef.current;
@@ -69,18 +113,32 @@ function LiveSocketProvider({ children }: { children: ReactNode }) {
    return res.history.map((m) => toUi(m, myRef.current));
  }, []);

-  const send = useCallback(async (threadId: string, content: string) => {
+  const send = useCallback(async (threadId: string, content: string, opts?: { parentInteractionId?: string }) => {
    const s = socketRef.current;
    if (!s) throw new Error("Not connected");
-    await s.sendMessage(threadId, content);
+    await s.sendMessage(threadId, content, opts?.parentInteractionId ? { parentInteractionId: opts.parentInteractionId } : undefined);
  }, []);

-  const subscribe = useCallback((threadId: string, cb: (m: UiMessage) => void) => {
-    const map = listeners.current;
-    if (!map.has(threadId)) map.set(threadId, new Set());
-    map.get(threadId)!.add(cb);
-    return () => { map.get(threadId)?.delete(cb); };
-  }, []);
+  const subscribe = useCallback((threadId: string, cb: (m: UiMessage) => void) => msgReg.add(threadId, cb), [msgReg]);
+  const onAnyMessage = useCallback((cb: (threadId: string, m: UiMessage) => void) => {
+    anyMsg.add(cb); return () => { anyMsg.delete(cb); };
+  }, [anyMsg]);
+  const onTyping = useCallback((threadId: string, cb: (userId: string) => void) => typingReg.add(threadId, cb), [typingReg]);
+  const onReceipt = useCallback((cb: (e: ReceiptHit) => void) => {
+    receiptSet.add(cb); return () => { receiptSet.delete(cb); };
+  }, [receiptSet]);
+  const onAnnotation = useCallback((threadId: string, cb: (e: AnnotationEvent) => void) => annReg.add(threadId, cb), [annReg]);

-  return <Ctx.Provider value={{ ready, openThread, send, subscribe }}>{children}</Ctx.Provider>;
+  const sendTyping = useCallback((threadId: string) => socketRef.current?.typing(threadId), []);
+  const markRead = useCallback((threadId: string, interactionId: string) => { void socketRef.current?.markRead(threadId, interactionId); }, []);
+  const react = useCallback((threadId: string, interactionId: string, emoji: string) => { void socketRef.current?.react(threadId, interactionId, emoji); }, []);
+
+  return (
+    <Ctx.Provider value={{
+      ready, myUserId: user?.id, openThread, send, subscribe, onAnyMessage,
+      sendTyping, onTyping, markRead, onReceipt, react, onAnnotation,
+    }}>
+      {children}
+    </Ctx.Provider>
+  );
 }
Author	SHA1	Message	Date
maaz519	36f43d7d2a	refactor(inbox): fold mail INTO the Inbox (one unified surface, no Mail tab) The Inbox is the single communication surface — mentions, needs-reply, system alerts, support updates AND the mail behind them, all in one list. Removed the separate Mail tab. - Inbox is now two-pane: the item list (crm.inbox.*) on the left; clicking an item tied to a thread opens its conversation (MailReader) on the right to read + reply. Non-threaded items (e.g. system alerts) show their detail. Item actions (Done/Snooze/Archive) work for every item. - Compose new mail (in-app or email) from the Inbox header. - mail.tsx trimmed to reusable MailReader + NewMailModal (no standalone tab); sidebar + dashboard reverted to no Mail entry. - The existing work-item Inbox stays the notifier; this makes it the reader too. HTML bodies still render in a sandboxed iframe. tsc + next build clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-18 16:43:48 +05:30
maaz519	46aa7a767c	feat(mail): dedicated Mail reader in the CRM A Mail surface in the Communication group, distinct from Messenger (chat) and the work-item Inbox: read app-to-app + email messages (subject + rendered body), reply, and compose (in-app to a person, or external to an email). - mail-api.ts: crm.mail.list/history/reply + compose (crm.mail.internal/send), reusing the messenger directory for the people picker. Live via the AppShell SDK; mock in demo mode. - mail.tsx: thread list + reader + reply + New-mail composer. HTML bodies render inside a SANDBOXED iframe (no scripts) — safe against untrusted email HTML. - Wired into the sidebar (Communication) + dashboard switch. The existing work-item Inbox stays as the notifier (IIOS's projector already flags new mail there); this is where you read it. tsc + next build clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-18 16:38:16 +05:30
maaz519	4b50d682e6	Merge pull request 'feat(messenger): reactions, replies, typing, seen ticks + UX fixes' (#29 ) from feat/messenger-ux into goutamnextflow Reviewed-on: #29	2026-07-16 11:24:03 +00:00
maaz519	adb5a6bb7b	feat(messenger): reactions, replies, typing, seen ticks + UX fixes Wire the IIOS kernel client's existing realtime affordances into the Messenger UI and fix three display issues. - Bubble contrast: incoming bubbles used --panel-2, which equals --bg in the dark theme (both #060608) → invisible. Use --panel + a border. - DM title: mapped all participants (incl. self → unknown-id fallback), producing "User d10888, Maaz Ahmed". Now shows the counterpart only. - Live sidebar preview: lastMessage/time update on any inbound socket message, reconciled with a debounced conversation-list refetch. - Typing indicator: throttled typing() send + auto-expiring "typing…" line. - Read receipts: markRead() on open/new message; "Sent"/"Seen" under the last outgoing message. Receipt event carries no threadId, so it is a global stream filtered to my own messages by actor id. - Reactions: emoji picker on hover, chips with counts, live via annotation. - Reply/quote: parentInteractionId round-trips; quoted parent renders above the reply and in a composer quote bar. Presence (online + last-seen) is intentionally not included — the kernel has no presence receive-event yet; that needs an IIOS change + client release. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-16 16:52:29 +05:30
maaz519	2056592d51	Merge pull request 'feat: Messenger + Inbox on the AppShell data door + live IIOS socket' (#28 ) from feat/messenger-inbox into goutamnextflow Reviewed-on: #28	2026-07-15 21:23:37 +00:00