@@ -13,6 +13,7 @@ import { WebLinksAddon } from "xterm-addon-web-links";
1313import { WebglAddon } from "xterm-addon-webgl" ;
1414import { deploymentConfig } from "api/queries/deployment" ;
1515import { workspaceByOwnerAndName } from "api/queries/workspaces" ;
16+ import type { WorkspaceAgent } from "api/typesGenerated" ;
1617import { useProxy } from "contexts/ProxyContext" ;
1718import { ThemeOverride } from "contexts/ThemeProvider" ;
1819import themes from "theme" ;
@@ -34,6 +35,8 @@ export const Language = {
3435websocketErrorMessagePrefix :"WebSocket failed: " ,
3536} ;
3637
38+ type TerminalState = "connected" | "disconnected" | "initializing" ;
39+
3740const TerminalPage :FC = ( ) => {
3841// Maybe one day we'll support a light themed terminal, but terminal coloring
3942// is notably a pain because of assumptions certain programs might make about your
@@ -45,9 +48,8 @@ const TerminalPage: FC = () => {
4548const username = params . username . replace ( "@" , "" ) ;
4649const xtermRef = useRef < HTMLDivElement > ( null ) ;
4750const [ terminal , setTerminal ] = useState < XTerm . Terminal | null > ( null ) ;
48- const [ terminalState , setTerminalState ] = useState <
49- "connected" | "disconnected" | "initializing"
50- > ( "initializing" ) ;
51+ const [ terminalState , setTerminalState ] =
52+ useState < TerminalState > ( "initializing" ) ;
5153const [ searchParams ] = useSearchParams ( ) ;
5254const isDebugging = searchParams . has ( "debug" ) ;
5355// The reconnection token is a unique token that identifies
@@ -67,12 +69,6 @@ const TerminalPage: FC = () => {
6769const selectedProxy = proxy . proxy ;
6870const latency = selectedProxy ?proxyLatencies [ selectedProxy . id ] :undefined ;
6971
70- const lifecycleState = workspaceAgent ?. lifecycle_state ;
71- const prevLifecycleState = useRef ( lifecycleState ) ;
72- useEffect ( ( ) => {
73- prevLifecycleState . current = lifecycleState ;
74- } , [ lifecycleState ] ) ;
75-
7672const config = useQuery ( deploymentConfig ( ) ) ;
7773const renderer = config . data ?. config . web_terminal_renderer ;
7874
@@ -95,6 +91,7 @@ const TerminalPage: FC = () => {
9591} , [ handleWebLink ] ) ;
9692
9793// Create the terminal!
94+ const fitAddonRef = useRef < FitAddon > ( ) ;
9895useEffect ( ( ) => {
9996if ( ! xtermRef . current || config . isLoading ) {
10097return ;
@@ -115,6 +112,7 @@ const TerminalPage: FC = () => {
115112terminal . loadAddon ( new CanvasAddon ( ) ) ;
116113}
117114const fitAddon = new FitAddon ( ) ;
115+ fitAddonRef . current = fitAddon ;
118116terminal . loadAddon ( fitAddon ) ;
119117terminal . loadAddon ( new Unicode11Addon ( ) ) ;
120118terminal . unicode . activeVersion = "11" ;
@@ -303,11 +301,13 @@ const TerminalPage: FC = () => {
303301</ title >
304302</ Helmet >
305303< div css = { { display :"flex" , flexDirection :"column" , height :"100vh" } } >
306- { lifecycleState === "start_error" && < ErrorScriptAlert /> }
307- { lifecycleState === "starting" && < LoadingScriptsAlert /> }
308- { lifecycleState === "ready" &&
309- prevLifecycleState . current === "starting" && < LoadedScriptsAlert /> }
310- { terminalState === "disconnected" && < DisconnectedAlert /> }
304+ < TerminalAlerts
305+ agent = { workspaceAgent }
306+ state = { terminalState }
307+ onAlertChange = { ( ) => {
308+ fitAddonRef . current ?. fit ( ) ;
309+ } }
310+ />
311311< div css = { styles . terminal } ref = { xtermRef } data-testid = "terminal" />
312312</ div >
313313
@@ -328,6 +328,62 @@ const TerminalPage: FC = () => {
328328) ;
329329} ;
330330
331+ type TerminalAlertsProps = {
332+ agent :WorkspaceAgent | undefined ;
333+ state :TerminalState ;
334+ onAlertChange :( ) => void ;
335+ } ;
336+
337+ const TerminalAlerts = ( {
338+ agent,
339+ state,
340+ onAlertChange,
341+ } :TerminalAlertsProps ) => {
342+ const lifecycleState = agent ?. lifecycle_state ;
343+ const prevLifecycleState = useRef ( lifecycleState ) ;
344+ useEffect ( ( ) => {
345+ prevLifecycleState . current = lifecycleState ;
346+ } , [ lifecycleState ] ) ;
347+
348+ // We want to observe the children of the wrapper to detect when the alert
349+ // changes. So the terminal page can resize itself.
350+ //
351+ // Would it be possible to just always call fit() when this component
352+ // re-renders instead of using an observer?
353+ //
354+ // This is a good question and the why this does not work is that the .fit()
355+ // needs to run after the render so in this case, I just think the mutation
356+ // observer is more reliable. I could use some hacky setTimeout inside of
357+ // useEffect to do that, I guess, but I don't think it would be any better.
358+ const wrapperRef = useRef < HTMLDivElement > ( null ) ;
359+ useEffect ( ( ) => {
360+ if ( ! wrapperRef . current ) {
361+ return ;
362+ }
363+ const observer = new MutationObserver ( onAlertChange ) ;
364+ observer . observe ( wrapperRef . current , { childList :true } ) ;
365+
366+ return ( ) => {
367+ observer . disconnect ( ) ;
368+ } ;
369+ } , [ onAlertChange ] ) ;
370+
371+ return (
372+ < div ref = { wrapperRef } >
373+ { state === "disconnected" ?(
374+ < DisconnectedAlert />
375+ ) :lifecycleState === "start_error" ?(
376+ < ErrorScriptAlert />
377+ ) :lifecycleState === "starting" ?(
378+ < LoadingScriptsAlert />
379+ ) :lifecycleState === "ready" &&
380+ prevLifecycleState . current === "starting" ?(
381+ < LoadedScriptsAlert />
382+ ) :null }
383+ </ div >
384+ ) ;
385+ } ;
386+
331387const styles = {
332388terminal :( theme ) => ( {
333389width :"100%" ,