@eventcatalog/core 5.0.0-beta.7 → 5.0.0-beta.8

package/dist/features.d.cts

@@ -1,6 +1,8 @@
 declare const getProjectOutDir: () => Promise<any>;
 declare const isOutputServer: () => Promise<boolean>;
+/** EventCatalog Studio in production (server output, studio.enabled) */
+declare const isStudioEnabled: () => Promise<boolean>;
 declare const isIndexedSearchEnabled: () => Promise<boolean>;
 declare const isAuthEnabled: () => Promise<boolean>;
 
-export { getProjectOutDir, isAuthEnabled, isIndexedSearchEnabled, isOutputServer };
+export { getProjectOutDir, isAuthEnabled, isIndexedSearchEnabled, isOutputServer, isStudioEnabled };

package/dist/features.d.ts

@@ -1,6 +1,8 @@
 declare const getProjectOutDir: () => Promise<any>;
 declare const isOutputServer: () => Promise<boolean>;
+/** EventCatalog Studio in production (server output, studio.enabled) */
+declare const isStudioEnabled: () => Promise<boolean>;
 declare const isIndexedSearchEnabled: () => Promise<boolean>;
 declare const isAuthEnabled: () => Promise<boolean>;
 
-export { getProjectOutDir, isAuthEnabled, isIndexedSearchEnabled, isOutputServer };
+export { getProjectOutDir, isAuthEnabled, isIndexedSearchEnabled, isOutputServer, isStudioEnabled };

package/dist/features.js

@@ -2,12 +2,14 @@ import {
   getProjectOutDir,
   isAuthEnabled,
   isIndexedSearchEnabled,
-  isOutputServer
-} from "./chunk-MDWB5HLO.js";
+  isOutputServer,
+  isStudioEnabled
+} from "./chunk-ENAG6UH7.js";
 import "./chunk-RFIXKATC.js";
 export {
   getProjectOutDir,
   isAuthEnabled,
   isIndexedSearchEnabled,
-  isOutputServer
+  isOutputServer,
+  isStudioEnabled
 };

package/dist/generate.cjs

@@ -112,7 +112,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.7";
+var version = "5.0.0-beta.8";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-SJJKWZYZ.js";
-import "./chunk-S7ODHVII.js";
-import "./chunk-FARBIZ7Y.js";
+} from "./chunk-T4G3VVZ4.js";
+import "./chunk-PU25TOOJ.js";
+import "./chunk-RDIZJ7UT.js";
 import "./chunk-RFIXKATC.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.7";
+var version = "5.0.0-beta.8";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-S7ODHVII.js";
-import "../chunk-FARBIZ7Y.js";
+} from "../chunk-PU25TOOJ.js";
+import "../chunk-RDIZJ7UT.js";
 export {
   logger
 };

package/dist/utils/license-status.cjs

@@ -37,6 +37,7 @@ __export(license_status_exports, {
 });
 module.exports = __toCommonJS(license_status_exports);
 var import_boxen = __toESM(require("boxen"), 1);
+var import_picocolors = __toESM(require("picocolors"), 1);
 var import_license2 = require("@eventcatalog/license");
 
 // eventcatalog/src/utils/trial.ts
@@ -159,75 +160,100 @@ var getLicenseAnalytics = (license = { state: "none" }, tsd) => ({
 });
 var formatDate = (date) => date.toLocaleDateString(void 0, { dateStyle: "medium" });
 var formatDays = (days) => `${days} ${days === 1 ? "day" : "days"}`;
