May 30, 2025 · May 29, 2025 · May 30, 2025
diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
 HelpTooltipTitle,
 HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { Spinner } from "components/Spinner/Spinner";
 import {
 Tooltip,
 TooltipContent,
 TooltipProvider,
 TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { ExternalLinkIcon, Loader2Icon } from "lucide-react";
 import { ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { portForwardURL } from "utils/portForward";
 <header className="flex justify-between items-center mb-4">
 <div className="flex items-center gap-2">
 <h3 className="m-0 text-xs font-medium text-content-secondary">
 {container.name}
 dev container:{" "}
 <span className="font-semibold">{container.name}</span>
 </h3>
 {container.devcontainer_dirty && (
 <HelpTooltip>
 <Button
 variant="outline"
 size="sm"
 className="text-xs font-medium"
 onClick={handleRecreateDevcontainer}
 disabled={isRecreating}
 >
 {isRecreating ? (
 <>
 <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
 Recreating...
 </>
 ) : (
 "Recreate"
 )}
 <Spinner loading={isRecreating} />
 Recreate
 </Button>

 <AgentDevcontainerSSHButton
diff --git a/site/src/modules/resources/AgentRow.stories.tsx b/site/src/modules/resources/AgentRow.stories.tsx
 await userEvent.click(canvas.getByText("group"));
 },
 };

 export const Devcontainer: Story = {
 beforeEach: () => {
 spyOn(API, "getAgentContainers").mockResolvedValue({
 containers: [M.MockWorkspaceAgentContainer],
 });
 },
 };
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
 import type { Interpolation, Theme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
 import Divider from "@mui/material/Divider";
 import Skeleton from "@mui/material/Skeleton";
 WorkspaceApp,
 } from "api/typesGenerated";
 import { isAxiosError } from "axios";
 import { Button } from "components/Button/Button";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import {
 DropdownMenu,
 const appSections = organizeAgentApps(agent.apps);
 const hasAppsToDisplay =
 !browser_only || appSections.some((it) => it.apps.length > 0);
 constshouldDisplayApps =
 constshouldDisplayAgentApps =
 (agent.status === "connected" && hasAppsToDisplay) ||
 agent.status === "connecting";
 const hasVSCodeApp =
 },
 });

 // This is used to show the parent apps of the devcontainer.
 const [showParentApps, setShowParentApps] = useState(false);

 let shouldDisplayAppsSection = shouldDisplayAgentApps;
 if (containers && containers.length > 0 && !showParentApps) {
 shouldDisplayAppsSection = false;
 }

 return (
 <Stack
 key={agent.id}
 )}
 </div>

 <div css={{ display: "flex" }}>
 <div className="flex items-center gap-2">
 {containers && containers.length > 0 && (
 <Button
 variant="outline"
 size="sm"
 onClick={() => setShowParentApps((show) => !show)}
 >
 Show parent apps
 <DropdownArrow close={showParentApps} margin={false} />
 </Button>
 )}

 {!browser_only && agent.display_apps.includes("ssh_helper") && (
 <AgentSSHButton
 workspaceName={workspace.name}
 </section>
 )}

 {agent.status === "connected" && (
 {shouldDisplayAppsSection && (
 <section css={styles.apps}>
 {shouldDisplayApps && (
 {shouldDisplayAgentApps && (
 <>
 {showVSCode && (
 <VSCodeDesktopButton

 <Stack css={{ padding: "12px 16px" }} direction="row" spacing={1}>
 <Button
 variant="text"
 size="small"
 startIcon={<DropdownArrow close={showLogs} margin={false} />}
 size="sm"
 variant="subtle"
 onClick={() => setShowLogs((v) => !v)}
 >
 <DropdownArrow close={showLogs} margin={false} />
 Logs
 </Button>
 <Divider orientation="vertical" variant="middle" flexItem />
diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
 return (
 <Popover>
 <PopoverTrigger>
 <Button
 size="sm"
 variant="subtle"
 css={{ fontSize: 13, padding: "8px 12px" }}
 >
 <Button size="sm" variant="subtle">
 Connect via SSH
 <ChevronDownIconclassName="size-4 ml-2"/>
 <ChevronDownIcon />
 </Button>
 </PopoverTrigger>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,13 +12,14 @@ import {
		HelpTooltipTitle,
		HelpTooltipTrigger,
		} from "components/HelpTooltip/HelpTooltip";
		import { Spinner } from "components/Spinner/Spinner";
		import {
		Tooltip,
		TooltipContent,
		TooltipProvider,
		TooltipTrigger,
		} from "components/Tooltip/Tooltip";
		import { ExternalLinkIcon, Loader2Icon } from "lucide-react";
		import { ExternalLinkIcon } from "lucide-react";
		import type { FC } from "react";
		import { useEffect, useState } from "react";
		import { portForwardURL } from "utils/portForward";
Expand DownExpand Up		@@ -95,7 +96,8 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
		<header className="flex justify-between items-center mb-4">
		<div className="flex items-center gap-2">
		<h3 className="m-0 text-xs font-medium text-content-secondary">
		{container.name}
		dev container:{" "}
		<span className="font-semibold">{container.name}</span>
		</h3>
		{container.devcontainer_dirty && (
		<HelpTooltip>
Expand All		@@ -117,18 +119,11 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
		<Button
		variant="outline"
		size="sm"
		className="text-xs font-medium"
		onClick={handleRecreateDevcontainer}
		disabled={isRecreating}
		>
		{isRecreating ? (
		<>
		<Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
		Recreating...
		</>
		) : (
		"Recreate"
		)}
		<Spinner loading={isRecreating} />
		Recreate
		</Button>

		<AgentDevcontainerSSHButton
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -284,3 +284,11 @@ export const GroupApp: Story = {
		await userEvent.click(canvas.getByText("group"));
		},
		};

		export const Devcontainer: Story = {
		beforeEach: () => {
		spyOn(API, "getAgentContainers").mockResolvedValue({
		containers: [M.MockWorkspaceAgentContainer],
		});
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,4 @@
		import type { Interpolation, Theme } from "@emotion/react";
		import Button from "@mui/material/Button";
		import Collapse from "@mui/material/Collapse";
		import Divider from "@mui/material/Divider";
		import Skeleton from "@mui/material/Skeleton";
Expand All		@@ -12,6 +11,7 @@ import type {
		WorkspaceApp,
		} from "api/typesGenerated";
		import { isAxiosError } from "axios";
		import { Button } from "components/Button/Button";
		import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
		import {
		DropdownMenu,
Expand DownExpand Up		@@ -71,7 +71,7 @@ export const AgentRow: FC<AgentRowProps> = ({
		const appSections = organizeAgentApps(agent.apps);
		const hasAppsToDisplay =
		!browser_only \|\| appSections.some((it) => it.apps.length > 0);
		constshouldDisplayApps =
		constshouldDisplayAgentApps =
		(agent.status === "connected" && hasAppsToDisplay) \|\|
		agent.status === "connecting";
		const hasVSCodeApp =
Expand DownExpand Up		@@ -160,6 +160,14 @@ export const AgentRow: FC<AgentRowProps> = ({
		},
		});

		// This is used to show the parent apps of the devcontainer.
		const [showParentApps, setShowParentApps] = useState(false);

		let shouldDisplayAppsSection = shouldDisplayAgentApps;
		if (containers && containers.length > 0 && !showParentApps) {
		shouldDisplayAppsSection = false;
		}

		return (
		<Stack
		key={agent.id}
Expand DownExpand Up		@@ -191,7 +199,18 @@ export const AgentRow: FC<AgentRowProps> = ({
		)}
		</div>

		<div css={{ display: "flex" }}>
		<div className="flex items-center gap-2">
		{containers && containers.length > 0 && (
		<Button
		variant="outline"
		size="sm"
		onClick={() => setShowParentApps((show) => !show)}
		>
		Show parent apps
		<DropdownArrow close={showParentApps} margin={false} />
		</Button>
		)}

		{!browser_only && agent.display_apps.includes("ssh_helper") && (
		<AgentSSHButton
		workspaceName={workspace.name}
Expand All		@@ -218,9 +237,9 @@ export const AgentRow: FC<AgentRowProps> = ({
		</section>
		)}

		{agent.status === "connected" && (
		{shouldDisplayAppsSection && (
		<section css={styles.apps}>
		{shouldDisplayApps && (
		{shouldDisplayAgentApps && (
		<>
		{showVSCode && (
		<VSCodeDesktopButton
Expand DownExpand Up		@@ -319,11 +338,11 @@ export const AgentRow: FC<AgentRowProps> = ({

		<Stack css={{ padding: "12px 16px" }} direction="row" spacing={1}>
		<Button
		variant="text"
		size="small"
		startIcon={<DropdownArrow close={showLogs} margin={false} />}
		size="sm"
		variant="subtle"
		onClick={() => setShowLogs((v) => !v)}
		>
		<DropdownArrow close={showLogs} margin={false} />
		Logs
		</Button>
		<Divider orientation="vertical" variant="middle" flexItem />
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,13 +35,9 @@ export const AgentSSHButton: FC<AgentSSHButtonProps> = ({
		return (
		<Popover>
		<PopoverTrigger>
		<Button
		size="sm"
		variant="subtle"
		css={{ fontSize: 13, padding: "8px 12px" }}
		>
		<Button size="sm" variant="subtle">
		Connect via SSH
		<ChevronDownIconclassName="size-4 ml-2"/>
		<ChevronDownIcon />
		</Button>
		</PopoverTrigger>

Expand Down