Function AgentDevcontainerCard

site/src/modules/resources/AgentDevcontainerCard.tsx:60–385

({
	parentAgent,
	subAgents,
	devcontainer,
	workspace,
	template,
	wildcardHostname,
})

};

export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
	parentAgent,
	subAgents,
	devcontainer,
	workspace,
	template,
	wildcardHostname,
}) => {
	const { browser_only } = useFeatureVisibility();
	const { proxy } = useProxy();
	const queryClient = useQueryClient();

	// The sub agent comes from the workspace response whereas the devcontainer
	// comes from the agent containers endpoint. We need alignment between the
	// two, so if the sub agent is not present or the IDs do not match, we
	// assume it has been removed.
	const subAgent = subAgents.find((sub) => sub.id === devcontainer.agent?.id);

	const appSections = (subAgent && organizeAgentApps(subAgent.apps)) || [];
	const displayApps =
		subAgent?.display_apps.filter((app) => {
			if (browser_only) {
				return ["web_terminal", "port_forwarding_helper"].includes(app);
			}
			return true;
		}) || [];
	const showVSCode =
		devcontainer.container &&
		(displayApps.includes("vscode") || displayApps.includes("vscode_insiders"));
	const hasAppsToDisplay =
		displayApps.includes("web_terminal") ||
		showVSCode ||
		appSections.some((it) => it.apps.length > 0);

	const queryKey = workspaceAgentContainersKey(parentAgent.id);

	const deleteDevcontainerMutation = useMutation({
		...deleteWorkspaceAgentDevcontainer(parentAgent, devcontainer, queryClient),
	});

	const rebuildDevcontainerMutation = useMutation({
		mutationFn: async () => {
			await API.recreateDevContainer({
				parentAgentId: parentAgent.id,
				devcontainerId: devcontainer.id,
			});
		},
		onMutate: async () => {
			await queryClient.cancelQueries({ queryKey });

			// Snapshot the previous data for rollback in case of error.
			const previousData = queryClient.getQueryData(queryKey);

			// Optimistically update the devcontainer status to
			// "starting" and zero the agent and container to mimic what
			// the API does.
			queryClient.setQueryData(
				queryKey,