- - {content} - + +

+ + + + + + + +

+ + {content} + +

); }; diff --git a/site/src/pages/TaskPage/TaskSidebar.tsx b/site/src/pages/TaskPage/TaskSidebar.tsx index 2309884d166b8..eb1aeb6d59375 100644 --- a/site/src/pages/TaskPage/TaskSidebar.tsx +++ b/site/src/pages/TaskPage/TaskSidebar.tsx @@ -1,24 +1,8 @@ import type { WorkspaceApp } from "api/typesGenerated"; -import { Button } from "components/Button/Button"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "components/DropdownMenu/DropdownMenu"; import { Spinner } from "components/Spinner/Spinner"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "components/Tooltip/Tooltip"; -import { ArrowLeftIcon, EllipsisVerticalIcon } from "lucide-react"; import type { Task } from "modules/tasks/tasks"; import type { FC } from "react"; -import { Link as RouterLink } from "react-router"; import { TaskAppIFrame } from "./TaskAppIframe"; -import { TaskStatusLink } from "./TaskStatusLink"; type TaskSidebarProps = { task: Task; @@ -84,60 +68,6 @@ export const TaskSidebar: FC = ({ task }) => { return (

- - - - - - Back to tasks - - - - - - - - - - - - Settings - - - - - - - View workspace - - - - -

- -

- {task.prompt || task.workspace.name} -

- - {task.workspace.latest_app_status?.uri && ( -

- -

- )} -

- {sidebarAppStatus === "healthy" && sidebarApp ? ( = ({ task }) => { + return ( +

+ + + + + + Back to tasks + + + +

+ {task.prompt || task.workspace.name} +

+ + {task.workspace.latest_app_status?.uri && ( +

+ +

+ )} + + +

+ ); +}; From e33bc63ef6e4436cebeafdb9912e82cc961b1d30 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 19 Aug 2025 11:54:05 +0000 Subject: [PATCH 2/5] chore: show build logs --- site/src/pages/TaskPage/TaskPage.tsx | 121 ++++++++++-------- site/src/pages/WorkspacePage/Workspace.tsx | 6 +- .../WorkspacePage/WorkspaceBuildProgress.tsx | 4 +- 3 files changed, 73 insertions(+), 58 deletions(-) diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx index 22c8420173006..8749e2a055877 100644 --- a/site/src/pages/TaskPage/TaskPage.tsx +++ b/site/src/pages/TaskPage/TaskPage.tsx @@ -5,10 +5,12 @@ import type { Workspace, WorkspaceStatus } from "api/typesGenerated"; import { Button } from "components/Button/Button"; import { Loader } from "components/Loader/Loader"; import { Margins } from "components/Margins/Margins"; +import { ScrollArea } from "components/ScrollArea/ScrollArea"; import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs"; import { ArrowLeftIcon, RotateCcwIcon } from "lucide-react"; import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks"; -import type { ReactNode } from "react"; +import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs"; +import type { FC, ReactNode } from "react"; import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; @@ -16,7 +18,7 @@ import { Link as RouterLink, useParams } from "react-router"; import { ellipsizeText } from "utils/ellipsizeText"; import { pageTitle } from "utils/page"; import { - ActiveTransition, + getActiveTransitionStats, WorkspaceBuildProgress, } from "../WorkspacePage/WorkspaceBuildProgress"; import { TaskApps } from "./TaskApps"; @@ -38,18 +40,7 @@ const TaskPage = () => { refetchInterval: 5_000, }); - const { data: template } = useQuery({ - ...templateQueryOptions(task?.workspace.template_id ?? ""), - enabled: Boolean(task), - }); - const waitingStatuses: WorkspaceStatus[] = ["starting", "pending"]; - const shouldStreamBuildLogs = - task && waitingStatuses.includes(task.workspace.latest_build.status); - const buildLogs = useWorkspaceBuildLogs( - task?.workspace.latest_build.id ?? "", - shouldStreamBuildLogs, - ); if (error) { return ( @@ -96,38 +87,9 @@ const TaskPage = () => { } let content: ReactNode = null; - const _terminatedStatuses: WorkspaceStatus[] = [ - "canceled", - "canceling", - "deleted", - "deleting", - "stopped", - "stopping", - ]; if (waitingStatuses.includes(task.workspace.latest_build.status)) { - // If no template yet, use an indeterminate progress bar. - const transition = (template && - ActiveTransition(template, task.workspace)) || { P50: 0, P95: null }; - const lastStage = - buildLogs?.[buildLogs.length - 1]?.stage || "Waiting for build status"; - content = ( -

- Starting your workspace -

{lastStage}

- -

- ); + content = ; } else if (task.workspace.latest_build.status === "failed") { content = (

@@ -171,7 +133,19 @@ const TaskPage = () => { ); } else { - content = ; + content = ( + + + + + +

+ + + + + + ); } return ( @@ -182,16 +156,7 @@ const TaskPage = () => {

- - - - - - -

- - {content} - + {content}

); @@ -199,6 +164,54 @@ const TaskPage = () => { export default TaskPage; +const TaskBuildingWorkspace: FC<{ task: Task }> = ({ task }) => { + const { data: template } = useQuery( + templateQueryOptions(task.workspace.template_id), + ); + + const buildLogs = useWorkspaceBuildLogs(task?.workspace.latest_build.id); + + // If no template yet, use an indeterminate progress bar. + const transitionStats = (template && + getActiveTransitionStats(template, task.workspace)) || { + P50: 0, + P95: null, + }; + + return ( +

+ Starting your workspace +

+ Your task will be running in a few moments +

+ +

+ + + {buildLogs && ( + + + + )} +

+ ); +}; + export class WorkspaceDoesNotHaveAITaskError extends Error { constructor(workspace: Workspace) { super( diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx index 37f30ab2f2d8d..b81605dc239e9 100644 --- a/site/src/pages/WorkspacePage/Workspace.tsx +++ b/site/src/pages/WorkspacePage/Workspace.tsx @@ -17,7 +17,7 @@ import { ResourcesSidebar } from "./ResourcesSidebar"; import { resourceOptionValue, useResourcesNav } from "./useResourcesNav"; import { WorkspaceBuildLogsSection } from "./WorkspaceBuildLogsSection"; import { - ActiveTransition, + getActiveTransitionStats, WorkspaceBuildProgress, } from "./WorkspaceBuildProgress"; import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner"; @@ -68,7 +68,9 @@ export const Workspace: FC = ({ const navigate = useNavigate(); const transitionStats = - template !== undefined ? ActiveTransition(template, workspace) : undefined; + template !== undefined + ? getActiveTransitionStats(template, workspace) + : undefined; const sidebarOption = useSearchParamsKey({ key: "sidebar" }); const setSidebarOption = (newOption: string) => { diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx index bf61f8de6649c..32061f2a6590e 100644 --- a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx @@ -9,9 +9,9 @@ import { type FC, useEffect, useState } from "react"; dayjs.extend(duration); -// ActiveTransition gets the build estimate for the workspace, +// getActiveTransitionStats gets the build estimate for the workspace, // if it is in a transition state. -export const ActiveTransition = ( +export const getActiveTransitionStats = ( template: Template, workspace: Workspace, ): TransitionStats | undefined => { From 4a4eb38613d8a7114bbc3137f9c4d034cedce601 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 19 Aug 2025 15:32:02 +0000 Subject: [PATCH 3/5] improve build logs showed during ws creation --- site/src/pages/TaskPage/TaskPage.tsx | 39 ++++++++++++++++++-------- site/src/pages/TaskPage/TaskTopbar.tsx | 4 +-- 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx index 8749e2a055877..ac1ed4caa75d9 100644 --- a/site/src/pages/TaskPage/TaskPage.tsx +++ b/site/src/pages/TaskPage/TaskPage.tsx @@ -2,6 +2,7 @@ import { API } from "api/api"; import { getErrorDetail, getErrorMessage } from "api/errors"; import { template as templateQueryOptions } from "api/queries/templates"; import type { Workspace, WorkspaceStatus } from "api/typesGenerated"; +import isChromatic from "chromatic/isChromatic"; import { Button } from "components/Button/Button"; import { Loader } from "components/Loader/Loader"; import { Margins } from "components/Margins/Margins"; @@ -10,7 +11,7 @@ import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs"; import { ArrowLeftIcon, RotateCcwIcon } from "lucide-react"; import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks"; import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs"; -import type { FC, ReactNode } from "react"; +import { type FC, type ReactNode, useEffect, useRef } from "react"; import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; @@ -178,9 +179,24 @@ const TaskBuildingWorkspace: FC<{ task: Task }> = ({ task }) => { P95: null, }; + const scrollAreaRef = useRef(null); + // biome-ignore lint/correctness/useExhaustiveDependencies: this effect should run when build logs change + useEffect(() => { + if (isChromatic()) { + return; + } + const scrollAreaEl = scrollAreaRef.current; + const scrollAreaViewportEl = scrollAreaEl?.querySelector( + "[data-radix-scroll-area-viewport]", + ); + if (scrollAreaViewportEl) { + scrollAreaViewportEl.scrollTop = scrollAreaViewportEl.scrollHeight; + } + }, [buildLogs]); + return (

Starting your workspace @@ -197,15 +213,16 @@ const TaskBuildingWorkspace: FC<{ task: Task }> = ({ task }) => { variant="task" /> - {buildLogs && ( - - - - )} + + +

diff --git a/site/src/pages/TaskPage/TaskTopbar.tsx b/site/src/pages/TaskPage/TaskTopbar.tsx index d0edf71b41710..20c130200ebbc 100644 --- a/site/src/pages/TaskPage/TaskTopbar.tsx +++ b/site/src/pages/TaskPage/TaskTopbar.tsx @@ -13,7 +13,7 @@ import { TaskStatusLink } from "./TaskStatusLink"; export const TaskTopbar: FC<{ task: Task }> = ({ task }) => { return ( -

@@ -33,7 +33,7 @@ export const TaskTopbar: FC<{ task: Task }> = ({ task }) => { {task.workspace.latest_app_status?.uri && ( -

)} From d7306adf3bf7455375f182ae2caf986c7fdb4510 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 21 Aug 2025 17:04:17 +0000 Subject: [PATCH 4/5] Apply PR review --- site/src/pages/TaskPage/TaskPage.tsx | 11 ++++++++--- site/src/pages/TaskPage/TaskTopbar.tsx | 8 ++++---- site/src/utils/ellipsizeText.test.ts | 21 --------------------- site/src/utils/ellipsizeText.ts | 14 -------------- 4 files changed, 12 insertions(+), 42 deletions(-) delete mode 100644 site/src/utils/ellipsizeText.test.ts delete mode 100644 site/src/utils/ellipsizeText.ts diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx index ac1ed4caa75d9..4a65c6f1be993 100644 --- a/site/src/pages/TaskPage/TaskPage.tsx +++ b/site/src/pages/TaskPage/TaskPage.tsx @@ -16,7 +16,6 @@ import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; import { Link as RouterLink, useParams } from "react-router"; -import { ellipsizeText } from "utils/ellipsizeText"; import { pageTitle } from "utils/page"; import { getActiveTransitionStats, @@ -152,7 +151,7 @@ const TaskPage = () => { return ( <> - {pageTitle(ellipsizeText(task.prompt, 64) ?? "Task")} + {pageTitle(ellipsizeText(task.prompt, 64))}

@@ -165,7 +164,9 @@ const TaskPage = () => { export default TaskPage; -const TaskBuildingWorkspace: FC<{ task: Task }> = ({ task }) => { +type TaskBuildingWorkspaceProps = { task: Task }; + +const TaskBuildingWorkspace: FC = ({ task }) => { const { data: template } = useQuery( templateQueryOptions(task.workspace.template_id), ); @@ -264,3 +265,7 @@ export const data = { } satisfies Task; }, }; + +const ellipsizeText = (text: string, maxLength = 80): string => { + return text.length <= maxLength ? text : `${text.slice(0, maxLength - 3)}...`; +}; diff --git a/site/src/pages/TaskPage/TaskTopbar.tsx b/site/src/pages/TaskPage/TaskTopbar.tsx index 20c130200ebbc..e7bc9283a16eb 100644 --- a/site/src/pages/TaskPage/TaskTopbar.tsx +++ b/site/src/pages/TaskPage/TaskTopbar.tsx @@ -11,7 +11,9 @@ import type { FC } from "react"; import { Link as RouterLink } from "react-router"; import { TaskStatusLink } from "./TaskStatusLink"; -export const TaskTopbar: FC<{ task: Task }> = ({ task }) => { +type TaskTopbarProps = { task: Task }; + +export const TaskTopbar: FC = ({ task }) => { return (

@@ -28,9 +30,7 @@ export const TaskTopbar: FC<{ task: Task }> = ({ task }) => { -

- {task.prompt || task.workspace.name} -

{task.prompt}

{task.workspace.latest_app_status?.uri && (

diff --git a/site/src/utils/ellipsizeText.test.ts b/site/src/utils/ellipsizeText.test.ts deleted file mode 100644 index bc6e7752214e3..0000000000000 --- a/site/src/utils/ellipsizeText.test.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ellipsizeText } from "./ellipsizeText"; -import type { Nullable } from "./nullable"; - -describe("ellipsizeText", () => { - it.each([ - [undefined, 10, undefined], - [null, 10, undefined], - ["", 10, ""], - ["Hello World", "Hello World".length, "Hello World"], - ["Hello World", "Hello...".length, "Hello..."], - ])( - "ellipsizeText(%p, %p) returns %p", - ( - str: Nullable, - maxLength: number | undefined, - output: Nullable, - ) => { - expect(ellipsizeText(str, maxLength)).toBe(output); - }, - ); -}); diff --git a/site/src/utils/ellipsizeText.ts b/site/src/utils/ellipsizeText.ts deleted file mode 100644 index 6291ed61732dc..0000000000000 --- a/site/src/utils/ellipsizeText.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { Nullable } from "./nullable"; - -/** Truncates and ellipsizes text if it's longer than maxLength */ -export const ellipsizeText = ( - text: Nullable, - maxLength = 80, -): string | undefined => { - if (typeof text !== "string") { - return; - } - return text.length <= maxLength - ? text - : `${text.substr(0, maxLength - 3)}...`; -}; From 0ba3782ba09cecba314dea1f9a77c8ebc2918e4d Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 21 Aug 2025 17:24:10 +0000 Subject: [PATCH 5/5] Fix lint --- site/src/utils/nullable.ts | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 site/src/utils/nullable.ts diff --git a/site/src/utils/nullable.ts b/site/src/utils/nullable.ts deleted file mode 100644 index 6a9361e5034f5..0000000000000 --- a/site/src/utils/nullable.ts +++ /dev/null @@ -1,5 +0,0 @@ -/** - * A Nullable may be its concrete type, `null` or `undefined` - * @remark Exact opposite of the native TS type NonNullable - */ -export type Nullable = null | undefined | T; pFad - Phonifier reborn

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: