@datalayer/core 1.0.2 → 1.0.3

package/lib/hooks/useCache.d.ts

@@ -45,6 +45,18 @@ export type ISearchOpts = {
     max: number;
     public: boolean;
 };
+/** Request payload for creating a new agent runtime. */
+export type CreateAgentRuntimeRequest = {
+    environmentName?: string;
+    givenName?: string;
+    creditsLimit?: number;
+    type?: string;
+    /** 'none', 'notebook', or 'document' */
+    editorVariant?: string;
+    enableCodemode?: boolean;
+    /** ID of the agent spec used to create this runtime */
+    agentSpecId?: string;
+};
 /**
  * Centralized query key factories for all entities
  * Following TanStack Query best practices for key structure
@@ -520,15 +532,7 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
         token?: string;
         agentSpec?: any;
     }[], Error>;
-    useCreateAgentRuntime: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
-        environmentName?: string;
-        givenName?: string;
-        creditsLimit?: number;
-        type?: string;
-        editorVariant?: string;
-        enableCodemode?: boolean;
-        agentSpecId?: string;
-    }, unknown>;
+    useCreateAgentRuntime: () => import("@tanstack/react-query").UseMutationResult<any, Error, CreateAgentRuntimeRequest, unknown>;
     useDeleteAgentRuntime: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useRefreshAgentRuntimes: () => () => void;
     useCourse: (courseId: string) => import("@tanstack/react-query").UseQueryResult<ICourse | undefined, Error>;
@@ -733,6 +737,7 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
     useTokens: () => import("@tanstack/react-query").UseQueryResult<any, Error>;
     useCreateToken: () => import("@tanstack/react-query").UseMutationResult<any, Error, Omit<IIAMToken, "id" | "value">, unknown>;
     useUpdateToken: () => import("@tanstack/react-query").UseMutationResult<any, Error, IIAMToken, unknown>;
+    useDeleteToken: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useInvite: (token: string) => import("@tanstack/react-query").UseQueryResult<import("..").IInvite | undefined, Error>;
     useInvitesByUser: (accountId: string) => import("@tanstack/react-query").UseQueryResult<any, Error>;
     usePutInvite: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;

package/lib/hooks/useCache.js

@@ -1473,6 +1473,14 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             enabled: !!podName,
         });
     };
+    /**
+     * Create a new agent runtime.
+     *
+     * Note on phase/status mapping:
+     * Newly created runtimes are immediately active (the operator assigns a pod from the pool).
+     * The response won't have a 'phase' field, so we default to 'running'.
+     * See useAgentRuntimes JSDoc for full explanation.
+     */
     const useCreateAgentRuntime = () => {
         return useMutation({
             mutationFn: async (data) => {
@@ -2497,6 +2505,25 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             },
         });
     };
+    /**
+     * Delete token by ID
+     */
+    const useDeleteToken = () => {
+        return useMutation({
+            mutationFn: async (tokenId) => {
+                return requestDatalayer({
+                    url: `${configuration.iamRunUrl}/api/iam/v1/tokens/${tokenId}`,
+                    method: 'DELETE',
+                });
+            },
+            onSuccess: (_, tokenId) => {
+                queryClient.removeQueries({
+                    queryKey: queryKeys.tokens.detail(tokenId),
+                });
+                queryClient.invalidateQueries({ queryKey: queryKeys.tokens.all() });
+            },
+        });
+    };
     /**
      * Get contact by handle
      */
@@ -6434,6 +6461,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         useTokens,
         useCreateToken,
         useUpdateToken,
+        useDeleteToken,
         // Invites
         useInvite,
         useInvitesByUser,

package/lib/index.d.ts

