// ============ NOW VIEW ============
// Live priority queue. Shows the top 5 conversations needing attention,
// sorted by urgency score. Auto-polls every 60s. Default landing tab.
const S = () => (window.CITRUS_CONFIG && window.CITRUS_CONFIG.SERVER_URL) || "";
const POLL_INTERVAL_MS = 60 * 1000;
const OPTIMISTIC_HIDE_MS = 25 * 60 * 1000; // 25 min
const BANNER_KEY = "citrus_now_banner_dismissed";
function NowUrgencyChip({ reason }) {
if (!reason || reason === "Active") return null;
const isEscalation = reason.toLowerCase().includes("escalation");
const isWaiting = reason.toLowerCase().includes("waiting") || reason.toLowerCase().includes("no reply");
const color = isEscalation
? { bg: "var(--red-soft, #fff0f0)", text: "var(--red, #c0392b)", border: "var(--red-soft2, #fdd)" }
: isWaiting
? { bg: "var(--amber-soft, #fffbea)", text: "var(--amber, #b45309)", border: "var(--amber-soft2, #fde68a)" }
: { bg: "var(--ink-wash, #f5f5f5)", text: "var(--ink-2, #666)", border: "var(--border, #eee)" };
return (
{reason}
);
}
function NowRow({ item, onOpen }) {
const waitLabel = item.waitMs != null
? (() => {
const m = Math.round(item.waitMs / 60000);
if (m < 60) return `${m}m`;
return `${Math.round(m / 60)}h`;
})()
: null;
return (
onOpen(item)}
onKeyDown={(e) => e.key === "Enter" && onOpen(item)}
style={{
display: "flex", alignItems: "center", gap: 12, padding: "14px 16px",
borderBottom: "1px solid var(--border, #eee)", cursor: "pointer",
transition: "background 0.12s",
}}
onMouseEnter={(e) => e.currentTarget.style.background = "var(--row-hover, #f9f9f9)"}
onMouseLeave={(e) => e.currentTarget.style.background = ""}
>
{(item.customerName || "?")[0].toUpperCase()}
{item.customerName}
{item.agentName && (
{item.agentName}
)}
{waitLabel && (
{waitLabel}
)}
{item.lastMessage && (
{item.lastMessage}
)}
Your inbox now sorts by urgency — CITRUS decides what needs your attention first. Recency view is still under Inbox.
);
}
function NowTab({ onSwitchTab, onAskCitrus }) {
const [queue, setQueue] = React.useState(null); // null = loading
const [computedAt, setComputedAt] = React.useState(undefined);
const [total, setTotal] = React.useState(0);
const [error, setError] = React.useState(null);
const [showBanner, setShowBanner] = React.useState(() => {
try { return !localStorage.getItem(BANNER_KEY); } catch { return true; }
});
const repliedIds = React.useRef(new Set());
const repliedTimestamps = React.useRef({});
const dismissBanner = () => {
setShowBanner(false);
try { localStorage.setItem(BANNER_KEY, "1"); } catch {}
};
const isOptimisticallyHidden = (id) => {
if (!repliedIds.current.has(id)) return false;
const ts = repliedTimestamps.current[id] || 0;
return (Date.now() - ts) < OPTIMISTIC_HIDE_MS;
};
const fetchQueue = React.useCallback(async () => {
try {
const r = await fetch(`${S()}/api/citrus/priority-queue`);
if (!r.ok) throw new Error(`${r.status}`);
const data = await r.json();
setComputedAt(data.computedAt || null);
setTotal(data.total || 0);
// Prune expired optimistic hides
for (const id of repliedIds.current) {
const ts = repliedTimestamps.current[id] || 0;
if ((Date.now() - ts) >= OPTIMISTIC_HIDE_MS) {
repliedIds.current.delete(id);
delete repliedTimestamps.current[id];
}
}
setQueue((data.queue || []).filter((item) => !isOptimisticallyHidden(item.conversationId)));
setError(null);
} catch (e) {
setError("Could not load priority queue.");
}
}, []);
// Initial load + 60s auto-poll
React.useEffect(() => {
fetchQueue();
const timer = setInterval(fetchQueue, POLL_INTERVAL_MS);
return () => clearInterval(timer);
}, [fetchQueue]);
// Listen for reply events from inbox.jsx to apply optimistic removal
React.useEffect(() => {
const handler = (e) => {
const id = e.detail?.from;
if (!id) return;
repliedIds.current.add(id);
repliedTimestamps.current[id] = Date.now();
setQueue((prev) => (prev || []).filter((item) => item.conversationId !== id));
};
window.addEventListener("citrus:replied", handler);
return () => window.removeEventListener("citrus:replied", handler);
}, []);
// Analytics: fire now_view_open on mount (T9)
React.useEffect(() => {
fetch(`${S()}/api/citrus/metrics`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ event: "now_view_open", queueLength: queue?.length ?? 0, totalUrgent: total, hasItems: (queue?.length ?? 0) > 0 }),
}).catch(() => {});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // fire once on mount only
const handleRowClick = (item, position) => {
// Analytics: fire now_row_click (T9)
fetch(`${S()}/api/citrus/metrics`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
event: "now_row_click",
position,
urgencyReason: item.urgencyReason,
waitMinutes: item.waitMs != null ? Math.round(item.waitMs / 60000) : null,
}),
}).catch(() => {});
// Navigate to inbox with this thread pre-selected
if (onSwitchTab) onSwitchTab("inbox", { threadId: item.conversationId });
};
const lastUpdatedLabel = React.useMemo(() => {
if (!computedAt) return null;
const diffMs = Date.now() - new Date(computedAt).getTime();
const m = Math.round(diffMs / 60000);
if (m < 1) return "just now";
return `${m}m ago`;
}, [computedAt]);
const headerCount = total > 5 ? `5 of ${total}` : (queue?.length ?? 0);
const isComputing = computedAt === null;
return (
{/* Banner — one-time dismissible */}
{showBanner &&
}
{/* Header */}
{isComputing
? "Computing priorities…"
: queue?.length
? `CITRUS sees ${headerCount} conversation${headerCount !== 1 ? "s" : ""} needing attention`
: "CITRUS sees nothing urgent right now"}
{lastUpdatedLabel && !isComputing && (
Last updated {lastUpdatedLabel}
)}
{/* Content */}
{error ? (
{error}
) : isComputing ? (
◌
Scoring all active conversations — this takes about 15 seconds on first deploy.
) : queue === null ? (
Loading…
) : queue.length === 0 ? (
) : (
{queue.map((item, i) => (
handleRowClick(item, i)} />
))}
)}
{/* Ask Citrus nudge */}
{!isComputing && (
)}
✓
All conversations are being handled.
Nothing needs your attention right now.{" "}
);
}
window.NowTab = NowTab;