From 8b3033ca9db002395e37b30993636a98684ed441 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Wed, 11 Mar 2026 02:54:00 -0400
Subject: [PATCH] fix: tree navigation root ID + session closure popover
 z-index
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TreeNavigationPage: initialize currentNodeId from tree_structure.id
  instead of hardcoded 'root' — fixes "Invalid tree structure" for trees
  with non-'root' root IDs (KB Accelerator, AI Flow Builder)
- SessionHistoryPage: add relative z-10 to session card when close
  popover is open so it renders above sibling cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/SessionHistoryPage.tsx |  5 ++++-
 frontend/src/pages/TreeNavigationPage.tsx | 10 +++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/SessionHistoryPage.tsx b/frontend/src/pages/SessionHistoryPage.tsx
index 689c6cdc..cb6338bd 100644
--- a/frontend/src/pages/SessionHistoryPage.tsx
+++ b/frontend/src/pages/SessionHistoryPage.tsx
@@ -279,7 +279,10 @@ export function SessionHistoryPage() {
           {sessions.map((session) => (
             <div
               key={session.id}
-              className="bg-card border border-border rounded-xl p-4 transition-all hover:bg-accent/50"
+              className={cn(
+                'bg-card border border-border rounded-xl p-4 transition-all hover:bg-accent/50',
+                closingSessionId === session.id && 'relative z-10'
+              )}
             >
               <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                 <div className="flex-1">
diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index 1acf1f4c..ff389130 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -39,8 +39,8 @@ export function TreeNavigationPage() {
 
   const [tree, setTree] = useState<Tree | null>(null)
   const [session, setSession] = useState<Session | null>(null)
-  const [currentNodeId, setCurrentNodeId] = useState<string>('root')
-  const [pathTaken, setPathTaken] = useState<string[]>(['root'])
+  const [currentNodeId, setCurrentNodeId] = useState<string>('')
+  const [pathTaken, setPathTaken] = useState<string[]>([])
   const [decisions, setDecisions] = useState<DecisionRecord[]>([])
   const [currentStepEnteredAt, setCurrentStepEnteredAt] = useState<string>(new Date().toISOString())
   const [notes, setNotes] = useState<string>('')
@@ -294,7 +294,7 @@ export function TreeNavigationPage() {
         const sessionData = await sessionsApi.get(locationState.sessionId)
         setSession(sessionData)
         setPathTaken(sessionData.path_taken)
-        setCurrentNodeId(sessionData.path_taken[sessionData.path_taken.length - 1] || 'root')
+        setCurrentNodeId(sessionData.path_taken[sessionData.path_taken.length - 1] || treeData.tree_structure?.id || 'root')
         setDecisions(sessionData.decisions as DecisionRecord[])
         setCurrentStepEnteredAt(deriveCurrentStepEnteredAt(sessionData))
         customStepFlow.initCustomSteps(sessionData.custom_steps || [])
@@ -320,6 +320,10 @@ export function TreeNavigationPage() {
         client_name: clientName || undefined,
       })
       setSession(newSession)
+      // Initialize currentNodeId to the tree's actual root (may not be 'root')
+      const rootId = tree.tree_structure?.id || 'root'
+      setCurrentNodeId(rootId)
+      setPathTaken([rootId])
       setCurrentStepEnteredAt(newSession.started_at || new Date().toISOString())
       setShowMetadataForm(false)
       // Save for "Repeat Last Session"