@datalayer/agent-runtimes 1.0.10 → 1.0.17

package/lib/components/context/SpaceSelect.js

@@ -0,0 +1,42 @@
+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 { useCallback, useEffect } from 'react';
+import { FormControl, Select } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useCache, useUser } from '@datalayer/core/lib/hooks';
+import { useLayoutStore } from '../../state/substates';
+export const SpaceSelect = () => {
+    const user = useUser();
+    const { organization, space, updateLayoutSpace } = useLayoutStore();
+    const { useRefreshUserSpaces, useUserSpaces, useRefreshOrganizationSpaces, useOrganizationSpaces, } = useCache();
+    const { mutate: refreshUserSpacesMutate } = useRefreshUserSpaces();
+    const { mutate: refreshOrganizationSpacesMutate } = useRefreshOrganizationSpaces();
+    const { data: organizationSpaces = [] } = useOrganizationSpaces(organization?.id ?? '');
+    const { data: userSpaces = [] } = useUserSpaces();
+    const spaces = organization ? organizationSpaces : userSpaces;
+    useEffect(() => {
+        if (organization?.id) {
+            refreshOrganizationSpacesMutate(organization.id);
+        }
+        else if (user) {
+            refreshUserSpacesMutate();
+        }
+    }, [
+        organization?.id,
+        refreshOrganizationSpacesMutate,
+        refreshUserSpacesMutate,
+        user,
+    ]);
+    const onSelectionChange = useCallback((event) => {
+        const selectedSpaceIndex = Number.parseInt(event.target.value, 10);
+        const selectedSpace = Number.isNaN(selectedSpaceIndex) || selectedSpaceIndex < 0
+            ? undefined
+            : spaces[selectedSpaceIndex];
+        updateLayoutSpace(selectedSpace);
+    }, [spaces, updateLayoutSpace]);
+    return (_jsx(_Fragment, { children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Select a space" }), _jsx(FormControl.Caption, { children: "This will go with you while you navigate" }), _jsx(Select, { block: true, width: "medium", onChange: onSelectionChange, placeholder: "Please select an space...", children: spaces.map((sp, index) => (_jsx(Select.Option, { value: `${index}`, selected: sp.id === space?.id, children: sp.name }, sp.id))) })] }) }) }));
+};
+export default SpaceSelect;

package/lib/components/flashes/FlashDisclaimer.d.ts

@@ -0,0 +1,2 @@
+export declare const FlashDisclaimer: () => import("react/jsx-runtime").JSX.Element;
+export default FlashDisclaimer;

package/lib/components/flashes/FlashDisclaimer.js

@@ -0,0 +1,17 @@
+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 { Label, Link } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Banner } from '@primer/react/experimental';
+import { useCoreStore, useRuntimesStore } from '../../state/substates';
+import { useNavigate } from '@datalayer/core/lib/hooks';
+export const FlashDisclaimer = () => {
+    const { configuration } = useCoreStore();
+    const { showDisclaimer, setShowDisclaimer } = useRuntimesStore();
+    const navigate = useNavigate();
+    return (_jsx(_Fragment, { children: configuration?.whiteLabel === false && showDisclaimer && (_jsx(Banner, { variant: "info", title: "AI Agents for Data Analysis", description: _jsxs(Box, { children: [_jsx(Label, { style: { marginRight: 10 }, children: "PRIVATE BETA" }), "Create Kernels and use them from your JupyterLab, VS Code or CLI. Read the", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/docs', e), children: "documentation" }), ' ', "for any question or", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/support/request', e), children: "contact us for support" }), "."] }), onDismiss: () => setShowDisclaimer(false) })) }));
+};
+export default FlashDisclaimer;

package/lib/components/icons/ArtifactIcon.d.ts

@@ -0,0 +1,10 @@
+import { Icon } from '@primer/octicons-react';
+import { IAnyItem, IItemType } from '../../models';
+type IArtifactIconClassProp = {
+    item?: IAnyItem;
+    type?: IItemType;
+    size?: number | 'small' | 'medium' | 'large';
+};
+export declare const ArtifactIconClass: (props: IArtifactIconClassProp) => Icon;
+export declare function ArtifactIcon(props: IArtifactIconClassProp): JSX.Element;
+export default ArtifactIcon;

