Function TaskApps

site/src/pages/TaskPage/TaskApps.tsx:33–133

({ task, workspace })

const TERMINAL_TAB_ID = "terminal";

export const TaskApps: FC<TaskAppsProps> = ({ task, workspace }) => {
	const allApps = getAllAppsWithAgent(workspace);
	const apps = allApps.filter(
		// The Chat UI app will be displayed in the sidebar, so we don't want to
		// show it as a web app.
		(app) => app.id !== task.workspace_app_id && !app.hidden,
	);
	const [embeddedApps, externalApps] = splitEmbeddedAndExternalApps(apps);
	const [activeAppId, setActiveAppId] = useState(embeddedApps.at(0)?.id);
	const hasAvailableAppsToDisplay =
		embeddedApps.length > 0 || externalApps.length > 0;
	const taskAgent = allApps.at(0)?.agent;
	const terminalHref = getTerminalHref({
		username: task.owner_name,
		workspace: task.workspace_name,
		agent: taskAgent?.name,
	});
	const isTerminalActive = activeAppId === TERMINAL_TAB_ID;

	return (
		<main className="flex flex-col h-full">
			{hasAvailableAppsToDisplay && (
				<div className="w-full flex items-center border-0 border-b border-border border-solid">
					<ScrollArea className="max-w-full">
						<div className="flex w-max gap-2 items-center p-2 pb-0">
							{embeddedApps.map((app) => (
								<TaskAppTab
									key={app.id}
									workspace={workspace}
									app={app}
									active={app.id === activeAppId}
									onClick={(e) => {
										e.preventDefault();
										setActiveAppId(app.id);
									}}
								/>
							))}
							<TaskTab
								to={terminalHref}
								active={isTerminalActive}
								onClick={(e) => {
									e.preventDefault();
									setActiveAppId(TERMINAL_TAB_ID);
								}}
							>
								<TerminalIcon />
								Terminal
							</TaskTab>
						</div>
						<ScrollBar orientation="horizontal" className="h-2" />
					</ScrollArea>

					{externalApps.length > 0 && (
						<ExternalAppsDropdown
							workspace={workspace}
							externalApps={externalApps}
						/>
					)}