Function AgentRow

site/src/modules/resources/AgentRow.tsx:139–743

({
	agent,
	subAgents,
	workspace,
	template,
	onUpdateAgent,
	initialMetadata,
})

	Boolean(script?.exit_code || (script?.status && script.status !== "ok"));

export const AgentRow: FC<AgentRowProps> = ({
	agent,
	subAgents,
	workspace,
	template,
	onUpdateAgent,
	initialMetadata,
}) => {
	const { browser_only, workspace_external_agent } = useFeatureVisibility();
	const appSections = organizeAgentApps(agent.apps);
	const hasAppsToDisplay =
		!browser_only || appSections.some((it) => it.apps.length > 0);
	const isExternalAgent = workspace.latest_build.has_external_agent;
	const shouldDisplayAgentApps =
		(agent.status === "connected" && hasAppsToDisplay) ||
		(agent.status === "connecting" && !isExternalAgent);
	const hasVSCodeApp =
		agent.display_apps.includes("vscode") ||
		agent.display_apps.includes("vscode_insiders");
	const showVSCode = hasVSCodeApp && !browser_only;

	const hasStartupFeatures = Boolean(agent.logs_length);
	const runningScriptsCount = agent.scripts.filter(
		(s) => s.run_on_start && !s.status,
	).length;
	const healthIssues = getAgentHealthIssues(agent);
	const hasAgentIssues = healthIssues.length > 0;
	const hasWarningIssues = healthIssues.some((i) => i.severity === "warning");
	const { proxy } = useProxy();
	const [showLogs, setShowLogs] = useState(
		(["starting", "start_timeout"].includes(agent.lifecycle_state) ||
			hasAgentIssues) &&
			hasStartupFeatures,
	);
	const agentLogs = useAgentLogs({ agentId: agent.id, enabled: showLogs });
	const logListRef = useRef<List>(null);
	const logListDivRef = useRef<HTMLDivElement>(null);
	const [bottomOfLogs, setBottomOfLogs] = useState(true);

	useEffect(() => {
		setShowLogs(
			(agent.lifecycle_state !== "ready" || hasAgentIssues) &&
				hasStartupFeatures,
		);
	}, [agent.lifecycle_state, hasAgentIssues, hasStartupFeatures]);

	// This is a layout effect to remove flicker when we're scrolling to the bottom.
	// biome-ignore lint/correctness/useExhaustiveDependencies: consider refactoring
	useLayoutEffect(() => {
		// If we're currently watching the bottom, we always want to stay at the bottom.
		if (bottomOfLogs && logListRef.current) {
			logListRef.current.scrollToItem(agentLogs.length - 1, "end");
		}
	}, [showLogs, agentLogs, bottomOfLogs]);

	// This is a bit of a hack on the react-window API to get the scroll position.
	// If we're scrolled to the bottom, we want to keep the list scrolled to the bottom.
	// This makes it feel similar to a terminal that auto-scrolls downwards!