-

faas/web/src/App.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Box, Title, Tabs, Stack, ActionIcon, Group, Select } from '@mantine/core';
+import { Box, Title, Tabs, ActionIcon, Group, Select } from '@mantine/core';
+import { SidebarLayout } from '@skybridge/web-components';
 import { 
   IconFunction, 
   IconPlayerPlay,
@@ -123,14 +124,41 @@ const App: React.FC = () => {
     }
   };
 
+  // Determine which sidebar is active
+  const getActiveSidebar = () => {
+    if (functionSidebarOpened) {
+      return (
+        <FunctionSidebar
+          opened={functionSidebarOpened}
+          onClose={handleSidebarClose}
+          onSuccess={handleFormSuccess}
+          editFunction={editingFunction}
+        />
+      );
+    }
+    if (executionSidebarOpened) {
+      return (
+        <ExecutionSidebar
+          opened={executionSidebarOpened}
+          onClose={handleExecutionClose}
+          function={executingFunction}
+        />
+      );
+    }
+    return null;
+  };
+
   return (
-    <>
-      <Stack 
-        gap="lg"
-        style={{
-          transition: 'margin-right 0.3s ease',
-          marginRight: (functionSidebarOpened || executionSidebarOpened) ? 
-            (functionSidebarOpened ? '500px' : '600px') : '0',
+    <SidebarLayout
+      sidebarOpened={functionSidebarOpened || executionSidebarOpened}
+      sidebarWidth={600}
+      sidebar={getActiveSidebar()}
+    >
+      <Box 
+        style={{ 
+          display: 'flex', 
+          flexDirection: 'column', 
+          gap: '1rem',
         }}
       >
         <div>
@@ -191,21 +219,8 @@ const App: React.FC = () => {
             {renderContent()}
           </Box>
         </Tabs>
-      </Stack>
-
-      <FunctionSidebar
-        opened={functionSidebarOpened}
-        onClose={handleSidebarClose}
-        onSuccess={handleFormSuccess}
-        editFunction={editingFunction}
-      />
-
-      <ExecutionSidebar
-        opened={executionSidebarOpened}
-        onClose={handleExecutionClose}
-        function={executingFunction}
-      />
-    </>
+      </Box>
+    </SidebarLayout>
   );
 };
 

faas/web/src/components/ExecutionModal.tsx

@@ -17,7 +17,7 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { IconPlayerPlay, IconPlayerStop, IconRefresh, IconCopy } from '@tabler/icons-react';
-import { notifications } from '@mantine/notifications';
+import { notifications, ExecutionStatusBadge } from '@skybridge/web-components';
 import { functionApi, executionApi } from '../services/apiService';
 import { FunctionDefinition, ExecuteFunctionResponse, FunctionExecution } from '../types';
 
@@ -224,17 +224,6 @@ export const ExecutionModal: React.FC<ExecutionModalProps> = ({
     }
   };
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'completed': return 'green';
-      case 'failed': return 'red';
-      case 'running': return 'blue';
-      case 'pending': return 'yellow';
-      case 'canceled': return 'orange';
-      case 'timeout': return 'red';
-      default: return 'gray';
-    }
-  };
 
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
@@ -316,9 +305,7 @@ export const ExecutionModal: React.FC<ExecutionModalProps> = ({
               <Group justify="space-between" mb="sm">
                 <Text fw={500}>Execution #{result.execution_id.slice(0, 8)}...</Text>
                 <Group gap="xs">
-                  <Badge color={getStatusColor(execution?.status || result.status)}>
-                    {execution?.status || result.status}
-                  </Badge>
+                  <ExecutionStatusBadge value={execution?.status || result.status} />
                   {result.duration && (
                     <Badge variant="light">
                       {result.duration}ms

faas/web/src/components/ExecutionSidebar.tsx

@@ -247,21 +247,17 @@ export const ExecutionSidebar: React.FC<ExecutionSidebarProps> = ({
     });
   };
 
+  if (!opened) return null;
+
   return (
     <Paper
       style={{
-        position: 'fixed',
-        top: 60, // Below header
-        right: opened ? 0 : '-600px',
-        bottom: 0,
-        width: '600px',
-        zIndex: 1000,
+        height: '100%',
         borderRadius: 0,
         display: 'flex',
         flexDirection: 'column',
         borderLeft: '1px solid var(--mantine-color-gray-3)',
         backgroundColor: 'var(--mantine-color-body)',
-        transition: 'right 0.3s ease',
       }}
     >
       {/* Header */}

faas/web/src/components/FunctionSidebar.tsx

@@ -6,7 +6,11 @@ import {
   Divider,
   Box,
   ScrollArea,
+  Group,
+  Title,
+  ActionIcon,
 } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
 import { 
   FormSidebar, 
   FormField 
@@ -197,24 +201,35 @@ func Handler(ctx context.Context, event Event) (map[string]interface{}, error) {
     }
   };
 
-  // Create a custom sidebar that includes the Monaco editor
+  // Create a sidebar that works with SidebarLayout
+  if (!opened) return null;
+
   return (
     <Paper
       style={{
-        position: 'fixed',
-        top: 60,
-        right: opened ? 0 : '-600px',
-        bottom: 0,
-        width: '600px',
-        zIndex: 1000,
+        height: '100%',
         borderRadius: 0,
         display: 'flex',
         flexDirection: 'column',
         borderLeft: '1px solid var(--mantine-color-gray-3)',
         backgroundColor: 'var(--mantine-color-body)',
-        transition: 'right 0.3s ease',
       }}
     >
+      {/* Header */}
+      <Group justify="space-between" p="md" style={{ borderBottom: '1px solid var(--mantine-color-gray-3)' }}>
+        <Title order={4}>
+          {editFunction ? 'Edit Function' : 'Create Function'}
+        </Title>
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          onClick={onClose}
+        >
+          <IconX size={18} />
+        </ActionIcon>
+      </Group>
+
+      {/* Content */}
       <ScrollArea style={{ flex: 1 }}>
         <Stack gap="md" p="md">
           <FormSidebar