@datalayer/agent-runtimes 1.0.9 → 1.0.17

package/lib/collaboration/DatalayerCollaboration.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Fetch the session ID of a collaborative document from Datalayer.
+ */
+export async function requestDatalayerCollaborationSessionId({ url, token, fetchFn = fetch, }) {
+    const headers = {
+        Accept: 'application/json',
+    };
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+    const response = await fetchFn(url, {
+        method: 'GET',
+        headers,
+        credentials: token ? 'include' : 'omit',
+        mode: 'cors',
+        cache: 'no-store',
+    });
+    if (response.ok) {
+        const content = await response.json();
+        return content['sessionId'];
+    }
+    console.error('Failed to fetch session ID.', response);
+    throw new Error('Failed to fetch session ID.');
+}

package/lib/collaboration/DatalayerCollaborationProvider.d.ts

@@ -0,0 +1,58 @@
+import type { ICollaborationProvider, ICollaborationProviderEvents } from '@datalayer/jupyter-react';
+import { WebsocketProvider } from 'y-websocket';
+export declare enum CollaborationStatus {
+    Disconnected = "disconnected",
+    Connecting = "connecting",
+    Connected = "connected",
+    Error = "error"
+}
+type SharedModel = Parameters<ICollaborationProvider['connect']>[0];
+type ConnectOptions = Parameters<ICollaborationProvider['connect']>[2];
+/**
+ * Configuration for Datalayer collaboration provider.
+ */
+export interface IDatalayerCollaborationConfig {
+    /**
+     * Base URL for the Datalayer server (optional, uses config from store if not provided).
+     */
+    datalayerUrl?: string;
+    /**
+     * Authentication token (optional, uses config from store if not provided).
+     */
+    token?: string;
+    /**
+     * Custom fetch function to use for HTTP requests.
+     * Useful for proxying requests in environments with CORS restrictions (e.g., VS Code webviews).
+     */
+    fetchFn?: typeof fetch;
+}
+/**
+ * Datalayer collaboration provider.
+ */
+export declare class DatalayerCollaborationProvider implements ICollaborationProvider {
+    readonly type = "datalayer";
+    private _status;
+    private _provider;
+    private _sharedModel;
+    private _statusChanged;
+    private _errorOccurred;
+    private _syncStateChanged;
+    private _isDisposed;
+    private _config;
+    private _onSync;
+    private _onConnectionClose;
+    constructor(config: IDatalayerCollaborationConfig);
+    get status(): CollaborationStatus;
+    get isConnected(): boolean;
+    get isDisposed(): boolean;
+    get events(): ICollaborationProviderEvents;
+    private setStatus;
+    connect(sharedModel: SharedModel, documentId: string, options?: ConnectOptions): Promise<void>;
+    disconnect(): void;
+    getProvider(): WebsocketProvider | null;
+    getSharedModel(): SharedModel | null;
+    handleConnectionClose(event: CloseEvent): void;
+    handleSync(isSynced: boolean): void;
+    dispose(): void;
+}
+export default DatalayerCollaborationProvider;

package/lib/collaboration/DatalayerCollaborationProvider.js

