Fix a UI with browser feedback
On this page
Have an agent inspect a running web page, make a focused change and capture the result.
Before you start
Run your project's development server. Open Armoury (Settings) → Integrations and enable Browser Automation. Expand its card, install Chromium if needed, and choose Inscribe & Apply. Use Headless mode to keep the browser in the background while you review its captures in Code Overlord. Launch the agent from Code Overlord so it can access the configured browser tools.
Browser Automation uses its own profile. If the application requires sign-in, that browser needs an authenticated session; it does not automatically inherit your personal browser's login.
Inspect and fix the page
- Give the agent the exact development URL and the screen or behaviour to inspect.
- Ask it to open the page, save the starting capture in your workspace and inspect that image.
- Hover the returned filename and choose View Scroll to open it in Peruse. You can also click the saved image in Scrolls. Return to the same agent and describe the intended change, naming the image and the element that needs attention.
- Have the agent inspect the relevant page element and source before editing.
- Ask it to revisit the same URL, viewport and interaction after the change, then save and inspect a separate verification image.
- Open the verification filename with View Scroll and compare it with the original in Peruse. Review the source change in the agent conversation.
Check the actual capture dimensions. The browser connection used for this demonstration captured at 1920 × 1080 and did not expose a viewport-resize operation. Both images use that same size; a requested size alone does not establish the size that was captured.
Give specific visual feedback
Enter the feedback directly into the agent terminal. Give it the screenshot's local path and ask it to open the actual image. Name the element, its current behaviour and the desired result. For a screenshot on your phone, use the companion's image attachment control in the selected agent conversation; the phone workflow shows how to target the intended agent.
In before.png, the Send for review button clips its label. Inspect that image and the relevant CSS, then fix only the button. Reload the same page at the same capture size, save after.png and inspect it. Return the filename and the source change here so I can review them in Code Overlord.
If the application is running in Skyforge, give the browser a URL reachable from the machine hosting that browser. A local localhost address does not automatically refer to the cloud machine.
Check the result
Compare before and after at the same viewport. Verify the interaction as well as the appearance, and ask the agent to show the source diff and test results in its terminal.
Where the approach differs
This combines screenshot feedback, browser tools and agent instructions. Code Overlord does not document a user-facing element picker that automatically packages a clicked element's DOM, styles and cropped screenshot in the same way as Orca's Design Mode. Browser Automation also is not a documented embedded browser pane per worktree.
If tools report Browser integration not available, check the integration in the active workspace before retrying.
More detail
Browser and other integrations · Browser tool discovery · Image attachments