feat: add devcontainer in the UI (#16800)

![image](https://github.com/user-attachments/assets/361f9e69-dec8-47c8-b075-7c13ce84c7e8)

Related to https://github.com/coder/coder/issues/16422

---------

Co-authored-by: Cian Johnston <cian@coder.com>

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: {

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,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;