package/lib/components/icons/ArtifactIcon.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createElement } from 'react';
+import { DatabaseIcon, RowsIcon, BookIcon, DiffModifiedIcon, PencilIcon, FeedIssueDraftIcon, FeedRocketIcon, MilestoneIcon, OrganizationIcon, PeopleIcon, RocketIcon, FileIcon, StackIcon, GearIcon, GraphIcon, NumberIcon, PaperAirplaneIcon, ArchiveIcon, TagIcon, MortarBoardIcon, ContainerIcon, HomeIcon, ShareIcon, FileDirectoryIcon, TrophyIcon, QuestionIcon, PersonIcon, MailIcon, ZapIcon, } from '@primer/octicons-react';
+import { GalileoIcon, CircleWhiteIcon, BookOpenIcon, CameraIcon, CellIcon, NotebookOutlineIcon, } from '@datalayer/icons-react';
+const ARTIFACT_ICONS = new Map([
+    ['assignment', MilestoneIcon],
+    ['authoring', PencilIcon],
+    ['cell', CellIcon],
+    ['content', ArchiveIcon],
+    ['credits', NumberIcon],
+    ['dataset', StackIcon],
+    ['datasource', DatabaseIcon],
+    ['document', FileIcon],
+    ['documentation', BookOpenIcon],
+    ['environment', ContainerIcon],
+    ['exercise', DiffModifiedIcon],
+    ['growth', FeedRocketIcon],
+    ['home', HomeIcon],
+    ['invite', PaperAirplaneIcon],
+    ['runtime', RocketIcon],
+    ['runtime-snapshot', CameraIcon],
+    ['library', BookIcon],
+    ['lesson', MortarBoardIcon],
+    ['mail', MailIcon],
+    ['management', FeedIssueDraftIcon],
+    ['notebook', RowsIcon],
+    ['organization', OrganizationIcon],
+    ['onboarding', ZapIcon],
+    ['page', NotebookOutlineIcon],
+    ['settings', GearIcon],
+    ['share', ShareIcon],
+    ['space', GalileoIcon],
+    ['success', TrophyIcon],
+    ['support', QuestionIcon],
+    ['storage', FileDirectoryIcon],
+    ['tag', TagIcon],
+    ['team', PeopleIcon],
+    ['usage', GraphIcon],
+    ['user', PersonIcon],
+    ['undefined', CircleWhiteIcon],
+]);
+export const ArtifactIconClass = (props) => {
+    const { item, type } = props;
+    const itemType = item?.type ?? type ?? 'undefined';
+    const icon = ARTIFACT_ICONS.get(itemType);
+    return icon ?? CircleWhiteIcon;
+};
+export function ArtifactIcon(props) {
+    const { size } = props;
+    const artifactIconClass = ArtifactIconClass(props);
+    return createElement(artifactIconClass, {
+        size: size ?? 16,
+    });
+}
+export default ArtifactIcon;

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

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

package/lib/components/icons/index.js

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

package/lib/components/index.d.ts

@@ -1,3 +1,8 @@
 export * from './ToolApprovalCard';
 export * from './NotificationEventCard';
 export * from './OutputCard';
+export * from './AgentSummary';
+export * from './a2ui';
+export * from './runtimes';
+export * from './snapshots';
+export * from './scheduler';

package/lib/components/index.js

@@ -5,3 +5,8 @@
 export * from './ToolApprovalCard';
 export * from './NotificationEventCard';
 export * from './OutputCard';
+export * from './AgentSummary';
+export * from './a2ui';
+export * from './runtimes';
+export * from './snapshots';
+export * from './scheduler';

package/lib/components/nbgrader/NbGradesDetails.d.ts

@@ -0,0 +1,5 @@
+import { IStudentItem } from '../../models';
+export declare const NbGradesDetails: (props: {
+    studentItem?: IStudentItem;
+}) => import("react/jsx-runtime").JSX.Element;
+export default NbGradesDetails;

