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>
This commit is contained in:
Bryan Helmkamp 2026-05-10 10:23:42 -04:00
parent cb316936e3
commit ee3ef3a3b2
No known key found for this signature in database

View file

@ -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"