From 29e7aa675a612dc4b7fd54da4f52a3237ddc43df Mon Sep 17 00:00:00 2001
From: Oliver Kieselbach <oliver.kieselbach@outlook.com>
Date: Tue, 11 Aug 2026 15:06:50 +0200
Subject: [PATCH] web: native title tooltips explaining each annotation verdict

Same wording as the customer docs; plain browser tooltip, no cursor
change. Applied to the verdict buttons and the read-only pill.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../app/sessions/components/SessionAnnotationsCard.tsx    | 7 ++++++-
 .../app/sessions/components/sessionAnnotationLogic.ts     | 8 ++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Web/autopilot-monitor-web/app/sessions/components/SessionAnnotationsCard.tsx b/src/Web/autopilot-monitor-web/app/sessions/components/SessionAnnotationsCard.tsx
index 93921432..da5283d2 100644
--- a/src/Web/autopilot-monitor-web/app/sessions/components/SessionAnnotationsCard.tsx
+++ b/src/Web/autopilot-monitor-web/app/sessions/components/SessionAnnotationsCard.tsx
@@ -10,6 +10,7 @@ import {
   canWriteLane,
   hasContent,
   LANE_LABELS,
+  VERDICT_DESCRIPTIONS,
   VERDICT_LABELS,
   visibleLanes,
   validateNote,
@@ -218,7 +219,10 @@ export default function SessionAnnotationsCard({
               <div className="flex items-center flex-wrap gap-2 mb-2">
                 <span className="text-sm font-medium text-gray-900">{LANE_LABELS[lane]}</span>
                 {annotation?.verdict != null && !writable && (
-                  <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${VERDICT_PILL[annotation.verdict] ?? "bg-gray-100 text-gray-600"}`}>
+                  <span
+                    title={VERDICT_DESCRIPTIONS[annotation.verdict as AnnotationVerdict]}
+                    className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${VERDICT_PILL[annotation.verdict] ?? "bg-gray-100 text-gray-600"}`}
+                  >
                     {VERDICT_LABELS[annotation.verdict as AnnotationVerdict] ?? annotation.verdict}
                   </span>
                 )}
@@ -241,6 +245,7 @@ export default function SessionAnnotationsCard({
                           type="button"
                           role="radio"
                           aria-checked={selected}
+                          title={VERDICT_DESCRIPTIONS[verdict]}
                           onClick={() =>
                             setLaneEdit(lane, { verdict: selected ? null : verdict, saveResult: null })
                           }
diff --git a/src/Web/autopilot-monitor-web/app/sessions/components/sessionAnnotationLogic.ts b/src/Web/autopilot-monitor-web/app/sessions/components/sessionAnnotationLogic.ts
index d2741b1a..63c8ce77 100644
--- a/src/Web/autopilot-monitor-web/app/sessions/components/sessionAnnotationLogic.ts
+++ b/src/Web/autopilot-monitor-web/app/sessions/components/sessionAnnotationLogic.ts
@@ -49,6 +49,14 @@ export const VERDICT_LABELS: Record<AnnotationVerdict, string> = {
   inconclusive: "Inconclusive",
 };
 
+/** Native-tooltip explanations (title attribute) — same wording as the customer docs. */
+export const VERDICT_DESCRIPTIONS: Record<AnnotationVerdict, string> = {
+  root_cause_confirmed: "The analysis was right",
+  analysis_wrong: "The analysis pointed at the wrong cause",
+  different_problem: "The real issue was something the rules did not cover",
+  inconclusive: "The investigation ended without a clear answer",
+};
+
 export const LANE_LABELS: Record<AnnotationLane, string> = {
   operator: "Operator",
   tenantadmin: "Tenant Admin",