@datalayer/core 1.0.3 → 1.0.12

package/lib/otel/client/OtelClient.js

@@ -0,0 +1,232 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelClient – Typed HTTP client for the Datalayer OTEL service.
+ *
+ * Reads the OTEL service URL from the Datalayer core configuration by default,
+ * so callers don't need to pass `baseUrl` unless they want to override it.
+ *
+ * @example
+ * ```ts
+ * import { createOtelClient } from '@datalayer/core/otel';
+ *
+ * const client = createOtelClient({ token: myJwt });
+ * const { data: spans } = await client.fetchTraces({ limit: 50 });
+ * ```
+ */
+import { coreStore } from '../../state/substates/CoreState';
+// ── Fetch helper ────────────────────────────────────────────────────────────
+async function otelFetch(url, token, options) {
+    const headers = {
+        Accept: 'application/json',
+        'Cache-Control': 'no-store, no-cache, must-revalidate',
+    };
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+    if (options?.body) {
+        headers['Content-Type'] = 'application/json';
+    }
+    const resp = await fetch(url, {
+        method: options?.method ?? 'GET',
+        headers,
+        body: options?.body != null ? JSON.stringify(options.body) : undefined,
+    });
+    if (!resp.ok) {
+        const text = await resp.text().catch(() => '');
+        throw new Error(`OTEL API error ${resp.status}: ${text}`);
+    }
+    return resp.json();
+}
+function parseMetricValue(raw) {
+    const candidates = [raw.value, raw.value_double, raw.value_int];
+    for (const candidate of candidates) {
+        if (typeof candidate === 'number' && Number.isFinite(candidate)) {
+            return candidate;
+        }
+        if (typeof candidate === 'string') {
+            const parsed = Number(candidate);
+            if (Number.isFinite(parsed)) {
+                return parsed;
+            }
+        }
+    }
+    return 0;
+}
+function parseMetricTimestamp(raw) {
+    const candidate = raw.timestamp ??
+        raw.Timestamp ??
+        raw.timestamp_unix_nano ??
+        raw.start_time_unix_nano;
+    if (typeof candidate === 'string' && candidate.trim().length > 0) {
+        return candidate;
+    }
+    const numeric = Number(candidate);
+    if (!Number.isFinite(numeric)) {
+        return '';
+    }
+    if (numeric > 1e15) {
+        return new Date(numeric / 1e6).toISOString();
+    }
+    if (numeric > 1e12) {
+        return new Date(numeric / 1e3).toISOString();
+    }
+    return new Date(numeric).toISOString();
+}
+function normalizeMetric(raw) {
+    return {
+        metric_name: String(raw.metric_name ?? raw.MetricName ?? raw.name ?? raw.Name ?? ''),
+        service_name: String(raw.service_name ?? raw.ServiceName ?? ''),
+        value: parseMetricValue(raw),
+        unit: raw.metric_unit != null
+            ? String(raw.metric_unit)
+            : raw.MetricUnit != null
+                ? String(raw.MetricUnit)
+                : raw.unit != null
+                    ? String(raw.unit)
+                    : raw.Unit != null
+                        ? String(raw.Unit)
+                        : undefined,
+        timestamp: parseMetricTimestamp(raw),
+        metric_type: raw.metric_type != null
+            ? String(raw.metric_type)
+            : raw.MetricType != null
+                ? String(raw.MetricType)
+                : undefined,
+        attributes: typeof raw.attributes === 'object' && raw.attributes !== null
+            ? raw.attributes
+            : undefined,
+    };
+}
+// ── OtelClient class ─────────────────────────────────────────────────────────
+/**
+ * Typed HTTP client for all OTEL service endpoints.
+ *
+ * Construct via `createOtelClient()` or `new OtelClient(options)`.
+ */
+export class OtelClient {
+    baseUrl;
+    token;
+    constructor(options = {}) {
+        this.baseUrl =
+            options.baseUrl ?? coreStore.getState().configuration.otelRunUrl;
+        this.token = options.token;
+    }
+    // ── Traces ────────────────────────────────────────────────────────────────
+    /** List recent spans / traces. */
+    async fetchTraces(options = {}) {
+        const params = new URLSearchParams({ limit: String(options.limit ?? 50) });
+        if (options.serviceName)
+            params.set('service_name', options.serviceName);
+        const resp = await otelFetch(`${this.baseUrl}/api/otel/v1/traces/?${params}`, this.token);
+        const rows = (Array.isArray(resp) ? resp : resp.data) ?? [];
+        return { data: rows, count: rows.length };
+    }
+    /** Fetch all spans for a single trace by `traceId`. */
+    async fetchTrace(traceId) {
+        const resp = await otelFetch(`${this.baseUrl}/api/otel/v1/traces/${traceId}`, this.token);
+        const rows = (Array.isArray(resp) ? resp : resp.data) ?? [];
+        return { data: rows };
+    }
+    // ── Logs ──────────────────────────────────────────────────────────────────
+    /** List recent log records. */
+    async fetchLogs(options = {}) {
+        const params = new URLSearchParams({ limit: String(options.limit ?? 100) });
+        if (options.serviceName)
+            params.set('service_name', options.serviceName);
+        if (options.severity)
+            params.set('severity', options.severity);
+        if (options.traceId)
+            params.set('trace_id', options.traceId);
+        const resp = await otelFetch(`${this.baseUrl}/api/otel/v1/logs/?${params}`, this.token);
+        const rows = (Array.isArray(resp) ? resp : resp.data) ?? [];
+        return { data: rows, count: rows.length };
+    }
+    // ── Metrics ───────────────────────────────────────────────────────────────
+    /** List recent metric data points. */
+    async fetchMetrics(options = {}) {
+        const params = new URLSearchParams({ limit: String(options.limit ?? 50) });
+        if (options.serviceName)
+            params.set('service_name', options.serviceName);
+        if (options.metricName)
+            params.set('metric_name', options.metricName);
+        const resp = await otelFetch(`${this.baseUrl}/api/otel/v1/metrics/?${params}`, this.token);
+        const rows = (Array.isArray(resp) ? resp : resp.data) ?? [];
+        const normalized = Array.isArray(rows)
+            ? rows.map(row => normalizeMetric(row))
+            : [];
+        return { data: normalized, count: normalized.length };
+    }
+    /** Sum all values for one metric name, with optional service filter. */
+    async fetchMetricTotal(metricName, options = {}) {
+        const { serviceName, limit = 500, fallbackWithoutService = true } = options;
+        const filtered = await this.fetchMetrics({
+            metricName,
+            serviceName,
+            limit,
+        });
+        const filteredTotal = filtered.data.reduce((sum, row) => sum + Number(row.value || 0), 0);
+        if (filteredTotal > 0 || !serviceName || !fallbackWithoutService) {
+            return filteredTotal;
+        }
+        const unfiltered = await this.fetchMetrics({ metricName, limit });
+        return unfiltered.data.reduce((sum, row) => sum + Number(row.value || 0), 0);
+    }
+    // ── Services ──────────────────────────────────────────────────────────────
+    /** List known service names observed in traces. */
+    async fetchServices() {
+        const resp = await otelFetch(`${this.baseUrl}/api/otel/v1/traces/services/list`, this.token);
+        if (Array.isArray(resp))
+            return resp;
+        const byServices = resp.services;
+        if (Array.isArray(byServices))
+            return byServices;
+        const byData = resp.data;
+        if (Array.isArray(byData)) {
+            return byData.map((r) => String(r.service_name ?? r.name ?? ''));
+        }
+        return [];
+    }
+    // ── Stats ─────────────────────────────────────────────────────────────────
+    /** Fetch storage / ingestion statistics. */
+    async fetchStats() {
+        return otelFetch(`${this.baseUrl}/api/otel/v1/stats/`, this.token);
+    }
+    // ── SQL query ─────────────────────────────────────────────────────────────
+    /**
+     * Execute an ad-hoc DataFusion SQL query against the OTEL service.
+     *
+     * Available tables: `spans`, `logs`, `metrics`.
+     */
+    async executeQuery(sql) {
+        return otelFetch(`${this.baseUrl}/api/otel/v1/query/`, this.token, { method: 'POST', body: { sql } });
+    }
+    // ── System ────────────────────────────────────────────────────────────────
+    /**
+     * Fetch system statistics (platform_admin only).
+     *
+     * Returns process memory/CPU, disk usage, and per-table row counts.
+     */
+    async fetchSystem() {
+        const resp = await otelFetch(`${this.baseUrl}/api/otel/v1/system/`, this.token);
+        return (resp.data ?? resp);
+    }
+}
+// ── Factory ──────────────────────────────────────────────────────────────────
+/**
+ * Create a new `OtelClient`.
+ *
+ * The `baseUrl` defaults to `configuration.otelRunUrl` from the Datalayer core
+ * configuration store, so only pass it when you want to override the default.
+ *
+ * @example
+ * ```ts
+ * const client = createOtelClient({ token: jwt });
+ * const services = await client.fetchServices();
+ * ```
+ */
+export function createOtelClient(options = {}) {
+    return new OtelClient(options);
+}

