From d518b13f36237e50d3da74a8915055d8def681a5 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Thu, 27 Aug 2026 18:36:11 -0400
Subject: [PATCH] feat(xp): show experience descriptions

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/frontend/blocks/AppSidebar.tsx | 12 +++++++++++-
 src/components/frontend/blocks/XPDisplay.tsx  | 12 ++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/frontend/blocks/AppSidebar.tsx b/src/components/frontend/blocks/AppSidebar.tsx
index 6be0dd0..960c978 100644
--- a/src/components/frontend/blocks/AppSidebar.tsx
+++ b/src/components/frontend/blocks/AppSidebar.tsx
@@ -38,6 +38,7 @@ import XPDisplay from "@/components/frontend/blocks/XPDisplay";
 import type { ResolvedLevel } from "@/utils/xp/resolveLevel";
 import { Rank, User } from "@/payload-types";
 import { Progress } from "@/components/ui/progress";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { updatePreferences } from "@/app/(frontend)/account/actions";
 
 const data = {
@@ -277,7 +278,16 @@ export function AppSidebar({
           <div className="flex items-center justify-between">
             {isMiniMode ? (
               <div className="flex items-center gap-2">
-                <div className="text-xs text-muted-foreground uppercase">{xpLevel.levelName}</div>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <div className="text-xs text-muted-foreground uppercase">
+                      {xpLevel.levelName}
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{xpLevel.levelDesc}</p>
+                  </TooltipContent>
+                </Tooltip>
                 <SparkleIcon className="w-4 h-4" />
                 <span className="text-xs font-bold">{xpLevel.xp.toLocaleString()}</span>
                 <Progress value={xpLevel.progress} className="w-20 h-1" />
diff --git a/src/components/frontend/blocks/XPDisplay.tsx b/src/components/frontend/blocks/XPDisplay.tsx
index 4b16fd4..9ca0167 100644
--- a/src/components/frontend/blocks/XPDisplay.tsx
+++ b/src/components/frontend/blocks/XPDisplay.tsx
@@ -6,9 +6,10 @@ import { Progress } from "@/components/ui/progress";
 import { SparkleIcon } from "lucide-react";
 import type { ResolvedLevel } from "@/utils/xp/resolveLevel";
 import { PROFILE_UPDATE_EVENT, type ProfileUpdateDetail } from "@/hooks/useGameTick";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 const XPDisplay = ({ xpLevel }: { xpLevel: ResolvedLevel }) => {
-  const { levelName, progress, xp, nextLevelXP } = xpLevel;
+  const { levelName, levelDesc, progress, xp, nextLevelXP } = xpLevel;
   const [xpGain, setXpGain] = useState<number | null>(null);
   const [xpGainId, setXpGainId] = useState(0);
   const lastGainRef = useRef<{ amount: number; at: number } | null>(null);
@@ -44,7 +45,14 @@ const XPDisplay = ({ xpLevel }: { xpLevel: ResolvedLevel }) => {
         <ItemTitle className="flex justify-between items-center w-full">
           <SparkleIcon />
           <div className="flex flex-col items-end">
-            <span className="uppercase">{levelName}</span>
+            <Tooltip>
+              <TooltipTrigger>
+                <span className="uppercase">{levelName}</span>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{levelDesc ?? "Missing content!"}</p>
+              </TooltipContent>
+            </Tooltip>
             <span className="relative text-2xl font-bold uppercase flex flex-row items-center">
               {xp.toLocaleString()}
               {xpGain !== null && (