@topogram/cli 0.3.56 → 0.3.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topogram/cli",
-  "version": "0.3.56",
+  "version": "0.3.58",
   "description": "Topogram CLI for checking Topogram workspaces and generating app bundles.",
   "license": "Apache-2.0",
   "repository": {

package/src/generator/context/slice.js

@@ -368,7 +368,7 @@ function uiAgentPacketForProjection(graph, projection) {
       screenId: route.screenId,
       path: route.path
     })),
-    widgets: (ownerProjection.widgetBindings || []).map((usage) => widgetUsagePacket(usage)),
+    widgets: (ownerProjection.widgetBindings || []).map((usage) => widgetUsagePacket(usage, ownerProjection)),
     designTokens: designIntentPacket(ownerProjection),
     requiredGates: uiRequiredGates(projection.id)
   };
@@ -387,7 +387,7 @@ function uiAgentPacketForWidget(graph, widget, projectionIds) {
           type: projectionType,
           ownership: projectionType === "ui_contract" ? "owner" : "concrete"
         },
-        usage: widgetUsagePacket(usage),
+        usage: widgetUsagePacket(usage, projection),
         designTokens: designIntentPacket(projection)
       });
       projectionSet.add(projection.id);
@@ -428,10 +428,31 @@ function sharedUiProjectionFor(graph, projection) {
   return null;
 }
 
