@@ -9,9 +9,10 @@ import { useQueryState } from 'nuqs'
 import {
   blockTypeToIconMap,
   type Integration,
+  resolveCredentialDisplay,
   resolveOAuthServiceForIntegration,
 } from '@/lib/integrations'
-import { getServiceConfigByProviderId } from '@/lib/oauth'
+import { credentialProviderMatchesService } from '@/lib/oauth'
 import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
 import { IntegrationSkillsSection } from '@/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section'
 import { connectParam } from '@/app/workspace/[workspaceId]/integrations/[block]/search-params'
@@ -65,13 +66,21 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
 
   useScrollRestoration(scrollContainerRef, { ready: !credentialsLoading })
 
+  /**
+   * Credentials that authenticate this integration. Matching goes through
+   * `credentialProviderMatchesService` so a family service account lists on
+   * every product it powers — one Atlassian token covers Jira, Jira Service
+   * Management, and Confluence. Comparing resolved `providerId`s instead would
+   * hide it from all three, since `atlassian-service-account` resolves to its
+   * own pseudo-service rather than to any product.
+   */
   const connectedCredentials = useMemo(() => {
     if (!oauthService) return []
     return credentials.filter(
       (c) =>
         (c.type === 'oauth' || c.type === 'service_account') &&
         c.providerId &&
-        getServiceConfigByProviderId(c.providerId)?.providerId === oauthService.providerId
+        credentialProviderMatchesService(c.providerId, oauthService)
     )
   }, [credentials, oauthService])
   const [serviceAccountOpen, setServiceAccountOpen] = useState(false)
@@ -112,7 +121,7 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
         {
           value: CONNECT_MODE.serviceAccount,
           label: serviceAccountConnectLabel,
-          icon: oauthService.serviceIcon,
+          icon: serviceAccountTarget?.serviceIcon ?? oauthService.serviceIcon,
         },
       ]
     : []
@@ -170,14 +179,14 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
           serviceIcon={oauthService.serviceIcon}
         />
       )}
