// Recursive MLS — Screen 8: Inbox (unified activity + messaging). // Horizontal top tabs (Showings / Offers / Alerts / Clients / Agents) — no second // left rail. Below: list + detail. Activity items route to their screen; Clients & // Agents tabs open full chat threads. function Inbox({ go }) { const I = window.RC_INBOX; const [view, setView] = useState("all"); // all | showings | offers | alerts | clients | agents const [convId, setConvId] = useState(null); // open chat thread const [composing, setComposing] = useState(false); const [agentInfo, setAgentInfo] = useState(null); const aUnread = (kinds) => I.activity.filter((a) => a.unread && kinds.includes(a.kind)).length; const tUnread = (party) => I.threadOrder.filter((id) => I.conversations[id].party === party).reduce((s, id) => s + I.unread[id], 0); const totalUnread = aUnread(["showing", "feedback", "offer", "alert"]) + tUnread("client") + tUnread("agent"); const TABS = [ { id: "all", icon: "layout-list", label: "All" }, { id: "showings", icon: "calendar-clock", label: "Showings", count: aUnread(["showing", "feedback"]) }, { id: "offers", icon: "file-signature", label: "Offers", count: aUnread(["offer"]) }, { id: "alerts", icon: "bell", label: "Alerts", count: aUnread(["alert"]) }, { id: "clients", icon: "users", label: "Clients", count: tUnread("client") }, { id: "agents", icon: "briefcase", label: "Agents", count: tUnread("agent") }, ]; const isMessages = view === "clients" || view === "agents"; const party = view === "clients" ? "client" : "agent"; const feedKinds = { showings: ["showing", "feedback"], offers: ["offer"], alerts: ["alert"] }[view]; const feed = view === "all" ? I.activity : (feedKinds ? I.activity.filter((a) => feedKinds.includes(a.kind)) : I.activity); const switchView = (id) => { setView(id); setConvId(null); setComposing(false); setAgentInfo(null); }; return (

Inbox

{totalUnread} unread · everything in one place — requests, offers, feedback & messages

{/* HORIZONTAL TABS + presence */}
{TABS.map((t) => { const on = view === t.id; return ( ); })}
{ setView("agents"); setConvId(id); setComposing(false); setAgentInfo(null); }} onDirectory={() => { setView("agents"); setComposing(true); setConvId(null); }} />
{/* LIST */}
{isMessages ? { setConvId(id); setComposing(false); setAgentInfo(null); }} /> : { if (a.kind === "message" && a.convId) { const c = I.conversations[a.convId]; setView(c && c.party === "agent" ? "agents" : "clients"); setConvId(a.convId); } else if (a.route) { go && go(a.route); } }} />}
{/* DETAIL */}
{composing ? setComposing(false)} onPick={(id) => { const c = I.conversations[id]; setView(c && c.party === "agent" ? "agents" : "clients"); setConvId(id); setComposing(false); }} /> : agentInfo ? setAgentInfo(null)} /> : isMessages && convId ? setAgentInfo(ag)} /> : isMessages ? : }
); } // ---- presence (scales to a 100k-agent MLS: scoped, not a flat roster) ---- function PresenceBar({ I, onOpenAgent, onDirectory }) { const [open, setOpen] = useState(false); // conversations I have with agents, so the avatar stack opens a real chat const convByAgent = {}; Object.values(I.conversations).forEach((c) => { if (c.agentId) convByAgent[c.agentId] = c.id; }); const contacts = I.presence.recentContactIds.map((id) => I.agents.find((a) => a.id === id)).filter(Boolean); const onlineContacts = contacts.filter((a) => a.online); const fmt = (n) => n.toLocaleString("en-US"); return (
{open && (
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30 }} />
Your contacts {onlineContacts.length} online
{contacts.map((a) => { const cid = convByAgent[a.id]; return ( ); })}
{I.presence.mlsOnline.toLocaleString("en-US")} of {I.presence.mlsTotal.toLocaleString("en-US")} agents online across the MLS
)}
); } // ---- unified activity list ---- function FeedList({ feed, I, onOpen }) { return (
{feed.map((a) => { const m = I.kindMeta[a.kind]; return (
onOpen(a)} className="rc-row" style={{ display: "flex", gap: 11, padding: "13px 15px", cursor: "pointer", borderBottom: "1px solid #f6f5f0", background: a.unread ? "#fbfcfb" : "transparent" }}>
{a.unread && } {a.title}
{a.summary}
{m.label} {a.meta && a.meta.tag && {a.meta.tag}}
{a.photo &&
} {a.time}
); })}
); } // ---- right pane when on a feed (not a chat) ---- function ActivityPreview({ feed, I, go, view }) { const counts = ["showing", "offer", "feedback", "alert", "message"].map((k) => ({ k, m: I.kindMeta[k], n: I.activity.filter((a) => a.kind === k).length })); const heads = { all: ["Today at a glance", "Everything routed to one place. Click any item to jump to it."], showings: ["Showings", "Requests on your listings and feedback from tours."], offers: ["Offers", "Incoming offers and counters across your deals."], alerts: ["Alerts", "Price drops and saved-search matches for your clients."] }; const [title, sub] = heads[view] || heads.all; const attention = (view === "all" ? I.activity : feed).filter((a) => a.unread); return (

