# VS Code Interactive Debugging Setup

## 🚀 **Quick Setup (2 minutes)**

### 1. **Open Project in VS Code**
```bash
code /Users/noise/Code/streamlens
```

### 2. **Set Breakpoints**
Add breakpoints at these exact lines in VS Code:

**In `analyzer/tui/textual/widgets/filtered_flow_view.py`:**
- **Line 152**: `debug_log("compose() - Creating filter bar and buttons")`
- **Line 183**: `debug_log("on_mount() - Initializing view")`
- **Line 189**: `self.refresh_frame_types()`
- **Line 229**: `debug_log("refresh_frame_types() - Starting refresh")`
- **Line 282**: `debug_log("refresh_frame_types() - About to remove/recreate buttons")`

### 3. **Start Debug Session**
- Press **F5** in VS Code
- Choose **"Debug StreamLens Interactive"** from the dropdown
- The app will start with the debugger attached

### 4. **Step Through Button Creation**
The debugger will pause at each breakpoint so you can:
- **Inspect variables**: Hover over `self.frame_type_buttons`, `frame_types`, etc.
- **Check button states**: Look at `btn.parent`, `btn.visible`, etc.
- **Step through code**: Press F10 to step line by line
- **Continue execution**: Press F5 to continue to next breakpoint

## 🔍 **What to Look For**

### **In compose() method:**
- Are buttons being created and added to `self.frame_type_buttons`?
- Are the `yield` statements executing?
- Check if `overview_btn` and predefined buttons are created

### **In on_mount() method:**
- Does `refresh_frame_types()` get called?
- What happens during table setup?

### **In refresh_frame_types() method:**
- Are there any frame types detected?
- Is the method being throttled?
- Are buttons being removed/recreated?
- Check `filter_bar.children` before and after

## 🛠️ **Debug Console Commands**

While paused at breakpoints, you can type these in the Debug Console:

```python
# Check button state
len(self.frame_type_buttons)
list(self.frame_type_buttons.keys())

# Check if buttons have parents
for name, btn in self.frame_type_buttons.items():
    print(f"{name}: parent={btn.parent}")

# Check frame types
frame_types = self._get_all_frame_types()
print(f"Frame types: {frame_types}")

# Check filter bar
try:
    filter_bar = self.query_one("#filter-bar")
    print(f"Filter bar children: {len(filter_bar.children)}")
except:
    print("Filter bar not found")
```

## 🎯 **Expected Flow**

1. **compose()** - Creates buttons and adds to dict
2. **on_mount()** - Calls refresh_frame_types() 
3. **refresh_frame_types()** - May remove/recreate buttons based on data

**If buttons disappear, check:**
- Are they created in compose()?
- Do they have parents after creation?
- Are they removed during refresh_frame_types()?
- Is the removal/recreation logic working correctly?

## 📊 **Alternative: Console Debug**

If VS Code debugging doesn't work, run with console output:

```bash
python debug_streamlens.py > debug.log 2>&1 &
tail -f debug.log | grep "DEBUG:"
```

Then watch for the debug messages showing button states.

## 🔧 **Debugging Tips**

1. **Start with compose()** - This is where buttons should first appear
2. **Check on_mount()** - This is where refresh_frame_types() is called
3. **Watch refresh_frame_types()** - This is where buttons might disappear
4. **Inspect parent relationships** - Buttons without parents won't show
5. **Check CSS issues** - Even with parents, CSS might hide buttons

The interactive debugger will let you see exactly when and why buttons disappear! 🎯