feat(panel): full mode gets an "Open ↗" to pop the dashboard into a new tab (v0.5.1) (#13)

mabry1985 · claude · web-flow · commit 1bfd7f923ee3 · 2026-06-15T22:39:06.000-07:00
Even with the dashboard embedded inline, you sometimes want it in a full browser tab. Adds an
"Open ↗" button to the full-mode bar, shown whenever the dashboard is on this machine (loopback
host, not fleet-proxied) — and a top-level new-tab nav reaches the http dashboard even from an
https console, where the embedded frame is mixed-content-blocked (the https message now points at
it). Verified headless (link shows + points at the dashboard's own origin).

Co-authored-by: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.5.1
+- **Full mode: an "Open ↗" button** to pop the dashboard out into a full browser tab, alongside the
+  inline embed. Shown whenever the dashboard is on this machine (loopback host) — including over an
+  https console, where the new-tab nav reaches the http dashboard even though the embedded frame
+  can't.
+
 ## v0.5.0
 - **`full` is the default again, and it embeds the dashboard inline.** Full mode iframes
   agent-browser's dashboard at its own **local origin** (`http://<host>:<port>/`) — so on a local
diff --git a/browser_panel.py b/browser_panel.py
@@ -173,7 +173,10 @@ async def _dash_control(body: dict = Body(...)):
   .card .d{color:var(--pl-color-fg-muted);line-height:1.6}
   .card code{background:var(--pl-color-bg-subtle,rgba(127,127,127,.16));padding:.1em .35em;border-radius:4px}
 </style></head><body>
-  <div class="bar"><b>Browser</b><span id="dash" title="agent-browser dashboard"></span></div>
+  <div class="bar"><b>Browser</b><span id="dash" title="agent-browser dashboard"></span>
+    <span style="flex:1"></span>
+    <a id="openlink" class="pl-btn pl-btn--ghost pl-btn--sm" target="_blank" rel="noopener"
+       title="Open the dashboard in a new tab" style="display:none">Open ↗</a></div>
   <div class="stage">
     <iframe id="f" referrerpolicy="no-referrer" allow="clipboard-read; clipboard-write"></iframe>
     <div id="msg"><div class="card"><div class="t" id="mt"></div><div class="d" id="md"></div></div></div>
@@ -184,6 +187,11 @@ async def _dash_control(body: dict = Body(...)):
 try { kit = await import(BASE + "/_ds/plugin-kit.js"); kit.initPluginView(); }
 catch (e) { kit = { initPluginView(){}, apiFetch: (p, i) => fetch(BASE + p, i) }; }
 
+// Open-in-new-tab — show it whenever the dashboard is on THIS machine (loopback host, not
+// fleet-proxied), so you can pop the embedded dashboard out into a full tab. A top-level
+// new-tab nav reaches the http dashboard even from an https console (unlike the embed).
+if(LOCAL){ const o=$("openlink"); o.href=DASH_URL; o.style.display=""; }
+
 function showFrame(){ $("f").src=DASH_URL; $("f").style.display="block"; $("msg").style.display="none"; }
 function showMsg(title, html){ $("mt").textContent=title; $("md").innerHTML=html;
   $("msg").style.display="flex"; $("f").style.display="none"; }
@@ -213,8 +221,9 @@ async def _dash_control(body: dict = Body(...)):
   if(MIXED){
     renderDash(null);
     showMsg("Can't embed the dashboard over https",
-      "The console is served over https, but agent-browser's dashboard is http — browsers block that mix. "
-      + "Open the console at <code>http://localhost</code>, or set <code>panel_mode: minimal</code>.");
+      "The console is served over https, but agent-browser's dashboard is http — browsers block that mix "
+      + "for an embedded frame. Use <b>Open ↗</b> above to view it in a new tab, set "
+      + "<code>panel_mode: minimal</code>, or open the console at <code>http://localhost</code>.");
     return;
   }
   const running = await dashRunning(); renderDash(running);
diff --git a/protoagent.plugin.yaml b/protoagent.plugin.yaml
@@ -1,6 +1,6 @@
 id: agent_browser
 name: Agent Browser
-version: 0.5.0
+version: 0.5.1
 description: >-
   Browser automation for protoAgent, backed by **agent-browser** (vercel-labs) — a
   fast native-Rust CLI/daemon that drives Chrome over CDP with accessibility-tree
diff --git a/pyproject.toml b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "agent-browser-plugin"
-version = "0.5.0"
+version = "0.5.1"
 description = "Browser-automation plugin for protoAgent, backed by vercel-labs/agent-browser (tools + skill + workflows + a live browser panel)."
 requires-python = ">=3.11"
 
diff --git a/tests/test_agent_browser.py b/tests/test_agent_browser.py
@@ -191,6 +191,7 @@ def test_panel_page_full_mode_embeds_local_or_errors():
     assert "LOOPBACK" in html  # local detection (loopback host + not fleet-proxied)
     assert "Open the console locally" in html  # the clear error shown when NOT local
     assert "/api/plugins/agent_browser/dashboard" in html  # the start/stop control
+    assert 'id="openlink"' in html and "Open ↗" in html  # open the dashboard in a new tab
     assert "panel_mode: minimal" in html  # the remote alternative the error points at
     # the dead sub-path proxy is gone; the port placeholder is interpolated.
     assert "/panel/dash" not in html