package/lib/otel/client/index.d.ts

@@ -0,0 +1,2 @@
+export { OtelClient, createOtelClient } from './OtelClient';
+export type { OtelClientOptions, FetchTracesOptions, FetchLogsOptions, FetchMetricsOptions, FetchMetricTotalOptions, OtelSystemData, OtelSystemProcess, OtelSystemDisk, OtelSystemTable, } from './OtelClient';

package/lib/otel/client/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export { OtelClient, createOtelClient } from './OtelClient';

package/lib/otel/{hooks.d.ts → hooks/index.d.ts}

@@ -1,4 +1,18 @@
-import type { OtelSpan, OtelLog, OtelMetric, OtelQueryRow } from './types';
+import type { OtelSpan, OtelLog, OtelMetric, OtelQueryRow } from '../types';
+/**
+ * Register a callback invoked whenever an OTEL API call receives a
+ * **401 Unauthorized** response.  Typically used to clear auth state
+ * (i.e. log the user out) when the token has expired.
+ *
+ * Pass `null` to unregister.
+ *
+ * @example
+ * ```ts
+ * import { setOtelOnUnauthorized } from '@datalayer/core/lib/otel';
+ * setOtelOnUnauthorized(() => authStore.getState().clearAuth());
+ * ```
+ */
+export declare function setOtelOnUnauthorized(cb: (() => void) | null): void;
 /** Fetch a list of traces / spans from the OTEL service. */
 export declare function useOtelTraces(options: {
     token?: string;

package/lib/otel/{hooks.js → hooks/index.js}

@@ -8,9 +8,32 @@
  * @module otel/hooks
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { coreStore } from '../../state/substates/CoreState';
+// ── Global 401 handler ──────────────────────────────────────────────
+let _onUnauthorized = null;
+/**
+ * Register a callback invoked whenever an OTEL API call receives a
+ * **401 Unauthorized** response.  Typically used to clear auth state
+ * (i.e. log the user out) when the token has expired.
+ *
+ * Pass `null` to unregister.
+ *
+ * @example
+ * ```ts
+ * import { setOtelOnUnauthorized } from '@datalayer/core/lib/otel';
+ * setOtelOnUnauthorized(() => authStore.getState().clearAuth());
+ * ```
+ */
+export function setOtelOnUnauthorized(cb) {
+    _onUnauthorized = cb;
+}
 /**
  * Lightweight fetch helper for OTEL API calls.
  * Uses plain `fetch` to avoid pulling in `@jupyterlab/coreutils` / axios.
+ *
+ * If the response is **401 Unauthorized** and a global `onUnauthorized`
+ * handler has been registered via {@link setOtelOnUnauthorized}, the
+ * handler is called before the error is thrown.
  */
 async function otelFetch(url, token, options) {
     const headers = {
@@ -33,6 +56,9 @@ async function otelFetch(url, token, options) {
             : undefined,
     });
     if (!res.ok) {
+        if (res.status === 401 && _onUnauthorized) {
+            _onUnauthorized();
+        }
         throw new Error(`HTTP ${res.status} ${res.statusText}`);
     }
     return res.json();
@@ -162,7 +188,7 @@ function normalizeMetric(raw) {
 // ── useOtelTraces ───────────────────────────────────────────────────
 /** Fetch a list of traces / spans from the OTEL service. */
 export function useOtelTraces(options) {
-    const { token, baseUrl = '', serviceName, limit = 50, autoRefreshMs, } = options;
+    const { token, baseUrl = coreStore.getState().configuration.otelRunUrl, serviceName, limit = 50, autoRefreshMs, } = options;
     const [traces, setTraces] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -219,7 +245,7 @@ export function useOtelTrace(options) {
 // ── useOtelLogs ─────────────────────────────────────────────────────
 /** Fetch log records from the OTEL service. */
 export function useOtelLogs(options) {
-    const { token, baseUrl = '', serviceName, severity, traceId, limit = 100, autoRefreshMs, } = options;
+    const { token, baseUrl = coreStore.getState().configuration.otelRunUrl, serviceName, severity, traceId, limit = 100, autoRefreshMs, } = options;
     const [logs, setLogs] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -256,7 +282,7 @@ export function useOtelLogs(options) {
 // ── useOtelMetrics ──────────────────────────────────────────────────
 /** Fetch metrics from the OTEL service. */
 export function useOtelMetrics(options) {
-    const { token, baseUrl = '', serviceName, metricName, limit = 50, autoRefreshMs, } = options;
+    const { token, baseUrl = coreStore.getState().configuration.otelRunUrl, serviceName, metricName, limit = 50, autoRefreshMs, } = options;
     const [metrics, setMetrics] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -291,22 +317,38 @@ export function useOtelMetrics(options) {
 // ── useOtelServices ─────────────────────────────────────────────────
 /** Fetch list of observed service names. */
 export function useOtelServices(options) {
-    const { token, baseUrl = '' } = options;
+    const { token, baseUrl = coreStore.getState().configuration.otelRunUrl } = options;
     const [services, setServices] = useState([]);
     const [loading, setLoading] = useState(true);
     useEffect(() => {
-        otelFetch(`${baseUrl}/api/otel/v1/traces/services/list`, token)
+        otelFetch(`${baseUrl}/api/otel/v1/traces/services/list/`, token)
             .then(data => {
-            // Handle various response shapes:
-            // { services: ["a","b"] } | { data: [{service_name:"a"},...] } | ["a","b"]
-            let raw = data.services ?? data.data ?? data;
-            if (Array.isArray(raw) &&
-                raw.length > 0 &&
-                typeof raw[0] === 'object' &&
-                raw[0] !== null) {
-                raw = raw.map(r => (r.service_name ?? r.name ?? ''));
-            }
-            setServices(Array.isArray(raw) ? raw : []);
+            // Accept multiple backend response shapes and normalize to unique names.
+            // Examples:
+            // { services: ["a","b"] }
+            // { data: [{ service_name: "a" }] }
+            // { data: [{ service: "a" }] }
+            // ["a", "b"]
+            // [{ serviceName: "a" }]
+            const raw = data.services ?? data.data ?? data;
+            const rows = Array.isArray(raw) ? raw : [];
+            const names = rows
+                .map(row => {
+                if (typeof row === 'string') {
+                    return row.trim();
+                }
+                if (row && typeof row === 'object') {
+                    const record = row;
+                    const value = record.service_name ??
+                        record.serviceName ??
+                        record.service ??
+                        record.name;
+                    return value == null ? '' : String(value).trim();
+                }
+                return '';
+            })
+                .filter(Boolean);
+            setServices(Array.from(new Set(names)).sort((a, b) => a.localeCompare(b)));
         })
             .catch(() => { })
             .finally(() => setLoading(false));
@@ -394,7 +436,7 @@ export function useOtelQuery(options) {
  * @returns `{ connected, error, close }` – reactive connection state.
  */
 export function useOtelWebSocket(options) {
-    const { baseUrl = '', token, autoReconnect = true, reconnectDelayMs = 3000, callbacks, } = options;
+    const { baseUrl = coreStore.getState().configuration.otelRunUrl, token, autoReconnect = true, reconnectDelayMs = 3000, callbacks, } = options;
     const [connected, setConnected] = useState(false);
     const [error, setError] = useState(null);
     const wsRef = useRef(null);

package/lib/otel/index.d.ts

@@ -1,25 +1,34 @@
 /**
- * OTEL React components for visualizing OpenTelemetry signals
- * (traces, logs, metrics) in a Logfire-inspired Live view.
+ * OTEL React components, hooks, and client for visualizing OpenTelemetry
+ * signals (traces, logs, metrics) in a Logfire-inspired Live view.
+ *
+ * Structure:
+ *  - `types`  – shared TypeScript types
+ *  - `utils`  – pure helpers (formatDuration, buildSpanTree, …)
+ *  - `hooks/` – React hooks that read from Datalayer config by default
+ *  - `client/`– Typed HTTP client (non-React, reads Datalayer config by default)
+ *  - `views/` – React view components
  *
  * @module otel
  */
 export type { OtelSpan, OtelLog, OtelMetric, OtelSpanEvent, OtelSpanLink, SignalType, OtelLiveProps, OtelTracesListProps, OtelSpanDetailProps, OtelTimelineProps, OtelLogsListProps, OtelMetricsListProps, OtelSpanTreeProps, OtelSearchBarProps, OtelTimelineRangeSliderProps, OtelQueryRow, OtelQueryResult, } from './types';
-export { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelStats, useOtelQuery, useOtelSystem, useOtelWebSocket, } from './hooks';
-export type { OtelWsMessage, OtelWsCallbacks } from './hooks';
-export { OtelTimeline } from './OtelTimeline';
-export { OtelTracesList } from './OtelTracesList';
-export { OtelSpanDetail } from './OtelSpanDetail';
-export { OtelSpanTree } from './OtelSpanTree';
-export { OtelLogsList } from './OtelLogsList';
-export { OtelSearchBar } from './OtelSearchBar';
-export { OtelMetricsList } from './OtelMetricsList';
-export { OtelMetricsChart } from './OtelMetricsChart';
-export type { OtelMetricsChartProps } from './OtelMetricsChart';
-export { OtelLive } from './OtelLive';
-export { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
-export { OtelSqlView } from './OtelSqlView';
-export type { OtelSqlViewProps } from './OtelSqlView';
-export { OtelSystemView } from './OtelSystemView';
-export type { OtelSystemViewProps } from './OtelSystemView';
-export type { OtelSystemData, OtelSystemProcess, OtelSystemDisk, OtelSystemTable, } from './hooks';
+export { toMs, formatDuration, formatTime, serviceColor, kindColor, severityColor, severityVariant, buildSpanTree, flattenSpanTree, } from './utils';
+export { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelStats, useOtelQuery, useOtelSystem, useOtelWebSocket, setOtelOnUnauthorized, } from './hooks';
+export type { OtelWsMessage, OtelWsCallbacks, OtelSystemData, OtelSystemProcess, OtelSystemDisk, OtelSystemTable, } from './hooks';
+export { OtelClient, createOtelClient } from './client';
+export type { OtelClientOptions, FetchTracesOptions, FetchLogsOptions, FetchMetricsOptions, FetchMetricTotalOptions, } from './client';
+export { OtelLive } from './views';
+export { OtelTracesList } from './views';
+export { OtelSpanDetail } from './views';
+export { OtelSpanTree } from './views';
+export { OtelLogsList } from './views';
+export { OtelSearchBar } from './views';
+export { OtelMetricsList } from './views';
+export { OtelMetricsChart } from './views';
+export type { OtelMetricsChartProps } from './views';
+export { OtelTimeline } from './views';
+export { OtelTimelineRangeSlider } from './views';
+export { OtelSqlView } from './views';
+export type { OtelSqlViewProps } from './views';
+export { OtelSystemView } from './views';
+export type { OtelSystemViewProps } from './views';

package/lib/otel/index.js

@@ -2,18 +2,22 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-// Hooks
-export { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelStats, useOtelQuery, useOtelSystem, useOtelWebSocket, } from './hooks';
-// Components
-export { OtelTimeline } from './OtelTimeline';
-export { OtelTracesList } from './OtelTracesList';
-export { OtelSpanDetail } from './OtelSpanDetail';
-export { OtelSpanTree } from './OtelSpanTree';
-export { OtelLogsList } from './OtelLogsList';
-export { OtelSearchBar } from './OtelSearchBar';
-export { OtelMetricsList } from './OtelMetricsList';
-export { OtelMetricsChart } from './OtelMetricsChart';
-export { OtelLive } from './OtelLive';
-export { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
-export { OtelSqlView } from './OtelSqlView';
-export { OtelSystemView } from './OtelSystemView';
+// ── Utils ─────────────────────────────────────────────────────────────────────
+export { toMs, formatDuration, formatTime, serviceColor, kindColor, severityColor, severityVariant, buildSpanTree, flattenSpanTree, } from './utils';
+// ── Hooks ─────────────────────────────────────────────────────────────────────
+export { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelStats, useOtelQuery, useOtelSystem, useOtelWebSocket, setOtelOnUnauthorized, } from './hooks';
+// ── Client ────────────────────────────────────────────────────────────────────
+export { OtelClient, createOtelClient } from './client';
+// ── Views ─────────────────────────────────────────────────────────────────────
+export { OtelLive } from './views';
+export { OtelTracesList } from './views';
+export { OtelSpanDetail } from './views';
+export { OtelSpanTree } from './views';
+export { OtelLogsList } from './views';
+export { OtelSearchBar } from './views';
+export { OtelMetricsList } from './views';
+export { OtelMetricsChart } from './views';
+export { OtelTimeline } from './views';
+export { OtelTimelineRangeSlider } from './views';
+export { OtelSqlView } from './views';
+export { OtelSystemView } from './views';

package/lib/otel/{OtelLive.d.ts → views/OtelLive.d.ts}

@@ -8,5 +8,5 @@
  * @module otel/OtelLive
  */
 import React from 'react';
-import type { OtelLiveProps } from './types';
+import type { OtelLiveProps } from '../types';
 export declare const OtelLive: React.FC<OtelLiveProps>;

package/lib/otel/{OtelLive.js → views/OtelLive.js}

@@ -15,8 +15,8 @@ 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';
-import { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelWebSocket, } from './hooks';
+import { coreStore } from '../../state/substates/CoreState';
+import { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelWebSocket, } from '../hooks';
 import { OtelSearchBar } from './OtelSearchBar';
 import { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
 import { OtelTracesList } from './OtelTracesList';
@@ -25,7 +25,7 @@ import { OtelMetricsList } from './OtelMetricsList';
 import { OtelSpanDetail } from './OtelSpanDetail';
 import { OtelTimeline } from './OtelTimeline';
 import { OtelSpanTree } from './OtelSpanTree';
-import { buildSpanTree } from './utils';
+import { buildSpanTree } from '../utils';
 // ── Helpers ─────────────────────────────────────────────────────────
 const BOTTOM_PANE_VIEWS = ['timeline', 'tree'];
 const HISTOGRAM_BUCKETS = 60;
@@ -116,6 +116,24 @@ export const OtelLive = ({ baseUrl = coreStore.getState().configuration.otelRunU
         autoRefreshMs,
     });
     const { services } = useOtelServices({ baseUrl, token });
+    const effectiveServices = useMemo(() => {
+        const fromApi = (services ?? []).map(s => s.trim()).filter(Boolean);
+        const fromTraces = (traces ?? [])
+            .map(s => (s.service_name ?? '').trim())
+            .filter(Boolean);
+        const fromLogs = (logs ?? [])
+            .map(l => (l.service_name ?? '').trim())
+            .filter(Boolean);
+        const fromMetrics = (metrics ?? [])
+            .map(m => (m.service_name ?? '').trim())
+            .filter(Boolean);
+        const fromSignal = signal === 'traces'
+            ? fromTraces
+            : signal === 'logs'
+                ? fromLogs
+                : fromMetrics;
+        return Array.from(new Set([...fromApi, ...fromSignal])).sort((a, b) => a.localeCompare(b));
+    }, [services, traces, logs, metrics, signal]);
     // ── WebSocket live updates ──
     // When a WS message arrives for a signal, refetch the corresponding hook
     // so the data stays fresh without polling.
@@ -281,7 +299,7 @@ export const OtelLive = ({ baseUrl = coreStore.getState().configuration.otelRunU
             borderColor: 'border.default',
             borderRadius: 2,
             overflow: 'hidden',
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0 }, children: [_jsx(Box, { sx: { flex: 1 }, children: _jsx(OtelSearchBar, { signal: signal, onSignalChange: setSignal, services: services ?? [], selectedService: service, onServiceChange: setService, query: query, onQueryChange: setQuery, onRefresh: handleRefresh, loading: signal === 'traces'
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0 }, children: [_jsx(Box, { sx: { flex: 1 }, children: _jsx(OtelSearchBar, { signal: signal, onSignalChange: setSignal, services: effectiveServices, selectedService: service, onServiceChange: setService, query: query, onQueryChange: setQuery, onRefresh: handleRefresh, loading: signal === 'traces'
                                 ? tracesLoading
                                 : signal === 'logs'
                                     ? logsLoading

package/lib/otel/{OtelLogsList.d.ts → views/OtelLogsList.d.ts}

@@ -7,5 +7,5 @@
  * @module otel/OtelLogsList
  */
 import React from 'react';
-import type { OtelLogsListProps } from './types';
+import type { OtelLogsListProps } from '../types';
 export declare const OtelLogsList: React.FC<OtelLogsListProps>;

package/lib/otel/{OtelLogsList.js → views/OtelLogsList.js}

@@ -15,7 +15,7 @@ import React, { useState } from 'react';
 import { Box, Text, Label, Spinner } from '@primer/react';
 import { Blankslate } from '@primer/react/experimental';
 import { LogIcon } from '@primer/octicons-react';
-import { formatTime, severityVariant } from './utils';
+import { formatTime, severityVariant } from '../utils';
 // ── helpers ─────────────────────────────────────────────────────────
 /** Severity badge using Primer Label, centered in its grid cell. */
 const Severity = ({ text }) => (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Label, { size: "small", variant: severityVariant(text), children: text }) }));

package/lib/otel/{OtelMetricsChart.d.ts → views/OtelMetricsChart.d.ts}

@@ -12,7 +12,7 @@
  * @module otel/OtelMetricsChart
  */
 import React from 'react';
-import type { OtelMetric } from './types';
+import type { OtelMetric } from '../types';
 export interface OtelMetricsChartProps {
     metrics: OtelMetric[];
     /** Height per chart panel in px. Default 240. */

package/lib/otel/{OtelMetricsList.d.ts → views/OtelMetricsList.d.ts}

@@ -7,7 +7,7 @@
  * @module otel/OtelMetricsList
  */
 import React from 'react';
-import type { OtelMetric } from './types';
+import type { OtelMetric } from '../types';
 export interface OtelMetricsListProps {
     metrics: OtelMetric[];
     loading?: boolean;

package/lib/otel/{OtelMetricsList.js → views/OtelMetricsList.js}

@@ -15,7 +15,7 @@ import { useMemo, useState } from 'react';
 import { Box, Text, Label, Spinner, CounterLabel, SegmentedControl, } from '@primer/react';
 import { Blankslate } from '@primer/react/experimental';
 import { MeterIcon, ChevronDownIcon, ChevronRightIcon, GraphIcon, TableIcon, } from '@primer/octicons-react';
-import { formatTime } from './utils';
+import { formatTime } from '../utils';
 import { OtelMetricsChart } from './OtelMetricsChart';
 // ── Helpers ─────────────────────────────────────────────────────────
 /** Group metrics by metric_name. */

package/lib/otel/{OtelSearchBar.d.ts → views/OtelSearchBar.d.ts}

@@ -7,5 +7,5 @@
  * @module otel/OtelSearchBar
  */
 import React from 'react';
-import type { OtelSearchBarProps } from './types';
+import type { OtelSearchBarProps } from '../types';
 export declare const OtelSearchBar: React.FC<OtelSearchBarProps>;

package/lib/otel/{OtelSpanDetail.d.ts → views/OtelSpanDetail.d.ts}

@@ -7,5 +7,5 @@
  * @module otel/OtelSpanDetail
  */
 import React from 'react';
-import type { OtelSpanDetailProps } from './types';
+import type { OtelSpanDetailProps } from '../types';
 export declare const OtelSpanDetail: React.FC<OtelSpanDetailProps>;

package/lib/otel/{OtelSpanDetail.js → views/OtelSpanDetail.js}

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, IconButton, UnderlineNav, CounterLabel, Label, } from '@primer/react';
 import { XIcon, ChevronDownIcon, ChevronRightIcon, } from '@primer/octicons-react';
-import { formatDuration, buildSpanTree } from './utils';
+import { formatDuration, buildSpanTree } from '../utils';
 import { OtelSpanTree } from './OtelSpanTree';
 // ── Helpers ─────────────────────────────────────────────────────────
 /** Single key–value metadata row. */

package/lib/otel/{OtelSpanTree.d.ts → views/OtelSpanTree.d.ts}

@@ -7,5 +7,5 @@
  * @module otel/OtelSpanTree
  */
 import React from 'react';
-import type { OtelSpanTreeProps } from './types';
+import type { OtelSpanTreeProps } from '../types';
 export declare const OtelSpanTree: React.FC<OtelSpanTreeProps>;