From 0f70cca905c0e7c48d2bb04b7746be7cc03ff16c Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Mar 2026 23:09:59 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20restyle=20branch=20sidebar=20=E2=80=94?=
 =?UTF-8?q?=20real=20cards,=20scale=20animation,=20visible=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BranchMap header:
- GitBranch icon: text-muted → text-accent-text
- "Branch Map" label: text-muted → text-muted-foreground
- Count: text-muted → text-muted-foreground with font-medium

BranchNode cards:
- Now proper cards: bg-card/60 with 1px border-default, rounded-lg, p-2.5
- Active card: accent-tinted border, subtle glow
- Hover animation: scale(1.02) + shadow — card lifts toward the user
  instead of expanding downward
- Detail section: uses scale-y transform from origin-top, feels like
  the card is growing rather than content sliding down
- Status-aware border colors (accent/success/danger/warning)
- Detail labels ("Tried:", "Result:") now text-foreground font-medium
  instead of invisible text-muted
- Depth indentation via marginLeft instead of paddingLeft

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/session/BranchMap.tsx |  34 ++---
 .../src/components/session/BranchNode.tsx     | 137 ++++++++++--------
 2 files changed, 92 insertions(+), 79 deletions(-)

diff --git a/frontend/src/components/session/BranchMap.tsx b/frontend/src/components/session/BranchMap.tsx
index 7a39041c..e0fd7cd7 100644
--- a/frontend/src/components/session/BranchMap.tsx
+++ b/frontend/src/components/session/BranchMap.tsx
@@ -12,12 +12,10 @@ function buildTree(branches: BranchResponse[]): BranchTreeNode[] {
   const map = new Map<string, BranchTreeNode>()
   const roots: BranchTreeNode[] = []
 
-  // First pass: create nodes
   for (const branch of branches) {
     map.set(branch.id, { branch, depth: 0, children: [] })
   }
 
-  // Second pass: assign parents / roots
   for (const branch of branches) {
     const node = map.get(branch.id)!
     if (branch.parent_branch_id && map.has(branch.parent_branch_id)) {
@@ -54,27 +52,29 @@ export function BranchMap({ branches, activeBranchId, onSelectBranch }: BranchMa
   const flat = flattenTree(roots)
 
   return (
-    <div className="flex flex-col gap-1">
-      <div className="flex items-center gap-1.5 px-2 pb-2">
-        <GitBranch size={14} className="text-muted" />
-        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted">
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-1.5 px-2 pb-1">
+        <GitBranch size={14} className="text-accent-text" />
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
           Branch Map
         </span>
-        <span className="ml-auto text-[10px] text-muted">{branches.length}</span>
+        <span className="ml-auto text-[10px] font-medium text-muted-foreground">{branches.length}</span>
       </div>
 
       {flat.length === 0 ? (
-        <p className="px-2 text-xs text-muted">No branches yet.</p>
+        <p className="px-2 text-xs text-muted-foreground">No branches yet.</p>
       ) : (
-        flat.map(({ branch, depth }) => (
-          <BranchNode
-            key={branch.id}
-            branch={branch}
-            depth={depth}
-            isActive={branch.id === activeBranchId}
-            onClick={onSelectBranch}
-          />
-        ))
+        <div className="flex flex-col gap-1.5">
+          {flat.map(({ branch, depth }) => (
+            <BranchNode
+              key={branch.id}
+              branch={branch}
+              depth={depth}
+              isActive={branch.id === activeBranchId}
+              onClick={onSelectBranch}
+            />
+          ))}
+        </div>
       )}
     </div>
   )
diff --git a/frontend/src/components/session/BranchNode.tsx b/frontend/src/components/session/BranchNode.tsx
index 4d78a015..cf9a1f9c 100644
--- a/frontend/src/components/session/BranchNode.tsx
+++ b/frontend/src/components/session/BranchNode.tsx
@@ -9,6 +9,7 @@ interface StatusConfig {
   icon: React.ElementType
   textClass: string
   badgeClass: string
+  borderClass: string
   label: string
 }
 
@@ -17,30 +18,35 @@ const STATUS_CONFIG: Record<BranchStatus, StatusConfig> = {
     icon: CircleDot,
     textClass: 'text-accent',
     badgeClass: 'bg-accent-dim text-accent-text',
+    borderClass: 'border-accent/40',
     label: 'Active',
   },
   solved: {
     icon: CheckCircle2,
     textClass: 'text-success',
     badgeClass: 'bg-success-dim text-success',
+    borderClass: 'border-success/30',
     label: 'Solved',
   },
   dead_end: {
     icon: XCircle,
     textClass: 'text-danger',
     badgeClass: 'bg-danger-dim text-danger',
+    borderClass: 'border-danger/30',
     label: 'Dead End',
   },
   untried: {
     icon: Circle,
-    textClass: 'text-muted',
-    badgeClass: 'bg-elevated text-muted',
+    textClass: 'text-muted-foreground',
+    badgeClass: 'bg-elevated text-muted-foreground',
+    borderClass: 'border-default',
     label: 'Untried',
   },
   revived: {
     icon: RotateCcw,
     textClass: 'text-warning',
     badgeClass: 'bg-warning-dim text-warning',
+    borderClass: 'border-warning/30',
     label: 'Revived',
   },
 }
@@ -60,79 +66,86 @@ export function BranchNode({ branch, depth, isActive, onClick }: BranchNodeProps
 
   return (
     <div
+      style={{ marginLeft: `${depth * 12}px` }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       <button
         type="button"
         onClick={() => onClick(branch.id)}
-        style={{ paddingLeft: `${8 + depth * 16}px` }}
         className={cn(
-          'w-full flex items-center gap-2 py-2 pr-3 text-left rounded-md transition-all duration-150',
-          'hover:bg-elevated',
-          isActive && 'bg-accent-dim border-l-2 border-accent'
+          'w-full text-left rounded-lg border p-2.5 transition-all duration-200 ease-out',
+          'origin-center',
+          isActive
+            ? cn('bg-card border-accent/50 shadow-[0_0_0_1px_rgba(249,115,22,0.15)]', config.borderClass)
+            : 'bg-card/60 border-default hover:bg-card hover:border-hover',
+          showDetail && !isActive && 'scale-[1.02] shadow-[0_2px_8px_rgba(0,0,0,0.25)]',
         )}
       >
-        <Icon
-          size={14}
-          className={cn('shrink-0', config.textClass)}
-        />
-        <span
-          className={cn(
-            'flex-1 text-sm truncate',
-            isActive ? 'text-heading font-medium' : 'text-primary'
-          )}
-        >
-          {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>
-      </button>
+        {/* 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>
 
-      {/* Expandable detail panel */}
-      <div
-        className={cn(
-          'overflow-hidden transition-all duration-200 ease-out',
-          showDetail ? 'max-h-[120px] opacity-100' : 'max-h-0 opacity-0'
-        )}
-        style={{ paddingLeft: `${24 + depth * 16}px` }}
-      >
-        <div className="py-1.5 pr-3 space-y-1">
-          {branch.context_summary ? (
-            <>
-              {branch.context_summary.tried.length > 0 && (
-                <p className="text-[11px] text-muted-foreground leading-snug">
-                  <span className="text-muted">Tried:</span>{' '}
-                  {branch.context_summary.tried.join(', ')}
-                </p>
-              )}
-              {branch.context_summary.concluded && (
-                <p className="text-[11px] text-muted-foreground leading-snug">
-                  <span className="text-muted">Result:</span>{' '}
-                  {branch.context_summary.concluded}
-                </p>
-              )}
-            </>
-          ) : (
-            <p className="text-[11px] text-muted italic">No activity yet</p>
+        {/* Detail section — animates from scale-y-0 to scale-y-100 */}
+        <div
+          className={cn(
+            'transition-all duration-200 ease-out origin-top',
+            showDetail
+              ? 'max-h-[120px] opacity-100 scale-y-100 mt-2 pt-2 border-t border-default/50'
+              : 'max-h-0 opacity-0 scale-y-0 mt-0 pt-0'
           )}
-          {branch.status_reason && (
-            <p className="text-[11px] text-muted-foreground leading-snug">
-              <span className="text-muted">Reason:</span>{' '}
-              {branch.status_reason}
-            </p>
-          )}
-          <div className="flex items-center gap-3 text-[10px] text-muted">
-            <span>{branch.step_count} step{branch.step_count !== 1 ? 's' : ''}</span>
+        >
+          <div className="space-y-1">
+            {branch.context_summary ? (
+              <>
+                {branch.context_summary.tried.length > 0 && (
+                  <p className="text-[11px] text-muted-foreground leading-snug">
+                    <span className="text-foreground font-medium">Tried:</span>{' '}
+                    {branch.context_summary.tried.join(', ')}
+                  </p>
+                )}
+                {branch.context_summary.concluded && (
+                  <p className="text-[11px] text-muted-foreground leading-snug">
+                    <span className="text-foreground font-medium">Result:</span>{' '}
+                    {branch.context_summary.concluded}
+                  </p>
+                )}
+              </>
+            ) : (
+              <p className="text-[11px] text-muted-foreground italic">No activity yet</p>
+            )}
+            {branch.status_reason && (
+              <p className="text-[11px] text-muted-foreground leading-snug">
+                <span className="text-foreground font-medium">Reason:</span>{' '}
+                {branch.status_reason}
+              </p>
+            )}
+            <div className="flex items-center gap-3 text-[10px] text-muted-foreground pt-0.5">
+              <span>{branch.step_count} step{branch.step_count !== 1 ? 's' : ''}</span>
+            </div>
           </div>
         </div>
-      </div>
+      </button>
     </div>
   )
 }