@@ -13,3 +13,5 @@ export * as iamApi from './api/iam';
 export * as spacerApi from './api/spacer';
 export { DatalayerClient, type DatalayerClientConfig, type ClientHandlers, User, Runtime, Environment, Snapshot, Space, Notebook, LexicalDTO, Secret, Credits, Item, type RuntimeJSON, type EnvironmentJSON, type UserJSON, type RuntimeData, type EnvironmentData, type UserData, type SpaceData, type SpaceItem, type NotebookData, type LexicalData, type RuntimeSnapshotData, type CreditsInfo, type CreditReservation, type CreateRuntimeRequest, type CreateRuntimeResponse, type ListRuntimesResponse, type ListEnvironmentsResponse, type CreateRuntimeSnapshotRequest, type CreateRuntimeSnapshotResponse, type GetRuntimeSnapshotResponse, type ListRuntimeSnapshotsResponse, type CreateSpaceRequest, type CreateSpaceResponse, type SpacesForUserResponse, type CollaborationSessionResponse, type DeleteSpaceItemResponse, type GetSpaceItemResponse, type GetSpaceItemsResponse, type CreateNotebookRequest, type CreateNotebookResponse, type GetNotebookResponse, type UpdateNotebookRequest, type UpdateNotebookResponse, type CreateLexicalRequest, type CreateLexicalResponse, type GetLexicalResponse, type UpdateLexicalRequest, type UpdateLexicalResponse, type CreditsResponse, type CreateDatasourceResponse, type GetDatasourceResponse, type ListDatasourcesResponse, type UpdateDatasourceResponse, type CreateSecretRequest, type CreateSecretResponse, type GetSecretResponse, type ListSecretsResponse, type UpdateSecretRequest, type UpdateSecretResponse, type SpaceJSON, type NotebookJSON, type LexicalJSON, type RuntimeSnapshotJSON, HealthCheck, type HealthCheckJSON, type LoginRequest, type LoginResponse, type UserMeResponse, type MembershipsResponse, type WhoAmIResponse, type HealthzPingResponse, AuthenticationManager, type IUser, type IBaseUser, type ICell, type IDatasource, type IDatasourceVariant, type ICredits, type ICreditsReservation, type ISpaceItem, type ISurvey, type ISpace, type IBaseSpace, type IAnySpace, type ISpaceVariant, type IBaseTeam, type IAnyTeam, type IOrganization, type IAnyOrganization, type IBaseOrganization, type IRuntimeModel, type IRuntimePod, type IRuntimeType, type IRuntimeLocation, type IRuntimeCapabilities, type IRuntimeSnapshot, type IDatalayerEnvironment, type IResources, type ISnippet, type IRole, type IAssignment, type IContact, type ICourse, type IOrganizationMember, type IPage, type PageTagName, type PageTheme, type PageVariant, type ISecret, type ISecretVariant, type SecretData, type SecretJSON, type DatasourceData, type DatasourceJSON, type DatasourceType, type CreateDatasourceRequest, type UpdateDatasourceRequest, Datasource, type IIAMToken, type IIAMTokenVariant, type IDocument, type IBaseDocument, type IEnvironment, type IExercise, type ICode, type IHelp, type IInvite, type ILesson, type INotebook, type IBaseNotebook, type ISchool, type ITeam, type TeamMember, type IUserOnboarding, type IClient, type IOnboardingPosition, type IOnboardingTours, type ITour, type ITourStatus, type IUserSettings, type IDataset, type IUsage, type IItem, type IItemType, type Member, type Profile, type SpaceMember, type IContactEvent, type IContactIAMProvider, type IStudentItem, type Instructor, type IStudent, type IDean, type IUserEvent, type IIAMProviderLinked, type IContent, type AuthResult, type TokenValidationResult, type AuthOptions, type TokenStorage, type IRuntimeOptions, type IMultiServiceManager, type IRemoteServicesManager, type IEnvironmentsManager, type IRemoteRuntimesManager, type NavigationLinkProps, type IDatalayerCoreConfig, type IRuntimesConfiguration, type IIAMProviderName, } from './client';
 export { getEnvironments, createRuntime, getRuntimes, deleteRuntime, snapshotRuntime, getRuntimeSnapshots, loadRuntimeSnapshot, } from './stateful/runtimes/actions';
