coder · BrunoQuaresma · May 28, 2025 · May 28, 2025 · May 28, 2025 · May 28, 2025
diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
@@ -3,6 +3,7 @@
  * @see {@link https://ui.shadcn.com/docs/components/table}
  */
 
+import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "utils/cn";
 
@@ -60,15 +61,38 @@ const TableFooter = React.forwardRef<
 	/>
 ));
 
+const tableRowVariants = cva(
+	[
+		"border-0 border-b border-solid border-border transition-colors",
+		"data-[state=selected]:bg-muted",
+	],
+	{
+		variants: {
+			hover: {
+				false: null,
+				true: cn([
+					"cursor-pointer hover:outline focus:outline outline-1 -outline-offset-1 outline-border-hover",
+					"first:rounded-t-md last:rounded-b-md",
+				]),
+			},
+		},
+		defaultVariants: {
+			hover: false,
+		},
+	},
+);
+
 export const TableRow = React.forwardRef<
 	HTMLTableRowElement,
-	React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+	React.HTMLAttributes<HTMLTableRowElement> &
+		VariantProps<typeof tableRowVariants>
+>(({ className, hover, ...props }, ref) => (
 	<tr
 		ref={ref}
 		className={cn(
 			"border-0 border-b border-solid border-border transition-colors",
 			"data-[state=selected]:bg-muted",
+			tableRowVariants({ hover }),
 			className,
 		)}
 		{...props}

diff --git a/site/src/modules/apps/AppStatusIcon.tsx b/site/src/modules/apps/AppStatusIcon.tsx
@@ -0,0 +1,47 @@
+import type { WorkspaceAppStatus } from "api/typesGenerated";
+import { Spinner } from "components/Spinner/Spinner";
+import {
+	CircleAlertIcon,
+	CircleCheckIcon,
+	HourglassIcon,
+	TriangleAlertIcon,
+} from "lucide-react";
+import type { FC } from "react";
+import { cn } from "utils/cn";
+
+type AppStatusIconProps = {
+	status: WorkspaceAppStatus;
+	latest: boolean;
+	className?: string;
+};
+
+export const AppStatusIcon: FC<AppStatusIconProps> = ({
+	status,
+	latest,
+	className: customClassName,
+}) => {
+	const className = cn(["size-4 shrink-0", customClassName]);
+
+	switch (status.state) {
+		case "complete":
+			return (
+				<CircleCheckIcon className={cn([className, "text-content-success"])} />
+			);
+		case "failure":
+			return (
+				<CircleAlertIcon className={cn([className, "text-content-warning"])} />
+			);
+		case "working":
+			return latest ? (
+				<Spinner size="sm" className="shrink-0" loading />
+			) : (
+				<HourglassIcon className={cn([className, "text-highlight-sky"])} />
+			);
+		default:
+			return (
+				<TriangleAlertIcon
+					className={cn([className, "text-content-secondary"])}
+				/>
+			);
+	}
+};
diff --git a/site/src/modules/tasks/tasks.ts b/site/src/modules/tasks/tasks.ts
@@ -0,0 +1,8 @@
+import type { Workspace } from "api/typesGenerated";
+
+export const AI_PROMPT_PARAMETER_NAME = "AI Prompt";
+
+export type Task = {
+	workspace: Workspace;
+	prompt: string;
+};
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
@@ -34,7 +34,7 @@ export const WorkspaceAppStatus = ({
 	}
 
 	return (
-		<div className="flex flex-col">
+		<div className="flex flex-col text-content-secondary">
 			<TooltipProvider>
 				<Tooltip>
 					<TooltipTrigger asChild>
@@ -48,7 +48,9 @@ export const WorkspaceAppStatus = ({
 					<TooltipContent>{status.message}</TooltipContent>
 				</Tooltip>
 			</TooltipProvider>
-			<span className="first-letter:uppercase block pl-6">{status.state}</span>
+			<span className="text-xs first-letter:uppercase block pl-6">
+				{status.state}
+			</span>
 		</div>
 	);
 };
diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx
@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { spyOn } from "@storybook/test";
+import {
+	MockFailedWorkspace,
+	MockStartingWorkspace,
+	MockStoppedWorkspace,
+	MockWorkspace,
+	MockWorkspaceAgent,
+	MockWorkspaceApp,
+	MockWorkspaceAppStatus,
+	MockWorkspaceResource,
+	mockApiError,
+} from "testHelpers/entities";
+import { withProxyProvider } from "testHelpers/storybook";
+import TaskPage, { data } from "./TaskPage";
+
+const meta: Meta<typeof TaskPage> = {
+	title: "pages/TaskPage",
+	component: TaskPage,
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof TaskPage>;
+
+export const Loading: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockImplementation(
+			() => new Promise((res) => 1000 * 60 * 60),
+		);
+	},
+};
+
+export const LoadingError: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockRejectedValue(
+			mockApiError({
+				message: "Failed to load task",
+				detail: "You don't have permission to access this resource.",
+			}),
+		);
+	},
+};
+
+export const WaitingOnBuild: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: MockStartingWorkspace,
+		});
+	},
+};
+
+export const WaitingOnStatus: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: {
+				...MockWorkspace,
+				latest_app_status: null,
+			},
+		});
+	},
+};
+
+export const FailedBuild: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: MockFailedWorkspace,
+		});
+	},
+};
+
+export const TerminatedBuild: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: MockStoppedWorkspace,
+		});
+	},
+};
+
+export const TerminatedBuildWithStatus: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: {
+				...MockStoppedWorkspace,
+				latest_app_status: MockWorkspaceAppStatus,
+			},
+		});
+	},
+};
+
+export const Active: Story = {
+	decorators: [withProxyProvider()],
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: {
+				...MockWorkspace,
+				latest_build: {
+					...MockWorkspace.latest_build,
+					resources: [
+						{
+							...MockWorkspaceResource,
+							agents: [
+								{
+									...MockWorkspaceAgent,
+									apps: [
+										{
+											...MockWorkspaceApp,
+											id: "claude-code",
+											display_name: "Claude Code",
+											icon: "/icon/claude.svg",
+											url: `${window.location.protocol}/iframe.html?viewMode=story&id=pages-terminal--ready&args=&globals=`,
+											external: true,
+											statuses: [
+												MockWorkspaceAppStatus,
+												{
+													...MockWorkspaceAppStatus,
+													id: "2",
+													message: "Planning changes",
+													state: "working",
+												},
+											],
+										},
+										{
+											...MockWorkspaceApp,
+											id: "vscode",
+											display_name: "VSCode",
+											icon: "/icon/code.svg",
+										},
+									],
+								},
+							],
+						},
+					],
+				},
+				latest_app_status: {
+					...MockWorkspaceAppStatus,
+					app_id: "claude-code",
+				},
+			},
+		});
+	},
+};