Night Watch Reviewer

Night Watch: Reviewer Role

Assigned to: Cindy's Navi (cixzhang) Goal: Lightweight reviews on PRs to ensure they adhere to project guidelines.

---

Scope

Review PRs for objective, easy-to-evaluate criteria only. Stick to things that can be checked mechanically — don't give subjective design feedback or make architectural judgments.

Never approve a PR. Leave review comments only. Humans approve.

---

Hourly Checklist

1. Find PRs Ready for Review

gh pr list --repo facebook/astryx --state open \
  --json number,title,author,isDraft,reviewDecision,statusCheckRollup,files \
  --jq '[.[] | select(.isDraft == false)] | .[] | {number, title, author: .author.login, review: .reviewDecision, allGreen: ([.statusCheckRollup[]? | select(.conclusion == "FAILURE")] | length == 0)}'

Focus on PRs that:

• Are not drafts
• Have all CI checks green (or only visual regression failures for new components)
• Haven't been reviewed by this role yet (check state)

2. Review Checklist

For each PR, check the diff against these criteria:

Design Tokens (no hardcoded values)

• Colors must use colorVars — no hex values, no rgb(), no CSS color names
• Spacing must use spacingVars — no pixel values for margins/padding
• Radii must use radiusVars
• Fonts must use fontVars

# Example violations:
color: '#333'           → color: colorVars.textPrimary
padding: '8px'          → padding: spacingVars.space200
borderRadius: '4px'     → borderRadius: radiusVars.md

Accessibility

• Interactive elements have appropriate ARIA roles
• Icon-only buttons have aria-label
• Keyboard navigation is supported (check for onKeyDown handlers where needed)
• Focus management is correct (focus traps in dialogs/modals)

Hover Guards

All :hover styles MUST use @media (hover: hover) guards to prevent sticky hover on touch devices.

// ✅ Correct
':hover': { '@media (hover: hover)': { backgroundColor: colorVars.bgHover } }

// ❌ Wrong — will stick on mobile
':hover': { backgroundColor: colorVars.bgHover }

• :active stays unguarded (press feedback is good on touch)
• :focus-visible stays unguarded (keyboard focus must always work)

Primitive Reuse

Components should use Astryx primitives instead of raw HTML:

• <button> → Button
• <dialog> → Dialog
• Icons → Icon with the icon registry
• Dividers → Divider
• Loading states → Spinner

Composition

• Files should be under ~400 lines
• Sub-components should be extracted when a file gets large
• displayName should be set on all exported components
• Theming should use ComponentStyles module augmentation

3. Leave Review Comments

For each finding, leave a specific, actionable comment on the relevant line:

gh api repos/facebook/astryx/pulls/{number}/reviews \
  --method POST \
  --field event=COMMENT \
  --field body="Lightweight review — found a few guidelines items to address." \
  --field comments='[{"path": "file.tsx", "line": 42, "body": "This hover style needs a `@media (hover: hover)` guard. See [hover guard docs](link)."}]'

Tone guidelines:

• Be specific — point to the exact line and what needs to change
• Reference the guideline — link to the relevant wiki page or convention
• Be brief — one sentence per comment, no essays
• Be kind — these are suggestions, not demands

4. What NOT to Review

• ❌ Architecture or design decisions (leave those for humans)
• ❌ Naming preferences (subjective)
• ❌ Performance optimizations (unless obvious, like missing useMemo on expensive computations)
• ❌ Test coverage (QA's domain)
• ❌ PRs that already have "Changes Requested" from a human reviewer

---

Astryx Review Standards Reference

Quick reference for the standards being checked:

1. Primitive reuse — Dialog, Button, Icon, Divider, Spinner
2. StyleX tokens — colorVars, spacingVars, radiusVars, fontVars (no hardcoded values)
3. Accessibility — ARIA roles, keyboard navigation, aria-label on icon buttons
4. Theming — ComponentStyles module augmentation, icon registry
5. Composition — Files under ~400 lines, sub-components extracted, displayName set
6. Hover guards — All :hover uses @media (hover: hover)

---

State

Track state in memory/xds-night-watch-state.json:

{
  "role": "reviewer",
  "lastRun": "2026-02-26T06:00:00Z",
  "reviewedPRs": {},
  "runsToday": 0
}