+export * from './otel';
+export * from './views';

package/lib/index.js

@@ -26,3 +26,7 @@ User, Runtime, Environment, Snapshot, Space, Notebook, LexicalDTO, Secret, Credi
 AuthenticationManager, Datasource, } from './client';
 // Export commonly used functions directly for convenience
 export { getEnvironments, createRuntime, getRuntimes, deleteRuntime, snapshotRuntime, getRuntimeSnapshots, loadRuntimeSnapshot, } from './stateful/runtimes/actions';
+// OTEL observability components, hooks, and types
+export * from './otel';
+// Reusable views (sign-in pages, etc.)
+export * from './views';

package/lib/otel/OtelLive.d.ts

@@ -0,0 +1,12 @@
+/**
+ * OtelLive – Full-featured observability dashboard that combines the
+ * search bar, signal list, timeline, span tree, and detail panel into
+ * a Logfire-inspired experience.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelLive
+ */
+import React from 'react';
+import type { OtelLiveProps } from './types';
+export declare const OtelLive: React.FC<OtelLiveProps>;

package/lib/otel/OtelLive.js

@@ -0,0 +1,354 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelLive – Full-featured observability dashboard that combines the
+ * search bar, signal list, timeline, span tree, and detail panel into
+ * a Logfire-inspired experience.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelLive
+ */
+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 { OtelSearchBar } from './OtelSearchBar';
+import { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
+import { OtelTracesList } from './OtelTracesList';
+import { OtelLogsList } from './OtelLogsList';
+import { OtelMetricsList } from './OtelMetricsList';
+import { OtelSpanDetail } from './OtelSpanDetail';
+import { OtelTimeline } from './OtelTimeline';
+import { OtelSpanTree } from './OtelSpanTree';
+import { buildSpanTree } from './utils';
+// ── Helpers ─────────────────────────────────────────────────────────
+const BOTTOM_PANE_VIEWS = ['timeline', 'tree'];
+const HISTOGRAM_BUCKETS = 60;
+/** Extract timestamp from any signal record. */
+function signalTs(signal, item) {
+    if (signal === 'traces')
+        return new Date(item.start_time).getTime();
+    return new Date(item.timestamp).getTime();
+}
+/** Build histogram buckets from a list of raw timestamps. */
+function buildHistogram(timestamps, start, end, buckets) {
+    const range = end - start || 1;
+    const step = range / buckets;
+    const counts = new Array(buckets).fill(0);
+    for (const ts of timestamps) {
+        const idx = Math.min(Math.floor((ts - start) / step), buckets - 1);
+        if (idx >= 0)
+            counts[idx]++;
+    }
+    return counts.map((count, i) => ({
+        time: new Date(start + i * step + step / 2),
+        count,
+    }));
+}
+// ── OtelLive ────────────────────────────────────────────────────────
+export const OtelLive = ({ baseUrl = coreStore.getState().configuration.otelRunUrl, wsBaseUrl, token, autoRefreshMs = 5000, defaultSignal = 'traces', limit = 200, onSignalRef, }) => {
+    // ── state ──
+    const [signal, setSignalState] = useState(() => {
+        try {
+            const match = document.cookie.match(/(?:^|;\s*)otel_signal=([^;]+)/);
+            if (match && ['traces', 'logs', 'metrics'].includes(match[1])) {
+                return match[1];
+            }
+        }
+        catch {
+            // ignore
+        }
+        return defaultSignal;
+    });
+    const setSignal = (s) => {
+        try {
+            document.cookie = `otel_signal=${s};path=/;max-age=31536000`;
+        }
+        catch {
+            // ignore
+        }
+        setSignalState(s);
+    };
+    // Expose signal setter to parent so external controls (e.g. generate
+    // buttons) can navigate to the right tab.
+    useEffect(() => {
+        onSignalRef?.(setSignal);
+    }, [onSignalRef]);
+    const [service, setService] = useState('');
+    const [query, setQuery] = useState('');
+    const [selectedSpan, setSelectedSpan] = useState(null);
+    const [selectedLogIdx, setSelectedLogIdx] = useState(null);
+    const [bottomPane, setBottomPane] = useState(null);
+    const [rangeStart, setRangeStart] = useState(null);
+    const [rangeEnd, setRangeEnd] = useState(null);
+    // Refs so the bounds-change effect can read current range without making
+    // rangeStart/rangeEnd deps (which would cause infinite loops).
+    const rangeStartRef = useRef(null);
+    const rangeEndRef = useRef(null);
+    rangeStartRef.current = rangeStart;
+    rangeEndRef.current = rangeEnd;
+    const prevBoundsRef = useRef(null);
+    // ── data hooks ──
+    const { traces, loading: tracesLoading, refetch: refetchTraces, } = useOtelTraces({
+        baseUrl,
+        token,
+        limit,
+        serviceName: service || undefined,
+        autoRefreshMs,
+    });
+    const { logs, loading: logsLoading, refetch: refetchLogs, } = useOtelLogs({
+        baseUrl,
+        token,
+        limit,
+        serviceName: service || undefined,
+        autoRefreshMs,
+    });
+    const { metrics, loading: metricsLoading, refetch: refetchMetrics, } = useOtelMetrics({
+        baseUrl,
+        token,
+        limit,
+        serviceName: service || undefined,
+        autoRefreshMs,
+    });
+    const { services } = useOtelServices({ baseUrl, token });
+    // ── WebSocket live updates ──
+    // When a WS message arrives for a signal, refetch the corresponding hook
+    // so the data stays fresh without polling.
+    const wsCallbacks = useMemo(() => ({
+        onTraces: () => void refetchTraces(),
+        onLogs: () => void refetchLogs(),
+        onMetrics: () => void refetchMetrics(),
+    }), [refetchTraces, refetchLogs, refetchMetrics]);
+    const { connected: wsConnected } = useOtelWebSocket({
+        baseUrl: wsBaseUrl ?? baseUrl,
+        token,
+        callbacks: wsCallbacks,
+    });
+    // trace-detail fetch (when a span is selected)
+    const { spans: traceSpans } = useOtelTrace({
+        baseUrl,
+        token,
+        traceId: selectedSpan?.trace_id ?? '',
+    });
+    // Build tree from traceSpans for bottom pane
+    const spanTree = useMemo(() => traceSpans && traceSpans.length > 0 ? buildSpanTree(traceSpans) : [], [traceSpans]);
+    // ── Timeline range slider data ──
+    const allTimestamps = useMemo(() => {
+        const ts = [];
+        if (traces)
+            for (const s of traces)
+                ts.push(signalTs('traces', s));
+        if (logs)
+            for (const l of logs)
+                ts.push(signalTs('logs', l));
+        if (metrics)
+            for (const m of metrics)
+                ts.push(signalTs('metrics', m));
+        // Drop invalid timestamps (NaN) so the slider doesn't collapse
+        return ts.filter(t => Number.isFinite(t) && t > 0);
+    }, [traces, logs, metrics]);
+    const timelineBounds = useMemo(() => {
+        if (allTimestamps.length === 0)
+            return null;
+        const min = Math.min(...allTimestamps);
+        const max = Math.max(...allTimestamps);
+        // Add a small padding (2 %) so edge items aren't clipped
+        const pad = Math.max((max - min) * 0.02, 1000);
+        return { start: new Date(min - pad), end: new Date(max + pad) };
+    }, [allTimestamps]);
+    const histogram = useMemo(() => {
+        if (!timelineBounds || allTimestamps.length === 0)
+            return undefined;
+        return buildHistogram(allTimestamps, timelineBounds.start.getTime(), timelineBounds.end.getTime(), HISTOGRAM_BUCKETS);
+    }, [allTimestamps, timelineBounds]);
+    // Auto-adapt slider range when data bounds change.
+    // Behaviour:
+    //  – First load (rangeStart is null): initialise to the full range.
+    //  – Subsequent updates: if the user's range handle was at the previous
+    //    bounds edge (within 600 ms), advance it to the new edge so the view
+    //    "follows" live data.  If the handle was moved inward, leave it alone.
+    useEffect(() => {
+        if (!timelineBounds)
+            return;
+        const prev = prevBoundsRef.current;
+        prevBoundsRef.current = {
+            start: timelineBounds.start.getTime(),
+            end: timelineBounds.end.getTime(),
+        };
+        // First load
+        if (!prev ||
+            rangeStartRef.current === null ||
+            rangeEndRef.current === null) {
+            setRangeStart(timelineBounds.start);
+            setRangeEnd(timelineBounds.end);
+            return;
+        }
+        const STICKY_THRESHOLD = 600; // ms – how close to the edge counts as "at edge"
+        if (rangeEndRef.current.getTime() >= prev.end - STICKY_THRESHOLD) {
+            setRangeEnd(timelineBounds.end);
+        }
+        if (rangeStartRef.current.getTime() <= prev.start + STICKY_THRESHOLD) {
+            setRangeStart(timelineBounds.start);
+        }
+    }, [timelineBounds?.start.getTime(), timelineBounds?.end.getTime()]);
+    // Reset selection on signal change
+    useEffect(() => {
+        setSelectedSpan(null);
+        setSelectedLogIdx(null);
+        setBottomPane(null);
+    }, [signal]);
+    // ── handlers ──
+    const handleRefresh = useCallback(() => {
+        if (signal === 'traces')
+            void refetchTraces();
+        if (signal === 'logs')
+            void refetchLogs();
+        if (signal === 'metrics')
+            void refetchMetrics();
+    }, [signal, refetchTraces, refetchLogs, refetchMetrics]);
+    const handleSpanSelect = useCallback((span) => {
+        setSelectedSpan(span);
+        setSelectedLogIdx(null);
+    }, []);
+    const handleLogSelect = useCallback((log, idx) => {
+        setSelectedLogIdx(idx);
+        setSelectedSpan(null);
+    }, []);
+    const handleCloseDetail = useCallback(() => {
+        setSelectedSpan(null);
+        setSelectedLogIdx(null);
+    }, []);
+    const handleRangeChange = useCallback((start, end) => {
+        setRangeStart(start);
+        setRangeEnd(end);
+    }, []);
+    const toggleBottomPane = useCallback((pane) => setBottomPane(cur => (cur === pane ? null : pane)), []);
+    const hasDetail = (signal === 'traces' && selectedSpan !== null) ||
+        (signal === 'logs' && selectedLogIdx !== null);
+    // ── Time-range-filtered data ──
+    const isRangeActive = rangeStart !== null &&
+        rangeEnd !== null &&
+        timelineBounds !== null &&
+        (rangeStart.getTime() > timelineBounds.start.getTime() + 100 ||
+            rangeEnd.getTime() < timelineBounds.end.getTime() - 100);
+    const filteredTraces = useMemo(() => {
+        const list = filterSpans(traces ?? [], query);
+        if (!isRangeActive || !rangeStart || !rangeEnd)
+            return list;
+        const s = rangeStart.getTime();
+        const e = rangeEnd.getTime();
+        return list.filter(t => {
+            const ts = new Date(t.start_time).getTime();
+            return ts >= s && ts <= e;
+        });
+    }, [traces, query, isRangeActive, rangeStart, rangeEnd]);
+    const filteredLogs = useMemo(() => {
+        const list = filterLogs(logs ?? [], query);
+        if (!isRangeActive || !rangeStart || !rangeEnd)
+            return list;
+        const s = rangeStart.getTime();
+        const e = rangeEnd.getTime();
+        return list.filter(l => {
+            const ts = new Date(l.timestamp).getTime();
+            return ts >= s && ts <= e;
+        });
+    }, [logs, query, isRangeActive, rangeStart, rangeEnd]);
+    const filteredMetrics = useMemo(() => {
+        const list = metrics ?? [];
+        if (!isRangeActive || !rangeStart || !rangeEnd)
+            return list;
+        const s = rangeStart.getTime();
+        const e = rangeEnd.getTime();
+        return list.filter(m => {
+            const ts = new Date(m.timestamp).getTime();
+            return ts >= s && ts <= e;
+        });
+    }, [metrics, isRangeActive, rangeStart, rangeEnd]);
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            minHeight: 0,
+            height: '100%',
+            color: 'fg.default',
+            bg: 'canvas.default',
+            border: '1px solid',
+            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'
+                                ? tracesLoading
+                                : signal === 'logs'
+                                    ? logsLoading
+                                    : metricsLoading }) }), _jsx(Box, { sx: { pr: 2, flexShrink: 0 }, children: _jsx(Label, { variant: wsConnected ? 'success' : 'secondary', size: "small", children: wsConnected ? '● Live' : '○ Polling' }) })] }), timelineBounds && rangeStart && rangeEnd && (_jsx(Box, { sx: {
+                    px: 3,
+                    pt: 2,
+                    pb: 1,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    bg: 'canvas.subtle',
+                    flexShrink: 0,
+                    position: 'relative',
+                    zIndex: 0,
+                }, children: _jsx(OtelTimelineRangeSlider, { timelineStart: timelineBounds.start, timelineEnd: timelineBounds.end, selectedStart: rangeStart, selectedEnd: rangeEnd, onRangeChange: handleRangeChange, histogram: histogram, height: 48, tickCount: 6 }) })), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flex: hasDetail ? '0 0 55%' : '1 1 100%',
+                            minHeight: 0,
+                            overflow: 'hidden',
+                        }, children: [signal === 'traces' && (_jsx(OtelTracesList, { spans: filteredTraces, loading: tracesLoading, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), signal === 'logs' && (_jsx(OtelLogsList, { logs: filteredLogs, loading: logsLoading, selectedLogIndex: selectedLogIdx, onSelectLog: handleLogSelect })), signal === 'metrics' && (_jsx(OtelMetricsList, { metrics: filteredMetrics, loading: metricsLoading }))] }), hasDetail && (_jsxs(Box, { sx: {
+                            flex: '0 0 45%',
+                            minHeight: 0,
+                            overflow: 'auto',
+                            borderLeft: '1px solid',
+                            borderColor: 'border.default',
+                        }, children: [signal === 'traces' && selectedSpan && (_jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans ?? undefined, onClose: handleCloseDetail })), signal === 'logs' && selectedLogIdx !== null && logs && (_jsxs(Box, { sx: { p: 3 }, children: [_jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            mb: 3,
+                                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Log Detail" }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleCloseDetail, children: "\u2715" })] }), _jsx(Box, { as: "pre", sx: {
+                                            m: 0,
+                                            fontSize: 1,
+                                            fontFamily: 'mono',
+                                            whiteSpace: 'pre-wrap',
+                                            wordBreak: 'break-word',
+                                        }, children: JSON.stringify(logs[selectedLogIdx], null, 2) })] }))] }))] }), signal === 'traces' && selectedSpan && spanTree.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 1,
+                            px: 3,
+                            py: 1,
+                            bg: 'canvas.subtle',
+                            borderTop: '1px solid',
+                            borderColor: 'border.default',
+                            flexShrink: 0,
+                        }, children: [_jsx(Button, { size: "small", variant: bottomPane === 'timeline' ? 'primary' : 'invisible', leadingVisual: ClockIcon, onClick: () => toggleBottomPane('timeline'), children: "Timeline" }), _jsx(Button, { size: "small", variant: bottomPane === 'tree' ? 'primary' : 'invisible', leadingVisual: GitBranchIcon, onClick: () => toggleBottomPane('tree'), children: "Span Tree" })] }), bottomPane && (_jsxs(Box, { sx: {
+                            height: 260,
+                            overflow: 'auto',
+                            borderTop: '1px solid',
+                            borderColor: 'border.default',
+                            flexShrink: 0,
+                        }, children: [bottomPane === 'timeline' && (_jsx(OtelTimeline, { spans: traceSpans ?? [], selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), bottomPane === 'tree' && (_jsx(OtelSpanTree, { spans: spanTree, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect, defaultExpandDepth: 3 }))] }))] }))] }));
+};
+// ── Client-side filter helpers ──────────────────────────────────────
+function filterSpans(spans, q) {
+    if (!q.trim())
+        return spans;
+    const lq = q.toLowerCase();
+    return spans.filter(s => s.span_name.toLowerCase().includes(lq) ||
+        s.service_name.toLowerCase().includes(lq) ||
+        (s.otel_scope_name ?? '').toLowerCase().includes(lq) ||
+        (s.status_message ?? '').toLowerCase().includes(lq));
+}
+function filterLogs(logs, q) {
+    if (!q.trim())
+        return logs;
+    const lq = q.toLowerCase();
+    return logs.filter(l => l.body.toLowerCase().includes(lq) ||
+        l.service_name.toLowerCase().includes(lq) ||
+        l.severity_text.toLowerCase().includes(lq));
+}

