From 2117687720400d66cb59718bfc66566abc9c0f1b Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Tue, 31 Mar 2026 03:23:30 +0000
Subject: [PATCH] feat: add tooltips to Show Payload, System Prompt, User
 Prompt, and Response in pipeline event log

---
 frontend/src/pages/AdminPipeline.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/pages/AdminPipeline.tsx b/frontend/src/pages/AdminPipeline.tsx
index 9f80955..e462f95 100644
--- a/frontend/src/pages/AdminPipeline.tsx
+++ b/frontend/src/pages/AdminPipeline.tsx
@@ -89,6 +89,7 @@ function JsonViewer({ data }: { data: Record<string, unknown> | null }) {
         className="json-viewer__toggle"
         onClick={() => setOpen((v) => !v)}
         aria-expanded={open}
+        title="Raw JSON event data logged by the pipeline stage"
       >
         {open ? "▾ Hide payload" : "▸ Show payload"}
       </button>
@@ -117,6 +118,12 @@ function DebugPayloadViewer({ event }: { event: PipelineEvent }) {
   const [openSections, setOpenSections] = useState<Record<string, boolean>>({});
   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;
 
   const toggleSection = (label: string) => {
@@ -179,6 +186,7 @@ function DebugPayloadViewer({ event }: { event: PipelineEvent }) {
                 className="debug-viewer__section-toggle"
                 onClick={() => toggleSection(sec.label)}
                 aria-expanded={isOpen}
+                title={SECTION_TOOLTIPS[sec.label] ?? ""}
               >
                 {isOpen ? "▾" : "▸"} {sec.label}
               </button>