@datalayer/core 1.0.24 → 1.0.25

package/lib/components/scheduler/ScheduleMenu.js

@@ -0,0 +1,154 @@
+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.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { ActionList, ActionMenu, Box, Button, Dialog, FormControl, IconButton, Spinner, Text, TextInput, } from '@primer/react';
+import { ClockIcon, TrashIcon } from '@primer/octicons-react';
+import { disableSchedule, updateSchedule, upsertSchedule, } from '../../api/scheduler/schedules.js';
+import { DEFAULT_SERVICE_URLS } from '../../api/constants.js';
+const SCHEDULE_PRESETS = [
+    { id: 'every-minute', label: 'Every minute', cron: '* * * * *' },
+    { id: 'hourly', label: 'Every hour', cron: '0 * * * *' },
+    { id: 'daily', label: 'Every day', cron: '0 0 * * *' },
+];
+const DEFAULT_CRON_EXPRESSION = '* * * * *';
+const presetFromCron = (cronExpression) => {
+    const normalized = cronExpression.trim();
+    const preset = SCHEDULE_PRESETS.find(item => item.cron === normalized);
+    return preset ? preset.id : 'custom';
+};
+/**
+ * Self-contained schedule menu that lets a user pick a cron schedule for a
+ * notebook and persists it to the scheduler service.
+ *
+ * The component owns its loading state and renders a spinner in place of the
+ * anchor icon while a save request is in flight. The scheduler service URL is
+ * configurable through the `baseUrl` prop.
+ */
+export const ScheduleMenu = ({ notebookUid, scheduleUid, token, baseUrl = DEFAULT_SERVICE_URLS.SCHEDULER, enabled, icon = ClockIcon, iconColor, ariaLabel = 'Schedule execution', initialPreset = 'every-minute', initialCronExpression, onSaved, onDeleted, onError, }) => {
+    const providedInitialCron = (initialCronExpression || '').trim();
+    const hasProvidedInitialCron = providedInitialCron.length > 0;
+    const initialCron = hasProvidedInitialCron
+        ? providedInitialCron
+        : DEFAULT_CRON_EXPRESSION;
+    const [cronExpression, setCronExpression] = useState(initialCron);
+    const [hasExplicitCron, setHasExplicitCron] = useState(hasProvidedInitialCron);
+    const [isSaving, setIsSaving] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+    const [deleteConfirmUid, setDeleteConfirmUid] = useState('');
+    useEffect(() => {
+        const nextProvidedCron = (initialCronExpression || '').trim();
+        const nextHasExplicitCron = nextProvidedCron.length > 0;
+        setHasExplicitCron(nextHasExplicitCron);
+        setCronExpression(nextHasExplicitCron ? nextProvidedCron : DEFAULT_CRON_EXPRESSION);
+    }, [initialCronExpression, scheduleUid, notebookUid]);
+    const preset = useMemo(() => (hasExplicitCron ? presetFromCron(cronExpression) : 'custom'), [cronExpression, hasExplicitCron]);
+    const isEnabled = (enabled ?? true) &&
+        Boolean(token) &&
+        Boolean(notebookUid || scheduleUid) &&
+        !isSaving &&
+        !isDeleting;
+    const selectedPresetDescription = useMemo(() => {
+        if (!hasExplicitCron) {
+            return 'Not scheduled';
+        }
+        const selected = SCHEDULE_PRESETS.find(item => item.cron === cronExpression.trim());
+        if (selected) {
+            return `${selected.label} (${selected.cron})`;
+        }
+        return `Custom (${cronExpression || 'Cron expression not set'})`;
+    }, [cronExpression, hasExplicitCron]);
+    const saveSchedule = async (nextPreset, nextCron) => {
+        const cron = nextCron.trim();
+        if (!token || (!notebookUid && !scheduleUid) || !cron) {
+            return;
+        }
+        setIsSaving(true);
+        try {
+            let schedule;
+            if (scheduleUid) {
+                const response = await updateSchedule(token, scheduleUid, {
+                    cronExpression: cron,
+                    preset: nextPreset,
+                }, baseUrl);
+                schedule = response.schedule;
+            }
+            else {
+                const response = await upsertSchedule(token, {
+                    notebookUid: notebookUid,
+                    cronExpression: cron,
+                    preset: nextPreset,
+                    enabled: true,
+                }, baseUrl);
+                schedule = response.schedule;
+            }
+            onSaved?.(schedule);
+        }
+        catch (error) {
+            onError?.(error);
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const selectPreset = (nextPreset) => {
+        const next = SCHEDULE_PRESETS.find(item => item.id === nextPreset);
+        if (!next) {
+            return;
+        }
+        setHasExplicitCron(true);
+        setCronExpression(next.cron);
+        void saveSchedule(nextPreset, next.cron);
+    };
+    const applyCustomCron = () => {
+        const value = cronExpression.trim();
+        const inferredPreset = presetFromCron(value);
+        void saveSchedule(inferredPreset, value);
+    };
+    const performDeleteSchedule = async () => {
+        if (!token || !scheduleUid) {
+            return;
+        }
+        setIsDeleting(true);
+        try {
+            const response = await disableSchedule(token, scheduleUid, baseUrl);
+            setIsDeleteDialogOpen(false);
+            setDeleteConfirmUid('');
+            onDeleted?.(response.schedule);
+        }
+        catch (error) {
+            onError?.(error);
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: isSaving ? () => _jsx(Spinner, { size: "small" }) : icon, variant: "invisible", sx: iconColor ? { color: iconColor } : undefined, "aria-label": ariaLabel, title: isSaving
+                                ? `${ariaLabel} (saving…)`
+                                : isEnabled
+                                    ? ariaLabel
+                                    : `${ariaLabel} (disabled)` }) }), _jsxs(ActionMenu.Overlay, { width: "medium", sx: { minWidth: 300 }, children: [_jsx(Box, { sx: {
+                                    px: 3,
+                                    pt: 3,
+                                    pb: 2,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: _jsx(Text, { as: "p", sx: { fontWeight: 600 }, children: "Schedule" }) }), _jsx(ActionList, { selectionVariant: "single", showDividers: true, children: SCHEDULE_PRESETS.map(option => (_jsxs(ActionList.Item, { selected: preset === option.id, disabled: !isEnabled, onSelect: () => selectPreset(option.id), children: [option.label, _jsx(ActionList.Description, { variant: "block", children: option.cron })] }, option.id))) }), _jsxs(Box, { sx: { p: 3, borderTop: '1px solid', borderColor: 'border.default' }, children: [_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: "Cron Expression" }), _jsx(TextInput, { value: cronExpression, onChange: event => {
+                                            const value = event.currentTarget.value;
+                                            setHasExplicitCron(value.trim().length > 0);
+                                            setCronExpression(value);
+                                        }, placeholder: "* * * * *", "aria-label": "Cron expression", block: true, disabled: !isEnabled }), _jsxs(Box, { sx: { mt: 2, display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { size: "small", onClick: applyCustomCron, disabled: !isEnabled, children: "Apply Cron" }), scheduleUid ? (_jsx(Button, { size: "small", variant: "danger", leadingVisual: TrashIcon, onClick: () => setIsDeleteDialogOpen(true), disabled: !isEnabled, children: "Delete Schedule" })) : null] }), _jsxs(Text, { as: "p", sx: { mt: 2, fontSize: 0, color: 'fg.muted' }, children: ["Current: ", selectedPresetDescription] })] })] })] }), isDeleteDialogOpen && scheduleUid ? (_jsx(Dialog, { title: "Delete schedule", onClose: () => {
+                    if (isDeleting) {
+                        return;
+                    }
+                    setIsDeleteDialogOpen(false);
+                    setDeleteConfirmUid('');
+                }, width: "medium", children: _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(Text, { children: ["This action will disable the schedule and remove planned runs. Type", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 700 }, children: scheduleUid }), ' ', "to confirm."] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Schedule UID" }), _jsx(TextInput, { value: deleteConfirmUid, onChange: event => setDeleteConfirmUid(event.currentTarget.value), placeholder: scheduleUid, autoFocus: true })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [_jsx(Button, { variant: "default", onClick: () => {
+                                        setIsDeleteDialogOpen(false);
+                                        setDeleteConfirmUid('');
+                                    }, disabled: isDeleting, children: "Cancel" }), _jsx(Button, { variant: "danger", onClick: () => void performDeleteSchedule(), disabled: isDeleting || deleteConfirmUid !== scheduleUid, children: "Delete schedule" })] })] }) })) : null] }));
+};
+export default ScheduleMenu;

