May 30, 2025 · May 30, 2025
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
 import { API } from "api/api";
 import { getErrorDetail, getErrorMessage } from "api/errors";
 import { disabledRefetchOptions } from "api/queries/util";
 import type {
 Template,
 Workspace,
 WorkspaceAgent,
 WorkspaceApp,
 } from "api/typesGenerated";
 import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Margins } from "components/Margins/Margins";
 import {
 TableHeader,
 TableRow,
 } from "components/Table/Table";
 import {
 Tooltip,
 TooltipContent,
 TooltipProvider,
 TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useAuthenticated } from "hooks";
 import { ExternalLinkIcon, RotateCcwIcon, SendIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
 import { WorkspaceAppStatus } from "modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus";
 import type { FC,PropsWithChildren,ReactNode } from "react";
 import type { FC, ReactNode } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { Link as RouterLink } from "react-router-dom";
 import TextareaAutosize from "react-textarea-autosize";
 import { cn } from "utils/cn";
 import { pageTitle } from "utils/page";
 import { relativeTime } from "utils/time";

 src={workspace.owner_avatar_url}
 />
 </TableCell>
 <TableCell className="pl-10">
 {agent && app && (
 <IconAppLink app={app} workspace={workspace} agent={agent} />
 )}
 </TableCell>
 </TableRow>
 );
 })
 <TableHead>Task</TableHead>
 <TableHead>Status</TableHead>
 <TableHead>Created by</TableHead>
 <TableHead className="w-0" />
 </TableRow>
 </TableHeader>
 <TableBody>{body}</TableBody>
 </Table>
 );
 };

 type IconAppLinkProps = {
 app: WorkspaceApp;
 workspace: Workspace;
 agent: WorkspaceAgent;
 };

 const IconAppLink: FC<IconAppLinkProps> = ({ app, workspace, agent }) => {
 const link = useAppLink(app, {
 workspace,
 agent,
 });

 return (
 <BaseIconLink
 key={app.id}
 label={`Open ${link.label}`}
 href={link.href}
 onClick={(e) => {
 link.onClick?.(e);
 e.stopPropagation();
 }}
 >
 <ExternalImage src={app.icon ?? "/icon/widgets.svg"} />
 </BaseIconLink>
 );
 };

 type BaseIconLinkProps = PropsWithChildren<{
 label: string;
 href: string;
 isLoading?: boolean;
 target?: string;
 onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }>;

 const BaseIconLink: FC<BaseIconLinkProps> = ({
 href,
 isLoading,
 label,
 children,
 target,
 onClick,
 }) => {
 return (
 <TooltipProvider>
 <Tooltip>
 <TooltipTrigger asChild>
 <Button variant="outline" size="icon-lg" asChild>
 <a
 target={target}
 className={cn(["z-10 relative", { "animate-pulse": isLoading }])}
 href={href}
 onClick={(e) => {
 e.stopPropagation();
 onClick?.(e);
 }}
 >
 {children}
 <span className="sr-only">{label}</span>
 </a>
 </Button>
 </TooltipTrigger>
 <TooltipContent>{label}</TooltipContent>
 </Tooltip>
 </TooltipProvider>
 );
 };

 export const data = {
 // TODO: This function is currently inefficient because it fetches all templates
 // and their parameters individually, resulting in many API calls and slow
Original file line number	Diff line number	Diff line change
		@@ -1,16 +1,10 @@
		import { API } from "api/api";
		import { getErrorDetail, getErrorMessage } from "api/errors";
		import { disabledRefetchOptions } from "api/queries/util";
		import type {
		Template,
		Workspace,
		WorkspaceAgent,
		WorkspaceApp,
		} from "api/typesGenerated";
		import type { Template } from "api/typesGenerated";
		import { Avatar } from "components/Avatar/Avatar";
		import { AvatarData } from "components/Avatar/AvatarData";
		import { Button } from "components/Button/Button";
		import { ExternalImage } from "components/ExternalImage/ExternalImage";
		import { displayError } from "components/GlobalSnackbar/utils";
		import { Margins } from "components/Margins/Margins";
		import {
Expand All		@@ -34,23 +28,15 @@ import {
		TableHeader,
		TableRow,
		} from "components/Table/Table";
		import {
		Tooltip,
		TooltipContent,
		TooltipProvider,
		TooltipTrigger,
		} from "components/Tooltip/Tooltip";
		import { useAuthenticated } from "hooks";
		import { ExternalLinkIcon, RotateCcwIcon, SendIcon } from "lucide-react";
		import { useAppLink } from "modules/apps/useAppLink";
		import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
		import { WorkspaceAppStatus } from "modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus";
		import type { FC,PropsWithChildren,ReactNode } from "react";
		import type { FC, ReactNode } from "react";
		import { Helmet } from "react-helmet-async";
		import { useMutation, useQuery, useQueryClient } from "react-query";
		import { Link as RouterLink } from "react-router-dom";
		import TextareaAutosize from "react-textarea-autosize";
		import { cn } from "utils/cn";
		import { pageTitle } from "utils/page";
		import { relativeTime } from "utils/time";

Expand DownExpand Up		@@ -351,11 +337,6 @@ const TasksTable: FC<TasksTableProps> = ({ templates }) => {
		src={workspace.owner_avatar_url}
		/>
		</TableCell>
		<TableCell className="pl-10">
		{agent && app && (
		<IconAppLink app={app} workspace={workspace} agent={agent} />
		)}
		</TableCell>
		</TableRow>
		);
		})
Expand DownExpand Up		@@ -387,82 +368,13 @@ const TasksTable: FC<TasksTableProps> = ({ templates }) => {
		<TableHead>Task</TableHead>
		<TableHead>Status</TableHead>
		<TableHead>Created by</TableHead>
		<TableHead className="w-0" />
		</TableRow>
		</TableHeader>
		<TableBody>{body}</TableBody>
		</Table>
		);
		};

		type IconAppLinkProps = {
		app: WorkspaceApp;
		workspace: Workspace;
		agent: WorkspaceAgent;
		};

		const IconAppLink: FC<IconAppLinkProps> = ({ app, workspace, agent }) => {
		const link = useAppLink(app, {
		workspace,
		agent,
		});

		return (
		<BaseIconLink
		key={app.id}
		label={`Open ${link.label}`}
		href={link.href}
		onClick={(e) => {
		link.onClick?.(e);
		e.stopPropagation();
		}}
		>
		<ExternalImage src={app.icon ?? "/icon/widgets.svg"} />
		</BaseIconLink>
		);
		};

		type BaseIconLinkProps = PropsWithChildren<{
		label: string;
		href: string;
		isLoading?: boolean;
		target?: string;
		onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
		}>;

		const BaseIconLink: FC<BaseIconLinkProps> = ({
		href,
		isLoading,
		label,
		children,
		target,
		onClick,
		}) => {
		return (
		<TooltipProvider>
		<Tooltip>
		<TooltipTrigger asChild>
		<Button variant="outline" size="icon-lg" asChild>
		<a
		target={target}
		className={cn(["z-10 relative", { "animate-pulse": isLoading }])}
		href={href}
		onClick={(e) => {
		e.stopPropagation();
		onClick?.(e);
		}}
		>
		{children}
		<span className="sr-only">{label}</span>
		</a>
		</Button>
		</TooltipTrigger>
		<TooltipContent>{label}</TooltipContent>
		</Tooltip>
		</TooltipProvider>
		);
		};

		export const data = {
		// TODO: This function is currently inefficient because it fetches all templates
		// and their parameters individually, resulting in many API calls and slow
Expand Down