@every-env/compound-plugin 0.1.0

package/plugins/compound-engineering/commands/test-browser.md

@@ -0,0 +1,339 @@
+---
+name: test-browser
+description: Run browser tests on pages affected by current PR or branch
+argument-hint: "[PR number, branch name, or 'current' for current branch]"
+---
+
+# Browser Test Command
+
+<command_purpose>Run end-to-end browser tests on pages affected by a PR or branch changes using agent-browser CLI.</command_purpose>
+
+## CRITICAL: Use agent-browser CLI Only
+
+**DO NOT use Chrome MCP tools (mcp__claude-in-chrome__*).**
+
+This command uses the `agent-browser` CLI exclusively. The agent-browser CLI is a Bash-based tool from Vercel that runs headless Chromium. It is NOT the same as Chrome browser automation via MCP.
+
+If you find yourself calling `mcp__claude-in-chrome__*` tools, STOP. Use `agent-browser` Bash commands instead.
+
+## Introduction
+
+<role>QA Engineer specializing in browser-based end-to-end testing</role>
+
+This command tests affected pages in a real browser, catching issues that unit tests miss:
+- JavaScript integration bugs
+- CSS/layout regressions
+- User workflow breakages
+- Console errors
+
+## Prerequisites
+
+<requirements>
+- Local development server running (e.g., `bin/dev`, `rails server`, `npm run dev`)
+- agent-browser CLI installed (see Setup below)
+- Git repository with changes to test
+</requirements>
+
+## Setup
+
+**Check installation:**
+```bash
+command -v agent-browser >/dev/null 2>&1 && echo "Installed" || echo "NOT INSTALLED"
+```
+
+**Install if needed:**
+```bash
+npm install -g agent-browser
+agent-browser install  # Downloads Chromium (~160MB)
+```
+
+See the `agent-browser` skill for detailed usage.
+
+## Main Tasks
+
+### 0. Verify agent-browser Installation
+
+Before starting ANY browser testing, verify agent-browser is installed:
+
+```bash
+command -v agent-browser >/dev/null 2>&1 && echo "Ready" || (echo "Installing..." && npm install -g agent-browser && agent-browser install)
+```
+
+If installation fails, inform the user and stop.
+
+### 1. Ask Browser Mode
+
+<ask_browser_mode>
+
+Before starting tests, ask user if they want to watch the browser:
+
+Use AskUserQuestion with:
+- Question: "Do you want to watch the browser tests run?"
+- Options:
+  1. **Headed (watch)** - Opens visible browser window so you can see tests run
+  2. **Headless (faster)** - Runs in background, faster but invisible
+
+Store the choice and use `--headed` flag when user selects "Headed".
+
+</ask_browser_mode>
+
+### 2. Determine Test Scope
+
+<test_target> $ARGUMENTS </test_target>
+
+<determine_scope>
+
+**If PR number provided:**
+```bash
+gh pr view [number] --json files -q '.files[].path'
+```
+
+**If 'current' or empty:**
+```bash
+git diff --name-only main...HEAD
+```
+
+**If branch name provided:**
+```bash
+git diff --name-only main...[branch]
+```
+
+</determine_scope>
+
+### 3. Map Files to Routes
+
+<file_to_route_mapping>
+
+Map changed files to testable routes:
+
+| File Pattern | Route(s) |
+|-------------|----------|
+| `app/views/users/*` | `/users`, `/users/:id`, `/users/new` |
+| `app/controllers/settings_controller.rb` | `/settings` |
+| `app/javascript/controllers/*_controller.js` | Pages using that Stimulus controller |
+| `app/components/*_component.rb` | Pages rendering that component |
+| `app/views/layouts/*` | All pages (test homepage at minimum) |
+| `app/assets/stylesheets/*` | Visual regression on key pages |
+| `app/helpers/*_helper.rb` | Pages using that helper |
+| `src/app/*` (Next.js) | Corresponding routes |
+| `src/components/*` | Pages using those components |
+
+Build a list of URLs to test based on the mapping.
+
+</file_to_route_mapping>
+
+### 4. Verify Server is Running
+
+<check_server>
+
+Before testing, verify the local server is accessible:
+
+```bash
+agent-browser open http://localhost:3000
+agent-browser snapshot -i
+```
+
+If server is not running, inform user:
+```markdown
+**Server not running**
+
+Please start your development server:
+- Rails: `bin/dev` or `rails server`
+- Node/Next.js: `npm run dev`
+
+Then run `/test-browser` again.
+```
+
+</check_server>
+
+### 5. Test Each Affected Page
+
+<test_pages>
+
+For each affected route, use agent-browser CLI commands (NOT Chrome MCP):
+
+**Step 1: Navigate and capture snapshot**
+```bash
+agent-browser open "http://localhost:3000/[route]"
+agent-browser snapshot -i
+```
+
+**Step 2: For headed mode (visual debugging)**
+```bash
+agent-browser --headed open "http://localhost:3000/[route]"
+agent-browser --headed snapshot -i
+```
+
+**Step 3: Verify key elements**
+- Use `agent-browser snapshot -i` to get interactive elements with refs
+- Page title/heading present
+- Primary content rendered
+- No error messages visible
+- Forms have expected fields
+
+**Step 4: Test critical interactions**
+```bash
+agent-browser click @e1  # Use ref from snapshot
+agent-browser snapshot -i
+```
+
+**Step 5: Take screenshots**
+```bash
+agent-browser screenshot page-name.png
+agent-browser screenshot --full page-name-full.png  # Full page
+```
+
+</test_pages>
+
+### 6. Human Verification (When Required)
+
+<human_verification>
+
+Pause for human input when testing touches:
+
+| Flow Type | What to Ask |
+|-----------|-------------|
+| OAuth | "Please sign in with [provider] and confirm it works" |
+| Email | "Check your inbox for the test email and confirm receipt" |
+| Payments | "Complete a test purchase in sandbox mode" |
+| SMS | "Verify you received the SMS code" |
+| External APIs | "Confirm the [service] integration is working" |
+
+Use AskUserQuestion:
+```markdown
+**Human Verification Needed**
+
+This test touches the [flow type]. Please:
+1. [Action to take]
+2. [What to verify]
+
+Did it work correctly?
+1. Yes - continue testing
+2. No - describe the issue
+```
+
+</human_verification>
+
+### 7. Handle Failures
+
+<failure_handling>
+
+When a test fails:
+
+1. **Document the failure:**
+   - Screenshot the error state: `agent-browser screenshot error.png`
+   - Note the exact reproduction steps
+
+2. **Ask user how to proceed:**
+   ```markdown
+   **Test Failed: [route]**
+
+   Issue: [description]
+   Console errors: [if any]
+
+   How to proceed?
+   1. Fix now - I'll help debug and fix
+   2. Create todo - Add to todos/ for later
+   3. Skip - Continue testing other pages
+   ```
+
+3. **If "Fix now":**
+   - Investigate the issue
+   - Propose a fix
+   - Apply fix
+   - Re-run the failing test
+
+4. **If "Create todo":**
+   - Create `{id}-pending-p1-browser-test-{description}.md`
+   - Continue testing
+
+5. **If "Skip":**
+   - Log as skipped
+   - Continue testing
+
+</failure_handling>
+
+### 8. Test Summary
+
+<test_summary>
+
+After all tests complete, present summary:
+
+```markdown
+## Browser Test Results
+
+**Test Scope:** PR #[number] / [branch name]
+**Server:** http://localhost:3000
+
+### Pages Tested: [count]
+
+| Route | Status | Notes |
+|-------|--------|-------|
+| `/users` | Pass | |
+| `/settings` | Pass | |
+| `/dashboard` | Fail | Console error: [msg] |
+| `/checkout` | Skip | Requires payment credentials |
+
+### Console Errors: [count]
+- [List any errors found]
+
+### Human Verifications: [count]
+- OAuth flow: Confirmed
+- Email delivery: Confirmed
+
+### Failures: [count]
+- `/dashboard` - [issue description]
+
+### Created Todos: [count]
+- `005-pending-p1-browser-test-dashboard-error.md`
+
+### Result: [PASS / FAIL / PARTIAL]
+```
+
+</test_summary>
+
+## Quick Usage Examples
+
+```bash
+# Test current branch changes
+/test-browser
+
+# Test specific PR
+/test-browser 847
+
+# Test specific branch
+/test-browser feature/new-dashboard
+```
+
+## agent-browser CLI Reference
+
+**ALWAYS use these Bash commands. NEVER use mcp__claude-in-chrome__* tools.**
+
+```bash
+# Navigation
+agent-browser open <url>           # Navigate to URL
+agent-browser back                 # Go back
+agent-browser close                # Close browser
+
+# Snapshots (get element refs)
+agent-browser snapshot -i          # Interactive elements with refs (@e1, @e2, etc.)
+agent-browser snapshot -i --json   # JSON output
+
+# Interactions (use refs from snapshot)
+agent-browser click @e1            # Click element
+agent-browser fill @e1 "text"      # Fill input
+agent-browser type @e1 "text"      # Type without clearing
+agent-browser press Enter          # Press key
+
+# Screenshots
+agent-browser screenshot out.png       # Viewport screenshot
+agent-browser screenshot --full out.png # Full page screenshot
+
+# Headed mode (visible browser)
+agent-browser --headed open <url>      # Open with visible browser
+agent-browser --headed click @e1       # Click in visible browser
+
+# Wait
+agent-browser wait @e1             # Wait for element
+agent-browser wait 2000            # Wait milliseconds
+```

