Sep 22, 2025 · Sep 18, 2025 · Sep 18, 2025 · Sep 18, 2025 · Sep 19, 2025 · Sep 19, 2025
diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx
 const buttonVariants = cva(
 `
 inline-flex items-center justify-center gap-1 whitespace-nowrap font-sans
 border-solid rounded-md transition-colors
 border-solid rounded-md transition-colors shrink-0
 text-sm font-medium cursor-pointer no-underline
 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
 disabled:pointer-events-none disabled:text-content-disabled
diff --git a/site/src/components/ScrollArea/ScrollArea.tsx b/site/src/components/ScrollArea/ScrollArea.tsx
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

 const ScrollBar = React.forwardRef<
 exportconst ScrollBar = React.forwardRef<
 React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
 React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = "vertical", ...props }, ref) => (
 )}
 {...props}
 >
 <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
 <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-surface-quaternary" />
 </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
diff --git a/site/src/modules/apps/useAppLink.ts b/site/src/modules/apps/useAppLink.ts
 agent: WorkspaceAgent;
 };

 type AppLink = {
 href: string;
 onClick: (e: React.MouseEvent) => void;
 label: string;
 hasToken: boolean;
 };

 export const useAppLink = (
 app: WorkspaceApp,
 { agent, workspace }: UseAppLinkParams,
 ) => {
 ): AppLink => {
 const label = app.display_name ?? app.slug;
 const { proxy } = useProxy();
 const { data: apiKeyResponse } = useQuery({
diff --git a/site/src/modules/tasks/tasks.ts b/site/src/modules/tasks/tasks.ts
 import type { Workspace } from "api/typesGenerated";
 import type {
 Workspace,
 WorkspaceAgent,
 WorkspaceApp,
 } from "api/typesGenerated";

 export const AI_PROMPT_PARAMETER_NAME = "AI Prompt";

 export type Task = {
 workspace: Workspace;
 prompt: string;
 };

 export type WorkspaceAppWithAgent = WorkspaceApp & {
 agent: WorkspaceAgent;
 };

 export function getTaskApps(task: Task): WorkspaceAppWithAgent[] {
 return (
 task.workspace.latest_build.resources
 .flatMap((r) => r.agents ?? [])
 .flatMap((agent) =>
 agent.apps.map((app) => ({
 ...app,
 agent,
 })),
 )
 // The Chat UI app will be displayed in the sidebar, so we don't want to
 // show it as a tab.
 .filter(
 (app) => app.id !== task.workspace.latest_build.ai_task_sidebar_app_id,
 )
 );
 }
diff --git a/site/src/pages/TaskPage/TaskAppIframe.tsx b/site/src/pages/TaskPage/TaskAppIframe.tsx
 import type { WorkspaceApp } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import {
 DropdownMenu,
 DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { Spinner } from "components/Spinner/Spinner";
 import { useProxy } from "contexts/ProxyContext";
 import { EllipsisVertical, ExternalLinkIcon, HouseIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { Task } from "modules/tasks/tasks";
 import type { Task, WorkspaceAppWithAgent } from "modules/tasks/tasks";
 import { type FC, useRef } from "react";
 import { Link as RouterLink } from "react-router";
 import { cn } from "utils/cn";
 import { TaskWildcardWarning } from "./TaskWildcardWarning";

 type TaskAppIFrameProps = {
 task: Task;
 app:WorkspaceApp;
 app:WorkspaceAppWithAgent;
 active: boolean;
 pathname?: string;
 };

 export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
 task,
 app,
 active,
 pathname,
 }) => {
 const agent = task.workspace.latest_build.resources
 .flatMap((r) => r.agents)
 .filter((a) => !!a)
 .find((a) => a.apps.some((a) => a.id === app.id));

 if (!agent) {
 throw new Error(`Agent for app ${app.id} not found in task workspace`);
 }

 const link = useAppLink(app, {
 agent,
 agent: app.agent,
 workspace: task.workspace,
 });

 const appHref = (): string => {
 try {
 const url = new URL(link.href, location.href);
 if (pathname) {
 url.pathname = pathname;
 }
 return url.toString();
 } catch (err) {
 console.warn(`Failed to parse URL ${link.href} for app ${app.id}`, err);
 return link.href;
 }
 };

 const proxy = useProxy();
 const frameRef = useRef<HTMLIFrameElement>(null);
 const frameSrc = appHref();
 const shouldDisplayWildcardWarning =
 app.subdomain && !proxy.proxy?.preferredWildcardHostname;

 if (shouldDisplayWildcardWarning) {
 return (
 <div className="h-full flex items-center justify-center pb-4">
 <TaskWildcardWarning />
 </div>
 );
 }

 return (
 <div className={cn([active ? "flex" : "hidden", "w-full h-full flex-col"])}>
 onClick={(e) => {
 e.preventDefault();
 if (frameRef.current?.contentWindow) {
 frameRef.current.contentWindow.location.href =appHref();
 frameRef.current.contentWindow.location.href =link.href;
 }
 }}
 >
 </DropdownMenuTrigger>
 <DropdownMenuContent align="end">
 <DropdownMenuItem asChild>
 <RouterLink to={frameSrc} target="_blank">
 <RouterLink to={link.href} target="_blank">
 <ExternalLinkIcon />
 Open app in new tab
 </RouterLink>
 app.health === "unhealthy" ? (
 <iframe
 ref={frameRef}
 src={frameSrc}
 src={link.href}
 title={link.label}
 loading="eager"
 className={"w-full h-full border-0"}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,7 +12,7 @@ import { cn } from "utils/cn";
		const buttonVariants = cva(
		`
		inline-flex items-center justify-center gap-1 whitespace-nowrap font-sans
		border-solid rounded-md transition-colors
		border-solid rounded-md transition-colors shrink-0
		text-sm font-medium cursor-pointer no-underline
		focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
		disabled:pointer-events-none disabled:text-content-disabled
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,7 +24,7 @@ export const ScrollArea = React.forwardRef<
		));
		ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

		const ScrollBar = React.forwardRef<
		exportconst ScrollBar = React.forwardRef<
		React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
		React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
		>(({ className, orientation = "vertical", ...props }, ref) => (
Expand All		@@ -41,6 +41,6 @@ const ScrollBar = React.forwardRef<
		)}
		{...props}
		>
		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-surface-quaternary" />
		</ScrollAreaPrimitive.ScrollAreaScrollbar>
		));
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,10 +20,17 @@ type UseAppLinkParams = {
		agent: WorkspaceAgent;
		};

		type AppLink = {
		href: string;
		onClick: (e: React.MouseEvent) => void;
		label: string;
		hasToken: boolean;
		};

		export const useAppLink = (
		app: WorkspaceApp,
		{ agent, workspace }: UseAppLinkParams,
		) => {
		): AppLink => {
		const label = app.display_name ?? app.slug;
		const { proxy } = useProxy();
		const { data: apiKeyResponse } = useQuery({
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,8 +1,34 @@
		import type { Workspace } from "api/typesGenerated";
		import type {
		Workspace,
		WorkspaceAgent,
		WorkspaceApp,
		} from "api/typesGenerated";

		export const AI_PROMPT_PARAMETER_NAME = "AI Prompt";

		export type Task = {
		workspace: Workspace;
		prompt: string;
		};

		export type WorkspaceAppWithAgent = WorkspaceApp & {
		agent: WorkspaceAgent;
		};

		export function getTaskApps(task: Task): WorkspaceAppWithAgent[] {
		return (
		task.workspace.latest_build.resources
		.flatMap((r) => r.agents ?? [])
		.flatMap((agent) =>
		agent.apps.map((app) => ({
		...app,
		agent,
		})),
		)
		// The Chat UI app will be displayed in the sidebar, so we don't want to
		// show it as a tab.
		.filter(
		(app) => app.id !== task.workspace.latest_build.ai_task_sidebar_app_id,
		)
		);
		}
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@
		import type { WorkspaceApp } from "api/typesGenerated";
		import { Button } from "components/Button/Button";
		import {
		DropdownMenu,
Expand All		@@ -7,55 +6,42 @@ import {
		DropdownMenuTrigger,
		} from "components/DropdownMenu/DropdownMenu";
		import { Spinner } from "components/Spinner/Spinner";
		import { useProxy } from "contexts/ProxyContext";
		import { EllipsisVertical, ExternalLinkIcon, HouseIcon } from "lucide-react";
		import { useAppLink } from "modules/apps/useAppLink";
		import type { Task } from "modules/tasks/tasks";
		import type { Task, WorkspaceAppWithAgent } from "modules/tasks/tasks";
		import { type FC, useRef } from "react";
		import { Link as RouterLink } from "react-router";
		import { cn } from "utils/cn";
		import { TaskWildcardWarning } from "./TaskWildcardWarning";

		type TaskAppIFrameProps = {
		task: Task;
		app:WorkspaceApp;
		app:WorkspaceAppWithAgent;
		active: boolean;
		pathname?: string;
		};

		export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
		task,
		app,
		active,
		pathname,
		}) => {
		const agent = task.workspace.latest_build.resources
		.flatMap((r) => r.agents)
		.filter((a) => !!a)
		.find((a) => a.apps.some((a) => a.id === app.id));

		if (!agent) {
		throw new Error(`Agent for app ${app.id} not found in task workspace`);
BrunoQuaresma marked this conversation as resolved. Show resolvedHide resolved
		}

		const link = useAppLink(app, {
		agent,
		agent: app.agent,
		workspace: task.workspace,
		});

		const appHref = (): string => {
BrunoQuaresma marked this conversation as resolved. Show resolvedHide resolved
		try {
		const url = new URL(link.href, location.href);
		if (pathname) {
		url.pathname = pathname;
		}
		return url.toString();
		} catch (err) {
		console.warn(`Failed to parse URL ${link.href} for app ${app.id}`, err);
		return link.href;
		}
		};

		const proxy = useProxy();
		const frameRef = useRef<HTMLIFrameElement>(null);
		const frameSrc = appHref();
		const shouldDisplayWildcardWarning =
		app.subdomain && !proxy.proxy?.preferredWildcardHostname;

		if (shouldDisplayWildcardWarning) {
		return (
		<div className="h-full flex items-center justify-center pb-4">
		<TaskWildcardWarning />
		</div>
		);
		}

		return (
		<div className={cn([active ? "flex" : "hidden", "w-full h-full flex-col"])}>
Expand All		@@ -67,7 +53,7 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
		onClick={(e) => {
		e.preventDefault();
		if (frameRef.current?.contentWindow) {
		frameRef.current.contentWindow.location.href =appHref();
		frameRef.current.contentWindow.location.href =link.href;
		}
		}}
		>
Expand All		@@ -88,7 +74,7 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
		</DropdownMenuTrigger>
		<DropdownMenuContent align="end">
		<DropdownMenuItem asChild>
		<RouterLink to={frameSrc} target="_blank">
		<RouterLink to={link.href} target="_blank">
		<ExternalLinkIcon />
		Open app in new tab
		</RouterLink>
Expand All		@@ -103,7 +89,7 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
		app.health === "unhealthy" ? (
		<iframe
		ref={frameRef}
		src={frameSrc}
		src={link.href}
		title={link.label}
		loading="eager"
		className={"w-full h-full border-0"}
Expand Down