@@ -220,99 +220,102 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
220220</ div >
221221</ header >
222222
223- < div css = { styles . content } >
224- { subAgent && workspace . latest_app_status ?. agent_id === subAgent . id && (
225- < section >
226- < h3 className = "sr-only" > App statuses</ h3 >
227- < AppStatuses workspace = { workspace } agent = { subAgent } />
228- </ section >
229- ) }
230-
231- { showSubAgentApps && (
232- < section css = { styles . apps } >
233- < >
234- { showVSCode && (
235- < VSCodeDevContainerButton
236- userName = { workspace . owner_name }
223+ { ( showSubAgentApps || showSubAgentAppsPlaceholders ) && (
224+ < div css = { styles . content } >
225+ { subAgent &&
226+ workspace . latest_app_status ?. agent_id === subAgent . id && (
227+ < section >
228+ < h3 className = "sr-only" > App statuses</ h3 >
229+ < AppStatuses workspace = { workspace } agent = { subAgent } />
230+ </ section >
231+ ) }
232+
233+ { showSubAgentApps && (
234+ < section css = { styles . apps } >
235+ < >
236+ { showVSCode && (
237+ < VSCodeDevContainerButton
238+ userName = { workspace . owner_name }
239+ workspaceName = { workspace . name }
240+ devContainerName = { devcontainer . container . name }
241+ devContainerFolder = { subAgent ?. directory ?? "" }
242+ displayApps = { displayApps } // TODO(mafredri): We could use subAgent display apps here but we currently set none.
243+ agentName = { parentAgent . name }
244+ />
245+ ) }
246+ { appSections . map ( ( section , i ) => (
247+ < Apps
248+ key = { section . group ?? i }
249+ section = { section }
250+ agent = { subAgent }
251+ workspace = { workspace }
252+ />
253+ ) ) }
254+ </ >
255+
256+ { displayApps . includes ( "web_terminal" ) && (
257+ < TerminalLink
237258workspaceName = { workspace . name }
238- devContainerName = { devcontainer . container . name }
239- devContainerFolder = { subAgent ?. directory ?? "" }
240- displayApps = { displayApps } // TODO(mafredri): We could use subAgent display apps here but we currently set none.
241- agentName = { parentAgent . name }
259+ agentName = { subAgent . name }
260+ userName = { workspace . owner_name }
242261/>
243262) }
244- { appSections . map ( ( section , i ) => (
245- < Apps
246- key = { section . group ?? i }
247- section = { section }
248- agent = { subAgent }
249- workspace = { workspace }
250- />
251- ) ) }
252- </ >
253263
254- { displayApps . includes ( "web_terminal" ) && (
255- < TerminalLink
256- workspaceName = { workspace . name }
257- agentName = { subAgent . name }
258- userName = { workspace . owner_name }
259- />
260- ) }
264+ { wildcardHostname !== "" &&
265+ devcontainer . container ?. ports . map ( ( port ) => {
266+ const portLabel = `${ port . port } /${ port . network . toUpperCase ( ) } ` ;
267+ const hasHostBind =
268+ port . host_port !== undefined && port . host_ip !== undefined ;
269+ const helperText = hasHostBind
270+ ?`${ port . host_ip } :${ port . host_port } `
271+ :"Not bound to host" ;
272+ const linkDest = hasHostBind
273+ ?portForwardURL (
274+ wildcardHostname ,
275+ port . host_port ,
276+ subAgent . name ,
277+ workspace . name ,
278+ workspace . owner_name ,
279+ location . protocol === "https" ?"https" :"http" ,
280+ )
281+ :"" ;
282+ return (
283+ < TooltipProvider key = { portLabel } >
284+ < Tooltip >
285+ < TooltipTrigger asChild >
286+ < AgentButton disabled = { ! hasHostBind } asChild >
287+ < a href = { linkDest } >
288+ < ExternalLinkIcon />
289+ { portLabel }
290+ </ a >
291+ </ AgentButton >
292+ </ TooltipTrigger >
293+ < TooltipContent > { helperText } </ TooltipContent >
294+ </ Tooltip >
295+ </ TooltipProvider >
296+ ) ;
297+ } ) }
298+ </ section >
299+ ) }
261300
262- { wildcardHostname !== "" &&
263- devcontainer . container ?. ports . map ( ( port ) => {
264- const portLabel = `${ port . port } /${ port . network . toUpperCase ( ) } ` ;
265- const hasHostBind =
266- port . host_port !== undefined && port . host_ip !== undefined ;
267- const helperText = hasHostBind
268- ?`${ port . host_ip } :${ port . host_port } `
269- :"Not bound to host" ;
270- const linkDest = hasHostBind
271- ?portForwardURL (
272- wildcardHostname ,
273- port . host_port ,
274- subAgent . name ,
275- workspace . name ,
276- workspace . owner_name ,
277- location . protocol === "https" ?"https" :"http" ,
278- )
279- :"" ;
280- return (
281- < TooltipProvider key = { portLabel } >
282- < Tooltip >
283- < TooltipTrigger asChild >
284- < AgentButton disabled = { ! hasHostBind } asChild >
285- < a href = { linkDest } >
286- < ExternalLinkIcon />
287- { portLabel }
288- </ a >
289- </ AgentButton >
290- </ TooltipTrigger >
291- < TooltipContent > { helperText } </ TooltipContent >
292- </ Tooltip >
293- </ TooltipProvider >
294- ) ;
295- } ) }
296- </ section >
297- ) }
298-
299- { showSubAgentAppsPlaceholders && (
300- < section css = { styles . apps } >
301- < Skeleton
302- width = { 80 }
303- height = { 32 }
304- variant = "rectangular"
305- css = { styles . buttonSkeleton }
306- />
307- < Skeleton
308- width = { 110 }
309- height = { 32 }
310- variant = "rectangular"
311- css = { styles . buttonSkeleton }
312- />
313- </ section >
314- ) }
315- </ div >
301+ { showSubAgentAppsPlaceholders && (
302+ < section css = { styles . apps } >
303+ < Skeleton
304+ width = { 80 }
305+ height = { 32 }
306+ variant = "rectangular"
307+ css = { styles . buttonSkeleton }
308+ />
309+ < Skeleton
310+ width = { 110 }
311+ height = { 32 }
312+ variant = "rectangular"
313+ css = { styles . buttonSkeleton }
314+ />
315+ </ section >
316+ ) }
317+ </ div >
318+ ) }
316319</ Stack >
317320) ;
318321} ;