From dae9338933bfccf5d73ccdad562160701ff3f209 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Tue, 18 Nov 2025 10:19:01 -0500
Subject: [PATCH] debug: add visual debug info and render logging

- Added debug info boxes to both fallback and main render
- Added console logging at render time to track component state
- Visual debug boxes will show session counts and canvas dimensions
- This will help identify if component is rendering at all
---
 .../src/components/sessions/SessionTimelineView.tsx   | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/ui/desktop/src/components/sessions/SessionTimelineView.tsx b/ui/desktop/src/components/sessions/SessionTimelineView.tsx
index d2d0ac15d4..72e4096dfa 100644
--- a/ui/desktop/src/components/sessions/SessionTimelineView.tsx
+++ b/ui/desktop/src/components/sessions/SessionTimelineView.tsx
@@ -342,16 +342,24 @@ const SessionTimelineView: React.FC<SessionTimelineViewProps> = ({
     onSelectSession(nodeId);
   };
 
+  console.log('SessionTimelineView: About to render, treeData.nodes.length =', treeData.nodes.length);
+
   if (treeData.nodes.length === 0) {
+    console.log('SessionTimelineView: Rendering fallback - no nodes');
     return (
       <div className={`flex flex-col items-center justify-center h-full text-text-muted ${className}`}>
         <Calendar className="h-12 w-12 mb-4" />
         <p className="text-lg mb-2">No sessions to display</p>
         <p className="text-sm">Your session tree will appear here</p>
+        <p className="text-xs mt-4 bg-red-100 p-2 rounded">
+          DEBUG: {sessions.length} sessions passed, {treeData.nodes.length} nodes created
+        </p>
       </div>
     );
   }
 
+  console.log('SessionTimelineView: Rendering tree with', treeData.nodes.length, 'nodes');
+
   return (
     <div className={`${className}`}>
       {/* Header */}
@@ -360,6 +368,9 @@ const SessionTimelineView: React.FC<SessionTimelineViewProps> = ({
         <p className="text-sm text-text-muted">
           Tree visualization of {sessions.length} sessions showing temporal and topical relationships with curved connections.
         </p>
+        <p className="text-xs mt-2 bg-green-100 p-2 rounded">
+          DEBUG: Rendering {treeData.nodes.length} nodes, canvas: {treeData.width}x{treeData.height}
+        </p>
       </div>
 
       <ScrollArea className="h-full">