refactor(site): migrate agent row components from Stack to Tailwind (2/19)

Migrate 3 agent row components from Emotion Stack to Tailwind CSS:
- AgentRowPreview.tsx
- AgentRow.tsx
- AgentDevcontainerCard.tsx

Changes:
- Replace Stack component with div + Tailwind flex utilities
- Convert spacing props to Tailwind gap classes
- Convert direction props to flex-row/flex-col
- Convert alignment props to items-* and justify-* classes
- Remove Stack imports
- Maintain all existing Emotion css styling for complex layouts

This is part 2 of 19 PRs to completely migrate away from the Stack
component across the codebase.

Testing: TypeScript checks pass, biome formatting applied

site/src/modules/resources/AgentDevcontainerCard.tsx

@@ -10,7 +10,6 @@ import type {
 import { Button } from "components/Button/Button";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Spinner } from "components/Spinner/Spinner";
-import { Stack } from "components/Stack/Stack";
 import {
 	Tooltip,
 	TooltipContent,
@@ -182,12 +181,10 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 	const appsClasses = "flex flex-wrap gap-4 empty:hidden md:justify-start";
 
 	return (
-		<Stack
+		<div
 			key={devcontainer.id}
-			direction="column"
-			spacing={0}
 			className={cn(
-				"relative py-4 border border-dashed border-border rounded",
+				"relative flex flex-col gap-0 py-4 border border-dashed border-border rounded",
 				devcontainer.error && "border-content-destructive border-solid",
 			)}
 		>
@@ -382,6 +379,6 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 					)}
 				</div>
 			)}
-		</Stack>
+		</div>
 	);
 };

site/src/modules/resources/AgentRow.tsx

@@ -10,7 +10,6 @@ import type {
 } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
-import { Stack } from "components/Stack/Stack";
 import { useProxy } from "contexts/ProxyContext";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { AppStatuses } from "pages/WorkspacePage/AppStatuses";
@@ -144,10 +143,9 @@ export const AgentRow: FC<AgentRowProps> = ({
 		hasSubdomainApps && !proxy.proxy?.wildcard_hostname;
 
 	return (
-		<Stack
+		<div
 			key={agent.id}
-			direction="column"
-			spacing={0}
+			className="flex flex-col gap-0"
 			css={[
 				styles.agentRow,
 				styles[`agentRow-${agent.status}`],
@@ -325,7 +323,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 						</AutoSizer>
 					</Collapse>
 
-					<Stack css={{ padding: "12px 16px" }} direction="row" spacing={1}>
+					<div className="flex flex-row gap-2 p-3 px-4">
 						<Button
 							size="sm"
 							variant="subtle"
@@ -336,10 +334,10 @@ export const AgentRow: FC<AgentRowProps> = ({
 						</Button>
 						<Divider orientation="vertical" variant="middle" flexItem />
 						<DownloadAgentLogsButton agent={agent} />
-					</Stack>
+					</div>
 				</section>
 			)}
-		</Stack>
+		</div>
 	);
 };
 

site/src/modules/resources/AgentRowPreview.tsx

@@ -2,8 +2,8 @@ import type { Interpolation, Theme } from "@emotion/react";
 import type { WorkspaceAgent } from "api/typesGenerated";
 import { TerminalIcon } from "components/Icons/TerminalIcon";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
-import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 import { DisplayAppNameMap } from "./AppLink/AppLink";
 import { AppPreview } from "./AppLink/AppPreview";
 import { BaseIcon } from "./AppLink/BaseIcon";
@@ -22,74 +22,52 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
 	alignValues,
 }) => {
 	return (
-		<Stack
+		<div
 			key={agent.id}
-			direction="row"
-			alignItems="center"
-			justifyContent="space-between"
+			className="flex flex-row items-center justify-between"
 			css={styles.agentRow}
 		>
-			<Stack direction="row" alignItems="baseline">
+			<div className="flex flex-row items-baseline">
 				<div css={styles.agentStatusWrapper}>
 					<div css={styles.agentStatusPreview} />
 				</div>
-				<Stack
-					alignItems="baseline"
-					direction="row"
-					spacing={4}
+				<div
+					className="flex flex-row items-baseline gap-8 md:flex-wrap md:gap-4"
 					css={styles.agentData}
 				>
-					<Stack
-						direction="row"
-						alignItems="baseline"
-						spacing={1}
-						css={[
-							styles.noShrink,
-							styles.agentDataItem,
-							(theme) => ({
-								[theme.breakpoints.up("sm")]: {
-									minWidth: alignValues ? 240 : undefined,
-								},
-							}),
-						]}
+					<div
+						className={cn(
+							"flex flex-row items-baseline gap-2 flex-shrink-0 md:flex-col md:items-start md:gap-2 md:w-fit",
+						)}
+						css={(theme) => ({
+							[theme.breakpoints.up("sm")]: {
+								minWidth: alignValues ? 240 : undefined,
+							},
+						})}
 					>
 						<span>Agent:</span>
 						<span css={styles.agentDataValue}>{agent.name}</span>
-					</Stack>
+					</div>
 
-					<Stack
-						direction="row"
-						alignItems="baseline"
-						spacing={1}
-						css={[
-							styles.noShrink,
-							styles.agentDataItem,
-							(theme) => ({
-								[theme.breakpoints.up("sm")]: {
-									minWidth: alignValues ? 100 : undefined,
-								},
-							}),
-						]}
+					<div
+						className={cn(
+							"flex flex-row items-baseline gap-2 flex-shrink-0 md:flex-col md:items-start md:gap-2 md:w-fit",
+						)}
+						css={(theme) => ({
+							[theme.breakpoints.up("sm")]: {
+								minWidth: alignValues ? 100 : undefined,
+							},
+						})}
 					>
 						<span>OS:</span>
 						<span css={[styles.agentDataValue, styles.agentOS]}>
 							{agent.operating_system}
 						</span>
-					</Stack>
+					</div>
 
-					<Stack
-						direction="row"
-						alignItems="center"
-						spacing={1}
-						css={styles.agentDataItem}
-					>
+					<div className="flex flex-row items-center gap-2 md:flex-col md:items-start md:gap-2 md:w-fit">
 						<span>Apps:</span>
-						<Stack
-							direction="row"
-							alignItems="center"
-							spacing={0.5}
-							wrap="wrap"
-						>
+						<div className="flex flex-row items-center gap-1 flex-wrap">
 							{/* We display all modules returned in agent.apps */}
 							{agent.apps.map((app) => (
 								<AppPreview key={app.slug}>
@@ -130,11 +108,11 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
 							{agent.apps.length === 0 && agent.display_apps.length === 0 && (
 								<span css={styles.agentDataValue}>None</span>
 							)}
-						</Stack>
-					</Stack>
-				</Stack>
-			</Stack>
-		</Stack>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 	);
 };
 
@@ -199,17 +177,4 @@ const styles = {
 	agentDataValue: (theme) => ({
 		color: theme.palette.text.primary,
 	}),
-
-	noShrink: {
-		flexShrink: 0,
-	},
-
-	agentDataItem: (theme) => ({
-		[theme.breakpoints.down("md")]: {
-			flexDirection: "column",
-			alignItems: "flex-start",
-			gap: 8,
-			width: "fit-content",
-		},
-	}),
 } satisfies Record<string, Interpolation<Theme>>;