package/lib/components/nbgrader/NbGradesDetails.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Heading, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+export const NbGradesDetails = (props) => {
+    const { studentItem } = props;
+    const nbgrades = Array.isArray(studentItem?.nbgrades)
+        ? studentItem.nbgrades
+        : [];
+    const totalScore = studentItem?.nbgradesTotalScore ?? 0;
+    const totalPoints = studentItem?.nbgradesTotalPoints ?? 0;
+    return studentItem ? (_jsxs(Box, { children: [_jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Grades" }) }), _jsx(Box, { mt: 3, children: nbgrades.length > 0 ? (nbgrades.map(nb => {
+                    return (_jsx(Box, { children: _jsxs(Text, { sx: { fontSize: 'small' }, children: [nb.grade_id_s, ": ", nb.score_f] }) }));
+                })) : (_jsx(Text, { sx: { fontSize: 'small' }, children: "No grade checks were returned." })) }), _jsx(Box, { mt: 3, children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Total" }) }), _jsxs(Box, { mt: 3, children: [totalScore, " / ", totalPoints] })] })) : (_jsxs(Box, { children: [_jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Grades" }) }), _jsx(Box, { mt: 3, children: "Please grade your assignment." })] }));
+};
+export default NbGradesDetails;

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

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

package/lib/components/nbgrader/index.js

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

package/lib/components/progress/CreditsIndicator.d.ts

@@ -0,0 +1,33 @@
+import type { IRemoteServicesManager } from '../../runtimes';
+type ICreditsIndicatorProps = {
+    /**
+     * Kernel service manager
+     */
+    serviceManager: IRemoteServicesManager;
+    /**
+     * Kernel ID
+     */
+    kernelId: string;
+    /**
+     * Route to navigate to when the indicator is clicked.
+     * Ignored if `onClick` is provided.
+     */
+    navigateTo?: string;
+    /**
+     * Callback on progress bar click event.
+     * Takes precedence over `navigateTo`.
+     */
+    onClick?: () => void;
+    /**
+     * Callback on progress update.
+     *
+     * Progress is a percentage between 0 and 100.
+     * Duration is the kernel max duration
+     */
+    onUpdate?: (progress: number, duration: number) => void;
+};
+/**
+ * Credits indicator component.
+ */
+export declare function CreditsIndicator(props: ICreditsIndicatorProps): JSX.Element | null;
+export {};

package/lib/components/progress/CreditsIndicator.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState, useEffect } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { useNavigate } from '@datalayer/core/lib/hooks/useNavigate';
+import { ConsumptionBar } from '@datalayer/core/lib/components/progress/ConsumptionBar';
+/**
+ * Credits indicator component.
+ */
+export function CreditsIndicator(props) {
+    const { serviceManager, kernelId, navigateTo, onClick, onUpdate } = props;
+    const navigate = useNavigate();
+    const [model, setModel] = useState();
+    useEffect(() => {
+        serviceManager.runtimesManager.findById(kernelId).then(model => {
+            setModel(model);
+        });
+    }, [kernelId, serviceManager]);
+    return model ? (_jsx(Box, { display: "flex", style: { alignItems: 'center' }, children: _jsx(ConsumptionBar, { startedAt: parseFloat(model.started_at), expiredAt: model.expired_at ? parseFloat(model.expired_at) : undefined, burningRate: model.burning_rate, onClick: onClick ?? (navigateTo ? () => navigate(navigateTo) : undefined), onUpdate: onUpdate, style: { cursor: 'pointer' } }) })) : (_jsx(_Fragment, {}));
+}

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

@@ -0,0 +1,2 @@
+export * from './CreditsIndicator';
+export * from '@datalayer/core/lib/components/progress';

package/lib/components/progress/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './CreditsIndicator';
+export * from '@datalayer/core/lib/components/progress';

package/lib/components/runtimes/RuntimeCellVariables.d.ts

