---
prefix: DIAG
inner_loop: false
message_types:
  success: diag_complete
  error: error
---

# State Diagnoser

Diagnose root causes of UI issues: state management problems, event binding failures, async handling errors.

## Phase 2: Context & Complexity Assessment

1. Load scan report from `<session>/artifacts/scan-report.md`
2. Load scanner state via `team_msg(operation="get_state", session_id=<session-id>, role="scanner")`
3. Assess issue complexity:

| Complexity | Criteria | Strategy |
|------------|----------|----------|
| High | 5+ issues, cross-component state | CLI delegation |
| Medium | 2-4 issues, single component | CLI for analysis |
| Low | 1 issue, simple pattern | Inline analysis |

### Complex Analysis (use CLI)

For complex multi-file state management issues:

```
Bash(`ccw cli -p "PURPOSE: Analyze state management patterns and identify root causes
CONTEXT: @<issue-files>
EXPECTED: Root cause analysis with fix recommendations
CONSTRAINTS: Focus on reactive update patterns" --tool gemini --mode analysis`)
```

## Phase 3: Root Cause Analysis

For each issue from scan report:

### State Management Diagnosis

| Pattern | Root Cause | Fix Strategy |
|---------|------------|--------------|
| Array.splice/push | Direct mutation, no reactive trigger | Use filter/map/spread for new array |
| Object property change | Direct mutation | Use spread operator or reactive API |
| Missing useState/ref | No state tracking | Add state variable |
| Stale closure | Captured old state value | Use functional setState or ref.current |

### Event Binding Diagnosis

| Pattern | Root Cause | Fix Strategy |
|---------|------------|--------------|
| onClick without handler | Missing event binding | Add event handler function |
| Async without await | Unhandled promise | Add async/await or .then() |
| No error catching | Uncaught exceptions | Wrap in try/catch |
| Event propagation issue | stopPropagation missing | Add event.stopPropagation() |

### Async Handling Diagnosis

| Pattern | Root Cause | Fix Strategy |
|---------|------------|--------------|
| No loading state | Missing async state tracking | Add isLoading state |
| No error handling | Missing catch block | Add try/catch with error state |
| Race condition | Multiple concurrent requests | Add request cancellation or debounce |

## Phase 4: Diagnosis Report

1. Generate root cause analysis for each issue:

```markdown
# Diagnosis Report

## Issue #1: Upload form no loading state
- **File**: src/components/Upload.tsx:45
- **Root Cause**: Form submit handler is async but no loading state variable exists
- **Pattern Type**: Missing async state tracking
- **Fix Recommendation**:
  - Add `const [isLoading, setIsLoading] = useState(false)` (React)
  - Add `const isLoading = ref(false)` (Vue)
  - Wrap async call in try/finally with setIsLoading(true/false)
  - Disable button when isLoading is true
```

2. Write report to `<session>/artifacts/diagnosis.md`
3. Share state via team_msg:
   ```
   team_msg(operation="log", session_id=<session-id>, from="diagnoser",
            type="state_update", data={
              diagnosed_issues: <count>,
              pattern_types: {
                state_management: <count>,
                event_binding: <count>,
                async_handling: <count>
              }
            })
   ```