fix(search): gate Zoom rollout and correct Lucid tiles (#8491)

Author: waleedlatif1

apps/docs/components/icons.tsx

@@ -6,8 +6,7 @@ interface LucidIconProps extends SVGProps<SVGSVGElement> {}
 export function LucidIcon(props: LucidIconProps) {
   return (
     <svg {...props} viewBox='0 0 192 192' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <rect width='192' height='192' rx='32' fill='#282C33' />
-      <g transform='translate(46 24)' fill='#FFFFFF'>
+      <g transform='translate(46 24)' fill='currentColor'>
         <path d='M50 0L0 28.9V144.5L50 115.6V0Z' />
         <path d='M100 142.7V86.7L50 115.6V142.7H100Z' />
       </g>

apps/sim/app/o/[organizationId]/integrations/live-member-integrations.tsx

@@ -74,6 +74,7 @@ export function LiveMemberIntegrations({ organizationId, search }: LiveMemberInt
         )
   const available = LIVE_SEARCH_SOURCE_TYPES.filter(
     ([provider]) =>
+      (approvals.get(provider)?.available !== false || accountsForProvider(provider).length > 0) &&
       LIVE_SEARCH_SCOPE_FIELDS[provider] &&
       ((provider !== 'hubspot' && provider !== 'zoom') ||
         data.availableMcpConnectors.includes(provider) ||
@@ -130,6 +131,7 @@ export function LiveMemberIntegrations({ organizationId, search }: LiveMemberInt
           : undefined
         const accounts = accountsForProvider(provider)
         const ready =
+          approval?.available !== false &&
           group?.status === 'active' &&
           Boolean(option || server) &&
           approved &&
@@ -140,15 +142,18 @@ export function LiveMemberIntegrations({ organizationId, search }: LiveMemberInt
           approval?.policy?.accessMode === 'service_account'
             ? 'Selected resources you can access'
             : 'All accessible content'
-        const state = !approved
-          ? 'Disabled by your organization'
-          : group && group.status !== 'active'
-            ? 'Connections are paused by your organization'
-            : !ready
-              ? 'Not configured'
-              : accounts.length
-                ? scope
-                : undefined
+        const state =
+          approval?.available === false
+            ? 'Currently unavailable'
+            : !approved
+              ? 'Disabled by your organization'
+              : group && group.status !== 'active'
+                ? 'Connections are paused by your organization'
+                : !ready
+                  ? 'Not configured'
+                  : accounts.length
+                    ? scope
+                    : undefined
         const description = [
           accounts
             .map(

apps/sim/app/o/[organizationId]/settings/components/integrations/live-search-settings.tsx

@@ -82,7 +82,11 @@ export function LiveSearchSettings() {
     secretSource && GENERIC_SECRETS_META.name.toLowerCase().includes(search.toLowerCase())
   const availableToAdd = [
     ...LIVE_SEARCH_SOURCE_TYPES.filter(
-      ([type]) => LIVE_SEARCH_SCOPE_FIELDS[type] && !added.some((row) => row.connectorType === type)
+      ([type]) =>
+        (type !== 'zoom' ||
+          policies.data?.some((row) => row.connectorType === type && row.available !== false)) &&
+        LIVE_SEARCH_SCOPE_FIELDS[type] &&
+        !added.some((row) => row.connectorType === type)
     ).map(([type, meta]) => ({
       type,
       meta,
@@ -160,6 +164,7 @@ export function LiveSearchSettings() {
               const mcpProvider = liveSearchMcpConnector(type)
               const group = accounts.data?.credentialGroup
               const needsMemberSetup =
+                integration.available !== false &&
                 accounts.data &&
                 (memberProvider || mcpProvider) &&
                 (group?.status !== 'active' ||
@@ -188,7 +193,7 @@ export function LiveSearchSettings() {
                   iconVariant='custom'
                   icon={<IntegrationTile blockType={type} icon={meta.icon} />}
                   title={meta.name}
-                  description={scope}
+                  description={integration.available === false ? 'Currently unavailable' : scope}
                   trailing={
                     <div className='flex gap-2'>
                       {serviceAccount && (

apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'react'
 import { cn } from '@sim/emcn'
+import { getManagedMcpConnectorBgColor } from '@/lib/credential-groups/managed-mcp-connectors'
 import { BrandTile } from '@/app/workspace/[workspaceId]/components/resource-tile'
 import { getBlock } from '@/blocks'
 import { getTileIconColorClass } from '@/blocks/icon-color'
@@ -47,11 +48,11 @@ const SHOWCASE_TILES = [
 ] as const
 
 /**
- * Resolves the brand background color for a block type from the block registry.
- * Returns `null` when the block is unknown or has no brand color configured.
+ * Resolves the brand background color for workflow blocks and managed MCP connectors.
+ * Returns `null` when neither catalog provides a brand color.
  */
 function resolveBrandTileBg(blockType: string): string | null {
-  return getBlock(blockType)?.bgColor || null
+  return getBlock(blockType)?.bgColor || getManagedMcpConnectorBgColor(blockType) || null
 }
 
 interface IntegrationTileProps {
@@ -61,7 +62,7 @@ interface IntegrationTileProps {
 }
 
 /**
- * Brand-colored square tile that renders a block's icon. The unframed variant
+ * Brand-colored square tile that renders an integration's icon. The unframed variant
  * is a 36px tile used in list rows and headers; the framed variant adds an
  * outer 44px halo used inside the showcase grid.
  */

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx

@@ -20,6 +20,7 @@ import { useParams } from 'next/navigation'
 import { McpIcon, WorkflowIcon } from '@/components/icons'
 import { McpOperationPolicyEditor } from '@/components/mcp/operation-policy-editor'
 import { getManagedMcpConnectorIcon } from '@/lib/credential-groups/managed-mcp-connector-icons'
+import { getManagedMcpConnectorBgColor } from '@/lib/credential-groups/managed-mcp-connectors'
 import { MCP_SERVER_ADVANCED_TOOL_TYPE } from '@/lib/mcp/shared'
 import {
   getIssueBadgeLabel,
@@ -1200,7 +1201,10 @@ export const ToolInput = memo(function ToolInput({
         serverToolItems.push({
           label: 'Configure operations access',
           value: `mcp-server-all-${mcpServerDrilldown}`,
-          iconElement: createToolIcon('var(--brand-agent)', ServerIcon),
+          iconElement: createToolIcon(
+            getManagedMcpConnectorBgColor(server?.managedConnectorId) ?? 'var(--brand-agent)',
+            ServerIcon
+          ),
           onSelect: () => {
             if (allAlreadySelected) return
             const filteredTools = selectedTools.filter(
@@ -1350,7 +1354,10 @@ export const ToolInput = memo(function ToolInput({
         serverItems.push({
           label: `${serverName} (${toolCount} tools)`,
           value: `mcp-server-folder-${serverId}`,
-          iconElement: createToolIcon('#6366F1', ServerIcon),
+          iconElement: createToolIcon(
+            getManagedMcpConnectorBgColor(server.managedConnectorId) ?? '#6366F1',
+            ServerIcon
+          ),
           suffixElement: <ChevronRight className='size-[12px] text-[var(--text-tertiary)]' />,
           onSelect: () => {
             setMcpServerDrilldown(serverId)
@@ -1572,7 +1579,10 @@ export const ToolInput = memo(function ToolInput({
             : advancedMcpServer?.managedConnectorId
               ? getManagedMcpConnectorIcon(advancedMcpServer.managedConnectorId)
               : McpIcon
-          const mcpTileColor = mcpTool?.bgColor || 'var(--brand-agent)'
+          const mcpTileColor =
+            mcpTool?.bgColor ||
+            getManagedMcpConnectorBgColor(advancedMcpServer?.managedConnectorId) ||
+            'var(--brand-agent)'
           const mcpToolSchema = isMcpTool ? tool.schema || mcpTool?.inputSchema : null
 
           // Canonical name wins; stored title only when nothing resolves

apps/sim/components/icons.tsx

@@ -6,8 +6,7 @@ interface LucidIconProps extends SVGProps<SVGSVGElement> {}
 export function LucidIcon(props: LucidIconProps) {
   return (
     <svg {...props} viewBox='0 0 192 192' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <rect width='192' height='192' rx='32' fill='#282C33' />
-      <g transform='translate(46 24)' fill='#FFFFFF'>
+      <g transform='translate(46 24)' fill='currentColor'>
         <path d='M50 0L0 28.9V144.5L50 115.6V0Z' />
         <path d='M100 142.7V86.7L50 115.6V142.7H100Z' />
       </g>

apps/sim/ee/credential-groups/components/credential-group-provider-tile.tsx

@@ -1,7 +1,10 @@
 import type { ComponentType } from 'react'
 import { getIntegrationTypesForOAuthServiceId } from '@sim/deployment-config/integration-availability'
 import { INTEGRATION_METADATA } from '@sim/deployment-config/integration-metadata'
-import type { ManagedMcpConnectorId } from '@/lib/credential-groups/managed-mcp-connectors'
+import {
+  getManagedMcpConnectorBgColor,
+  type ManagedMcpConnectorId,
+} from '@/lib/credential-groups/managed-mcp-connectors'
 import type { CredentialGroupProvider } from '@/lib/credential-groups/providers'
 import { blockTypeToIconMap } from '@/lib/integrations/icon-mapping'
 import { BrandTile } from '@/app/workspace/[workspaceId]/components/resource-tile'
@@ -18,7 +21,9 @@ export function CredentialGroupProviderTile({ provider, icon }: CredentialGroupP
   return (
     <BrandTile
       icon={blockTypeToIconMap[blockType] ?? icon}
-      background={INTEGRATION_BY_TYPE.get(blockType)?.bgColor}
+      background={
+        INTEGRATION_BY_TYPE.get(blockType)?.bgColor ?? getManagedMcpConnectorBgColor(provider)
+      }
     />
   )
 }

apps/sim/hooks/mcp/use-mcp-tools.ts

@@ -11,6 +11,7 @@ import { createLogger } from '@sim/logger'
 import { useQueryClient } from '@tanstack/react-query'
 import { McpIcon } from '@/components/icons'
 import { getManagedMcpConnectorIcon } from '@/lib/credential-groups/managed-mcp-connector-icons'
+import { getManagedMcpConnectorBgColor } from '@/lib/credential-groups/managed-mcp-connectors'
 import { createMcpToolId } from '@/lib/mcp/shared'
 import type { McpToolSchema } from '@/lib/mcp/types'
 import { useMcpToolsQuery } from '@/hooks/queries/mcp'
@@ -54,7 +55,7 @@ export function useMcpTools(workspaceId: string): UseMcpToolsResult {
       serverName: tool.serverName,
       type: 'mcp' as const,
       inputSchema: tool.inputSchema,
-      bgColor: '#6366F1',
+      bgColor: getManagedMcpConnectorBgColor(tool.managedConnectorId) ?? '#6366F1',
       icon: tool.managedConnectorId ? getManagedMcpConnectorIcon(tool.managedConnectorId) : McpIcon,
     }))
   }, [mcpToolsData])

apps/sim/lib/api/contracts/knowledge/search-integrations.ts

@@ -11,6 +11,11 @@ export const searchIntegrationApprovalSchema = z.object({
 })
 export type SearchIntegrationApproval = z.output<typeof searchIntegrationApprovalSchema>
 
+export const searchIntegrationStatusSchema = searchIntegrationApprovalSchema.extend({
+  available: z.boolean().optional(),
+})
+export type SearchIntegrationStatus = z.output<typeof searchIntegrationStatusSchema>
+
 export const listSearchIntegrationsQuerySchema = z.object({ organizationId: organizationIdSchema })
 export type ListSearchIntegrationsQuery = z.input<typeof listSearchIntegrationsQuerySchema>
 export const listSearchIntegrationsContract = defineRouteContract({
@@ -19,7 +24,7 @@ export const listSearchIntegrationsContract = defineRouteContract({
   query: listSearchIntegrationsQuerySchema,
   response: {
     mode: 'json',
-    schema: successResponseSchema(z.array(searchIntegrationApprovalSchema).max(100)),
+    schema: successResponseSchema(z.array(searchIntegrationStatusSchema).max(100)),
   },
 })
 

apps/sim/lib/api/contracts/mothership-search-sources.ts

@@ -3,7 +3,10 @@ import {
   searchSourcePageSchema,
   searchSourceSummarySchema,
 } from '@/lib/api/contracts/knowledge/connectors'
-import { searchIntegrationApprovalSchema } from '@/lib/api/contracts/knowledge/search-integrations'
+import {
+  searchIntegrationApprovalSchema,
+  searchIntegrationStatusSchema,
+} from '@/lib/api/contracts/knowledge/search-integrations'
 
 const connectorTypeSchema = z.string().trim().min(1).max(100)
 
@@ -36,7 +39,7 @@ export const organizationSearchSourcesOutputSchema = z.discriminatedUnion('actio
   z.object({ action: z.literal('get'), source: searchSourceSummarySchema }),
   z.object({
     action: z.literal('providers'),
-    providers: z.array(searchIntegrationApprovalSchema).max(100),
+    providers: z.array(searchIntegrationStatusSchema).max(100),
   }),
   z.object({
     action: z.literal('setup'),