package/lib/otel/OtelLogsList.d.ts

@@ -0,0 +1,11 @@
+/**
+ * OtelLogsList – Tabular log-records view with severity colour coding,
+ * expandable body/attributes, and trace correlation links.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelLogsList
+ */
+import React from 'react';
+import type { OtelLogsListProps } from './types';
+export declare const OtelLogsList: React.FC<OtelLogsListProps>;

package/lib/otel/OtelLogsList.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelLogsList – Tabular log-records view with severity colour coding,
+ * expandable body/attributes, and trace correlation links.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelLogsList
+ */
+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';
+// ── 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 }) }));
+/** Expandable row detail for a single log record. */
+const LogDetail = ({ log }) => (_jsxs(Box, { sx: {
+        gridColumn: '1 / -1',
+        bg: 'canvas.subtle',
+        borderBottom: '1px solid',
+        borderColor: 'border.default',
+        p: 3,
+    }, children: [_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: {
+                        fontSize: 0,
+                        fontWeight: 'bold',
+                        color: 'fg.muted',
+                        display: 'block',
+                        mb: 1,
+                    }, children: "Body" }), _jsx(Box, { as: "pre", sx: {
+                        fontSize: 1,
+                        fontFamily: 'mono',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                        m: 0,
+                        bg: 'canvas.default',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        p: 2,
+                    }, children: log.body })] }), log.trace_id && (_jsxs(Box, { sx: { display: 'flex', gap: 3, mb: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "trace_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.trace_id }), log.span_id && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "span_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.span_id })] }))] })), log.attributes && Object.keys(log.attributes).length > 0 && (_jsxs(Box, { children: [_jsx(Text, { sx: {
+                        fontSize: 0,
+                        fontWeight: 'bold',
+                        color: 'fg.muted',
+                        display: 'block',
+                        mb: 1,
+                    }, children: "Attributes" }), _jsx(Box, { sx: {
+                        bg: 'canvas.default',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        p: 2,
+                    }, children: Object.entries(log.attributes).map(([k, v]) => (_jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 2,
+                            py: 1,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.muted',
+                        }, children: [_jsx(Text, { sx: {
+                                    color: 'accent.fg',
+                                    fontSize: 0,
+                                    fontFamily: 'mono',
+                                    minWidth: 150,
+                                }, children: k }), _jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    fontFamily: 'mono',
+                                    wordBreak: 'break-word',
+                                }, children: typeof v === 'string' ? v : JSON.stringify(v) })] }, k))) })] }))] }));
+// ── Main component ──────────────────────────────────────────────────
+export const OtelLogsList = ({ logs, loading, selectedLogIndex, onSelectLog, }) => {
+    const [expandedIdx, setExpandedIdx] = useState(null);
+    const colTemplate = '140px 80px 160px 1fr';
+    if (loading && logs.length === 0) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 5 }, children: _jsx(Spinner, { size: "medium" }) }));
+    }
+    if (!loading && logs.length === 0) {
+        return (_jsxs(Blankslate, { children: [_jsx(Blankslate.Visual, { children: _jsx(LogIcon, { size: 24 }) }), _jsx(Blankslate.Heading, { children: "No log records found" }), _jsx(Blankslate.Description, { children: "Send some log data first." })] }));
+    }
+    return (_jsxs(Box, { sx: { flex: 1, minHeight: 0, overflow: 'auto' }, children: [_jsx(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: colTemplate,
+                    bg: 'canvas.subtle',
+                    borderBottom: '2px solid',
+                    borderColor: 'border.default',
+                    px: 3,
+                    py: 1,
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 1,
+                }, children: ['Time', 'Severity', 'Service', 'Body'].map(h => (_jsx(Text, { sx: {
+                        fontSize: 0,
+                        fontWeight: 'bold',
+                        color: 'fg.muted',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                        textAlign: h === 'Severity' ? 'center' : undefined,
+                    }, children: h }, h))) }), logs.map((log, idx) => {
+                const selected = idx === selectedLogIndex;
+                const expanded = idx === expandedIdx;
+                return (_jsxs(React.Fragment, { children: [_jsxs(Box, { sx: {
+                                display: 'grid',
+                                gridTemplateColumns: colTemplate,
+                                px: 3,
+                                py: '5px',
+                                borderBottom: '1px solid',
+                                borderColor: 'border.muted',
+                                cursor: 'pointer',
+                                bg: selected
+                                    ? 'accent.subtle'
+                                    : expanded
+                                        ? 'canvas.subtle'
+                                        : 'canvas.default',
+                                ':hover': {
+                                    bg: selected || expanded ? undefined : 'canvas.subtle',
+                                },
+                            }, onClick: () => {
+                                setExpandedIdx(expanded ? null : idx);
+                                onSelectLog?.(log, idx);
+                            }, children: [_jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono', color: 'fg.default' }, children: formatTime(log.timestamp) }), _jsx(Severity, { text: log.severity_text }), _jsx(Text, { sx: {
+                                        fontSize: 1,
+                                        color: 'fg.muted',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }, children: log.service_name }), _jsx(Text, { sx: {
+                                        fontSize: 1,
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }, children: log.body })] }), expanded && _jsx(LogDetail, { log: log })] }, idx));
+            })] }));
+};

package/lib/otel/OtelMetricsChart.d.ts

@@ -0,0 +1,22 @@
+/**
+ * OtelMetricsChart – Type-aware ECharts visualisation for OTEL metrics.
+ *
+ * Renders one chart section per `metric_type` (`sum`, `histogram`, `gauge`,
+ * and any other type present) with an appropriate chart style:
+ *
+ * - **sum** (counters): area-line chart with gradient fill
+ * - **histogram**: bar chart with grouped series
+ * - **gauge**: plain line chart (no area fill)
+ * - **other**: falls back to area-line
+ *
+ * @module otel/OtelMetricsChart
+ */
+import React from 'react';
+import type { OtelMetric } from './types';
+export interface OtelMetricsChartProps {
+    metrics: OtelMetric[];
+    /** Height per chart panel in px. Default 240. */
+    height?: number;
+}
+export declare const OtelMetricsChart: React.FC<OtelMetricsChartProps>;
+export default OtelMetricsChart;