From bf5bff209f044219a903643716381d4ef2c18f25 Mon Sep 17 00:00:00 2001
From: omartelo <meopedevts@proton.me>
Date: Thu, 16 Jul 2026 16:24:38 -0300
Subject: [PATCH] feat: rich session card tooltip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Session card tooltip showed only the working directory, so a long label
clipped in the card was unreadable without widening the sidebar. Expand
it into a mini card that opens to the right: full label, path, branch, PR
and diff badge — reusing the git/pr data the card already computes.

Theme it to match the card (bg-card, border, foreground/muted text)
instead of the default inverted pill, and let the tooltip arrow inherit
the popup background so it follows any themed instance.
---
 .../src/components/sidebar/SessionCard.tsx    | 28 ++++++++++++++++++-
 frontend/src/components/ui/tooltip.tsx        |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/sidebar/SessionCard.tsx b/frontend/src/components/sidebar/SessionCard.tsx
index 08758bf80..0f970dd98 100644
--- a/frontend/src/components/sidebar/SessionCard.tsx
+++ b/frontend/src/components/sidebar/SessionCard.tsx
@@ -206,7 +206,33 @@ export function SessionCard({
             <X className="size-3"/>
           </span>
           </ContextMenuTrigger>
-          <TooltipContent>{shownPath}</TooltipContent>
+          <TooltipContent
+            side="right"
+            className="max-w-xs border border-border bg-card text-foreground"
+          >
+            <div className="flex flex-col gap-1.5">
+              <span className="font-medium">{session.label}</span>
+              <span className="font-mono text-muted-foreground">{shownPath}</span>
+              {git?.branch && (
+                <span className="flex flex-wrap items-center gap-2 text-muted-foreground">
+                  <span className="flex items-center gap-1">
+                    <GitBranch className="size-3 shrink-0" />
+                    {git.branch}
+                  </span>
+                  {pr && (
+                    <span className="flex items-center gap-1">
+                      <GitPullRequestArrow className="size-3 shrink-0" />#{pr.number}
+                    </span>
+                  )}
+                  {git.files > 0 && (
+                    <span className="flex items-center gap-1.5">
+                      <DiffStat added={git.added} deleted={git.deleted} />
+                    </span>
+                  )}
+                </span>
+              )}
+            </div>
+          </TooltipContent>
         </Tooltip>
         <ContextMenuContent>
           <ContextMenuItem onClick={() => setEditing(true)}>
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
index 96a9ec257..dc8b59d6b 100644
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -54,7 +54,7 @@ function TooltipContent({
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-inherit fill-inherit data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>