From c02273315c8971d1f6e7917718564126b71d4d80 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 15:08:32 +0000
Subject: [PATCH 01/13] chore: remove bottom padding

---
 site/src/modules/dashboard/DashboardLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx
index 140d8602b2b32..5b96f84f8806d 100644
--- a/site/src/modules/dashboard/DashboardLayout.tsx
+++ b/site/src/modules/dashboard/DashboardLayout.tsx
@@ -26,7 +26,7 @@ export const DashboardLayout: FC = () => {
 			<div className="flex flex-col min-h-full">
 				<Navbar />
 
-				<div className="flex flex-col flex-1 pb-12">
+				<div className="flex flex-col flex-1">
 					<Suspense fallback={<Loader />}>
 						<Outlet />
 					</Suspense>

From b1952f9b06870c1a0394e8ff001609891cb23407 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 16:53:35 +0000
Subject: [PATCH 02/13] chore: convert to tailwind

---
 site/src/pages/WorkspacePage/Workspace.tsx | 289 ++++++++-------------
 1 file changed, 114 insertions(+), 175 deletions(-)

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index 07c5ec26d0766..4cbf7728d5e91 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -16,6 +16,7 @@ import type { WorkspacePermissions } from "../../modules/workspaces/permissions"
 import { HistorySidebar } from "./HistorySidebar";
 import { ResourceMetadata } from "./ResourceMetadata";
 import { ResourcesSidebar } from "./ResourcesSidebar";
+import { resourceOptionValue, useResourcesNav } from "./useResourcesNav";
 import { WorkspaceBuildLogsSection } from "./WorkspaceBuildLogsSection";
 import {
 	ActiveTransition,
@@ -23,7 +24,6 @@ import {
 } from "./WorkspaceBuildProgress";
 import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
 import { WorkspaceTopbar } from "./WorkspaceTopbar";
-import { resourceOptionValue, useResourcesNav } from "./useResourcesNav";
 
 interface WorkspaceProps {
 	workspace: TypesGen.Workspace;
@@ -100,18 +100,7 @@ export const Workspace: FC<WorkspaceProps> = ({
 		workspacePending && !haveBuildLogs && !provisionersHealthy && !isRestarting;
 
 	return (
-		<div
-			css={{
-				flex: 1,
-				display: "grid",
-				gridTemplate: `
-          "topbar topbar topbar" auto
-          "leftbar sidebar content" 1fr / auto auto 1fr
-        `,
-				// We need this to make the sidebar scrollable
-				overflow: "hidden",
-			}}
-		>
+		<div className="flex flex-col overflow-hidden flex-1">
 			<WorkspaceTopbar
 				workspace={workspace}
 				template={template}
@@ -130,153 +119,133 @@ export const Workspace: FC<WorkspaceProps> = ({
 				handleToggleFavorite={handleToggleFavorite}
 			/>
 
-			<div
-				css={{
-					gridArea: "leftbar",
-					height: "100%",
-					overflowY: "auto",
-					borderRight: `1px solid ${theme.palette.divider}`,
-					display: "flex",
-					flexDirection: "column",
-				}}
-			>
-				<SidebarIconButton
-					isActive={sidebarOption.value === "resources"}
-					onClick={() => {
-						setSidebarOption("resources");
-					}}
-				>
-					<HubOutlined />
-				</SidebarIconButton>
-				<SidebarIconButton
-					isActive={sidebarOption.value === "history"}
-					onClick={() => {
-						setSidebarOption("history");
-					}}
-				>
-					<HistoryOutlined />
-				</SidebarIconButton>
-			</div>
+			<div className="flex flex-1">
+				<div className="flex">
+					<div className="flex flex-col h-full overflow-y-auto border-solid border-0 border-r border-r-border">
+						<SidebarIconButton
+							isActive={sidebarOption.value === "resources"}
+							onClick={() => {
+								setSidebarOption("resources");
+							}}
+						>
+							<HubOutlined />
+						</SidebarIconButton>
+						<SidebarIconButton
+							isActive={sidebarOption.value === "history"}
+							onClick={() => {
+								setSidebarOption("history");
+							}}
+						>
+							<HistoryOutlined />
+						</SidebarIconButton>
+					</div>
 
-			{sidebarOption.value === "resources" && (
-				<ResourcesSidebar
-					failed={workspace.latest_build.status === "failed"}
-					resources={resources}
-					isSelected={resourcesNav.isSelected}
-					onChange={resourcesNav.select}
-				/>
-			)}
-			{sidebarOption.value === "history" && (
-				<HistorySidebar workspace={workspace} />
-			)}
+					{sidebarOption.value === "resources" && (
+						<ResourcesSidebar
+							failed={workspace.latest_build.status === "failed"}
+							resources={resources}
+							isSelected={resourcesNav.isSelected}
+							onChange={resourcesNav.select}
+						/>
+					)}
+					{sidebarOption.value === "history" && (
+						<HistorySidebar workspace={workspace} />
+					)}
+				</div>
 
-			<div css={[styles.content, styles.dotsBackground]}>
-				{selectedResource && (
-					<ResourceMetadata
-						resource={selectedResource}
-						css={{ margin: "-32px -32px 0 -32px", marginBottom: 24 }}
-					/>
-				)}
 				<div
-					css={{
-						display: "flex",
-						flexDirection: "column",
-						gap: 24,
-						maxWidth: 24 * 50,
-						margin: "auto",
+					style={{
+						background: `radial-gradient(
+      circle at 1px 1px,
+      hsl(var(--surface-invert-secondary)) 0,
+      transparent 1px
+    ) -2px -2px / 16px 16px;`,
 					}}
+					className="p-8 overflow-y-auto relative"
 				>
-					{workspace.latest_build.status === "deleted" && (
-						<WorkspaceDeletedBanner
-							handleClick={() => navigate("/templates")}
+					{selectedResource && (
+						<ResourceMetadata
+							resource={selectedResource}
+							className="-mx-8 -mt-8 mb-6"
 						/>
 					)}
+					<div className="flex flex-col gap-6 max-w-[1200px] m-auto">
+						{workspace.latest_build.status === "deleted" && (
+							<WorkspaceDeletedBanner
+								handleClick={() => navigate("/templates")}
+							/>
+						)}
 
-					{shouldShowProvisionerAlert && (
-						<ProvisionerStatusAlert
-							matchingProvisioners={
-								workspace.latest_build.matched_provisioners?.count
-							}
-							availableProvisioners={
-								workspace.latest_build.matched_provisioners?.available ?? 0
-							}
-							tags={workspace.latest_build.job.tags}
-						/>
-					)}
+						{shouldShowProvisionerAlert && (
+							<ProvisionerStatusAlert
+								matchingProvisioners={
+									workspace.latest_build.matched_provisioners?.count
+								}
+								availableProvisioners={
+									workspace.latest_build.matched_provisioners?.available ?? 0
+								}
+								tags={workspace.latest_build.job.tags}
+							/>
+						)}
 
-					{workspace.latest_build.job.error && (
-						<Alert severity="error">
-							<AlertTitle>Workspace build failed</AlertTitle>
-							<AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
-						</Alert>
-					)}
+						{workspace.latest_build.job.error && (
+							<Alert severity="error">
+								<AlertTitle>Workspace build failed</AlertTitle>
+								<AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
+							</Alert>
+						)}
 
-					{transitionStats !== undefined && (
-						<WorkspaceBuildProgress
-							workspace={workspace}
-							transitionStats={transitionStats}
-						/>
-					)}
+						{transitionStats !== undefined && (
+							<WorkspaceBuildProgress
+								workspace={workspace}
+								transitionStats={transitionStats}
+							/>
+						)}
 
-					{shouldShowBuildLogs && (
-						<WorkspaceBuildLogsSection logs={buildLogs} />
-					)}
+						{shouldShowBuildLogs && (
+							<WorkspaceBuildLogsSection logs={buildLogs} />
+						)}
 
-					{selectedResource && (
-						<section
-							css={{
-								display: "flex",
-								flexDirection: "column",
-								gap: 24,
-								flexGrow: 1,
-								minWidth: 0 /* Prevent overflow */,
-							}}
-						>
-							{selectedResource.agents
-								// If an agent has a `parent_id`, that means it is
-								// child of another agent. We do not want these agents
-								// to be displayed at the top-level on this page. We
-								// want them to display _as children_ of their parents.
-								?.filter((agent) => agent.parent_id === null)
-								.map((agent) => (
-									<AgentRow
-										key={agent.id}
-										agent={agent}
-										subAgents={selectedResource.agents?.filter(
-											(a) => a.parent_id === agent.id,
-										)}
-										workspace={workspace}
-										template={template}
-										onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
-									/>
-								))}
+						{selectedResource && (
+							<section className="flex flex-col gap-6 flex-grow min-w-0">
+								{selectedResource.agents
+									// If an agent has a `parent_id`, that means it is
+									// child of another agent. We do not want these agents
+									// to be displayed at the top-level on this page. We
+									// want them to display _as children_ of their parents.
+									?.filter((agent) => agent.parent_id === null)
+									.map((agent) => (
+										<AgentRow
+											key={agent.id}
+											agent={agent}
+											subAgents={selectedResource.agents?.filter(
+												(a) => a.parent_id === agent.id,
+											)}
+											workspace={workspace}
+											template={template}
+											onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
+										/>
+									))}
 
-							{(!selectedResource.agents ||
-								selectedResource.agents?.length === 0) && (
-								<div
-									css={{
-										display: "flex",
-										justifyContent: "center",
-										alignItems: "center",
-										width: "100%",
-										height: "100%",
-									}}
-								>
-									<div>
-										<h4 css={{ fontSize: 16, fontWeight: 500 }}>
-											No agents are currently assigned to this resource.
-										</h4>
+								{(!selectedResource.agents ||
+									selectedResource.agents?.length === 0) && (
+									<div className="flex justify-center items-center w-full h-full">
+										<div>
+											<h4 className="text-base font-medium">
+												No agents are currently assigned to this resource.
+											</h4>
+										</div>
 									</div>
-								</div>
-							)}
-						</section>
-					)}
+								)}
+							</section>
+						)}
 
-					<WorkspaceTimings
-						provisionerTimings={timings?.provisioner_timings}
-						agentScriptTimings={timings?.agent_script_timings}
-						agentConnectionTimings={timings?.agent_connection_timings}
-					/>
+						<WorkspaceTimings
+							provisionerTimings={timings?.provisioner_timings}
+							agentScriptTimings={timings?.agent_script_timings}
+							agentConnectionTimings={timings?.agent_connection_timings}
+						/>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -286,33 +255,3 @@ export const Workspace: FC<WorkspaceProps> = ({
 const countAgents = (resource: TypesGen.WorkspaceResource) => {
 	return resource.agents ? resource.agents.length : 0;
 };
-
-const styles = {
-	content: {
-		padding: 32,
-		gridArea: "content",
-		overflowY: "auto",
-		position: "relative",
-	},
-
-	dotsBackground: (theme) => ({
-		"--d": "1px",
-		background: `
-      radial-gradient(
-        circle at
-          var(--d)
-          var(--d),
-
-        ${theme.palette.dots} calc(var(--d) - 1px),
-        ${theme.palette.background.default} var(--d)
-      )
-      -2px -2px / 16px 16px
-    `,
-	}),
-
-	actions: (theme) => ({
-		[theme.breakpoints.down("md")]: {
-			flexDirection: "column",
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;

From 699700f5871e2c8e69211a47f7d1a0ef8939f3f6 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 16:55:47 +0000
Subject: [PATCH 03/13] fix: workspace width

---
 site/src/pages/WorkspacePage/Workspace.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index 4cbf7728d5e91..a475c884333f8 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -161,7 +161,7 @@ export const Workspace: FC<WorkspaceProps> = ({
       transparent 1px
     ) -2px -2px / 16px 16px;`,
 					}}
-					className="p-8 overflow-y-auto relative"
+					className="p-8 overflow-y-auto relative w-full"
 				>
 					{selectedResource && (
 						<ResourceMetadata

From fca38059ce68606e13e3364acfff1841eb1ef139 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 17:01:42 +0000
Subject: [PATCH 04/13] chore: use consistent whitespace

---
 site/src/pages/WorkspacePage/Workspace.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index a475c884333f8..ce65fea6efdc1 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -156,10 +156,10 @@ export const Workspace: FC<WorkspaceProps> = ({
 				<div
 					style={{
 						background: `radial-gradient(
-      circle at 1px 1px,
-      hsl(var(--surface-invert-secondary)) 0,
-      transparent 1px
-    ) -2px -2px / 16px 16px;`,
+			circle at 1px 1px,
+			hsl(var(--surface-invert-secondary)) 0,
+			transparent 1px
+		) -2px -2px / 16px 16px;`,
 					}}
 					className="p-8 overflow-y-auto relative w-full"
 				>

From 39e4321476df1cb1e04a3a86347cccac83797711 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 17:02:06 +0000
Subject: [PATCH 05/13] chore: remove unused import

---
 .../src/components/FullPageLayout/Sidebar.tsx |  14 +-
 .../pages/WorkspacePage/HistorySidebar.tsx    | 904 +++++++++++++++++-
 site/src/pages/WorkspacePage/Workspace.tsx    |   1 -
 3 files changed, 904 insertions(+), 15 deletions(-)

diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
index 8a5eaf9b4f6be..a25ebe04c70d2 100644
--- a/site/src/components/FullPageLayout/Sidebar.tsx
+++ b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -4,20 +4,10 @@ import { Link, type LinkProps } from "react-router";
 import { TopbarIconButton } from "./Topbar";
 
 export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
-	const theme = useTheme();
 	return (
 		<div
-			css={{
-				width: 260,
-				borderRight: `1px solid ${theme.palette.divider}`,
-				height: "100%",
-				overflow: "auto",
-				flexShrink: 0,
-				padding: "8px 0",
-				display: "flex",
-				flexDirection: "column",
-				gap: 1,
-			}}
+			// TODO: Remove extra border classes once MUI is removed
+			className="flex flex-col gap-px w-64 border-solid border-0 border-r border-r-border h-full py-2 shrink-0 overflow-y-auto"
 			{...props}
 		/>
 	);
diff --git a/site/src/pages/WorkspacePage/HistorySidebar.tsx b/site/src/pages/WorkspacePage/HistorySidebar.tsx
index 2d978fb2a7d83..e2ab4044088a3 100644
--- a/site/src/pages/WorkspacePage/HistorySidebar.tsx
+++ b/site/src/pages/WorkspacePage/HistorySidebar.tsx
@@ -1,6 +1,6 @@
 import ArrowDownwardOutlined from "@mui/icons-material/ArrowDownwardOutlined";
 import { infiniteWorkspaceBuilds } from "api/queries/workspaceBuilds";
-import type { Workspace } from "api/typesGenerated";
+import type { Workspace, WorkspaceBuild } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import {
 	Sidebar,
@@ -25,7 +25,7 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 		...infiniteWorkspaceBuilds(workspace?.id ?? ""),
 		enabled: workspace !== undefined,
 	});
-	const builds = buildsQuery.data?.pages.flat();
+	// const builds = buildsQuery.data?.pages.flat();
 
 	return (
 		<Sidebar>
@@ -63,3 +63,903 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 		</Sidebar>
 	);
 };
+
+const builds: WorkspaceBuild[] = [
+	{
+		id: "01234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T10:30:00Z",
+		updated_at: "2024-01-15T10:45:00Z",
+		workspace_id: "workspace-001",
+		workspace_name: "dev-environment",
+		workspace_owner_id: "user-001",
+		workspace_owner_name: "alice.smith",
+		workspace_owner_avatar_url: "https://example.com/avatars/alice.jpg",
+		template_version_id: "template-v1",
+		template_version_name: "Ubuntu 22.04 Dev",
+		build_number: 1,
+		transition: "start",
+		initiator_id: "user-001",
+		initiator_name: "alice.smith",
+		job: {
+			id: "job-001",
+			created_at: "2024-01-15T10:30:00Z",
+			status: "succeeded",
+			file_id: "file-001",
+			tags: { env: "dev" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-001",
+			input: { workspace_build_id: "01234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Ubuntu 22.04 Dev",
+				template_id: "template-001",
+				template_name: "dev-template",
+				template_display_name: "Development Template",
+				template_icon: "🖥️",
+				workspace_id: "workspace-001",
+				workspace_name: "dev-environment",
+			},
+			logs_overflowed: false,
+		},
+		reason: "dashboard",
+		resources: [],
+		deadline: "2024-01-15T18:30:00Z",
+		max_deadline: "2024-01-16T10:30:00Z",
+		status: "running",
+		daily_cost: 50,
+		template_version_preset_id: null,
+		has_ai_task: false,
+	},
+	{
+		id: "11234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T11:00:00Z",
+		updated_at: "2024-01-15T11:15:00Z",
+		workspace_id: "workspace-002",
+		workspace_name: "staging-env",
+		workspace_owner_id: "user-002",
+		workspace_owner_name: "bob.jones",
+		workspace_owner_avatar_url: "https://example.com/avatars/bob.jpg",
+		template_version_id: "template-v2",
+		template_version_name: "Node.js Production",
+		build_number: 3,
+		transition: "stop",
+		initiator_id: "user-002",
+		initiator_name: "bob.jones",
+		job: {
+			id: "job-002",
+			created_at: "2024-01-15T11:00:00Z",
+			status: "running",
+			file_id: "file-002",
+			tags: { env: "staging" },
+			queue_position: 1,
+			queue_size: 2,
+			organization_id: "org-001",
+			input: { workspace_build_id: "11234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Node.js Production",
+				template_id: "template-002",
+				template_name: "nodejs-template",
+				template_display_name: "Node.js Template",
+				template_icon: "⚡",
+				workspace_id: "workspace-002",
+				workspace_name: "staging-env",
+			},
+			logs_overflowed: false,
+		},
+		reason: "autostop",
+		resources: [],
+		status: "stopping",
+		daily_cost: 75,
+		template_version_preset_id: "preset-001",
+		has_ai_task: true,
+		ai_task_sidebar_app_id: "ai-app-001",
+	},
+	{
+		id: "21234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T12:00:00Z",
+		updated_at: "2024-01-15T12:20:00Z",
+		workspace_id: "workspace-003",
+		workspace_name: "ml-research",
+		workspace_owner_id: "user-003",
+		workspace_owner_name: "carol.white",
+		template_version_id: "template-v3",
+		template_version_name: "Python ML Stack",
+		build_number: 7,
+		transition: "start",
+		initiator_id: "user-003",
+		initiator_name: "carol.white",
+		job: {
+			id: "job-003",
+			created_at: "2024-01-15T12:00:00Z",
+			status: "succeeded",
+			file_id: "file-003",
+			tags: { env: "research", gpu: "true" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-002",
+			input: { workspace_build_id: "21234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Python ML Stack",
+				template_id: "template-003",
+				template_name: "ml-template",
+				template_display_name: "Machine Learning Template",
+				template_icon: "🤖",
+				workspace_id: "workspace-003",
+				workspace_name: "ml-research",
+			},
+			logs_overflowed: false,
+		},
+		reason: "cli",
+		resources: [],
+		deadline: "2024-01-15T20:00:00Z",
+		status: "running",
+		daily_cost: 120,
+		template_version_preset_id: null,
+		has_ai_task: false,
+	},
+	{
+		id: "31234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T13:30:00Z",
+		updated_at: "2024-01-15T13:35:00Z",
+		workspace_id: "workspace-004",
+		workspace_name: "frontend-dev",
+		workspace_owner_id: "user-004",
+		workspace_owner_name: "david.brown",
+		workspace_owner_avatar_url: "https://example.com/avatars/david.jpg",
+		template_version_id: "template-v4",
+		template_version_name: "React Development",
+		build_number: 2,
+		transition: "delete",
+		initiator_id: "user-004",
+		initiator_name: "david.brown",
+		job: {
+			id: "job-004",
+			created_at: "2024-01-15T13:30:00Z",
+			status: "failed",
+			error: "Resource allocation failed",
+			file_id: "file-004",
+			tags: { env: "dev", framework: "react" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-001",
+			input: { workspace_build_id: "31234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "React Development",
+				template_id: "template-004",
+				template_name: "react-template",
+				template_display_name: "React Template",
+				template_icon: "⚛️",
+				workspace_id: "workspace-004",
+				workspace_name: "frontend-dev",
+			},
+			logs_overflowed: false,
+		},
+		reason: "dashboard",
+		resources: [],
+		status: "failed",
+		daily_cost: 40,
+		template_version_preset_id: null,
+		has_ai_task: false,
+	},
+	{
+		id: "41234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T14:00:00Z",
+		updated_at: "2024-01-15T14:10:00Z",
+		workspace_id: "workspace-005",
+		workspace_name: "backend-api",
+		workspace_owner_id: "user-005",
+		workspace_owner_name: "eve.davis",
+		template_version_id: "template-v5",
+		template_version_name: "Go Microservices",
+		build_number: 5,
+		transition: "start",
+		initiator_id: "user-005",
+		initiator_name: "eve.davis",
+		job: {
+			id: "job-005",
+			created_at: "2024-01-15T14:00:00Z",
+			status: "pending",
+			file_id: "file-005",
+			tags: { env: "dev", language: "go" },
+			queue_position: 2,
+			queue_size: 3,
+			organization_id: "org-001",
+			input: { workspace_build_id: "41234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Go Microservices",
+				template_id: "template-005",
+				template_name: "go-template",
+				template_display_name: "Go Template",
+				template_icon: "🐹",
+				workspace_id: "workspace-005",
+				workspace_name: "backend-api",
+			},
+			logs_overflowed: false,
+		},
+		reason: "vscode_connection",
+		resources: [],
+		status: "pending",
+		daily_cost: 60,
+		template_version_preset_id: "preset-002",
+		has_ai_task: true,
+	},
+	{
+		id: "51234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T15:15:00Z",
+		updated_at: "2024-01-15T15:25:00Z",
+		workspace_id: "workspace-006",
+		workspace_name: "database-admin",
+		workspace_owner_id: "user-006",
+		workspace_owner_name: "frank.miller",
+		workspace_owner_avatar_url: "https://example.com/avatars/frank.jpg",
+		template_version_id: "template-v6",
+		template_version_name: "PostgreSQL Admin",
+		build_number: 1,
+		transition: "start",
+		initiator_id: "user-006",
+		initiator_name: "frank.miller",
+		job: {
+			id: "job-006",
+			created_at: "2024-01-15T15:15:00Z",
+			status: "running",
+			file_id: "file-006",
+			tags: { env: "prod", database: "postgresql" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-003",
+			input: { workspace_build_id: "51234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "PostgreSQL Admin",
+				template_id: "template-006",
+				template_name: "postgres-template",
+				template_display_name: "PostgreSQL Template",
+				template_icon: "🐘",
+				workspace_id: "workspace-006",
+				workspace_name: "database-admin",
+			},
+			logs_overflowed: false,
+		},
+		reason: "ssh_connection",
+		resources: [],
+		deadline: "2024-01-15T23:15:00Z",
+		status: "starting",
+		daily_cost: 80,
+		template_version_preset_id: null,
+		has_ai_task: false,
+	},
+	{
+		id: "61234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T16:00:00Z",
+		updated_at: "2024-01-15T16:05:00Z",
+		workspace_id: "workspace-007",
+		workspace_name: "mobile-dev",
+		workspace_owner_id: "user-007",
+		workspace_owner_name: "grace.wilson",
+		template_version_id: "template-v7",
+		template_version_name: "Flutter Development",
+		build_number: 4,
+		transition: "stop",
+		initiator_id: "user-007",
+		initiator_name: "grace.wilson",
+		job: {
+			id: "job-007",
+			created_at: "2024-01-15T16:00:00Z",
+			status: "canceled",
+			canceled_at: "2024-01-15T16:05:00Z",
+			file_id: "file-007",
+			tags: { env: "dev", platform: "mobile" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-001",
+			input: { workspace_build_id: "61234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Flutter Development",
+				template_id: "template-007",
+				template_name: "flutter-template",
+				template_display_name: "Flutter Template",
+				template_icon: "📱",
+				workspace_id: "workspace-007",
+				workspace_name: "mobile-dev",
+			},
+			logs_overflowed: false,
+		},
+		reason: "jetbrains_connection",
+		resources: [],
+		status: "canceled",
+		daily_cost: 45,
+		template_version_preset_id: "preset-003",
+		has_ai_task: false,
+	},
+	{
+		id: "71234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T17:30:00Z",
+		updated_at: "2024-01-15T17:45:00Z",
+		workspace_id: "workspace-008",
+		workspace_name: "devops-tools",
+		workspace_owner_id: "user-008",
+		workspace_owner_name: "henry.taylor",
+		workspace_owner_avatar_url: "https://example.com/avatars/henry.jpg",
+		template_version_id: "template-v8",
+		template_version_name: "Kubernetes Admin",
+		build_number: 6,
+		transition: "start",
+		initiator_id: "user-008",
+		initiator_name: "henry.taylor",
+		job: {
+			id: "job-008",
+			created_at: "2024-01-15T17:30:00Z",
+			status: "succeeded",
+			completed_at: "2024-01-15T17:45:00Z",
+			file_id: "file-008",
+			tags: { env: "ops", orchestration: "k8s" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-002",
+			input: { workspace_build_id: "71234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Kubernetes Admin",
+				template_id: "template-008",
+				template_name: "k8s-template",
+				template_display_name: "Kubernetes Template",
+				template_icon: "☸️",
+				workspace_id: "workspace-008",
+				workspace_name: "devops-tools",
+			},
+			logs_overflowed: false,
+		},
+		reason: "autostart",
+		resources: [],
+		deadline: "2024-01-16T01:30:00Z",
+		status: "running",
+		daily_cost: 95,
+		template_version_preset_id: null,
+		has_ai_task: true,
+		ai_task_sidebar_app_id: "ai-app-002",
+	},
+	{
+		id: "81234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T18:00:00Z",
+		updated_at: "2024-01-15T18:02:00Z",
+		workspace_id: "workspace-009",
+		workspace_name: "data-science",
+		workspace_owner_id: "user-009",
+		workspace_owner_name: "iris.anderson",
+		template_version_id: "template-v9",
+		template_version_name: "Jupyter Notebook",
+		build_number: 8,
+		transition: "delete",
+		initiator_id: "user-009",
+		initiator_name: "iris.anderson",
+		job: {
+			id: "job-009",
+			created_at: "2024-01-15T18:00:00Z",
+			status: "running",
+			file_id: "file-009",
+			tags: { env: "research", notebook: "jupyter" },
+			queue_position: 1,
+			queue_size: 2,
+			organization_id: "org-002",
+			input: { workspace_build_id: "81234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Jupyter Notebook",
+				template_id: "template-009",
+				template_name: "jupyter-template",
+				template_display_name: "Jupyter Template",
+				template_icon: "📊",
+				workspace_id: "workspace-009",
+				workspace_name: "data-science",
+			},
+			logs_overflowed: false,
+		},
+		reason: "dormancy",
+		resources: [],
+		status: "deleting",
+		daily_cost: 110,
+		template_version_preset_id: "preset-004",
+		has_ai_task: false,
+	},
+	{
+		id: "91234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T19:15:00Z",
+		updated_at: "2024-01-15T19:20:00Z",
+		workspace_id: "workspace-010",
+		workspace_name: "security-audit",
+		workspace_owner_id: "user-010",
+		workspace_owner_name: "jack.thomas",
+		workspace_owner_avatar_url: "https://example.com/avatars/jack.jpg",
+		template_version_id: "template-v10",
+		template_version_name: "Security Tools",
+		build_number: 2,
+		transition: "start",
+		initiator_id: "user-010",
+		initiator_name: "jack.thomas",
+		job: {
+			id: "job-010",
+			created_at: "2024-01-15T19:15:00Z",
+			status: "pending",
+			file_id: "file-010",
+			tags: { env: "security", audit: "true" },
+			queue_position: 3,
+			queue_size: 4,
+			organization_id: "org-003",
+			input: { workspace_build_id: "91234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Security Tools",
+				template_id: "template-010",
+				template_name: "security-template",
+				template_display_name: "Security Template",
+				template_icon: "🔒",
+				workspace_id: "workspace-010",
+				workspace_name: "security-audit",
+			},
+			logs_overflowed: false,
+		},
+		reason: "initiator",
+		resources: [],
+		status: "pending",
+		daily_cost: 70,
+		template_version_preset_id: null,
+		has_ai_task: false,
+	},
+	{
+		id: "a1234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T20:00:00Z",
+		updated_at: "2024-01-15T20:15:00Z",
+		workspace_id: "workspace-011",
+		workspace_name: "testing-env",
+		workspace_owner_id: "user-011",
+		workspace_owner_name: "kate.jackson",
+		template_version_id: "template-v11",
+		template_version_name: "Test Automation",
+		build_number: 3,
+		transition: "stop",
+		initiator_id: "user-011",
+		initiator_name: "kate.jackson",
+		job: {
+			id: "job-011",
+			created_at: "2024-01-15T20:00:00Z",
+			status: "succeeded",
+			completed_at: "2024-01-15T20:15:00Z",
+			file_id: "file-011",
+			tags: { env: "test", automation: "true" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-001",
+			input: { workspace_build_id: "a1234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Test Automation",
+				template_id: "template-011",
+				template_name: "test-template",
+				template_display_name: "Test Template",
+				template_icon: "🧪",
+				workspace_id: "workspace-011",
+				workspace_name: "testing-env",
+			},
+			logs_overflowed: false,
+		},
+		reason: "dashboard",
+		resources: [],
+		status: "stopped",
+		daily_cost: 35,
+		template_version_preset_id: "preset-005",
+		has_ai_task: true,
+	},
+	{
+		id: "b1234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T21:30:00Z",
+		updated_at: "2024-01-15T21:35:00Z",
+		workspace_id: "workspace-012",
+		workspace_name: "docs-site",
+		workspace_owner_id: "user-012",
+		workspace_owner_name: "liam.white",
+		workspace_owner_avatar_url: "https://example.com/avatars/liam.jpg",
+		template_version_id: "template-v12",
+		template_version_name: "Documentation Site",
+		build_number: 1,
+		transition: "start",
+		initiator_id: "user-012",
+		initiator_name: "liam.white",
+		job: {
+			id: "job-012",
+			created_at: "2024-01-15T21:30:00Z",
+			status: "failed",
+			error: "Template validation failed",
+			error_code: "REQUIRED_TEMPLATE_VARIABLES",
+			file_id: "file-012",
+			tags: { env: "docs", static: "true" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-001",
+			input: { workspace_build_id: "b1234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Documentation Site",
+				template_id: "template-012",
+				template_name: "docs-template",
+				template_display_name: "Documentation Template",
+				template_icon: "📚",
+				workspace_id: "workspace-012",
+				workspace_name: "docs-site",
+			},
+			logs_overflowed: false,
+		},
+		reason: "cli",
+		resources: [],
+		status: "failed",
+		daily_cost: 25,
+		template_version_preset_id: null,
+		has_ai_task: false,
+	},
+	{
+		id: "c1234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T22:00:00Z",
+		updated_at: "2024-01-15T22:10:00Z",
+		workspace_id: "workspace-013",
+		workspace_name: "ai-playground",
+		workspace_owner_id: "user-013",
+		workspace_owner_name: "mia.harris",
+		template_version_id: "template-v13",
+		template_version_name: "AI Development",
+		build_number: 5,
+		transition: "start",
+		initiator_id: "user-013",
+		initiator_name: "mia.harris",
+		job: {
+			id: "job-013",
+			created_at: "2024-01-15T22:00:00Z",
+			status: "running",
+			started_at: "2024-01-15T22:05:00Z",
+			file_id: "file-013",
+			tags: { env: "ai", gpu: "true", memory: "high" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-002",
+			input: { workspace_build_id: "c1234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "AI Development",
+				template_id: "template-013",
+				template_name: "ai-template",
+				template_display_name: "AI Template",
+				template_icon: "🧠",
+				workspace_id: "workspace-013",
+				workspace_name: "ai-playground",
+			},
+			logs_overflowed: false,
+		},
+		reason: "vscode_connection",
+		resources: [],
+		deadline: "2024-01-16T06:00:00Z",
+		max_deadline: "2024-01-16T22:00:00Z",
+		status: "starting",
+		daily_cost: 150,
+		template_version_preset_id: "preset-006",
+		has_ai_task: true,
+		ai_task_sidebar_app_id: "ai-app-003",
+	},
+	{
+		id: "d1234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-15T23:15:00Z",
+		updated_at: "2024-01-15T23:20:00Z",
+		workspace_id: "workspace-014",
+		workspace_name: "monitoring-stack",
+		workspace_owner_id: "user-014",
+		workspace_owner_name: "noah.martin",
+		workspace_owner_avatar_url: "https://example.com/avatars/noah.jpg",
+		template_version_id: "template-v14",
+		template_version_name: "Observability Stack",
+		build_number: 4,
+		transition: "stop",
+		initiator_id: "user-014",
+		initiator_name: "noah.martin",
+		job: {
+			id: "job-014",
+			created_at: "2024-01-15T23:15:00Z",
+			status: "canceling",
+			file_id: "file-014",
+			tags: { env: "monitoring", observability: "true" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-003",
+			input: { workspace_build_id: "d1234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Observability Stack",
+				template_id: "template-014",
+				template_name: "monitoring-template",
+				template_display_name: "Monitoring Template",
+				template_icon: "📈",
+				workspace_id: "workspace-014",
+				workspace_name: "monitoring-stack",
+			},
+			logs_overflowed: false,
+		},
+		reason: "autostop",
+		resources: [],
+		status: "canceling",
+		daily_cost: 85,
+		template_version_preset_id: null,
+		has_ai_task: false,
+	},
+	{
+		id: "e1234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-16T00:30:00Z",
+		updated_at: "2024-01-16T00:45:00Z",
+		workspace_id: "workspace-015",
+		workspace_name: "game-dev",
+		workspace_owner_id: "user-015",
+		workspace_owner_name: "olivia.garcia",
+		template_version_id: "template-v15",
+		template_version_name: "Unity Development",
+		build_number: 2,
+		transition: "start",
+		initiator_id: "user-015",
+		initiator_name: "olivia.garcia",
+		job: {
+			id: "job-015",
+			created_at: "2024-01-16T00:30:00Z",
+			status: "succeeded",
+			completed_at: "2024-01-16T00:45:00Z",
+			file_id: "file-015",
+			tags: { env: "gamedev", engine: "unity" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-001",
+			input: { workspace_build_id: "e1234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Unity Development",
+				template_id: "template-015",
+				template_name: "unity-template",
+				template_display_name: "Unity Template",
+				template_icon: "🎮",
+				workspace_id: "workspace-015",
+				workspace_name: "game-dev",
+			},
+			logs_overflowed: false,
+		},
+		reason: "jetbrains_connection",
+		resources: [],
+		deadline: "2024-01-16T08:30:00Z",
+		status: "running",
+		daily_cost: 90,
+		template_version_preset_id: "preset-007",
+		has_ai_task: false,
+	},
+	{
+		id: "f1234567-89ab-cdef-0123-456789abcdef",
+		created_at: "2024-01-16T01:00:00Z",
+		updated_at: "2024-01-16T01:05:00Z",
+		workspace_id: "workspace-016",
+		workspace_name: "blockchain-dev",
+		workspace_owner_id: "user-016",
+		workspace_owner_name: "paul.rodriguez",
+		workspace_owner_avatar_url: "https://example.com/avatars/paul.jpg",
+		template_version_id: "template-v16",
+		template_version_name: "Solidity Development",
+		build_number: 6,
+		transition: "delete",
+		initiator_id: "user-016",
+		initiator_name: "paul.rodriguez",
+		job: {
+			id: "job-016",
+			created_at: "2024-01-16T01:00:00Z",
+			status: "pending",
+			file_id: "file-016",
+			tags: { env: "blockchain", language: "solidity" },
+			queue_position: 2,
+			queue_size: 3,
+			organization_id: "org-002",
+			input: { workspace_build_id: "f1234567-89ab-cdef-0123-456789abcdef" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Solidity Development",
+				template_id: "template-016",
+				template_name: "solidity-template",
+				template_display_name: "Solidity Template",
+				template_icon: "⛓️",
+				workspace_id: "workspace-016",
+				workspace_name: "blockchain-dev",
+			},
+			logs_overflowed: false,
+		},
+		reason: "dashboard",
+		resources: [],
+		status: "pending",
+		daily_cost: 65,
+		template_version_preset_id: null,
+		has_ai_task: true,
+	},
+	{
+		id: "01234567-89ab-cdef-0123-456789abcde0",
+		created_at: "2024-01-16T02:15:00Z",
+		updated_at: "2024-01-16T02:30:00Z",
+		workspace_id: "workspace-017",
+		workspace_name: "iot-development",
+		workspace_owner_id: "user-017",
+		workspace_owner_name: "quinn.lee",
+		template_version_id: "template-v17",
+		template_version_name: "IoT Development",
+		build_number: 3,
+		transition: "start",
+		initiator_id: "user-017",
+		initiator_name: "quinn.lee",
+		job: {
+			id: "job-017",
+			created_at: "2024-01-16T02:15:00Z",
+			status: "running",
+			started_at: "2024-01-16T02:20:00Z",
+			file_id: "file-017",
+			tags: { env: "iot", embedded: "true" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-003",
+			input: { workspace_build_id: "01234567-89ab-cdef-0123-456789abcde0" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "IoT Development",
+				template_id: "template-017",
+				template_name: "iot-template",
+				template_display_name: "IoT Template",
+				template_icon: "🌐",
+				workspace_id: "workspace-017",
+				workspace_name: "iot-development",
+			},
+			logs_overflowed: false,
+		},
+		reason: "ssh_connection",
+		resources: [],
+		deadline: "2024-01-16T10:15:00Z",
+		status: "starting",
+		daily_cost: 55,
+		template_version_preset_id: "preset-008",
+		has_ai_task: false,
+	},
+	{
+		id: "01234567-89ab-cdef-0123-456789abcde1",
+		created_at: "2024-01-16T03:00:00Z",
+		updated_at: "2024-01-16T03:02:00Z",
+		workspace_id: "workspace-018",
+		workspace_name: "analytics-lab",
+		workspace_owner_id: "user-018",
+		workspace_owner_name: "ruby.clark",
+		workspace_owner_avatar_url: "https://example.com/avatars/ruby.jpg",
+		template_version_id: "template-v18",
+		template_version_name: "Data Analytics",
+		build_number: 7,
+		transition: "stop",
+		initiator_id: "user-018",
+		initiator_name: "ruby.clark",
+		job: {
+			id: "job-018",
+			created_at: "2024-01-16T03:00:00Z",
+			status: "failed",
+			error: "Network timeout during provisioning",
+			file_id: "file-018",
+			tags: { env: "analytics", bigdata: "true" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-002",
+			input: { workspace_build_id: "01234567-89ab-cdef-0123-456789abcde1" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Data Analytics",
+				template_id: "template-018",
+				template_name: "analytics-template",
+				template_display_name: "Analytics Template",
+				template_icon: "📊",
+				workspace_id: "workspace-018",
+				workspace_name: "analytics-lab",
+			},
+			logs_overflowed: true,
+		},
+		reason: "autostart",
+		resources: [],
+		status: "failed",
+		daily_cost: 100,
+		template_version_preset_id: null,
+		has_ai_task: true,
+		ai_task_sidebar_app_id: "ai-app-004",
+	},
+	{
+		id: "01234567-89ab-cdef-0123-456789abcde2",
+		created_at: "2024-01-16T04:30:00Z",
+		updated_at: "2024-01-16T04:45:00Z",
+		workspace_id: "workspace-019",
+		workspace_name: "design-studio",
+		workspace_owner_id: "user-019",
+		workspace_owner_name: "sam.lewis",
+		template_version_id: "template-v19",
+		template_version_name: "Design Tools",
+		build_number: 1,
+		transition: "start",
+		initiator_id: "user-019",
+		initiator_name: "sam.lewis",
+		job: {
+			id: "job-019",
+			created_at: "2024-01-16T04:30:00Z",
+			status: "succeeded",
+			completed_at: "2024-01-16T04:45:00Z",
+			file_id: "file-019",
+			tags: { env: "design", creative: "true" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-001",
+			input: { workspace_build_id: "01234567-89ab-cdef-0123-456789abcde2" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Design Tools",
+				template_id: "template-019",
+				template_name: "design-template",
+				template_display_name: "Design Template",
+				template_icon: "🎨",
+				workspace_id: "workspace-019",
+				workspace_name: "design-studio",
+			},
+			logs_overflowed: false,
+		},
+		reason: "cli",
+		resources: [],
+		deadline: "2024-01-16T12:30:00Z",
+		status: "running",
+		daily_cost: 70,
+		template_version_preset_id: "preset-009",
+		has_ai_task: false,
+	},
+	{
+		id: "01234567-89ab-cdef-0123-456789abcde3",
+		created_at: "2024-01-16T05:00:00Z",
+		updated_at: "2024-01-16T05:10:00Z",
+		workspace_id: "workspace-020",
+		workspace_name: "legacy-migration",
+		workspace_owner_id: "user-020",
+		workspace_owner_name: "tara.walker",
+		workspace_owner_avatar_url: "https://example.com/avatars/tara.jpg",
+		template_version_id: "template-v20",
+		template_version_name: "Legacy System Migration",
+		build_number: 9,
+		transition: "delete",
+		initiator_id: "user-020",
+		initiator_name: "tara.walker",
+		job: {
+			id: "job-020",
+			created_at: "2024-01-16T05:00:00Z",
+			status: "succeeded",
+			completed_at: "2024-01-16T05:10:00Z",
+			file_id: "file-020",
+			tags: { env: "migration", legacy: "true" },
+			queue_position: 0,
+			queue_size: 1,
+			organization_id: "org-003",
+			input: { workspace_build_id: "01234567-89ab-cdef-0123-456789abcde3" },
+			type: "workspace_build",
+			metadata: {
+				template_version_name: "Legacy System Migration",
+				template_id: "template-020",
+				template_name: "migration-template",
+				template_display_name: "Migration Template",
+				template_icon: "🔄",
+				workspace_id: "workspace-020",
+				workspace_name: "legacy-migration",
+			},
+			logs_overflowed: false,
+		},
+		reason: "dormancy",
+		resources: [],
+		status: "deleted",
+		daily_cost: 30,
+		template_version_preset_id: null,
+		has_ai_task: false,
+	},
+];
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index ce65fea6efdc1..579448824240c 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import { useTheme } from "@emotion/react";
 import HistoryOutlined from "@mui/icons-material/HistoryOutlined";
 import HubOutlined from "@mui/icons-material/HubOutlined";

From b23645580a2934b14923f393b7b99192c864469a Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 17:12:14 +0000
Subject: [PATCH 06/13] fix: bring back the dots

---
 site/src/pages/WorkspacePage/Workspace.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index 579448824240c..1e15d41e1679e 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -158,7 +158,7 @@ export const Workspace: FC<WorkspaceProps> = ({
 			circle at 1px 1px,
 			hsl(var(--surface-invert-secondary)) 0,
 			transparent 1px
-		) -2px -2px / 16px 16px;`,
+		) -2px -2px / 16px 16px`,
 					}}
 					className="p-8 overflow-y-auto relative w-full"
 				>

From 804daf40ce30462d5e8692ddd93531a381fa370d Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 17:43:51 +0000
Subject: [PATCH 07/13] chore: convert to tailwind

---
 .../src/components/FullPageLayout/Sidebar.tsx | 86 ++++++-------------
 1 file changed, 25 insertions(+), 61 deletions(-)

diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
index a25ebe04c70d2..521ac0375d0b6 100644
--- a/site/src/components/FullPageLayout/Sidebar.tsx
+++ b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -1,6 +1,7 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import type { Interpolation, Theme } from "@emotion/react";
 import type { ComponentProps, FC, HTMLAttributes } from "react";
 import { Link, type LinkProps } from "react-router";
+import { cn } from "utils/cn";
 import { TopbarIconButton } from "./Topbar";
 
 export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
@@ -13,8 +14,16 @@ export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 	);
 };
 
-export const SidebarLink: FC<LinkProps> = (props) => {
-	return <Link css={styles.sidebarItem} {...props} />;
+export const SidebarLink: FC<LinkProps> = ({ className, ...props }) => {
+	return (
+		<Link
+			className={cn(
+				"text-[13px] text-content-primary py-2 px-4 text-left bg-transparent hover:divide-surface-tertiary cursor-pointer border-0 no-underline",
+				className,
+			)}
+			{...props}
+		/>
+	);
 };
 
 interface SidebarItemProps extends HTMLAttributes<HTMLButtonElement> {
@@ -23,21 +32,16 @@ interface SidebarItemProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const SidebarItem: FC<SidebarItemProps> = ({
 	isActive,
+	className,
 	...buttonProps
 }) => {
-	const theme = useTheme();
-
 	return (
 		<button
-			css={[
-				styles.sidebarItem,
-				{ opacity: "0.75", "&:hover": { opacity: 1 } },
-				isActive && {
-					background: theme.palette.action.selected,
-					opacity: 1,
-					pointerEvents: "none",
-				},
-			]}
+			className={cn(
+				"text-[13px] text-content-primary py-2 px-4 text-left bg-transparent hover:divide-surface-tertiary opacity-75 hover:opacity-100 cursor-pointer border-0",
+				isActive && "opacity-100 bg-surface-tertiary",
+				className,
+			)}
 			{...buttonProps}
 		/>
 	);
@@ -46,15 +50,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
 export const SidebarCaption: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 	return (
 		<span
-			css={{
-				fontSize: 10,
-				lineHeight: 1.2,
-				padding: "12px 16px",
-				display: "block",
-				textTransform: "uppercase",
-				fontWeight: 500,
-				letterSpacing: "0.1em",
-			}}
+			className="text-[10px] leading-tight py-3 px-4 uppercase font-medium text-content-primary tracking-widest"
 			{...props}
 		/>
 	);
@@ -66,49 +62,17 @@ interface SidebarIconButton extends ComponentProps<typeof TopbarIconButton> {
 
 export const SidebarIconButton: FC<SidebarIconButton> = ({
 	isActive,
+	className,
 	...buttonProps
 }) => {
 	return (
 		<TopbarIconButton
-			css={[
-				{ opacity: 0.75, "&:hover": { opacity: 1 } },
-				isActive && styles.activeSidebarIconButton,
-			]}
+			className={cn(
+				"opacity-75 hover:opacity-100 border-0 border-x-2 border-x-transparent border-solid",
+				isActive && "opacity-100 relative border-l-sky-400",
+				className,
+			)}
 			{...buttonProps}
 		/>
 	);
 };
-
-const styles = {
-	sidebarItem: (theme) => ({
-		fontSize: 13,
-		lineHeight: 1.2,
-		color: theme.palette.text.primary,
-		textDecoration: "none",
-		padding: "8px 16px",
-		display: "block",
-		textAlign: "left",
-		background: "none",
-		border: 0,
-		cursor: "pointer",
-
-		"&:hover": {
-			backgroundColor: theme.palette.action.hover,
-		},
-	}),
-
-	activeSidebarIconButton: (theme) => ({
-		opacity: 1,
-		position: "relative",
-		"&::before": {
-			content: '""',
-			position: "absolute",
-			left: 0,
-			top: 0,
-			bottom: 0,
-			width: 2,
-			backgroundColor: theme.palette.primary.main,
-			height: "100%",
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;

From a947e633708ed5b258d57d3a4bd2d524f2586586 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 17:44:05 +0000
Subject: [PATCH 08/13] chore: remove unused import

---
 site/src/components/FullPageLayout/Sidebar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
index 521ac0375d0b6..f58e97ac607c2 100644
--- a/site/src/components/FullPageLayout/Sidebar.tsx
+++ b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import type { ComponentProps, FC, HTMLAttributes } from "react";
 import { Link, type LinkProps } from "react-router";
 import { cn } from "utils/cn";

From 4496305d1f3a99b170295901794dc1b9ae958029 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 18:51:24 +0000
Subject: [PATCH 09/13] chore: better scroll behavior on history overflow

---
 site/src/modules/dashboard/DashboardLayout.tsx   | 4 ++--
 site/src/modules/dashboard/Navbar/NavbarView.tsx | 2 +-
 site/src/pages/WorkspacePage/Workspace.tsx       | 5 +++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx
index 5b96f84f8806d..2fdc04d21da9d 100644
--- a/site/src/modules/dashboard/DashboardLayout.tsx
+++ b/site/src/modules/dashboard/DashboardLayout.tsx
@@ -23,10 +23,10 @@ export const DashboardLayout: FC = () => {
 			{canViewDeployment && <LicenseBanner />}
 			<AnnouncementBanners />
 
-			<div className="flex flex-col min-h-full">
+			<div className="flex flex-col h-screen">
 				<Navbar />
 
-				<div className="flex flex-col flex-1">
+				<div className="flex flex-col flex-1 min-h-0">
 					<Suspense fallback={<Loader />}>
 						<Outlet />
 					</Suspense>
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
index 14ecbe660d4a6..4a2b3027a47dd 100644
--- a/site/src/modules/dashboard/Navbar/NavbarView.tsx
+++ b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -51,7 +51,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 	const webPush = useWebpushNotifications();
 
 	return (
-		<div className="border-0 border-b border-solid h-[72px] flex items-center leading-none px-6">
+		<div className="border-0 border-b border-solid h-[72px] min-h-[72px] flex items-center leading-none px-6">
 			<NavLink to="/workspaces">
 				{logo_url ? (
 					<ExternalImage className="h-7" src={logo_url} alt="Custom Logo" />
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index 1e15d41e1679e..1a32a8777366c 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -23,6 +23,7 @@ import {
 } from "./WorkspaceBuildProgress";
 import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
 import { WorkspaceTopbar } from "./WorkspaceTopbar";
+import { height } from "@mui/system";
 
 interface WorkspaceProps {
 	workspace: TypesGen.Workspace;
@@ -99,7 +100,7 @@ export const Workspace: FC<WorkspaceProps> = ({
 		workspacePending && !haveBuildLogs && !provisionersHealthy && !isRestarting;
 
 	return (
-		<div className="flex flex-col overflow-hidden flex-1">
+		<div className="flex flex-col flex-1 min-h-0">
 			<WorkspaceTopbar
 				workspace={workspace}
 				template={template}
@@ -118,7 +119,7 @@ export const Workspace: FC<WorkspaceProps> = ({
 				handleToggleFavorite={handleToggleFavorite}
 			/>
 
-			<div className="flex flex-1">
+			<div className="flex flex-1 min-h-0">
 				<div className="flex">
 					<div className="flex flex-col h-full overflow-y-auto border-solid border-0 border-r border-r-border">
 						<SidebarIconButton

From 1dea27952b79cb665adaeea18d13214db370ff1d Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 19:30:47 +0000
Subject: [PATCH 10/13] fix: use real data

---
 .../pages/WorkspacePage/HistorySidebar.tsx    | 903 +-----------------
 1 file changed, 2 insertions(+), 901 deletions(-)

diff --git a/site/src/pages/WorkspacePage/HistorySidebar.tsx b/site/src/pages/WorkspacePage/HistorySidebar.tsx
index e2ab4044088a3..498187bbe5d4e 100644
--- a/site/src/pages/WorkspacePage/HistorySidebar.tsx
+++ b/site/src/pages/WorkspacePage/HistorySidebar.tsx
@@ -1,6 +1,6 @@
 import ArrowDownwardOutlined from "@mui/icons-material/ArrowDownwardOutlined";
 import { infiniteWorkspaceBuilds } from "api/queries/workspaceBuilds";
-import type { Workspace, WorkspaceBuild } from "api/typesGenerated";
+import type { Workspace } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import {
 	Sidebar,
@@ -25,7 +25,7 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 		...infiniteWorkspaceBuilds(workspace?.id ?? ""),
 		enabled: workspace !== undefined,
 	});
-	// const builds = buildsQuery.data?.pages.flat();
+	const builds = buildsQuery.data?.pages.flat();
 
 	return (
 		<Sidebar>
@@ -64,902 +64,3 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 	);
 };
 
-const builds: WorkspaceBuild[] = [
-	{
-		id: "01234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T10:30:00Z",
-		updated_at: "2024-01-15T10:45:00Z",
-		workspace_id: "workspace-001",
-		workspace_name: "dev-environment",
-		workspace_owner_id: "user-001",
-		workspace_owner_name: "alice.smith",
-		workspace_owner_avatar_url: "https://example.com/avatars/alice.jpg",
-		template_version_id: "template-v1",
-		template_version_name: "Ubuntu 22.04 Dev",
-		build_number: 1,
-		transition: "start",
-		initiator_id: "user-001",
-		initiator_name: "alice.smith",
-		job: {
-			id: "job-001",
-			created_at: "2024-01-15T10:30:00Z",
-			status: "succeeded",
-			file_id: "file-001",
-			tags: { env: "dev" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-001",
-			input: { workspace_build_id: "01234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Ubuntu 22.04 Dev",
-				template_id: "template-001",
-				template_name: "dev-template",
-				template_display_name: "Development Template",
-				template_icon: "🖥️",
-				workspace_id: "workspace-001",
-				workspace_name: "dev-environment",
-			},
-			logs_overflowed: false,
-		},
-		reason: "dashboard",
-		resources: [],
-		deadline: "2024-01-15T18:30:00Z",
-		max_deadline: "2024-01-16T10:30:00Z",
-		status: "running",
-		daily_cost: 50,
-		template_version_preset_id: null,
-		has_ai_task: false,
-	},
-	{
-		id: "11234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T11:00:00Z",
-		updated_at: "2024-01-15T11:15:00Z",
-		workspace_id: "workspace-002",
-		workspace_name: "staging-env",
-		workspace_owner_id: "user-002",
-		workspace_owner_name: "bob.jones",
-		workspace_owner_avatar_url: "https://example.com/avatars/bob.jpg",
-		template_version_id: "template-v2",
-		template_version_name: "Node.js Production",
-		build_number: 3,
-		transition: "stop",
-		initiator_id: "user-002",
-		initiator_name: "bob.jones",
-		job: {
-			id: "job-002",
-			created_at: "2024-01-15T11:00:00Z",
-			status: "running",
-			file_id: "file-002",
-			tags: { env: "staging" },
-			queue_position: 1,
-			queue_size: 2,
-			organization_id: "org-001",
-			input: { workspace_build_id: "11234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Node.js Production",
-				template_id: "template-002",
-				template_name: "nodejs-template",
-				template_display_name: "Node.js Template",
-				template_icon: "⚡",
-				workspace_id: "workspace-002",
-				workspace_name: "staging-env",
-			},
-			logs_overflowed: false,
-		},
-		reason: "autostop",
-		resources: [],
-		status: "stopping",
-		daily_cost: 75,
-		template_version_preset_id: "preset-001",
-		has_ai_task: true,
-		ai_task_sidebar_app_id: "ai-app-001",
-	},
-	{
-		id: "21234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T12:00:00Z",
-		updated_at: "2024-01-15T12:20:00Z",
-		workspace_id: "workspace-003",
-		workspace_name: "ml-research",
-		workspace_owner_id: "user-003",
-		workspace_owner_name: "carol.white",
-		template_version_id: "template-v3",
-		template_version_name: "Python ML Stack",
-		build_number: 7,
-		transition: "start",
-		initiator_id: "user-003",
-		initiator_name: "carol.white",
-		job: {
-			id: "job-003",
-			created_at: "2024-01-15T12:00:00Z",
-			status: "succeeded",
-			file_id: "file-003",
-			tags: { env: "research", gpu: "true" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-002",
-			input: { workspace_build_id: "21234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Python ML Stack",
-				template_id: "template-003",
-				template_name: "ml-template",
-				template_display_name: "Machine Learning Template",
-				template_icon: "🤖",
-				workspace_id: "workspace-003",
-				workspace_name: "ml-research",
-			},
-			logs_overflowed: false,
-		},
-		reason: "cli",
-		resources: [],
-		deadline: "2024-01-15T20:00:00Z",
-		status: "running",
-		daily_cost: 120,
-		template_version_preset_id: null,
-		has_ai_task: false,
-	},
-	{
-		id: "31234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T13:30:00Z",
-		updated_at: "2024-01-15T13:35:00Z",
-		workspace_id: "workspace-004",
-		workspace_name: "frontend-dev",
-		workspace_owner_id: "user-004",
-		workspace_owner_name: "david.brown",
-		workspace_owner_avatar_url: "https://example.com/avatars/david.jpg",
-		template_version_id: "template-v4",
-		template_version_name: "React Development",
-		build_number: 2,
-		transition: "delete",
-		initiator_id: "user-004",
-		initiator_name: "david.brown",
-		job: {
-			id: "job-004",
-			created_at: "2024-01-15T13:30:00Z",
-			status: "failed",
-			error: "Resource allocation failed",
-			file_id: "file-004",
-			tags: { env: "dev", framework: "react" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-001",
-			input: { workspace_build_id: "31234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "React Development",
-				template_id: "template-004",
-				template_name: "react-template",
-				template_display_name: "React Template",
-				template_icon: "⚛️",
-				workspace_id: "workspace-004",
-				workspace_name: "frontend-dev",
-			},
-			logs_overflowed: false,
-		},
-		reason: "dashboard",
-		resources: [],
-		status: "failed",
-		daily_cost: 40,
-		template_version_preset_id: null,
-		has_ai_task: false,
-	},
-	{
-		id: "41234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T14:00:00Z",
-		updated_at: "2024-01-15T14:10:00Z",
-		workspace_id: "workspace-005",
-		workspace_name: "backend-api",
-		workspace_owner_id: "user-005",
-		workspace_owner_name: "eve.davis",
-		template_version_id: "template-v5",
-		template_version_name: "Go Microservices",
-		build_number: 5,
-		transition: "start",
-		initiator_id: "user-005",
-		initiator_name: "eve.davis",
-		job: {
-			id: "job-005",
-			created_at: "2024-01-15T14:00:00Z",
-			status: "pending",
-			file_id: "file-005",
-			tags: { env: "dev", language: "go" },
-			queue_position: 2,
-			queue_size: 3,
-			organization_id: "org-001",
-			input: { workspace_build_id: "41234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Go Microservices",
-				template_id: "template-005",
-				template_name: "go-template",
-				template_display_name: "Go Template",
-				template_icon: "🐹",
-				workspace_id: "workspace-005",
-				workspace_name: "backend-api",
-			},
-			logs_overflowed: false,
-		},
-		reason: "vscode_connection",
-		resources: [],
-		status: "pending",
-		daily_cost: 60,
-		template_version_preset_id: "preset-002",
-		has_ai_task: true,
-	},
-	{
-		id: "51234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T15:15:00Z",
-		updated_at: "2024-01-15T15:25:00Z",
-		workspace_id: "workspace-006",
-		workspace_name: "database-admin",
-		workspace_owner_id: "user-006",
-		workspace_owner_name: "frank.miller",
-		workspace_owner_avatar_url: "https://example.com/avatars/frank.jpg",
-		template_version_id: "template-v6",
-		template_version_name: "PostgreSQL Admin",
-		build_number: 1,
-		transition: "start",
-		initiator_id: "user-006",
-		initiator_name: "frank.miller",
-		job: {
-			id: "job-006",
-			created_at: "2024-01-15T15:15:00Z",
-			status: "running",
-			file_id: "file-006",
-			tags: { env: "prod", database: "postgresql" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-003",
-			input: { workspace_build_id: "51234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "PostgreSQL Admin",
-				template_id: "template-006",
-				template_name: "postgres-template",
-				template_display_name: "PostgreSQL Template",
-				template_icon: "🐘",
-				workspace_id: "workspace-006",
-				workspace_name: "database-admin",
-			},
-			logs_overflowed: false,
-		},
-		reason: "ssh_connection",
-		resources: [],
-		deadline: "2024-01-15T23:15:00Z",
-		status: "starting",
-		daily_cost: 80,
-		template_version_preset_id: null,
-		has_ai_task: false,
-	},
-	{
-		id: "61234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T16:00:00Z",
-		updated_at: "2024-01-15T16:05:00Z",
-		workspace_id: "workspace-007",
-		workspace_name: "mobile-dev",
-		workspace_owner_id: "user-007",
-		workspace_owner_name: "grace.wilson",
-		template_version_id: "template-v7",
-		template_version_name: "Flutter Development",
-		build_number: 4,
-		transition: "stop",
-		initiator_id: "user-007",
-		initiator_name: "grace.wilson",
-		job: {
-			id: "job-007",
-			created_at: "2024-01-15T16:00:00Z",
-			status: "canceled",
-			canceled_at: "2024-01-15T16:05:00Z",
-			file_id: "file-007",
-			tags: { env: "dev", platform: "mobile" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-001",
-			input: { workspace_build_id: "61234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Flutter Development",
-				template_id: "template-007",
-				template_name: "flutter-template",
-				template_display_name: "Flutter Template",
-				template_icon: "📱",
-				workspace_id: "workspace-007",
-				workspace_name: "mobile-dev",
-			},
-			logs_overflowed: false,
-		},
-		reason: "jetbrains_connection",
-		resources: [],
-		status: "canceled",
-		daily_cost: 45,
-		template_version_preset_id: "preset-003",
-		has_ai_task: false,
-	},
-	{
-		id: "71234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T17:30:00Z",
-		updated_at: "2024-01-15T17:45:00Z",
-		workspace_id: "workspace-008",
-		workspace_name: "devops-tools",
-		workspace_owner_id: "user-008",
-		workspace_owner_name: "henry.taylor",
-		workspace_owner_avatar_url: "https://example.com/avatars/henry.jpg",
-		template_version_id: "template-v8",
-		template_version_name: "Kubernetes Admin",
-		build_number: 6,
-		transition: "start",
-		initiator_id: "user-008",
-		initiator_name: "henry.taylor",
-		job: {
-			id: "job-008",
-			created_at: "2024-01-15T17:30:00Z",
-			status: "succeeded",
-			completed_at: "2024-01-15T17:45:00Z",
-			file_id: "file-008",
-			tags: { env: "ops", orchestration: "k8s" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-002",
-			input: { workspace_build_id: "71234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Kubernetes Admin",
-				template_id: "template-008",
-				template_name: "k8s-template",
-				template_display_name: "Kubernetes Template",
-				template_icon: "☸️",
-				workspace_id: "workspace-008",
-				workspace_name: "devops-tools",
-			},
-			logs_overflowed: false,
-		},
-		reason: "autostart",
-		resources: [],
-		deadline: "2024-01-16T01:30:00Z",
-		status: "running",
-		daily_cost: 95,
-		template_version_preset_id: null,
-		has_ai_task: true,
-		ai_task_sidebar_app_id: "ai-app-002",
-	},
-	{
-		id: "81234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T18:00:00Z",
-		updated_at: "2024-01-15T18:02:00Z",
-		workspace_id: "workspace-009",
-		workspace_name: "data-science",
-		workspace_owner_id: "user-009",
-		workspace_owner_name: "iris.anderson",
-		template_version_id: "template-v9",
-		template_version_name: "Jupyter Notebook",
-		build_number: 8,
-		transition: "delete",
-		initiator_id: "user-009",
-		initiator_name: "iris.anderson",
-		job: {
-			id: "job-009",
-			created_at: "2024-01-15T18:00:00Z",
-			status: "running",
-			file_id: "file-009",
-			tags: { env: "research", notebook: "jupyter" },
-			queue_position: 1,
-			queue_size: 2,
-			organization_id: "org-002",
-			input: { workspace_build_id: "81234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Jupyter Notebook",
-				template_id: "template-009",
-				template_name: "jupyter-template",
-				template_display_name: "Jupyter Template",
-				template_icon: "📊",
-				workspace_id: "workspace-009",
-				workspace_name: "data-science",
-			},
-			logs_overflowed: false,
-		},
-		reason: "dormancy",
-		resources: [],
-		status: "deleting",
-		daily_cost: 110,
-		template_version_preset_id: "preset-004",
-		has_ai_task: false,
-	},
-	{
-		id: "91234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T19:15:00Z",
-		updated_at: "2024-01-15T19:20:00Z",
-		workspace_id: "workspace-010",
-		workspace_name: "security-audit",
-		workspace_owner_id: "user-010",
-		workspace_owner_name: "jack.thomas",
-		workspace_owner_avatar_url: "https://example.com/avatars/jack.jpg",
-		template_version_id: "template-v10",
-		template_version_name: "Security Tools",
-		build_number: 2,
-		transition: "start",
-		initiator_id: "user-010",
-		initiator_name: "jack.thomas",
-		job: {
-			id: "job-010",
-			created_at: "2024-01-15T19:15:00Z",
-			status: "pending",
-			file_id: "file-010",
-			tags: { env: "security", audit: "true" },
-			queue_position: 3,
-			queue_size: 4,
-			organization_id: "org-003",
-			input: { workspace_build_id: "91234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Security Tools",
-				template_id: "template-010",
-				template_name: "security-template",
-				template_display_name: "Security Template",
-				template_icon: "🔒",
-				workspace_id: "workspace-010",
-				workspace_name: "security-audit",
-			},
-			logs_overflowed: false,
-		},
-		reason: "initiator",
-		resources: [],
-		status: "pending",
-		daily_cost: 70,
-		template_version_preset_id: null,
-		has_ai_task: false,
-	},
-	{
-		id: "a1234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T20:00:00Z",
-		updated_at: "2024-01-15T20:15:00Z",
-		workspace_id: "workspace-011",
-		workspace_name: "testing-env",
-		workspace_owner_id: "user-011",
-		workspace_owner_name: "kate.jackson",
-		template_version_id: "template-v11",
-		template_version_name: "Test Automation",
-		build_number: 3,
-		transition: "stop",
-		initiator_id: "user-011",
-		initiator_name: "kate.jackson",
-		job: {
-			id: "job-011",
-			created_at: "2024-01-15T20:00:00Z",
-			status: "succeeded",
-			completed_at: "2024-01-15T20:15:00Z",
-			file_id: "file-011",
-			tags: { env: "test", automation: "true" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-001",
-			input: { workspace_build_id: "a1234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Test Automation",
-				template_id: "template-011",
-				template_name: "test-template",
-				template_display_name: "Test Template",
-				template_icon: "🧪",
-				workspace_id: "workspace-011",
-				workspace_name: "testing-env",
-			},
-			logs_overflowed: false,
-		},
-		reason: "dashboard",
-		resources: [],
-		status: "stopped",
-		daily_cost: 35,
-		template_version_preset_id: "preset-005",
-		has_ai_task: true,
-	},
-	{
-		id: "b1234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T21:30:00Z",
-		updated_at: "2024-01-15T21:35:00Z",
-		workspace_id: "workspace-012",
-		workspace_name: "docs-site",
-		workspace_owner_id: "user-012",
-		workspace_owner_name: "liam.white",
-		workspace_owner_avatar_url: "https://example.com/avatars/liam.jpg",
-		template_version_id: "template-v12",
-		template_version_name: "Documentation Site",
-		build_number: 1,
-		transition: "start",
-		initiator_id: "user-012",
-		initiator_name: "liam.white",
-		job: {
-			id: "job-012",
-			created_at: "2024-01-15T21:30:00Z",
-			status: "failed",
-			error: "Template validation failed",
-			error_code: "REQUIRED_TEMPLATE_VARIABLES",
-			file_id: "file-012",
-			tags: { env: "docs", static: "true" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-001",
-			input: { workspace_build_id: "b1234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Documentation Site",
-				template_id: "template-012",
-				template_name: "docs-template",
-				template_display_name: "Documentation Template",
-				template_icon: "📚",
-				workspace_id: "workspace-012",
-				workspace_name: "docs-site",
-			},
-			logs_overflowed: false,
-		},
-		reason: "cli",
-		resources: [],
-		status: "failed",
-		daily_cost: 25,
-		template_version_preset_id: null,
-		has_ai_task: false,
-	},
-	{
-		id: "c1234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T22:00:00Z",
-		updated_at: "2024-01-15T22:10:00Z",
-		workspace_id: "workspace-013",
-		workspace_name: "ai-playground",
-		workspace_owner_id: "user-013",
-		workspace_owner_name: "mia.harris",
-		template_version_id: "template-v13",
-		template_version_name: "AI Development",
-		build_number: 5,
-		transition: "start",
-		initiator_id: "user-013",
-		initiator_name: "mia.harris",
-		job: {
-			id: "job-013",
-			created_at: "2024-01-15T22:00:00Z",
-			status: "running",
-			started_at: "2024-01-15T22:05:00Z",
-			file_id: "file-013",
-			tags: { env: "ai", gpu: "true", memory: "high" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-002",
-			input: { workspace_build_id: "c1234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "AI Development",
-				template_id: "template-013",
-				template_name: "ai-template",
-				template_display_name: "AI Template",
-				template_icon: "🧠",
-				workspace_id: "workspace-013",
-				workspace_name: "ai-playground",
-			},
-			logs_overflowed: false,
-		},
-		reason: "vscode_connection",
-		resources: [],
-		deadline: "2024-01-16T06:00:00Z",
-		max_deadline: "2024-01-16T22:00:00Z",
-		status: "starting",
-		daily_cost: 150,
-		template_version_preset_id: "preset-006",
-		has_ai_task: true,
-		ai_task_sidebar_app_id: "ai-app-003",
-	},
-	{
-		id: "d1234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-15T23:15:00Z",
-		updated_at: "2024-01-15T23:20:00Z",
-		workspace_id: "workspace-014",
-		workspace_name: "monitoring-stack",
-		workspace_owner_id: "user-014",
-		workspace_owner_name: "noah.martin",
-		workspace_owner_avatar_url: "https://example.com/avatars/noah.jpg",
-		template_version_id: "template-v14",
-		template_version_name: "Observability Stack",
-		build_number: 4,
-		transition: "stop",
-		initiator_id: "user-014",
-		initiator_name: "noah.martin",
-		job: {
-			id: "job-014",
-			created_at: "2024-01-15T23:15:00Z",
-			status: "canceling",
-			file_id: "file-014",
-			tags: { env: "monitoring", observability: "true" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-003",
-			input: { workspace_build_id: "d1234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Observability Stack",
-				template_id: "template-014",
-				template_name: "monitoring-template",
-				template_display_name: "Monitoring Template",
-				template_icon: "📈",
-				workspace_id: "workspace-014",
-				workspace_name: "monitoring-stack",
-			},
-			logs_overflowed: false,
-		},
-		reason: "autostop",
-		resources: [],
-		status: "canceling",
-		daily_cost: 85,
-		template_version_preset_id: null,
-		has_ai_task: false,
-	},
-	{
-		id: "e1234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-16T00:30:00Z",
-		updated_at: "2024-01-16T00:45:00Z",
-		workspace_id: "workspace-015",
-		workspace_name: "game-dev",
-		workspace_owner_id: "user-015",
-		workspace_owner_name: "olivia.garcia",
-		template_version_id: "template-v15",
-		template_version_name: "Unity Development",
-		build_number: 2,
-		transition: "start",
-		initiator_id: "user-015",
-		initiator_name: "olivia.garcia",
-		job: {
-			id: "job-015",
-			created_at: "2024-01-16T00:30:00Z",
-			status: "succeeded",
-			completed_at: "2024-01-16T00:45:00Z",
-			file_id: "file-015",
-			tags: { env: "gamedev", engine: "unity" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-001",
-			input: { workspace_build_id: "e1234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Unity Development",
-				template_id: "template-015",
-				template_name: "unity-template",
-				template_display_name: "Unity Template",
-				template_icon: "🎮",
-				workspace_id: "workspace-015",
-				workspace_name: "game-dev",
-			},
-			logs_overflowed: false,
-		},
-		reason: "jetbrains_connection",
-		resources: [],
-		deadline: "2024-01-16T08:30:00Z",
-		status: "running",
-		daily_cost: 90,
-		template_version_preset_id: "preset-007",
-		has_ai_task: false,
-	},
-	{
-		id: "f1234567-89ab-cdef-0123-456789abcdef",
-		created_at: "2024-01-16T01:00:00Z",
-		updated_at: "2024-01-16T01:05:00Z",
-		workspace_id: "workspace-016",
-		workspace_name: "blockchain-dev",
-		workspace_owner_id: "user-016",
-		workspace_owner_name: "paul.rodriguez",
-		workspace_owner_avatar_url: "https://example.com/avatars/paul.jpg",
-		template_version_id: "template-v16",
-		template_version_name: "Solidity Development",
-		build_number: 6,
-		transition: "delete",
-		initiator_id: "user-016",
-		initiator_name: "paul.rodriguez",
-		job: {
-			id: "job-016",
-			created_at: "2024-01-16T01:00:00Z",
-			status: "pending",
-			file_id: "file-016",
-			tags: { env: "blockchain", language: "solidity" },
-			queue_position: 2,
-			queue_size: 3,
-			organization_id: "org-002",
-			input: { workspace_build_id: "f1234567-89ab-cdef-0123-456789abcdef" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Solidity Development",
-				template_id: "template-016",
-				template_name: "solidity-template",
-				template_display_name: "Solidity Template",
-				template_icon: "⛓️",
-				workspace_id: "workspace-016",
-				workspace_name: "blockchain-dev",
-			},
-			logs_overflowed: false,
-		},
-		reason: "dashboard",
-		resources: [],
-		status: "pending",
-		daily_cost: 65,
-		template_version_preset_id: null,
-		has_ai_task: true,
-	},
-	{
-		id: "01234567-89ab-cdef-0123-456789abcde0",
-		created_at: "2024-01-16T02:15:00Z",
-		updated_at: "2024-01-16T02:30:00Z",
-		workspace_id: "workspace-017",
-		workspace_name: "iot-development",
-		workspace_owner_id: "user-017",
-		workspace_owner_name: "quinn.lee",
-		template_version_id: "template-v17",
-		template_version_name: "IoT Development",
-		build_number: 3,
-		transition: "start",
-		initiator_id: "user-017",
-		initiator_name: "quinn.lee",
-		job: {
-			id: "job-017",
-			created_at: "2024-01-16T02:15:00Z",
-			status: "running",
-			started_at: "2024-01-16T02:20:00Z",
-			file_id: "file-017",
-			tags: { env: "iot", embedded: "true" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-003",
-			input: { workspace_build_id: "01234567-89ab-cdef-0123-456789abcde0" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "IoT Development",
-				template_id: "template-017",
-				template_name: "iot-template",
-				template_display_name: "IoT Template",
-				template_icon: "🌐",
-				workspace_id: "workspace-017",
-				workspace_name: "iot-development",
-			},
-			logs_overflowed: false,
-		},
-		reason: "ssh_connection",
-		resources: [],
-		deadline: "2024-01-16T10:15:00Z",
-		status: "starting",
-		daily_cost: 55,
-		template_version_preset_id: "preset-008",
-		has_ai_task: false,
-	},
-	{
-		id: "01234567-89ab-cdef-0123-456789abcde1",
-		created_at: "2024-01-16T03:00:00Z",
-		updated_at: "2024-01-16T03:02:00Z",
-		workspace_id: "workspace-018",
-		workspace_name: "analytics-lab",
-		workspace_owner_id: "user-018",
-		workspace_owner_name: "ruby.clark",
-		workspace_owner_avatar_url: "https://example.com/avatars/ruby.jpg",
-		template_version_id: "template-v18",
-		template_version_name: "Data Analytics",
-		build_number: 7,
-		transition: "stop",
-		initiator_id: "user-018",
-		initiator_name: "ruby.clark",
-		job: {
-			id: "job-018",
-			created_at: "2024-01-16T03:00:00Z",
-			status: "failed",
-			error: "Network timeout during provisioning",
-			file_id: "file-018",
-			tags: { env: "analytics", bigdata: "true" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-002",
-			input: { workspace_build_id: "01234567-89ab-cdef-0123-456789abcde1" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Data Analytics",
-				template_id: "template-018",
-				template_name: "analytics-template",
-				template_display_name: "Analytics Template",
-				template_icon: "📊",
-				workspace_id: "workspace-018",
-				workspace_name: "analytics-lab",
-			},
-			logs_overflowed: true,
-		},
-		reason: "autostart",
-		resources: [],
-		status: "failed",
-		daily_cost: 100,
-		template_version_preset_id: null,
-		has_ai_task: true,
-		ai_task_sidebar_app_id: "ai-app-004",
-	},
-	{
-		id: "01234567-89ab-cdef-0123-456789abcde2",
-		created_at: "2024-01-16T04:30:00Z",
-		updated_at: "2024-01-16T04:45:00Z",
-		workspace_id: "workspace-019",
-		workspace_name: "design-studio",
-		workspace_owner_id: "user-019",
-		workspace_owner_name: "sam.lewis",
-		template_version_id: "template-v19",
-		template_version_name: "Design Tools",
-		build_number: 1,
-		transition: "start",
-		initiator_id: "user-019",
-		initiator_name: "sam.lewis",
-		job: {
-			id: "job-019",
-			created_at: "2024-01-16T04:30:00Z",
-			status: "succeeded",
-			completed_at: "2024-01-16T04:45:00Z",
-			file_id: "file-019",
-			tags: { env: "design", creative: "true" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-001",
-			input: { workspace_build_id: "01234567-89ab-cdef-0123-456789abcde2" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Design Tools",
-				template_id: "template-019",
-				template_name: "design-template",
-				template_display_name: "Design Template",
-				template_icon: "🎨",
-				workspace_id: "workspace-019",
-				workspace_name: "design-studio",
-			},
-			logs_overflowed: false,
-		},
-		reason: "cli",
-		resources: [],
-		deadline: "2024-01-16T12:30:00Z",
-		status: "running",
-		daily_cost: 70,
-		template_version_preset_id: "preset-009",
-		has_ai_task: false,
-	},
-	{
-		id: "01234567-89ab-cdef-0123-456789abcde3",
-		created_at: "2024-01-16T05:00:00Z",
-		updated_at: "2024-01-16T05:10:00Z",
-		workspace_id: "workspace-020",
-		workspace_name: "legacy-migration",
-		workspace_owner_id: "user-020",
-		workspace_owner_name: "tara.walker",
-		workspace_owner_avatar_url: "https://example.com/avatars/tara.jpg",
-		template_version_id: "template-v20",
-		template_version_name: "Legacy System Migration",
-		build_number: 9,
-		transition: "delete",
-		initiator_id: "user-020",
-		initiator_name: "tara.walker",
-		job: {
-			id: "job-020",
-			created_at: "2024-01-16T05:00:00Z",
-			status: "succeeded",
-			completed_at: "2024-01-16T05:10:00Z",
-			file_id: "file-020",
-			tags: { env: "migration", legacy: "true" },
-			queue_position: 0,
-			queue_size: 1,
-			organization_id: "org-003",
-			input: { workspace_build_id: "01234567-89ab-cdef-0123-456789abcde3" },
-			type: "workspace_build",
-			metadata: {
-				template_version_name: "Legacy System Migration",
-				template_id: "template-020",
-				template_name: "migration-template",
-				template_display_name: "Migration Template",
-				template_icon: "🔄",
-				workspace_id: "workspace-020",
-				workspace_name: "legacy-migration",
-			},
-			logs_overflowed: false,
-		},
-		reason: "dormancy",
-		resources: [],
-		status: "deleted",
-		daily_cost: 30,
-		template_version_preset_id: null,
-		has_ai_task: false,
-	},
-];

From dc2b37e2b0873b28cc07ed046452afe09795db55 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 19:32:41 +0000
Subject: [PATCH 11/13] chore: lint

---
 site/src/pages/WorkspacePage/HistorySidebar.tsx | 1 -
 site/src/pages/WorkspacePage/Workspace.tsx      | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/site/src/pages/WorkspacePage/HistorySidebar.tsx b/site/src/pages/WorkspacePage/HistorySidebar.tsx
index 498187bbe5d4e..2d978fb2a7d83 100644
--- a/site/src/pages/WorkspacePage/HistorySidebar.tsx
+++ b/site/src/pages/WorkspacePage/HistorySidebar.tsx
@@ -63,4 +63,3 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 		</Sidebar>
 	);
 };
-
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index 1a32a8777366c..37f30ab2f2d8d 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import HistoryOutlined from "@mui/icons-material/HistoryOutlined";
 import HubOutlined from "@mui/icons-material/HubOutlined";
 import AlertTitle from "@mui/material/AlertTitle";
@@ -23,7 +22,6 @@ import {
 } from "./WorkspaceBuildProgress";
 import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
 import { WorkspaceTopbar } from "./WorkspaceTopbar";
-import { height } from "@mui/system";
 
 interface WorkspaceProps {
 	workspace: TypesGen.Workspace;
@@ -68,7 +66,6 @@ export const Workspace: FC<WorkspaceProps> = ({
 	handleDebug,
 }) => {
 	const navigate = useNavigate();
-	const theme = useTheme();
 
 	const transitionStats =
 		template !== undefined ? ActiveTransition(template, workspace) : undefined;

From dd5af7eb8aab95bbc8047ba73f4ef4e5679ff853 Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Wed, 13 Aug 2025 19:37:30 +0000
Subject: [PATCH 12/13] chore: fmt

---
 site/src/pages/WorkspacePage/Workspace.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index 37f30ab2f2d8d..b96ddcdf7b7fe 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -14,7 +14,6 @@ import type { WorkspacePermissions } from "../../modules/workspaces/permissions"
 import { HistorySidebar } from "./HistorySidebar";
 import { ResourceMetadata } from "./ResourceMetadata";
 import { ResourcesSidebar } from "./ResourcesSidebar";
-import { resourceOptionValue, useResourcesNav } from "./useResourcesNav";
 import { WorkspaceBuildLogsSection } from "./WorkspaceBuildLogsSection";
 import {
 	ActiveTransition,
@@ -22,6 +21,7 @@ import {
 } from "./WorkspaceBuildProgress";
 import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
 import { WorkspaceTopbar } from "./WorkspaceTopbar";
+import { resourceOptionValue, useResourcesNav } from "./useResourcesNav";
 
 interface WorkspaceProps {
 	workspace: TypesGen.Workspace;

From 3646e460e5faecf4a3e165f5e13597ee7f43269a Mon Sep 17 00:00:00 2001
From: Brett Kolodny <brett.kolodny@coder.com>
Date: Thu, 14 Aug 2025 13:19:07 +0000
Subject: [PATCH 13/13] chore: use scroll area component

---
 .../pages/WorkspacePage/HistorySidebar.tsx    | 63 ++++++++++---------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/site/src/pages/WorkspacePage/HistorySidebar.tsx b/site/src/pages/WorkspacePage/HistorySidebar.tsx
index 2d978fb2a7d83..037aeec4b8b87 100644
--- a/site/src/pages/WorkspacePage/HistorySidebar.tsx
+++ b/site/src/pages/WorkspacePage/HistorySidebar.tsx
@@ -8,6 +8,7 @@ import {
 	SidebarItem,
 	SidebarLink,
 } from "components/FullPageLayout/Sidebar";
+import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import { Spinner } from "components/Spinner/Spinner";
 import {
 	WorkspaceBuildData,
@@ -30,36 +31,40 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 	return (
 		<Sidebar>
 			<SidebarCaption>History</SidebarCaption>
-			{builds
-				? builds.map((build) => (
-						<SidebarLink
-							target="_blank"
-							key={build.id}
-							to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
-						>
-							<WorkspaceBuildData build={build} />
-						</SidebarLink>
-					))
-				: Array.from({ length: 15 }, (_, i) => (
-						<SidebarItem key={i}>
-							<WorkspaceBuildDataSkeleton />
-						</SidebarItem>
-					))}
-			{buildsQuery.hasNextPage && (
-				<div css={{ padding: 16 }}>
-					<Button
-						onClick={() => buildsQuery.fetchNextPage()}
-						disabled={buildsQuery.isFetchingNextPage}
-						variant="outline"
-						className="w-full"
-					>
-						<Spinner loading={buildsQuery.isFetchingNextPage}>
-							<ArrowDownwardOutlined />
-						</Spinner>
-						Show more builds
-					</Button>
+			<ScrollArea>
+				<div className="flex flex-col gap-px">
+					{builds
+						? builds.map((build) => (
+								<SidebarLink
+									target="_blank"
+									key={build.id}
+									to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
+								>
+									<WorkspaceBuildData build={build} />
+								</SidebarLink>
+							))
+						: Array.from({ length: 15 }, (_, i) => (
+								<SidebarItem key={i}>
+									<WorkspaceBuildDataSkeleton />
+								</SidebarItem>
+							))}
+					{buildsQuery.hasNextPage && (
+						<div css={{ padding: 16 }}>
+							<Button
+								onClick={() => buildsQuery.fetchNextPage()}
+								disabled={buildsQuery.isFetchingNextPage}
+								variant="outline"
+								className="w-full"
+							>
+								<Spinner loading={buildsQuery.isFetchingNextPage}>
+									<ArrowDownwardOutlined />
+								</Spinner>
+								Show more builds
+							</Button>
+						</div>
+					)}
 				</div>
-			)}
+			</ScrollArea>
 		</Sidebar>
 	);
 };