{/* Agent header — minimal: back arrow + title + last-updated + close */}

{onSwitchToContact && ( )}

AI Insights

{thinking ? ( <> Reading the thread… ) : ( <>Updated {a.activity[0].t} )}

{/* Section nav */}

{sections.map(s => { const active = s.id === section; const SIcon = s.icon; return ( ); })}

{/* Body */}

{section === "brief" && } {section === "tags" && ( setAcceptedTags(s => s.includes(label) ? s : [...s, label])} onDismiss={(label) => setDismissedTags(s => s.includes(label) ? s : [...s, label])} /> )} {section === "replies" && ( )} {section === "sentiment" && }

{/* Footer */}

Verify before acting

); }; const agentIconBtn = { width: 28, height: 28, borderRadius: 6, border: "1px solid transparent", background: "transparent", cursor: "pointer", padding: 0, display: "inline-flex", alignItems: "center", justifyContent: "center" }; const ThinkingDots = () => ( {[0,1,2].map(i => ( ))} ); // ----- Brief section: headline + activity timeline + jump-to chips --------- const BriefSection = ({ a, thread, onJump }) => { return (

What I see

{a.ins.headline}

What I'm doing

{a.activity.map((act, i) => ( ))}

Jump to

onJump("tags")} /> onJump("replies")} /> 0 ? `+${(a.sentimentShift.delta * 100).toFixed(0)}%` : `${(a.sentimentShift.delta * 100).toFixed(0)}%`} accent={a.sentimentShift.delta > 0 ? "#027A48" : "#B42318"} bg={a.sentimentShift.delta > 0 ? "#ECFDF3" : "#FEF3F2"} onClick={() => onJump("sentiment")} />

); }; const ActivityRow = ({ act, last, onJump }) => { const iconMap = { tag: I.tag, sentiment: I.alert, reply: I.chat, summary: I.forward }; const sectionMap = { tag: "tags", sentiment: "sentiment", reply: "replies", summary: "handover" }; const IconC = iconMap[act.icon] || I.sparkle; return ( ); }; const JumpCard = ({ icon: IconC, label, count, accent, bg, onClick }) => ( ); const Chip = ({ label, value }) => ( {label}: {value} ); const SectionLabel = ({ children }) => (

{children}

); // ----- Auto-tags ------------------------------------------------------------ const TONE_COLORS = { good: { bg: "#ECFDF3", fg: "#027A48", border: "#A6F4C5" }, warn: { bg: "#FEF3F2", fg: "#B42318", border: "#FECDCA" }, info: { bg: "#EEF4FF", fg: "#3538CD", border: "#C7D7FE" } }; const TagsSection = ({ a, accepted, dismissed, onAccept, onDismiss }) => { const visible = a.tags.filter(t => !dismissed.includes(t.label)); return (

I scanned this thread and pulled out tags that match your team's taxonomy. Accept the ones that fit — they'll apply to the contact. {visible.length === 0 && (

All tag suggestions handled.

)} {visible.map((t, i) => { const isAccepted = accepted.includes(t.label); const c = TONE_COLORS[t.tone] || TONE_COLORS.info; return (

{t.label}

{t.reason}

{isAccepted ? ( Applied ) : ( <> )}

); })} {accepted.length > 0 && (

{accepted.length} tag{accepted.length === 1 ? "" : "s"} applied to this contact

)}

); }; const miniBtn = (variant) => ({ width: 26, height: 26, borderRadius: 4, border: "1px solid", borderColor: variant === "primary" ? "#7F56D9" : "#E4E7EC", background: variant === "primary" ? "#7F56D9" : "#FFFFFF", cursor: "pointer", padding: 0, display: "inline-flex", alignItems: "center", justifyContent: "center" }); // ----- Suggested replies ---------------------------------------------------- const RepliesSection = ({ a, picked, onPick }) => { return (

Three drafts in different tones, each grounded in what {a.ins.sentiment.toLowerCase().includes("positive") ? "they've shared so far" : "the thread is asking for"}. Insert one to seed the composer — you can edit before sending. {a.replies.map((r, i) => { const isPicked = picked === i; return (

{r.tone} {r.text.length} chars

{r.text}

); })}

); }; // ----- Sentiment ------------------------------------------------------------ const SentimentSection = ({ a }) => { const s = a.sentimentShift; const positive = s.delta >= 0; const accent = positive ? "#027A48" : "#B42318"; const bg = positive ? "#ECFDF3" : "#FEF3F2"; const border = positive ? "#A6F4C5" : "#FECDCA"; // Mock 8-point trend ending at the current sentiment const trend = positive ? [0.45, 0.48, 0.52, 0.55, 0.58, 0.62, 0.68, 0.72] : [0.62, 0.58, 0.54, 0.48, 0.42, 0.34, 0.28, 0.20]; const max = Math.max(...trend); const min = Math.min(...trend); return (

I noticed a sentiment shift in this thread. Here's what changed and what I'd do next.

{s.from} → {s.to}

{positive ? "+" : ""}{(s.delta * 100).toFixed(0)}% {positive ? "warmer" : "cooler"}

{/* Sparkline */}

{s.note}

Recommended next moves

{(positive ? ["Send the comparison one-pager while momentum is high", "Propose Thursday afternoon for a sync"] : ["Loop in CSM before responding", "Acknowledge the friction in your reply", "Offer a 1:1 review call"] ).map((m, i) => (

{i + 1} {m}

))}

); }; // ----- Hand-over ------------------------------------------------------------ const HandoverSection = ({ a, thread }) => { const [copied, setCopied] = useState(false); const summary = `${thread.name} — ${a.handover.summary}\n\nKey facts:\n${a.handover.facts.map(f => `• ${f.k}: ${f.v}`).join("\n")}\n\nOpen items:\n${a.handover.open.map(o => `• ${o}`).join("\n")}`; const onCopy = () => { navigator.clipboard?.writeText(summary); setCopied(true); window.dispatchEvent(new CustomEvent("convo:toast", { detail: { msg: "Brief copied — paste into Slack or email" } })); setTimeout(() => setCopied(false), 1800); }; return (

If you're handing this off — to a teammate, a manager, or just future-you — here's the brief I'd lead with.

Summary

{a.handover.summary}

Key facts

{a.handover.facts.map((f, i) => ( {f.k} {f.v} ))}

Open items

{a.handover.open.map((o, i) => (

{o}

))}

); }; const AgentNote = ({ children }) => (

{children}

); const AgentEmptyState = ({ thread, onClose, onSwitchToContact }) => (

{AGENT.name}

Not enough to work with yet

I'll start tagging, drafting, and watching tone the moment this thread has a couple of real exchanges.

{onSwitchToContact && ( )}

); window.RightSheet = RightSheet; window.RightSheetMount = RightSheetMount; window.AIAgentPanel = AIAgentPanel; window.BriefSection = BriefSection; window.buildAgentActivity = buildAgentActivity; // Overlay sheet — used by Contact details (image-2 behavior). // Slides over the thread with a dim backdrop; does not push layout. const OverlaySheet = ({ children, onClose }) => { useEffect(() => { const onKey = (e) => { if (e.key === "Escape" && onClose) onClose(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [onClose]); return ( <>

); }; window.OverlaySheet = OverlaySheet;