@eventcatalog/core 3.0.0-beta.9 → 3.0.0

package/eventcatalog/src/components/Grids/MessageGrid.tsx

@@ -1,219 +1,338 @@
-import { ServerIcon, CircleStackIcon } from '@heroicons/react/24/outline';
+import { memo, useState } from 'react';
+import {
+  ServerIcon,
+  CircleStackIcon,
+  ArrowTopRightOnSquareIcon,
+  ArrowLongRightIcon,
+  BoltIcon,
+  ChatBubbleLeftIcon,
+  MagnifyingGlassIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
-import { getCollectionStyles } from './utils';
+import { getSpecUrl, getSpecIcon, getSpecLabel, getSpecColor, type Specification } from './specification-utils';
 
 interface MessageGridV2Props {
   service: CollectionEntry<'services'>;
   embeded?: boolean;
+  specifications?: Specification[];
 }
 
-export default function MessageGridV2({ service, embeded = false }: MessageGridV2Props) {
-  const { sends = [], receives = [], writesTo = [], readsFrom = [] } = service.data;
+// Helper to get message icon and color
+const getMessageStyle = (collection: string) => {
+  switch (collection) {
+    case 'events':
+      return { Icon: BoltIcon, color: 'orange', bg: 'bg-orange-50', border: 'border-orange-200', text: 'text-orange-600' };
+    case 'commands':
+      return { Icon: ChatBubbleLeftIcon, color: 'blue', bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-600' };
+    case 'queries':
+      return {
+        Icon: MagnifyingGlassIcon,
+        color: 'emerald',
+        bg: 'bg-emerald-50',
+        border: 'border-emerald-200',
+        text: 'text-emerald-600',
+      };
+    default:
+      return { Icon: BoltIcon, color: 'gray', bg: 'bg-gray-50', border: 'border-gray-200', text: 'text-gray-600' };
+  }
+};
+
+// Message Card Component
+const MessageCard = memo(({ message, compact = false }: { message: any; compact?: boolean }) => {
+  const { Icon, color } = getMessageStyle(message.collection);
 
-  const renderMessageGrid = (messages: any[]) => (
-    <div className="grid grid-cols-1 gap-6">
-      {messages.map((message) => {
-        const { color, Icon } = getCollectionStyles(message.collection);
-        return (
-          <a
-            key={message.data.name}
-            href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}`)}
-            className={`group bg-white border hover:bg-${color}-100 rounded-lg shadow-sm hover:shadow-lg transition-all duration-200 overflow-hidden border-${color}-500`}
+  return (
+    <a
+      href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}`)}
+      className={`group block bg-white border border-${color}-200 rounded-lg shadow-sm hover:shadow-md hover:border-${color}-300 transition-all`}
+    >
+      <div className={compact ? 'p-3' : 'p-4'}>
+        <div className="flex items-center gap-2 mb-1">
+          <div className={`flex items-center justify-center w-7 h-7 bg-${color}-100 rounded-md`}>
+            <Icon className={`h-4 w-4 text-${color}-600`} />
+          </div>
+          <h3
+            className={`font-semibold text-gray-900 group-hover:text-${color}-600 transition-colors truncate ${compact ? 'text-sm' : 'text-base'}`}
           >
-            <div className="p-4 py-2 flex-1">
-              <div className="flex items-center justify-between mb-3">
-                <div className="flex items-center gap-2">
-                  {!embeded && <Icon className={`h-5 w-5 text-${color}-500`} />}
-                  <h3
-                    className={`font-semibold text-gray-900 truncate group-hover:text-${color}-500 transition-colors duration-200 ${embeded ? 'text-sm' : 'text-md'}`}
-                  >
-                    {message.data.name} (v{message.data.version})
-                  </h3>
-                </div>
-              </div>
-              {message.data.summary && <p className="text-gray-600 text-xs line-clamp-2 mb-4">{message.data.summary}</p>}
-            </div>
-          </a>
-        );
-      })}
-    </div>
+            {message.data.name}
+          </h3>
+          <span className={`text-[10px] text-${color}-600 font-medium bg-${color}-50 px-1.5 py-0.5 rounded flex-shrink-0`}>
+            v{message.data.version}
+          </span>
+        </div>
+        {message.data.summary && (
+          <p className={`text-gray-600 line-clamp-2 ${compact ? 'text-xs mt-1' : 'text-sm mt-2'}`}>{message.data.summary}</p>
+        )}
+      </div>
+    </a>
   );
+});
+
+// Container Card Component
+const ContainerCard = memo(({ container, type }: { container: any; type: 'reads' | 'writes' }) => {
+  const colorClass = type === 'reads' ? 'amber' : 'violet';
 
   return (
-    <div className={`rounded-xl overflow-hidden bg-pink-50 p-8 border-2 border-dashed border-pink-300`}>
-      {/* Service Title */}
-      <div className="flex items-center gap-2 mb-8">
-        <ServerIcon className="h-6 w-6 text-pink-500" />
-        <h2 className="text-2xl font-semibold text-gray-900">{service.data.name}</h2>
-        <div className="flex gap-2 ml-auto">
-          <a
-            href={buildUrl(`/visualiser/services/${service.data.id}`)}
-            className="inline-flex items-center px-3 py-2 text-sm font-medium bg-white border border-gray-300 rounded-md transition-colors duration-200 hover:bg-gray-50"
-          >
-            View in visualizer
-          </a>
-          <a
-            href={buildUrl(`/docs/services/${service.data.id}/${service.data.version}`)}
-            className="inline-flex items-center px-3 py-2 text-sm font-medium text-black border border-gray-300 bg-white rounded-md transition-colors duration-200 hover:bg-gray-50"
-          >
-            Read documentation
-          </a>
+    <a
+      href={buildUrl(`/docs/containers/${container.data.id}/${container.data.version}`)}
+      className={`group block bg-white border rounded-lg shadow-sm hover:shadow-md transition-all ${
+        type === 'reads' ? 'border-amber-200 hover:border-amber-300' : 'border-violet-200 hover:border-violet-300'
+      }`}
+    >
+      <div className="p-3">
+        <div className="flex items-center gap-2">
+          <div className={`flex items-center justify-center w-7 h-7 bg-${colorClass}-100 rounded-md`}>
+            <CircleStackIcon className={`h-4 w-4 text-${colorClass}-600`} />
+          </div>
+          <h3 className={`font-semibold text-gray-900 text-sm group-hover:text-${colorClass}-600 transition-colors truncate`}>
+            {container.data.name}
+          </h3>
         </div>
+        {container.data.summary && <p className="text-xs text-gray-600 mt-1.5 line-clamp-2">{container.data.summary}</p>}
       </div>
+    </a>
+  );
+});
+
+// Specification Card Component
+const SpecificationCard = memo(
+  ({ spec, serviceId, serviceVersion }: { spec: any; serviceId: string; serviceVersion: string }) => {
+    const color = getSpecColor(spec.type);
+
+    return (
+      <a
+        href={getSpecUrl(spec, serviceId, serviceVersion)}
+        className={`group flex items-center gap-3 p-3 bg-white border border-${color}-200 rounded-lg shadow-sm hover:shadow-md hover:border-${color}-300 transition-all`}
+      >
+        <img src={buildUrl(`/icons/${getSpecIcon(spec.type)}.svg`, true)} alt={`${spec.type} icon`} className="h-6 w-6" />
+        <div className="flex-1 min-w-0">
+          <h3 className={`font-semibold text-gray-900 text-sm group-hover:text-${color}-600 transition-colors truncate`}>
+            {spec.name || spec.filename}
+          </h3>
+          <p className="text-xs text-gray-500">{getSpecLabel(spec.type)}</p>
+        </div>
+      </a>
+    );
+  }
+);
 
