feat(desktop): open external links in system browser instead of webview
Summary
Fixes #8361
This PR fixes the issue where clicking links in AI responses navigates inside the Tauri webview instead of opening in the system browser.
What makes this PR different from #8520 and #7360:
- ✅ User toggle setting - Users can choose between external browser or in-app navigation
- ✅ Command palette integration - Quick toggle via Mod+Shift+P
- ✅ UI toggle button - Visible in sidebar footer (desktop only)
- ✅ Persisted preference - Setting survives app restarts
Changes
-
Global click handler: Intercepts all
<a>tag clicks withhttp://orhttps://URLs and opens them viashellOpen()in the system browser -
User setting: Added
links.openExternallyto Layout context (persisted) so users can toggle between external browser and in-app navigation - Command palette: Added "Open links in browser/app" command for quick toggling
- UI toggle: Added a toggle button in the sidebar footer (only visible on desktop)
Problem
In Tauri webview, target="_blank" on <a> tags does NOT automatically open links in the system browser. When users click links from:
- Markdown rendered AI responses
- Native
<a>tags (like the feedback button)
...the webview navigates to that URL, and users get "stuck" with no obvious way to return.
Solution
Added a global click handler that:
- Intercepts clicks on
<a>tags with external URLs - Checks user preference (
window.__OPENCODE__.openLinksExternally) - If enabled (default: true), prevents default navigation and opens via
shellOpen()
Testing
- Run
bun devinpackages/opencode - Open desktop app
- Ask the AI to respond with a link (e.g., "give me a link to github")
- Click the link → should open in system browser
- Toggle the setting in sidebar → links should now navigate in-app
Files Changed
| File | Change |
|---|---|
packages/desktop/src/index.tsx |
Global click handler |
packages/app/src/context/layout.tsx |
Persisted setting + sync to window.__OPENCODE__ |
packages/app/src/app.tsx |
Type definition for window.__OPENCODE__ |
packages/app/src/pages/layout.tsx |
Command palette + UI toggle button |
Default Behavior
Opens links in external browser (most users expect this behavior)
Users who prefer in-app browsing can toggle the setting.
Note: This PR is aware of #8520 and #7360 which address the same core issue. This PR adds additional user-facing features (toggle setting, command palette, UI button) that those PRs don't include. Happy to collaborate or consolidate if needed!