coder
diff --git a/‎site/src/api/queries/workspaceBuilds.ts
Lines changed: 3 additions & 2 deletions b/‎site/src/api/queries/workspaceBuilds.ts
Lines changed: 3 additions & 2 deletions
diff --git a/‎site/src/api/typesGenerated.ts
Lines changed: 1 addition & 0 deletions b/‎site/src/api/typesGenerated.ts
Lines changed: 1 addition & 0 deletions
diff --git a/‎site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx
Lines changed: 6 additions & 7 deletions b/‎site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx
Lines changed: 6 additions & 7 deletions
diff --git a/‎site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx
Lines changed: 5 additions & 7 deletions b/‎site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx
Lines changed: 5 additions & 7 deletions
@@ -57,9 +57,10 @@ export const infiniteWorkspaceBuilds = (
 	};
 };
 
-export const workspaceBuildTimings = (workspaceBuildId: string) => {
+// We use readyAgentsCount to invalidate the query when an agent connects
+export const workspaceBuildTimings = (workspaceBuildId: string, readyAgentsCount: number) => {
 	return {
-		queryKey: ["workspaceBuilds", workspaceBuildId, "timings"],
+		queryKey: ["workspaceBuilds", workspaceBuildId, "timings", { readyAgentsCount }],
 		queryFn: () => API.workspaceBuildTimings(workspaceBuildId),
 	};
 };
@@ -26,7 +26,8 @@ import {
 	makeTicks,
 	mergeTimeRanges,
 } from "./Chart/utils";
-import type { StageCategory } from "./StagesChart";
+import { type Theme, useTheme } from "@emotion/react";
+import type { Stage } from "./StagesChart";
 
 type ResourceTiming = {
 	name: string;
@@ -36,14 +37,12 @@ type ResourceTiming = {
 };
 
 export type ResourcesChartProps = {
-	category: StageCategory;
-	stage: string;
+	stage: Stage;
 	timings: ResourceTiming[];
 	onBack: () => void;
 };
 
 export const ResourcesChart: FC<ResourcesChartProps> = ({
-	category,
 	stage,
 	timings,
 	onBack,
@@ -67,11 +66,11 @@ export const ResourcesChart: FC<ResourcesChartProps> = ({
 				<ChartBreadcrumbs
 					breadcrumbs={[
 						{
-							label: category.name,
+							label: stage.section,
 							onClick: onBack,
 						},
 						{
-							label: stage,
+							label: stage.name,
 						},
 					]}
 				/>
@@ -85,7 +84,7 @@ export const ResourcesChart: FC<ResourcesChartProps> = ({
 			<ChartContent>
 				<YAxis>
 					<YAxisSection>
-						<YAxisHeader>{stage} stage</YAxisHeader>
+						<YAxisHeader>{stage.name} stage</YAxisHeader>
 						<YAxisLabels>
 							{visibleTimings.map((t) => (
 								<YAxisLabel key={t.name} id={encodeURIComponent(t.name)}>
 
@@ -27,7 +27,7 @@ import {
 	makeTicks,
 	mergeTimeRanges,
 } from "./Chart/utils";
-import type { StageCategory } from "./StagesChart";
+import type { Stage } from "./StagesChart";
 
 type ScriptTiming = {
 	name: string;
@@ -37,14 +37,12 @@ type ScriptTiming = {
 };
 
 export type ScriptsChartProps = {
-	category: StageCategory;
-	stage: string;
+	stage: Stage;
 	timings: ScriptTiming[];
 	onBack: () => void;
 };
 
 export const ScriptsChart: FC<ScriptsChartProps> = ({
-	category,
 	stage,
 	timings,
 	onBack,
@@ -66,11 +64,11 @@ export const ScriptsChart: FC<ScriptsChartProps> = ({
 				<ChartBreadcrumbs
 					breadcrumbs={[
 						{
-							label: category.name,
+							label: stage.section,
 							onClick: onBack,
 						},
 						{
-							label: stage,
+							label: stage.name,
 						},
 					]}
 				/>
@@ -84,7 +82,7 @@ export const ScriptsChart: FC<ScriptsChartProps> = ({
 			<ChartContent>
 				<YAxis>
 					<YAxisSection>
-						<YAxisHeader>{stage} stage</YAxisHeader>
+						<YAxisHeader>{stage.name} stage</YAxisHeader>
 						<YAxisLabels>
 							{visibleTimings.map((t) => (
 								<YAxisLabel key={t.name} id={encodeURIComponent(t.name)}>