@@ -0,0 +1,148 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { URLExt } from '@jupyterlab/coreutils';
+import { Signal } from '@lumino/signaling';
+import { WebsocketProvider } from 'y-websocket';
+import { requestDatalayerCollaborationSessionId } from './DatalayerCollaboration';
+export var CollaborationStatus;
+(function (CollaborationStatus) {
+    CollaborationStatus["Disconnected"] = "disconnected";
+    CollaborationStatus["Connecting"] = "connecting";
+    CollaborationStatus["Connected"] = "connected";
+    CollaborationStatus["Error"] = "error";
+})(CollaborationStatus || (CollaborationStatus = {}));
+/**
+ * Datalayer collaboration provider.
+ */
+export class DatalayerCollaborationProvider {
+    type = 'datalayer';
+    _status = CollaborationStatus.Disconnected;
+    _provider = null;
+    _sharedModel = null;
+    _statusChanged = new Signal(this);
+    _errorOccurred = new Signal(this);
+    _syncStateChanged = new Signal(this);
+    _isDisposed = false;
+    _config;
+    _onSync = null;
+    _onConnectionClose = null;
+    constructor(config) {
+        this._config = config;
+    }
+    get status() {
+        return this._status;
+    }
+    get isConnected() {
+        return this._status === CollaborationStatus.Connected;
+    }
+    get isDisposed() {
+        return this._isDisposed;
+    }
+    get events() {
+        return {
+            statusChanged: this._statusChanged,
+            errorOccurred: this._errorOccurred,
+            syncStateChanged: this._syncStateChanged,
+        };
+    }
+    setStatus(status) {
+        if (this._status !== status) {
+            this._status = status;
+            this._statusChanged.emit(status);
+        }
+    }
+    async connect(sharedModel, documentId, options) {
+        if (this.isConnected) {
+            console.warn('Already connected to Datalayer collaboration service');
+            return;
+        }
+        this.setStatus(CollaborationStatus.Connecting);
+        try {
+            const datalayerUrl = this._config.datalayerUrl;
+            const token = this._config.token;
+            if (!datalayerUrl) {
+                throw new Error('Datalayer datalayerUrl is not configured - must be explicitly provided in DatalayerCollaborationProvider config');
+            }
+            if (!token) {
+                throw new Error('Datalayer token is not configured - must be explicitly provided in DatalayerCollaborationProvider config');
+            }
+            const { ydoc, awareness } = sharedModel;
+            const documentURL = URLExt.join(datalayerUrl, '/api/spacer/v1/documents');
+            const wsUrl = URLExt.join(datalayerUrl, '/api/spacer/v1/documents/ws').replace(/^http/, 'ws');
+            const sessionId = await requestDatalayerCollaborationSessionId({
+                url: URLExt.join(documentURL, documentId),
+                token,
+                fetchFn: this._config.fetchFn,
+            });
+            this._provider = new WebsocketProvider(wsUrl, documentId, ydoc, {
+                disableBc: true,
+                params: {
+                    sessionId,
+                    token,
+                },
+                awareness,
+                ...options,
+            });
+            this._sharedModel = sharedModel;
+            this._onSync = (isSynced) => {
+                this.handleSync(isSynced);
+            };
+            this._onConnectionClose = (event) => {
+                if (event) {
+                    this.handleConnectionClose(event);
+                }
+            };
+            this._provider.on('sync', this._onSync);
+            this._provider.on('connection-close', this._onConnectionClose);
+            console.log('Connected to Datalayer collaboration service');
+        }
+        catch (error) {
+            this.setStatus(CollaborationStatus.Error);
+            this._errorOccurred.emit(error);
+            throw error;
+        }
+    }
+    disconnect() {
+        if (this._provider) {
+            if (this._onSync) {
+                this._provider.off('sync', this._onSync);
+            }
+            if (this._onConnectionClose) {
+                this._provider.off('connection-close', this._onConnectionClose);
+            }
+            this._provider.disconnect();
+            this._provider = null;
+        }
+        this._sharedModel = null;
+        this.setStatus(CollaborationStatus.Disconnected);
+    }
+    getProvider() {
+        return this._provider;
+    }
+    getSharedModel() {
+        return this._sharedModel;
+    }
+    handleConnectionClose(event) {
+        console.warn('Collaboration connection closed:', event);
+        this.setStatus(CollaborationStatus.Disconnected);
+        if (event.code === 4002) {
+            console.warn('Datalayer collaboration session expired');
+        }
+    }
+    handleSync(isSynced) {
+        this._syncStateChanged.emit(isSynced);
+        if (isSynced) {
+            this.setStatus(CollaborationStatus.Connected);
+        }
+    }
+    dispose() {
+        if (this._isDisposed) {
+            return;
+        }
+        this.disconnect();
+        this._isDisposed = true;
+    }
+}
+export default DatalayerCollaborationProvider;

package/lib/collaboration/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DatalayerCollaboration';
+export * from './DatalayerCollaborationProvider';

package/lib/collaboration/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './DatalayerCollaboration';
+export * from './DatalayerCollaborationProvider';

