feat(browser): improve integrated browser controls

[alwaysmavs]

Summary

Improve the integrated browser's right-panel experience and make wide or fixed-layout content easier to inspect without adding a second browser surface.

Problem

The browser inherited several constraints from the artifacts panel: it could not use the full content area, had no explicit page zoom controls, and agent scrolling was vertical-only. Renderer modals also need a current visual fallback because Electron WebContentsView content composites above renderer overlays. Generated HTML artifacts could compound the problem by locking the root viewport or assuming a fixed canvas size.

For users, this meant narrow browser pages were harder to inspect, wide content could not be panned by the agent, and modal transitions could show stale browser imagery. An earlier fit-to-width control was also visually ambiguous and had no visible effect on responsive sites.

Changes

• Allow the integrated browser to maximize through the shared right-panel shell while preserving and restoring the sidebar state.
• Add explicit 25%-200% manual page zoom controls in the maximized browser and keep the ordinary default at 100%.
• Scope cached zoom values by HTTP(S) origin to match Chromium's same-origin zoom policy and synchronize live same-origin pages.
• Add horizontal deltaX support to browser_scroll, including bounded defaults, bridge parsing, Playwright dispatch, tests, and Browser Skill guidance.
• Hide the native browser view before refreshing its modal-backdrop preview so a slow screenshot cannot block renderer modals; keep preview capture asynchronous and stale-result safe.
• Keep browser and artifact preferred widths independent and avoid animated layout chasing across the native-view boundary.
• Tell generated HTML artifacts to remain usable in a resizable viewport and avoid root overflow clipping unless a fixed non-scrollable canvas was explicitly requested.
• Remove the ambiguous fit-to-width browser control and its unused state/service surface while retaining explicit manual zoom.

Validation

• corepack pnpm run lint
• corepack pnpm run format
• corepack pnpm run ts-check
• corepack pnpm test — 283 test files and 2,138 tests passed
• corepack pnpm run build:app

Focused coverage includes zoom normalization and origin scoping, horizontal scroll defaults and bounds, maximized browser controls, native-view modal visibility ordering, in-flight visibility transitions, non-blocking hidden-page preview capture, and stale preview suppression.

[coderabbitai]

Summary by CodeRabbit

• New Features
  • Browser panels can be maximized, restored, and zoomed from 25% to 200%.
  • Browser scrolling now supports independent horizontal and vertical movement.
  • Zoom settings persist by website and reset appropriately when browser data or profiles change.
  • Responsive previews and improved panel transitions provide a smoother viewing experience.
• Documentation
  • Updated browser interaction and artifact guidance for zooming, scrolling, and resizable layouts.
• Localization
  • Added English and Chinese translations for browser controls.

Walkthrough

The integrated browser now supports two-axis scrolling and origin-scoped page zoom from 25% to 200%. Zoom state persists across matching pages and navigation, and resets when browser data or scope changes. The browser panel can maximize, restore, and control zoom. App-shell state coordinates browser and artifact panels. Preview capture remains protected against stale requests. Documentation and agent guidance describe responsive browser content and horizontal scrolling.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant BrowserPanel
  participant BrowserService
  participant BrowserManager
  participant BrowserPage
  User->>BrowserPanel: select zoom or maximize
  BrowserPanel->>BrowserService: send zoom request
  BrowserService->>BrowserManager: forward session and factor
  BrowserManager->>BrowserPage: apply normalized factor
  BrowserPage-->>BrowserPanel: return updated page state

Loading

Possibly related PRs

• oomol-lab/wanta#277: Introduced the integrated browser components extended by this change.
• oomol-lab/wanta#279: Added browser panel preview and native-view behavior used by this change.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description clearly covers the outcome, changes, and validation, but it omits the required Safety and Compatibility section.	Add the Safety and Compatibility checklist and confirm each required item, including credential handling, mode coverage, tooling alignment, migration impact, and documentation updates.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title uses the required format and clearly describes the browser control improvements.

✨ Finishing Touches

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch codex/improve-integrated-browser-controls

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

resources/wanta-skills/browser/SKILL.md (1)

31-32: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Make one-axis scrolling explicit.

When only horizontal panning is required, tell the agent to pass deltaY: 0. electron/browser/control-server.ts Line 113 still converts an omitted deltaY to 600, so browser_scroll({ deltaX: 500 }) also moves down. Add examples for horizontal-only and vertical-only scrolling.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@resources/wanta-skills/browser/SKILL.md` around lines 31 - 32, Update the
scrolling guidance in SKILL.md to explicitly pass deltaY: 0 for horizontal-only
panning, avoiding the control server’s default vertical movement. Add examples
demonstrating both horizontal-only scrolling with deltaY: 0 and vertical-only
scrolling with deltaX: 0.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@resources/wanta-skills/browser/SKILL.md`:
- Around line 31-32: Update the scrolling guidance in SKILL.md to explicitly
pass deltaY: 0 for horizontal-only panning, avoiding the control server’s
default vertical movement. Add examples demonstrating both horizontal-only
scrolling with deltaY: 0 and vertical-only scrolling with deltaX: 0.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 230bfc05-1f5f-4c29-9d63-7442a2261cf9

📥 Commits

Reviewing files that changed from the base of the PR and between 73a6544 and 3121f49.

📒 Files selected for processing (18)

• docs/ai/integrated-browser-implementation.md
• docs/integrated-browser.md
• electron/agent/manager.ts
• electron/agent/tool-sources.ts
• electron/browser/common.ts
• electron/browser/control-server.test.ts
• electron/browser/control-server.ts
• electron/browser/node.ts
• electron/browser/page.test.ts
• electron/browser/page.ts
• resources/wanta-skills/browser/SKILL.md
• src/components/app-shell/AppShell.tsx
• src/components/app-shell/AppShellRightPanel.tsx
• src/components/app-shell/use-artifacts-panel-state.ts
• src/i18n/app-messages.en.ts
• src/i18n/app-messages.zh.ts
• src/routes/Chat/BrowserPanel.test.ts
• src/routes/Chat/BrowserPanel.tsx