From beae4de2e45783473327093a2e33a4232d5b2b74 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 29 May 2025 23:19:06 +0000
Subject: [PATCH 1/2] feat: hide parent apps on devcontainer agents

---
 .../modules/resources/AgentRow.stories.tsx    |  8 +++++
 site/src/modules/resources/AgentRow.tsx       | 35 ++++++++++++++-----
 .../modules/resources/SSHButton/SSHButton.tsx |  8 ++---
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/site/src/modules/resources/AgentRow.stories.tsx b/site/src/modules/resources/AgentRow.stories.tsx
index 4444dbbac1c77..afeb95d0d2177 100644
--- a/site/src/modules/resources/AgentRow.stories.tsx
+++ b/site/src/modules/resources/AgentRow.stories.tsx
@@ -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],
+		});
+	},
+};
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index 407c8c1bd84c6..7fe6663e552aa 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -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";
@@ -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,
@@ -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);
-	const shouldDisplayApps =
+	const shouldDisplayAgentApps =
 		(agent.status === "connected" && hasAppsToDisplay) ||
 		agent.status === "connecting";
 	const hasVSCodeApp =
@@ -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);
+
+	const shouldDisplayAppsSection =
+		agent.status === "connected" &&
+		containers &&
+		(containers.length > 0 ? showParentApps : true);
+
 	return (
 		<Stack
 			key={agent.id}
@@ -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}
@@ -218,9 +237,9 @@ export const AgentRow: FC<AgentRowProps> = ({
 					</section>
 				)}
 
-				{agent.status === "connected" && (
+				{shouldDisplayAppsSection && (
 					<section css={styles.apps}>
-						{shouldDisplayApps && (
+						{shouldDisplayAgentApps && (
 							<>
 								{showVSCode && (
 									<VSCodeDesktopButton
@@ -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 />
diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index b1e5163207167..cd8f415f791fb 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -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
-					<ChevronDownIcon className="size-4 ml-2" />
+					<ChevronDownIcon />
 				</Button>
 			</PopoverTrigger>
 

From a0291df280bbc5a0f90612b980087ce5ebc68ded Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 30 May 2025 12:36:59 +0000
Subject: [PATCH 2/2] Fix stories and add prefix devcontainer

---
 .../modules/resources/AgentDevcontainerCard.tsx | 17 ++++++-----------
 site/src/modules/resources/AgentRow.tsx         |  8 ++++----
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
index 4891c632bbc2a..65b32593c1418 100644
--- a/site/src/modules/resources/AgentDevcontainerCard.tsx
+++ b/site/src/modules/resources/AgentDevcontainerCard.tsx
@@ -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";
@@ -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>
@@ -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
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index 7fe6663e552aa..d9fa0663423b4 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -163,10 +163,10 @@ export const AgentRow: FC<AgentRowProps> = ({
 	// This is used to show the parent apps of the devcontainer.
 	const [showParentApps, setShowParentApps] = useState(false);
 
-	const shouldDisplayAppsSection =
-		agent.status === "connected" &&
-		containers &&
-		(containers.length > 0 ? showParentApps : true);
+	let shouldDisplayAppsSection = shouldDisplayAgentApps;
+	if (containers && containers.length > 0 && !showParentApps) {
+		shouldDisplayAppsSection = false;
+	}
 
 	return (
 		<Stack