// Shared components for Solutions UI
const { useState, useEffect, useMemo, useRef } = React;
// Split merge button with "Merge" + "Merge behind flag" dropdown
const MergeButton = ({ merged, onMerge, size = "sm" }) => {
const [open, setOpen] = useState(false);
const [mode, setMode] = useState(null); // null | "main" | "flag"
useEffect(() => {
if (!open) return;
const close = () => setOpen(false);
window.addEventListener("click", close);
return () => window.removeEventListener("click", close);
}, [open]);
const sm = size === "sm";
const merge = (m, e) => {
e.stopPropagation();
if (merged) return;
setMode(m);
onMerge && onMerge(m);
setOpen(false);
};
const label = merged
? (mode === "flag" ? "✓ Behind flag" : "✓ Merged")
: "Merge";
return (
e.stopPropagation()}>
{open && !merged && (
)}
);
};
// Copy-sharing-link button – inline (icon-only) or labelled.
const CopyLinkButton = ({ id, variant = "icon", urlBase = "https://app.posthog.com/code/inbox/" }) => {
const [copied, setCopied] = useState(false);
const onCopy = (e) => {
e.stopPropagation();
const url = urlBase + id;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).catch(() => {});
}
setCopied(true);
setTimeout(() => setCopied(false), 1400);
};
if (variant === "icon") {
return (
);
}
return (
);
};
// "Why?" popover – small ghost trigger that reveals the agent's reasoning.
const WhyPopover = ({ title, children }) => {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
const onEsc = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("mousedown", onDown);
document.addEventListener("keydown", onEsc);
return () => { document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onEsc); };
}, [open]);
return (
{open && (
{title &&
{title}
}
{children}
The agent decided this – disagree?
{u.initials}
);
};
const Reviewers = ({ list, size = 18 }) => (
{list.slice(0, 3).map(h =>
)}
{signals.slice(0, 3).map((s, i) => (
{s.type === "replay" ? `${s.count} replays` :
s.type === "error" ? `${s.count.toLocaleString()} errors` :
s.type === "issue" ? "issue" :
s.type === "support" ? `${s.count} tickets` :
s.type === "funnel" ? s.count : "signal"}
))}
);
// ---- Solution card (kanban / list shared) ----
const SolutionCard = ({ s, selected, onClick, density = "compact", showImpact = true, onMerge, merged, onDismiss }) => {
const isReady = s.kind === "ready";
return (
{s.title}
{showImpact && s.impact && density !== "compact" && (
{s.impact}
)}
⎇ {s.branch}
+{s.additions}
−{s.deletions}
{isReady ? (
onMerge && onMerge(mode)} />
) : (
)}
);
};
// Small list-row variant
const SolutionRow = ({ s, selected, unread, onClick, onMerge, merged, onDismiss, density = "compact", showImpact = true }) => {
const isReady = s.kind === "ready";
const showImpactRow = showImpact && density === "comfortable" && s.impact;
const summary = s.summary;
return (
{s.title}
{summary && {summary}}
{isReady ? "● ready" : "● review"}
·
{s.repo}#{s.pr}
·
⎇ {s.branch}
·
{s.signals.length} signals
·
{s.age}
{s.origin && }
+{s.additions}
−{s.deletions}
{showImpactRow &&
{s.impact}
}
);
};
// ---- Evidence widgets ----
const SourceIcon = ({ type }) => {
const map = { error: "⚠", replay: "▶", issue: "◆", support: "✉", funnel: "⫶" };
return {map[type] || "•"}
;
};
const ErrorWidget = ({ ev }) => {
// Generate a fake daily count chart
const bars = useMemo(() => {
const seed = ev.title.length;
return Array.from({ length: 30 }, (_, i) => {
const t = (i + seed) % 7;
return 20 + (t * 11 + i * 3) % 80 + (i > 22 ? 60 : 0);
});
}, [ev.title]);
const max = Math.max(...bars);
return (
{ev.title}
{ev.source} · {ev.when}
{ev.count.toLocaleString()}
);
};
const ReplayWidget = ({ ev }) => {
// Stable pseudo-random "replay segments"
const segs = useMemo(() => {
const out = []; let p = 4;
for (let i = 0; i < 6; i++) { const w = 6 + (i*7) % 14; out.push({ left: p, w }); p += w + 5; }
return out;
}, []);
return (
{ev.title}
{ev.source} · {ev.when}
{typeof ev.count === "number" ? ev.count.toLocaleString() : ev.count}
▶
00:00
tap to scrub · 6 highlighted moments
02:48
);
};
const IssueWidget = ({ ev }) => (
{ev.title}
{ev.source} · {ev.when}
↗
"{ev.title.replace(/^"|"$/g, "")}" – opened by an external user, 6 thumbs-up reactions, last comment 4 days ago.
);
const SupportWidget = ({ ev }) => (
{ev.title}
{ev.source} · {ev.when}
{ev.count}
Themed cluster of {ev.count} tickets. Top quote: "I noticed the numbers in my dashboard look off compared to last week."
);
const FunnelWidget = ({ ev }) => (
{ev.title}
{ev.source} · {ev.when}
{ev.count}
{[100, 88, 78, 60].map((h, i) => (
))}
);
const Evidence = ({ ev }) => {
if (ev.type === "error") return ;
if (ev.type === "replay") return ;
if (ev.type === "issue") return ;
if (ev.type === "support") return ;
if (ev.type === "funnel") return ;
return null;
};
// Origin chip – shows whether a PR or report came from a Responder or a Scout.
const OriginChip = ({ origin, compact = false }) => {
if (!origin) return null;
const isScout = origin.kind === "scout";
const sourceLabel = (typeof SIGNAL_SOURCES !== "undefined" ? (SIGNAL_SOURCES.find(s => s.key === origin.source)?.label || origin.source) : origin.source);
const label = isScout
? `Scout · ${origin.scoutName || origin.scoutId}`
: `Responder · ${sourceLabel}`;
const color = isScout ? "#3858d6" : "#1f8a5b";
const bg = isScout ? "rgba(56, 88, 214, 0.08)" : "rgba(31, 138, 91, 0.08)";
const borderColor = isScout ? "rgba(56, 88, 214, 0.22)" : "rgba(31, 138, 91, 0.22)";
return (
{compact ? (isScout ? origin.scoutName : "Responder") : label}
);
};
// 14-day reports/day sparkline.
const Sparkline = ({ values, width = 96, height = 22, color = "#3858d6" }) => {
if (!values || values.length === 0) return null;
const max = Math.max(1, ...values);
const stepW = width / values.length;
return (
);
};
Object.assign(window, {
PriorityChip, Avatar, Reviewers, ConfidenceBar, SignalStrip,
SolutionCard, SolutionRow, Evidence, MergeButton, CopyLinkButton,
WhyPopover, PriorityWithWhy, ActionabilityWithWhy,
OriginChip, Sparkline,
});