package/lib/components/scheduler/index.d.ts

@@ -0,0 +1 @@
+export * from './ScheduleMenu';

package/lib/{views/iam-tokens → components/scheduler}/index.js

@@ -2,6 +2,4 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-export * from './IAMTokenEdit.js';
-export * from './IAMTokenNew.js';
-export * from './IAMTokens.js';
+export * from './ScheduleMenu.js';

package/lib/components/time/LiveRelativeTime.d.ts

@@ -0,0 +1,14 @@
+type ILiveRelativeTimeProps = {
+    value?: Date | string | number;
+    refreshIntervalMs?: number;
+    fallback?: string;
+    showTooltip?: boolean;
+};
+/**
+ * Display a live-updating relative time label (e.g. "5m ago", "in 2m").
+ *
+ * When `showTooltip` is true, a Primer tooltip shows ISO + localized datetime
+ * details with timezone information.
+ */
+export declare function LiveRelativeTime({ value, refreshIntervalMs, fallback, showTooltip, }: ILiveRelativeTimeProps): JSX.Element;
+export {};

package/lib/components/time/LiveRelativeTime.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Tooltip } from '@primer/react';
+import { formatDateTimeDetails, formatRelativeTime } from '../../utils/index.js';
+/**
+ * Display a live-updating relative time label (e.g. "5m ago", "in 2m").
+ *
+ * When `showTooltip` is true, a Primer tooltip shows ISO + localized datetime
+ * details with timezone information.
+ */
+export function LiveRelativeTime({ value, refreshIntervalMs = 30_000, fallback = '—', showTooltip = true, }) {
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        const timer = window.setInterval(() => {
+            setNow(new Date());
+        }, refreshIntervalMs);
+        return () => window.clearInterval(timer);
+    }, [refreshIntervalMs]);
+    const label = useMemo(() => formatRelativeTime(value, now), [value, now]);
+    const tooltip = useMemo(() => formatDateTimeDetails(value), [value]);
+    const content = (_jsx("button", { type: "button", "aria-label": tooltip || 'Date and time details', style: {
+            border: 'none',
+            background: 'transparent',
+            padding: 0,
+            margin: 0,
+            font: 'inherit',
+            color: 'inherit',
+            cursor: 'inherit',
+            lineHeight: 'inherit',
+        }, children: label ?? fallback }));
+    if (!showTooltip || !tooltip) {
+        return content;
+    }
+    return _jsx(Tooltip, { text: tooltip, children: content });
+}

