Jun 24, 2025
diff --git a/site/src/modules/apps/AppStatusStateIcon.tsx b/site/src/modules/apps/AppStatusStateIcon.tsx
 latest,
 className:customClassName,
 })=>{
 constclassName=cn(["size-4 shrink-0",customClassName]);
 constclassName=cn([
 "size-4 shrink-0",
 customClassName,
 disabled&&"text-content-disabled",
 ]);

 switch(state){
 case"idle":
 // The pause icon is outlined; add a fill since it is hard to see and
 // remove the stroke so it is not overly thick.
 return(
 <PauseIcon
 css={{strokeWidth:0}}
 className={cn([
 "text-content-secondary",
 "fill-content-secondary",
 className,
 disabled ?"fill-content-disabled" :"fill-content-secondary",
 ])}
 />
 );
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx
 },
 };

 exportconstDisabled:Story={
 exportconstDisabledComplete:Story={
 args:{
 status:MockWorkspaceAppStatus,
 disabled:true,
 },
 };

 exportconstDisabledFailure:Story={
 args:{
 status:{
 ...MockWorkspaceAppStatus,
 state:"failure",
 message:"Couldn't figure out how to start the dev server",
 },
 disabled:true,
 },
 };

 exportconstDisabledWorking:Story={
 args:{
 status:{
 ...MockWorkspaceAppStatus,
 state:"working",
 message:"Starting dev server...",
 uri:"",
 },
 disabled:true,
 },
 };

 exportconstDisabledIdle:Story={
 args:{
 status:{
 ...MockWorkspaceAppStatus,
 state:"idle",
 message:"Done for now",
 },
 disabled:true,
 },
 };
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
 }from"components/Tooltip/Tooltip";
 importcapitalizefrom"lodash/capitalize";
 import{AppStatusStateIcon}from"modules/apps/AppStatusStateIcon";
 import{cn}from"utils/cn";

 typeWorkspaceAppStatusProps={
 status:APIWorkspaceAppStatus|null;
 latest
 disabled={disabled}
 state={status.state}
 className={cn({
 "text-content-disabled":disabled,
 })}
 />
 <spanclassName="whitespace-nowrap max-w-72 overflow-hidden text-ellipsis text-sm text-content-primary font-medium">
 {message}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,16 +24,23 @@ export const AppStatusStateIcon: FC<AppStatusStateIconProps> = ({
		latest,
		className:customClassName,
		})=>{
		constclassName=cn(["size-4 shrink-0",customClassName]);
		constclassName=cn([
		"size-4 shrink-0",
		customClassName,
		disabled&&"text-content-disabled",
		]);

		switch(state){
		case"idle":
		// The pause icon is outlined; add a fill since it is hard to see and
		// remove the stroke so it is not overly thick.
		return(
		<PauseIcon
		css={{strokeWidth:0}}
		className={cn([
		"text-content-secondary",
		"fill-content-secondary",
		className,
		disabled ?"fill-content-disabled" :"fill-content-secondary",
		])}
		/>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -69,9 +69,43 @@ export const LongMessage: Story = {
		},
		};

		exportconstDisabled:Story={
		exportconstDisabledComplete:Story={
		args:{
		status:MockWorkspaceAppStatus,
		disabled:true,
		},
		};

		exportconstDisabledFailure:Story={
		args:{
		status:{
		...MockWorkspaceAppStatus,
		state:"failure",
		message:"Couldn't figure out how to start the dev server",
		},
		disabled:true,
		},
		};

		exportconstDisabledWorking:Story={
		args:{
		status:{
		...MockWorkspaceAppStatus,
		state:"working",
		message:"Starting dev server...",
		uri:"",
		},
		disabled:true,
		},
		};

		exportconstDisabledIdle:Story={
		args:{
		status:{
		...MockWorkspaceAppStatus,
		state:"idle",
		message:"Done for now",
		},
		disabled:true,
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,7 +7,6 @@ import {
		}from"components/Tooltip/Tooltip";
		importcapitalizefrom"lodash/capitalize";
		import{AppStatusStateIcon}from"modules/apps/AppStatusStateIcon";
		import{cn}from"utils/cn";

		typeWorkspaceAppStatusProps={
		status:APIWorkspaceAppStatus\|null;
Expand DownExpand Up		@@ -37,9 +36,6 @@ export const WorkspaceAppStatus = ({
		latest
		disabled={disabled}
		state={status.state}
		className={cn({
		"text-content-disabled":disabled,
		})}
		/>
		<spanclassName="whitespace-nowrap max-w-72 overflow-hidden text-ellipsis text-sm text-content-primary font-medium">
		{message}
Expand Down