-var getTrialLine = (tsd, now) => {
+var PLAIN = { bold: (text) => text, dim: (text) => text, link: (text) => text };
+var COLOURS = { bold: import_picocolors.default.bold, dim: import_picocolors.default.dim, link: (text) => import_picocolors.default.cyan(text) };
+var render = ({ headline, rows, links }, colours) => {
+  const width = Math.max(0, ...[...rows, ...links].map(([label]) => label.length));
+  const row = ([label, value]) => `${colours.dim(label.padEnd(width))}  ${value}`;
+  return [
+    colours.bold(headline),
+    ...rows.length ? ["", ...rows.map(row)] : [],
+    ...links.length ? ["", ...links.map(([label, url]) => row([label, colours.link(url)]))] : []
+  ].join("\n");
+};
+var message = (content) => ({
+  ...content,
+  text: render(content, PLAIN)
+});
+var getTrialRow = (tsd, now) => {
   const trial = getTrialStatus(tsd, now);
   if (!trial) return;
-  return trial.ended ? `Your ${TRIAL_LENGTH_DAYS}-day EventCatalog trial ended on ${formatDate(trial.endsAt)}.` : `${formatDays(trial.daysLeft)} left of your ${TRIAL_LENGTH_DAYS}-day EventCatalog trial (ends ${formatDate(trial.endsAt)}).`;
+  return [
+    "Trial",
+    trial.ended ? `Ended ${formatDate(trial.endsAt)}` : `${formatDays(trial.daysLeft)} left of ${TRIAL_LENGTH_DAYS} (ends ${formatDate(trial.endsAt)})`
+  ];
 };
 var getLicenseStatusMessage = (license, tsd, now = Date.now()) => {
+  const licensing = ["Licensing", LICENSE_FAQ_URL];
+  const renew = ["Renew", LICENSE_RENEW_URL];
+  const licensedTo = "org" in license && license.org ? [["Licensed to", license.org]] : [];
   if (license.state === "licensed") {
     const daysLeft = Math.max(0, Math.ceil((license.expiresAt.getTime() - now) / DAY_IN_MS2));
-    const licensedTo = license.org ? `Licensed to ${license.org}` : "Licensed";
     if (daysLeft < LICENSE_REMINDER_DAYS) {
-      return {
-        title: "EventCatalog Commercial License",
+      return message({
+        title: "EventCatalog license",
         color: "yellow",
-        text: [
-          licensedTo,
-          `Your license expires in ${formatDays(daysLeft)}, on ${formatDate(license.expiresAt)}.`,
-          `Renew it to keep using EventCatalog commercially: ${LICENSE_RENEW_URL}`
-        ].join("\n")
-      };
+        headline: `Your commercial license expires in ${formatDays(daysLeft)}`,
+        rows: [...licensedTo, ["Expires", formatDate(license.expiresAt)]],
+        links: [renew]
+      });
     }
-    return {
-      title: "EventCatalog Commercial License",
+    return message({
+      title: "EventCatalog license",
       color: "green",
-      text: `${licensedTo}
-Valid until ${formatDate(license.expiresAt)} (${formatDays(daysLeft)} left)`
-    };
+      headline: "Commercial license active",
+      rows: [...licensedTo, ["Valid until", `${formatDate(license.expiresAt)} (${formatDays(daysLeft)} left)`]],
+      links: []
+    });
   }
   if (license.state === "plan") return;
-  const trialLine = getTrialLine(tsd, now);
+  const trialRow = getTrialRow(tsd, now);
+  const trialRows = trialRow ? [trialRow] : [];
   if (license.state === "none") {
-    if (!trialLine) return;
-    const ended = getTrialStatus(tsd, now)?.ended;
-    return {
+    const trial = getTrialStatus(tsd, now);
+    if (!trial || !trialRow) return;
+    return message({
       title: "EventCatalog trial",
-      color: ended ? "yellow" : "green",
-      text: `${trialLine}
-Learn about licensing: ${LICENSE_FAQ_URL}`
-    };
+      color: trial.ended ? "yellow" : "green",
+      headline: trial.ended ? "Your EventCatalog trial has ended" : `You're on the ${TRIAL_LENGTH_DAYS}-day EventCatalog trial`,
+      rows: trialRows,
+      links: trial.ended ? [["Get a license", LICENSE_RENEW_URL], licensing] : [licensing]
+    });
   }
   if (license.state === "expired") {
-    const expiredOn = license.expiresAt ? `expired on ${formatDate(license.expiresAt)} (${formatDays(Math.floor((now - license.expiresAt.getTime()) / DAY_IN_MS2))} ago)` : "has expired";
-    return {
-      title: "EventCatalog License Expired",
+    const expiredOn = license.expiresAt ? [
+      [
+        "Expired",
+        `${formatDate(license.expiresAt)} (${formatDays(Math.floor((now - license.expiresAt.getTime()) / DAY_IN_MS2))} ago)`
+      ]
+    ] : [];
+    return message({
+      title: "EventCatalog license",
       color: "yellow",
-      text: [
-        `Your EventCatalog commercial license${license.org ? ` for ${license.org}` : ""} ${expiredOn}.`,
-        `Renew it to keep using EventCatalog commercially: ${LICENSE_RENEW_URL}`,
-        trialLine,
-        `Learn about licensing: ${LICENSE_FAQ_URL}`
-      ].filter(Boolean).join("\n")
-    };
+      headline: "Your commercial license has expired",
+      rows: [...licensedTo, ...expiredOn, ...trialRows],
+      links: [renew, licensing]
+    });
   }
-  return {
+  return message({
     title: "EventCatalog license",
     color: "yellow",
-    text: [`Your license.jwt could not be verified: ${license.reason}.`, trialLine, `Learn about licensing: ${LICENSE_FAQ_URL}`].filter(Boolean).join("\n")
-  };
+    headline: "Your license.jwt couldn't be verified",
+    rows: [["Reason", license.reason.charAt(0).toUpperCase() + license.reason.slice(1)], ...trialRows],
+    links: [licensing]
+  });
 };
 var printLicenseStatus = (license, tsd) => {
-  const message = getLicenseStatusMessage(license, tsd);
-  if (!message) return;
+  const status = getLicenseStatusMessage(license, tsd);
+  if (!status) return;
   console.log(
-    (0, import_boxen.default)(message.text, {
-      padding: 1,
+    (0, import_boxen.default)(render(status, COLOURS), {
+      padding: { top: 1, bottom: 1, left: 2, right: 2 },
       margin: 1,
       borderStyle: "round",
-      borderColor: message.color,
-      title: message.title,
-      titleAlignment: "center"
+      borderColor: status.color,
+      title: status.title,
+      titleAlignment: "left"
     })
   );
 };

package/dist/utils/license-status.d.cts

@@ -15,14 +15,23 @@ declare const getLicenseAnalytics: (license?: LicenseStatus, tsd?: unknown) => {
     licenseExpiry: number | undefined;
     trialExpiry: number | undefined;
 };
+type Row = [label: string, value: string];
 /**
- * The license (or trial) box for the terminal. Undefined when there's nothing to show.
+ * What the license box says: a headline, the facts as aligned rows ("Licensed to  acme"), and links on their own
+ * rows, so it can be read at a glance. `text` is the box's content without colours.
  */
-declare const getLicenseStatusMessage: (license: LicenseStatus, tsd: unknown, now?: number) => {
+type LicenseStatusMessage = {
     title: string;
-    color: string;
+    color: 'green' | 'yellow';
+    headline: string;
+    rows: Row[];
+    links: Row[];
     text: string;
-} | undefined;
+};
+/**
+ * The license (or trial) box for the terminal. Undefined when there's nothing to show.
+ */
+declare const getLicenseStatusMessage: (license: LicenseStatus, tsd: unknown, now?: number) => LicenseStatusMessage | undefined;
 declare const printLicenseStatus: (license: LicenseStatus, tsd: unknown) => void;
 
-export { LicenseStatus, getLicenseAnalytics, getLicenseStatus, getLicenseStatusMessage, printLicenseStatus };
+export { LicenseStatus, type LicenseStatusMessage, getLicenseAnalytics, getLicenseStatus, getLicenseStatusMessage, printLicenseStatus };

package/dist/utils/license-status.d.ts

@@ -15,14 +15,23 @@ declare const getLicenseAnalytics: (license?: LicenseStatus, tsd?: unknown) => {
     licenseExpiry: number | undefined;
     trialExpiry: number | undefined;
 };
+type Row = [label: string, value: string];
 /**
- * The license (or trial) box for the terminal. Undefined when there's nothing to show.
+ * What the license box says: a headline, the facts as aligned rows ("Licensed to  acme"), and links on their own
+ * rows, so it can be read at a glance. `text` is the box's content without colours.
  */
-declare const getLicenseStatusMessage: (license: LicenseStatus, tsd: unknown, now?: number) => {
+type LicenseStatusMessage = {
     title: string;
-    color: string;
+    color: 'green' | 'yellow';
+    headline: string;
+    rows: Row[];
+    links: Row[];
     text: string;
-} | undefined;
+};
+/**
+ * The license (or trial) box for the terminal. Undefined when there's nothing to show.
+ */
+declare const getLicenseStatusMessage: (license: LicenseStatus, tsd: unknown, now?: number) => LicenseStatusMessage | undefined;
 declare const printLicenseStatus: (license: LicenseStatus, tsd: unknown) => void;
 
-export { LicenseStatus, getLicenseAnalytics, getLicenseStatus, getLicenseStatusMessage, printLicenseStatus };
+export { LicenseStatus, type LicenseStatusMessage, getLicenseAnalytics, getLicenseStatus, getLicenseStatusMessage, printLicenseStatus };

package/dist/utils/license-status.js

@@ -3,7 +3,7 @@ import {
   getLicenseStatus,
   getLicenseStatusMessage,
   printLicenseStatus
-} from "../chunk-PIYJM642.js";
+} from "../chunk-AWOO63ME.js";
 export {
   getLicenseAnalytics,
   getLicenseStatus,

package/eventcatalog/integrations/studio-server.mjs

@@ -1,4 +1,5 @@
 import { getStudioRuntime } from '../src/features/studio/server/runtime.ts';
+import config from '../src/utils/eventcatalog-config/source.ts';
 import { isCanvasEnabled } from '../src/utils/feature.ts';
 
 // Collaborative canvases: the collaboration WebSocket (Yjs over Hocuspocus), on the dev server's port.
@@ -7,10 +8,21 @@ export default function studioServer() {
   return {
     name: 'eventcatalog-studio-server',
     hooks: {
-      'astro:server:setup': ({ server, logger }) => {
+      'astro:server:setup': async ({ server, logger }) => {
         if (!isCanvasEnabled() || !server.httpServer) return;
-        getStudioRuntime().attach(server.httpServer);
-        logger.info('Collaboration server ready at /_eventcatalog/studio');
+        const runtime = getStudioRuntime();
+        const projectDirectory = process.env.PROJECT_DIR || process.cwd();
+        // Canvases are loaded from storage before anyone can open one
+        try {
+          await runtime.useStorage(config.studio?.storage, projectDirectory);
+        } catch (error) {
+          logger.error(`Could not use the Studio storage configured, keeping canvases in memory: ${error.message}`);
+          await runtime.useStorage({ type: 'memory' }, projectDirectory);
+        }
+        runtime.attach(server.httpServer);
+        const { type, location } = runtime.storage;
+        const kept = type === 'memory' ? 'kept in memory until the server restarts' : `stored in ${location}`;
+        logger.info(`Collaboration server ready at /_eventcatalog/studio (canvases ${kept})`);
       },
     },
   };

package/eventcatalog/src/components/Header.astro

@@ -94,16 +94,16 @@ const providerName = user?.provider ? providerNames[user.provider] || user.provi
                     <img
                       src={userImage}
                       alt=""
-                      class="h-8 w-8 rounded-full object-cover ring-1 ring-[rgb(var(--ec-page-border))]"
+                      class="h-7 w-7 rounded-full object-cover ring-1 ring-[rgb(var(--ec-page-border))]"
                     />
                   ) : (
-                    <span class="h-8 w-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] ring-1 ring-[rgb(var(--ec-page-border))] flex items-center justify-center text-xs font-semibold">
+                    <span class="h-7 w-7 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] ring-1 ring-[rgb(var(--ec-page-border))] flex items-center justify-center text-[11px] font-semibold">
                       {userInitials}
                     </span>
                   )}
                   <svg
                     viewBox="0 0 24 24"
-                    class="h-4 w-4 transition-transform group-aria-expanded:rotate-180"
+                    class="h-3.5 w-3.5 transition-transform group-aria-expanded:rotate-180"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="2"

package/eventcatalog/src/features/integrations/eventcatalog-features.ts

@@ -176,17 +176,25 @@ export default function eventCatalogIntegration(): AstroIntegration {
           });
         }
 
-        // Collaborative canvases in EventCatalog Studio (/studio starts one). Their WebSocket server is in
-        // integrations/studio-server.mjs.
+        // Collaborative canvases in EventCatalog Studio (/studio lists them, /studio/new starts one). Their WebSocket
+        // server is in integrations/studio-server.mjs.
         if (isCanvasEnabled()) {
           params.injectRoute({
             pattern: '/studio',
             entrypoint: path.join(packageDirectory, 'src/features/studio/pages/index.astro'),
           });
+          params.injectRoute({
+            pattern: '/studio/new',
+            entrypoint: path.join(packageDirectory, 'src/features/studio/pages/new.astro'),
+          });
           params.injectRoute({
             pattern: '/studio/[id]',
             entrypoint: path.join(packageDirectory, 'src/features/studio/pages/[id].astro'),
           });
+          params.injectRoute({
+            pattern: '/_eventcatalog/studio/wake',
+            entrypoint: path.join(packageDirectory, 'src/features/studio/pages/wake.ts'),
+          });
           params.injectRoute({
             pattern: '/webmcp-relay/[file]',
             entrypoint: path.join(packageDirectory, 'src/features/studio/pages/webmcp-relay.ts'),

package/eventcatalog/src/features/mcp/apps/canvas/shared.ts

@@ -1,5 +1,6 @@
 // Shared by the canvas MCP App (client) and the MCP server: no server-only imports here
 import type { CatalogRelation, CatalogResource } from '../../../studio/catalog-resources';
+import type { CanvasStatus } from '../../../studio/canvas-doc';
 
 export const CANVAS_RESOURCE_URI = 'ui://eventcatalog/canvas.html';
 /** Key of the payload in openCanvas results' `_meta` */
@@ -12,7 +13,14 @@ export const CANVAS_CATALOG_TOOL = 'getCanvasCatalog';
 export const CANVAS_SYNC_TOOL = 'syncCanvas';
 
 /** A canvas listed in the view's picker */
-export type CanvasListItem = { canvasId: string; title?: string; people: string[]; nodeCount: number; openComments: number };
+export type CanvasListItem = {
+  canvasId: string;
+  title?: string;
+  status: CanvasStatus;
+  people: string[];
+  nodeCount: number;
+  openComments: number;
+};
 
 /**
  * What the view shows: a canvas (it connects to it itself, so people and agents edit it live), or, when opened

package/eventcatalog/src/features/mcp/apps/canvas/view.tsx

@@ -15,7 +15,7 @@ import type { App } from '@modelcontextprotocol/ext-apps';
 import styles from './styles.css?inline';
 import visualiserStyles from '@eventcatalog/visualiser/styles.css?inline';
 import StudioDesigner, { type SelectedNode } from '@features/studio/components/StudioDesigner';
-import { STATUS } from '@features/studio/components/status';
+import { CANVAS_STATUS_LOOK, STATUS } from '@features/studio/components/status';
 import { getToolResultPayload, mountView, useMcpAppView } from '../shared/app-view';
 import {
   CANVAS_CATALOG_TOOL,
@@ -101,7 +101,14 @@ function CanvasPicker({
             className="flex w-full items-center justify-between gap-3 rounded-xl border px-4 py-3 text-left bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))]"
           >
             <span className="min-w-0">
-              <span className="block truncate text-sm font-semibold">{canvas.title ?? 'Untitled canvas'}</span>
+              <span className="flex items-center gap-2">
+                <span className="truncate text-sm font-semibold">{canvas.title ?? 'Untitled canvas'}</span>
+                <span
+                  className={`shrink-0 rounded-full border px-1.5 py-px text-[10px] font-semibold ${CANVAS_STATUS_LOOK[canvas.status].pill}`}
+                >
+                  {CANVAS_STATUS_LOOK[canvas.status].label}
+                </span>
+              </span>
               <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">
                 {canvas.nodeCount} {canvas.nodeCount === 1 ? 'node' : 'nodes'}
                 {canvas.openComments > 0 && ` · ${canvas.openComments} open comments`}