May 29, 2025 · May 29, 2025 · May 29, 2025 · May 29, 2025 · May 29, 2025 · May 29, 2025
diff --git a/site/src/components/DropdownMenu/DropdownMenu.tsx b/site/src/components/DropdownMenu/DropdownMenu.tsx
 [
 "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-2 text-sm text-content-secondary font-medium outline-none transition-colors",
 "focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 "[&>svg]:size-4 [&>svg]:shrink-0 no-underline",
 "[&>svg]:size-4 [&>svg]:shrink-0[&>img]:size-4 [&>img]:shrink-0no-underline",
 inset && "pl-8",
 ],
 className,
diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx
 {
 ...MockWorkspaceApp,
 id: "vscode",
 display_name: "VSCode",
 display_name: "VS Code Web",
 icon: "/icon/code.svg",
 },
 {
 ...MockWorkspaceApp,
 id: "zed",
 display_name: "Zed",
 icon: "/icon/zed.svg",
 },
 ],
 },
 ],
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
 import { getErrorDetail, getErrorMessage } from "api/errors";
 import type { WorkspaceApp, WorkspaceStatus } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import {
 DropdownMenu,
 DropdownMenuContent,
 DropdownMenuItem,
 DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useProxy } from "contexts/ProxyContext";
 import { ArrowLeftIcon, LayoutGridIcon, RotateCcwIcon } from "lucide-react";
 import {
 ArrowLeftIcon,
 ChevronDownIcon,
 LayoutGridIcon,
 RotateCcwIcon,
 } from "lucide-react";
 import { AppStatusIcon } from "modules/apps/AppStatusIcon";
 import { getAppHref } from "modules/apps/apps";
 import { useAppLink } from "modules/apps/useAppLink";

 <Button variant="outline" asChild>
 <RouterLink
 to={`/@${task.workspace.owner_username}/${task.workspace.name}`}
 to={`/@${task.workspace.owner_name}/${task.workspace.name}`}
 >
 View workspace
 </RouterLink>
 return src;
 });

 const embeddedApps = apps.filter((app) => !app.external);
 const externalApps = apps.filter((app) => app.external);

 return (
 <main className="flex-1 flex flex-col">
 <div className="border-0 border-b border-border border-solid w-full p-1 flex gap-2">
 {apps.map((app) => (
 <TaskAppButton
 key={app.id}
 task={task}
 app={app}
 active={app.id === activeAppId}
 onClick={(e) => {
 if (app.external) {
 return;
 }

 e.preventDefault();
 setActiveAppId(app.id);
 setIframeSrc(e.currentTarget.href);
 }}
 />
 ))}
 {embeddedApps
 .filter((app) => !app.external)
 .map((app) => (
 <TaskAppButton
 key={app.id}
 task={task}
 app={app}
 active={app.id === activeAppId}
 onClick={(e) => {
 if (app.external) {
 return;
 }

 e.preventDefault();
 setActiveAppId(app.id);
 setIframeSrc(e.currentTarget.href);
 }}
 />
 ))}

 {externalApps.length > 0 && (
 <div className="ml-auto">
 <DropdownMenu>
 <DropdownMenuTrigger asChild>
 <Button size="sm" variant="subtle">
 Open in IDE
 <ChevronDownIcon />
 </Button>
 </DropdownMenuTrigger>
 <DropdownMenuContent>
 {externalApps
 .filter((app) => app.external)
 .map((app) => {
 const link = useAppLink(app, {
 agent,
 workspace: task.workspace,
 });

 return (
 <DropdownMenuItem key={app.id} asChild>
 <RouterLink to={link.href}>
 {app.icon ? (
 <ExternalImage src={app.icon} />
 ) : (
 <LayoutGridIcon />
 )}
 {link.label}
 </RouterLink>
 </DropdownMenuItem>
 );
 })}
 </DropdownMenuContent>
 </DropdownMenu>
 </div>
 )}
 </div>

 <div className="flex-1">
Original file line number	Diff line number	Diff line change
Expand Up		@@ -111,7 +111,7 @@ export const DropdownMenuItem = forwardRef<
		[
		"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-2 text-sm text-content-secondary font-medium outline-none transition-colors",
		"focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
		"[&>svg]:size-4 [&>svg]:shrink-0 no-underline",
		"[&>svg]:size-4 [&>svg]:shrink-0[&>img]:size-4 [&>img]:shrink-0no-underline",
		inset && "pl-8",
		],
		className,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -131,9 +131,15 @@ export const Active: Story = {
		{
		...MockWorkspaceApp,
		id: "vscode",
		display_name: "VSCode",
		display_name: "VS Code Web",
		icon: "/icon/code.svg",
		},
		{
		...MockWorkspaceApp,
		id: "zed",
		display_name: "Zed",
		icon: "/icon/zed.svg",
		},
		],
		},
		],
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,6 +2,12 @@ import { API } from "api/api";
		import { getErrorDetail, getErrorMessage } from "api/errors";
		import type { WorkspaceApp, WorkspaceStatus } from "api/typesGenerated";
		import { Button } from "components/Button/Button";
		import {
		DropdownMenu,
		DropdownMenuContent,
		DropdownMenuItem,
		DropdownMenuTrigger,
		} from "components/DropdownMenu/DropdownMenu";
		import { ExternalImage } from "components/ExternalImage/ExternalImage";
		import { Loader } from "components/Loader/Loader";
		import { Margins } from "components/Margins/Margins";
