Function WorkspaceApps

site/src/pages/WorkspacesPage/WorkspacesTable.tsx:653–758

({ workspace })

};

const WorkspaceApps: FC<WorkspaceAppsProps> = ({ workspace }) => {
	/**
	 * Coder is pretty flexible and allows an enormous variety of use cases, such
	 * as having multiple resources with many agents, but they are not common. The
	 * most common scenario is to have one single compute resource with one single
	 * agent containing all the apps. We get the apps from the first compute
	 * resource (they are sorted to return the compute resource first).
	 *
	 * For multi-agent workspaces with sub-agents we show the apps from the parent
	 * agent (the one without a `parent_id`). Sub-agents, such as those created by
	 * devcontainers, are skipped so agent ordering does not determine which apps
	 * appear.
	 *
	 * When a workspace has multiple parent-level agents we show the apps from the
	 * first one only; aggregating apps across agents is tracked separately.
	 */
	const agent = workspace.latest_build.resources
		.filter((r) => !r.hide)
		.at(0)
		?.agents?.find((a) => a.parent_id === null);
	if (!agent) {
		return null;
	}

	const builtinApps = new Set(agent.display_apps);
	builtinApps.delete("port_forwarding_helper");
	builtinApps.delete("ssh_helper");

	const remainingSlots = WORKSPACE_APPS_SLOTS - builtinApps.size;
	const userApps = agent.apps
		.filter(
			(app) =>
				(app.health === "healthy" || app.health === "disabled") && !app.hidden,
		)
		.slice(0, remainingSlots);

	const buttons: ReactNode[] = [];

	if (builtinApps.has("vscode")) {
		buttons.push(
			<VSCodeIconLink
				key="vscode"
				variant="vscode"
				label="Open VSCode"
				owner={workspace.owner_name}
				workspace={workspace.name}
				agent={agent.name}
				folder={agent.expanded_directory}
			>
				<VSCodeIcon />
			</VSCodeIconLink>,
		);
	}

	if (builtinApps.has("vscode_insiders")) {
		buttons.push(
			<VSCodeIconLink
				key="vscode-insiders"