package/lib/components/time/index.d.ts

@@ -0,0 +1 @@
+export * from './LiveRelativeTime';

package/lib/components/time/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './LiveRelativeTime.js';

package/lib/components/timeline/Timeline.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+export type TimelineStatus = 'done' | 'current' | 'pending' | 'failed' | 'neutral';
+export type TimelineItem = {
+    id: string;
+    title: string;
+    timestamp?: string;
+    status?: TimelineStatus;
+    subtitle?: ReactNode;
+};
+export type TimelineProps = {
+    items: TimelineItem[];
+    renderTimestamp?: (value?: string) => ReactNode;
+};
+/**
+ * Horizontal metro-style timeline with connected markers and labels.
+ *
+ * The first item is rendered on the left. Pass items in the desired order
+ * (for example: newest to oldest).
+ */
+export declare const Timeline: ({ items, renderTimestamp }: TimelineProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/components/timeline/Timeline.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '@primer/react';
+const statusStyles = {
+    done: {
+        dotBackground: 'success.emphasis',
+        dotBorder: 'success.emphasis',
+        lineColor: 'success.muted',
+        titleColor: 'fg.default',
+    },
+    current: {
+        dotBackground: 'attention.emphasis',
+        dotBorder: 'attention.emphasis',
+        lineColor: 'attention.muted',
+        titleColor: 'fg.default',
+    },
+    pending: {
+        dotBackground: 'canvas.default',
+        dotBorder: 'border.default',
+        lineColor: 'border.default',
+        titleColor: 'fg.muted',
+    },
+    failed: {
+        dotBackground: 'danger.emphasis',
+        dotBorder: 'danger.emphasis',
+        lineColor: 'danger.muted',
+        titleColor: 'danger.fg',
+    },
+    neutral: {
+        dotBackground: 'accent.emphasis',
+        dotBorder: 'accent.emphasis',
+        lineColor: 'accent.muted',
+        titleColor: 'fg.default',
+    },
+};
+/**
+ * Horizontal metro-style timeline with connected markers and labels.
+ *
+ * The first item is rendered on the left. Pass items in the desired order
+ * (for example: newest to oldest).
+ */
+export const Timeline = ({ items, renderTimestamp }) => {
+    if (!items.length) {
+        return null;
+    }
+    return (_jsx(Box, { sx: {
+            overflowX: 'auto',
+            pb: 1,
+        }, children: _jsx(Box, { sx: {
+                display: 'flex',
+                alignItems: 'stretch',
+                minWidth: 'max-content',
+            }, children: items.map((item, index) => {
+                const status = item.status || 'neutral';
+                const style = statusStyles[status];
+                const hasNext = index < items.length - 1;
+                return (_jsxs(Box, { sx: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        minWidth: 220,
+                        flex: hasNext ? '0 0 220px' : '0 0 auto',
+                        pr: hasNext ? 0 : 1,
+                    }, children: [_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                minHeight: 28,
+                                mb: 2,
+                            }, children: [_jsx(Box, { sx: {
+                                        width: 16,
+                                        height: 16,
+                                        borderRadius: '50%',
+                                        border: '2px solid',
+                                        borderColor: style.dotBorder,
+                                        bg: style.dotBackground,
+                                        boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.2)',
+                                    } }), hasNext ? (_jsx(Box, { sx: {
+                                        flex: 1,
+                                        height: 4,
+                                        ml: 2,
+                                        mr: 2,
+                                        borderRadius: 999,
+                                        bg: style.lineColor,
+                                    } })) : null] }), _jsx(Text, { as: "p", sx: { fontWeight: 600, color: style.titleColor, mb: 1 }, children: item.title }), _jsx(Text, { as: "p", sx: {
+                                fontSize: 0,
+                                color: 'fg.muted',
+                                mb: item.subtitle ? 1 : 0,
+                            }, children: renderTimestamp
+                                ? renderTimestamp(item.timestamp)
+                                : item.timestamp || 'n/a' }), item.subtitle ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.subtle' }, children: item.subtitle })) : null] }, item.id));
+            }) }) }));
+};

