feat(web): open the preview page in the system browser from the menu

[sti0]

What Changed

The integrated browser's ⋮ menu gets an "Open in system browser" item that hands the page the tab is showing to the OS default browser.

• PreviewMoreMenu gains an onOpenInBrowser prop and the menu item, placed directly after "Open separate preview window" and disabled under the same condition as its neighbours.
• PreviewView passes the existing handleOpenInBrowser handler through. That is the same path the chat's right-click "Open in system browser" already takes: localApi.shell.openExternal → desktopBridge.openExternal → IPC → Electron.shell.openExternal. Same label, same destination, one more way in.
• PreviewView.test.tsx covers the new path: the menu hands over the address the tab is actually showing, and a tab with no page opens nothing. Removing the onOpenInBrowser line from PreviewView turns the test red. Reaching the shell from that suite needed a window before the module import, because PreviewView resolves the local API once at module scope behind a typeof window guard.

Two single-line insertions in the components plus the test.

Why

The menu offered Hard reload, DevTools, a separate preview window and the device toolbar, but no way to hand the current page to the system browser. The only entry point was the hover-reveal button inside the URL input, which is easy to miss. Reusing the existing handler keeps the menu and the URL-input button on one code path.

Surfaces

• Desktop: fixed here; the menu is only mounted with the desktop bridge.
• Web: unaffected, the menu does not render there and the URL-input button already covers the case.
• Mobile: has no integrated browser.
• Contracts: unchanged, this is client-side wiring.

UI Changes

Clicked in a real desktop client built from this branch (AppImage on Fedora Kinoite). The item opens the page the tab is showing in the system browser.

Before	After

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes — no motion involved

---

Claude Fable 5.1 via Claude Code inside T3 Code (test and desktop verification: Claude Opus 5).

Created with AI assistance (Klaus/Claude), reviewed by Timo.

Summary by CodeRabbit

• New Features

  • Added an “Open in system browser” option to the preview menu.
  • The current preview page opens in the system browser when selected.
  • The option is unavailable when the preview tab has no web content.

• Tests

  • Added coverage for opening valid preview URLs and handling empty tabs.

[macroscopeapp]

Approvability

Verdict: Approved at f3e3adb

Macroscope's review found this PR approvable — This adds a small desktop menu item that reuses the existing system-browser handler, without changing existing navigation behavior or contracts. The focused tests cover the current URL and the no-URL case, keeping the change isolated and low risk.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: aa834a8f-39c7-42d1-8206-9c2ae13addc0

📥 Commits

Reviewing files that changed from the base of the PR and between 5e6cc2b and f3e3adb.

📒 Files selected for processing (3)

• apps/web/src/components/preview/PreviewMoreMenu.tsx
• apps/web/src/components/preview/PreviewView.test.tsx
• apps/web/src/components/preview/PreviewView.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The preview more menu adds an “Open in system browser” action. PreviewView connects the action to the local shell API and tests active-tab and empty-tab behavior.

Changes

Preview browser action

Layer / File(s)	Summary
Preview menu action apps/web/src/components/preview/PreviewMoreMenu.tsx	Adds the onOpenInBrowser prop and menu item. The item is disabled when tab actions are unavailable.
Preview view integration and validation apps/web/src/components/preview/PreviewView.tsx, apps/web/src/components/preview/PreviewView.test.tsx	Passes the existing browser handler to the menu. Tests verify that the active tab URL reaches openExternal and that empty tabs do not open a URL.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to f3e3a

The preview menu now opens the active page in the system browser while preserving the existing disabled behavior and no-op handling for empty tabs. No merge-blocking risk remains.

Sequence Diagram(s)

sequenceDiagram
  participant PreviewMoreMenu
  participant PreviewView
  participant localApi.shell
  participant SystemBrowser
  PreviewMoreMenu->>PreviewView: Invoke onOpenInBrowser
  PreviewView->>localApi.shell: Pass active tab URL to openExternal
  localApi.shell->>SystemBrowser: Open active tab URL

Loading

Suggested reviewers: juliusmarminge

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a system-browser action for preview pages.
Description check	✅ Passed	The description includes the required What Changed, Why, UI Changes, and Checklist sections. It explains the implementation, scope, testing, desktop verification, screenshots, and checklist status. Th…
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 3 files.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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