@eventcatalog/core 2.58.1 → 2.59.0

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.58.1";
+var version = "2.59.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-F3YDLMMR.js";
-import "../chunk-N7MEYFUO.js";
+} from "../chunk-T3QXQPTB.js";
+import "../chunk-SCDNNFXH.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.58.1";
+var version = "2.59.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-X4GKQ2ZE.js";
-import "../chunk-F3YDLMMR.js";
-import "../chunk-N7MEYFUO.js";
+} from "../chunk-F5WMB6Q5.js";
+import "../chunk-T3QXQPTB.js";
+import "../chunk-SCDNNFXH.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-X4GKQ2ZE.js → chunk-F5WMB6Q5.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-F3YDLMMR.js";
+} from "./chunk-T3QXQPTB.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-N7MEYFUO.js → chunk-SCDNNFXH.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.58.1";
+var version = "2.59.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-F3YDLMMR.js → chunk-T3QXQPTB.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-N7MEYFUO.js";
+} from "./chunk-SCDNNFXH.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.58.1";
+var version = "2.59.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-N7MEYFUO.js";
+} from "./chunk-SCDNNFXH.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.58.1";
+var version = "2.59.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-X4GKQ2ZE.js";
-import "./chunk-F3YDLMMR.js";
+} from "./chunk-F5WMB6Q5.js";
+import "./chunk-T3QXQPTB.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-N7MEYFUO.js";
+} from "./chunk-SCDNNFXH.js";
 import {
   getProjectOutDir,
   isAuthEnabled,

package/eventcatalog/astro.config.mjs

@@ -13,6 +13,8 @@ import remarkComment from 'remark-comment'
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
+import rehypeExpressiveCode from 'rehype-expressive-code'
+
 /** @type {import('bin/eventcatalog.config').Config} */
 import config from './eventcatalog.config';
 import expressiveCode from 'astro-expressive-code';
@@ -23,6 +25,13 @@ const base = config.base || '/';
 const host = config.host || false;
 const compress = config.compress ?? true;
 
+const expressiveCodeConfig = {
+  themes: ['andromeeda'],
+  defaultProps: {
+    wrap: true,
+  },
+};
+
 // https://astro.build/config
 export default defineConfig({
   base,
@@ -53,25 +62,22 @@ export default defineConfig({
     react(),
     tailwind(),
     expressiveCode({
-      themes: ['github-light'],
-      defaultProps: {
-        // Enable word wrap by default
-        wrap: true,
-      },
+      ...expressiveCodeConfig,
     }),
-
     mdx({
       // https://docs.astro.build/en/guides/integrations-guide/mdx/#optimize
       optimize: config.mdxOptimize || false,
       remarkPlugins: [remarkDirective, remarkDirectives, remarkComment, mermaid, plantuml],
       rehypePlugins: [
+        [rehypeExpressiveCode, {
+            ...expressiveCodeConfig,
+        }],
         rehypeSlug,
         [
           rehypeAutolinkHeadings,
           {
             behavior: 'append',
             properties: { className: ['anchor-link'] },
-
           },
         ],
       ],

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

@@ -1,6 +1,13 @@
 import { useState, useMemo, useEffect } from 'react';
-import { ServerIcon, EnvelopeIcon, RectangleGroupIcon, Squares2X2Icon, QueueListIcon } from '@heroicons/react/24/outline';
-import { buildUrlWithParams } from '@utils/url-builder';
+import {
+  ServerIcon,
+  EnvelopeIcon,
+  RectangleGroupIcon,
+  Squares2X2Icon,
+  QueueListIcon,
+  CircleStackIcon,
+} from '@heroicons/react/24/outline';
+import { buildUrlWithParams, buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 import { type CollectionMessageTypes } from '@types';
 import { getCollectionStyles } from './utils';
@@ -287,6 +294,64 @@ export default function DomainGrid({ domains, embeded }: DomainGridProps) {
                         </div>
                       </div>
                     </div>
+
+                    {/* Container lists at the bottom */}
+                    {((service.data.readsFrom && service.data.readsFrom.length > 0) ||
+                      (service.data.writesTo && service.data.writesTo.length > 0)) && (
+                      <div className="mt-3 pt-3 border-t border-gray-200 grid grid-cols-2 gap-4">
+                        {/* Reads From */}
+                        {service.data.readsFrom && service.data.readsFrom.length > 0 && (
+                          <div className="space-y-2">
+                            <div className="flex items-center gap-2">
+                              <CircleStackIcon className="h-4 w-4 text-orange-500" />
+                              <h4 className="text-xs font-semibold text-gray-700">Reads from</h4>
+                            </div>
+                            <div className="flex flex-wrap gap-1">
+                              {service.data.readsFrom.slice(0, 3).map((container: any) => (
+                                <span
+                                  key={container.id}
+                                  className="group inline-flex items-center gap-1 px-2 py-1 bg-orange-100 border border-orange-300 rounded-md text-[11px] font-medium hover:bg-orange-200 transition-colors duration-200"
+                                >
+                                  <CircleStackIcon className="h-3 w-3 text-orange-600" />
+                                  <span className="text-orange-800">{container.id}</span>
+                                </span>
+                              ))}
+                              {service.data.readsFrom.length > 3 && (
+                                <span className="inline-flex items-center px-2 py-1 text-xs text-gray-500">
+                                  + {service.data.readsFrom.length - 3} more
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Writes To */}
+                        {service.data.writesTo && service.data.writesTo.length > 0 && (
+                          <div className="space-y-2">
+                            <div className="flex items-center gap-2">
+                              <CircleStackIcon className="h-4 w-4 text-purple-500" />
+                              <h4 className="text-xs font-semibold text-gray-700">Writes to</h4>
+                            </div>
+                            <div className="flex flex-wrap gap-1">
+                              {service.data.writesTo.slice(0, 3).map((container: any) => (
+                                <span
+                                  key={container.id}
+                                  className="group inline-flex items-center gap-1 px-2 py-1 bg-purple-100 border border-purple-300 rounded-md text-[11px] font-medium hover:bg-purple-200 transition-colors duration-200"
+                                >
+                                  <CircleStackIcon className="h-3 w-3 text-purple-600" />
+                                  <span className="text-purple-800">{container.id}</span>
+                                </span>
+                              ))}
+                              {service.data.writesTo.length > 3 && (
+                                <span className="inline-flex items-center px-2 py-1 text-xs text-gray-500">
+                                  + {service.data.writesTo.length - 3} more
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
                   </div>
                 ))}
                 {domain.data.domains && domain.data.domains.length > 2 && (

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

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
-import { EnvelopeIcon, ChevronRightIcon, ServerIcon } from '@heroicons/react/24/outline';
+import { EnvelopeIcon, ChevronRightIcon, ServerIcon, CircleStackIcon } from '@heroicons/react/24/outline';
 import { RectangleGroupIcon } from '@heroicons/react/24/outline';
 import { buildUrl, buildUrlWithParams } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
@@ -9,6 +9,7 @@ import { SearchBar, TypeFilters, Pagination } from './components';
 
 interface MessageGridProps {
   messages: CollectionEntry<CollectionMessageTypes>[];
+  containers?: CollectionEntry<'containers'>[];
   embeded: boolean;
 }
 
@@ -18,7 +19,7 @@ interface GroupedMessages {
   receives?: CollectionEntry<CollectionMessageTypes>[];
 }
 
-export default function MessageGrid({ messages, embeded }: MessageGridProps) {
+export default function MessageGrid({ messages, embeded, containers }: MessageGridProps) {
   const [searchQuery, setSearchQuery] = useState('');
   const [urlParams, setUrlParams] = useState<{
     serviceId?: string;
@@ -130,6 +131,19 @@ export default function MessageGrid({ messages, embeded }: MessageGridProps) {
     return { sends, receives };
   }, [filteredAndSortedMessages, urlParams]);
 
+  // Get the containers that are referenced by the service
+  const serviceContainersReferenced = useMemo(() => {
+    if (!urlParams?.serviceId || !containers) return { writesTo: [], readsFrom: [] };
+    return {
+      writesTo: containers.filter((container) =>
+        container.data.servicesThatWriteToContainer?.some((service: any) => service.data.id === urlParams.serviceId)
+      ),
+      readsFrom: containers.filter((container) =>
+        container.data.servicesThatReadFromContainer?.some((service: any) => service.data.id === urlParams.serviceId)
+      ),
+    };
+  }, [containers, urlParams]);
+
   const renderTypeFilters = () => {
     return (
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
@@ -373,64 +387,166 @@ export default function MessageGrid({ messages, embeded }: MessageGridProps) {
                   </div>
                 </div>
                 <div className="grid grid-cols-3 gap-8 relative">
-                  {/* Receives 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 messages ({groupedMessages.receives?.length || 0})
-                      </h2>
+                  {/* 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 ({groupedMessages.receives?.length || 0})
+                        </h2>
+                      </div>
+                      {groupedMessages.receives && groupedMessages.receives.length > 0 ? (
+                        renderMessageGrid(groupedMessages.receives)
+                      ) : (
+                        <div className="text-center py-12">
+                          <p className="text-gray-500 text-sm">No messages</p>
+                        </div>
+                      )}
                     </div>
-                    {groupedMessages.receives && groupedMessages.receives.length > 0 ? (
-                      renderMessageGrid(groupedMessages.receives)
-                    ) : (
-                      <div className="text-center py-12">
-                        <p className="text-gray-500">
-                          {selectedTypes.length > 0
-                            ? `Service does not receive ${selectedTypes.join(' or ')}`
-                            : 'Service does not receive any messages'}
-                        </p>
+
+                    {/* Reads From Containers - Only show if containers exist */}
+                    {serviceContainersReferenced.readsFrom && serviceContainersReferenced.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 ({serviceContainersReferenced.readsFrom.length})
+                          </h2>
+                        </div>
+                        <div className="space-y-3">
+                          {serviceContainersReferenced.readsFrom.map((container: CollectionEntry<'containers'>) => (
+                            <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>
+                          ))}
+                        </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>
                       </div>
                     )}
                   </div>
 
                   {/* Arrow from Receives to Service */}
-                  <div className="absolute left-[30%] top-1/2 -translate-y-1/2 flex items-center justify-center w-16">
+                  <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>
                   </div>
 
-                  {/* Service Information */}
-                  <div className="bg-white border-2 border-pink-100 rounded-lg p-3 flex items-center justify-center min-h-[80px]">
-                    <div className="flex flex-col items-center gap-2">
-                      <ServerIcon className="h-10 w-10 text-pink-500" />
-                      <p className="text-lg font-medium text-gray-900">{urlParams.serviceName}</p>
+                  {/* 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">{urlParams.serviceName}</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">{groupedMessages.receives?.length || 0}</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">{groupedMessages.sends?.length || 0}</div>
+                          <div className="text-xs text-gray-600 mt-1">Sends</div>
+                        </div>
+                        {serviceContainersReferenced.readsFrom && serviceContainersReferenced.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">
+                              {serviceContainersReferenced.readsFrom.length}
+                            </div>
+                            <div className="text-xs text-gray-600 mt-1">Reads from</div>
+                          </div>
+                        )}
+                        {serviceContainersReferenced.writesTo && serviceContainersReferenced.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">
+                              {serviceContainersReferenced.writesTo.length}
+                            </div>
+                            <div className="text-xs text-gray-600 mt-1">Writes to</div>
+                          </div>
+                        )}
+                      </div>
                     </div>
                   </div>
 
                   {/* Arrow from Service to Sends */}
-                  <div className="absolute right-[30%] top-1/2 -translate-y-1/2 flex items-center justify-center w-16">
+                  <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>
 
-                  {/* Sends 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 messages ({groupedMessages.sends?.length || 0})
-                      </h2>
+                  {/* 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 ({groupedMessages.sends?.length || 0})
+                        </h2>
+                      </div>
+                      {groupedMessages.sends && groupedMessages.sends.length > 0 ? (
+                        renderMessageGrid(groupedMessages.sends)
+                      ) : (
+                        <div className="text-center py-12">
+                          <p className="text-gray-500 text-sm">No messages</p>
+                        </div>
+                      )}
                     </div>
-                    {groupedMessages.sends && groupedMessages.sends.length > 0 ? (
-                      renderMessageGrid(groupedMessages.sends)
-                    ) : (
-                      <div className="text-center py-8">
-                        <p className="text-gray-500">
-                          {selectedTypes.length > 0
-                            ? `Service does not send ${selectedTypes.join(' or ')}`
-                            : 'Service does not send any messages'}
-                        </p>
+
+                    {/* Writes To Containers - Only show if containers exist */}
+                    {serviceContainersReferenced.writesTo && serviceContainersReferenced.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 ({serviceContainersReferenced.writesTo.length})
+                          </h2>
+                        </div>
+                        <div className="space-y-3">
+                          {serviceContainersReferenced.writesTo.map((container: CollectionEntry<'containers'>) => (
+                            <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>

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

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect, memo } from 'react';
-import { ServerIcon, ChevronRightIcon, Squares2X2Icon, QueueListIcon } from '@heroicons/react/24/outline';
+import { ServerIcon, ChevronRightIcon, Squares2X2Icon, QueueListIcon, CircleStackIcon } from '@heroicons/react/24/outline';
 import { RectangleGroupIcon } from '@heroicons/react/24/outline';
 import { buildUrl, buildUrlWithParams } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
@@ -110,6 +110,66 @@ const ServiceCard = memo(({ service, urlParams, selectedTypes }: { service: any;
             <MessagesContainer messages={service.data.sends} type="sends" selectedTypes={selectedTypes} />
           </div>
         )}
+
+        {/* Container lists at the bottom */}
+        {((service.data.readsFrom && service.data.readsFrom.length > 0) ||
+          (service.data.writesTo && service.data.writesTo.length > 0)) && (
+          <div className="mt-4 pt-4 border-t border-gray-200 grid grid-cols-2 gap-4">
+            {/* Reads From */}
+            {service.data.readsFrom && service.data.readsFrom.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <CircleStackIcon className="h-4 w-4 text-orange-500" />
+                  <h4 className="text-xs font-semibold text-gray-700">Reads from</h4>
+                </div>
+                <div className="flex flex-wrap gap-1">
+                  {service.data.readsFrom.slice(0, 3).map((container: any) => (
+                    <a
+                      key={container.id}
+                      href={buildUrl(`/docs/containers/${container.data.id}/${container.data.version}`)}
+                      className="group inline-flex items-center gap-1 px-2 py-1 bg-orange-100 border border-orange-300 rounded-md text-[11px] font-medium hover:bg-orange-200 transition-colors duration-200"
+                    >
+                      <CircleStackIcon className="h-3 w-3 text-orange-600" />
+                      <span className="text-orange-800">{container.data.name}</span>
+                    </a>
+                  ))}
+                  {service.data.readsFrom.length > 3 && (
+                    <span className="inline-flex items-center px-2 py-1 text-xs text-gray-500">
+                      + {service.data.readsFrom.length - 3} more
+                    </span>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Writes To */}
+            {service.data.writesTo && service.data.writesTo.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <CircleStackIcon className="h-4 w-4 text-purple-500" />
+                  <h4 className="text-xs font-semibold text-gray-700">Writes to</h4>
+                </div>
+                <div className="flex flex-wrap gap-1">
+                  {service.data.writesTo.slice(0, 3).map((container: any) => (
+                    <a
+                      key={container.id}
+                      href={buildUrl(`/docs/containers/${container.data.id}/${container.data.version}`)}
+                      className="group inline-flex items-center gap-1 px-2 py-1 bg-purple-100 border border-purple-300 rounded-md text-[11px] font-medium hover:bg-purple-200 transition-colors duration-200"
+                    >
+                      <CircleStackIcon className="h-3 w-3 text-purple-600" />
+                      <span className="text-purple-800">{container.data.name}</span>
+                    </a>
+                  ))}
+                  {service.data.writesTo.length > 3 && (
+                    <span className="inline-flex items-center px-2 py-1 text-xs text-gray-500">
+                      + {service.data.writesTo.length - 3} more
+                    </span>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </a>
   );
@@ -184,19 +244,23 @@ const DomainSection = memo(
 
               {/* Entities */}
               {subdomain.data.entities && subdomain.data.entities.length > 0 && (
-                <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-4 gap-6">
-                  {subdomain.data.entities.map((entity: any) => (
-                    <a
-                      key={entity.id}
-                      href={buildUrl(`/docs/entities/${entity.id}`)}
-                      className="bg-white border-2 border-dashed border-purple-400 rounded-lg p-4 space-y-4 hover:bg-purple-50 transition-colors duration-200"
-                    >
-                      <div className="flex items-center gap-2">
-                        <BoxIcon className="h-5 w-5 text-purple-500" />
-                        <h3 className="text-lg font-semibold text-gray-900">{entity.id} (Entity)</h3>
-                      </div>
-                    </a>
-                  ))}
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <BoxIcon className="h-4 w-4 text-purple-500" />
+                    <h4 className="text-xs font-semibold text-gray-700">Entities</h4>
+                  </div>
+                  <div className="flex flex-wrap gap-1">
+                    {subdomain.data.entities.map((entity: any) => (
+                      <a
+                        key={entity.id}
+                        href={buildUrl(`/docs/entities/${entity.id}`)}
+                        className="group inline-flex items-center gap-1 px-2 py-1 bg-purple-100 border border-purple-300 rounded-md text-[11px] font-medium hover:bg-purple-200 transition-colors duration-200"
+                      >
+                        <BoxIcon className="h-3 w-3 text-purple-600" />
+                        <span className="text-purple-800">{entity.id}</span>
+                      </a>
+                    ))}
+                  </div>
                 </div>
               )}