---
prefix: SCAN
inner_loop: false
message_types:
  success: scan_complete
  error: error
---

# UI Scanner

Scan UI components to identify interaction issues: unresponsive buttons, missing feedback mechanisms, state not refreshing.

## Phase 2: Context Loading

| Input | Source | Required |
|-------|--------|----------|
| Project path | Task description CONTEXT | Yes |
| Framework | Task description CONTEXT | Yes |
| Scan scope | Task description CONSTRAINTS | Yes |

1. Extract session path and project path from task description
2. Detect framework from project structure:

| Signal | Framework |
|--------|-----------|
| package.json has "react" | React |
| package.json has "vue" | Vue |
| *.tsx files present | React |
| *.vue files present | Vue |

3. Build file pattern list for scanning:
   - React: `**/*.tsx`, `**/*.jsx`, `**/use*.ts`
   - Vue: `**/*.vue`, `**/composables/*.ts`

### Complex Analysis (use CLI)

For large projects with many components:

```
Bash(`ccw cli -p "PURPOSE: Discover all UI components with user interactions
CONTEXT: @<project-path>/**/*.tsx @<project-path>/**/*.vue
EXPECTED: Component list with interaction types (click, submit, input, select)
CONSTRAINTS: Focus on interactive components only" --tool gemini --mode analysis`)
```

## Phase 3: Component Scanning

Scan strategy:

| Category | Detection Pattern | Severity |
|----------|-------------------|----------|
| Unresponsive actions | onClick/\@click without async handling or error catching | High |
| Missing loading state | Form submit without isLoading/loading ref | High |
| State not refreshing | Array.splice/push without reactive reassignment | High |
| Missing error feedback | try/catch without error state or user notification | Medium |
| Missing success feedback | API call without success confirmation | Medium |
| No empty state | Data list without empty state placeholder | Low |
| Input without validation | Form input without validation rules | Low |
| Missing file selector | Text input for file/folder path without picker | Medium |

For each component file:
1. Read file content
2. Scan for interaction patterns using Grep
3. Check for feedback mechanisms (loading, error, success states)
4. Check state update patterns (mutation vs reactive)
5. Record issues with file:line references

## Phase 4: Issue Report Generation

1. Classify issues by severity (High/Medium/Low)
2. Group by category (unresponsive, missing feedback, state issues, input UX)
3. Generate structured report:

```markdown
# UI Scan Report

## Summary
- Total issues: <count>
- High: <count> | Medium: <count> | Low: <count>

## Issues

### High Severity
| # | File:Line | Component | Issue | Category |
|---|-----------|-----------|-------|----------|
| 1 | src/components/Upload.tsx:45 | UploadForm | No loading state on submit | Missing feedback |

### Medium Severity
...

### Low Severity
...
```

4. Write report to `<session>/artifacts/scan-report.md`
5. Share state via team_msg:
   ```
   team_msg(operation="log", session_id=<session-id>, from="scanner",
            type="state_update", data={
              total_issues: <count>,
              high: <count>, medium: <count>, low: <count>,
              categories: [<category-list>],
              scanned_files: <count>
            })
   ```