@almadar/ui 2.27.5 → 2.28.1

package/dist/runtime/index.js

@@ -821,6 +821,36 @@ function recordTransition(trace) {
 function getTransitions() {
   return [...getState().transitions];
 }
+function recordServerResponse(orbitalName, event, response) {
+  const serverResponse = {
+    ...response,
+    orbitalName,
+    timestamp: Date.now()
+  };
+  const entry = {
+    id: `srv-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+    traitName: `server:${orbitalName}`,
+    from: "server",
+    to: "server",
+    event,
+    effects: [],
+    serverResponse,
+    timestamp: Date.now()
+  };
+  getState().transitions.push(entry);
+  if (getState().transitions.length > MAX_TRANSITIONS) {
+    getState().transitions.shift();
+  }
+  if (!response.success && response.error) {
+    registerCheck(
+      `server-error-${entry.id}`,
+      `Server error for ${orbitalName}:${event}`,
+      "fail",
+      response.error
+    );
+  }
+  notifyListeners2();
+}
 function getBridgeHealth() {
   const bh = getState().bridgeHealth;
   return bh ? { ...bh } : null;
@@ -27904,6 +27934,119 @@ function EventDispatcherTab({ traits: traits2, schema }) {
   ] });
 }
 EventDispatcherTab.displayName = "EventDispatcherTab";
+function ServerResponseRow({ sr }) {
+  const entityEntries = Object.entries(sr.dataEntities);
+  return /* @__PURE__ */ jsxs("div", { className: "ml-4 pl-2 border-l border-purple-700/50 py-0.5 text-[10px] font-mono", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: sr.success ? "text-green-400" : "text-red-400", children: [
+        sr.success ? "\u2713" : "\u2717",
+        " server"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-purple-300", children: sr.orbitalName }),
+      sr.clientEffects > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-purple-900/50 text-purple-300", children: [
+        sr.clientEffects,
+        " clientEffect",
+        sr.clientEffects !== 1 ? "s" : ""
+      ] }),
+      sr.emittedEvents.length > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-blue-900/50 text-blue-300", children: [
+        "emit: ",
+        sr.emittedEvents.join(", ")
+      ] }),
+      sr.error && /* @__PURE__ */ jsx("span", { className: "px-1 rounded bg-red-900/50 text-red-400 truncate max-w-[300px]", children: sr.error })
+    ] }),
+    entityEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-0.5", children: entityEntries.map(([name, count]) => /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-gray-800 text-gray-300", children: [
+      name,
+      ": ",
+      count,
+      " row",
+      count !== 1 ? "s" : ""
+    ] }, name)) })
+  ] });
+}
+function TransitionRow({ trace }) {
+  const isServerEntry = !!trace.serverResponse && trace.traitName.startsWith("server:");
+  const hasFailedEffects = trace.effects.some((e) => e.status === "failed");
+  if (isServerEntry && trace.serverResponse) {
+    return /* @__PURE__ */ jsxs("div", { className: "py-0.5 border-b border-gray-800 last:border-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
+        /* @__PURE__ */ jsx("span", { className: "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-purple-500" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "warning", size: "sm", className: "flex-shrink-0", children: trace.event }),
+        /* @__PURE__ */ jsx("span", { className: "text-purple-400 flex-shrink-0", children: "server response" })
+      ] }),
+      /* @__PURE__ */ jsx(ServerResponseRow, { sr: trace.serverResponse })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "py-0.5 border-b border-gray-800 last:border-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
+      /* @__PURE__ */ jsx("span", { className: cn(
+        "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0",
+        hasFailedEffects ? "bg-red-500" : "bg-green-500"
+      ) }),
+      /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", className: "flex-shrink-0", children: trace.event }),
+      /* @__PURE__ */ jsx("span", { className: "text-gray-300 flex-shrink-0", children: trace.traitName }),
+      /* @__PURE__ */ jsxs("span", { className: "text-gray-400 flex-shrink-0", children: [
+        trace.from,
+        " ",
+        "\u2192",
+        " ",
+        trace.to
+      ] })
+    ] }),
+    trace.effects.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 ml-6 mt-0.5", children: trace.effects.map((eff, i) => /* @__PURE__ */ jsxs("span", { className: cn(
+      "px-1 rounded text-[10px]",
+      eff.status === "executed" ? "bg-green-900/50 text-green-400" : eff.status === "failed" ? "bg-red-900/50 text-red-400" : "bg-yellow-900/50 text-yellow-400"
+    ), children: [
+      eff.status === "executed" ? "\u2713" : eff.status === "failed" ? "\u2717" : "-",
+      " ",
+      eff.type,
+      eff.args.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-gray-500 ml-0.5", children: JSON.stringify(eff.args).slice(0, 40) })
+    ] }, i)) }),
+    trace.serverResponse && /* @__PURE__ */ jsx(ServerResponseRow, { sr: trace.serverResponse })
+  ] });
+}
+function VerifyModePanel({
+  className,
+  failedChecks,
+  transitions,
+  traitStates,
+  serverCount,
+  localCount
+}) {
+  const scrollRef = React117.useRef(null);
+  const prevCountRef = React117.useRef(0);
+  React117.useEffect(() => {
+    if (transitions.length > prevCountRef.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+    prevCountRef.current = transitions.length;
+  }, [transitions.length]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "runtime-debugger runtime-debugger--verify",
+        "fixed bottom-0 left-0 right-0 z-[9999] h-[35vh] flex flex-col bg-gray-900 text-white border-t-2 border-cyan-500",
+        className
+      ),
+      "data-testid": "debugger-verify",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 flex items-center gap-3 text-xs font-mono border-b border-gray-700 flex-shrink-0", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? `${failedChecks} fail` : "OK" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+            localCount,
+            " local"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "text-purple-400", children: [
+            serverCount,
+            " server"
+          ] }),
+          traitStates && /* @__PURE__ */ jsx("span", { className: "text-cyan-400 truncate max-w-[400px]", children: traitStates })
+        ] }),
+        /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: transitions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-gray-500 text-xs font-mono py-2 text-center", children: "Waiting for transitions..." }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: transitions.map((trace) => /* @__PURE__ */ jsx(TransitionRow, { trace }, trace.id)) }) }) })
+      ]
+    }
+  );
+}
 function RuntimeDebugger({
   position = "bottom-right",
   defaultCollapsed = true,
@@ -28053,51 +28196,17 @@ function RuntimeDebugger({
   }
   if (mode === "verify") {
     const traitStates = debugData.traits.map((t) => `${t.name}:${t.currentState}`).join(" | ");
-    return /* @__PURE__ */ jsxs(
-      "div",
+    const serverEntries = verification.transitions.filter((t) => t.serverResponse);
+    const localEntries = verification.transitions.filter((t) => !t.serverResponse);
+    return /* @__PURE__ */ jsx(
+      VerifyModePanel,
       {
-        className: cn(
-          "runtime-debugger runtime-debugger--verify",
-          "fixed bottom-0 left-0 right-0 z-[9999] h-[35vh] flex flex-col bg-gray-900 text-white border-t-2 border-cyan-500",
-          className
-        ),
-        "data-testid": "debugger-verify",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 flex items-center gap-3 text-xs font-mono border-b border-gray-700 flex-shrink-0", children: [
-            /* @__PURE__ */ jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? `${failedChecks} fail` : "OK" }),
-            /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
-              verification.transitions.length,
-              " transitions"
-            ] }),
-            traitStates && /* @__PURE__ */ jsx("span", { className: "text-cyan-400 truncate max-w-[400px]", children: traitStates })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: verification.transitions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-gray-500 text-xs font-mono py-2 text-center", children: "Waiting for transitions..." }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: verification.transitions.map((trace) => {
-            const hasFailedEffects = trace.effects.some((e) => e.status === "failed");
-            return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs font-mono py-0.5 border-b border-gray-800 last:border-0", children: [
-              /* @__PURE__ */ jsx("span", { className: cn(
-                "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0",
-                hasFailedEffects ? "bg-red-500" : "bg-green-500"
-              ) }),
-              /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", className: "flex-shrink-0", children: trace.event }),
-              /* @__PURE__ */ jsxs("span", { className: "text-gray-400 flex-shrink-0", children: [
-                trace.from,
-                " ",
-                "\u2192",
-                " ",
-                trace.to
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "flex flex-wrap gap-1 ml-1", children: trace.effects.map((eff, i) => /* @__PURE__ */ jsxs("span", { className: cn(
-                "px-1 rounded text-[10px]",
-                eff.status === "executed" ? "bg-green-900/50 text-green-400" : eff.status === "failed" ? "bg-red-900/50 text-red-400" : "bg-yellow-900/50 text-yellow-400"
-              ), children: [
-                eff.status === "executed" ? "\u2713" : eff.status === "failed" ? "\u2717" : "-",
-                " ",
-                eff.type,
-                eff.args.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-gray-500 ml-0.5", children: JSON.stringify(eff.args).slice(0, 30) })
-              ] }, i)) })
-            ] }, trace.id);
-          }) }) }) })
-        ]
+        className,
+        failedChecks,
+        transitions: verification.transitions,
+        traitStates,
+        serverCount: serverEntries.length,
+        localCount: localEntries.length
       }
     );
   }
@@ -32305,17 +32414,42 @@ function VerificationProvider({
         const pending = pendingRef.current.get(key);
         pendingRef.current.delete(key);
         const newState = payload["newState"] ?? payload["state"] ?? "unknown";
-        const effects = Array.isArray(payload["clientEffects"]) ? payload["clientEffects"].map((e) => ({
+        const clientEffectsArr = Array.isArray(payload["clientEffects"]) ? payload["clientEffects"] : [];
+        const effects = clientEffectsArr.map((e) => ({
           type: String(e["type"] ?? "unknown"),
           args: Array.isArray(e["args"]) ? e["args"] : [],
           status: "executed"
-        })) : [];
+        }));
+        const effectResults = Array.isArray(payload["effectResults"]) ? payload["effectResults"] : [];
+        for (const er of effectResults) {
+          effects.push({
+            type: String(er["type"] ?? er["effect"] ?? "server-effect"),
+            args: [er["entity"] ?? er["service"] ?? ""].filter(Boolean),
+            status: er["error"] ? "failed" : "executed",
+            error: er["error"]
+          });
+        }
+        const dataEntities = {};
+        const responseData = payload["data"];
+        if (responseData && typeof responseData === "object") {
+          for (const [entityName, records] of Object.entries(responseData)) {
+            dataEntities[entityName] = Array.isArray(records) ? records.length : 0;
+          }
+        }
         recordTransition({
           traitName: parsed.traitName,
           from: pending?.from ?? payload["currentState"] ?? newState,
           to: newState,
           event: parsed.event,
           effects,
+          serverResponse: {
+            orbitalName: parsed.traitName,
+            success: true,
+            clientEffects: clientEffectsArr.length,
+            dataEntities,
+            emittedEvents: [],
+            timestamp: Date.now()
+          },
           timestamp: Date.now()
         });
       } else if (parsed.kind === "error" && parsed.event) {
@@ -32336,6 +32470,15 @@ function VerificationProvider({
             status: "failed",
             error: errorMsg
           }],
+          serverResponse: {
+            orbitalName: parsed.traitName,
+            success: false,
+            clientEffects: 0,
+            dataEntities: {},
+            emittedEvents: [],
+            error: errorMsg,
+            timestamp: Date.now()
+          },
           timestamp: Date.now()
         });
       }
@@ -32456,7 +32599,8 @@ var ServerBridgeContext = createContext(null);
 function useServerBridge() {
   const ctx = useContext(ServerBridgeContext);
   if (!ctx) {
-    return { connected: false, sendEvent: async () => [] };
+    const emptyMeta = { success: false, clientEffects: 0, dataEntities: {}, emittedEvents: [] };
+    return { connected: false, sendEvent: async () => ({ effects: [], meta: emptyMeta }) };
   }
   return ctx;
 }
@@ -32488,7 +32632,8 @@ function ServerBridgeProvider({
     }
   }, [serverUrl]);
   const sendEvent = useCallback(async (orbitalName, event, payload) => {
-    if (!connected) return [];
+    const emptyMeta = { success: false, clientEffects: 0, dataEntities: {}, emittedEvents: [] };
+    if (!connected) return { effects: [], meta: emptyMeta };
     try {
       const res = await fetch(`${serverUrl}/${orbitalName}/events`, {
         method: "POST",
@@ -32497,8 +32642,19 @@ function ServerBridgeProvider({
       });
       const result = await res.json();
       const effects = [];
+      const responseData = result.data || {};
+      const dataEntities = {};
+      for (const [entityName, records] of Object.entries(responseData)) {
+        dataEntities[entityName] = Array.isArray(records) ? records.length : 0;
+      }
+      const meta = {
+        success: !!result.success,
+        clientEffects: result.clientEffects?.length ?? 0,
+        dataEntities,
+        emittedEvents: result.emittedEvents?.map((e) => e.event) ?? [],
+        error: result.error
+      };
       if (result.success) {
-        const responseData = result.data || {};
         if (result.clientEffects) {
           for (const effect of result.clientEffects) {
             const arr = effect;
@@ -32524,10 +32680,10 @@ function ServerBridgeProvider({
       } else if (result.error) {
         console.error("[ServerBridge] Event error:", result.error);
       }
-      return effects;
+      return { effects, meta };
     } catch (err) {
       console.error("[ServerBridge] Event send failed:", err);
-      return [];
+      return { effects: [], meta: { ...emptyMeta, error: err instanceof Error ? err.message : String(err) } };
     }
   }, [connected, serverUrl, eventBus]);
   useEffect(() => {
@@ -32588,7 +32744,8 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
   const onEventProcessed = useCallback(async (event, payload) => {
     if (!bridge.connected || !orbitalNames?.length) return;
     for (const name of orbitalNames) {
-      const effects = await bridge.sendEvent(name, event, payload);
+      const { effects, meta } = await bridge.sendEvent(name, event, payload);
+      recordServerResponse(name, event, meta);
       for (const eff of effects) {
         if (eff.type === "render-ui" && eff.slot && eff.pattern) {
           slotsActions.setSlotPatterns(
@@ -32622,7 +32779,8 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
     initSentRef.current = true;
     (async () => {
       for (const name of orbitalNames) {
-        const effects = await bridge.sendEvent(name, "INIT", {});
+        const { effects, meta } = await bridge.sendEvent(name, "INIT", {});
+        recordServerResponse(name, "INIT", meta);
         const effectTraces = [
           { type: "fetch", args: [], status: "executed" },
           ...effects.map((eff) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.27.5",
+  "version": "2.28.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",