@@ -7,7 +7,16 @@ import {
77DropdownMenuTrigger ,
88} from "components/DropdownMenu/DropdownMenu" ;
99import { ExternalImage } from "components/ExternalImage/ExternalImage" ;
10- import { ChevronDownIcon , LayoutGridIcon } from "lucide-react" ;
10+ import {
11+ ArrowLeftIcon ,
12+ ArrowRightIcon ,
13+ ChevronDownIcon ,
14+ EllipsisVertical ,
15+ HouseIcon ,
16+ LayoutGridIcon ,
17+ RefreshCwIcon ,
18+ RotateCwIcon ,
19+ } from "lucide-react" ;
1120import { useAppLink } from "modules/apps/useAppLink" ;
1221import type { Task } from "modules/tasks/tasks" ;
1322import type React from "react" ;
@@ -16,6 +25,7 @@ import { Link as RouterLink } from "react-router-dom";
1625import { cn } from "utils/cn" ;
1726import { TaskAppIFrame } from "./TaskAppIframe" ;
1827import { AI_APP_CHAT_SLUG } from "./constants" ;
28+ import { Input } from "components/Input/Input" ;
1929
2030type TaskAppsProps = {
2131task :Task ;
@@ -57,19 +67,21 @@ export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
5767
5868return (
5969< main className = "flex-1 flex flex-col" >
60- < div className = "border-0 border-b border-border border-solid w-full p-1 flex gap-2" >
61- { embeddedApps . map ( ( app ) => (
62- < TaskAppButton
63- key = { app . id }
64- task = { task }
65- app = { app }
66- active = { app . id === activeAppId }
67- onClick = { ( e ) => {
68- e . preventDefault ( ) ;
69- setActiveAppId ( app . id ) ;
70- } }
71- />
72- ) ) }
70+ < div className = "w-full flex items-center border-0 border-b border-border border-solid" >
71+ < div className = " p-2 pb-0 flex gap-2 items-center" >
72+ { embeddedApps . map ( ( app ) => (
73+ < TaskAppTab
74+ key = { app . id }
75+ task = { task }
76+ app = { app }
77+ active = { app . id === activeAppId }
78+ onClick = { ( e ) => {
79+ e . preventDefault ( ) ;
80+ setActiveAppId ( app . id ) ;
81+ } }
82+ />
83+ ) ) }
84+ </ div >
7385
7486{ externalApps . length > 0 && (
7587< div className = "ml-auto" >
@@ -106,6 +118,37 @@ export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
106118) }
107119</ div >
108120
121+ < div className = "bg-surface-tertiary p-2 py-1 flex items-center gap-1" >
122+ < div className = "flex items-center" >
123+ < Button size = "icon" variant = "subtle" >
124+ < ArrowLeftIcon />
125+ < span className = "sr-only" > Back</ span >
126+ </ Button >
127+
128+ < Button size = "icon" variant = "subtle" >
129+ < ArrowRightIcon />
130+ < span className = "sr-only" > Forward</ span >
131+ </ Button >
132+
133+ < Button size = "icon" variant = "subtle" >
134+ < RotateCwIcon />
135+ < span className = "sr-only" > Refresh</ span >
136+ </ Button >
137+
138+ < Button size = "icon" variant = "subtle" >
139+ < HouseIcon />
140+ < span className = "sr-only" > Home</ span >
141+ </ Button >
142+ </ div >
143+
144+ < Input className = "w-full rounded-full bg-surface-secondary h-9 md:text-xs" />
145+
146+ < Button size = "icon" variant = "subtle" >
147+ < EllipsisVertical />
148+ < span className = "sr-only" > More options</ span >
149+ </ Button >
150+ </ div >
151+
109152< div className = "flex-1" >
110153{ embeddedApps . map ( ( app ) => {
111154return (
@@ -122,19 +165,14 @@ export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
122165) ;
123166} ;
124167
125- type TaskAppButtonProps = {
168+ type TaskAppTabProps = {
126169task :Task ;
127170app :WorkspaceApp ;
128171active :boolean ;
129172onClick :( e :React . MouseEvent < HTMLAnchorElement > ) => void ;
130173} ;
131174
132- const TaskAppButton :FC < TaskAppButtonProps > = ( {
133- task,
134- app,
135- active,
136- onClick,
137- } ) => {
175+ const TaskAppTab :FC < TaskAppTabProps > = ( { task, app, active, onClick} ) => {
138176const agent = task . workspace . latest_build . resources
139177. flatMap ( ( r ) => r . agents )
140178. filter ( ( a ) => ! ! a )
@@ -156,7 +194,11 @@ const TaskAppButton: FC<TaskAppButtonProps> = ({
156194key = { app . id }
157195asChild
158196className = { cn ( [
159- { "text-content-primary" :active } ,
197+ "px-3" ,
198+ {
199+ "text-content-primary bg-surface-tertiary rounded-sm rounded-b-none" :
200+ active ,
201+ } ,
160202{ "opacity-75 hover:opacity-100" :! active } ,
161203] ) }
162204>