Klomgor · pull · Aug 22, 2025 · Aug 22, 2025 · Aug 22, 2025 · Aug 22, 2025
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -18,7 +18,7 @@ coderd/rbac/ @Emyrk
 scripts/apitypings/ @Emyrk
 scripts/gensite/ @aslilac
 
-site/ @aslilac
+site/ @aslilac @Parkreiner
 site/src/hooks/ @Parkreiner
 # These rules intentionally do not specify any owners. More specific rules
 # override less specific rules, so these files are "ignored" by the site/ rule.
@@ -27,6 +27,7 @@ site/e2e/provisionerGenerated.ts
 site/src/api/countriesGenerated.ts
 site/src/api/rbacresourcesGenerated.ts
 site/src/api/typesGenerated.ts
+site/src/testHelpers/entities.ts
 site/CLAUDE.md
 
 # The blood and guts of the autostop algorithm, which is quite complex and

diff --git a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -1,4 +1,3 @@
-import type { CSSInterpolation } from "@emotion/css/dist/declarations/src/create-instance";
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
@@ -15,7 +14,6 @@ import { TerminalIcon } from "components/Icons/TerminalIcon";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
-import { type ClassName, useClassName } from "hooks/useClassName";
 import {
 	AppWindowIcon,
 	CircleAlertIcon,
@@ -53,7 +51,6 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 	fetchStats,
 }) => {
 	const theme = useTheme();
-	const summaryTooltip = useClassName(classNames.summaryTooltip, []);
 
 	const aggregatedMinutes = useMemo(() => {
 		if (!stats) {
@@ -128,7 +125,10 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 			}}
 		>
 			<Tooltip
-				classes={{ tooltip: summaryTooltip }}
+				classes={{
+					tooltip:
+						"ml-3 mb-1 w-[400px] p-4 text-sm text-content-primary bg-surface-secondary border border-solid border-border pointer-events-none",
+				}}
 				title={
 					healthErrors.length > 0 ? (
 						<>
@@ -236,10 +236,10 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 						<div css={styles.value}>
 							<VSCodeIcon
 								css={css`
-                  & * {
-                    fill: currentColor;
-                  }
-                `}
+									& * {
+										fill: currentColor;
+									}
+								`}
 							/>
 							{typeof stats?.session_count.vscode === "undefined"
 								? "-"
@@ -251,10 +251,10 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 						<div css={styles.value}>
 							<JetBrainsIcon
 								css={css`
-                  & * {
-                    fill: currentColor;
-                  }
-                `}
+									& * {
+										fill: currentColor;
+									}
+								`}
 							/>
 							{typeof stats?.session_count.jetbrains === "undefined"
 								? "-"
@@ -303,20 +303,20 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 						css={[
 							styles.value,
 							css`
-                margin: 0;
-                padding: 0 8px;
-                height: unset;
-                min-height: unset;
-                font-size: unset;
-                color: unset;
-                border: 0;
-                min-width: unset;
-                font-family: inherit;
+								margin: 0;
+								padding: 0 8px;
+								height: unset;
+								min-height: unset;
+								font-size: unset;
+								color: unset;
+								border: 0;
+								min-width: unset;
+								font-family: inherit;
 
-                & svg {
-                  margin-right: 4px;
-                }
-              `,
+								& svg {
+									margin-right: 4px;
+								}
+							`,
 						]}
 						onClick={() => {
 							if (fetchStats) {
@@ -410,41 +410,27 @@ const getHealthErrors = (health: HealthcheckReport) => {
 	return warnings;
 };
 
-const classNames = {
-	summaryTooltip: (css, theme) => css`
-    ${theme.typography.body2 as CSSInterpolation}
-
-    margin: 0 0 4px 12px;
-    width: 400px;
-    padding: 16px;
-    color: ${theme.palette.text.primary};
-    background-color: ${theme.palette.background.paper};
-    border: 1px solid ${theme.palette.divider};
-    pointer-events: none;
-  `,
-} satisfies Record<string, ClassName>;
-
 const styles = {
 	statusBadge: (theme) => css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 12px;
-    height: 100%;
-    color: ${theme.experimental.l1.text};
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 12px;
+		height: 100%;
+		color: ${theme.experimental.l1.text};
 
-    & svg {
-      width: 16px;
-      height: 16px;
-    }
-  `,
+		& svg {
+			width: 16px;
+			height: 16px;
+		}
+	`,
 	unhealthy: {
 		backgroundColor: colors.red[700],
 	},
 	group: css`
-    display: flex;
-    align-items: center;
-  `,
+		display: flex;
+		align-items: center;
+	`,
 	category: (theme) => ({
 		marginRight: 16,
 		color: theme.palette.text.primary,
@@ -455,15 +441,15 @@ const styles = {
 		color: theme.palette.text.secondary,
 	}),
 	value: css`
-    display: flex;
-    align-items: center;
-    gap: 4px;
+		display: flex;
+		align-items: center;
+		gap: 4px;
 
-    & svg {
-      width: 12px;
-      height: 12px;
-    }
-  `,
+		& svg {
+			width: 12px;
+			height: 12px;
+		}
+	`,
 	separator: (theme) => ({
 		color: theme.palette.text.disabled,
 	}),

diff --git a/site/src/modules/dashboard/Navbar/NavbarView.stories.tsx b/site/src/modules/dashboard/Navbar/NavbarView.stories.tsx
@@ -1,13 +1,31 @@
 import { chromaticWithTablet } from "testHelpers/chromatic";
-import { MockUserMember, MockUserOwner } from "testHelpers/entities";
+import {
+	MockUserMember,
+	MockUserOwner,
+	MockWorkspace,
+	MockWorkspaceAppStatus,
+} from "testHelpers/entities";
 import { withDashboardProvider } from "testHelpers/storybook";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { userEvent, within } from "storybook/test";
 import { NavbarView } from "./NavbarView";
 
+const tasksFilter = {
+	username: MockUserOwner.username,
+};
+
 const meta: Meta<typeof NavbarView> = {
 	title: "modules/dashboard/NavbarView",
-	parameters: { chromatic: chromaticWithTablet, layout: "fullscreen" },
+	parameters: {
+		chromatic: chromaticWithTablet,
+		layout: "fullscreen",
+		queries: [
+			{
+				key: ["tasks", tasksFilter],
+				data: [],
+			},
+		],
+	},
 	component: NavbarView,
 	args: {
 		user: MockUserOwner,
@@ -78,3 +96,36 @@ export const CustomLogo: Story = {
 		logo_url: "/icon/github.svg",
 	},
 };
+
+export const IdleTasks: Story = {
+	parameters: {
+		queries: [
+			{
+				key: ["tasks", tasksFilter],
+				data: [
+					{
+						prompt: "Task 1",
+						workspace: {
+							...MockWorkspace,
+							latest_app_status: {
+								...MockWorkspaceAppStatus,
+								state: "idle",
+							},
+						},
+					},
+					{
+						prompt: "Task 2",
+						workspace: MockWorkspace,
+					},
+					{
+						prompt: "Task 3",
+						workspace: {
+							...MockWorkspace,
+							latest_app_status: MockWorkspaceAppStatus,
+						},
+					},
+				],
+			},
+		],
+	},
+};