{title}

{sub}

{view === "all" &&
{counts.map(({ k, m, n }) => (
{n}
{m.label}{n !== 1 ? "s" : ""}
))}
}
Needs your attention
{attention.length ? attention.map((a) => { const m = I.kindMeta[a.kind]; return (
a.route && go && go(a.route)} className="rc-row" style={{ display: "flex", alignItems: "center", gap: 10, cursor: a.route ? "pointer" : "default", padding: "4px 2px", borderRadius: 6 }}> {a.title} {a.route && }
); }) :
All caught up.
}
); } // ---- agent info panel ---- function AgentInfo({ agent, I, onBack }) { const stat = (label, val) => (
{label}
{val}
); const line = (icon, val) => (
{val}
); return (

Agent info

{agent.initials} {agent.online && }
{agent.name}
{agent.brokerage}{agent.online ? " · online" : ""}
{stat("Active listings", agent.listings)} {stat("Deals together", agent.dealsTogether)}
{line("phone", agent.phone)} {line("mail", agent.email)} {line("badge-check", "License " + agent.license)}
); } // ---- conversation list ---- function ThreadList({ I, party, convId, onOpen }) { const ids = I.threadOrder.filter((id) => I.conversations[id].party === party); return (
{ids.map((id) => { const c = I.conversations[id]; const on = id === convId; const un = I.unread[id]; return (
onOpen(id)} className="rc-row" style={{ display: "flex", gap: 11, padding: "12px 14px", cursor: "pointer", borderBottom: "1px solid #f6f5f0", background: on ? "#f3f6f4" : "transparent", borderLeft: on ? "2.5px solid #006747" : "2.5px solid transparent" }}> {c.initials} {c.online && }
{c.name} {I.lastTime[id]}
{c.party === "client" ? "Client" : "Agent"} {I.lastPreview[id]}
{un > 0 && {un}}
); })}
); } // ---- chat thread ---- function ChatThread({ conv, I, go, onAgentInfo }) { const [msgs, setMsgs] = useState(conv.messages); const [draft, setDraft] = useState(conv.blockedDraft ? conv.blockedDraft.text : ""); const agent = conv.agentId && I.agents.find((a) => a.id === conv.agentId); // platform content moderation: super-user-defined policies screen outbound messages const screen = (text) => { if (conv.blockedDraft && text.trim() === conv.blockedDraft.text.trim()) return conv.blockedDraft.moderation; return null; }; const [mod, setMod] = useState(() => (conv.blockedDraft ? conv.blockedDraft.moderation : null)); const scrollRef = React.useRef(null); React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [msgs]); const send = (text) => { const t = (text || draft).trim(); if (!t) return; const flagged = screen(t); if (flagged) { setMod(flagged); return; } // blocked by moderation — not sent setMsgs([...msgs, { from: "me", text: t, time: "Just now" }]); setDraft(""); setMod(null); }; const onDraft = (v) => { setDraft(v); setMod(screen(v)); }; return ( {/* chat header */}
{conv.initials} {conv.online && }
{conv.name}
{conv.sub}{conv.online ? " · online" : ""}
{conv.party === "client" ? : }
{/* pinned listing this conversation is about */} {conv.pinnedListing && (
conv.pinnedListing.route && go && go(conv.pinnedListing.route)} style={{ flex: "none", display: "flex", alignItems: "center", gap: 11, padding: "10px 18px", background: "#f4f6f4", borderBottom: "1px solid #e6ece8", cursor: conv.pinnedListing.route ? "pointer" : "default" }}>
{conv.pinnedListing.context}
{conv.pinnedListing.addr}
{conv.pinnedListing.info}
)} {/* messages */}
{msgs.map((msg, i) => { const mine = msg.from === "me"; return (
{!mine && msg.who && {msg.who}}
{msg.card && } {msg.text && (
{msg.text}
)}
{msg.time}
); })}
{/* suggestions + composer */}
{mod ? { setDraft(""); setMod(null); }} /> : conv.suggestions && (
{conv.suggestions.map((s) => ( ))}
)}