feat(agent/agentcontainers): auto detect dev containers (#18950)

Relates to https://github.com/coder/internal/issues/711

This PR implements a project discovery mechanism that searches for any
dev container projects and makes them visible in the UI so that they can
be started. To make the wording on the site more clear, "Rebuild" has
been changed to "Start" when there is no container associated with a
known dev container configuration. I've also made it so that site will
show the dev container config path when there is no other name
available.

### Design decisions

Just want to ensure my explanation for a few design decisions are noted
down:
- We only search for dev container configurations inside git
repositories
- We only search for these git repositories if they're at the top level
or a direct child of the agent directory.

This limited approach is to reduce the amount of files we ultimately
walk when trying to find these projects. It makes sense to limit it to
only the agent directory, although I'm open to expanding how deep we
search.

site/src/modules/resources/AgentDevcontainerCard.stories.tsx

@@ -91,6 +91,29 @@ export const Recreating: Story = {
 	},
 };
 
+export const NoContainerOrSubAgent: Story = {
+	args: {
+		devcontainer: {
+			...MockWorkspaceAgentDevcontainer,
+			container: undefined,
+			agent: undefined,
+		},
+		subAgents: [],
+	},
+};
+
+export const NoContainerOrAgentOrName: Story = {
+	args: {
+		devcontainer: {
+			...MockWorkspaceAgentDevcontainer,
+			container: undefined,
+			agent: undefined,
+			name: "",
+		},
+		subAgents: [],
+	},
+};
+
 export const NoSubAgent: Story = {
 	args: {
 		devcontainer: {

site/src/modules/resources/AgentDevcontainerCard.tsx

@@ -218,7 +218,8 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 							text-sm font-semibold text-content-primary
 							md:overflow-visible"
 						>
-							{subAgent?.name ?? devcontainer.name}
+							{subAgent?.name ??
+								(devcontainer.name || devcontainer.config_path)}
 							{devcontainer.container && (
 								<span className="text-content-tertiary">
 									{" "}
@@ -253,7 +254,8 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 						disabled={devcontainer.status === "starting"}
 					>
 						<Spinner loading={devcontainer.status === "starting"} />
-						Rebuild
+
+						{devcontainer.container === undefined ? "Start" : "Rebuild"}
 					</Button>
 
 					{showDevcontainerControls && displayApps.includes("ssh_helper") && (

site/src/modules/resources/AgentRow.tsx

@@ -137,7 +137,16 @@ export const AgentRow: FC<AgentRowProps> = ({
 	const [showParentApps, setShowParentApps] = useState(false);
 
 	let shouldDisplayAppsSection = shouldDisplayAgentApps;
-	if (devcontainers && devcontainers.length > 0 && !showParentApps) {
+	if (
+		devcontainers &&
+		devcontainers.find(
+			// We only want to hide the parent apps by default when there are dev
+			// containers that are either starting or running. If they are all in
+			// the stopped state, it doesn't make sense to hide the parent apps.
+			(dc) => dc.status === "running" || dc.status === "starting",
+		) !== undefined &&
+		!showParentApps
+	) {
 		shouldDisplayAppsSection = false;
 	}