/screenshot

/screenshot a2ui-demo

/run-and-capture a2ui-demo

# Find Makepad-related processes
ps aux | grep -E "(makepad|cargo.*run)" | grep -v grep

# Generic pattern - match by process name
osascript -e 'tell application "System Events" to set frontmost of (first process whose name contains "APP_NAME") to true'

# Example
osascript -e 'tell application "System Events" to set frontmost of (first process whose name contains "a2ui") to true'

# Silent capture (-x suppresses shutter sound)
screencapture -x $SCRATCHPAD/screenshot.png

Read $SCRATCHPAD/screenshot.png

APP_NAME="${1:-makepad}"
SCRATCHPAD="${SCRATCHPAD_DIR:-/tmp}"
SCREENSHOT="$SCRATCHPAD/makepad_screenshot_$(date +%H%M%S).png"

# Bring to front
osascript -e "tell application \"System Events\" to set frontmost of (first process whose name contains \"$APP_NAME\") to true" 2>/dev/null

sleep 0.5

# Capture
screencapture -x "$SCREENSHOT"

echo "$SCREENSHOT"

PACKAGE="$1"
SCRATCHPAD="${SCRATCHPAD_DIR:-/tmp}"
SCREENSHOT="$SCRATCHPAD/${PACKAGE}_$(date +%H%M%S).png"

# Kill old process
pkill -f "$PACKAGE" 2>/dev/null

# Build and run
cargo build -p "$PACKAGE" && \
(cargo run -p "$PACKAGE" 2>&1 &) && \
sleep 5 && \
osascript -e "tell application \"System Events\" to set frontmost of (first process whose name contains \"$PACKAGE\") to true" && \
sleep 1 && \
screencapture -x "$SCREENSHOT"

echo "$SCREENSHOT"

User: 截图看看现在的 UI

Claude:
1. Detected running a2ui-demo
2. Execute screenshot command
3. Read screenshot file
4. Analysis: "UI displays normally, TextField shows input '你好', product list rendered 3 cards..."

User: /run-and-capture a2ui-demo

Claude:
1. pkill old process
2. cargo build -p a2ui-demo
3. cargo run -p a2ui-demo &
4. sleep 5 wait for startup
5. Capture and analyze

User: I entered "Hello😊" in TextField, help me verify two-way binding with screenshot

Claude:
1. Execute screenshot, save to scratchpad
2. Read screenshot, analyze UI
3. Output verification report:

   ┌────────────────────────────────────────┐
   │ A2UI Demo - Product Catalog           │
   ├────────────────────────────────────────┤
   │ [Search Products]                      │
   │ ┌──────────────────────────────────┐  │
   │ │ Hello😊                          │  │ ← TextField shows input
   │ └──────────────────────────────────┘  │
   │ Hello😊                               │ ← Text (caption) synced
   │                                        │
   │ Products (Template Rendering)          │
   │ ┌──────────────────────────────────┐  │
   │ │ Premium Headphones | $99.99 | +  │  │
   │ └──────────────────────────────────┘  │
   └────────────────────────────────────────┘

   ✅ Two-way binding verification successful:
   | Component | Binding Path | Display Content |
   |-----------|--------------|-----------------|
   | TextField | /search/query | Hello😊 |
   | Text (caption) | /search/query | Hello😊 |

## Screenshot Analysis

**Application**: a2ui-demo
**Time**: 2026-02-01 14:30:00
**Window State**: Normal display

### UI Elements

| Element | Type | Content/State |
|---------|------|---------------|
| Title | Label | "A2UI Demo - Product Catalog" |
| Search Box | TextField | Empty/Has input |
| Product List | PortalList | 3 cards |

### Issue Detection

- ✅ Layout normal
- ✅ Text rendering normal
- ⚠️ Image not loaded (network image)

## Function Verification: TextField Two-way Binding

**Test Scenario**: User enters content in TextField, verify data model sync

### Verification Result

| Component | Binding Path | Expected | Actual | Status |
|-----------|--------------|----------|--------|--------|
| TextField | /search/query | Hello😊 | Hello😊 | ✅ |
| Text (caption) | /search/query | Hello😊 | Hello😊 | ✅ |

### Conclusion

✅ **Two-way binding works correctly**
- Unicode Chinese characters: ✅
- Emoji characters: ✅
- Real-time sync: ✅

# Check if process is running
ps aux | grep -E "a2ui|makepad" | grep -v grep

# Try using process ID
osascript -e 'tell application "System Events" to set frontmost of (first process whose unix id is PID) to true'