Jun 2, 2025 · Jun 2, 2025 · Jun 2, 2025 · Jun 2, 2025 · Jun 2, 2025
diff --git a/site/src/modules/apps/AppStatusIcon.tsx → site/src/modules/apps/AppStatusStateIcon.tsx b/site/src/modules/apps/AppStatusIcon.tsx → site/src/modules/apps/AppStatusStateIcon.tsx
 import type {WorkspaceAppStatus } from "api/typesGenerated";
 import type {WorkspaceAppStatusState } from "api/typesGenerated";
 import { Spinner } from "components/Spinner/Spinner";
 import {
 BanIcon,
 CircleAlertIcon,
 CircleCheckIcon,
 HourglassIcon,
 import type { FC } from "react";
 import { cn } from "utils/cn";

 typeAppStatusIconProps = {
 status: WorkspaceAppStatus;
 typeAppStatusStateIconProps = {
 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])} />
 <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 (
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
 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 = {
 <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,
 })}
Original file line number	Diff line number	Diff line change
		@@ -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,
Expand All		@@ -9,20 +10,22 @@ import {
		import type { FC } from "react";
		import { cn } from "utils/cn";

		typeAppStatusIconProps = {
		status: WorkspaceAppStatus;
		typeAppStatusStateIconProps = {
		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])} />
Expand All		@@ -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 (
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 = {
Expand All		@@ -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,
		})}
Expand Down