-      <div className="grid grid-cols-3 gap-8 relative">
-        {/* Left Column - Receives Messages & Reads From Containers */}
-        <div className="space-y-6">
-          {/* Receives Messages Section */}
-          <div className="bg-blue-50 bg-opacity-50 border border-blue-300 border-dashed rounded-lg p-4">
-            <div className="mb-6">
-              <h2 className={`font-semibold text-gray-900 flex items-center gap-2 ${embeded ? 'text-sm' : 'text-xl'}`}>
-                <ServerIcon className="h-5 w-5 text-blue-500" />
-                Receives ({receives.length})
-              </h2>
+// Collapsible Message Section Component
+const CollapsibleMessageSection = memo(
+  ({
+    icon: Icon,
+    title,
+    messages,
+    color,
+    emptyText,
+    embeded = false,
+  }: {
+    icon: any;
+    title: string;
+    messages: any[];
+    color: string;
+    emptyText: string;
+    embeded?: boolean;
+  }) => {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const hasContent = messages.length > 0;
+
+    return (
+      <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
+        <div
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className={`flex items-center justify-between px-5 py-4 cursor-pointer hover:bg-gray-50 transition-colors ${!isCollapsed && hasContent ? 'border-b border-gray-200' : ''}`}
+        >
+          <div className="flex items-center gap-3">
+            <div className={`flex items-center justify-center w-8 h-8 bg-${color}-100 rounded-lg`}>
+              <Icon className={`h-4 w-4 text-${color}-600`} />
             </div>
-            {receives.length > 0 ? (
-              renderMessageGrid(receives)
-            ) : (
-              <div className="text-center py-12">
-                <p className="text-gray-500 text-sm">No messages</p>
-              </div>
-            )}
+            <h2 className="text-base font-bold text-gray-900">{title}</h2>
+            <span className="text-sm text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full font-medium">{messages.length}</span>
           </div>
-
-          {/* Reads From Containers */}
-          {readsFrom.length > 0 && (
-            <div className="bg-orange-50 border border-orange-300 border-dashed rounded-lg p-4 relative">
-              <div className="mb-6">
-                <h2 className={`font-semibold text-gray-900 flex items-center gap-2 ${embeded ? 'text-sm' : 'text-xl'}`}>
-                  <CircleStackIcon className="h-5 w-5 text-orange-500" />
-                  Reads from ({readsFrom.length})
-                </h2>
-              </div>
+          <div className="text-gray-400">
+            {isCollapsed ? <ChevronDownIcon className="h-5 w-5" /> : <ChevronUpIcon className="h-5 w-5" />}
+          </div>
+        </div>
+        {!isCollapsed && (
+          <div className="p-5">
+            {hasContent ? (
               <div className="space-y-3">
-                {readsFrom.map((container: any) => (
-                  <a
-                    key={container.data.id}
-                    href={buildUrl(`/docs/containers/${container.data.id}/${container.data.version}`)}
-                    className="group bg-white border border-orange-200 hover:bg-orange-100 rounded-lg p-3 block transition-all duration-200"
-                  >
-                    <div className="flex items-center gap-2">
-                      <CircleStackIcon className="h-4 w-4 text-orange-500" />
-                      <h3 className="font-semibold text-gray-900 text-sm group-hover:text-orange-700">{container.data.name}</h3>
-                    </div>
-                    {container.data.summary && (
-                      <p className="text-xs text-gray-600 mt-1 line-clamp-2">{container.data.summary}</p>
-                    )}
-                  </a>
+                {messages.map((message: any) => (
+                  <MessageCard key={`${message.data.id}-${message.data.version}`} message={message} compact={embeded} />
                 ))}
               </div>
-              {/* Arrow from Reads From to Service */}
-              <div className="absolute -right-8 top-1/2 -translate-y-1/2 flex items-center justify-center w-16 z-10">
-                <div className="absolute left-0 w-4 h-4 border-b-[3px] border-l-[3px] border-orange-200 transform rotate-45 -translate-x-1 translate-y-[-1px] shadow-[-1px_1px_0_1px_rgba(0,0,0,0.1)]"></div>
-                <div className="w-full h-[3px] bg-orange-200 shadow-[0_0_0_1px_rgba(0,0,0,0.1)]"></div>
+            ) : (
+              <div className="text-center py-4">
+                <p className="text-sm text-gray-400">{emptyText}</p>
               </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+// Collapsible Container Section Component
+const CollapsibleContainerSection = memo(
+  ({ title, containers, color, type }: { title: string; containers: any[]; color: string; type: 'reads' | 'writes' }) => {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+
+    return (
+      <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
+        <div
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className={`flex items-center justify-between px-5 py-4 cursor-pointer hover:bg-gray-50 transition-colors ${!isCollapsed ? 'border-b border-gray-200' : ''}`}
+        >
+          <div className="flex items-center gap-3">
+            <div className={`flex items-center justify-center w-8 h-8 bg-${color}-100 rounded-lg`}>
+              <CircleStackIcon className={`h-4 w-4 text-${color}-600`} />
             </div>
-          )}
+            <h2 className="text-base font-bold text-gray-900">{title}</h2>
+            <span className="text-sm text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full font-medium">{containers.length}</span>
+          </div>
+          <div className="text-gray-400">
+            {isCollapsed ? <ChevronDownIcon className="h-5 w-5" /> : <ChevronUpIcon className="h-5 w-5" />}
+          </div>
         </div>
+        {!isCollapsed && (
+          <div className="p-5">
+            <div className="space-y-3">
+              {containers.map((container: any) => (
+                <ContainerCard key={container.data.id} container={container} type={type} />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
 
-        {/* Arrow from Receives to Service */}
-        <div className="absolute left-[30%] top-[25%] -translate-y-1/2 flex items-center justify-center w-16">
-          <div className="w-full h-[3px] bg-blue-200 shadow-[0_0_0_1px_rgba(0,0,0,0.1)]"></div>
-          <div className="absolute right-0 w-4 h-4 border-t-[3px] border-r-[3px] border-blue-200 transform rotate-45 translate-x-1 translate-y-[-1px] shadow-[1px_-1px_0_1px_rgba(0,0,0,0.1)]"></div>
+export default function MessageGridV2({ service, embeded = false, specifications = [] }: MessageGridV2Props) {
+  const { sends = [], receives = [], writesTo = [], readsFrom = [] } = service.data;
+  const hasContainers = readsFrom.length > 0 || writesTo.length > 0;
+  const hasMessages = receives.length > 0 || sends.length > 0;
+  const hasSpecs = specifications.length > 0;
+
+  return (
+    <div className="w-full">
+      {/* Service Header - Doc style */}
+      <div className="border-b border-gray-200 md:pb-4">
+        <div className="flex items-start justify-between">
+          <div>
+            <h2 className="text-2xl md:text-4xl font-bold text-black">{service.data.name}</h2>
+            {service.data.summary && <p className="text-lg pt-2 text-gray-500 font-light">{service.data.summary}</p>}
+          </div>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <a
+              href={buildUrl(`/docs/services/${service.data.id}/${service.data.version}`)}
+              className="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all"
+            >
+              View docs
+              <ArrowTopRightOnSquareIcon className="h-4 w-4 text-gray-400" />
+            </a>
+            <a
+              href={buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}`)}
+              className="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white bg-gray-800 rounded-lg hover:bg-gray-900 transition-all"
+            >
+              Visualizer
+              <ArrowTopRightOnSquareIcon className="h-4 w-4 text-gray-400" />
+            </a>
+          </div>
         </div>
+      </div>
 
-        {/* Service Information (Center) */}
-        <div className="bg-white border-2 border-pink-100 rounded-lg p-6 flex flex-col justify-center">
-          <div className="flex flex-col items-center gap-4">
-            <ServerIcon className="h-12 w-12 text-pink-500" />
-            <p className="text-xl font-semibold text-gray-900 text-center">{service.data.name}</p>
-
-            {/* Quick Stats Grid */}
-            <div className="w-full grid grid-cols-2 gap-3 mt-2">
-              <div className="text-center p-3 bg-blue-50 rounded-lg border border-blue-200">
-                <div className="text-2xl font-bold text-blue-600">{receives.length}</div>
-                <div className="text-xs text-gray-600 mt-1">Receives</div>
-              </div>
-              <div className="text-center p-3 bg-green-50 rounded-lg border border-green-200">
-                <div className="text-2xl font-bold text-green-600">{sends.length}</div>
-                <div className="text-xs text-gray-600 mt-1">Sends</div>
-              </div>
+      {/* Service Content */}
+      <div className="py-4 space-y-8">
+        {/* Specifications */}
+        {hasSpecs && (
+          <div>
+            <div className="flex items-center gap-2 mb-4">
+              <h3 className="text-lg font-semibold text-gray-900">Specifications</h3>
+              <span className="text-sm text-gray-500 bg-gray-100 px-2.5 py-0.5 rounded-full font-medium">
+                {specifications.length}
+              </span>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              {specifications.map((spec: any) => (
+                <SpecificationCard
+                  key={`${spec.type}-${spec.filename}`}
+                  spec={spec}
+                  serviceId={service.data.id}
+                  serviceVersion={service.data.version}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Message Flow - Two columns side by side */}
+        {hasMessages && (
+          <div>
+            <div className="flex items-center gap-2 mb-4">
+              <BoltIcon className="h-5 w-5 text-orange-500" />
+              <h3 className="text-lg font-semibold text-gray-900">Messages</h3>
+              <span className="text-sm text-gray-500 bg-gray-100 px-2.5 py-0.5 rounded-full font-medium">
+                {receives.length + sends.length}
+              </span>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <CollapsibleMessageSection
+                icon={ArrowLongRightIcon}
+                title="Receives"
+                messages={receives}
+                color="blue"
+                emptyText="No messages received"
+                embeded={embeded}
+              />
+              <CollapsibleMessageSection
+                icon={ArrowLongRightIcon}
+                title="Sends"
+                messages={sends}
+                color="emerald"
+                emptyText="No messages sent"
+                embeded={embeded}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Container Relationships */}
+        {hasContainers && (
+          <div>
+            <div className="flex items-center gap-2 mb-4">
+              <CircleStackIcon className="h-5 w-5 text-amber-500" />
+              <h3 className="text-lg font-semibold text-gray-900">Data Sources</h3>
+              <span className="text-sm text-gray-500 bg-gray-100 px-2.5 py-0.5 rounded-full font-medium">
+                {readsFrom.length + writesTo.length}
+              </span>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {readsFrom.length > 0 && (
-                <div className="text-center p-3 bg-orange-50 rounded-lg border border-orange-200">
-                  <div className="text-2xl font-bold text-orange-600">{readsFrom.length}</div>
-                  <div className="text-xs text-gray-600 mt-1">Reads from</div>
-                </div>
+                <CollapsibleContainerSection title="Reads from" containers={readsFrom} color="amber" type="reads" />
               )}
               {writesTo.length > 0 && (
-                <div className="text-center p-3 bg-purple-50 rounded-lg border border-purple-200">
-                  <div className="text-2xl font-bold text-purple-600">{writesTo.length}</div>
-                  <div className="text-xs text-gray-600 mt-1">Writes to</div>
-                </div>
+                <CollapsibleContainerSection title="Writes to" containers={writesTo} color="violet" type="writes" />
               )}
             </div>
           </div>
-        </div>
-
-        {/* Arrow from Service to Sends */}
-        <div className="absolute right-[30%] top-[25%] -translate-y-1/2 flex items-center justify-center w-16">
-          <div className="w-full h-[3px] bg-green-200 shadow-[0_0_0_1px_rgba(0,0,0,0.1)]"></div>
-          <div className="absolute right-0 w-4 h-4 border-t-[3px] border-r-[3px] border-green-200 transform rotate-45 translate-x-1 translate-y-[-1px] shadow-[1px_-1px_0_1px_rgba(0,0,0,0.1)]"></div>
-        </div>
+        )}
 
-        {/* Right Column - Sends Messages & Writes To Containers */}
-        <div className="space-y-6">
-          {/* Sends Messages Section */}
-          <div className="bg-green-50 border border-green-300 border-dashed rounded-lg p-4">
-            <div className="mb-6">
-              <h2 className={`font-semibold text-gray-900 flex items-center gap-2 ${embeded ? 'text-sm' : 'text-xl'}`}>
-                <ServerIcon className="h-5 w-5 text-emerald-500" />
-                Sends ({sends.length})
-              </h2>
+        {/* Empty State */}
+        {!hasMessages && !hasContainers && !hasSpecs && (
+          <div className="text-center py-12">
+            <div className="flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-2xl">
+              <ServerIcon className="h-8 w-8 text-gray-400" />
             </div>
-            {sends.length > 0 ? (
-              renderMessageGrid(sends)
-            ) : (
-              <div className="text-center py-12">
-                <p className="text-gray-500 text-sm">No messages</p>
-              </div>
-            )}
+            <p className="text-gray-500">
+              This service has no message flows, container relationships, or specifications defined.
+            </p>
           </div>
-
-          {/* Writes To Containers */}
-          {writesTo.length > 0 && (
-            <div className="bg-purple-50 border border-purple-300 border-dashed rounded-lg p-4 relative">
-              {/* Arrow from Service to Writes To */}
-              <div className="absolute -left-8 top-1/2 -translate-y-1/2 flex items-center justify-center w-16 z-10">
-                <div className="w-full h-[3px] bg-purple-200 shadow-[0_0_0_1px_rgba(0,0,0,0.1)]"></div>
-                <div className="absolute right-0 w-4 h-4 border-t-[3px] border-r-[3px] border-purple-200 transform rotate-45 translate-x-1 translate-y-[-1px] shadow-[1px_-1px_0_1px_rgba(0,0,0,0.1)]"></div>
-              </div>
-              <div className="mb-6">
-                <h2 className={`font-semibold text-gray-900 flex items-center gap-2 ${embeded ? 'text-sm' : 'text-xl'}`}>
-                  <CircleStackIcon className="h-5 w-5 text-purple-500" />
-                  Writes to ({writesTo.length})
-                </h2>
-              </div>
-              <div className="space-y-3">
-                {writesTo.map((container: any) => (
-                  <a
-                    key={container.data.id}
-                    href={buildUrl(`/docs/containers/${container.data.id}/${container.data.version}`)}
-                    className="group bg-white border border-purple-200 hover:bg-purple-100 rounded-lg p-3 block transition-all duration-200"
-                  >
-                    <div className="flex items-center gap-2">
-                      <CircleStackIcon className="h-4 w-4 text-purple-500" />
-                      <h3 className="font-semibold text-gray-900 text-sm group-hover:text-purple-700">{container.data.name}</h3>
-                    </div>
-                    {container.data.summary && (
-                      <p className="text-xs text-gray-600 mt-1 line-clamp-2">{container.data.summary}</p>
-                    )}
-                  </a>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
+        )}
       </div>
     </div>
   );

package/eventcatalog/src/components/Grids/specification-utils.ts

@@ -0,0 +1,106 @@
+import { buildUrl } from '@utils/url-builder';
+
+export type SpecificationType = 'openapi' | 'asyncapi' | 'graphql';
+
+export interface Specification {
+  type: SpecificationType;
+  path: string;
+  name?: string;
+  filename: string;
+  filenameWithoutExtension: string;
+}
+
+export const getSpecUrl = (spec: Specification, serviceId: string, serviceVersion: string): string => {
+  switch (spec.type) {
+    case 'openapi':
+      return buildUrl(`/docs/services/${serviceId}/${serviceVersion}/spec/${spec.filenameWithoutExtension}`);
+    case 'asyncapi':
+      return buildUrl(`/docs/services/${serviceId}/${serviceVersion}/asyncapi/${spec.filenameWithoutExtension}`);
+    case 'graphql':
+      return buildUrl(`/docs/services/${serviceId}/${serviceVersion}/graphql/${spec.filenameWithoutExtension}`);
+    default:
+      return '#';
+  }
+};
+
+export const getSpecIcon = (type: string): string => {
+  switch (type) {
+    case 'openapi':
+      return 'openapi';
+    case 'asyncapi':
+      return 'asyncapi';
+    case 'graphql':
+      return 'graphql';
+    default:
+      return 'json-schema';
+  }
+};
+
+export const getSpecLabel = (type: string): string => {
+  switch (type) {
+    case 'openapi':
+      return 'OpenAPI';
+    case 'asyncapi':
+      return 'AsyncAPI';
+    case 'graphql':
+      return 'GraphQL';
+    default:
+      return type;
+  }
+};
+
+export const getSpecColor = (type: string): string => {
+  switch (type) {
+    case 'openapi':
+      return 'green';
+    case 'asyncapi':
+      return 'purple';
+    case 'graphql':
+      return 'pink';
+    default:
+      return 'gray';
+  }
+};
+
+// Helper to normalize specifications from service data
+export const getServiceSpecifications = (data: any): Specification[] => {
+  const specs = data?.specifications;
+  if (!specs) return [];
+
+  // Handle array format
+  if (Array.isArray(specs)) {
+    return specs.map((spec: any) => {
+      const filename = spec.path?.split('/').pop() || spec.path;
+      const filenameWithoutExtension = filename?.replace(/\.[^/.]+$/, '') || '';
+      return {
+        type: spec.type,
+        path: spec.path,
+        name: spec.name,
+        filename,
+        filenameWithoutExtension,
+      };
+    });
+  }
+
+  // Handle legacy object format
+  const result: Specification[] = [];
+  if (specs.asyncapiPath) {
+    const filename = specs.asyncapiPath.split('/').pop();
+    result.push({
+      type: 'asyncapi',
+      path: specs.asyncapiPath,
+      filename,
+      filenameWithoutExtension: filename?.replace(/\.[^/.]+$/, '') || '',
+    });
+  }
+  if (specs.openapiPath) {
+    const filename = specs.openapiPath.split('/').pop();
+    result.push({
+      type: 'openapi',
+      path: specs.openapiPath,
+      filename,
+      filenameWithoutExtension: filename?.replace(/\.[^/.]+$/, '') || '',
+    });
+  }
+  return result;
+};