From df1cc9509164e8df6d3f16f506a295ae855a9b79 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 3 Mar 2025 19:30:27 +0000
Subject: [PATCH 1/8] feat: display devcontainer in the UI

---
 site/src/api/api.ts                           |  8 +++
 .../resources/AgentDevcontainerCard.tsx       | 51 ++++++++++++++++
 site/src/modules/resources/AgentRow.tsx       | 27 ++++++++-
 .../resources/SSHButton/SSHButton.stories.tsx | 10 ++--
 .../modules/resources/SSHButton/SSHButton.tsx | 58 ++++++++++++++++++-
 5 files changed, 145 insertions(+), 9 deletions(-)
 create mode 100644 site/src/modules/resources/AgentDevcontainerCard.tsx

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index a1aeeca8a9e59..b61d0f988b341 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -2374,6 +2374,14 @@ class ApiMethods {
 				);
 		}
 	};
+
+	getAgentContainers = async (agentId: string) => {
+		const res =
+			await this.axios.get<TypesGen.WorkspaceAgentListContainersResponse>(
+				`/api/v2/workspaceagents/${agentId}/containers`,
+			);
+		return res.data;
+	};
 }
 
 // This is a hard coded CSRF token/cookie pair for local development. In prod,
diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
new file mode 100644
index 0000000000000..ecbaebf169e67
--- /dev/null
+++ b/site/src/modules/resources/AgentDevcontainerCard.tsx
@@ -0,0 +1,51 @@
+import Link from "@mui/material/Link";
+import type { WorkspaceAgentDevcontainer } from "api/typesGenerated";
+import type { FC } from "react";
+import { AgentButton } from "./AgentButton";
+import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton";
+
+type AgentDevcontainerCardProps = {
+	container: WorkspaceAgentDevcontainer;
+	workspace: string;
+};
+
+export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
+	container,
+	workspace,
+}) => {
+	return (
+		<section
+			className="border border-border border-dashed rounded p-6 "
+			key={container.id}
+		>
+			<header className="flex justify-between">
+				<h3 className="m-0 text-xs font-medium text-content-secondary">
+					{container.name}
+				</h3>
+
+				<AgentDevcontainerSSHButton
+					workspace={workspace}
+					container={container.name}
+				/>
+			</header>
+
+			<h4 className="m-0 text-xl font-semibold">Forwarded ports</h4>
+
+			<div className="flex gap-4 flex-wrap mt-4">
+				{container.ports.map((port) => {
+					return (
+						<Link
+							key={port.port}
+							color="inherit"
+							component={AgentButton}
+							underline="none"
+						>
+							{port.process_name ||
+								`${port.port}/${port.network.toUpperCase()}`}
+						</Link>
+					);
+				})}
+			</div>
+		</section>
+	);
+};
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index 9e5caed677ee1..2905f40b24bda 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -3,6 +3,7 @@ import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
 import Divider from "@mui/material/Divider";
 import Skeleton from "@mui/material/Skeleton";
