# Debugging Guide

## Rule
When something breaks, debug the full chain before proposing a fix.

Example chain:
```text
button click → action function → renderer → state update → screen switch → CSS visibility
```

## Calendar incident lesson
The Calendar button looked broken, but the real bug was:
```js
const { calendarExpandedKey } = ctx;
calendarExpandedKey = '';
```

That caused:
```text
Assignment to constant variable
```

Correct fix:
```js
const activeExpandedKey = entryKeys.includes(calendarExpandedKey)
  ? calendarExpandedKey
  : '';
```

## Standard debug checklist

### 1. Confirm function name
- Is the function defined?
- Is the button calling the same function?
- Are there spelling/language mismatches?

### 2. Confirm action enters
Add temporary logging or inspect call chain:
```js
console.log('showCalendar entered');
```

### 3. Confirm renderer does not throw
Look for:
- assignment to const
- missing destructured values
- undefined helper functions
- direct context mutation

### 4. Confirm screen switch
Check:
- `.screen.active`
- `body.dataset.screen`
- history/hash state

### 5. Confirm CSS visibility
Check:
- `.screen:not(.active)`
- `body[data-screen]`
- z-index / overlay / pointer-events
- hidden background images

### 6. Do not patch symptoms first
Avoid:
- adding duplicate click handlers
- adding capture/pointerup hacks
- increasing CSS specificity blindly
- changing unrelated layout

## Good fix criteria
A good fix should:
- explain the root cause
- remove or correct the broken line
- add a small regression check if possible
- not add a competing ownership path