@datalayer/core 1.1.45 → 1.1.46

package/lib/config/Configuration.d.ts

@@ -73,8 +73,26 @@ export type IDatalayerCoreConfig = {
     mcpServersUrl: string;
     /**
      * OTEL (OpenTelemetry) API URL.
+     *
+     * This is the endpoint runtimes/agents export telemetry to. In the browser
+     * it is also the default endpoint used to *consume* (query) telemetry, unless
+     * {@link otelInUrl} is provided.
      */
     otelUrl: string;
+    /**
+     * OTEL (OpenTelemetry) *consume* (read/query) API URL override.
+     *
+     * When set, the UI reads telemetry (metrics, traces, logs) from this URL
+     * instead of {@link otelUrl}. When empty/undefined, {@link otelUrl} is used.
+     *
+     * Primary use case: local development. When runtimes run in the cloud and
+     * export their telemetry to the production OTEL service, a local UI must fetch
+     * telemetry from production rather than from the local OTEL endpoint. Set this
+     * to e.g. `https://prod1.datalayer.run` while `otelUrl` stays local.
+     *
+     * Fed by the `DATALAYER_OTEL_IN_URL` environment variable at build/deploy time.
+     */
+    otelInUrl?: string;
     /**
      * Growth API URL.
      */

package/lib/otel/client/OtelClient.js

@@ -16,7 +16,7 @@
  * const { data: spans } = await client.fetchTraces({ limit: 50 });
  * ```
  */
-import { coreStore } from '../../state/substates/CoreState.js';
+import { getOtelConsumeUrl } from '../../state/substates/CoreState.js';
 import { resolveOtelAuth } from '../auth.js';
 // ── Fetch helper ────────────────────────────────────────────────────────────
 async function otelFetch(url, token, userUid, options) {
@@ -125,8 +125,7 @@ export class OtelClient {
     token;
     userUid;
     constructor(options) {
-        this.baseUrl =
-            options.baseUrl ?? coreStore.getState().configuration.otelUrl;
+        this.baseUrl = options.baseUrl ?? getOtelConsumeUrl();
         const auth = resolveOtelAuth(options.token, options.userUid);
         this.token = auth.token;
         this.userUid = auth.userUid;

package/lib/otel/hooks/index.js

@@ -8,7 +8,7 @@
  * @module otel/hooks
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { coreStore } from '../../state/substates/CoreState.js';
+import { getOtelConsumeUrl } from '../../state/substates/CoreState.js';
 import { buildOtelWebSocketUrl, resolveOtelAuth } from '../auth.js';
 // ── Global 401 handler ──────────────────────────────────────────────
 let _onUnauthorized = null;
@@ -189,7 +189,7 @@ function normalizeMetric(raw) {
 // ── useOtelTraces ───────────────────────────────────────────────────
 /** Fetch a list of traces / spans from the OTEL service. */
 export function useOtelTraces(options) {
-    const { token, baseUrl = coreStore.getState().configuration.otelUrl, serviceName, limit = 50, autoRefreshMs, } = options;
+    const { token, baseUrl = getOtelConsumeUrl(), serviceName, limit = 50, autoRefreshMs, } = options;
     const [traces, setTraces] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -246,7 +246,7 @@ export function useOtelTrace(options) {
 // ── useOtelLogs ─────────────────────────────────────────────────────
 /** Fetch log records from the OTEL service. */
 export function useOtelLogs(options) {
-    const { token, baseUrl = coreStore.getState().configuration.otelUrl, serviceName, severity, traceId, limit = 100, autoRefreshMs, } = options;
+    const { token, baseUrl = getOtelConsumeUrl(), serviceName, severity, traceId, limit = 100, autoRefreshMs, } = options;
     const [logs, setLogs] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -283,7 +283,7 @@ export function useOtelLogs(options) {
 // ── useOtelMetrics ──────────────────────────────────────────────────
 /** Fetch metrics from the OTEL service. */
 export function useOtelMetrics(options) {
-    const { token, baseUrl = coreStore.getState().configuration.otelUrl, serviceName, metricName, limit = 50, autoRefreshMs, } = options;
+    const { token, baseUrl = getOtelConsumeUrl(), serviceName, metricName, limit = 50, autoRefreshMs, } = options;
     const [metrics, setMetrics] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -318,7 +318,7 @@ export function useOtelMetrics(options) {
 // ── useOtelServices ─────────────────────────────────────────────────
 /** Fetch list of observed service names. */
 export function useOtelServices(options) {
-    const { token, baseUrl = coreStore.getState().configuration.otelUrl } = options;
+    const { token, baseUrl = getOtelConsumeUrl() } = options;
     const [services, setServices] = useState([]);
     const [loading, setLoading] = useState(true);
     useEffect(() => {
@@ -437,7 +437,7 @@ export function useOtelQuery(options) {
  * @returns `{ connected, error, close }` – reactive connection state.
  */
 export function useOtelWebSocket(options) {
-    const { baseUrl = coreStore.getState().configuration.otelUrl, token, userUid, autoReconnect = true, reconnectDelayMs = 3000, callbacks, } = options;
+    const { baseUrl = getOtelConsumeUrl(), token, userUid, autoReconnect = true, reconnectDelayMs = 3000, callbacks, } = options;
     const [connected, setConnected] = useState(false);
     const [error, setError] = useState(null);
     const wsRef = useRef(null);

package/lib/otel/views/OtelLive.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useCallback, useMemo, useEffect, useRef, } from 'react';
 import { Box, Text, Button, Label } from '@primer/react';
 import { GitBranchIcon, ClockIcon } from '@primer/octicons-react';
-import { coreStore } from '../../state/substates/CoreState.js';
+import { getOtelConsumeUrl } from '../../state/substates/CoreState.js';
 import { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelWebSocket, } from '../hooks/index.js';
 import { OtelSearchBar } from './OtelSearchBar.js';
 import { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider.js';
@@ -51,7 +51,7 @@ function buildHistogram(timestamps, start, end, buckets) {
     }));
 }
 // ── OtelLive ────────────────────────────────────────────────────────
-export const OtelLive = ({ baseUrl = coreStore.getState().configuration.otelUrl, wsBaseUrl, token, autoRefreshMs = 5000, defaultSignal = 'traces', limit = 200, onSignalRef, }) => {
+export const OtelLive = ({ baseUrl = getOtelConsumeUrl(), wsBaseUrl, token, autoRefreshMs = 5000, defaultSignal = 'traces', limit = 200, onSignalRef, }) => {
     // ── state ──
     const [signal, setSignalState] = useState(() => {
         try {

package/lib/state/substates/CoreState.d.ts

@@ -22,4 +22,15 @@ export type DatalayerCoreState = {
 export declare const coreStore: import("zustand").StoreApi<DatalayerCoreState>;
 export declare function useCoreStore(): DatalayerCoreState;
 export declare function useCoreStore<T>(selector: (state: DatalayerCoreState) => T): T;
+/**
+ * Resolve the OTEL base URL used to *consume* (read/query) telemetry.
+ *
+ * Prefers `otelInUrl` when set, otherwise falls back to `otelUrl`. This allows
+ * local development to fetch telemetry from a remote (e.g. production) OTEL
+ * service even when the local runtime exports telemetry to a different endpoint.
+ *
+ * Mirrors the `DATALAYER_OTEL_IN_URL` (consume) / `DATALAYER_OTEL_URL` (export)
+ * split on the backend/build side.
+ */
+export declare const getOtelConsumeUrl: () => string;
 export default useCoreStore;

package/lib/state/substates/CoreState.js

@@ -24,6 +24,10 @@ let initialConfiguration = {
     aiInferenceUrl: 'https://prod1.datalayer.run',
     mcpServersUrl: 'https://prod1.datalayer.run',
     otelUrl: 'https://prod1.datalayer.run',
+    // Defaults to prod so telemetry is consumed from the production OTEL service
+    // even when runtimes export elsewhere (see `getOtelConsumeUrl` and the
+    // `DATALAYER_OTEL_IN_URL` env var). Override to '' to consume from `otelUrl`.
+    otelInUrl: 'https://prod1.datalayer.run',
     growthUrl: 'https://prod1.datalayer.run',
     inboundsUrl: 'https://prod1.datalayer.run',
     successUrl: 'https://prod1.datalayer.run',
@@ -97,4 +101,18 @@ export const coreStore = createStore((set, get) => ({
 export function useCoreStore(selector) {
     return useStore(coreStore, selector);
 }
+/**
+ * Resolve the OTEL base URL used to *consume* (read/query) telemetry.
+ *
+ * Prefers `otelInUrl` when set, otherwise falls back to `otelUrl`. This allows
+ * local development to fetch telemetry from a remote (e.g. production) OTEL
+ * service even when the local runtime exports telemetry to a different endpoint.
+ *
+ * Mirrors the `DATALAYER_OTEL_IN_URL` (consume) / `DATALAYER_OTEL_URL` (export)
+ * split on the backend/build side.
+ */
+export const getOtelConsumeUrl = () => {
+    const cfg = coreStore.getState().configuration;
+    return cfg.otelInUrl || cfg.otelUrl;
+};
 export default useCoreStore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.1.45",
+  "version": "1.1.46",
   "type": "module",
   "workspaces": [
     ".",