+import { API } from "api/api";
 import { xrayScan } from "api/queries/integrations";
 import type {
 	Template,
@@ -25,6 +26,7 @@ import {
 import { useQuery } from "react-query";
 import AutoSizer from "react-virtualized-auto-sizer";
 import type { FixedSizeList as List, ListOnScrollProps } from "react-window";
+import { AgentDevcontainerCard } from "./AgentDevcontainerCard";
 import { AgentLatency } from "./AgentLatency";
 import { AGENT_LOG_LINE_HEIGHT } from "./AgentLogs/AgentLogLine";
 import { AgentLogs } from "./AgentLogs/AgentLogs";
@@ -35,7 +37,7 @@ import { AgentVersion } from "./AgentVersion";
 import { AppLink } from "./AppLink/AppLink";
 import { DownloadAgentLogsButton } from "./DownloadAgentLogsButton";
 import { PortForwardButton } from "./PortForwardButton";
-import { SSHButton } from "./SSHButton/SSHButton";
+import { AgentSSHButton } from "./SSHButton/SSHButton";
 import { TerminalLink } from "./TerminalLink/TerminalLink";
 import { VSCodeDesktopButton } from "./VSCodeDesktopButton/VSCodeDesktopButton";
 import { XRayScanAlert } from "./XRayScanAlert";
@@ -152,6 +154,13 @@ export const AgentRow: FC<AgentRowProps> = ({
 		setBottomOfLogs(distanceFromBottom < AGENT_LOG_LINE_HEIGHT);
 	}, []);
 
+	const { data: containers } = useQuery({
+		queryKey: ["agents", agent.id, "containers"],
+		queryFn: () => API.getAgentContainers(agent.id),
+		enabled: agent.status === "connected",
+		select: (res) => res.containers,
+	});
+
 	return (
 		<Stack
 			key={agent.id}
@@ -191,7 +200,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 				{showBuiltinApps && (
 					<div css={{ display: "flex" }}>
 						{!hideSSHButton && agent.display_apps.includes("ssh_helper") && (
-							<SSHButton
+							<AgentSSHButton
 								workspaceName={workspace.name}
 								agentName={agent.name}
 								sshPrefix={sshPrefix}
@@ -267,6 +276,20 @@ export const AgentRow: FC<AgentRowProps> = ({
 					</section>
 				)}
 
+				{containers && (
+					<section>
+						{containers.map((container) => {
+							return (
+								<AgentDevcontainerCard
+									key={container.id}
+									container={container}
+									workspace={workspace.name}
+								/>
+							);
+						})}
+					</section>
+				)}
+
 				<AgentMetadata
 					storybookMetadata={storybookAgentMetadata}
 					agent={agent}
diff --git a/site/src/modules/resources/SSHButton/SSHButton.stories.tsx b/site/src/modules/resources/SSHButton/SSHButton.stories.tsx
index 9dbd340a7ef1b..09e79dfdb611a 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.stories.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.stories.tsx
@@ -2,15 +2,15 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
 import { MockWorkspace, MockWorkspaceAgent } from "testHelpers/entities";
 import { withDesktopViewport } from "testHelpers/storybook";
-import { SSHButton } from "./SSHButton";
+import { AgentSSHButton } from "./SSHButton";
 
-const meta: Meta<typeof SSHButton> = {
-	title: "modules/resources/SSHButton",
-	component: SSHButton,
+const meta: Meta<typeof AgentSSHButton> = {
+	title: "modules/resources/AgentSSHButton",
+	component: AgentSSHButton,
 };
 
 export default meta;
-type Story = StoryObj<typeof SSHButton>;
+type Story = StoryObj<typeof AgentSSHButton>;
 
 export const Closed: Story = {
 	args: {
diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index 3d94b33375c0b..3328534d6a2fd 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -17,13 +17,13 @@ import { type ClassName, useClassName } from "hooks/useClassName";
 import type { FC } from "react";
 import { docs } from "utils/docs";
 
-export interface SSHButtonProps {
+export interface AgentSSHButtonProps {
 	workspaceName: string;
 	agentName: string;
 	sshPrefix?: string;
 }
 
-export const SSHButton: FC<SSHButtonProps> = ({
+export const AgentSSHButton: FC<AgentSSHButtonProps> = ({
 	workspaceName,
 	agentName,
 	sshPrefix,
@@ -82,6 +82,60 @@ export const SSHButton: FC<SSHButtonProps> = ({
 	);
 };
 
+export interface AgentDevcontainerSSHButtonProps {
+	workspace: string;
+	container: string;
+}
+
+export const AgentDevcontainerSSHButton: FC<
+	AgentDevcontainerSSHButtonProps
+> = ({ workspace, container }) => {
+	const paper = useClassName(classNames.paper, []);
+
+	return (
+		<Popover>
+			<PopoverTrigger>
+				<Button
+					size="small"
+					variant="text"
+					endIcon={<KeyboardArrowDown />}
+					css={{ fontSize: 13, padding: "8px 12px" }}
+				>
+					Connect via SSH
+				</Button>
+			</PopoverTrigger>
+
+			<PopoverContent horizontal="right" classes={{ paper }}>
+				<HelpTooltipText>
+					Run the following commands to connect with SSH:
+				</HelpTooltipText>
+
+				<ol style={{ margin: 0, padding: 0 }}>
+					<Stack spacing={0.5} css={styles.codeExamples}>
+						<SSHStep
+							helpText="Configure SSH hosts on machine:"
+							codeExample="coder config-ssh"
+						/>
+						<SSHStep
+							helpText="Connect to the agent:"
+							codeExample={`ssh ${workspace} -c ${container}`}
+						/>
+					</Stack>
+				</ol>
+
+				<HelpTooltipLinksGroup>
+					<HelpTooltipLink href={docs("/install")}>
+						Install Coder CLI
+					</HelpTooltipLink>
+					<HelpTooltipLink href={docs("/user-guides/workspace-access#ssh")}>
+						SSH configuration
+					</HelpTooltipLink>
+				</HelpTooltipLinksGroup>
+			</PopoverContent>
+		</Popover>
+	);
+};
+
 interface SSHStepProps {
 	helpText: string;
 	codeExample: string;

From 3da58742634acc1ca39da9ddbc0b999d7a75a87d Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 3 Mar 2025 19:39:49 +0000
Subject: [PATCH 2/8] Make UI prettuer

---
 site/src/modules/resources/AgentDevcontainerCard.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
index ecbaebf169e67..5aacbdb3fe69f 100644
--- a/site/src/modules/resources/AgentDevcontainerCard.tsx
+++ b/site/src/modules/resources/AgentDevcontainerCard.tsx
@@ -3,6 +3,8 @@ import type { WorkspaceAgentDevcontainer } from "api/typesGenerated";
 import type { FC } from "react";
 import { AgentButton } from "./AgentButton";
 import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton";
+import { ExternalLinkIcon } from "lucide-react";
+import { TerminalLink } from "./TerminalLink/TerminalLink";
 
 type AgentDevcontainerCardProps = {
 	container: WorkspaceAgentDevcontainer;
@@ -32,6 +34,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 			<h4 className="m-0 text-xl font-semibold">Forwarded ports</h4>
 
 			<div className="flex gap-4 flex-wrap mt-4">
+				<TerminalLink workspaceName={workspace} />
 				{container.ports.map((port) => {
 					return (
 						<Link
@@ -39,6 +42,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 							color="inherit"
 							component={AgentButton}
 							underline="none"
+							startIcon={<ExternalLinkIcon className="size-icon-sm" />}
 						>
 							{port.process_name ||
 								`${port.port}/${port.network.toUpperCase()}`}

From 9ad346e7764092dbe78ddf8d143feede24ba0014 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 3 Mar 2025 19:40:04 +0000
Subject: [PATCH 3/8] Fmt

---
 site/src/modules/resources/AgentDevcontainerCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
index 5aacbdb3fe69f..d9f941de39ee3 100644
--- a/site/src/modules/resources/AgentDevcontainerCard.tsx
+++ b/site/src/modules/resources/AgentDevcontainerCard.tsx
@@ -1,9 +1,9 @@
 import Link from "@mui/material/Link";
 import type { WorkspaceAgentDevcontainer } from "api/typesGenerated";
+import { ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
 import { AgentButton } from "./AgentButton";
 import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton";
-import { ExternalLinkIcon } from "lucide-react";
 import { TerminalLink } from "./TerminalLink/TerminalLink";
 
 type AgentDevcontainerCardProps = {

From 8b9119a0a89e6e5193828e99ef45aae20bd88899 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 4 Mar 2025 13:52:51 +0000
Subject: [PATCH 4/8] fix terminal and devcontainer links

---
 .../resources/AgentDevcontainerCard.tsx       | 26 ++++++++++++++++---
 site/src/modules/resources/AgentRow.tsx       |  4 ++-
 .../resources/TerminalLink/TerminalLink.tsx   | 14 +++++++---
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
index d9f941de39ee3..642815e9f7685 100644
--- a/site/src/modules/resources/AgentDevcontainerCard.tsx
+++ b/site/src/modules/resources/AgentDevcontainerCard.tsx
@@ -1,19 +1,24 @@
 import Link from "@mui/material/Link";
-import type { WorkspaceAgentDevcontainer } from "api/typesGenerated";
+import type { Workspace, WorkspaceAgentDevcontainer } from "api/typesGenerated";
 import { ExternalLinkIcon } from "lucide-react";
 import type { FC } from "react";
+import { portForwardURL } from "utils/portForward";
 import { AgentButton } from "./AgentButton";
 import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton";
 import { TerminalLink } from "./TerminalLink/TerminalLink";
 
 type AgentDevcontainerCardProps = {
 	container: WorkspaceAgentDevcontainer;
-	workspace: string;
+	workspace: Workspace;
+	host: string;
+	agentName: string;
 };
 
 export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 	container,
 	workspace,
+	agentName,
+	host,
 }) => {
 	return (
 		<section
@@ -26,7 +31,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 				</h3>
 
 				<AgentDevcontainerSSHButton
-					workspace={workspace}
+					workspace={workspace.name}
 					container={container.name}
 				/>
 			</header>
@@ -34,7 +39,12 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 			<h4 className="m-0 text-xl font-semibold">Forwarded ports</h4>
 
 			<div className="flex gap-4 flex-wrap mt-4">
-				<TerminalLink workspaceName={workspace} />
+				<TerminalLink
+					workspaceName={workspace.name}
+					agentName={agentName}
+					containerName={container.name}
+					userName={workspace.owner_name}
+				/>
 				{container.ports.map((port) => {
 					return (
 						<Link
@@ -43,6 +53,14 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 							component={AgentButton}
 							underline="none"
 							startIcon={<ExternalLinkIcon className="size-icon-sm" />}
+							href={portForwardURL(
+								host,
+								port.port,
+								agentName,
+								workspace.name,
+								workspace.owner_name,
+								location.protocol === "https" ? "https" : "http",
+							)}
 						>
 							{port.process_name ||
 								`${port.port}/${port.network.toUpperCase()}`}
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index 2905f40b24bda..8d934f5a802b9 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -283,7 +283,9 @@ export const AgentRow: FC<AgentRowProps> = ({
 								<AgentDevcontainerCard
 									key={container.id}
 									container={container}
-									workspace={workspace.name}
+									workspace={workspace}
+									host={proxy.preferredWildcardHostname}
+									agentName={agent.name}
 								/>
 							);
 						})}
diff --git a/site/src/modules/resources/TerminalLink/TerminalLink.tsx b/site/src/modules/resources/TerminalLink/TerminalLink.tsx
index 4d709dc482e70..f7a07131e4cd0 100644
--- a/site/src/modules/resources/TerminalLink/TerminalLink.tsx
+++ b/site/src/modules/resources/TerminalLink/TerminalLink.tsx
@@ -11,9 +11,10 @@ export const Language = {
 };
 
 export interface TerminalLinkProps {
-	agentName?: TypesGen.WorkspaceAgent["name"];
-	userName?: TypesGen.User["username"];
-	workspaceName: TypesGen.Workspace["name"];
+	workspaceName: string;
+	agentName?: string;
+	userName?: string;
+	containerName?: string;
 }
 
 /**
@@ -27,11 +28,16 @@ export const TerminalLink: FC<TerminalLinkProps> = ({
 	agentName,
 	userName = "me",
 	workspaceName,
+	containerName,
 }) => {
+	const params = new URLSearchParams();
+	if (containerName) {
+		params.append("container", containerName);
+	}
 	// Always use the primary for the terminal link. This is a relative link.
 	const href = `/@${userName}/${workspaceName}${
 		agentName ? `.${agentName}` : ""
-	}/terminal`;
+	}/terminal?${params.toString()}`;
 
 	return (
 		<Link

From e9a430863ec919115695ce43debb9e91ab9041b3 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 4 Mar 2025 10:58:52 -0300
Subject: [PATCH 5/8] Apply suggestions from code review

Co-authored-by: Cian Johnston <cian@coder.com>
---
 site/src/modules/resources/SSHButton/SSHButton.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index 3328534d6a2fd..d5351a3ff5466 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -113,12 +113,8 @@ export const AgentDevcontainerSSHButton: FC<
 				<ol style={{ margin: 0, padding: 0 }}>
 					<Stack spacing={0.5} css={styles.codeExamples}>
 						<SSHStep
-							helpText="Configure SSH hosts on machine:"
-							codeExample="coder config-ssh"
-						/>
-						<SSHStep
-							helpText="Connect to the agent:"
-							codeExample={`ssh ${workspace} -c ${container}`}
+							helpText="Connect to the container:"
+							codeExample={`coder ssh ${workspace} -c ${container}`}
 						/>
 					</Stack>
 				</ol>

From 6edc3d0f7f0b7d9a0acecb6ccfaa28f3ee713698 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 4 Mar 2025 14:52:36 +0000
Subject: [PATCH 6/8] Apply Cian's suggestions

---
 site/src/api/api.ts                     |  8 ++++++--
 site/src/modules/resources/AgentRow.tsx | 11 ++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index b61d0f988b341..ede6f90a0133b 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -2375,10 +2375,14 @@ class ApiMethods {
 		}
 	};
 
-	getAgentContainers = async (agentId: string) => {
+	getAgentContainers = async (agentId: string, labels?: string[]) => {
+		const params = new URLSearchParams(
+			labels?.map((label) => ["label", label]),
+		);
+
 		const res =
 			await this.axios.get<TypesGen.WorkspaceAgentListContainersResponse>(
-				`/api/v2/workspaceagents/${agentId}/containers`,
+				`/api/v2/workspaceagents/${agentId}/containers?${params.toString()}`,
 			);
 		return res.data;
 	};
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index 8d934f5a802b9..c770d1b265733 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -156,7 +156,12 @@ export const AgentRow: FC<AgentRowProps> = ({
 
 	const { data: containers } = useQuery({
 		queryKey: ["agents", agent.id, "containers"],
-		queryFn: () => API.getAgentContainers(agent.id),
+		queryFn: () =>
+			// Only return devcontainers
+			API.getAgentContainers(agent.id, [
+				"devcontainer.config_file=",
+				"devcontainer.local_folder=",
+			]),
 		enabled: agent.status === "connected",
 		select: (res) => res.containers,
 	});
@@ -210,7 +215,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 							proxy.preferredWildcardHostname !== "" &&
 							agent.display_apps.includes("port_forwarding_helper") && (
 								<PortForwardButton
-									host={proxy.preferredWildcardHostname}
+									host={proxy.preferredWildcardHostname || window.location.host}
 									workspaceName={workspace.name}
 									agent={agent}
 									username={workspace.owner_name}
@@ -284,7 +289,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 									key={container.id}
 									container={container}
 									workspace={workspace}
-									host={proxy.preferredWildcardHostname}
+									host={proxy.preferredWildcardHostname || window.location.host}
 									agentName={agent.name}
 								/>
 							);

From b6a36e37767b74f2e674d57ff4a49ebbb6a38459 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 4 Mar 2025 17:00:16 +0000
Subject: [PATCH 7/8] Only show running containers

---
 site/src/modules/resources/AgentRow.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index c770d1b265733..e5b0a320c3ce7 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -163,7 +163,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 				"devcontainer.local_folder=",
 			]),
 		enabled: agent.status === "connected",
-		select: (res) => res.containers,
+		select: (res) => res.containers.filter((c) => c.status === "running"),
 	});
 
 	return (
@@ -215,7 +215,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 							proxy.preferredWildcardHostname !== "" &&
 							agent.display_apps.includes("port_forwarding_helper") && (
 								<PortForwardButton
-									host={proxy.preferredWildcardHostname || window.location.host}
+									host={proxy.preferredWildcardHostname}
 									workspaceName={workspace.name}
 									agent={agent}
 									username={workspace.owner_name}
@@ -281,8 +281,8 @@ export const AgentRow: FC<AgentRowProps> = ({
 					</section>
 				)}
 
-				{containers && (
-					<section>
+				{containers && containers.length > 0 && (
+					<section className="flex flex-col gap-4">
 						{containers.map((container) => {
 							return (
 								<AgentDevcontainerCard

From 4d30be37bc306cd65b859daead88c95c8347e8aa Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 4 Mar 2025 17:19:32 +0000
Subject: [PATCH 8/8] Portforward only can be show if wildcardHostname is set

---
 .../resources/AgentDevcontainerCard.tsx       | 49 ++++++++++---------
 site/src/modules/resources/AgentRow.tsx       |  5 +-
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
index 642815e9f7685..fc58c21f95bcb 100644
--- a/site/src/modules/resources/AgentDevcontainerCard.tsx
+++ b/site/src/modules/resources/AgentDevcontainerCard.tsx
@@ -10,7 +10,7 @@ import { TerminalLink } from "./TerminalLink/TerminalLink";
 type AgentDevcontainerCardProps = {
 	container: WorkspaceAgentDevcontainer;
 	workspace: Workspace;
-	host: string;
+	wildcardHostname: string;
 	agentName: string;
 };
 
@@ -18,7 +18,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 	container,
 	workspace,
 	agentName,
-	host,
+	wildcardHostname,
 }) => {
 	return (
 		<section
@@ -45,28 +45,29 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 					containerName={container.name}
 					userName={workspace.owner_name}
 				/>
-				{container.ports.map((port) => {
-					return (
-						<Link
-							key={port.port}
-							color="inherit"
-							component={AgentButton}
-							underline="none"
-							startIcon={<ExternalLinkIcon className="size-icon-sm" />}
-							href={portForwardURL(
-								host,
-								port.port,
-								agentName,
-								workspace.name,
-								workspace.owner_name,
-								location.protocol === "https" ? "https" : "http",
-							)}
-						>
-							{port.process_name ||
-								`${port.port}/${port.network.toUpperCase()}`}
-						</Link>
-					);
-				})}
+				{wildcardHostname !== "" &&
+					container.ports.map((port) => {
+						return (
+							<Link
+								key={port.port}
+								color="inherit"
+								component={AgentButton}
+								underline="none"
+								startIcon={<ExternalLinkIcon className="size-icon-sm" />}
+								href={portForwardURL(
+									wildcardHostname,
+									port.port,
+									agentName,
+									workspace.name,
+									workspace.owner_name,
+									location.protocol === "https" ? "https" : "http",
+								)}
+							>
+								{port.process_name ||
+									`${port.port}/${port.network.toUpperCase()}`}
+							</Link>
+						);
+					})}
 			</div>
 		</section>
 	);
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index e5b0a320c3ce7..1b9761f28ea40 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -211,8 +211,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 								sshPrefix={sshPrefix}
 							/>
 						)}
-						{proxy.preferredWildcardHostname &&
-							proxy.preferredWildcardHostname !== "" &&
+						{proxy.preferredWildcardHostname !== "" &&
 							agent.display_apps.includes("port_forwarding_helper") && (
 								<PortForwardButton
 									host={proxy.preferredWildcardHostname}
@@ -289,7 +288,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 									key={container.id}
 									container={container}
 									workspace={workspace}
-									host={proxy.preferredWildcardHostname || window.location.host}
+									wildcardHostname={proxy.preferredWildcardHostname}
 									agentName={agent.name}
 								/>
 							);

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16800.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16800.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16800.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16800.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>