@datalayer/core 1.0.1 → 1.0.3

package/lib/hooks/useProjects.js

@@ -0,0 +1,166 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Hook for fetching and managing projects.
+ *
+ * Projects are backed by the Spacer service as spaces with type_s="project".
+ * Projects persist forever — only agents can terminate.
+ *
+ * Free tier limits: max 3 projects per user.
+ *
+ * @module hooks/useProjects
+ */
+import { useMemo, useCallback } from 'react';
+import { useCache } from './useCache';
+/** The space type value used to identify project spaces in Solr */
+export const PROJECT_SPACE_VARIANT = 'project';
+/**
+ * Hook to fetch user's projects (spaces with type "project").
+ *
+ * Uses the spacer service's spaces endpoint filtered by type.
+ */
+export function useProjects() {
+    const { useUserSpaces } = useCache();
+    const { data: allSpaces, ...rest } = useUserSpaces();
+    // Filter to only project-type spaces
+    const projects = useMemo(() => {
+        if (!allSpaces)
+            return [];
+        return allSpaces
+            .filter((space) => space.variant === PROJECT_SPACE_VARIANT ||
+            space.type_s === PROJECT_SPACE_VARIANT)
+            .map((space) => ({
+            uid: space.uid,
+            id: space.id ?? space.uid,
+            handle: space.handle ?? space.handle_s,
+            name: space.name ?? space.name_t,
+            description: space.description ?? space.description_t ?? '',
+            createdAt: space.created_at ? new Date(space.created_at) : new Date(),
+            isPublic: space.public ?? space.public_b ?? false,
+            attachedAgentPodName: space.attached_agent_pod_name_s || undefined,
+            attachedAgentSpecId: space.attached_agent_spec_id_s || undefined,
+        }));
+    }, [allSpaces]);
+    return { data: projects, ...rest };
+}
+/**
+ * Hook to fetch a single project by UID.
+ */
+export function useProject(uid) {
+    const { useSpace } = useCache();
+    // useSpace requires a string – pass empty string when uid is undefined
+    // (the query is disabled when spaceId is falsy inside useCache)
+    const { data: space, ...rest } = useSpace(uid ?? '');
+    const project = useMemo(() => {
+        if (!space)
+            return undefined;
+        const s = space;
+        return {
+            uid: s.uid,
+            id: s.id ?? s.uid,
+            handle: s.handle ?? s.handle_s,
+            name: s.name ?? s.name_t,
+            description: s.description ?? s.description_t ?? '',
+            createdAt: s.created_at ? new Date(s.created_at) : new Date(),
+            isPublic: s.public ?? s.public_b ?? false,
+            attachedAgentPodName: s.attached_agent_pod_name_s || undefined,
+            attachedAgentSpecId: s.attached_agent_spec_id_s || undefined,
+        };
+    }, [space]);
+    return { data: project, ...rest };
+}
+/**
+ * Hook to create a new project.
+ * Creates a space with type "project" via the spacer service.
+ */
+export function useCreateProject() {
+    const { useCreateSpace } = useCache();
+    const createSpaceMutation = useCreateSpace();
+    const createProject = useCallback(async (request) => {
+        const spaceHandle = request.name
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-|-$/g, '');
+        return createSpaceMutation.mutateAsync({
+            space: {
+                name: request.name,
+                description: request.description || '',
+                handle: spaceHandle || `project-${Date.now()}`,
+                variant: PROJECT_SPACE_VARIANT,
+                public: false,
+            },
+        });
+    }, [createSpaceMutation]);
+    return {
+        ...createSpaceMutation,
+        createProject,
+    };
+}
+/**
+ * Hook to update a project (e.g. persist the attached agent pod name).
+ * Uses the spacer PUT endpoint via useUpdateSpace.
+ */
+export function useUpdateProject() {
+    const { useUpdateSpace } = useCache();
+    const updateSpaceMutation = useUpdateSpace();
+    /** Assign an agent runtime to the project */
+    const assignAgent = useCallback(async (project, agentPodName, agentSpecId) => {
+        return updateSpaceMutation.mutateAsync({
+            id: project.id,
+            name: project.name,
+            description: project.description,
+            attached_agent_pod_name_s: agentPodName,
+            attached_agent_spec_id_s: agentSpecId || '',
+        });
+    }, [updateSpaceMutation]);
+    /** Rename a project */
+    const renameProject = useCallback(async (project, newName) => {
+        return updateSpaceMutation.mutateAsync({
+            id: project.id,
+            name: newName,
+            description: project.description,
+        });
+    }, [updateSpaceMutation]);
+    /** Remove the agent assignment from the project */
+    const unassignAgent = useCallback(async (project) => {
+        return updateSpaceMutation.mutateAsync({
+            id: project.id,
+            name: project.name,
+            description: project.description,
+            attached_agent_pod_name_s: '',
+            attached_agent_spec_id_s: '',
+        });
+    }, [updateSpaceMutation]);
+    return {
+        ...updateSpaceMutation,
+        assignAgent,
+        unassignAgent,
+        renameProject,
+    };
+}
+/**
+ * Hook to refresh the projects list.
+ */
+export function useRefreshProjects() {
+    const { useRefreshUserSpaces } = useCache();
+    return useRefreshUserSpaces();
+}
+/**
+ * Hook to delete a project (space) and all its contents.
+ */
+export function useDeleteProject() {
+    const { useDeleteSpace } = useCache();
+    return useDeleteSpace();
+}
+/**
+ * Hook to fetch the default notebook and document UIDs for a project.
+ *
+ * This calls the spacer `GET /spaces/{uid}/default-items` endpoint which
+ * returns the UID of the first notebook and first document in the space.
+ */
+export function useProjectDefaultItems(projectUid) {
+    const { useSpaceDefaultItems } = useCache();
+    return useSpaceDefaultItems(projectUid);
+}

package/lib/index.d.ts

@@ -5,7 +5,6 @@ export * from './collaboration';
 export * from './services';
 export * from './navigation';
 export * from './hooks';
-export * from './theme';
 export { requestDatalayerAPI, RunResponseError, NetworkError, } from './api/DatalayerApi';
 export type { IRequestDatalayerAPIOptions } from './api/DatalayerApi';
 export { API_BASE_PATHS } from './api/constants';
@@ -14,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

@@ -11,8 +11,6 @@ export * from './services';
 // Export navigation before hooks to avoid conflicts
 export * from './navigation';
 export * from './hooks';
-// Export Theme.
-export * from './theme';
 // Export APIs.
 export { requestDatalayerAPI, RunResponseError, NetworkError, } from './api/DatalayerApi';
 export { API_BASE_PATHS } from './api/constants';
@@ -28,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/models/Page.d.ts

@@ -31,6 +31,8 @@ export type IPage = {
     creatorId?: string;
     kernelSnapshot?: IRuntimeSnapshot;
     kernelSnapshotId?: string;
+    createdAt?: string;
+    updatedAt?: string;
 };
 export declare const asPage: (s: any) => IPage;
 export default IPage;

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>;