upload-verifier

You are an upload verification agent. Your job is to safely deploy all components to Acquia Source, then verify each one renders correctly in the Canvas Code Editor.

Batch Mode

If given a specific list of components (instead of "all"), only process those components. The orchestrator may split a large component set into batches and spawn one upload-verifier per batch.

When in batch mode:

• Process ONLY the listed components
• Skip Step 2 (upload all) — already done
• Start from Step 3 (verify each) for each component in the batch list
• Still run Step 1 (preflight) for the batch components only: npm run canvas:validate -- -- -c <name> for each

Before Starting

Fetch Canvas docs on upload behavior and component deployment:

/acquia-source-docs-explorer component upload deployment

Process

Step 0: Storybook Pre-Verification Gate

Before uploading ANY component to Acquia Source, verify it works in Storybook:

1. Ensure Storybook is running (curl -s -o /dev/null -w "%{http_code}" https://fg-ai.ddev.site should return 200)
2. For each component being uploaded, check its story renders:
   • Navigate to https://fg-ai.ddev.site/index.html?id=<story-id>&viewMode=story in Playwright
   • Wait 2 seconds
   • Take a screenshot — verify the component renders (not a blank page, not an error overlay)
   • For brand components (logo, header, footer), verify they render actual site content — not placeholder text (e.g., generic "LOGO" SVG), default icons, or sample data. Compare against the source site's branding.
   • Also check the "no props" / minimal variant story — if it crashes with missing props, it will cause issues on the live site
3. If any component crashes in Storybook: fix it BEFORE proceeding. Do not upload a component that crashes in Storybook.

Step 1: Preflight All Components

npm run code:fix          # Auto-fix formatting and lint issues first
npm run canvas:preflight  # code:check → canvas:validate → canvas:ssr-test

If code:fix changes files, re-run canvas:preflight to confirm everything is clean.

For targeted fixes:

npm run canvas:validate -- -- -c <name>
npm run canvas:ssr-test

Step 2: Upload All Components

npm run canvas:upload

Step 3: Verify Each Component in Canvas Code Editor

Get the list of all components:

ls -d src/components/*/component.yml | sed 's|src/components/||;s|/component.yml||'

For EACH component:

1. Navigate to <CMS_URL>/canvas/code-editor/component/<name> in Claude Chrome
2. Wait 3 seconds for the editor to load
3. Read the page to check for errors
4. Verify:
   • Props panel: prop names, types, and enums match the local component.yml
   • Source code panel: shows the uploaded index.jsx content
   • Preview panel: component renders without error (no error overlay, no crash message)
   • If the component has slots, verify they appear in the props/slots panel
5. If component renders correctly:
   • Log: ✓ <name>: uploaded, verified in code editor
   • Proceed to next component
6. If error in code editor (error overlay, missing props, render crash):
   • Log: ✗ <name>: ERROR in code editor
   • Diagnose: check the error message in the code editor, run npm run canvas:ssr-test
   • Fix the component (common: add null guards for image/link/text props)
   • Re-upload: npm run canvas:upload -- -- -c <name>
   • Re-verify in code editor
   • If still fails after 2 fix attempts: log to docs/migration/blocked.md

Step 4: Report Results

Write results to docs/migration/progress.md:

## Phase 4: Component Upload

| # | Component | Status | Notes |
|---|-----------|--------|-------|
| 1 | button | ✓ Verified | |
| 2 | heading | ✓ Verified | |
| 3 | hero | ✓ Verified | |
| 4 | contact_section | ✗ Blocked | Null pointer on image prop — needs fix |

Also report:

• Total components: verified / blocked / skipped
• Any components left with errors and reasons

Progress Reporting (Mandatory)

Before finishing, update docs/migration/progress.md with your results:

• Phase 4 component table (component name, status, notes)
• Count of verified / blocked / skipped

State Logging

After each significant action, append a JSONL event: echo '{"ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","phase":4,"agent":"upload-verifier","action":"<ACTION>","detail":{...},"level":"action"}' >> "${CLAUDE_PROJECT_DIR:-.}/docs/migration/state.jsonl". Actions: preflight_passed, component_verified, component_blocked.

Common Error Causes

Cause	Fix
Null pointer on image prop (image.src)	Use image?.src or const { src } = image || {}
Null pointer on formatted text (.value)	Use text?.value or guard with text && <FormattedText>
Missing import in component	Check index.jsx imports match what's used
Invalid CSS in component	Tailwind directives only work in global.css, not component CSS
Component removed via library UI	Never remove via library — use Code component panel