Expand All		@@ -14,7 +20,12 @@ import {
		TooltipTrigger,
		} from "components/Tooltip/Tooltip";
		import { useProxy } from "contexts/ProxyContext";
		import { ArrowLeftIcon, LayoutGridIcon, RotateCcwIcon } from "lucide-react";
		import {
		ArrowLeftIcon,
		ChevronDownIcon,
		LayoutGridIcon,
		RotateCcwIcon,
		} from "lucide-react";
		import { AppStatusIcon } from "modules/apps/AppStatusIcon";
		import { getAppHref } from "modules/apps/apps";
		import { useAppLink } from "modules/apps/useAppLink";
Expand DownExpand Up		@@ -255,7 +266,7 @@ const TaskPage = () => {

		<Button variant="outline" asChild>
		<RouterLink
		to={`/@${task.workspace.owner_username}/${task.workspace.name}`}
		to={`/@${task.workspace.owner_name}/${task.workspace.name}`}
		>
		View workspace
		</RouterLink>
Expand DownExpand Up		@@ -312,26 +323,67 @@ const TaskApps: FC<TaskAppsProps> = ({ task }) => {
		return src;
		});

		const embeddedApps = apps.filter((app) => !app.external);
		const externalApps = apps.filter((app) => app.external);

		return (
		<main className="flex-1 flex flex-col">
		<div className="border-0 border-b border-border border-solid w-full p-1 flex gap-2">
		{apps.map((app) => (
		<TaskAppButton
		key={app.id}
		task={task}
		app={app}
		active={app.id === activeAppId}
		onClick={(e) => {
		if (app.external) {
		return;
		}

		e.preventDefault();
		setActiveAppId(app.id);
		setIframeSrc(e.currentTarget.href);
		}}
		/>
		))}
		{embeddedApps
		.filter((app) => !app.external)
		.map((app) => (
		<TaskAppButton
		key={app.id}
		task={task}
		app={app}
		active={app.id === activeAppId}
		onClick={(e) => {
		if (app.external) {
		return;
		}

		e.preventDefault();
		setActiveAppId(app.id);
		setIframeSrc(e.currentTarget.href);
		}}
		/>
		))}

		{externalApps.length > 0 && (
		<div className="ml-auto">
		<DropdownMenu>
		<DropdownMenuTrigger asChild>
		<Button size="sm" variant="subtle">
		Open in IDE
		<ChevronDownIcon />
		</Button>
		</DropdownMenuTrigger>
		<DropdownMenuContent>
		{externalApps
		.filter((app) => app.external)
		.map((app) => {
		const link = useAppLink(app, {
		agent,
		workspace: task.workspace,
		});

		return (
		<DropdownMenuItem key={app.id} asChild>
		<RouterLink to={link.href}>
		{app.icon ? (
		<ExternalImage src={app.icon} />
		) : (
		<LayoutGridIcon />
		)}
		{link.label}
		</RouterLink>
		</DropdownMenuItem>
		);
		})}
		</DropdownMenuContent>
		</DropdownMenu>
		</div>
		)}
		</div>

		<div className="flex-1">
Expand Down