Jun 25, 2025 · Jun 24, 2025
diff --git a/site/src/modules/apps/AppStatusStateIcon.tsx b/site/src/modules/apps/AppStatusStateIcon.tsx
 latest,
 className: customClassName,
 }) => {
 const className = cn(["size-4 shrink-0", customClassName]);
 const className = 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
 },
 };

 export constDisabled: Story = {
 export constDisabledComplete: Story = {
 args: {
 status: MockWorkspaceAppStatus,
 disabled: true,
 },
 };

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

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

 export const DisabledIdle: 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";
 import capitalize from "lodash/capitalize";
 import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon";
 import { cn } from "utils/cn";

 type WorkspaceAppStatusProps = {
 status: APIWorkspaceAppStatus | null;
 latest
 disabled={disabled}
 state={status.state}
 className={cn({
 "text-content-disabled": disabled,
 })}
 />
 <span className="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,
		}) => {
		const className = cn(["size-4 shrink-0", customClassName]);
		const className = 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 = {
		},
		};

		export constDisabled: Story = {
		export constDisabledComplete: Story = {
		args: {
		status: MockWorkspaceAppStatus,
		disabled: true,
		},
		};

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

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

		export const DisabledIdle: 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";
		import capitalize from "lodash/capitalize";
		import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon";
		import { cn } from "utils/cn";

		type WorkspaceAppStatusProps = {
		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,
		})}
		/>
		<span className="whitespace-nowrap max-w-72 overflow-hidden text-ellipsis text-sm text-content-primary font-medium">
		{message}
Expand Down