improvement(deployed-mcp): added the ability to make the visibility for deployed mcp tools public, updated UX (#2853)

* improvement(deployed-mcp): added the ability to make the visibility for deployed mcp tools public, updated UX

* use reactquery

* migrated chats to use reactquery, upgraded entire deploymodal to use reactquery instead of manual state management

* added hooks for chat chats and updated callers to all use reactquery

* fix

* updated comments

* consolidated utils

apps/sim/components/emcn/components/index.ts

@@ -93,6 +93,11 @@ export {
   type SModalSidebarItemProps,
   SModalSidebarSection,
   SModalSidebarSectionTitle,
+  SModalTabs,
+  SModalTabsBody,
+  SModalTabsContent,
+  SModalTabsList,
+  SModalTabsTrigger,
   SModalTrigger,
 } from './s-modal/s-modal'
 export { Slider, type SliderProps } from './slider/slider'

apps/sim/components/emcn/components/input/input.tsx

@@ -26,7 +26,7 @@ import { cn } from '@/lib/core/utils/cn'
  * Currently supports a 'default' variant.
  */
 const inputVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-sm text-foreground transition-colors placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {

apps/sim/components/emcn/components/s-modal/s-modal.tsx

@@ -26,6 +26,7 @@
 
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { X } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
 import { Button } from '../button/button'
@@ -211,7 +212,7 @@ const SModalMain = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
     <div
       ref={ref}
       className={cn(
-        'flex min-w-0 flex-1 flex-col gap-[16px] rounded-[8px] border-l bg-[var(--surface-2)] p-[14px]',
+        'flex min-w-0 flex-1 flex-col gap-[16px] overflow-hidden rounded-[8px] border-l bg-[var(--surface-2)] p-[14px]',
         className
       )}
       {...props}
@@ -245,12 +246,146 @@ SModalMainHeader.displayName = 'SModalMainHeader'
  */
 const SModalMainBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('min-w-0 flex-1 overflow-y-auto', className)} {...props} />
+    <div
+      ref={ref}
+      className={cn('min-w-0 flex-1 overflow-y-auto overflow-x-hidden', className)}
+      {...props}
+    />
   )
 )
 
 SModalMainBody.displayName = 'SModalMainBody'
 
+/**
+ * Sidebar modal tabs root component.
+ */
+const SModalTabs = TabsPrimitive.Root
+
+interface SModalTabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+  /** Currently active tab value for indicator positioning */
+  activeValue?: string
+  /**
+   * Whether the tabs are disabled (non-interactive with reduced opacity)
+   * @default false
+   */
+  disabled?: boolean
+}
+
+/**
+ * Sidebar modal tabs list component with animated indicator.
+ */
+const SModalTabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  SModalTabsListProps
+>(({ className, children, activeValue, disabled = false, ...props }, ref) => {
+  const listRef = React.useRef<HTMLDivElement>(null)
+  const [indicator, setIndicator] = React.useState({ left: 0, width: 0 })
+  const [ready, setReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const list = listRef.current
+    if (!list) return
+
+    const updateIndicator = () => {
+      const activeTab = list.querySelector('[data-state="active"]') as HTMLElement | null
+      if (!activeTab) return
+
+      setIndicator({
+        left: activeTab.offsetLeft,
+        width: activeTab.offsetWidth,
+      })
+      setReady(true)
+    }
+
+    updateIndicator()
+
+    const observer = new MutationObserver(updateIndicator)
+    observer.observe(list, { attributes: true, subtree: true, attributeFilter: ['data-state'] })
+    window.addEventListener('resize', updateIndicator)
+
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', updateIndicator)
+    }
+  }, [activeValue])
+
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        'relative flex gap-[16px] px-4',
+        disabled && 'pointer-events-none opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <div ref={listRef} className='flex gap-[16px]'>
+        {children}
+      </div>
+      <span
+        className={cn(
+          'pointer-events-none absolute bottom-0 h-[1px] rounded-full bg-[var(--text-primary)]',
+          ready && 'transition-all duration-200 ease-out'
+        )}
+        style={{ left: indicator.left, width: indicator.width }}
+      />
+    </TabsPrimitive.List>
+  )
+})
+
+SModalTabsList.displayName = 'SModalTabsList'
+
+/**
+ * Sidebar modal tab trigger component.
+ */
+const SModalTabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors',
+      'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
+      className
+    )}
+    {...props}
+  />
+))
+
+SModalTabsTrigger.displayName = 'SModalTabsTrigger'
+
+/**
+ * Sidebar modal tab content component.
+ */
+const SModalTabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content ref={ref} className={cn('pb-[10px]', className)} {...props} />
+))
+
+SModalTabsContent.displayName = 'SModalTabsContent'
+
+/**
+ * Sidebar modal tabs body container with border-top divider.
+ * Wraps tab content panels to provide consistent styling with ModalBody.
+ */
+const SModalTabsBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'min-h-0 flex-1 overflow-y-auto border-[var(--border)] border-t pt-[10px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+SModalTabsBody.displayName = 'SModalTabsBody'
+
 export {
   SModal,
   SModalTrigger,
@@ -264,4 +399,9 @@ export {
   SModalMain,
   SModalMainHeader,
   SModalMainBody,
+  SModalTabs,
+  SModalTabsList,
+  SModalTabsTrigger,
+  SModalTabsContent,
+  SModalTabsBody,
 }