package/lib/components/AgentSummary.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface AgentSummaryData {
+    agentName: string;
+    location: string;
+    specId?: string;
+    status?: string;
+    baseUrl?: string;
+    agentId?: string;
+    isReady?: boolean;
+    error?: string;
+}
+export interface AgentSummaryProps {
+    summary: AgentSummaryData | null;
+    title?: string;
+}
+/**
+ * Compact agent summary badge with a hover overlay for details.
+ */
+export declare const AgentSummary: React.FC<AgentSummaryProps>;

package/lib/components/AgentSummary.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState } from 'react';
+import { Spinner } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+/**
+ * Statuses that represent an agent actively being created/started. The spinner
+ * only shows for these; app-navigation states ("selected", "switching") and
+ * settled states ("ready", "running", ...) never spin.
+ */
+const CREATING_STATUSES = new Set([
+    'creating',
+    'starting',
+    'launching',
+    'connecting',
+    'pending',
+    'resuming',
+]);
+/**
+ * Compact agent summary badge with a hover overlay for details.
+ */
+export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
+    const [isHovering, setIsHovering] = useState(false);
+    const runtimeStatusUrl = summary?.baseUrl
+        ? (() => {
+            const normalized = summary.baseUrl.replace(/\/$/, '');
+            if (normalized.endsWith('/api/v1')) {
+                return `${normalized}/runtime/status`;
+            }
+            return `${normalized}/api/v1/runtime/status`;
+        })()
+        : undefined;
+    if (!summary) {
+        return null;
+    }
+    const normalizedStatus = (summary.status || '').toLowerCase();
+    // Only show the spinner while the agent is genuinely being created: it is not
+    // ready, has no id yet, and its status is an active creation/startup state.
+    const isCreating = !summary.isReady &&
+        !summary.agentId &&
+        CREATING_STATUSES.has(normalizedStatus);
+    const hasError = Boolean(summary.error);
+    return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: [_jsxs(Box, { as: "button", type: "button", sx: {
+                    px: 2,
+                    py: '6px',
+                    border: '1px solid',
+                    borderColor: hasError ? 'danger.emphasis' : 'border.default',
+                    borderRadius: 2,
+                    bg: hasError ? 'danger.subtle' : 'canvas.default',
+                    color: hasError ? 'danger.fg' : 'fg.default',
+                    fontSize: 0,
+                    cursor: 'default',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                }, children: [isCreating && _jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), hasError && _jsx("span", { "aria-hidden": true, children: "\u26A0" }), summary.agentName, " \u00B7 ", summary.location] }), isHovering && (_jsxs(Box, { sx: {
+                    position: 'absolute',
+                    top: 'calc(100% + 8px)',
+                    right: 0,
+                    width: 360,
+                    p: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.overlay',
+                    boxShadow: 'shadow.large',
+                    zIndex: 120,
+                    fontSize: 0,
+                    color: 'fg.default',
+                }, children: [_jsx(Box, { sx: { mb: 1, fontWeight: 600 }, children: title }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Name: ", summary.agentName] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Location: ", summary.location] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Spec: ", summary.specId || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Status: ", isCreating ? 'creating' : summary.status || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Base URL: ", summary.baseUrl || '—'] }), _jsxs(Box, { sx: {
+                            color: 'fg.muted',
+                            wordBreak: 'break-all',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1,
+                        }, children: ["Agent ID:", ' ', summary.agentId ? (summary.agentId) : isCreating ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), "Creating\u2026"] })) : ('—')] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Runtime status:", ' ', runtimeStatusUrl ? (_jsx(Box, { as: "a", href: runtimeStatusUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: runtimeStatusUrl })) : ('n/a')] }), hasError && (_jsxs(Box, { sx: {
+                            mt: 1,
+                            p: 1,
+                            border: '1px solid',
+                            borderColor: 'danger.muted',
+                            borderRadius: 2,
+                            bg: 'danger.subtle',
+                            color: 'danger.fg',
+                            wordBreak: 'break-word',
+                        }, children: ["Error: ", summary.error] }))] }))] }));
+};

