refactor: minor task page design adjustments (coder#18187)

**Before:**
<img width="1624" alt="Screenshot 2025-06-02 at 13 38 45"
src="https://github.com/user-attachments/assets/545400e9-18d6-44a3-9f21-a51ceceedc8e"
/>

**After:**
<img width="1624" alt="Screenshot 2025-06-02 at 13 40 18"
src="https://github.com/user-attachments/assets/1b0b89f0-8cd6-4afd-8800-786e43ae4b52"
/>

- Show output links
- Move workspace app bar to top of screen
- Remove redundant task status indicators
- Update "building your task" to "Building your workspace" to be more
transparent
- Change “Open IDE” language to “Open Locally”

Closes:
- coder#18181
- coder#18162

Author: BrunoQuaresma

site/src/modules/apps/AppStatusIcon.tsx renamed to site/src/modules/apps/AppStatusStateIcon.tsx

@@ -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 (

site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx

@@ -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,
 								})}