refactor(ui): improve agent execution layout with sticky header and configuration

Restructure AgentExecution component layout to enhance user experience:
- Make header and configuration sections sticky to remain visible during scrolling
- Optimize scrollable output display area with proper overflow handling
- Improve container structure for better layout management and responsiveness
- Maintain existing functionality while providing better visual organization

src/components/AgentExecution.tsx

@@ -442,13 +442,16 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
 
   return (
     <div className={cn("flex flex-col h-full bg-background", className)}>
-      <div className="w-full max-w-5xl mx-auto h-full flex flex-col">
+      {/* Fixed container that takes full height */}
-        {/* Header */}
+      <div className="h-full flex flex-col">
+        {/* Sticky Header */}
+        <div className="sticky top-0 z-10 bg-background border-b border-border">
+          <div className="w-full max-w-5xl mx-auto">
             <motion.div
               initial={{ opacity: 0, y: -20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.3 }}
-          className="flex items-center justify-between p-4 border-b border-border"
+              className="flex items-center justify-between p-4"
             >
               <div className="flex items-center space-x-3">
                 <Button
@@ -530,9 +533,12 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
                 )}
               </div>
             </motion.div>
+          </div>
+        </div>
         
-        {/* Configuration */}
+        {/* Sticky Configuration */}
-        <div className="p-4 border-b border-border space-y-4">
+        <div className="sticky top-[73px] z-10 bg-background border-b border-border">
+          <div className="w-full max-w-5xl mx-auto p-4 space-y-4">
             {/* Error display */}
             {error && (
               <motion.div
@@ -661,12 +667,14 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
               </div>
             </div>
           </div>
+        </div>
 
-        {/* Output Display */}
+        {/* Scrollable Output Display */}
-        <div className="flex-1 flex flex-col min-h-0">
+        <div className="flex-1 overflow-hidden">
+          <div className="w-full max-w-5xl mx-auto h-full">
             <div 
               ref={scrollContainerRef}
-            className="flex-1 w-full overflow-y-auto p-6 space-y-8"
+              className="h-full overflow-y-auto p-6 space-y-8"
               onScroll={() => {
                 // Mark that user has scrolled manually
                 if (!hasUserScrolled) {
@@ -700,7 +708,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
               )}
 
               <div
-              className="relative w-full max-w-5xl mx-auto"
+                className="relative w-full"
                 style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
               >
                 <AnimatePresence>
@@ -731,6 +739,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
             </div>
           </div>
         </div>
+      </div>
 
       {/* Floating Execution Control Bar */}
       <ExecutionControlBar