Mar 4, 2025 · Mar 3, 2025 · Mar 3, 2025 · Mar 3, 2025 · Mar 4, 2025 · Mar 4, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 );
 }
 };

 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?${params.toString()}`,
 );
 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
 import Link from "@mui/material/Link";
 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: Workspace;
 wildcardHostname: string;
 agentName: string;
 };

 export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 container,
 workspace,
 agentName,
 wildcardHostname,
 }) => {
 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.name}
 container={container.name}
 />
 </header>

 <h4 className="m-0 text-xl font-semibold">Forwarded ports</h4>

 <div className="flex gap-4 flex-wrap mt-4">
 <TerminalLink
 workspaceName={workspace.name}
 agentName={agentName}
 containerName={container.name}
 userName={workspace.owner_name}
 />
 {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
 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,
 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";
 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";
 setBottomOfLogs(distanceFromBottom < AGENT_LOG_LINE_HEIGHT);
 }, []);

 const { data: containers } = useQuery({
 queryKey: ["agents", agent.id, "containers"],
 queryFn: () =>
 // Only return devcontainers
 API.getAgentContainers(agent.id, [
 "devcontainer.config_file=",
 "devcontainer.local_folder=",
 ]),
 enabled: agent.status === "connected",
 select: (res) => res.containers.filter((c) => c.status === "running"),
 });

 return (
 <Stack
 key={agent.id}
 {showBuiltinApps && (
 <div css={{ display: "flex" }}>
 {!hideSSHButton && agent.display_apps.includes("ssh_helper") && (
 <SSHButton
 <AgentSSHButton
 workspaceName={workspace.name}
 agentName={agent.name}
 sshPrefix={sshPrefix}
 />
 )}
 {proxy.preferredWildcardHostname &&
 proxy.preferredWildcardHostname !== "" &&
 {proxy.preferredWildcardHostname !== "" &&
 agent.display_apps.includes("port_forwarding_helper") && (
 <PortForwardButton
 host={proxy.preferredWildcardHostname}
 </section>
 )}

 {containers && containers.length > 0 && (
 <section className="flex flex-col gap-4">
 {containers.map((container) => {
 return (
 <AgentDevcontainerCard
 key={container.id}
 container={container}
 workspace={workspace}
 wildcardHostname={proxy.preferredWildcardHostname}
 agentName={agent.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
 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<typeofSSHButton> = {
 title: "modules/resources/SSHButton",
 component:SSHButton,
 const meta: Meta<typeofAgentSSHButton> = {
 title: "modules/resources/AgentSSHButton",
 component:AgentSSHButton,
 };

 export default meta;
 type Story = StoryObj<typeofSSHButton>;
 type Story = StoryObj<typeofAgentSSHButton>;

 export const Closed: Story = {
 args: {
diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
 import type { FC } from "react";
 import { docs } from "utils/docs";

 export interfaceSSHButtonProps {
 export interfaceAgentSSHButtonProps {
 workspaceName: string;
 agentName: string;
 sshPrefix?: string;
 }

 export constSSHButton: FC<SSHButtonProps> = ({
 export constAgentSSHButton: FC<AgentSSHButtonProps> = ({
 workspaceName,
 agentName,
 sshPrefix,
 );
 };

 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="Connect to the container:"
 codeExample={`coder 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;
