From dbc88b6054202343c4cf8c7fa02b9de893000965 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Thu, 7 May 2026 19:43:10 -0700
Subject: [PATCH] refactor(desktop): align automations tab with Linear design
 language

- Compact h-11 top bar with inline Mine/Team Tabs (matches TasksTopBar)
- Replace shadcn Table with grid-based rows (matches V2WorkspacesList):
  sticky uppercase column header, py-2.5 rows, hover-only row actions
- Detail header: compact h-11 px-4 with icon-sm ghost buttons
- Sidebar: tighter padding (px-5, gap-6), narrowed to 360px
- Empty-scope state uses shared Empty component
---
 .../AutomationBody/AutomationBody.tsx         |   2 +-
 .../AutomationDetailHeader.tsx                |  25 +-
 .../AutomationDetailSidebar.tsx               |   6 +-
 .../AutomationsEmptyState.tsx                 |  16 +-
 .../_dashboard/automations/page.tsx           | 556 ++++++++++--------
 5 files changed, 344 insertions(+), 261 deletions(-)

diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationBody/AutomationBody.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationBody/AutomationBody.tsx
index 3f62298d02d..284ea3d9322 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationBody/AutomationBody.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationBody/AutomationBody.tsx
@@ -47,7 +47,7 @@ export function AutomationBody({
 	});
 
 	return (
-		<div className="flex-1 overflow-y-auto px-8 py-6">
+		<div className="flex-1 overflow-y-auto px-8 py-8">
 			<EmojiTextInput
 				value={name}
 				onChange={setName}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailHeader/AutomationDetailHeader.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailHeader/AutomationDetailHeader.tsx
index 2b65ea47793..f40218bb17b 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailHeader/AutomationDetailHeader.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailHeader/AutomationDetailHeader.tsx
@@ -36,9 +36,9 @@ export function AutomationDetailHeader({
 	runNowDisabled,
 }: AutomationDetailHeaderProps) {
 	return (
-		<header className="flex items-center justify-between border-b px-8 py-4">
+		<header className="flex h-11 shrink-0 items-center justify-between border-b border-border px-4">
 			<Breadcrumb>
-				<BreadcrumbList>
+				<BreadcrumbList className="text-sm">
 					<BreadcrumbItem>
 						<BreadcrumbLink onClick={onBack} className="cursor-pointer">
 							Automations
@@ -46,17 +46,17 @@ export function AutomationDetailHeader({
 					</BreadcrumbItem>
 					<BreadcrumbSeparator />
 					<BreadcrumbItem>
-						<BreadcrumbPage>{name}</BreadcrumbPage>
+						<BreadcrumbPage className="font-medium">{name}</BreadcrumbPage>
 					</BreadcrumbItem>
 				</BreadcrumbList>
 			</Breadcrumb>
 
-			<div className="flex items-center gap-2">
+			<div className="flex items-center gap-1">
 				<Tooltip>
 					<TooltipTrigger asChild>
 						<Button
 							variant="ghost"
-							size="icon"
+							size="icon-sm"
 							onClick={onOpenHistory}
 							aria-label="Version history"
 						>
@@ -69,7 +69,7 @@ export function AutomationDetailHeader({
 					<TooltipTrigger asChild>
 						<Button
 							variant="ghost"
-							size="icon"
+							size="icon-sm"
 							onClick={onToggleEnabled}
 							disabled={toggleDisabled}
 							aria-label={enabled ? "Pause" : "Resume"}
@@ -87,7 +87,7 @@ export function AutomationDetailHeader({
 					<TooltipTrigger asChild>
 						<Button
 							variant="ghost"
-							size="icon"
+							size="icon-sm"
 							onClick={onDelete}
 							disabled={deleteDisabled}
 							aria-label="Delete"
@@ -97,9 +97,16 @@ export function AutomationDetailHeader({
 					</TooltipTrigger>
 					<TooltipContent>Delete</TooltipContent>
 				</Tooltip>
-				<Button size="sm" onClick={onRunNow} disabled={runNowDisabled}>
+				<div className="mx-1 h-4 w-px bg-border" />
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-8 gap-1.5 px-3"
+					onClick={onRunNow}
+					disabled={runNowDisabled}
+				>
 					<LuPlay className="size-4" />
-					Run now
+					<span>Run now</span>
 				</Button>
 			</div>
 		</header>
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailSidebar/AutomationDetailSidebar.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailSidebar/AutomationDetailSidebar.tsx
index d704665d6a0..10216d01d55 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailSidebar/AutomationDetailSidebar.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/$automationId/components/AutomationDetailSidebar/AutomationDetailSidebar.tsx
@@ -54,8 +54,8 @@ export function AutomationDetailSidebar({
 		.sort((a, b) => b.getTime() - a.getTime())[0];
 
 	return (
-		<aside className="flex w-[368px] shrink-0 flex-col border-l overflow-hidden">
-			<div className="flex flex-col gap-8 p-6 pb-2 shrink-0">
+		<aside className="flex w-[360px] shrink-0 flex-col overflow-hidden border-l border-border">
+			<div className="flex shrink-0 flex-col gap-6 px-5 pt-5 pb-2">
 				<Section title="Status">
 					<Row
 						label="Status"
@@ -170,7 +170,7 @@ export function AutomationDetailSidebar({
 				</Section>
 			</div>
 
-			<div className="mt-8 flex min-h-0 flex-1 flex-col gap-2 pl-6 pr-3 pb-6">
+			<div className="mt-6 flex min-h-0 flex-1 flex-col gap-2 pl-5 pr-3 pb-5">
 				<SectionTitle>Previous runs</SectionTitle>
 				<div className="min-h-0 flex-1 overflow-y-auto">
 					<PreviousRunsList runs={recentRuns} />
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/components/AutomationsEmptyState/AutomationsEmptyState.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/components/AutomationsEmptyState/AutomationsEmptyState.tsx
index c23c14c0d07..49e27b33b3c 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/components/AutomationsEmptyState/AutomationsEmptyState.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/components/AutomationsEmptyState/AutomationsEmptyState.tsx
@@ -13,12 +13,22 @@ export function AutomationsEmptyState({
 	onSelectTemplate,
 }: AutomationsEmptyStateProps) {
 	return (
-		<div className="mx-auto max-w-5xl flex flex-col gap-8">
+		<div className="mx-auto flex max-w-5xl flex-col gap-8">
+			<div className="flex flex-col gap-1">
+				<h2 className="text-base font-semibold tracking-tight">
+					Start from a template
+				</h2>
+				<p className="text-sm text-muted-foreground">
+					Run an agent on a schedule to automate work.
+				</p>
+			</div>
 			{AUTOMATION_TEMPLATE_CATEGORIES.map((category) => (
 				<Fragment key={category.id}>
 					<section className="flex flex-col gap-3">
-						<h2 className="text-sm font-medium">{category.label}</h2>
-						<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+						<h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+							{category.label}
+						</h3>
+						<div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
 							{category.templates.map((template) => (
 								<TemplateCard
 									key={template.id}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx
index e0f62852a24..424fb7d5634 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/automations/page.tsx
@@ -24,16 +24,15 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@superset/ui/dropdown-menu";
-import { toast } from "@superset/ui/sonner";
 import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@superset/ui/table";
-import { ToggleGroup, ToggleGroupItem } from "@superset/ui/toggle-group";
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@superset/ui/empty";
+import { toast } from "@superset/ui/sonner";
+import { Tabs, TabsList, TabsTrigger } from "@superset/ui/tabs";
 import { cn } from "@superset/ui/utils";
 import { useLiveQuery } from "@tanstack/react-db";
 import { useMutation } from "@tanstack/react-query";
@@ -47,8 +46,10 @@ import {
 	LuPencil,
 	LuPlay,
 	LuPlus,
+	LuSearchX,
 	LuSparkles,
 	LuTrash2,
+	LuZap,
 } from "react-icons/lu";
 import { apiTrpcClient } from "renderer/lib/api-trpc-client";
 import { authClient } from "renderer/lib/auth-client";
@@ -69,6 +70,12 @@ export const Route = createFileRoute("/_authenticated/_dashboard/automations/")(
 
 type Scope = "mine" | "team";
 
+const ROW_GRID_MINE =
+	"grid grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.2fr)_2rem] items-center gap-4";
+
+const ROW_GRID_TEAM =
+	"grid grid-cols-[minmax(0,1.5fr)_minmax(0,0.8fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.2fr)_2rem] items-center gap-4";
+
 function AutomationsPage() {
 	const navigate = useNavigate();
 	const collections = useCollections();
@@ -202,254 +209,313 @@ function AutomationsPage() {
 		if (!next) setInitialTemplate(null);
 	};
 
+	const rowGrid = scope === "team" ? ROW_GRID_TEAM : ROW_GRID_MINE;
+
 	return (
 		<div className="flex h-full w-full flex-1 flex-col overflow-hidden">
-			<header className="flex items-start justify-between border-b px-8 py-6">
-				<div>
-					<h1 className="text-2xl font-semibold">Automations</h1>
-					<p className="mt-1 text-sm text-muted-foreground">
-						Run agents on a schedule to automate work.{" "}
-						<Button
-							asChild
-							variant="link"
-							size="sm"
-							className="p-0 h-auto align-baseline"
-						>
-							<a
-								href={`${COMPANY.DOCS_URL}/automations`}
-								target="_blank"
-								rel="noreferrer"
+			<header className="flex h-11 shrink-0 items-center justify-between border-b border-border px-4">
+				<div className="flex items-center gap-3">
+					<h1 className="text-sm font-semibold tracking-tight">Automations</h1>
+					<div className="h-4 w-px bg-border" />
+					<Tabs
+						value={scope}
+						onValueChange={(value) => {
+							if (value) setScope(value as Scope);
+						}}
+					>
+						<TabsList className="h-8 bg-transparent p-0 gap-1">
+							<TabsTrigger
+								value="mine"
+								className="h-8 rounded-md px-3 data-[state=active]:bg-accent data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground"
+							>
+								<span className="text-sm">Mine</span>
+								<span className="ml-1 tabular-nums text-xs text-muted-foreground">
+									{mineCount}
+								</span>
+							</TabsTrigger>
+							<TabsTrigger
+								value="team"
+								className="h-8 rounded-md px-3 data-[state=active]:bg-accent data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground"
 							>
-								Learn more
-							</a>
-						</Button>
-					</p>
+								<span className="text-sm">Team</span>
+								<span className="ml-1 tabular-nums text-xs text-muted-foreground">
+									{teamCount}
+								</span>
+							</TabsTrigger>
+						</TabsList>
+					</Tabs>
+				</div>
+
+				<div className="flex items-center gap-2">
+					<Button
+						asChild
+						variant="ghost"
+						size="sm"
+						className="h-8 text-muted-foreground"
+					>
+						<a
+							href={`${COMPANY.DOCS_URL}/automations`}
+							target="_blank"
+							rel="noreferrer"
+						>
+							Learn more
+						</a>
+					</Button>
+					<Button
+						type="button"
+						variant="outline"
+						size="sm"
+						className="h-8 gap-1.5 px-3"
+						onClick={() => setCreateOpen(true)}
+					>
+						<LuPlus className="size-4" />
+						<span>New automation</span>
+					</Button>
 				</div>
-				<Button type="button" onClick={() => setCreateOpen(true)}>
-					<LuPlus className="size-4" />
-					New automation
-				</Button>
 			</header>
 
-			<div className="flex-1 overflow-y-auto px-8 py-6">
+			<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
 				{!automationsReady ? null : automations.length === 0 ? (
-					<AutomationsEmptyState onSelectTemplate={handleSelectTemplate} />
-				) : (
-					<>
-						<div className="mb-4 flex justify-end">
-							<ToggleGroup
-								type="single"
-								variant="outline"
-								size="sm"
-								value={scope}
-								onValueChange={(v) => {
-									if (v) setScope(v as Scope);
-								}}
+					<div className="flex-1 overflow-y-auto px-8 py-8">
+						<AutomationsEmptyState onSelectTemplate={handleSelectTemplate} />
+					</div>
+				) : visible.length === 0 ? (
+					<Empty className="flex-1">
+						<EmptyHeader>
+							<EmptyMedia
+								variant="icon"
+								className="size-14 [&_svg:not([class*='size-'])]:size-7"
 							>
-								<ToggleGroupItem value="mine">
-									Mine{" "}
-									<span className="ml-1 text-muted-foreground">
-										{mineCount}
-									</span>
-								</ToggleGroupItem>
-								<ToggleGroupItem value="team">
-									Team{" "}
-									<span className="ml-1 text-muted-foreground">
-										{teamCount}
-									</span>
-								</ToggleGroupItem>
-							</ToggleGroup>
-						</div>
-
-						{visible.length === 0 ? (
-							<div className="rounded-md border border-dashed px-8 py-12 text-center text-sm text-muted-foreground">
+								{scope === "mine" ? <LuZap /> : <LuSearchX />}
+							</EmptyMedia>
+							<EmptyTitle>
 								{scope === "mine"
-									? "You haven't created any automations yet."
+									? "No automations yet"
+									: "No team automations"}
+							</EmptyTitle>
+							<EmptyDescription>
+								{scope === "mine"
+									? "Create one to run an agent on a schedule."
 									: "Nobody on your team has shared automations yet."}
-							</div>
-						) : (
-							<Table>
-								<TableHeader>
-									<TableRow>
-										<TableHead>Name</TableHead>
-										{scope === "team" && <TableHead>Owner</TableHead>}
-										<TableHead>Project</TableHead>
-										<TableHead>Workspace</TableHead>
-										<TableHead>Device</TableHead>
-										<TableHead>Agent</TableHead>
-										<TableHead>Schedule</TableHead>
-										<TableHead className="w-8" />
-									</TableRow>
-								</TableHeader>
-								<TableBody>
-									{visible.map((automation) => {
-										const owner = usersById.get(automation.ownerUserId);
-										const project = projectsById.get(automation.v2ProjectId);
-										const workspace = automation.v2WorkspaceId
-											? workspacesById.get(automation.v2WorkspaceId)
-											: null;
-										const workspaceLabel = !automation.v2WorkspaceId
-											? "New workspace"
-											: (workspace?.name ?? "Deleted");
-										const host = automation.targetHostId
-											? hostsById.get(automation.targetHostId)
-											: null;
-										return (
-											<TableRow
-												key={automation.id}
-												className="cursor-pointer"
-												onClick={() =>
-													navigate({
-														to: "/automations/$automationId",
-														params: { automationId: automation.id },
-													})
-												}
+							</EmptyDescription>
+						</EmptyHeader>
+					</Empty>
+				) : (
+					<div className="flex min-h-0 flex-1 flex-col">
+						<div
+							className={cn(
+								rowGrid,
+								"sticky top-0 z-10 h-8 border-b border-border bg-background px-4 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/80",
+							)}
+						>
+							<span>Name</span>
+							{scope === "team" && <span>Owner</span>}
+							<span>Project</span>
+							<span>Workspace</span>
+							<span>Device</span>
+							<span>Agent</span>
+							<span>Schedule</span>
+							<span />
+						</div>
+
+						<div className="min-h-0 flex-1 overflow-y-auto">
+							{visible.map((automation) => {
+								const owner = usersById.get(automation.ownerUserId);
+								const project = projectsById.get(automation.v2ProjectId);
+								const workspace = automation.v2WorkspaceId
+									? workspacesById.get(automation.v2WorkspaceId)
+									: null;
+								const workspaceLabel = !automation.v2WorkspaceId
+									? "New workspace"
+									: (workspace?.name ?? "Deleted");
+								const host = automation.targetHostId
+									? hostsById.get(automation.targetHostId)
+									: null;
+								const isOwner = automation.ownerUserId === currentUserId;
+
+								return (
+									// biome-ignore lint/a11y/useSemanticElements: row needs nested interactive elements
+									<div
+										key={automation.id}
+										role="button"
+										tabIndex={0}
+										onClick={() =>
+											navigate({
+												to: "/automations/$automationId",
+												params: { automationId: automation.id },
+											})
+										}
+										onKeyDown={(event) => {
+											if (event.target !== event.currentTarget) return;
+											if (event.key === "Enter" || event.key === " ") {
+												event.preventDefault();
+												navigate({
+													to: "/automations/$automationId",
+													params: { automationId: automation.id },
+												});
+											}
+										}}
+										className={cn(
+											rowGrid,
+											"group/row min-w-0 cursor-pointer border-b border-border/50 px-4 py-2.5 text-sm outline-none transition-colors hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-inset",
+										)}
+									>
+										<span className="flex min-w-0 items-center gap-2">
+											<span
+												className={cn(
+													"inline-block size-2 shrink-0 rounded-full",
+													automation.enabled
+														? "bg-emerald-500"
+														: "border border-muted-foreground/60",
+												)}
+											/>
+											<span
+												className={cn(
+													"min-w-0 truncate font-medium",
+													!automation.enabled && "text-muted-foreground",
+												)}
+												title={automation.name}
 											>
-												<TableCell
-													className={cn(
-														"font-medium",
-														!automation.enabled && "text-muted-foreground",
-													)}
+												{automation.name}
+											</span>
+											{!automation.enabled && (
+												<Badge
+													variant="secondary"
+													className="shrink-0 text-[10px]"
 												>
-													<span className="inline-flex items-center gap-2">
-														<span
-															className={cn(
-																"inline-block size-2 rounded-full shrink-0",
-																automation.enabled
-																	? "bg-emerald-500"
-																	: "border border-muted-foreground/60",
-															)}
-														/>
-														<span className="truncate">{automation.name}</span>
-														{!automation.enabled && (
-															<Badge
-																variant="secondary"
-																className="text-[10px]"
-															>
-																paused
-															</Badge>
-														)}
-													</span>
-												</TableCell>
-												{scope === "team" && (
-													<TableCell className="text-muted-foreground">
-														{owner?.name ?? owner?.email ?? "—"}
-													</TableCell>
-												)}
-												<TableCell className="text-muted-foreground">
-													<span className="inline-flex items-center gap-1.5">
-														{project ? (
-															<ProjectThumbnail
-																projectName={project.name}
-																iconUrl={project.iconUrl}
-																className="!size-4"
-															/>
-														) : null}
-														<span className="truncate">
-															{project?.name ?? "—"}
-														</span>
-													</span>
-												</TableCell>
-												<TableCell className="text-muted-foreground">
-													<CellWithIcon
-														icon={
-															automation.v2WorkspaceId ? (
-																<LuGitBranch className="size-3.5 shrink-0" />
-															) : (
-																<LuSparkles className="size-3.5 shrink-0" />
-															)
-														}
-														label={workspaceLabel}
-													/>
-												</TableCell>
-												<TableCell className="text-muted-foreground">
-													<CellWithIcon
-														icon={
-															<HiOutlineComputerDesktop className="size-3.5 shrink-0" />
-														}
-														label={host?.name ?? "Auto"}
-													/>
-												</TableCell>
-												<TableCell className="text-muted-foreground">
-													<AgentCell
-														agentId={automation.agentConfig.id}
-														label={automation.agentConfig.label}
-													/>
-												</TableCell>
-												<TableCell className="text-muted-foreground">
-													{describeSchedule(automation.rrule)}
-												</TableCell>
-												<TableCell>
-													{automation.ownerUserId === currentUserId && (
-														<DropdownMenu>
-															<DropdownMenuTrigger asChild>
-																<Button
-																	variant="ghost"
-																	size="icon-sm"
-																	onClick={(e) => e.stopPropagation()}
-																	aria-label="Row actions"
-																>
-																	<LuEllipsis className="size-4" />
-																</Button>
-															</DropdownMenuTrigger>
-															<DropdownMenuContent
-																align="end"
-																onClick={(e) => e.stopPropagation()}
-															>
-																<DropdownMenuItem
-																	onSelect={() =>
-																		navigate({
-																			to: "/automations/$automationId",
-																			params: {
-																				automationId: automation.id,
-																			},
-																		})
-																	}
-																>
-																	<LuPencil className="size-4" />
-																	Edit
-																</DropdownMenuItem>
-																<DropdownMenuItem
-																	onSelect={() =>
-																		runNowMutation.mutate({
-																			id: automation.id,
-																			name: automation.name,
-																		})
-																	}
-																>
-																	<LuPlay className="size-4" />
-																	Run now
-																</DropdownMenuItem>
-																<DropdownMenuItem
-																	onSelect={() =>
-																		navigate({
-																			to: "/automations/$automationId",
-																			params: { automationId: automation.id },
-																			search: { history: true },
-																		})
-																	}
-																>
-																	<LuClock className="size-4" />
-																	Version history
-																</DropdownMenuItem>
-																<DropdownMenuItem
-																	variant="destructive"
-																	onSelect={() => setPendingDelete(automation)}
-																>
-																	<LuTrash2 className="size-4" />
-																	Delete
-																</DropdownMenuItem>
-															</DropdownMenuContent>
-														</DropdownMenu>
-													)}
-												</TableCell>
-											</TableRow>
-										);
-									})}
-								</TableBody>
-							</Table>
-						)}
-					</>
+													paused
+												</Badge>
+											)}
+										</span>
+
+										{scope === "team" && (
+											<span
+												className="min-w-0 truncate text-xs text-muted-foreground"
+												title={owner?.email ?? undefined}
+											>
+												{owner?.name ?? owner?.email ?? "—"}
+											</span>
+										)}
+
+										<span className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+											{project ? (
+												<ProjectThumbnail
+													projectName={project.name}
+													iconUrl={project.iconUrl}
+													className="!size-3.5 shrink-0"
+												/>
+											) : null}
+											<span className="min-w-0 truncate">
+												{project?.name ?? "—"}
+											</span>
+										</span>
+
+										<span className="min-w-0 text-xs text-muted-foreground">
+											<CellWithIcon
+												icon={
+													automation.v2WorkspaceId ? (
+														<LuGitBranch className="size-3 shrink-0" />
+													) : (
+														<LuSparkles className="size-3 shrink-0" />
+													)
+												}
+												label={workspaceLabel}
+											/>
+										</span>
+
+										<span className="min-w-0 text-xs text-muted-foreground">
+											<CellWithIcon
+												icon={
+													<HiOutlineComputerDesktop className="size-3 shrink-0" />
+												}
+												label={host?.name ?? "Auto"}
+											/>
+										</span>
+
+										<span className="min-w-0 text-xs text-muted-foreground">
+											<AgentCell
+												agentId={automation.agentConfig.id}
+												label={automation.agentConfig.label}
+											/>
+										</span>
+
+										<span
+											className="min-w-0 truncate text-xs text-muted-foreground"
+											title={describeSchedule(automation.rrule)}
+										>
+											{describeSchedule(automation.rrule)}
+										</span>
+
+										<span className="flex items-center justify-end">
+											{isOwner && (
+												<DropdownMenu>
+													<DropdownMenuTrigger asChild>
+														<Button
+															variant="ghost"
+															size="icon-sm"
+															onClick={(e) => e.stopPropagation()}
+															aria-label="Row actions"
+															className="opacity-0 group-hover/row:opacity-100 data-[state=open]:opacity-100 focus-visible:opacity-100"
+														>
+															<LuEllipsis className="size-4" />
+														</Button>
+													</DropdownMenuTrigger>
+													<DropdownMenuContent
+														align="end"
+														onClick={(e) => e.stopPropagation()}
+													>
+														<DropdownMenuItem
+															onSelect={() =>
+																navigate({
+																	to: "/automations/$automationId",
+																	params: {
+																		automationId: automation.id,
+																	},
+																})
+															}
+														>
+															<LuPencil className="size-4" />
+															Edit
+														</DropdownMenuItem>
+														<DropdownMenuItem
+															onSelect={() =>
+																runNowMutation.mutate({
+																	id: automation.id,
+																	name: automation.name,
+																})
+															}
+														>
+															<LuPlay className="size-4" />
+															Run now
+														</DropdownMenuItem>
+														<DropdownMenuItem
+															onSelect={() =>
+																navigate({
+																	to: "/automations/$automationId",
+																	params: { automationId: automation.id },
+																	search: { history: true },
+																})
+															}
+														>
+															<LuClock className="size-4" />
+															Version history
+														</DropdownMenuItem>
+														<DropdownMenuItem
+															variant="destructive"
+															onSelect={() => setPendingDelete(automation)}
+														>
+															<LuTrash2 className="size-4" />
+															Delete
+														</DropdownMenuItem>
+													</DropdownMenuContent>
+												</DropdownMenu>
+											)}
+										</span>
+									</div>
+								);
+							})}
+						</div>
+					</div>
 				)}
 			</div>