feat: add agent page tabs

src/components/Section.tsx

@@ -55,10 +55,11 @@ interface Props {
   children?: React.ReactNode
   noPaddingTop?: boolean
   noMarginTop?: boolean
+  sx?: object
 }
 
 export default function Section(props: Props) {
-  const { title, description, collapsable, children, noPaddingTop, noMarginTop } = props
+  const { title, description, collapsable, children, noPaddingTop, noMarginTop, sx } = props
   const [expanded, setExpanded] = useState(true)
 
   const handleAccordionChange = () => {
@@ -67,7 +68,7 @@ export default function Section(props: Props) {
 
   if (collapsable) {
     return (
-      <Paper noPaddingTop={noPaddingTop} sx={{ p: '20px' }}>
+      <Paper noPaddingTop={noPaddingTop} sx={{ p: '20px', ...sx }}>
         <StyledAccordion disableGutters expanded={expanded} onChange={handleAccordionChange}>
           <StyledAccordionSummary>
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
@@ -89,7 +90,7 @@ export default function Section(props: Props) {
   }
 
   return (
-    <Paper noPaddingTop={noPaddingTop}>
+    <Paper noPaddingTop={noPaddingTop} sx={{ ...sx }}>
       {title && <StyledTitle variant='h6'>{title}</StyledTitle>}
       {description && <StyledDescription>{description}</StyledDescription>}
       {children}

src/components/Workloads.tsx

@@ -3,12 +3,11 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { GetAllWorkloadsApiResponse } from 'redux/otomiApi'
-import { CircularProgress } from '@mui/material'
+import { Status, getStatus } from 'utils/status'
 import { useSocket } from 'providers/Socket'
 import { HeadCell } from './EnhancedTable'
 import RLink from './Link'
 import ListTable from './ListTable'
-import Iconify from './Iconify'
 
 interface Row {
   teamId: string
@@ -38,22 +37,6 @@ const getArgocdApplicationLink = (row: Row, domainSuffix: string) => {
   )
 }
 
-type Status = 'Unknown' | 'Pending' | 'Succeeded' | 'NotFound'
-
-export const getStatus = (status: Status) => {
-  if (!status || status === 'NotFound') return <CircularProgress size='22px' />
-  switch (status) {
-    case 'Unknown':
-      return <Iconify color='#FF4842' icon='eva:alert-circle-fill' width={22} height={22} />
-    case 'Pending':
-      return <Iconify color='#FFC107' icon='eva:alert-triangle-fill' width={22} height={22} />
-    case 'Succeeded':
-      return <Iconify color='#54D62C' icon='eva:checkmark-circle-2-fill' width={22} height={22} />
-    default:
-      return <CircularProgress size='22px' />
-  }
-}
-
 interface Props {
   workloads: GetAllWorkloadsApiResponse
   teamId?: string
@@ -89,7 +72,7 @@ export default function ({ workloads, teamId }: Props): React.ReactElement {
     {
       id: 'Status',
       label: 'Status',
-      renderer: (row: Row) => getStatus(statuses?.workloads?.[row.name]),
+      renderer: (row: Row) => getStatus((statuses?.workloads?.[row.name] as Status) || 'NotFound'),
     },
   ]
 

src/components/forms/Autocomplete.tsx

@@ -36,7 +36,9 @@ export interface EnhancedAutocompleteProps<
   /** Removes the "select all" option for multiselect */
   disableSelectAll?: boolean
   textFieldProps?: Partial<TextFieldProps>
-  width?: 'small' | 'medium' | 'large'
+  width?: 'small' | 'medium' | 'large' | 'fullwidth'
+  /** Hide placeholder and minimize input width when values are selected (for cleaner multi-select UX) */
+  compactMultiSelect?: boolean
 }
 
 export function Autocomplete<
@@ -58,6 +60,7 @@ export function Autocomplete<
     loadingText,
     multiple,
     disableSelectAll = false,
+    noMarginTop = false,
     noOptionsText,
     onBlur,
     options,
@@ -68,11 +71,15 @@ export function Autocomplete<
     value,
     onChange,
     width = 'medium',
+    compactMultiSelect = false,
     ...rest
   } = props
 
   const [inPlaceholder, setInPlaceholder] = useState('')
 
+  // Check if there are selected values (for hiding placeholder when values exist)
+  const hasValues = multiple ? Array.isArray(value) && value.length > 0 : !!value
+
   // --- select-all logic ---
   const isSelectAllActive = multiple && Array.isArray(value) && value.length === options.length
 
@@ -121,8 +128,10 @@ export function Autocomplete<
             label={label}
             width={width}
             loading={loading}
-            placeholder={inPlaceholder || placeholder || 'Select an option'}
+            noMarginTop={noMarginTop}
+            placeholder={compactMultiSelect && hasValues ? '' : inPlaceholder || placeholder || 'Select an option'}
             {...params}
+            {...textFieldProps}
             error={!!errorText}
             helperText={helperText}
             InputProps={{
@@ -133,6 +142,10 @@ export function Autocomplete<
                 flexWrap: 'wrap',
                 gap: 1,
                 paddingRight: '44px',
+                '& input': {
+                  minWidth: compactMultiSelect && hasValues && multiple ? '30px !important' : undefined,
+                  width: compactMultiSelect && hasValues && multiple ? '30px !important' : undefined,
+                },
               },
             }}
             InputLabelProps={{

src/components/forms/TextArea.tsx

@@ -175,23 +175,27 @@ export function AutoResizableTextarea({
 
   return (
     <Box>
-      <InputLabel
-        className={classes.inputLabel}
-        sx={{
-          fontWeight: 'bold',
-          fontSize: '14px',
-          visibility: label ? 'visible' : 'hidden',
-          marginTop: label ? '16px' : '0px',
-        }}
-      >
-        {label}
-      </InputLabel>
+      {label && (
+        <InputLabel
+          className={classes.inputLabel}
+          sx={{
+            fontWeight: 'bold',
+            fontSize: '14px',
+            visibility: label ? 'visible' : 'hidden',
+            marginTop: label ? '16px' : '0px',
+            height: label ? 'auto' : '0px',
+          }}
+        >
+          {label}
+        </InputLabel>
+      )}
       <Box
         sx={{
           position: 'relative',
           display: 'flex',
           alignItems: 'flex-start',
           gap: '8px',
+          marginTop: label ? '0px' : '16px',
         }}
       >
         <textarea

src/components/AgentPlayground.tsx → src/pages/agents/create-edit/AgentPlayground.tsx

@@ -3,9 +3,9 @@ import { Alert, Box, IconButton, TextField, Typography, keyframes } from '@mui/m
 import SendIcon from '@mui/icons-material/Send'
 import DeleteIcon from '@mui/icons-material/Delete'
 import StopIcon from '@mui/icons-material/StopCircle'
-import Markdown from './Markdown'
-import { Paper } from './Paper'
-import Iconify from './Iconify'
+import Markdown from 'components/Markdown'
+import { Paper } from 'components/Paper'
+import Iconify from 'components/Iconify'
 
 const thinkingAnimation = keyframes`
   0%, 60%, 100% {
@@ -27,7 +27,7 @@ interface AgentPlaygroundProps {
   agentName: string
 }
 
-export function AgentPlayground({ teamId, agentName }: AgentPlaygroundProps): React.ReactElement {
+export default function AgentPlayground({ teamId, agentName }: AgentPlaygroundProps): React.ReactElement {
   const [messages, setMessages] = useState<Message[]>([])
   const [input, setInput] = useState('')
   const [loading, setLoading] = useState(false)
@@ -201,7 +201,6 @@ export function AgentPlayground({ teamId, agentName }: AgentPlaygroundProps): Re
             mb: 2,
             border: '1px solid',
             borderColor: 'divider',
-            borderRadius: 1,
             p: 2,
             backgroundColor: 'background.default',
           }}