From ee3ef3a3b24778341ac54e29e45d69cbe205e825 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sun, 10 May 2026 10:23:42 -0400
Subject: [PATCH] feat(web): add "Open in new tab" button to embedded terminal
 toolbar

Mirrors the affordance on the VNC panel. The button links to
/runs/:id/terminal, which renders the chromeless full-screen TerminalView
in a new browser tab.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../app/components/terminal-view.tsx          | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/apps/fabro-web/app/components/terminal-view.tsx b/apps/fabro-web/app/components/terminal-view.tsx
index e43528022..e1a13ec20 100644
--- a/apps/fabro-web/app/components/terminal-view.tsx
+++ b/apps/fabro-web/app/components/terminal-view.tsx
@@ -9,6 +9,7 @@ import type { Terminal as XtermTerminal } from "@xterm/xterm";
 import type { FitAddon as XtermFitAddon } from "@xterm/addon-fit";
 import {
   ArrowPathIcon,
+  ArrowTopRightOnSquareIcon,
   ClipboardDocumentIcon,
 } from "@heroicons/react/20/solid";
 
@@ -71,6 +72,10 @@ export function buildTerminalWebSocketUrl(location: Location, runId: string): st
   return `${protocol}//${location.host}/api/v1/runs/${encodeURIComponent(runId)}/terminal`;
 }
 
+export function buildFullScreenTerminalUrl(runId: string): string {
+  return `/runs/${encodeURIComponent(runId)}/terminal`;
+}
+
 export function parseTerminalServerMessage(data: string): TerminalServerMessage | null {
   try {
     const parsed = JSON.parse(data);
@@ -359,6 +364,20 @@ export default function TerminalView({
           {leading}
           <StatusPill status={status} detail={sandboxDetail} />
           <div className="ml-auto flex items-center gap-2">
+            <Tooltip label="Open in new tab">
+              <a
+                href={buildFullScreenTerminalUrl(runId)}
+                target="_blank"
+                rel="noreferrer"
+                className={ICON_BUTTON_CLASS}
+                aria-label="Open terminal in new tab"
+              >
+                <ArrowTopRightOnSquareIcon
+                  className="size-4"
+                  aria-hidden="true"
+                />
+              </a>
+            </Tooltip>
             <Tooltip label="Reconnect">
               <button
                 type="button"