package/lib/components/timeline/index.d.ts

@@ -0,0 +1 @@
+export * from './Timeline';

package/lib/components/timeline/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './Timeline.js';

package/lib/hooks/useCache.d.ts

@@ -758,7 +758,7 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
         principalKind?: "user" | "organization" | "team";
     }) => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useToken: (tokenId: string) => import("@tanstack/react-query").UseQueryResult<IIAMToken | null | undefined, Error>;
-    useTokens: () => import("@tanstack/react-query").UseQueryResult<any, Error>;
+    useTokens: () => import("@tanstack/react-query").UseQueryResult<(IIAMToken | undefined)[], 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>;

package/lib/hooks/useCache.js

@@ -2166,11 +2166,12 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             queryKey: queryKeys.tokens.all(),
             queryFn: async () => {
                 const resp = await requestDatalayer({
-                    url: `${configuration.iamRunUrl}/api/iam/v1/tokens`,
+                    url: `${configuration.iamRunUrl}/api/iam/v1/api-keys`,
                     method: 'GET',
                 });
-                if (resp.success && resp.tokens) {
-                    const tokens = resp.tokens
+                const tokenItems = asArray(resp?.apiKeys ?? resp?.api_keys ?? resp?.tokens);
+                if (resp.success && tokenItems.length > 0) {
+                    const tokens = tokenItems
                         .map((t) => {
                         const token = toToken(t);
                         if (token) {
@@ -2194,7 +2195,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         return useMutation({
             mutationFn: async (token) => {
                 const resp = await requestDatalayer({
-                    url: `${configuration.iamRunUrl}/api/iam/v1/tokens`,
+                    url: `${configuration.iamRunUrl}/api/iam/v1/api-keys`,
                     method: 'POST',
                     body: {
                         ...token,
@@ -2202,8 +2203,9 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                     },
                 });
                 // Transform the token in the response
-                if (resp.success && resp.token) {
-                    resp.token = toToken(resp.token);
+                const tokenPayload = resp?.apiKey ?? resp?.api_key ?? resp?.token;
+                if (resp.success && tokenPayload) {
+                    resp.token = toToken(tokenPayload);
                 }
                 return resp;
             },
@@ -2515,11 +2517,12 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             queryKey: queryKeys.tokens.detail(tokenId),
             queryFn: async () => {
                 const resp = await requestDatalayer({
-                    url: `${configuration.iamRunUrl}/api/iam/v1/tokens/${tokenId}`,
+                    url: `${configuration.iamRunUrl}/api/iam/v1/api-keys/${tokenId}`,
                     method: 'GET',
                 });
-                if (resp.success && resp.token) {
-                    return toToken(resp.token);
+                const tokenPayload = resp?.apiKey ?? resp?.api_key ?? resp?.token;
+                if (resp.success && tokenPayload) {
+                    return toToken(tokenPayload);
                 }
                 return null;
             },
@@ -2534,14 +2537,15 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         return useMutation({
             mutationFn: async (token) => {
                 return requestDatalayer({
-                    url: `${configuration.iamRunUrl}/api/iam/v1/tokens/${token.id}`,
+                    url: `${configuration.iamRunUrl}/api/iam/v1/api-keys/${token.id}`,
                     method: 'PUT',
                     body: { ...token },
                 });
             },
             onSuccess: resp => {
-                if (resp.success && resp.token) {
-                    const tok = toToken(resp.token);
+                const tokenPayload = resp?.apiKey ?? resp?.api_key ?? resp?.token;
+                if (resp.success && tokenPayload) {
+                    const tok = toToken(tokenPayload);
                     if (tok) {
                         queryClient.setQueryData(queryKeys.tokens.detail(tok.id), tok);
                     }
@@ -2557,7 +2561,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         return useMutation({
             mutationFn: async (tokenId) => {
                 return requestDatalayer({
-                    url: `${configuration.iamRunUrl}/api/iam/v1/tokens/${tokenId}`,
+                    url: `${configuration.iamRunUrl}/api/iam/v1/api-keys/${tokenId}`,
                     method: 'DELETE',
                 });
             },

package/lib/hooks/useProjectStore.d.ts

@@ -16,7 +16,7 @@ export type ProjectRuntimeEntry = {
     agentName?: string;
     /** Agent runtime status (running, starting, terminated, etc.). */
     agentStatus?: string;
-    /** The agent spec ID used to create the runtime. */
+    /** The agentspec ID used to create the runtime. */
     agentSpecId?: string;
 };
 export type ProjectStoreState = {

package/lib/hooks/useProjects.d.ts

@@ -20,7 +20,7 @@ export type ProjectData = {
     isPublic: boolean;
     /** Attached agent (runtime) pod name, if any */
     attachedAgentPodName?: string;
-    /** Attached agent spec ID (e.g. 'data-acquisition'), if any */
+    /** Attached agentspec ID (e.g. 'data-acquisition'), if any */
     attachedAgentSpecId?: string;
 };
 /**
@@ -31,7 +31,7 @@ export type CreateProjectRequest = {
     name: string;
     /** Project description */
     description?: string;
-    /** Agent spec to attach (creates agent on project creation) */
+    /** Agentspec to attach (creates agent on project creation) */
     agentSpecId?: string;
 };
 /**

package/lib/models/IAMToken.d.ts

@@ -1,5 +1,5 @@
 export declare const asToken: (s: any) => IIAMToken;
-export type IIAMTokenVariant = 'user_token';
+export type IIAMTokenVariant = 'secret' | 'publishable' | 'restricted' | 'temporary';
 export type IIAMToken = {
     id: string;
     variant: IIAMTokenVariant;

package/lib/models/ProjectDTO.d.ts

@@ -66,7 +66,7 @@ export declare class ProjectDTO {
     get createdAt(): Date;
     /** Attached agent runtime pod name, if any. */
     get attachedAgentPodName(): string | undefined;
-    /** Attached agent spec ID (e.g., 'data-acquisition'), if any. */
+    /** Attached agentspec ID (e.g., 'data-acquisition'), if any. */
     get attachedAgentSpecId(): string | undefined;
     /** Human-readable name of the attached agent runtime, if any. */
     get attachedAgentGivenName(): string | undefined;

package/lib/models/ProjectDTO.js

@@ -69,7 +69,7 @@ export class ProjectDTO {
         this._checkDeleted();
         return this._data.attached_agent_pod_name_s || undefined;
     }
-    /** Attached agent spec ID (e.g., 'data-acquisition'), if any. */
+    /** Attached agentspec ID (e.g., 'data-acquisition'), if any. */
     get attachedAgentSpecId() {
         this._checkDeleted();
         return this._data.attached_agent_spec_id_s || undefined;

package/lib/state/substates/CoreState.js

@@ -4,7 +4,7 @@
  */
 import { createStore } from 'zustand/vanilla';
 import { useStore } from 'zustand';
-import { configLogger } from '../../utils/logger.js';
+import { configLogger } from '../../utils/Logger.js';
 let loadConfigurationFromServer = true;
 let initialConfiguration = {
     runUrl: 'https://prod1.datalayer.run',

package/lib/utils/Date.d.ts

@@ -6,6 +6,13 @@ export declare const timeSince: (date: Date) => string;
  * Examples: "just now", "15m ago", "3h ago", "2d ago", "4w ago", "1y ago".
  */
 export declare const formatRelativeTime: (value?: Date | string | number, now?: Date) => string | undefined;
+/**
+ * Build a detailed datetime string suitable for tooltips.
+ *
+ * Example:
+ * "2026-06-08T16:15:32.531Z • Jun 8, 2026, 6:15:32 PM CEST (Europe/Paris)"
+ */
+export declare const formatDateTimeDetails: (value?: Date | string | number) => string | undefined;
 /**
  * Format a duration in milliseconds into a human-readable string.
  *

package/lib/utils/Date.js

@@ -76,24 +76,57 @@ export const formatRelativeTime = (value, now = new Date()) => {
     if (Number.isNaN(ts)) {
         return typeof value === 'string' ? value : undefined;
     }
-    const diffMs = Math.max(0, now.getTime() - ts);
-    const seconds = Math.floor(diffMs / 1000);
-    if (seconds < 60)
-        return 'just now';
-    const minutes = Math.floor(seconds / 60);
+    const diffMs = ts - now.getTime();
+    const inFuture = diffMs > 0;
+    const absSeconds = Math.floor(Math.abs(diffMs) / 1000);
+    if (absSeconds < 30)
+        return inFuture ? 'in a few seconds' : 'just now';
+    const withDirection = (value, unit) => {
+        return inFuture ? `in ${value}${unit}` : `${value}${unit} ago`;
+    };
+    if (absSeconds < 60)
+        return withDirection(absSeconds, 's');
+    const minutes = Math.floor(absSeconds / 60);
     if (minutes < 60)
-        return `${minutes}m ago`;
+        return withDirection(minutes, 'm');
     const hours = Math.floor(minutes / 60);
     if (hours < 24)
-        return `${hours}h ago`;
+        return withDirection(hours, 'h');
     const days = Math.floor(hours / 24);
     if (days < 7)
-        return `${days}d ago`;
+        return withDirection(days, 'd');
     const weeks = Math.floor(days / 7);
     if (weeks < 52)
-        return `${weeks}w ago`;
+        return withDirection(weeks, 'w');
     const years = Math.floor(days / 365);
-    return `${years}y ago`;
+    return withDirection(years, 'y');
+};
+/**
+ * Build a detailed datetime string suitable for tooltips.
+ *
+ * Example:
+ * "2026-06-08T16:15:32.531Z • Jun 8, 2026, 6:15:32 PM CEST (Europe/Paris)"
+ */
+export const formatDateTimeDetails = (value) => {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    const date = value instanceof Date
+        ? value
+        : typeof value === 'number'
+            ? new Date(value)
+            : new Date(value);
+    const ts = date.getTime();
+    if (Number.isNaN(ts)) {
+        return typeof value === 'string' ? value : undefined;
+    }
+    const iso = date.toISOString();
+    const zone = Intl.DateTimeFormat().resolvedOptions().timeZone || 'local';
+    const local = new Intl.DateTimeFormat(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'long',
+    }).format(date);
+    return `${iso} • ${local} (${zone})`;
 };
 /**
  * Format a duration in milliseconds into a human-readable string.

package/lib/utils/index.d.ts

@@ -15,6 +15,7 @@ export * from './Ids';
 export * from './Jwt';
 export * from './Jupyter';
 export * from './Lazy';
+export * from './Logger';
 export * from './Msc';
 export * from './Name';
 export * from './Notebook';

package/lib/utils/index.js

@@ -19,6 +19,7 @@ export * from './Ids.js';
 export * from './Jwt.js';
 export * from './Jupyter.js';
 export * from './Lazy.js';
+export * from './Logger.js';
 export * from './Msc.js';
 export * from './Name.js';
 export * from './Notebook.js';

package/lib/views/api-keys/APIKeyEdit.d.ts

@@ -0,0 +1,8 @@
+export type APIKeyEditProps = {
+    /** Route to navigate after delete. Defaults to '/settings/iam/api-keys'. */
+    apiKeysListRoute?: string;
+    /** Whether to render the local edit title header. Defaults to true. */
+    showTitle?: boolean;
+};
+export declare const APIKeyEdit: ({ apiKeysListRoute, showTitle, }?: APIKeyEditProps) => import("react/jsx-runtime").JSX.Element;
+export default APIKeyEdit;