package/plugins/compound-engineering/commands/triage.md

@@ -0,0 +1,310 @@
+---
+name: triage
+description: Triage and categorize findings for the CLI todo system
+argument-hint: "[findings list or source type]"
+---
+
+- First set the /model to Haiku
+- Then read all pending todos in the todos/ directory
+
+Present all findings, decisions, or issues here one by one for triage. The goal is to go through each item and decide whether to add it to the CLI todo system.
+
+**IMPORTANT: DO NOT CODE ANYTHING DURING TRIAGE!**
+
+This command is for:
+
+- Triaging code review findings
+- Processing security audit results
+- Reviewing performance analysis
+- Handling any other categorized findings that need tracking
+
+## Workflow
+
+### Step 1: Present Each Finding
+
+For each finding, present in this format:
+
+```
+---
+Issue #X: [Brief Title]
+
+Severity: 🔴 P1 (CRITICAL) / 🟡 P2 (IMPORTANT) / 🔵 P3 (NICE-TO-HAVE)
+
+Category: [Security/Performance/Architecture/Bug/Feature/etc.]
+
+Description:
+[Detailed explanation of the issue or improvement]
+
+Location: [file_path:line_number]
+
+Problem Scenario:
+[Step by step what's wrong or could happen]
+
+Proposed Solution:
+[How to fix it]
+
+Estimated Effort: [Small (< 2 hours) / Medium (2-8 hours) / Large (> 8 hours)]
+
+---
+Do you want to add this to the todo list?
+1. yes - create todo file
+2. next - skip this item
+3. custom - modify before creating
+```
+
+### Step 2: Handle User Decision
+
+**When user says "yes":**
+
+1. **Update existing todo file** (if it exists) or **Create new filename:**
+
+   If todo already exists (from code review):
+
+   - Rename file from `{id}-pending-{priority}-{desc}.md` → `{id}-ready-{priority}-{desc}.md`
+   - Update YAML frontmatter: `status: pending` → `status: ready`
+   - Keep issue_id, priority, and description unchanged
+
+   If creating new todo:
+
+   ```
+   {next_id}-ready-{priority}-{brief-description}.md
+   ```
+
+   Priority mapping:
+
+   - 🔴 P1 (CRITICAL) → `p1`
+   - 🟡 P2 (IMPORTANT) → `p2`
+   - 🔵 P3 (NICE-TO-HAVE) → `p3`
+
+   Example: `042-ready-p1-transaction-boundaries.md`
+
+2. **Update YAML frontmatter:**
+
+   ```yaml
+   ---
+   status: ready # IMPORTANT: Change from "pending" to "ready"
+   priority: p1 # or p2, p3 based on severity
+   issue_id: "042"
+   tags: [category, relevant-tags]
+   dependencies: []
+   ---
+   ```
+
+3. **Populate or update the file:**
+
+   ```yaml
+   # [Issue Title]
+
+   ## Problem Statement
+   [Description from finding]
+
+   ## Findings
+   - [Key discoveries]
+   - Location: [file_path:line_number]
+   - [Scenario details]
+
+   ## Proposed Solutions
+
+   ### Option 1: [Primary solution]
+   - **Pros**: [Benefits]
+   - **Cons**: [Drawbacks if any]
+   - **Effort**: [Small/Medium/Large]
+   - **Risk**: [Low/Medium/High]
+
+   ## Recommended Action
+   [Filled during triage - specific action plan]
+
+   ## Technical Details
+   - **Affected Files**: [List files]
+   - **Related Components**: [Components affected]
+   - **Database Changes**: [Yes/No - describe if yes]
+
+   ## Resources
+   - Original finding: [Source of this issue]
+   - Related issues: [If any]
+
+   ## Acceptance Criteria
+   - [ ] [Specific success criteria]
+   - [ ] Tests pass
+   - [ ] Code reviewed
+
+   ## Work Log
+
+   ### {date} - Approved for Work
+   **By:** Claude Triage System
+   **Actions:**
+   - Issue approved during triage session
+   - Status changed from pending → ready
+   - Ready to be picked up and worked on
+
+   **Learnings:**
+   - [Context and insights]
+
+   ## Notes
+   Source: Triage session on {date}
+   ```
+
+4. **Confirm approval:** "✅ Approved: `{new_filename}` (Issue #{issue_id}) - Status: **ready** → Ready to work on"
+
+**When user says "next":**
+
+- **Delete the todo file** - Remove it from todos/ directory since it's not relevant
+- Skip to the next item
+- Track skipped items for summary
+
+**When user says "custom":**
+
+- Ask what to modify (priority, description, details)
+- Update the information
+- Present revised version
+- Ask again: yes/next/custom
+
+### Step 3: Continue Until All Processed
+
+- Process all items one by one
+- Track using TodoWrite for visibility
+- Don't wait for approval between items - keep moving
+
+### Step 4: Final Summary
+
+After all items processed:
+
+````markdown
+## Triage Complete
+
+**Total Items:** [X] **Todos Approved (ready):** [Y] **Skipped:** [Z]
+
+### Approved Todos (Ready for Work):
+
+- `042-ready-p1-transaction-boundaries.md` - Transaction boundary issue
+- `043-ready-p2-cache-optimization.md` - Cache performance improvement ...
+
+### Skipped Items (Deleted):
+
+- Item #5: [reason] - Removed from todos/
+- Item #12: [reason] - Removed from todos/
+
+### Summary of Changes Made:
+
+During triage, the following status updates occurred:
+
+- **Pending → Ready:** Filenames and frontmatter updated to reflect approved status
+- **Deleted:** Todo files for skipped findings removed from todos/ directory
+- Each approved file now has `status: ready` in YAML frontmatter
+
+### Next Steps:
+
+1. View approved todos ready for work:
+   ```bash
+   ls todos/*-ready-*.md
+   ```
+````
+
+2. Start work on approved items:
+
+   ```bash
+   /resolve_todo_parallel  # Work on multiple approved items efficiently
+   ```
+
+3. Or pick individual items to work on
+
+4. As you work, update todo status:
+   - Ready → In Progress (in your local context as you work)
+   - In Progress → Complete (rename file: ready → complete, update frontmatter)
+
+```
+
+## Example Response Format
+
+```
+
+---
+
+Issue #5: Missing Transaction Boundaries for Multi-Step Operations
+
+Severity: 🔴 P1 (CRITICAL)
+
+Category: Data Integrity / Security
+
+Description: The google_oauth2_connected callback in GoogleOauthCallbacks concern performs multiple database operations without transaction protection. If any step fails midway, the database is left in an inconsistent state.
+
+Location: app/controllers/concerns/google_oauth_callbacks.rb:13-50
+
+Problem Scenario:
+
+1. User.update succeeds (email changed)
+2. Account.save! fails (validation error)
+3. Result: User has changed email but no associated Account
+4. Next login attempt fails completely
+
+Operations Without Transaction:
+
+- User confirmation (line 13)
+- Waitlist removal (line 14)
+- User profile update (line 21-23)
+- Account creation (line 28-37)
+- Avatar attachment (line 39-45)
+- Journey creation (line 47)
+
+Proposed Solution: Wrap all operations in ApplicationRecord.transaction do ... end block
+
+Estimated Effort: Small (30 minutes)
+
+---
+
+Do you want to add this to the todo list?
+
+1. yes - create todo file
+2. next - skip this item
+3. custom - modify before creating
+
+```
+
+## Important Implementation Details
+
+### Status Transitions During Triage
+
+**When "yes" is selected:**
+1. Rename file: `{id}-pending-{priority}-{desc}.md` → `{id}-ready-{priority}-{desc}.md`
+2. Update YAML frontmatter: `status: pending` → `status: ready`
+3. Update Work Log with triage approval entry
+4. Confirm: "✅ Approved: `{filename}` (Issue #{issue_id}) - Status: **ready**"
+
+**When "next" is selected:**
+1. Delete the todo file from todos/ directory
+2. Skip to next item
+3. No file remains in the system
+
+### Progress Tracking
+
+Every time you present a todo as a header, include:
+- **Progress:** X/Y completed (e.g., "3/10 completed")
+- **Estimated time remaining:** Based on how quickly you're progressing
+- **Pacing:** Monitor time per finding and adjust estimate accordingly
+
+Example:
+```
+
+Progress: 3/10 completed | Estimated time: ~2 minutes remaining
+
+```
+
+### Do Not Code During Triage
+
+- ✅ Present findings
+- ✅ Make yes/next/custom decisions
+- ✅ Update todo files (rename, frontmatter, work log)
+- ❌ Do NOT implement fixes or write code
+- ❌ Do NOT add detailed implementation details
+- ❌ That's for /resolve_todo_parallel phase
+```
+
+When done give these options
+
+```markdown
+What would you like to do next?
+
+1. run /resolve_todo_parallel to resolve the todos
+2. commit the todos
+3. nothing, go chill
+```