Jun 17, 2025 · Jun 10, 2025 · Jun 10, 2025 · Jun 10, 2025 · Jun 10, 2025 · Jun 11, 2025
diff --git a/agent/agentcontainers/api.go b/agent/agentcontainers/api.go
 return codersdk.WorkspaceAgentListContainersResponse{}, api.containersErr
 }

 devcontainers := make([]codersdk.WorkspaceAgentDevcontainer, 0, len(api.knownDevcontainers))
 for _, dc := range api.knownDevcontainers {
 devcontainers = append(devcontainers, dc)
 var devcontainers []codersdk.WorkspaceAgentDevcontainer
 if len(api.knownDevcontainers) > 0 {
 devcontainers = make([]codersdk.WorkspaceAgentDevcontainer, 0, len(api.knownDevcontainers))
 for _, dc := range api.knownDevcontainers {
 devcontainers = append(devcontainers, dc)
 }
 slices.SortFunc(devcontainers, func(a, b codersdk.WorkspaceAgentDevcontainer) int {
 return strings.Compare(a.ID.String(), b.ID.String())
 })
 }
 slices.SortFunc(devcontainers, func(a, b codersdk.WorkspaceAgentDevcontainer) int {
 return strings.Compare(a.ID.String(), b.ID.String())
 })

 return codersdk.WorkspaceAgentListContainersResponse{
 Devcontainers: devcontainers,
diff --git a/site/src/modules/resources/AgentDevcontainerCard.stories.tsx b/site/src/modules/resources/AgentDevcontainerCard.stories.tsx
 MockWorkspaceAgentContainerPorts,
 } from "testHelpers/entities";
 import { AgentDevcontainerCard } from "./AgentDevcontainerCard";
 import type { WorkspaceAgentDevcontainer } from "api/typesGenerated";

 const MockWorkspaceAgentDevcontainer: WorkspaceAgentDevcontainer = {
 id: "test-devcontainer-id",
 name: "test-devcontainer",
 workspace_folder: "/workspace/test",
 config_path: "/workspace/test/.devcontainer/devcontainer.json",
 status: "running",
 dirty: false,
 container: MockWorkspaceAgentContainer,
 };

 const meta: Meta<typeof AgentDevcontainerCard> = {
 title: "modules/resources/AgentDevcontainerCard",
 component: AgentDevcontainerCard,
 args: {
 container: MockWorkspaceAgentContainer,
 devcontainer: MockWorkspaceAgentDevcontainer,
 workspace: MockWorkspace,
 wildcardHostname: "*.wildcard.hostname",
 agent: MockWorkspaceAgent,

 export const WithPorts: Story = {
 args: {
 container: {
 ...MockWorkspaceAgentContainer,
 ports: MockWorkspaceAgentContainerPorts,
 devcontainer: {
 ...MockWorkspaceAgentDevcontainer,
 container: {
 ...MockWorkspaceAgentContainer,
 ports: MockWorkspaceAgentContainerPorts,
 },
 },
 },
 };

 export const Dirty: Story = {
 args: {
 container: {
 ...MockWorkspaceAgentContainer,
 devcontainer_dirty: true,
 ports: MockWorkspaceAgentContainerPorts,
 devcontainer: {
 ...MockWorkspaceAgentDevcontainer,
 dirty: true,
 container: {
 ...MockWorkspaceAgentContainer,
 ports: MockWorkspaceAgentContainerPorts,
 },
 },
 },
 };

 export const Recreating: Story = {
 args: {
 container: {
 ...MockWorkspaceAgentContainer,
 devcontainer_dirty: true,
 devcontainer_status: "starting",
 ports: MockWorkspaceAgentContainerPorts,
 devcontainer: {
 ...MockWorkspaceAgentDevcontainer,
 dirty: true,
 status: "starting",
 container: {
 ...MockWorkspaceAgentContainer,
 ports: MockWorkspaceAgentContainerPorts,
 },
 },
 },
 };
diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
 import type {
 Workspace,
 WorkspaceAgent,
 WorkspaceAgentContainer,
 WorkspaceAgentDevcontainer,
 } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { useEffect, useState } from "react";
 import { portForwardURL } from "utils/portForward";
 import { AgentButton } from "./AgentButton";
 import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton";
 import {
 AgentDevcontainerSSHButton,
 AgentSSHButton,
 } from "./SSHButton/SSHButton";
 import { TerminalLink } from "./TerminalLink/TerminalLink";
 import { VSCodeDevContainerButton } from "./VSCodeDevContainerButton/VSCodeDevContainerButton";

 type AgentDevcontainerCardProps = {
 agent: WorkspaceAgent;
 container: WorkspaceAgentContainer;
 devcontainer: WorkspaceAgentDevcontainer;
 workspace: Workspace;
 wildcardHostname: string;
 };

 export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 agent,
 container,
 devcontainer,
 workspace,
 wildcardHostname,
 }) => {
 const folderPath = container.labels["devcontainer.local_folder"];
 const containerFolder = container.volumes[folderPath];
 const [isRecreating, setIsRecreating] = useState(false);

 const handleRecreateDevcontainer = async () => {
 setIsRecreating(true);
 let recreateSucceeded = false;
 try {
 const response = await fetch(
 `/api/v2/workspaceagents/${agent.id}/containers/devcontainers/container/${container.id}/recreate`,
 `/api/v2/workspaceagents/${agent.id}/containers/devcontainers/container/${devcontainer.container?.id}/recreate`,
 {
 method: "POST",
 },
 }
 };

 // If thecontainer is starting, reflect this in the recreate button.
 // If thedevcontainer is starting, reflect this in the recreate button.
 useEffect(() => {
 if (container.devcontainer_status === "starting") {
 if (devcontainer.status === "starting") {
 setIsRecreating(true);
 } else {
 setIsRecreating(false);
 }
 }, [container.devcontainer_status]);
 }, [devcontainer.status]);

 return (
 <section
 className="border border-border border-dashed rounded p-6 "
 key={container.id}
 key={devcontainer.id}
 >
 <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">
 dev container:{" "}
 <span className="font-semibold">{container.name}</span>
 <span className="font-semibold">
 {devcontainer.name}
 {devcontainer.container && (
 <span className="text-content-tertiary">
 {" "}
 ({devcontainer.container.name})
 </span>
 )}
 </span>
 </h3>
 {container.devcontainer_dirty && (
 {devcontainer.dirty && (
 <HelpTooltip>
 <HelpTooltipTrigger className="flex items-center text-xs text-content-warning ml-2">
 <span>Outdated</span>
 Recreate
 </Button>

 <AgentDevcontainerSSHButton
 {/*<AgentDevcontainerSSHButton
 workspace={workspace.name}
 container={container.name}
 />
 container={devcontainer.container?.name || devcontainer.name}
 /> */}
 {agent.display_apps.includes("ssh_helper") && ( // TODO agent
 <AgentSSHButton
 workspaceName={workspace.name}
 agentName={devcontainer.name}
 workspaceOwnerUsername={workspace.owner_name}
 />
 )}
 </div>
 </header>

 <VSCodeDevContainerButton
 userName={workspace.owner_name}
 workspaceName={workspace.name}
 devContainerName={container.name}
 devContainerFolder={containerFolder}
 displayApps={agent.display_apps}
 agentName={agent.name}
 devContainerName={devcontainer.name}
 devContainerFolder={devcontainer.workspace_folder}
 displayApps={agent.display_apps} // TODO agent
 agentName={devcontainer.name}
 />

 <TerminalLink
 workspaceName={workspace.name}
 agentName={agent.name}
 containerName={container.name}
 agentName={devcontainer.name}
 userName={workspace.owner_name}
 />
 {wildcardHostname !== "" &&
 container.ports.map((port) => {
 devcontainer.container?.ports.map((port) => {
 const portLabel = `${port.port}/${port.network.toUpperCase()}`;
 const hasHostBind =
 port.host_port !== undefined && port.host_ip !== undefined;
diff --git a/site/src/modules/resources/AgentRow.stories.tsx b/site/src/modules/resources/AgentRow.stories.tsx
 export const Devcontainer: Story = {
 beforeEach: () => {
 spyOn(API, "getAgentContainers").mockResolvedValue({
 devcontainers: [
 {
 id: "test-devcontainer-id",
 name: "test-devcontainer",
 workspace_folder: "/workspace/test",
 config_path: "/workspace/test/.devcontainer/devcontainer.json",
 status: "running",
 dirty: false,
 container: M.MockWorkspaceAgentContainer,
 },
 ],
 containers: [M.MockWorkspaceAgentContainer],
 });
 },
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
 setBottomOfLogs(distanceFromBottom < AGENT_LOG_LINE_HEIGHT);
 }, []);

 const { data:containers } = useQuery({
 const { data:devcontainers } = useQuery({
 queryKey: ["agents", agent.id, "containers"],
 queryFn: () =>
 // Only return devcontainers
 API.getAgentContainers(agent.id, [
 "devcontainer.config_file=",
 "devcontainer.local_folder=",
 ]),
 queryFn: () => API.getAgentContainers(agent.id),
 enabled: agent.status === "connected",
 select: (res) => res.containers.filter((c) => c.status === "running"),
 select: (res) => res.devcontainers,
 // TODO: Implement a websocket connection to get updates on containers
 // without having to poll.
 refetchInterval: ({ state }) => {
 const [showParentApps, setShowParentApps] = useState(false);

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

 </div>

 <div className="flex items-center gap-2">
 {containers &&containers.length > 0 && (
 {devcontainers &&devcontainers.length > 0 && (
 <Button
 variant="outline"
 size="sm"
 </section>
 )}

 {containers &&containers.length > 0 && (
 {devcontainers &&devcontainers.length > 0 && (
 <section className="flex flex-col gap-4">
 {containers.map((container) => {
 {devcontainers.map((devcontainer) => {
 return (
 <AgentDevcontainerCard
 key={container.id}
 container={container}
 key={devcontainer.id}
 devcontainer={devcontainer}
 workspace={workspace}
 wildcardHostname={proxy.preferredWildcardHostname}
 agent={agent}
diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx

 interface AgentDevcontainerSSHButtonProps {
 workspace: string;
 container: string;
 agentName: string;
 }

 export const AgentDevcontainerSSHButton: FC<
 AgentDevcontainerSSHButtonProps
 > = ({ workspace,container }) => {
 > = ({ workspace,agentName }) => {
 const paper = useClassName(classNames.paper, []);

 return (
 <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}`}
 helpText="Connect to thedevcontainer:"
 codeExample={`coder ssh ${workspace}.${agentName}`}
 />
 </Stack>
 </ol>

 const classNames = {
 paper: (css, theme) => css`
 padding: 16px 24px 24px;
 width: 304px;
 color: ${theme.palette.text.secondary};
 margin-top: 2px;
 `,
 padding: 16px 24px 24px;
 width: 304px;
 color: ${theme.palette.text.secondary};
 margin-top: 2px;
 `,
 } satisfies Record<string, ClassName>;

 const styles = {
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
 volumes: {
 "/mnt/volume1": "/volume1",
 },
 devcontainer_dirty: false,
 };

 export const MockWorkspaceAppStatuses: TypesGen.WorkspaceAppStatus[] = [
Original file line number	Diff line number	Diff line change
Expand Up		@@ -656,13 +656,16 @@ func (api *API) getContainers() (codersdk.WorkspaceAgentListContainersResponse,
		return codersdk.WorkspaceAgentListContainersResponse{}, api.containersErr
		}

		devcontainers := make([]codersdk.WorkspaceAgentDevcontainer, 0, len(api.knownDevcontainers))
		for _, dc := range api.knownDevcontainers {
		devcontainers = append(devcontainers, dc)
		var devcontainers []codersdk.WorkspaceAgentDevcontainer
		if len(api.knownDevcontainers) > 0 {
		devcontainers = make([]codersdk.WorkspaceAgentDevcontainer, 0, len(api.knownDevcontainers))
		for _, dc := range api.knownDevcontainers {
		devcontainers = append(devcontainers, dc)
		}
		slices.SortFunc(devcontainers, func(a, b codersdk.WorkspaceAgentDevcontainer) int {
		return strings.Compare(a.ID.String(), b.ID.String())
		})
		}
		slices.SortFunc(devcontainers, func(a, b codersdk.WorkspaceAgentDevcontainer) int {
		return strings.Compare(a.ID.String(), b.ID.String())
		})

		return codersdk.WorkspaceAgentListContainersResponse{
		Devcontainers: devcontainers,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,12 +6,23 @@ import {
		MockWorkspaceAgentContainerPorts,
		} from "testHelpers/entities";
		import { AgentDevcontainerCard } from "./AgentDevcontainerCard";
		import type { WorkspaceAgentDevcontainer } from "api/typesGenerated";

		const MockWorkspaceAgentDevcontainer: WorkspaceAgentDevcontainer = {
		id: "test-devcontainer-id",
		name: "test-devcontainer",
		workspace_folder: "/workspace/test",
		config_path: "/workspace/test/.devcontainer/devcontainer.json",
		status: "running",
		dirty: false,
		container: MockWorkspaceAgentContainer,
		};

		const meta: Meta<typeof AgentDevcontainerCard> = {
		title: "modules/resources/AgentDevcontainerCard",
		component: AgentDevcontainerCard,
		args: {
		container: MockWorkspaceAgentContainer,
		devcontainer: MockWorkspaceAgentDevcontainer,
		workspace: MockWorkspace,
		wildcardHostname: "*.wildcard.hostname",
		agent: MockWorkspaceAgent,
Expand All		@@ -25,30 +36,39 @@ export const NoPorts: Story = {};

		export const WithPorts: Story = {
		args: {
		container: {
		...MockWorkspaceAgentContainer,
		ports: MockWorkspaceAgentContainerPorts,
		devcontainer: {
		...MockWorkspaceAgentDevcontainer,
		container: {
		...MockWorkspaceAgentContainer,
		ports: MockWorkspaceAgentContainerPorts,
		},
		},
		},
		};

		export const Dirty: Story = {
		args: {
		container: {
		...MockWorkspaceAgentContainer,
		devcontainer_dirty: true,
		ports: MockWorkspaceAgentContainerPorts,
		devcontainer: {
		...MockWorkspaceAgentDevcontainer,
		dirty: true,
		container: {
		...MockWorkspaceAgentContainer,
		ports: MockWorkspaceAgentContainerPorts,
		},
		},
		},
		};

		export const Recreating: Story = {
		args: {
		container: {
		...MockWorkspaceAgentContainer,
		devcontainer_dirty: true,
		devcontainer_status: "starting",
		ports: MockWorkspaceAgentContainerPorts,
		devcontainer: {
		...MockWorkspaceAgentDevcontainer,
		dirty: true,
		status: "starting",
		container: {
		...MockWorkspaceAgentContainer,
		ports: MockWorkspaceAgentContainerPorts,
		},
		},
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import type {
		Workspace,
		WorkspaceAgent,
		WorkspaceAgentContainer,
		WorkspaceAgentDevcontainer,
		} from "api/typesGenerated";
		import { Button } from "components/Button/Button";
		import { displayError } from "components/GlobalSnackbar/utils";
Expand All		@@ -24,33 +24,34 @@ import type { FC } from "react";
		import { useEffect, useState } from "react";
		import { portForwardURL } from "utils/portForward";
		import { AgentButton } from "./AgentButton";
		import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton";
		import {
		AgentDevcontainerSSHButton,
		AgentSSHButton,
		} from "./SSHButton/SSHButton";
		import { TerminalLink } from "./TerminalLink/TerminalLink";
		import { VSCodeDevContainerButton } from "./VSCodeDevContainerButton/VSCodeDevContainerButton";

		type AgentDevcontainerCardProps = {
		agent: WorkspaceAgent;
		container: WorkspaceAgentContainer;
		devcontainer: WorkspaceAgentDevcontainer;
		workspace: Workspace;
		wildcardHostname: string;
		};

		export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
		agent,
		container,
		devcontainer,
		workspace,
		wildcardHostname,
		}) => {
		const folderPath = container.labels["devcontainer.local_folder"];
		const containerFolder = container.volumes[folderPath];
		const [isRecreating, setIsRecreating] = useState(false);

		const handleRecreateDevcontainer = async () => {
		setIsRecreating(true);
		let recreateSucceeded = false;
		try {
		const response = await fetch(
Copy link Contributor BrunoQuaresmaJun 16, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. In the FE, we handle requests in two ways: queries or mutations. In this case, you should wrap this request into a mutation.Here is the docs. Copy link Contributor BrunoQuaresmaJun 16, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. When using a mutation, you can invalidate other queries or update their data to reflect the most recent status, instead of doing it manually, so you wouldn't need the isRebuilding or subAgentRemoved statuses.Here is how you can do it. If you need more examples, you can search in the codebase for "invalidateQueries". Copy link MemberAuthor mafredriJun 16, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Thanks for the tip! This was superb, actually solved a couple of issues I wanted to address but didn't know how! `f150bad` (#18332) BrunoQuaresma reacted with heart emoji
		`/api/v2/workspaceagents/${agent.id}/containers/devcontainers/container/${container.id}/recreate`,
		`/api/v2/workspaceagents/${agent.id}/containers/devcontainers/container/${devcontainer.container?.id}/recreate`,
		{
		method: "POST",
		},
Expand DownExpand Up		@@ -79,27 +80,35 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
		}
		};

		// If thecontainer is starting, reflect this in the recreate button.
		// If thedevcontainer is starting, reflect this in the recreate button.
		useEffect(() => {
		if (container.devcontainer_status === "starting") {
		if (devcontainer.status === "starting") {
		setIsRecreating(true);
		} else {
		setIsRecreating(false);
		}
		}, [container.devcontainer_status]);
		}, [devcontainer.status]);

		return (
		<section
		className="border border-border border-dashed rounded p-6 "
		key={container.id}
		key={devcontainer.id}
		>
		<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">
		dev container:{" "}
		<span className="font-semibold">{container.name}</span>
		<span className="font-semibold">
		{devcontainer.name}
		{devcontainer.container && (
		<span className="text-content-tertiary">
		{" "}
		({devcontainer.container.name})
		</span>
		)}
		</span>
		</h3>
		{container.devcontainer_dirty && (
		{devcontainer.dirty && (
		<HelpTooltip>
		<HelpTooltipTrigger className="flex items-center text-xs text-content-warning ml-2">
		<span>Outdated</span>
Expand All		@@ -126,10 +135,17 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
		Recreate
		</Button>

		<AgentDevcontainerSSHButton
		{/*<AgentDevcontainerSSHButton
		workspace={workspace.name}
		container={container.name}
		/>
		container={devcontainer.container?.name \|\| devcontainer.name}
		/> */}
		{agent.display_apps.includes("ssh_helper") && ( // TODO agent
		<AgentSSHButton
		workspaceName={workspace.name}
		agentName={devcontainer.name}
		workspaceOwnerUsername={workspace.owner_name}
		/>
		)}
		</div>
		</header>

Expand All		@@ -139,20 +155,19 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
		<VSCodeDevContainerButton
		userName={workspace.owner_name}
		workspaceName={workspace.name}
		devContainerName={container.name}
		devContainerFolder={containerFolder}
		displayApps={agent.display_apps}
		agentName={agent.name}
		devContainerName={devcontainer.name}
		devContainerFolder={devcontainer.workspace_folder}
		displayApps={agent.display_apps} // TODO agent
		agentName={devcontainer.name}
		/>

		<TerminalLink
		workspaceName={workspace.name}
		agentName={agent.name}
		containerName={container.name}
		agentName={devcontainer.name}
		userName={workspace.owner_name}
		/>
		{wildcardHostname !== "" &&
		container.ports.map((port) => {
		devcontainer.container?.ports.map((port) => {
		const portLabel = `${port.port}/${port.network.toUpperCase()}`;
		const hasHostBind =
		port.host_port !== undefined && port.host_ip !== undefined;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -288,6 +288,17 @@ export const GroupApp: Story = {
		export const Devcontainer: Story = {
		beforeEach: () => {
		spyOn(API, "getAgentContainers").mockResolvedValue({
		devcontainers: [
		{
		id: "test-devcontainer-id",
		name: "test-devcontainer",
		workspace_folder: "/workspace/test",
		config_path: "/workspace/test/.devcontainer/devcontainer.json",
		status: "running",
		dirty: false,
		container: M.MockWorkspaceAgentContainer,
		},
		],
		containers: [M.MockWorkspaceAgentContainer],
		});
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -140,16 +140,11 @@ export const AgentRow: FC<AgentRowProps> = ({
		setBottomOfLogs(distanceFromBottom < AGENT_LOG_LINE_HEIGHT);
		}, []);

		const { data:containers } = useQuery({
		const { data:devcontainers } = useQuery({
		queryKey: ["agents", agent.id, "containers"],
		queryFn: () =>
		// Only return devcontainers
		API.getAgentContainers(agent.id, [
		"devcontainer.config_file=",
		"devcontainer.local_folder=",
		]),
		queryFn: () => API.getAgentContainers(agent.id),
		enabled: agent.status === "connected",
		select: (res) => res.containers.filter((c) => c.status === "running"),
		select: (res) => res.devcontainers,
		// TODO: Implement a websocket connection to get updates on containers
		// without having to poll.
		refetchInterval: ({ state }) => {
Expand All		@@ -164,7 +159,7 @@ export const AgentRow: FC<AgentRowProps> = ({
		const [showParentApps, setShowParentApps] = useState(false);

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

Expand DownExpand Up		@@ -200,7 +195,7 @@ export const AgentRow: FC<AgentRowProps> = ({
		</div>

		<div className="flex items-center gap-2">
		{containers &&containers.length > 0 && (
		{devcontainers &&devcontainers.length > 0 && (
		<Button
		variant="outline"
		size="sm"
Expand DownExpand Up		@@ -289,13 +284,13 @@ export const AgentRow: FC<AgentRowProps> = ({
		</section>
		)}

		{containers &&containers.length > 0 && (
		{devcontainers &&devcontainers.length > 0 && (
		<section className="flex flex-col gap-4">
		{containers.map((container) => {
		{devcontainers.map((devcontainer) => {
		return (
		<AgentDevcontainerCard
		key={container.id}
		container={container}
		key={devcontainer.id}
		devcontainer={devcontainer}
		workspace={workspace}
		wildcardHostname={proxy.preferredWildcardHostname}
		agent={agent}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -87,12 +87,12 @@ export const AgentSSHButton: FC<AgentSSHButtonProps> = ({

		interface AgentDevcontainerSSHButtonProps {
		workspace: string;
		container: string;
		agentName: string;
		}

		export const AgentDevcontainerSSHButton: FC<
		AgentDevcontainerSSHButtonProps
		> = ({ workspace,container }) => {
		> = ({ workspace,agentName }) => {
		const paper = useClassName(classNames.paper, []);

		return (
Expand All		@@ -116,8 +116,8 @@ export const AgentDevcontainerSSHButton: FC<
		<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}`}
		helpText="Connect to thedevcontainer:"
		codeExample={`coder ssh ${workspace}.${agentName}`}
		/>
		</Stack>
		</ol>
Expand DownExpand Up		@@ -151,11 +151,11 @@ const SSHStep: FC<SSHStepProps> = ({ helpText, codeExample }) => (

		const classNames = {
		paper: (css, theme) => css`
		padding: 16px 24px 24px;
		width: 304px;
		color: ${theme.palette.text.secondary};
		margin-top: 2px;
		`,
		padding: 16px 24px 24px;
		width: 304px;
		color: ${theme.palette.text.secondary};
		margin-top: 2px;
		`,
		} satisfies Record<string, ClassName>;

		const styles = {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4390,7 +4390,6 @@ export const MockWorkspaceAgentContainer: TypesGen.WorkspaceAgentContainer = {
		volumes: {
		"/mnt/volume1": "/volume1",
		},
		devcontainer_dirty: false,
		};

		export const MockWorkspaceAppStatuses: TypesGen.WorkspaceAppStatus[] = [
Expand Down