package/lib/components/ToolApprovalCard.js

@@ -30,6 +30,18 @@ export function ToolApprovalCard({ approval, onApprove, onReject, onToggleRead,
     const detailLabelSx = { color: 'fg.muted' };
     const detailValueSx = { color: 'fg.default' };
     const isRead = approval.isRead ?? false;
+    const statusDescriptor = approval.status === 'approved_with_changes'
+        ? 'approved with changes'
+        : approval.status;
+    // Review text must follow status, not only reviewedAt.
+    // Some websocket flows can have an already-decided status before reviewer
+    // metadata is hydrated; rendering "review pending" in that window is
+    // misleading, so non-pending statuses get a status-based summary.
+    const reviewSummary = approval.reviewedAt
+        ? `, reviewed by ${approval.reviewedBy || 'reviewer'} ${formatRelativeTime(approval.reviewedAt)}`
+        : approval.status === 'pending'
+            ? ', review pending'
+            : `, ${statusDescriptor}`;
     return (_jsx(Box, { sx: {
             p: 3,
             borderRadius: 2,
@@ -47,9 +59,7 @@ export function ToolApprovalCard({ approval, onApprove, onReject, onToggleRead,
                                 gap: 2,
                                 mb: 1,
                                 flexWrap: 'wrap',
-                            }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: approval.toolName }), _jsx(Label, { variant: statusConfig.variant, children: statusConfig.label }), _jsx(Label, { variant: riskConfig.variant, children: riskConfig.label }), !isRead && _jsx(Label, { variant: "accent", children: "Unread" })] }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: ["Requested by ", approval.requestedBy, ' ', formatRelativeTime(approval.requestedAt), approval.reviewedAt
-                                    ? `, reviewed by ${approval.reviewedBy || 'reviewer'} ${formatRelativeTime(approval.reviewedAt)}`
-                                    : ', review pending'] }), _jsx(Box, { sx: {
+                            }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: approval.toolName }), _jsx(Label, { variant: statusConfig.variant, children: statusConfig.label }), _jsx(Label, { variant: riskConfig.variant, children: riskConfig.label }), !isRead && _jsx(Label, { variant: "accent", children: "Unread" })] }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: ["Requested by ", approval.requestedBy, ' ', formatRelativeTime(approval.requestedAt), reviewSummary] }), _jsx(Box, { sx: {
                                 mt: 2,
                                 width: '100%',
                                 p: 2,

package/lib/components/a2ui/A2uiSurfaceComposed.d.ts

@@ -0,0 +1,13 @@
+import { type ReactComponentImplementation } from '@a2ui/react/v0_9';
+import type { SurfaceModel } from '@a2ui/web_core/v0_9';
+export interface A2uiSurfaceComposedProps {
+    surface: SurfaceModel<ReactComponentImplementation>;
+}
+/**
+ * Composed surface wrapper for all A2UI v0.9 consumers.
+ *
+ * This normalizes class names when upstream CSS modules are absent and applies
+ * basic semantic classes so application-level styles can consistently target
+ * rendered A2UI HTML.
+ */
+export declare function A2uiSurfaceComposed({ surface }: A2uiSurfaceComposedProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/a2ui/A2uiSurfaceComposed.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useRef } from 'react';
+import { A2uiSurface, } from '@a2ui/react/v0_9';
+function applyA2uiClassFallbacks(root) {
+    root.querySelectorAll('button').forEach(el => {
+        el.classList.remove('undefined');
+        const btn = el;
+        // Tab headers are not regular primary buttons: they need to convey which
+        // one is selected. Leave them to the `.a2ui-tab-button` scope styles and
+        // clear inline declarations so the class-driven active state can apply.
+        if (btn.classList.contains('a2ui-tab-button')) {
+            btn.style.removeProperty('background');
+            btn.style.removeProperty('border');
+            btn.style.removeProperty('color');
+            btn.style.removeProperty('border-radius');
+            return;
+        }
+        // Choice-picker chips are toggle buttons whose selected/unselected state is
+        // driven by React (class `selected` + `aria-pressed`). Do NOT coerce them
+        // into primary buttons: React rewrites their className on every toggle,
+        // which would drop injected classes, and the observer does not watch
+        // attribute mutations. Let the `.chip` scope styles handle both states.
+        if (btn.classList.contains('chip')) {
+            btn.style.removeProperty('background');
+            btn.style.removeProperty('background-color');
+            btn.style.removeProperty('border');
+            btn.style.removeProperty('color');
+            return;
+        }
+        if (!el.classList.contains('a2ui-button')) {
+            el.classList.add('a2ui-button');
+        }
+        if (!el.classList.contains('a2ui-button-primary')) {
+            el.classList.add('a2ui-button-primary');
+        }
+        // Ensure class-driven theming can react live to CSS variable changes by
+        // clearing any stale inline declarations from previous renders.
+        btn.style.removeProperty('background');
+        btn.style.removeProperty('border');
+        btn.style.removeProperty('color');
+        btn.style.removeProperty('border-radius');
+        btn.style.removeProperty('padding');
+        btn.style.removeProperty('font-weight');
+        btn.style.removeProperty('cursor');
+    });
+    root
+        .querySelectorAll("input[type='text'], input[type='number'], input[type='password'], input[type='datetime-local'], textarea")
+        .forEach(el => {
+        el.classList.remove('undefined');
+        if (!el.classList.contains('a2ui-textfield-input')) {
+            el.classList.add('a2ui-textfield-input');
+        }
+    });
+    root.querySelectorAll('label').forEach(el => {
+        el.classList.remove('undefined');
+        if (!el.classList.contains('a2ui-textfield-label')) {
+            el.classList.add('a2ui-textfield-label');
+        }
+    });
+    root.querySelectorAll('span').forEach(el => {
+        if (el.textContent && /invalid|required|error/i.test(el.textContent)) {
+            if (!el.classList.contains('a2ui-textfield-error')) {
+                el.classList.add('a2ui-textfield-error');
+            }
+        }
+    });
+    root.querySelectorAll('.body, .caption').forEach(el => {
+        el.classList.remove('undefined');
+        if (!el.classList.contains('a2ui-text')) {
+            el.classList.add('a2ui-text');
+        }
+        if (el.classList.contains('caption') &&
+            !el.classList.contains('a2ui-caption')) {
+            el.classList.add('a2ui-caption');
+        }
+    });
+}
+/**
+ * Composed surface wrapper for all A2UI v0.9 consumers.
+ *
+ * This normalizes class names when upstream CSS modules are absent and applies
+ * basic semantic classes so application-level styles can consistently target
+ * rendered A2UI HTML.
+ */
+export function A2uiSurfaceComposed({ surface }) {
+    const rootRef = useRef(null);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const apply = () => applyA2uiClassFallbacks(root);
+        apply();
+        const observer = new MutationObserver(() => {
+            apply();
+        });
+        observer.observe(root, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [surface]);
+    return (_jsx("div", { ref: rootRef, children: _jsx(A2uiSurface, { surface: surface }) }));
+}

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

@@ -0,0 +1,2 @@
+export * from './A2uiSurfaceComposed';
+export * from './styles';

package/lib/components/a2ui/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './A2uiSurfaceComposed';
+export * from './styles';

package/lib/components/a2ui/styles.d.ts

@@ -0,0 +1,14 @@
+import type { BetterSystemStyleObject } from '@primer/react';
+/**
+ * Shared style scope for A2UI-rendered HTML.
+ *
+ * Uses A2UI CSS custom properties so consumers can drive visuals from their
+ * own theme system (Primer tokens, app-level variables, etc.).
+ *
+ * NOTE: This must be a plain style object (not the result of
+ * `@styled-system/css`), because it is consumed by spreading into a Primer
+ * `sx` prop (`sx={{ ...A2UI_RENDER_SCOPE_SX }}`). `css()` returns a *function*,
+ * which spreads to `{}` and silently drops every rule — leaving A2UI surfaces
+ * unthemed (browser-default grey, ignoring color mode).
+ */
+export declare const A2UI_RENDER_SCOPE_SX: BetterSystemStyleObject;