feat: add tooltips to Show Payload, System Prompt, User Prompt, and Response in pipeline event log

This commit is contained in:
jlightner 2026-03-31 03:23:30 +00:00
parent 5490999fd1
commit 2117687720

View file

@ -89,6 +89,7 @@ function JsonViewer({ data }: { data: Record<string, unknown> | null }) {
className="json-viewer__toggle" className="json-viewer__toggle"
onClick={() => setOpen((v) => !v)} onClick={() => setOpen((v) => !v)}
aria-expanded={open} aria-expanded={open}
title="Raw JSON event data logged by the pipeline stage"
> >
{open ? "▾ Hide payload" : "▸ Show payload"} {open ? "▾ Hide payload" : "▸ Show payload"}
</button> </button>
@ -117,6 +118,12 @@ function DebugPayloadViewer({ event }: { event: PipelineEvent }) {
const [openSections, setOpenSections] = useState<Record<string, boolean>>({}); const [openSections, setOpenSections] = useState<Record<string, boolean>>({});
const [copiedKey, setCopiedKey] = useState<string | null>(null); const [copiedKey, setCopiedKey] = useState<string | null>(null);
const SECTION_TOOLTIPS: Record<string, string> = {
"System Prompt": "Instructions sent to the LLM defining its role and output format for this pipeline stage",
"User Prompt": "The actual transcript content and extraction request sent to the LLM",
"Response": "Raw LLM output before parsing — the extracted data that feeds the next stage",
};
if (sections.length === 0) return null; if (sections.length === 0) return null;
const toggleSection = (label: string) => { const toggleSection = (label: string) => {
@ -179,6 +186,7 @@ function DebugPayloadViewer({ event }: { event: PipelineEvent }) {
className="debug-viewer__section-toggle" className="debug-viewer__section-toggle"
onClick={() => toggleSection(sec.label)} onClick={() => toggleSection(sec.label)}
aria-expanded={isOpen} aria-expanded={isOpen}
title={SECTION_TOOLTIPS[sec.label] ?? ""}
> >
{isOpen ? "▾" : "▸"} {sec.label} {isOpen ? "▾" : "▸"} {sec.label}
</button> </button>