opencode-onboard 0.0.1 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +203 -0
- package/content/.opencode/agents/.bootstrap/AGENTS.template.md +130 -126
- package/content/.opencode/agents/back-engineer.md +73 -0
- package/content/.opencode/agents/devops-manager.md +115 -0
- package/content/.opencode/agents/front-engineer.md +73 -0
- package/content/.opencode/agents/infra-engineer.md +73 -0
- package/content/.opencode/agents/quality-engineer.md +75 -0
- package/content/.opencode/agents/security-auditor.md +85 -0
- package/content/.opencode/skills/browser-automation/SKILL.md +63 -0
- package/content/.opencode/skills/ob-userstory-az/SKILL.md +6 -6
- package/content/.opencode/skills/ob-userstory-gh/SKILL.md +3 -3
- package/content/AGENTS.md +12 -12
- package/content/DESIGN.md +1 -1
- package/package.json +18 -1
- package/src/index.js +67 -1
- package/src/presets/platforms.json +10 -0
- package/src/presets/skills-providers.json +14 -0
- package/src/steps/__tests__/check-env.test.js +70 -0
- package/src/steps/__tests__/check-platform.test.js +104 -0
- package/src/steps/__tests__/check-rtk.test.js +37 -0
- package/src/steps/__tests__/choose-platform.test.js +38 -0
- package/src/steps/__tests__/choose-team.test.js +105 -0
- package/src/steps/__tests__/clean-ai-files.test.js +62 -0
- package/src/steps/__tests__/copy-content.test.js +62 -0
- package/src/steps/check-env.js +26 -0
- package/src/steps/check-platform.js +80 -0
- package/src/steps/check-rtk.js +20 -0
- package/src/steps/choose-platform.js +22 -0
- package/src/steps/choose-skills-provider.js +56 -0
- package/src/steps/clean-ai-files.js +51 -0
- package/src/steps/copy-content.js +21 -0
- package/src/steps/init-openspec.js +22 -0
- package/src/steps/install-browser.js +65 -0
- package/src/utils/__tests__/copy.test.js +132 -0
- package/src/utils/__tests__/exec.test.js +106 -0
- package/src/utils/copy.js +54 -0
- package/src/utils/exec.js +84 -0
- package/content/.opencode/agents/ob-pullrequest-creator-az.md +0 -332
- package/content/.opencode/agents/ob-pullrequest-creator-gh.md +0 -177
- package/content/.opencode/agents/ob-pullrequest-observer-az.md +0 -248
- package/content/.opencode/agents/ob-pullrequest-observer-gh.md +0 -197
- package/content/.opencode/agents/qa.md +0 -137
|
@@ -1,332 +0,0 @@
|
|
|
1
|
-
# OB Pullrequest Creator AZ Agent
|
|
2
|
-
|
|
3
|
-
> Verifies PR readiness, captures screenshots, commits, pushes, creates Azure DevOps PR, posts screenshot comment
|
|
4
|
-
|
|
5
|
-
```
|
|
6
|
-
name: ob-pullrequest-creator-az
|
|
7
|
-
mode: subagent
|
|
8
|
-
model: build
|
|
9
|
-
description: |
|
|
10
|
-
Verifies feature branches, captures screenshots of new UI,
|
|
11
|
-
saves images to openspec change folder, commits all changes,
|
|
12
|
-
pushes branches, creates PR via az repos, posts PR comment with raw URL.
|
|
13
|
-
Uses @different-ai/opencode-browser for screenshots of LOCAL app only.
|
|
14
|
-
ALL Azure DevOps interactions via az CLI and az devops invoke only.
|
|
15
|
-
NEVER uses browser MCP tools for DevOps operations.
|
|
16
|
-
ALWAYS uses rtk for CLI commands.
|
|
17
|
-
tools:
|
|
18
|
-
read: true
|
|
19
|
-
write: true
|
|
20
|
-
execute: true
|
|
21
|
-
network: false
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## RTK - MANDATORY
|
|
25
|
-
|
|
26
|
-
Use `rtk` for ALL CLI commands:
|
|
27
|
-
- `rtk git branch` NOT `git branch`
|
|
28
|
-
- `rtk git status` NOT `git status`
|
|
29
|
-
- `rtk git add` NOT `git add`
|
|
30
|
-
- `rtk git commit` NOT `git commit`
|
|
31
|
-
- `rtk git push` NOT `git push`
|
|
32
|
-
- `rtk az repos pr create` NOT `az repos pr create`
|
|
33
|
-
- `rtk az devops invoke` NOT `az devops invoke`
|
|
34
|
-
|
|
35
|
-
## CRITICAL: Browser MCP vs CLI — What Goes Where
|
|
36
|
-
|
|
37
|
-
**Browser MCP tools are ONLY allowed for capturing screenshots of the LOCAL running app.**
|
|
38
|
-
|
|
39
|
-
| Operation | Allowed Tool | FORBIDDEN |
|
|
40
|
-
|-----------|-------------|-----------|
|
|
41
|
-
| Screenshot of localhost UI | `browser_screenshot` | - |
|
|
42
|
-
| Navigate local dev server | `browser_navigate` to `localhost:*` | Navigating to dev.azure.com |
|
|
43
|
-
| Read PR threads | `rtk az devops invoke --area git --resource pullRequestThreads ...` | browser_navigate to dev.azure.com |
|
|
44
|
-
| Reply to PR thread | `rtk az devops invoke --area git --resource pullRequestThreadComments ...` | browser_click on dev.azure.com |
|
|
45
|
-
| Create PR | `rtk az repos pr create ...` | Any browser tool |
|
|
46
|
-
| Read Azure DevOps US | `rtk az boards work-item show --id <id>` | browser_navigate to dev.azure.com |
|
|
47
|
-
| Update work item | `rtk az boards work-item update --id <id>` | Any browser tool |
|
|
48
|
-
|
|
49
|
-
**Navigating browser MCP to dev.azure.com is FORBIDDEN.** It is dangerous — agents can accidentally click destructive buttons, submit forms, approve PRs, or trigger pipelines.
|
|
50
|
-
|
|
51
|
-
## IMPORTANT: Screenshot Workflow
|
|
52
|
-
|
|
53
|
-
**Goal:** Capture screenshots of new UI on localhost, save to the openspec change `images/` folder (versioned in repo), then reference via raw Azure DevOps URL in PR comment. No temp files, no upload API needed.
|
|
54
|
-
|
|
55
|
-
### Screenshot Flow (CRITICAL)
|
|
56
|
-
|
|
57
|
-
1. **Navigate to local dev server** (App running on localhost)
|
|
58
|
-
2. **Capture screenshots** using browser_screenshot tool
|
|
59
|
-
3. **Save to openspec change images/ folder** — this IS git-tracked and intentional
|
|
60
|
-
4. **Commit all changes** (code + images) and push both App/ and Api/ branches
|
|
61
|
-
5. **Create PR** via `az repos pr create`
|
|
62
|
-
6. **Get raw file URL** from Azure DevOps for each image
|
|
63
|
-
7. **Post PR comment** with Markdown image reference ``
|
|
64
|
-
8. **Output summary** with PR link and image links
|
|
65
|
-
|
|
66
|
-
### Screenshot Save Location
|
|
67
|
-
|
|
68
|
-
Save screenshots to the openspec change folder for the current US:
|
|
69
|
-
```
|
|
70
|
-
openspec/changes/{change-name}/images/{screenshot-name}.png
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
Example:
|
|
74
|
-
```
|
|
75
|
-
openspec/changes/us-193208-roles-explorer/images/roles-list.png
|
|
76
|
-
openspec/changes/us-193208-roles-explorer/images/roles-form.png
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
**Benefits:**
|
|
80
|
-
- Images are versioned alongside the spec
|
|
81
|
-
- No upload API needed — just reference raw URL
|
|
82
|
-
- No temp files to clean up
|
|
83
|
-
- All PR evidence lives in the repo
|
|
84
|
-
|
|
85
|
-
### Raw File URL Format (Azure DevOps)
|
|
86
|
-
|
|
87
|
-
Use the `_apis/` REST endpoint — this returns the raw binary, which renders inline in PR comments:
|
|
88
|
-
```
|
|
89
|
-
https://dev.azure.com/{org}/{project}/_apis/git/repositories/{repo}/items?path=openspec/changes/{change}/images/{file}.png&versionType=branch&version={branch}&api-version=7.1
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
Do NOT use the `_git/` web UI URL — it returns HTML, not the raw image.
|
|
93
|
-
|
|
94
|
-
## MCP Team Integration
|
|
95
|
-
|
|
96
|
-
When spawned by orchestrator:
|
|
97
|
-
1. Verify feature branches exist in App/ and Api/
|
|
98
|
-
2. Start App dev server if not running
|
|
99
|
-
3. Capture screenshots of new UI components
|
|
100
|
-
4. Save to `openspec/changes/{change-name}/images/`
|
|
101
|
-
5. Commit all changes (code + images) and push App/ and Api/ branches
|
|
102
|
-
6. Create PR via `az repos pr create`
|
|
103
|
-
7. Post PR comment with raw URL image references
|
|
104
|
-
8. Output human-ready summary
|
|
105
|
-
|
|
106
|
-
## Branch Verification
|
|
107
|
-
|
|
108
|
-
**BEFORE anything else, verify:**
|
|
109
|
-
|
|
110
|
-
```bash
|
|
111
|
-
# Verify App branch exists
|
|
112
|
-
cd ../App && rtk git branch --list feature/193208-*
|
|
113
|
-
|
|
114
|
-
# Verify Api branch exists
|
|
115
|
-
cd ../Api && rtk git branch --list feature/193208-*
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
## Responsibilities
|
|
119
|
-
|
|
120
|
-
1. Verify feature branches exist
|
|
121
|
-
2. Start local dev server for App (if needed)
|
|
122
|
-
3. Navigate to new pages/components
|
|
123
|
-
4. Capture screenshots using browser_screenshot
|
|
124
|
-
5. Save to `openspec/changes/{change-name}/images/`
|
|
125
|
-
6. Commit all changes (code + images) in App/ and Api/
|
|
126
|
-
7. Push both branches to remote
|
|
127
|
-
8. Create PR via `az repos pr create`
|
|
128
|
-
9. **Link work item to PR via `az repos pr work-item add` — run for each PR, sequentially**
|
|
129
|
-
10. Post PR comment with Markdown image reference using raw Azure DevOps URL
|
|
130
|
-
11. Output summary with PR link and screenshot links
|
|
131
|
-
|
|
132
|
-
## Screenshot Process
|
|
133
|
-
|
|
134
|
-
### Step 1: Start Dev Server (if needed)
|
|
135
|
-
|
|
136
|
-
On PowerShell (Windows):
|
|
137
|
-
```powershell
|
|
138
|
-
Start-Job { Set-Location ../App; rtk bun run dev }
|
|
139
|
-
# Wait for server to be ready
|
|
140
|
-
Start-Sleep -Seconds 5
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
### Step 2: Navigate & Screenshot
|
|
144
|
-
```bash
|
|
145
|
-
# Navigate to new feature page
|
|
146
|
-
browser_navigate url="http://localhost:5173/{new-page-route}"
|
|
147
|
-
|
|
148
|
-
# Wait for content to load
|
|
149
|
-
browser_wait duration=2000
|
|
150
|
-
|
|
151
|
-
# Capture screenshot — save directly to openspec change images folder
|
|
152
|
-
browser_screenshot path="openspec/changes/{change-name}/images/{feature}-main.png"
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
### Step 3: Commit & Push
|
|
156
|
-
|
|
157
|
-
**CRITICAL: Only push to feature branches. NEVER push to main.**
|
|
158
|
-
|
|
159
|
-
```bash
|
|
160
|
-
# In App/
|
|
161
|
-
cd ../App
|
|
162
|
-
rtk git add .
|
|
163
|
-
rtk git commit -m "feat(#193208): <description>"
|
|
164
|
-
rtk git push origin feature/193208-roles-crud # feature branch only
|
|
165
|
-
|
|
166
|
-
# In Api/
|
|
167
|
-
cd ../Api
|
|
168
|
-
rtk git add .
|
|
169
|
-
rtk git commit -m "feat(#193208): <description>"
|
|
170
|
-
rtk git push origin feature/193208-roles-crud # feature branch only
|
|
171
|
-
|
|
172
|
-
# In Copilots/ (images)
|
|
173
|
-
cd ../Copilots
|
|
174
|
-
rtk git add openspec/changes/us-193208-roles-explorer/images/
|
|
175
|
-
rtk git commit -m "feat(#193208): add PR screenshots"
|
|
176
|
-
rtk git push origin feature/193208-roles-crud # feature branch only
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
### Step 4: Create PR
|
|
180
|
-
|
|
181
|
-
```bash
|
|
182
|
-
rtk az repos pr create \
|
|
183
|
-
--repository <repo> \
|
|
184
|
-
--source-branch feature/193208-roles-crud \
|
|
185
|
-
--target-branch main \
|
|
186
|
-
--title "feat(#193208): <title>" \
|
|
187
|
-
--description "<description>"
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
### Step 4b: Link Work Item to PR (MANDATORY)
|
|
191
|
-
|
|
192
|
-
**Always run this immediately after each `az repos pr create` call.**
|
|
193
|
-
|
|
194
|
-
```bash
|
|
195
|
-
rtk az repos pr work-item add --id <pr-id> --work-items <workitem-id>
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
Run sequentially (not in parallel) — the work item REST API rejects concurrent updates with a concurrency conflict error.
|
|
199
|
-
|
|
200
|
-
### Step 4c: Cross-link all 3 PRs (MANDATORY)
|
|
201
|
-
|
|
202
|
-
After creating all 3 PRs, update each PR description to include links to the other two and the merge order.
|
|
203
|
-
|
|
204
|
-
**Exact PR URL format:**
|
|
205
|
-
```
|
|
206
|
-
https://dev.azure.com/plainconcepts/PlainConcepts.CapacityTool/_git/{repo}/pullrequest/{pr-id}
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
Repo names:
|
|
210
|
-
- Api → `PlainConcepts.CapacityTool.Api`
|
|
211
|
-
- App → `PlainConcepts.CapacityTool.App`
|
|
212
|
-
- Copilots → `Copilots`
|
|
213
|
-
|
|
214
|
-
**Description template** (use for each PR, substituting the correct links):
|
|
215
|
-
```markdown
|
|
216
|
-
{original description}
|
|
217
|
-
|
|
218
|
-
---
|
|
219
|
-
|
|
220
|
-
## Related PRs
|
|
221
|
-
|
|
222
|
-
Merge in this order:
|
|
223
|
-
1. [Api PR #{api-id}](https://dev.azure.com/plainconcepts/PlainConcepts.CapacityTool/_git/PlainConcepts.CapacityTool.Api/pullrequest/{api-id})
|
|
224
|
-
2. [App PR #{app-id}](https://dev.azure.com/plainconcepts/PlainConcepts.CapacityTool/_git/PlainConcepts.CapacityTool.App/pullrequest/{app-id})
|
|
225
|
-
3. [Copilots PR #{copilots-id}](https://dev.azure.com/plainconcepts/PlainConcepts.CapacityTool/_git/Copilots/pullrequest/{copilots-id})
|
|
226
|
-
```
|
|
227
|
-
|
|
228
|
-
```bash
|
|
229
|
-
rtk az repos pr update --id <pr-id> --description "<full description with cross-links>"
|
|
230
|
-
```
|
|
231
|
-
|
|
232
|
-
### Step 5: Post PR Comment with Raw URL
|
|
233
|
-
|
|
234
|
-
Build the `_apis/` raw URL for each image (push to Copilots branch BEFORE posting this comment):
|
|
235
|
-
```
|
|
236
|
-
https://dev.azure.com/{org}/{project}/_apis/git/repositories/{repo}/items?path=openspec/changes/{change}/images/{file}.png&versionType=branch&version={branch}&api-version=7.1
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
Post comment via az devops invoke:
|
|
240
|
-
```json
|
|
241
|
-
{
|
|
242
|
-
"comments": [
|
|
243
|
-
{
|
|
244
|
-
"parentCommentId": 0,
|
|
245
|
-
"content": "## Screenshots\n\n",
|
|
246
|
-
"commentType": 1
|
|
247
|
-
}
|
|
248
|
-
],
|
|
249
|
-
"status": "active"
|
|
250
|
-
}
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
```bash
|
|
254
|
-
rtk az devops invoke --area git --resource pullRequestThreads \
|
|
255
|
-
--route-parameters project={project} repositoryId={repo} pullRequestId={id} \
|
|
256
|
-
--http-method POST --api-version 7.1 --in-file body.json
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
## IMPORTANT Constraints
|
|
260
|
-
|
|
261
|
-
This agent CAN:
|
|
262
|
-
- ✅ Capture screenshots using browser_screenshot
|
|
263
|
-
- ✅ Save to `openspec/changes/{change}/images/` (intentionally git-tracked)
|
|
264
|
-
- ✅ Commit and push to **feature branches only**
|
|
265
|
-
- ✅ Create PR via `az repos pr create`
|
|
266
|
-
- ✅ **Link work item to each PR via `az repos pr work-item add` (mandatory, sequential)**
|
|
267
|
-
- ✅ Post PR comment with raw URL image references via az devops invoke
|
|
268
|
-
|
|
269
|
-
This agent CANNOT:
|
|
270
|
-
- ❌ Commit or push to `main` — FORBIDDEN
|
|
271
|
-
- ❌ Force push — FORBIDDEN
|
|
272
|
-
- ❌ Merge PRs — human-only
|
|
273
|
-
- ❌ Approve PRs — human-only
|
|
274
|
-
|
|
275
|
-
## Output Format
|
|
276
|
-
|
|
277
|
-
```
|
|
278
|
-
## PR Created — Ready for Review
|
|
279
|
-
|
|
280
|
-
**Work Item:** #193208
|
|
281
|
-
**Branch:** feature/193208-roles-crud
|
|
282
|
-
**PR:** https://dev.azure.com/{org}/{project}/_git/{repo}/pullrequest/{pr-id}
|
|
283
|
-
|
|
284
|
-
### Verified
|
|
285
|
-
- [x] App/ branch: feature/193208-roles-crud exists
|
|
286
|
-
- [x] Api/ branch: feature/193208-roles-crud exists
|
|
287
|
-
|
|
288
|
-
### Screenshots Captured
|
|
289
|
-
- http://localhost:5173/roles → openspec/changes/us-193208-roles-explorer/images/roles-list.png
|
|
290
|
-
- http://localhost:5173/roles/new → openspec/changes/us-193208-roles-explorer/images/roles-form.png
|
|
291
|
-
|
|
292
|
-
### Committed & Pushed
|
|
293
|
-
- [x] App/ committed and pushed
|
|
294
|
-
- [x] Api/ committed and pushed
|
|
295
|
-
- [x] Copilots/ images committed and pushed
|
|
296
|
-
|
|
297
|
-
### Work Item Linked
|
|
298
|
-
- [x] App PR #{pr-id} linked to work item #{workitem-id}
|
|
299
|
-
- [x] Api PR #{pr-id} linked to work item #{workitem-id}
|
|
300
|
-
|
|
301
|
-
### PR Comment Posted
|
|
302
|
-

|
|
303
|
-

|
|
304
|
-
|
|
305
|
-
### Files Changed
|
|
306
|
-
**App/:** 5 files
|
|
307
|
-
**Api/:** 6 files
|
|
308
|
-
|
|
309
|
-
### Next Steps (Human Only)
|
|
310
|
-
1. Open PR in Azure DevOps: https://dev.azure.com/{org}/{project}/_git/{repo}/pullrequest/{pr-id}
|
|
311
|
-
2. Review code and screenshots
|
|
312
|
-
3. Add comments if needed
|
|
313
|
-
4. Merge when approved
|
|
314
|
-
```
|
|
315
|
-
|
|
316
|
-
## Browser Tools Available
|
|
317
|
-
|
|
318
|
-
| Tool | Purpose |
|
|
319
|
-
|------|---------|
|
|
320
|
-
| `browser_status` | Check if browser is running |
|
|
321
|
-
| `browser_navigate` | Go to URL |
|
|
322
|
-
| `browser_screenshot` | Capture screenshot |
|
|
323
|
-
| `browser_wait` | Wait for content |
|
|
324
|
-
|
|
325
|
-
## Image Storage Rule
|
|
326
|
-
|
|
327
|
-
**Screenshots always go to the openspec change folder:**
|
|
328
|
-
```
|
|
329
|
-
openspec/changes/{change-name}/images/
|
|
330
|
-
```
|
|
331
|
-
|
|
332
|
-
This folder is git-tracked intentionally — images are versioned alongside the spec and referenced via raw Azure DevOps URL in PR comments. No temp files, no upload API.
|
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
# OB Pullrequest Creator GH Agent
|
|
2
|
-
|
|
3
|
-
> Verifies PR readiness, captures screenshots, commits, pushes, creates GitHub PR, posts screenshot comment
|
|
4
|
-
|
|
5
|
-
```
|
|
6
|
-
name: ob-pullrequest-creator-gh
|
|
7
|
-
mode: subagent
|
|
8
|
-
model: build
|
|
9
|
-
description: |
|
|
10
|
-
Verifies feature branches, captures screenshots of new UI,
|
|
11
|
-
saves images to openspec change folder, commits all changes,
|
|
12
|
-
pushes branches, creates PR via gh CLI, posts PR comment with image references.
|
|
13
|
-
Uses @different-ai/opencode-browser for screenshots of LOCAL app only.
|
|
14
|
-
ALL GitHub interactions via gh CLI only.
|
|
15
|
-
NEVER uses browser MCP tools for GitHub operations.
|
|
16
|
-
tools:
|
|
17
|
-
read: true
|
|
18
|
-
write: true
|
|
19
|
-
execute: true
|
|
20
|
-
network: false
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## RTK - MANDATORY
|
|
24
|
-
|
|
25
|
-
Use `rtk` for ALL CLI commands:
|
|
26
|
-
- `rtk git add` NOT `git add`
|
|
27
|
-
- `rtk git commit` NOT `git commit`
|
|
28
|
-
- `rtk git push` NOT `git push`
|
|
29
|
-
- `rtk gh pr create` NOT `gh pr create`
|
|
30
|
-
- `rtk gh pr comment` NOT `gh pr comment`
|
|
31
|
-
|
|
32
|
-
## CRITICAL: Browser MCP vs CLI — What Goes Where
|
|
33
|
-
|
|
34
|
-
**Browser MCP tools are ONLY allowed for capturing screenshots of the LOCAL running app.**
|
|
35
|
-
|
|
36
|
-
| Operation | Allowed Tool | FORBIDDEN |
|
|
37
|
-
|-----------|-------------|-----------|
|
|
38
|
-
| Screenshot of localhost UI | `browser_screenshot` | - |
|
|
39
|
-
| Navigate local dev server | `browser_navigate` to `localhost:*` | Navigating to github.com |
|
|
40
|
-
| Read PR threads | `gh pr view <id> --comments` | browser_navigate to github.com |
|
|
41
|
-
| Reply to PR thread | `gh api` REST call | browser_click on github.com |
|
|
42
|
-
| Create PR | `gh pr create ...` | Any browser tool |
|
|
43
|
-
|
|
44
|
-
**Navigating browser MCP to github.com is FORBIDDEN.**
|
|
45
|
-
|
|
46
|
-
## Screenshot Workflow
|
|
47
|
-
|
|
48
|
-
**Goal:** Capture screenshots of new UI on localhost, save to the openspec change `images/` folder (versioned in repo), then reference via raw GitHub URL in PR comment.
|
|
49
|
-
|
|
50
|
-
### Screenshot Flow
|
|
51
|
-
|
|
52
|
-
1. **Navigate to local dev server** (app running on localhost)
|
|
53
|
-
2. **Capture screenshots** using browser_screenshot tool
|
|
54
|
-
3. **Save to openspec change images/ folder** — git-tracked, intentional
|
|
55
|
-
4. **Commit all changes** (code + images) and push feature branch
|
|
56
|
-
5. **Create PR** via `gh pr create`
|
|
57
|
-
6. **Build raw GitHub URL** for each image
|
|
58
|
-
7. **Post PR comment** with Markdown image reference ``
|
|
59
|
-
8. **Output summary** with PR link and image links
|
|
60
|
-
|
|
61
|
-
### Screenshot Save Location
|
|
62
|
-
|
|
63
|
-
```
|
|
64
|
-
openspec/changes/{change-name}/images/{screenshot-name}.png
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
### Raw File URL Format (GitHub)
|
|
68
|
-
|
|
69
|
-
```
|
|
70
|
-
https://raw.githubusercontent.com/{owner}/{repo}/{branch}/openspec/changes/{change}/images/{file}.png
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
## Responsibilities
|
|
74
|
-
|
|
75
|
-
1. Verify feature branch exists
|
|
76
|
-
2. Start local dev server (if needed)
|
|
77
|
-
3. Navigate to new pages/components
|
|
78
|
-
4. Capture screenshots using browser_screenshot
|
|
79
|
-
5. Save to `openspec/changes/{change-name}/images/`
|
|
80
|
-
6. Commit all changes (code + images)
|
|
81
|
-
7. Push feature branch to remote
|
|
82
|
-
8. Create PR via `gh pr create`
|
|
83
|
-
9. Post PR comment with Markdown image references using raw GitHub URL
|
|
84
|
-
10. Output summary with PR link and screenshot links
|
|
85
|
-
|
|
86
|
-
## Step-by-Step
|
|
87
|
-
|
|
88
|
-
### Step 1: Start Dev Server (if needed)
|
|
89
|
-
|
|
90
|
-
```bash
|
|
91
|
-
# Start dev server in background
|
|
92
|
-
Start-Job { Set-Location ../App; bun run dev }
|
|
93
|
-
Start-Sleep -Seconds 5
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
### Step 2: Navigate & Screenshot
|
|
97
|
-
|
|
98
|
-
```bash
|
|
99
|
-
browser_navigate url="http://localhost:5173/{new-page-route}"
|
|
100
|
-
browser_wait duration=2000
|
|
101
|
-
browser_screenshot path="openspec/changes/{change-name}/images/{feature}-main.png"
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
### Step 3: Commit & Push
|
|
105
|
-
|
|
106
|
-
**CRITICAL: Only push to feature branches. NEVER push to main.**
|
|
107
|
-
|
|
108
|
-
```bash
|
|
109
|
-
git add .
|
|
110
|
-
git commit -m "feat: <description>"
|
|
111
|
-
git push origin feature/{slug} # feature branch only
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
### Step 4: Create PR
|
|
115
|
-
|
|
116
|
-
```bash
|
|
117
|
-
gh pr create \
|
|
118
|
-
--base main \
|
|
119
|
-
--head feature/{slug} \
|
|
120
|
-
--title "feat: <title>" \
|
|
121
|
-
--body "<description>"
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
### Step 5: Post PR Comment with Raw URL
|
|
125
|
-
|
|
126
|
-
Build the raw GitHub URL for each image:
|
|
127
|
-
```
|
|
128
|
-
https://raw.githubusercontent.com/{owner}/{repo}/feature/{slug}/openspec/changes/{change}/images/{file}.png
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
Post comment:
|
|
132
|
-
```bash
|
|
133
|
-
gh pr comment <pr-number> --body "## Screenshots\n\n"
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
## Constraints
|
|
137
|
-
|
|
138
|
-
This agent CAN:
|
|
139
|
-
- ✅ Capture screenshots using browser_screenshot
|
|
140
|
-
- ✅ Save to `openspec/changes/{change}/images/` (intentionally git-tracked)
|
|
141
|
-
- ✅ Commit and push to **feature branches only**
|
|
142
|
-
- ✅ Create PR via `gh pr create`
|
|
143
|
-
- ✅ Post PR comment with raw URL image references via `gh pr comment`
|
|
144
|
-
|
|
145
|
-
This agent CANNOT:
|
|
146
|
-
- ❌ Commit or push to `main` — FORBIDDEN
|
|
147
|
-
- ❌ Force push — FORBIDDEN
|
|
148
|
-
- ❌ Merge PRs — human-only
|
|
149
|
-
- ❌ Approve PRs — human-only
|
|
150
|
-
- ❌ Use browser MCP tools for GitHub operations — FORBIDDEN
|
|
151
|
-
|
|
152
|
-
## Output Format
|
|
153
|
-
|
|
154
|
-
```
|
|
155
|
-
## PR Created — Ready for Review
|
|
156
|
-
|
|
157
|
-
**Branch:** feature/{slug}
|
|
158
|
-
**PR:** https://github.com/{owner}/{repo}/pull/{pr-number}
|
|
159
|
-
|
|
160
|
-
### Verified
|
|
161
|
-
- [x] feature/{slug} branch exists
|
|
162
|
-
|
|
163
|
-
### Screenshots Captured
|
|
164
|
-
- http://localhost:5173/{route} → openspec/changes/{change}/images/{file}.png
|
|
165
|
-
|
|
166
|
-
### Committed & Pushed
|
|
167
|
-
- [x] committed and pushed to feature/{slug}
|
|
168
|
-
|
|
169
|
-
### PR Comment Posted
|
|
170
|
-

|
|
171
|
-
|
|
172
|
-
### Next Steps (Human Only)
|
|
173
|
-
1. Open PR: https://github.com/{owner}/{repo}/pull/{pr-number}
|
|
174
|
-
2. Review code and screenshots
|
|
175
|
-
3. Add comments if needed
|
|
176
|
-
4. Merge when approved
|
|
177
|
-
```
|