@@ -0,0 +1,39 @@
+import { ITranslator } from '@jupyterlab/translation';
+/**
+ * {@link RuntimeCellVariables} properties
+ */
+interface IRuntimeCellVariablesProps {
+    /**
+     * Variable names to be imported
+     */
+    inputs: string[];
+    /**
+     * Importable variable names
+     */
+    getInputOptions?: () => Promise<string[]>;
+    /**
+     * Set the variable names to be imported
+     */
+    setInputs: (values: string[]) => void;
+    /**
+     * Variable name to be exported
+     */
+    output?: string;
+    /**
+     * Exportable variable names
+     */
+    getOutputOptions?: () => Promise<string[]>;
+    /**
+     * Set the variable name to be exported
+     */
+    setOutput: (value?: string) => void;
+    /**
+     * Application translator object
+     */
+    translator?: ITranslator;
+}
+/**
+ * Runtime Cell Variables Picker.
+ */
+export declare function RuntimeCellVariables(props: IRuntimeCellVariablesProps): JSX.Element;
+export default RuntimeCellVariables;

package/lib/components/runtimes/RuntimeCellVariables.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { nullTranslator } from '@jupyterlab/translation';
+import { JSONExt } from '@lumino/coreutils';
+import { Autocomplete, FormControl, TextInputWithTokens } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+/**
+ * Runtime Cell Variables Picker.
+ */
+export function RuntimeCellVariables(props) {
+    const { getInputOptions, getOutputOptions, inputs, output, setInputs, setOutput, translator, } = props;
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    const inputForOutputRef = useRef(null);
+    const [willSaveOutput, setWillSaveOutput] = useState(false);
+    const [inputLoading, setInputLoading] = useState(!!getInputOptions);
+    const [outputsState, setOutputsState] = useState(null);
+    const [inputsState, setInputsState] = useState(inputs.map(id => ({ id, text: id, selected: true })));
+    const [filterVal, setFilterVal] = useState('');
+    // Add inputs prop in inputsState
+    useEffect(() => {
+        const candidates = inputs.filter(item => !inputsState.find(localItem => localItem.text === item));
+        if (candidates.length) {
+            setInputsState([
+                ...inputsState,
+                ...candidates.map(text => ({ id: text, text, selected: true })),
+            ]);
+        }
+    }, [inputs]);
+    // Update inputs with selected inputsState
+    useEffect(() => {
+        const candidates = inputsState
+            .filter(item => item.selected)
+            .map(item => item.text);
+        if (!JSONExt.deepEqual(inputs, candidates)) {
+            setInputs(candidates);
+        }
+    }, [inputsState]);
+    // Fetch the input candidates
+    useEffect(() => {
+        if (!inputLoading) {
+            return;
+        }
+        if (getInputOptions) {
+            getInputOptions().then(ins => {
+                const oldItems = inputsState.map(i => i.text);
+                setInputsState([
+                    ...inputsState,
+                    ...ins
+                        .sort()
+                        .filter(item => !oldItems.includes(item))
+                        .map(text => ({
+                        id: text,
+                        text,
+                        selected: false,
+                    })),
+                ]);
+                setInputLoading(false);
+            });
+        }
+        else {
+            setInputLoading(false);
+        }
+    }, [inputsState, getInputOptions]);
+    // Fetch the output candidates
+    useEffect(() => {
+        if (getOutputOptions) {
+            Promise.all([getOutputOptions(), getInputOptions?.()])
+                .then(([outs, ins]) => {
+                setOutputsState(
+                // Add input variables as output candidate to cover
+                // mutation case
+                outs
+                    .sort()
+                    .concat((ins ?? []).sort())
+                    // Remove duplicated variables; it may happen if
+                    // the code introspection matches an input.
+                    .reduce((agg, value) => {
+                    if (!agg.includes(value)) {
+                        agg.push(value);
+                    }
+                    return agg;
+                }, [])
+                    .map(text => ({
+                    id: text,
+                    text,
+                    selected: false,
+                })));
+            })
+                .catch(err => {
+                console.error('Failed to get the cell output candidates', err);
+                setOutputsState([]);
+            });
+        }
+    }, [getOutputOptions, getInputOptions]);
+    const onTokenRemove = useCallback((tokenId) => {
+        const idx = inputsState.findIndex(item => item.id === tokenId);
+        if (idx >= 0) {
+            inputsState.splice(idx, 1);
+            setInputsState([...inputsState]);
+        }
+    }, [inputsState]);
+    const onSelectedInputsChange = useCallback((newlySelectedItems) => {
+        if (!Array.isArray(newlySelectedItems)) {
+            newlySelectedItems = [newlySelectedItems];
+        }
+        const selectedIds = newlySelectedItems.map(i => i.id);
+        setInputsState([
+            ...inputsState.map(localItem => selectedIds.includes(localItem.id)
+                ? Object.assign(localItem, { selected: true })
+                : Object.assign(localItem, { selected: false })),
+        ]);
+    }, [inputsState]);
+    const onItemSelect = useCallback((item) => {
+        const oldItem = inputsState.find(localItem => localItem.id === item.id);
+        if (!oldItem) {
+            setInputsState([...inputsState, item]);
+        }
+        else {
+            oldItem.selected = true;
+            setInputsState([...inputsState]);
+        }
+    }, [inputsState]);
+    const handleChange = useCallback((e) => {
+        if (e.currentTarget) {
+            setFilterVal(e.currentTarget.value);
+        }
+    }, []);
+    const onOutputChange = useCallback((e) => {
+        if (e.currentTarget) {
+            setOutput(e.currentTarget.value);
+        }
+    }, []);
+    const handleOutputMenuOpenChange = useCallback(
+    // There is a bug in primer Autocomplete that lead to the suggestion
+    // not triggering the `onChange` callback. So to fix it here, we
+    // use a pointer to the underlying input element to get the value
+    // and set it when the autocompletion menu closes.
+    (open) => {
+        if (!willSaveOutput) {
+            if (open) {
+                setWillSaveOutput(true);
+            }
+            return;
+        }
+        if (inputForOutputRef.current && !open) {
+            setOutput(inputForOutputRef.current.value);
+            setWillSaveOutput(false);
+        }
+    }, [willSaveOutput]);
+    return (_jsxs(Box, { as: "form", sx: { p: 3 }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { id: "cell-input-variables", children: trans.__('Inputs') }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { as: TextInputWithTokens, tokens: inputsState.filter(item => item.selected), onTokenRemove: onTokenRemove, onChange: handleChange }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { addNewItem: filterVal &&
+                                        !inputsState.find(localItem => localItem.text === filterVal)
+                                        ? {
+                                            id: filterVal,
+                                            text: trans.__("Add '%1'", filterVal),
+                                            handleAddItem: item => {
+                                                onItemSelect({
+                                                    ...item,
+                                                    text: filterVal,
+                                                    selected: true,
+                                                });
+                                                setFilterVal('');
+                                            },
+                                        }
+                                        : undefined, items: inputsState, selectedItemIds: inputsState
+                                        .filter(item => item.selected)
+                                        .map(item => item.id), onSelectedChange: onSelectedInputsChange, "aria-labelledby": "cell-input-variables", selectionVariant: "multiple", emptyStateText: trans.__('No available variables.'), loading: inputLoading }) })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { id: "cell-output-variables", children: trans.__('Output') }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { ref: inputForOutputRef, value: output, onChange: onOutputChange }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: outputsState ?? [], selectedItemIds: output ? [output] : [], "aria-labelledby": "cell-output-variables", loading: getOutputOptions && !outputsState, emptyStateText: trans.__('Not among the available variables.'), onOpenChange: handleOutputMenuOpenChange }) })] })] })] }));
+}
+export default RuntimeCellVariables;

