Skip to content

feat(react): expose allowTransparency prop on ProcessTerminal #298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Crunchyman-ralph wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(react): expose allowTransparency prop on ProcessTerminal #298

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c8e8d1
feat(react): expose allowTransparency prop on ProcessTerminal
Crunchyman-ralph Apr 18, 2026
855c9d5
style: apply biome formatter to collapsed type import
Crunchyman-ralph Apr 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 13 additions & 8 deletions sdks/react/src/ProcessTerminal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,7 @@
import type { FitAddon as GhosttyFitAddon, Terminal as GhosttyTerminal } from "ghostty-web";
import type { CSSProperties } from "react";
import { useEffect, useRef, useState } from "react";
import type {
SandboxAgent,
TerminalErrorStatus,
TerminalExitStatus,
TerminalReadyStatus,
} from "sandbox-agent";
import type { SandboxAgent, TerminalErrorStatus, TerminalExitStatus, TerminalReadyStatus } from "sandbox-agent";

type ConnectionState = "connecting" | "ready" | "closed" | "error";

Expand All @@ -23,6 +18,15 @@ export interface ProcessTerminalProps {
statusBarStyleOverride?: CSSProperties;
height?: number | string;
showStatusBar?: boolean;
/**
* Forwarded to `ghostty.Terminal`. Defaults to `true`. Opt out with
* `false` to work around a canvas-rendering bug in ghostty-web@0.4.0
* where transparent-background rendering skips `clearRect` before
* `fillRect`, causing stale cells to accumulate on screen. Fix is
* merged upstream (coder/ghostty-web#116) but not yet released
* (coder/ghostty-web#137).
*/
allowTransparency?: boolean;
onExit?: (status: TerminalExitStatus) => void;
onError?: (error: TerminalErrorStatus | Error) => void;
}
Expand Down Expand Up @@ -106,6 +110,7 @@ export const ProcessTerminal = ({
statusBarStyleOverride,
height = 360,
showStatusBar = true,
allowTransparency = true,
onExit,
onError,
}: ProcessTerminalProps) => {
Expand Down Expand Up @@ -148,7 +153,7 @@ export const ProcessTerminal = ({
}

terminal = new ghostty.Terminal({
allowTransparency: true,
allowTransparency,
cursorBlink: true,
cursorStyle: "block",
fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace",
Expand Down Expand Up @@ -253,7 +258,7 @@ export const ProcessTerminal = ({
session?.close();
terminal?.dispose();
};
}, [client, onError, onExit, processId]);
}, [allowTransparency, client, onError, onExit, processId]);

return (
<div className={className} style={{ ...shellStyle, ...style }}>
Expand Down
Loading