<header class="agent-page__header">
<h1 class="agent-page__title">Inbox</h1>
<p class="agent-page__sub">Customer emails and draft replies</p>
</header>
<div class="inbox-layout">
<div class="inbox-panel">
<div class="inbox-panel__header">Inbound</div>
<p class="empty">No inbound emails</p>
</div>
<div class="inbox-panel">
<div class="inbox-panel__header">Outbound</div>
<p class="empty">No outbound emails</p>
</div>
</div>
<div class="reply-panel" id="reply-panel" style="display:none; margin-top: var(--space-lg);">
<div class="reply-panel__header">Draft Reply</div>
<div id="draft-from" style="font-size: 0.85rem; color: var(--ink-muted); margin-bottom: var(--space-sm);"></div>
<textarea id="draft-body" rows="8" style="width:100%;font-family:var(--font-body);padding:var(--space-sm);border:1px solid var(--cream-dark);border-radius:var(--radius-sm);margin-bottom:var(--space-sm);"></textarea>
<div id="escalate-notice" style="display:none;padding:var(--space-sm);background:#FEF3C7;border-radius:var(--radius-sm);margin-bottom:var(--space-sm);font-size:0.85rem;color:#92400E;"></div>
<button class="btn btn--approve" onclick="sendReply()">Send Reply</button>
</div>
<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.min.js"></script>
<script>
document.querySelectorAll('.inbox-item[data-from]').forEach(function(item) {
item.addEventListener('click', function() {
document.querySelectorAll('.inbox-item').forEach(function(i) { i.classList.remove('active'); });
item.classList.add('active');
var from = item.dataset.from;
var subject = item.dataset.subject;
var body = item.dataset.body;
document.getElementById('reply-panel').style.display = 'block';
document.getElementById('draft-from').textContent = from;
document.getElementById('draft-from').innerHTML += ' — ' + subject;
var textarea = document.getElementById('draft-body');
textarea.value = '';
textarea.dataset.to = from;
textarea.dataset.subject = subject;
document.getElementById('escalate-notice').style.display = 'none';
// Draft a reply via the agent
fetch('/agent/draft-reply', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ from: from, subject: subject, body: body }),
}).then(function(r) { return r.json(); }).then(function(data) {
if (data.draft) {
textarea.value = data.draft;
}
if (data.escalate) {
var notice = document.getElementById('escalate-notice');
notice.style.display = 'block';
notice.textContent = '⚠ Escalation flagged: ' + (data.reason || 'Complex issue — Sara review required');
}
});
});
});
function sendReply() {
var textarea = document.getElementById('draft-body');
var to = textarea.dataset.to;
var subject = textarea.dataset.subject;
var body = textarea.value;
fetch('/agent/draft-reply/send', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ to: to, subject: subject, body: body }),
}).then(function(r) { return r.json(); }).then(function() {
location.reload();
});
}
</script>