package/lib/components/runtimes/RuntimeCellVariablesDialog.d.ts

@@ -0,0 +1,37 @@
+import { ISessionContext } from '@jupyterlab/apputils';
+import { CodeCellModel } from '@jupyterlab/cells';
+import { ITranslator } from '@jupyterlab/translation';
+/**
+ * {@link RuntimeCellVariablesDialog} properties
+ */
+export interface IRuntimeCellVariablesDialogProps {
+    /**
+     * Code cell model
+     */
+    model: CodeCellModel;
+    /**
+     * Callback request the dialog closure.
+     */
+    onClose: () => void;
+    /**
+     * Session preference
+     */
+    preference?: {
+        id?: string;
+        kernelDisplayName?: string;
+        language?: string;
+    };
+    /**
+     * Document session context
+     */
+    sessionContext?: ISessionContext;
+    /**
+     * Application translator
+     */
+    translator?: ITranslator;
+}
+/**
+ * Dialog to define the runtime cell variables to transfer
+ */
+export declare function RuntimeCellVariablesDialog(props: IRuntimeCellVariablesDialogProps): JSX.Element;
+export default RuntimeCellVariablesDialog;

package/lib/components/runtimes/RuntimeCellVariablesDialog.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Dialog } from '@primer/react/experimental';
+import { nullTranslator } from '@jupyterlab/translation';
+import { JSONExt } from '@lumino/coreutils';
+import { KernelExecutor } from '@datalayer/jupyter-react';
+import { RuntimeSnippetsFacade } from '../../jupyter';
+import { RuntimeCellVariables } from './RuntimeCellVariables';
+/**
+ * Dialog to define the runtime cell variables to transfer
+ */
+export function RuntimeCellVariablesDialog(props) {
+    const { onClose, model, preference, sessionContext, translator } = props;
+    const [inputs, setInputs] = useState([]);
+    const [output, setOutput] = useState();
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    useEffect(() => {
+        const updateState = (model) => {
+            const datalayerMeta = model.getMetadata('datalayer') ?? {};
+            if (datalayerMeta.in && !JSONExt.deepEqual(inputs, datalayerMeta.in)) {
+                setInputs(datalayerMeta.in);
+            }
+            if (datalayerMeta.out && datalayerMeta.out !== output) {
+                setOutput(datalayerMeta.out);
+            }
+        };
+        updateState(model);
+        model.metadataChanged.connect(updateState);
+        return () => {
+            model.metadataChanged.disconnect(updateState);
+        };
+    }, [model, inputs, output]);
+    const setVariables = useCallback(() => {
+        const datalayerMeta = model.getMetadata('datalayer') ?? {};
+        if (inputs.length) {
+            datalayerMeta.in = inputs;
+        }
+        else {
+            delete datalayerMeta.in;
+        }
+        if (output) {
+            datalayerMeta.out = output;
+        }
+        else {
+            delete datalayerMeta.out;
+        }
+        model.setMetadata('datalayer', { ...datalayerMeta });
+        onClose();
+    }, [model, inputs, output, onClose]);
+    const getInputCandidates = useCallback(async () => {
+        if (!sessionContext) {
+            return [];
+        }
+        const connection = sessionContext.session.kernel;
+        const spec = sessionContext.specsManager.specs.kernelspecs[connection.model.name];
+        const snippets = new RuntimeSnippetsFacade(spec.language);
+        const outputs = await new KernelExecutor({ connection }).execute(snippets.listVariables());
+        const content = outputs.get(0).data['text/plain'];
+        if (content) {
+            const runtimeVariables = JSON.parse(
+            // We need to remove the quotes prior to parsing
+            content.slice(1, content.length - 1));
+            return Object.keys(runtimeVariables ?? {});
+        }
+        return [];
+    }, [preference, sessionContext]);
+    const getOutputCandidates = useCallback(async () => {
+        // TODO this is only valid for python - using cell mimetype?
+        return new RuntimeSnippetsFacade('python').getOutputCandidates(model.sharedModel.source);
+    }, [model]);
+    const datalayerMeta = model.getMetadata('datalayer') ?? {};
+    let title = 'Define cell variables to transfer';
+    const kernel = datalayerMeta.kernel ?? {};
+    const kernelName = (kernel.displayName || kernel.name) ?? '';
+    if (kernelName) {
+        if (kernel.params?.notebook !== false && kernel.id) {
+            title += ` with running ${kernelName} (${kernel.id.slice(0, 7)})`;
+        }
+        else {
+            title += ` with ${kernelName}`;
+        }
+    }
+    return (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: title }), onClose: onClose, footerButtons: [
+            {
+                buttonType: 'default',
+                content: trans.__('Cancel'),
+                onClick: onClose,
+            },
+            {
+                buttonType: 'primary',
+                content: trans.__('Set variables'),
+                onClick: setVariables,
+                autoFocus: true,
+            },
+        ], children: _jsx(RuntimeCellVariables, { inputs: inputs, getInputOptions: sessionContext ? getInputCandidates : undefined, setInputs: setInputs, output: output ?? undefined, getOutputOptions: getOutputCandidates, setOutput: setOutput, translator: translator }) }));
+}
+export default RuntimeCellVariablesDialog;