From 5eb99e35c1500fb2277e22f1cd1c436c8b7ff6ab Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Mar 2026 23:26:20 +0000
Subject: [PATCH] feat: branch hover card pops out in front with backdrop dim
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On hover, the card:
- Grows slightly wider and floats directly over the base card
- Shows detail content (tried, result, reason, steps)
- Dims everything behind it with a fixed black/30 scrim
- Heavy drop shadow for depth (0 8px 32px rgba(0,0,0,0.5))
- Status-colored border maintained

Active branch still shows detail inline (no hover needed).
Cards below don't shift — the expanded version is position: absolute.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/session/BranchNode.tsx     | 110 +++++++++++-------
 1 file changed, 67 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/session/BranchNode.tsx b/frontend/src/components/session/BranchNode.tsx
index 5e5ee607..dd2aa093 100644
--- a/frontend/src/components/session/BranchNode.tsx
+++ b/frontend/src/components/session/BranchNode.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react'
+import { useState } from 'react'
 import { CircleDot, CheckCircle2, XCircle, Circle, RotateCcw } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { BranchResponse } from '@/types/branching'
@@ -60,22 +60,20 @@ interface BranchNodeProps {
 
 export function BranchNode({ branch, depth, isActive, onClick }: BranchNodeProps) {
   const [isHovered, setIsHovered] = useState(false)
-  const cardRef = useRef<HTMLDivElement>(null)
   const config = STATUS_CONFIG[branch.status]
   const Icon = config.icon
 
   const hasDetail = branch.context_summary || branch.status_reason
-  const showPopover = isHovered && hasDetail && !isActive
+  const showExpanded = isHovered && hasDetail && !isActive
 
   return (
     <div
-      ref={cardRef}
       style={{ marginLeft: `${depth * 12}px` }}
       className="relative"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {/* Card */}
+      {/* Base card — always visible */}
       <button
         type="button"
         onClick={() => onClick(branch.id)}
@@ -86,28 +84,9 @@ export function BranchNode({ branch, depth, isActive, onClick }: BranchNodeProps
             : 'bg-card/60 border-default hover:bg-card hover:border-hover',
         )}
       >
-        {/* Header row */}
-        <div className="flex items-center gap-2">
-          <Icon size={14} className={cn('shrink-0', config.textClass)} />
-          <span
-            className={cn(
-              'flex-1 text-sm truncate',
-              isActive ? 'text-heading font-medium' : 'text-foreground'
-            )}
-          >
-            {branch.label}
-          </span>
-          <span
-            className={cn(
-              'text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded-full shrink-0',
-              config.badgeClass
-            )}
-          >
-            {config.label}
-          </span>
-        </div>
+        <CardHeader icon={Icon} config={config} branch={branch} isActive={isActive} />
 
-        {/* Inline detail for ACTIVE branch only */}
+        {/* Inline detail for active branch */}
         {isActive && hasDetail && (
           <div className="mt-2 pt-2 border-t border-default/50 space-y-1">
             <BranchDetail branch={branch} />
@@ -115,29 +94,74 @@ export function BranchNode({ branch, depth, isActive, onClick }: BranchNodeProps
         )}
       </button>
 
-      {/* Floating popover for HOVERED non-active branches */}
-      {showPopover && (
-        <div
-          className={cn(
-            'absolute z-50 left-full top-0 ml-2 w-64',
-            'bg-card border rounded-lg p-3 space-y-1',
-            'shadow-[0_4px_20px_rgba(0,0,0,0.4)]',
-            'animate-in fade-in-0 zoom-in-95 duration-150',
-            config.borderClass
-          )}
-        >
-          <div className="flex items-center gap-1.5 mb-1.5">
-            <Icon size={12} className={config.textClass} />
-            <span className="text-xs font-medium text-heading truncate">{branch.label}</span>
+      {/* Expanded card — floats directly on top of the base card */}
+      {showExpanded && (
+        <>
+          {/* Scrim behind to dim everything */}
+          <div className="fixed inset-0 z-40 bg-black/30" />
+
+          {/* Expanded card positioned over the original */}
+          <div
+            className={cn(
+              'absolute z-50 inset-x-0 top-0',
+              'bg-card border rounded-lg p-2.5',
+              'shadow-[0_8px_32px_rgba(0,0,0,0.5)]',
+              config.borderClass,
+            )}
+            style={{
+              /* Grow slightly wider than the base card */
+              marginLeft: -8,
+              marginRight: -8,
+              width: 'calc(100% + 16px)',
+            }}
+          >
+            <CardHeader icon={Icon} config={config} branch={branch} isActive={false} />
+            <div className="mt-2 pt-2 border-t border-default/50 space-y-1">
+              <BranchDetail branch={branch} />
+            </div>
           </div>
-          <BranchDetail branch={branch} />
-        </div>
+        </>
       )}
     </div>
   )
 }
 
-/** Shared detail content used by both inline (active) and popover (hover) */
+/** Card header row — shared between base and expanded states */
+function CardHeader({
+  icon: Icon,
+  config,
+  branch,
+  isActive,
+}: {
+  icon: React.ElementType
+  config: StatusConfig
+  branch: BranchResponse
+  isActive: boolean
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <Icon size={14} className={cn('shrink-0', config.textClass)} />
+      <span
+        className={cn(
+          'flex-1 text-sm truncate',
+          isActive ? 'text-heading font-medium' : 'text-foreground'
+        )}
+      >
+        {branch.label}
+      </span>
+      <span
+        className={cn(
+          'text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded-full shrink-0',
+          config.badgeClass
+        )}
+      >
+        {config.label}
+      </span>
+    </div>
+  )
+}
+
+/** Detail content — shared between inline (active) and expanded (hover) */
 function BranchDetail({ branch }: { branch: BranchResponse }) {
   return (
     <>