---
name: uat-verify
description: Visually verify Ghostfolio UI state using agent-browser after agent actions. Use after /uat add_activity calls to confirm the UI reflects the change.
argument-hint: activities|portfolio|holdings
disable-model-invocation: true
allowed-tools: Bash, Read
---

# UAT-Verify - Visual UI Verification

Navigate to the Ghostfolio UI, log in as the test user, and screenshot the `$ARGUMENTS` page. Then analyze the screenshot to confirm expected state.

Valid views: `activities`, `portfolio`, `holdings`

## Prerequisites

- `.uat-creds.json` must exist (run `/uat` first or `bash .claude/skills/uat/scripts/setup.sh`)
- Ghostfolio UI must be running (same dev server as API, typically at `http://localhost:4200` for local dev or `http://localhost:3333` for Docker)
- `agent-browser` must be installed globally

## Steps

1. **Read credentials** from `.uat-creds.json`:

   ```json
   { "accessToken": "...", "authToken": "..." }
   ```

2. **Determine URLs** based on the `$ARGUMENTS` view:
   - `activities` -> `/transactions` page
   - `portfolio` -> `/home` page (portfolio summary is on the dashboard)
   - `holdings` -> `/home` page (scroll down for holdings breakdown)

   Base URL: try `http://localhost:4200` first (Angular dev server). Fall back to `http://localhost:3333` (Docker full stack).

3. **Check UI is reachable**:

   ```bash
   curl -sf http://localhost:4200 > /dev/null 2>&1 && echo "4200" || echo "3333"
   ```

4. **Log in via agent-browser** using the anonymous access token:
   - Navigate to base URL
   - The anonymous login flow: go to `/auth/anonymous?accessToken=<accessToken>` directly, which auto-logs in
   - Wait for redirect to complete (wait for dashboard element)

5. **Navigate to the target page** and take a screenshot:

   For `activities`:

   ```bash
   agent-browser open "http://localhost:4200/auth/anonymous?accessToken=<accessToken>" && \
   agent-browser wait ".mat-mdc-row, .no-transactions, [data-testid='transactions']" && \
   agent-browser open "http://localhost:4200/transactions" && \
   agent-browser wait ".mat-mdc-row, .no-transactions" && \
   agent-browser screenshot screenshots/uat-activities.png
   ```

   For `portfolio`:

   ```bash
   agent-browser open "http://localhost:4200/auth/anonymous?accessToken=<accessToken>" && \
   agent-browser wait "gf-portfolio-summary, .portfolio-summary, main" && \
   agent-browser screenshot screenshots/uat-portfolio.png
   ```

   For `holdings`:

   ```bash
   agent-browser open "http://localhost:4200/auth/anonymous?accessToken=<accessToken>" && \
   agent-browser wait "gf-holdings, .holdings, main" && \
   agent-browser screenshot screenshots/uat-holdings.png
   ```

6. **Take accessibility snapshot** for structured analysis:

   ```bash
   agent-browser snapshot
   ```

7. **Analyze the screenshot and snapshot** - Report:
   - What's visible on the page (holdings, activities, balances)
   - Whether the expected data matches (e.g., after `/uat Buy 10 AAPL at 180`, confirm "AAPL BUY 10" appears)
   - Any error states or empty states

## Troubleshooting

- **agent-browser not found**: Install globally with `npm install -g agent-browser`
- **UI not reachable on 4200**: Check if `npm run start:client` is running. If using Docker only, try 3333.
- **Login redirect fails**: Try navigating directly to the target page after the auth URL.
- **Screenshot blank/loading**: Add `agent-browser wait 2000` before screenshot for slower pages.
- **Wrong port**: Check `$FORWARDED_PORTS` env var if in a devcontainer.

## Screenshot output

Screenshots are saved to `screenshots/` (gitignored):

- `screenshots/uat-activities.png`
- `screenshots/uat-portfolio.png`
- `screenshots/uat-holdings.png`