-      {hasServiceAccount && oauthService?.serviceAccountProviderId && (
+      {hasServiceAccount && serviceAccountTarget && (
         <ConnectServiceAccountModal
           open={serviceAccountOpen}
           onOpenChange={setServiceAccountOpen}
           workspaceId={workspaceId}
-          serviceAccountProviderId={oauthService.serviceAccountProviderId}
-          serviceName={oauthService.serviceName}
-          serviceIcon={oauthService.serviceIcon}
+          serviceAccountProviderId={serviceAccountTarget.serviceAccountProviderId}
+          serviceName={serviceAccountTarget.serviceName}
+          serviceIcon={serviceAccountTarget.serviceIcon}
         />
       )}
       <div
@@ -219,7 +228,7 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
                       {credential.displayName}
                     </span>
                     <span className='truncate text-[12px] text-[var(--text-muted)]'>
-                      {credential.description || oauthService?.serviceName}
+                      {credential.description || resolveCredentialDisplay(credential).subtitle}
                     </span>
                   </div>
                   <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
 
@@ -22,6 +22,7 @@ import {
   getTokenServiceAccountDescriptor,
   type TokenServiceAccountProviderId,
 } from '@/lib/credentials/token-service-accounts/descriptors'
+import { getServiceAccountCoverageSentence } from '@/lib/integrations/credential-display'
 import {
   ATLASSIAN_SERVICE_ACCOUNT_PROVIDER_ID,
   SLACK_CUSTOM_BOT_PROVIDER_ID,
@@ -60,6 +61,16 @@ function openDocs(url: string): void {
  */
 const ATLASSIAN_DOMAIN_HINT_REGEX = /^[a-z0-9-]+\.atlassian\.net$/i
 
+/**
+ * States the site-wide reach of the token up front. Users reaching this modal
+ * from the Jira page were left unsure whether they had connected Jira or Jira
+ * Service Management; the credential covers both, plus Confluence. Derived from
+ * the catalog so it cannot drift as Atlassian integrations are added.
+ */
+const ATLASSIAN_COVERAGE_HINT = getServiceAccountCoverageSentence(
+  ATLASSIAN_SERVICE_ACCOUNT_PROVIDER_ID
+)
+
 /**
  * Maps server `error.code` values returned by the Atlassian service-account
  * route to user-facing messages. Falls back to {@link FALLBACK_ERROR_MESSAGE}
@@ -524,6 +535,7 @@ function AtlassianServiceAccountModal({
               ? 'Atlassian sites usually look like your-team.atlassian.net.'
               : undefined
           }
+          hint={ATLASSIAN_COVERAGE_HINT}
         />
 
         <ChipModalField
 
@@ -5,6 +5,16 @@ import {
   getServiceAccountConnectNoun,
   getServiceAccountGatingBlockType,
 } from '@/lib/credentials/service-account-provider-ids'
+/**
+ * Imported from the module rather than the `@/lib/integrations` barrel: the
+ * barrel builds `POPULAR_WORKFLOWS` by calling `getAllBlockMeta()` at module
+ * load, so importing it from a leaf component drags the whole block registry
+ * into that component's graph.
+ */
+import {
+  getServiceAccountFamilyIcon,
+  getServiceAccountFamilyName,
+} from '@/lib/integrations/credential-display'
 import { SLACK_CUSTOM_BOT_PROVIDER_ID } from '@/lib/oauth/types'
 import type { ServiceAccountProviderId } from '@/app/workspace/[workspaceId]/integrations/components/connect-service-account-modal/connect-service-account-modal'
 import { getBlock } from '@/blocks'
@@ -17,6 +27,13 @@ import { isHiddenUnder, overlayVisibility } from '@/blocks/visibility/context'
  */
 export interface ServiceAccountConnectTarget {
   serviceAccountProviderId: ServiceAccountProviderId
+  /**
+   * Name the setup surface is titled with. For a family service account this is
+   * the vendor ("Atlassian"), not the product page you came from — one Atlassian
+   * token authenticates Jira, Jira Service Management, and Confluence alike, so
+   * calling it a "Jira service account" is what made users think they had
+   * connected the wrong product.
+   */
   serviceName: string
   serviceIcon: ComponentType<{ className?: string }>
   /**
@@ -71,6 +88,15 @@ export function useServiceAccountConnectTarget({
       ? 'Set up a custom bot'
       : `Add ${getServiceAccountConnectNoun(serviceAccountProviderId)}`
 
-    return { serviceAccountProviderId, serviceName, serviceIcon, label, hidden }
+    const familyName = getServiceAccountFamilyName(serviceAccountProviderId)
+    const familyIcon = getServiceAccountFamilyIcon(serviceAccountProviderId)
+
+    return {
+      serviceAccountProviderId,
+      serviceName: familyName ?? serviceName,
+      serviceIcon: familyIcon ?? serviceIcon,
+      label,
+      hidden,
+    }
   }, [serviceAccountProviderId, serviceName, serviceIcon, isSlackBot, hidden])
 }
@@ -16,8 +16,7 @@ import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
 import { writeOAuthReturnContext } from '@/lib/credentials/client-state'
-import { INTEGRATIONS, resolveOAuthServiceForIntegration } from '@/lib/integrations'
-import { getServiceConfigByProviderId } from '@/lib/oauth'
+import { resolveCredentialDisplay } from '@/lib/integrations'
 import {
   AddPeopleModal,
   CredentialDetailHeading,
@@ -97,27 +96,18 @@ export function ConnectedCredentialDetail({
     [oauthServiceNameByProviderId]
   )
 
-  const serviceConfig = useMemo(() => {
-    if (!credential?.providerId) return null
-    return getServiceConfigByProviderId(credential.providerId)
-  }, [credential])
-
   /**
-   * Resolve the integration block type from the credential's OAuth service so
-   * the header tile can render with the same brand background used by the rows
-   * on the integrations list page. Several integrations can share one service
-   * (e.g. Jira and Jira Service Management); the one named after the service
-   * is preferred since it is the service's canonical integration.
+   * Service, brand tile, and copy all come from the shared resolver so this
+   * page, the integrations list, and the Cmd-K search agree on how a credential
+   * is named and branded — a family service account reads as its family
+   * ("Atlassian"), not as whichever product the provider walk happened to hit.
    */
-  const integrationBlockType = useMemo(() => {
-    if (!serviceConfig) return ''
-    const candidates = INTEGRATIONS.filter(
-      (i) => resolveOAuthServiceForIntegration(i)?.providerId === serviceConfig.providerId
-    )
-    const serviceName = serviceConfig.name.toLowerCase()
-    const canonical = candidates.find((i) => i.name.toLowerCase() === serviceName)
-    return (canonical ?? candidates[0])?.type ?? ''
-  }, [serviceConfig])
+  const display = useMemo(
+    () => (credential ? resolveCredentialDisplay(credential) : null),
+    [credential]
+  )
+  const serviceConfig = display?.service ?? null
+  const integrationBlockType = display?.blockType ?? ''
 
   const handleReconnectOAuth = async () => {
     if (!credential || credential.type !== 'oauth' || !credential.providerId || !workspaceId) return
@@ -206,7 +196,7 @@ export function ConnectedCredentialDetail({
                 : handleReconnectOAuth
             }
             disabled={connectOAuthService.isPending}
-            leftIcon={serviceConfig?.icon}
+            leftIcon={display?.icon ?? undefined}
           >
             Reconnect
           </Chip>
@@ -242,19 +232,16 @@ export function ConnectedCredentialDetail({
     )
   }
 
-  const serviceLabel =
-    serviceConfig?.name || resolveProviderLabel(credential.providerId) || 'Unknown service'
+  const headingTitle =
+    display?.detailTitle || resolveProviderLabel(credential.providerId) || 'Unknown service'
 
   return (
     <>
       <CredentialDetailLayout back={back} actions={actions}>
         <CredentialDetailHeading
           leading={
-            serviceConfig ? (
-              <IntegrationTile
-                blockType={integrationBlockType}
-                icon={serviceConfig.icon as ComponentType<{ className?: string }>}
-              />
+            display?.icon ? (
+              <IntegrationTile blockType={integrationBlockType} icon={display.icon} />
             ) : (
               <div className='flex size-9 flex-shrink-0 items-center justify-center rounded-xl border border-[var(--border-1)] bg-[var(--bg)]'>
                 <span className='font-medium text-[var(--text-tertiary)] text-small'>
@@ -263,8 +250,8 @@ export function ConnectedCredentialDetail({
               </div>
             )
           }
-          title={serviceLabel}
-          subtitle={serviceConfig?.description || 'Connected service'}
+          title={headingTitle}
+          subtitle={display?.detailSubtitle ?? 'Connected service'}
         />
 
         <DetailSection title='Credential ID'>
@@ -335,8 +322,8 @@ export function ConnectedCredentialDetail({
           onOpenChange={setReconnectOpen}
           workspaceId={workspaceId}
           serviceAccountProviderId={credential.providerId as ServiceAccountProviderId}
-          serviceName={serviceConfig?.name || credential.displayName}
-          serviceIcon={serviceConfig?.icon as ComponentType<{ className?: string }>}
+          serviceName={display?.familyName || serviceConfig?.name || credential.displayName}
+          serviceIcon={display?.icon as ComponentType<{ className?: string }>}
           credentialId={credential.id}
           credentialDisplayName={credential.displayName}
           credentialDescription={credential.description ?? undefined}
 
@@ -20,8 +20,8 @@ import {
   formatIntegrationType,
   INTEGRATIONS,
   type Integration,
+  resolveCredentialDisplay,
 } from '@/lib/integrations'
-import { getServiceConfigByProviderId } from '@/lib/oauth'
 import { IntegrationSection } from '@/app/workspace/[workspaceId]/integrations/components/integration-section'
 import { IntegrationTabsHeader } from '@/app/workspace/[workspaceId]/integrations/components/integration-tabs-header'
 import { IntegrationTile } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
@@ -53,11 +53,6 @@ const FEATURED_INTEGRATIONS: readonly Integration[] = (() => {
   )
 })()
 
-/** Lookup integration metadata by OAuth service display name (case-insensitive). */
-const INTEGRATION_BY_LOWER_NAME: ReadonlyMap<string, Integration> = new Map(
-  INTEGRATIONS.map((i) => [i.name.toLowerCase(), i])
-)
-
 const ALL_CATEGORY_SECTIONS: readonly { label: string; integrations: Integration[] }[] = (() => {
   const grouped = new Map<string, Integration[]>()
   for (const integration of INTEGRATIONS) {
@@ -105,7 +100,12 @@ interface ConnectedDisplayItem {
   credential: WorkspaceCredential
   name: string
   description: string
-  serviceName: string
+  /**
+   * Extra haystack for the search box: the service name plus every integration
+   * the credential authenticates, so searching "jira" surfaces an Atlassian
+   * service account even when the user has replaced its description.
+   */
+  searchText: string
   integrationType: string | null
   blockType: string
   slug: string
@@ -165,20 +165,24 @@ export function Integrations() {
 
   const connectedItems = useMemo<ConnectedDisplayItem[]>(() => {
     return oauthCredentials.flatMap((credential) => {
-      if (!credential.providerId) return []
-      const service = getServiceConfigByProviderId(credential.providerId)
-      if (!service) return []
-      const integration = INTEGRATION_BY_LOWER_NAME.get(service.name.toLowerCase())
+      const display = resolveCredentialDisplay(credential)
+      if (!display.service || !display.icon) return []
       return [
         {
           credential,
           name: credential.displayName,
-          description: credential.description || `${service.name} integration`,
-          serviceName: service.name,
-          integrationType: integration?.integrationType ?? null,
-          blockType: integration?.type ?? '',
-          slug: integration?.slug ?? '',
-          icon: service.icon as ComponentType<{ className?: string }>,
+          description: credential.description || display.subtitle,
+          searchText: [
+            display.familyName,
+            display.service.name,
+            ...display.coveredIntegrations.map((i) => i.name),
+          ]
+            .filter(Boolean)
+            .join(' '),
+          integrationType: display.integration?.integrationType ?? null,
+          blockType: display.blockType,
+          slug: display.integration?.slug ?? '',
+          icon: display.icon,
         },
       ]
     })
@@ -264,7 +268,7 @@ export function Integrations() {
       return (
         item.name.toLowerCase().includes(normalizedSearch) ||
         item.description.toLowerCase().includes(normalizedSearch) ||
-        item.serviceName.toLowerCase().includes(normalizedSearch)
+        item.searchText.toLowerCase().includes(normalizedSearch)
       )
     })
   }, [
 
@@ -1,6 +1,5 @@
 import type { ComponentType } from 'react'
-import { blockTypeToIconMap, INTEGRATIONS } from '@/lib/integrations'
-import { getServiceConfigByProviderId } from '@/lib/oauth'
+import { blockTypeToIconMap, INTEGRATIONS, resolveCredentialDisplay } from '@/lib/integrations'
 import {
   CONNECT_MODE,
   CONNECT_QUERY_PARAM,
@@ -11,12 +10,6 @@ import type { WorkspaceCredential } from '@/hooks/queries/credentials'
 /** Fallback brand color for credentials whose integration metadata cannot be resolved. */
 const FALLBACK_BG_COLOR = '#6B7280'
 
-/**
- * Module-level lookup of integration metadata by OAuth service display name
- * (case-insensitive). Mirrors the same map in `integrations.tsx`.
- */
-const INTEGRATION_BY_LOWER_NAME = new Map(INTEGRATIONS.map((i) => [i.name.toLowerCase(), i]))
-
 /**
  * Module-level base array of resolvable integrations (entries without a
  * registered icon are dropped, matching the catalog's `if (!Icon) return null`
@@ -76,19 +69,16 @@ export function buildConnectedAccountSearchItems(
 ): IntegrationSearchItem[] {
   return credentials.flatMap((credential) => {
     if (credential.type !== 'oauth' && credential.type !== 'service_account') return []
-    if (!credential.providerId) return []
-
-    const service = getServiceConfigByProviderId(credential.providerId)
-    if (!service) return []
 
-    const integration = INTEGRATION_BY_LOWER_NAME.get(service.name.toLowerCase())
+    const display = resolveCredentialDisplay(credential)
+    if (!display.service || !display.icon) return []
 
     return [
       {
         id: credential.id,
         name: credential.displayName,
-        icon: service.icon as ComponentType<{ className?: string }>,
-        bgColor: integration?.bgColor ?? FALLBACK_BG_COLOR,
+        icon: display.icon,
+        bgColor: display.integration?.bgColor ?? FALLBACK_BG_COLOR,
         href: `/workspace/${workspaceId}/integrations/connected/${credential.id}`,
       },
     ]