Portal Browser

Canopy's two browser surfaces: the Portal sidebar for AI chat, and Browser panels for local dev with console capture and DevTools.

Updated
Reviewed

Overview

Canopy includes two browser surfaces. The Portal is a sidebar that slides in from the right for chatting with AI web clients like Claude, ChatGPT, and Gemini. Browser panels are standalone grid panes you can place anywhere in your workspace, built for viewing local web servers with full developer tooling including console capture, find-in-page, and DevTools.

Portal Sidebar

Opening the Portal

Toggle the Portal with Cmd+\ or click the Portal Toggle button in the toolbar. The panel slides in from the right side of the window.

AI Chat Launchpad

When you open the Portal with no active tabs, the launchpad appears with buttons for three built-in AI services: Claude, ChatGPT, and Gemini. Click any button to open that service in a new tab.

These defaults are always available out of the box. You can toggle which ones appear and edit their URLs in Settings > Portal > Default Links. Custom links you add show up in the launchpad too.

Tip
Pair the Portal with CopyTree for a fast feedback loop — copy your codebase context to the clipboard, then paste it into an AI chat in the Portal. Web-based AI gets full project context without you ever leaving Canopy.

Tab Management

You can open multiple AI chat sessions in tabs. Each tab keeps its own conversation and navigation history. The Portal detects AI services by URL, so the tab title and icon update to match whichever service you're chatting with.

The + button opens a new tab. If you've set a Default New Tab Agent, it navigates there directly. Otherwise, the launchpad appears so you can pick a service. Up to three tabs stay live at once. When you exceed that limit, the least recently used tab is evicted and reloads from scratch when you return to it, so any unsaved in-page state (typed input, scroll position) is lost.

Resizing the Portal

Drag the left edge of the Portal to resize it. The panel ranges from 320px to 1200px wide, with a default of 480px.

Right-click the Portal and choose Reset Width to restore the 480px default. You can also resize with the keyboard: focus the resize handle and press ArrowLeft to make the panel wider or ArrowRight to make it narrower, in 10px steps.

Find in Page

Press Cmd+F (Ctrl+F on Windows and Linux) to search for text within the current page. A floating find bar appears in the top-right corner with a text input, match count, and navigation buttons. Use Enter or Cmd+G (Ctrl+G on Windows/Linux) for the next match, Shift+Enter or Cmd+Shift+G (Ctrl+Shift+G on Windows/Linux) for the previous match, and Escape to close. This works identically to find-in-page in Dev Preview.

External Links

Links with target="_blank" and window.open() calls from pages inside the Portal are routed to your system's default browser. Only http: and https: URLs are opened externally.

Configuration

Configure Portal behavior in Settings > Portal:

  • Default New Tab Agent — choose which service opens when you press +. Set to "None" to show the launchpad instead, or enter a custom URL.
  • Default Links — toggle which built-in links (Claude, ChatGPT, Gemini) appear in the launchpad and tab bar. You can also edit their target URLs.
  • Custom Links — add your own links to AI services or documentation. Each link has a name and URL, and you can toggle its visibility.

Browser Panels

Browser panels are standalone panes that live in your main workspace grid. Open one from the panel palette (Cmd+N, then select Browser) and place it in any grid slot. These panels are built for local development servers and come with console capture, find-in-page, screenshots, and DevTools built in. The same browser engine powers the Dev Preview panel.

Toolbar Controls

The browser toolbar across the top of each panel provides:

  • Back / Forward / Reload — standard navigation buttons.
  • Zoom In / Zoom Out — adjust page zoom level.
  • Address bar — type a localhost URL to navigate. While typing, a dropdown shows up to five suggestions from your URL history, ranked by how often and recently you visited each page. Use Arrow Down/Arrow Up to move through suggestions, Enter to navigate, or Escape to dismiss.
  • Copy URL — copies the current page URL to the clipboard.
  • Screenshot (camera icon) — captures the visible viewport as a PNG and copies it to the clipboard.
  • Console (terminal icon) — toggles the console capture panel below the webview.
  • DevTools (code icon) — opens Electron DevTools for the webview in a separate window.
  • Open in Browser — opens the current URL in your system's default browser.
Note
The address bar is for localhost and local-network URLs. You cannot type an external URL directly into it. Cross-origin navigation still works when in-page links or redirects lead to external domains (for example, OAuth flows through an external auth provider).

Find in Page

Press Cmd+F (macOS) or Ctrl+F (Windows/Linux) to open the find bar. It appears at the top-right of the webview with a search input and a match counter showing something like "3 / 12". The search is live, matching as you type.

Navigate between matches with Enter or Cmd+G (Ctrl+G on Windows/Linux) for the next match, and Shift+Enter or Cmd+Shift+G (Ctrl+Shift+G on Windows/Linux) for the previous match. Press Escape to close the find bar and clear the highlights. The shortcut works even when the webview itself has keyboard focus.

Console Capture

Click the terminal icon in the toolbar to open the console capture panel below the webview. It intercepts console.log, console.warn, console.error, and console.info calls from the page using the Chrome DevTools Protocol, so you get structured output including objects, stack traces, and group nesting.

Filter messages by level using the All, Errors, Warn, and Log buttons. Error and warning buttons show badge counts so you can spot issues at a glance. A text filter narrows results further by matching against the message content.

Each message shows a timestamp in HH:MM:SS.mmm format. The panel auto-scrolls to the bottom as new messages arrive. If you scroll up to review earlier output, auto-scroll pauses and a button appears to jump back to the bottom. When you navigate to a new page, messages from the previous page are visually dimmed but not removed. Click the clear button to wipe all messages.

Note
Console messages are held in a 500-message buffer per panel and are not persisted across app restarts. For persistent logging, use your application's own log files.

Cross-Origin Navigation

Browser panels can follow http: and https: links that navigate to external domains. This is particularly useful for OAuth and OIDC flows where a localhost app redirects through an external identity provider and back again.

If a navigation is blocked (for example, a non-HTTP scheme), a banner appears at the top of the panel showing the blocked URL and an Open in External Browser button. The banner auto-dismisses after 10 seconds or clears on the next successful navigation.

JavaScript Dialogs

When a page calls alert(), confirm(), or prompt(), Canopy renders the dialog as a styled in-app modal rather than an OS-level dialog. This keeps focus inside the panel and avoids blocking the main process.

  • Alert — displays the message with an OK button. Escape also dismisses it.
  • Confirm — shows Cancel and OK buttons. Enter confirms, Escape cancels.
  • Prompt — includes a pre-filled text input alongside Cancel and OK. Enter confirms, Escape cancels.

If multiple dialogs arrive at the same time, they're queued and shown one at a time.

External Links

Links with target="_blank" and window.open() calls from browser panels are routed to your system's default browser, just like in the Portal sidebar. Only http: and https: URLs are opened externally.