diff --git a/site/src/modules/resources/TerminalLink/TerminalLink.tsx b/site/src/modules/resources/TerminalLink/TerminalLink.tsx
 };

 export interface TerminalLinkProps {
 agentName?: TypesGen.WorkspaceAgent["name"];
 userName?: TypesGen.User["username"];
 workspaceName: TypesGen.Workspace["name"];
 workspaceName: string;
 agentName?: string;
 userName?: string;
 containerName?: string;
 }

 /**
 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
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2374,6 +2374,18 @@ class ApiMethods {
		);
		}
		};

		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?${params.toString()}`,
		);
		return res.data;
		};
		}

		// This is a hard coded CSRF token/cookie pair for local development. In prod,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,74 @@
		import Link from "@mui/material/Link";
		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: Workspace;
		wildcardHostname: string;
		agentName: string;
		};

		export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
		container,
		workspace,
		agentName,
		wildcardHostname,
		}) => {
		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.name}
		container={container.name}
		/>
		</header>

		<h4 className="m-0 text-xl font-semibold">Forwarded ports</h4>
Copy link Member johnstcnMar 4, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. What do you think about removing this? Copy link CollaboratorAuthor BrunoQuaresmaMar 4, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I personally like that. I would think on removing it later on when we have more things to display on the screen. Copy link Member johnstcnMar 4, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Maybe it could be a little smaller? This is just a nit though, and I'm totally fine with leaving it as-is.

		<div className="flex gap-4 flex-wrap mt-4">
		<TerminalLink
		workspaceName={workspace.name}
		agentName={agentName}
		containerName={container.name}
		userName={workspace.owner_name}
		/>
		{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>
		);
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
Expand All		@@ -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";
Expand All		@@ -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";
Expand DownExpand Up		@@ -152,6 +154,18 @@ export const AgentRow: FC<AgentRowProps> = ({
		setBottomOfLogs(distanceFromBottom < AGENT_LOG_LINE_HEIGHT);
		}, []);

		const { data: containers } = useQuery({
		queryKey: ["agents", agent.id, "containers"],
		queryFn: () =>
		// Only return devcontainers
		API.getAgentContainers(agent.id, [
		"devcontainer.config_file=",
		"devcontainer.local_folder=",
		]),
		enabled: agent.status === "connected",
		select: (res) => res.containers.filter((c) => c.status === "running"),
		});

		return (
		<Stack
		key={agent.id}
Expand DownExpand Up		@@ -191,14 +205,13 @@ 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}
		/>
		)}
		{proxy.preferredWildcardHostname &&
		proxy.preferredWildcardHostname !== "" &&
		{proxy.preferredWildcardHostname !== "" &&
		agent.display_apps.includes("port_forwarding_helper") && (
		<PortForwardButton
		host={proxy.preferredWildcardHostname}
Expand DownExpand Up		@@ -267,6 +280,22 @@ export const AgentRow: FC<AgentRowProps> = ({
		</section>
		)}

		{containers && containers.length > 0 && (
		<section className="flex flex-col gap-4">
		{containers.map((container) => {
		return (
		<AgentDevcontainerCard
		key={container.id}
		container={container}
		workspace={workspace}
		wildcardHostname={proxy.preferredWildcardHostname}
		agentName={agent.name}
		/>
		);
		})}
		</section>
		)}

		<AgentMetadata
		storybookMetadata={storybookAgentMetadata}
		agent={agent}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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<typeofSSHButton> = {
		title: "modules/resources/SSHButton",
		component:SSHButton,
		const meta: Meta<typeofAgentSSHButton> = {
		title: "modules/resources/AgentSSHButton",
		component:AgentSSHButton,
		};

		export default meta;
		type Story = StoryObj<typeofSSHButton>;
		type Story = StoryObj<typeofAgentSSHButton>;

		export const Closed: Story = {
		args: {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,13 +17,13 @@ import { type ClassName, useClassName } from "hooks/useClassName";
		import type { FC } from "react";
		import { docs } from "utils/docs";

		export interfaceSSHButtonProps {
		export interfaceAgentSSHButtonProps {
		workspaceName: string;
		agentName: string;
		sshPrefix?: string;
		}

		export constSSHButton: FC<SSHButtonProps> = ({
		export constAgentSSHButton: FC<AgentSSHButtonProps> = ({
		workspaceName,
		agentName,
		sshPrefix,
Expand DownExpand Up		@@ -82,6 +82,56 @@ 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="Connect to the container:"
		codeExample={`coder 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;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
		}

		/**
Expand All		@@ -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
Expand Down