coder
diff --git a/‎site/src/modules/apps/AppStatusIcon.tsx renamed to ‎site/src/modules/apps/AppStatusStateIcon.tsx
Lines changed: 13 additions & 8 deletions b/‎site/src/modules/apps/AppStatusIcon.tsx renamed to ‎site/src/modules/apps/AppStatusStateIcon.tsx
Lines changed: 13 additions & 8 deletions
diff --git a/‎site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
Lines changed: 4 additions & 3 deletions b/‎site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
Lines changed: 4 additions & 3 deletions
@@ -1,6 +1,7 @@
-import type { WorkspaceAppStatus } from "api/typesGenerated";
+import type { WorkspaceAppStatusState } from "api/typesGenerated";
 import { Spinner } from "components/Spinner/Spinner";
 import {
+	BanIcon,
 	CircleAlertIcon,
 	CircleCheckIcon,
 	HourglassIcon,
@@ -9,20 +10,22 @@ import {
 import type { FC } from "react";
 import { cn } from "utils/cn";
 
-type AppStatusIconProps = {
-	status: WorkspaceAppStatus;
+type AppStatusStateIconProps = {
+	state: WorkspaceAppStatusState;
 	latest: boolean;
+	disabled?: boolean;
 	className?: string;
 };
 
-export const AppStatusIcon: FC<AppStatusIconProps> = ({
-	status,
+export const AppStatusStateIcon: FC<AppStatusStateIconProps> = ({
+	state,
+	disabled,
 	latest,
 	className: customClassName,
 }) => {
 	const className = cn(["size-4 shrink-0", customClassName]);
 
-	switch (status.state) {
+	switch (state) {
 		case "complete":
 			return (
 				<CircleCheckIcon className={cn(["text-content-success", className])} />
@@ -32,10 +35,12 @@ export const AppStatusIcon: FC<AppStatusIconProps> = ({
 				<CircleAlertIcon className={cn(["text-content-warning", className])} />
 			);
 		case "working":
-			return latest ? (
+			return disabled ? (
+				<BanIcon className={cn(["text-content-disabled", className])} />
+			) : latest ? (
 				<Spinner size="sm" className="shrink-0" loading />
 			) : (
-				<HourglassIcon className={cn(["text-highlight-sky", className])} />
+				<HourglassIcon className={cn(["text-content-secondary", className])} />
 			);
 		default:
 			return (
 
@@ -5,7 +5,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
-import { AppStatusIcon } from "modules/apps/AppStatusIcon";
+import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon";
 import { cn } from "utils/cn";
 
 type WorkspaceAppStatusProps = {
@@ -31,9 +31,10 @@ export const WorkspaceAppStatus = ({
 				<Tooltip>
 					<TooltipTrigger asChild>
 						<div className="flex items-center gap-2">
-							<AppStatusIcon
-								status={status}
+							<AppStatusStateIcon
 								latest
+								disabled={disabled}
+								state={status.state}
 								className={cn({
 									"text-content-disabled": disabled,
 								})}