-function widgetUsagePacket(usage) {
+function widgetUsagePacket(usage, projection = null) {
+  const screen = (projection?.uiScreens || []).find((entry) => entry.id === usage.screenId) || null;
+  const region = (projection?.uiScreenRegions || []).find((entry) =>
+    entry.screenId === usage.screenId && entry.region === usage.region
+  ) || null;
   return {
     screenId: usage.screenId || null,
+    screen: screen
+      ? {
+          id: screen.id,
+          kind: screen.kind || null,
+          title: screen.title || screen.id
+        }
+      : null,
     region: usage.region || null,
+    regionContract: region
+      ? {
+          name: region.region || null,
+          pattern: region.pattern || null,
+          placement: region.placement || null,
+          title: region.title || null,
+          state: region.state || null,
+          variant: region.variant || null
+        }
+      : null,
     widgetId: usage.widget?.id || null,
     dataBindings: (usage.dataBindings || []).map((binding) => ({
       prop: binding.prop || null,

package/src/generator/runtime/environment.js

@@ -370,16 +370,26 @@ function componentScriptOptions() {
   };
 }
 
+function runtimePortExpression(plan, runtimes, component, sharedEnvName) {
+  const runtimeEnvName = `${component.id.toUpperCase()}_PORT`;
+  const primaryRuntime = runtimes[0];
+  const fallback = primaryRuntime?.id === component.id
+    ? `\${${sharedEnvName}:-${component.port}}`
+    : `${component.port}`;
+  return `\${${runtimeEnvName}:-${fallback}}`;
+}
+
 function renderEnvironmentServerDevScript(plan, component = plan.runtimes.apis[0], options = {}) {
   if (!component) {
     return renderEnvAwareShellScript(['echo "No API runtimes are configured."']);
   }
   const guardPortsScript = options.componentScript ? '"$ROOT_DIR/scripts/guard-ports.mjs"' : '"$SCRIPT_DIR/guard-ports.mjs"';
+  const serverPortExpression = runtimePortExpression(plan, plan.runtimes.apis, component, "SERVER_PORT");
   return renderEnvAwareShellScript([
     `node ${guardPortsScript} api`,
     "",
     ...apiDatabaseExportLines(component),
-    `export PORT="\${${component.id.toUpperCase()}_PORT:-\${SERVER_PORT:-${component.port}}}"`,
+    `export PORT="${serverPortExpression}"`,
     `export TOPOGRAM_CORS_ORIGINS="\${TOPOGRAM_CORS_ORIGINS:-http://localhost:\${WEB_PORT:-${plan.ports.web}},http://127.0.0.1:\${WEB_PORT:-${plan.ports.web}}}"`,
     "",
     `cd "$ROOT_DIR/${component.dir}"`,
@@ -395,15 +405,16 @@ function renderEnvironmentWebDevScript(plan, component = plan.runtimes.webs[0],
   }
   const apiRuntime = plan.runtimes.apis.find((entry) => entry.id === component.uses_api) || plan.runtimes.apis[0];
   const guardPortsScript = options.componentScript ? '"$ROOT_DIR/scripts/guard-ports.mjs"' : '"$SCRIPT_DIR/guard-ports.mjs"';
+  const webPortExpression = runtimePortExpression(plan, plan.runtimes.webs, component, "WEB_PORT");
   return renderEnvAwareShellScript([
     `node ${guardPortsScript} web`,
     "",
     ...(apiRuntime ? [`export PUBLIC_TOPOGRAM_API_BASE_URL="\${PUBLIC_TOPOGRAM_API_BASE_URL:-http://localhost:\${${apiRuntime.id.toUpperCase()}_PORT:-\${SERVER_PORT:-${apiRuntime.port}}}}"`] : []),
-    `export TOPOGRAM_CORS_ORIGINS="\${TOPOGRAM_CORS_ORIGINS:-http://localhost:\${${component.id.toUpperCase()}_PORT:-\${WEB_PORT:-${component.port}}},http://127.0.0.1:\${${component.id.toUpperCase()}_PORT:-\${WEB_PORT:-${component.port}}}}"`,
+    `export TOPOGRAM_CORS_ORIGINS="\${TOPOGRAM_CORS_ORIGINS:-http://localhost:${webPortExpression},http://127.0.0.1:${webPortExpression}}"`,
     "",
     `cd "$ROOT_DIR/${component.dir}"`,
     "npm install",
-    `npm run dev -- --host "\${WEB_HOST:-127.0.0.1}" --port "\${${component.id.toUpperCase()}_PORT:-\${WEB_PORT:-${component.port}}}"`,
+    `npm run dev -- --host "\${WEB_HOST:-127.0.0.1}" --port "${webPortExpression}"`,
   ], options.componentScript ? componentScriptOptions() : {});
 }
 
@@ -450,8 +461,8 @@ ${startLines.length ? "wait" : ""}
 
 function renderEnvironmentGuardPortsScript(plan) {
   const ports = [
-    ...plan.runtimes.apis.map((component) => ({ id: component.id, type: "api", env: `${component.id.toUpperCase()}_PORT`, fallbackEnv: "SERVER_PORT", port: component.port })),
-    ...plan.runtimes.webs.map((component) => ({ id: component.id, type: "web", env: `${component.id.toUpperCase()}_PORT`, fallbackEnv: "WEB_PORT", port: component.port }))
+    ...plan.runtimes.apis.map((component, index) => ({ id: component.id, type: "api", env: `${component.id.toUpperCase()}_PORT`, fallbackEnv: index === 0 ? "SERVER_PORT" : null, port: component.port })),
+    ...plan.runtimes.webs.map((component, index) => ({ id: component.id, type: "web", env: `${component.id.toUpperCase()}_PORT`, fallbackEnv: index === 0 ? "WEB_PORT" : null, port: component.port }))
   ];
   return `#!/usr/bin/env node
 import net from "node:net";
@@ -461,7 +472,7 @@ const ports = ${JSON.stringify(ports, null, 2)};
 const expectedService = ${JSON.stringify(plan.runtimeReference.serviceName || "")};
 
 function effectivePort(entry) {
-  return Number(process.env[entry.env] || process.env[entry.fallbackEnv] || entry.port);
+  return Number(process.env[entry.env] || (entry.fallbackEnv ? process.env[entry.fallbackEnv] : "") || entry.port);
 }
 
 function portInUse(port) {

package/src/generator/surfaces/web/react.js

@@ -222,6 +222,7 @@ function buildReactGenerationCoverage(contract, files, routeScreens) {
         const marker = widgetId ? `data-topogram-widget="${widgetId}"` : null;
         const support = reactWidgetUsageSupport(usage, contract.widgets);
         const usageRendered = Boolean(marker && contents.includes(marker));
+        const status = !support.supported ? "unsupported" : usageRendered ? "rendered" : "failed";
         if (widgetId && rendered && !support.supported) {
           diagnostics.push({
             code: "widget_pattern_not_supported",
@@ -238,7 +239,7 @@ function buildReactGenerationCoverage(contract, files, routeScreens) {
         if (widgetId && rendered && !usageRendered) {
           diagnostics.push({
             code: "widget_usage_not_rendered",
-            severity: "warning",
+            severity: "error",
             screen: screen.id,
             route: screen.route,
             region: usage.region || null,
@@ -252,6 +253,7 @@ function buildReactGenerationCoverage(contract, files, routeScreens) {
           region: usage.region || null,
           pattern: support.pattern || null,
           supported: support.supported,
+          status,
           rendered: usageRendered,
           marker
         };

package/src/generator/surfaces/web/sveltekit.js

@@ -194,6 +194,13 @@ function buildSvelteKitGenerationCoverage(contract, files, implementationScreenI
         const marker = widgetId ? `data-topogram-widget="${widgetId}"` : null;
         const support = svelteKitWidgetUsageSupport(usage, contract.widgets);
         const usageRendered = Boolean(marker && contents.includes(marker));
+        const status = !support.supported
+          ? "unsupported"
+          : usageRendered
+            ? "rendered"
+            : renderer === "implementation"
+              ? "implementation_owned"
+              : "failed";
         if (widgetId && rendered && renderer !== "implementation" && !support.supported) {
           diagnostics.push({
             code: "widget_pattern_not_supported",
@@ -210,7 +217,7 @@ function buildSvelteKitGenerationCoverage(contract, files, implementationScreenI
         if (widgetId && rendered && !usageRendered) {
           diagnostics.push({
             code: "widget_usage_not_rendered",
-            severity: "warning",
+            severity: renderer === "implementation" ? "warning" : "error",
             screen: screen.id,
             route: screen.route,
             region: usage.region || null,
@@ -224,6 +231,7 @@ function buildSvelteKitGenerationCoverage(contract, files, implementationScreenI
           region: usage.region || null,
           pattern: support.pattern || null,
           supported: support.supported,
+          status,
           rendered: usageRendered,
           marker
         };