@datalayer/agent-runtimes 1.0.10 → 1.0.17

package/lib/components/snapshots/SandboxSnapshotMenu.js

@@ -0,0 +1,169 @@
+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, useState, } from 'react';
+import { DeviceCameraIcon } from '@primer/octicons-react';
+import { ActionList, ActionMenu, Flash, FormControl, Select, Spinner, } from '@primer/react';
+import { Dialog } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { useToast } from '@datalayer/core/lib/hooks';
+import { createSandboxSnapshot, getSandboxSnapshots, loadBrowserSandboxSnapshot, loadSandboxSnapshot, } from '../../runtimes';
+import { useRuntimesStore } from '../../state/substates';
+import { createSandboxSnapshotName } from '@datalayer/core/lib/utils';
+/**
+ * Code Sandbox Snapshot menu component.
+ */
+export function SandboxSnapshotMenu({ children, connection, podName, multiServiceManager, disabled = false, }) {
+    const { addSandboxSnapshot, runtimesUrl, runtimeSnapshots, setSandboxSnapshots, } = useRuntimesStore();
+    const { enqueueToast, trackAsyncTask } = useToast();
+    const [openLoadDialog, setOpenLoadDialog] = useState(false);
+    const [loadingSandboxSnapshot, setLoadingSandboxSnapshot] = useState(false);
+    const [takingSandboxSnapshot, setTakingSandboxSnapshot] = useState(false);
+    const [selection, setSelection] = useState(runtimeSnapshots[0]?.id ?? '');
+    const [error, setError] = useState();
+    useEffect(() => {
+        getSandboxSnapshots()
+            .then(snapshots => {
+            setSandboxSnapshots(snapshots);
+            if (!selection && snapshots.length > 0) {
+                setSelection(snapshots[0].id);
+            }
+        })
+            .catch(reason => {
+            console.error(`Failed to fetch remote kernel snapshots; ${reason}`);
+        });
+    }, [runtimesUrl]);
+    const onLoadSandboxSnapshot = useCallback(() => {
+        setError(undefined);
+        setOpenLoadDialog(true);
+    }, []);
+    const onSandboxSnapshotChanged = useCallback(event => {
+        setSelection(event.target.value);
+    }, []);
+    const onLoadSandboxSnapshotSubmit = useCallback(async ({ id, connection, podName, }) => {
+        if (podName) {
+            await loadSandboxSnapshot({ id: podName, from: id });
+            enqueueToast(`Code Sandbox snapshot ${podName} is loaded.`, {
+                variant: 'success',
+            });
+        }
+        else if (connection) {
+            await loadBrowserSandboxSnapshot({ connection, id });
+            enqueueToast(`Code Sandbox snapshot ${id} is loaded.`, {
+                variant: 'success',
+            });
+        }
+    }, []);
+    const onTakeSandboxSnapshot = useCallback(async () => {
+        try {
+            setTakingSandboxSnapshot(true);
+            let snapshot;
+            let task;
+            let ref = '';
+            let snapshotName = '';
+            if (podName && multiServiceManager?.remote) {
+                snapshotName = createSandboxSnapshotName('cloud');
+                task = multiServiceManager.remote.runtimesManager.snapshotRuntime({
+                    podName,
+                    name: snapshotName,
+                    description: snapshotName,
+                    stop: false,
+                });
+                ref = podName.split('-', 2).reverse()[0];
+                task.then(s => {
+                    snapshot = s;
+                });
+            }
+            else if (connection && multiServiceManager?.browser) {
+                const model = connection.model;
+                ref = model.id;
+                snapshotName = createSandboxSnapshotName('browser');
+                let isPending = true;
+                task = createSandboxSnapshot({
+                    connection: multiServiceManager.browser.kernels.connectTo({
+                        model,
+                    }),
+                    metadata: { filename: `${snapshotName}.data` },
+                    onUploadProgress: () => {
+                        if (isPending) {
+                            isPending = false;
+                            // Get the kernel snapshot uid.
+                            getSandboxSnapshots().then(snapshots => {
+                                snapshot = snapshots.find(s => s.name === snapshotName);
+                            });
+                        }
+                    },
+                });
+            }
+            if (task) {
+                trackAsyncTask(task, {
+                    error: {
+                        message: (reason, data) => {
+                            const msg = reason === 'Empty snapshot'
+                                ? `Runtime ${ref} will not be snapshotted as it does not contain any serializable state.`
+                                : `Failed to snapshot runtime ${ref} - ${reason}`;
+                            return msg;
+                        },
+                    },
+                    pending: { message: `Taking a snapshot of runtime ${ref}…` },
+                    success: {
+                        message: () => `Runtime ${ref} successfully snapshotted as ${snapshotName}.`,
+                    },
+                });
+                await task;
+                if (snapshot) {
+                    addSandboxSnapshot(snapshot);
+                }
+            }
+        }
+        finally {
+            setTakingSandboxSnapshot(false);
+        }
+    }, [connection, podName, multiServiceManager]);
+    return (_jsxs(_Fragment, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { leadingVisual: DeviceCameraIcon, variant: "invisible", size: "small", disabled: loadingSandboxSnapshot || takingSandboxSnapshot || disabled, children: children }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: onLoadSandboxSnapshot, disabled: loadingSandboxSnapshot || runtimeSnapshots.length === 0, children: "Load a code sandbox snapshot\u2026" }), _jsx(ActionList.Item, { onSelect: onTakeSandboxSnapshot, disabled: takingSandboxSnapshot, children: "Take a code sandbox snapshot" })] }) })] }), openLoadDialog && (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: "Choose a code sandbox snapshot to load" }), onClose: () => {
+                    setOpenLoadDialog(false);
+                }, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Cancel',
+                        onClick: event => {
+                            if (!event.defaultPrevented) {
+                                event.preventDefault();
+                                setOpenLoadDialog(false);
+                            }
+                        },
+                    },
+                    {
+                        buttonType: 'primary',
+                        content: loadingSandboxSnapshot ? (_jsx(Spinner, { size: "small" })) : ('Load'),
+                        disabled: loadingSandboxSnapshot,
+                        onClick: async (event) => {
+                            if (!event.defaultPrevented) {
+                                event.preventDefault();
+                                setLoadingSandboxSnapshot(true);
+                                try {
+                                    setError(undefined);
+                                    const snapshot = runtimeSnapshots.find(s => s.id === selection);
+                                    if (snapshot && (connection || podName)) {
+                                        await onLoadSandboxSnapshotSubmit({
+                                            connection,
+                                            id: snapshot.id,
+                                            podName,
+                                        });
+                                    }
+                                    else {
+                                        setError('No code sandbox snapshot found.');
+                                    }
+                                }
+                                finally {
+                                    setLoadingSandboxSnapshot(false);
+                                    setOpenLoadDialog(false);
+                                }
+                            }
+                        },
+                        autoFocus: true,
+                    },
+                ], children: _jsxs(Box, { as: "form", children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Snapshot" }), _jsx(Select, { name: "snapshot", value: selection, onChange: onSandboxSnapshotChanged, block: true, children: runtimeSnapshots.map(s => (_jsx(Select.Option, { value: s.id, children: s.name ? `${s.name} (${s.id})` : s.id }, s.id))) })] }), error && _jsx(Flash, { variant: "danger", children: error })] }) }))] }));
+}

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

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

package/lib/components/snapshots/index.js

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

package/lib/components/snippets/SnippetDialog.d.ts

@@ -0,0 +1,42 @@
+import { CodeCellModel } from '@jupyterlab/cells';
+import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
+import { ITranslator } from '@jupyterlab/translation';
+import type { ISnippet } from '../../models';
+/**
+ * {@link SnippetDialog} properties
+ */
+export interface ISnippetDialogProps {
+    /**
+     * Code cell model
+     */
+    model: CodeCellModel;
+    /**
+     * Callback request the dialog closure.
+     */
+    onClose: () => void;
+    /**
+     * Code snippets language
+     */
+    language: string;
+    /**
+     * Code snippets
+     */
+    snippets: ISnippet[];
+    /**
+     * Markdown parser
+     */
+    markdownParser?: IMarkdownParser;
+    /**
+     * HTML sanitizer
+     */
+    sanitizer?: IRenderMime.ISanitizer;
+    /**
+     * Application translator
+     */
+    translator?: ITranslator;
+}
+/**
+ * Dialog to inject snippet in a cell.
+ */
+export declare function SnippetDialog(props: ISnippetDialogProps): JSX.Element;
+export default SnippetDialog;

package/lib/components/snippets/SnippetDialog.js

@@ -0,0 +1,42 @@
+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, useMemo, useState } from 'react';
+import { nullTranslator } from '@jupyterlab/translation';
+import { FormControl, Select, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Dialog } from '@primer/react/experimental';
+import { Markdown } from '@datalayer/core/lib/components/display';
+/**
+ * Dialog to inject snippet in a cell.
+ */
+export function SnippetDialog(props) {
+    const { model, onClose, language, snippets, markdownParser, sanitizer, translator, } = props;
+    const [selection, setSelection] = useState(snippets[0]);
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    const onSelectionChange = useCallback((e) => {
+        const selection = e.target.value;
+        setSelection(snippets[parseInt(selection, 10)]);
+    }, [setSelection, snippets]);
+    const injectSnippet = useCallback(() => {
+        const size = model.sharedModel.getSource().length;
+        model.sharedModel.updateSource(size, size, '\n'.repeat(size ? 2 : 0) + selection.code);
+        onClose();
+    }, [model, selection, onClose]);
+    return (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: "Pick a snippet to inject" }), onClose: onClose, footerButtons: [
+            {
+                buttonType: 'default',
+                content: trans.__('Cancel'),
+                onClick: onClose,
+            },
+            {
+                buttonType: 'primary',
+                content: trans.__('Inject snippet'),
+                onClick: injectSnippet,
+                autoFocus: true,
+            },
+        ], children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, {}), _jsx(Select, { block: true, onChange: onSelectionChange, children: snippets.map((snippet, index) => (_jsx(Select.Option, { value: `${index}`, children: snippet.title }, index))) }), _jsxs(FormControl.Caption, { children: [selection.description && (_jsx(Text, { as: "p", children: selection.description })), markdownParser ? (_jsx(Markdown, { markdownParser: markdownParser, sanitizer: sanitizer, text: `\`\`\`${language}\n${selection.code}\`\`\`` })) : (_jsx("code", { children: selection.code }))] })] }) }) }));
+}
+export default SnippetDialog;

package/lib/components/students/StudentItemStatus.d.ts

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

package/lib/components/students/StudentItemStatus.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StudentResultCircle } from '@datalayer/core/lib/components/students/StudentResultCircle';
+const getExerciseScore = (studentItem) => {
+    if (studentItem && studentItem.score) {
+        return studentItem.score;
+    }
+    return 0;
+};
+export const StudentItemStatus = (props) => {
+    const { studentItem } = props;
+    if (!studentItem) {
+        return _jsx(StudentResultCircle, { status: "none", label: "No result yet" });
+    }
+    switch (studentItem.itemType) {
+        case 'dataset': {
+            if (studentItem.completed === undefined) {
+                return (_jsx(StudentResultCircle, { status: "none", label: "Dataset not started" }));
+            }
+            const completed = Boolean(studentItem.completed);
+            return (_jsx(StudentResultCircle, { status: completed ? 'pass' : 'fail', label: completed ? 'Dataset completed' : 'Dataset not completed' }));
+        }
+        case 'lesson': {
+            if (studentItem.completed === undefined) {
+                return _jsx(StudentResultCircle, { status: "none", label: "Lesson not started" });
+            }
+            const completed = Boolean(studentItem.completed);
+            return (_jsx(StudentResultCircle, { status: completed ? 'pass' : 'fail', label: completed ? 'Lesson completed' : 'Lesson not completed' }));
+        }
+        case 'exercise': {
+            const hasResult = Boolean(studentItem.id) ||
+                Boolean(studentItem.codeStudent) ||
+                studentItem.score !== undefined;
+            if (!hasResult) {
+                return (_jsx(StudentResultCircle, { status: "none", label: "Exercise not started" }));
+            }
+            const passed = getExerciseScore(studentItem) > 0;
+            return (_jsx(StudentResultCircle, { status: passed ? 'pass' : 'fail', label: passed ? 'Exercise passed' : 'Exercise failed' }));
+        }
+        case 'assignment': {
+            const hasRecordedAttempt = Boolean(studentItem.id) ||
+                studentItem.nbgradesTotalScore !== undefined ||
+                studentItem.nbgradesTotalPoints !== undefined ||
+                Boolean(studentItem.nbgrades);
+            if (!hasRecordedAttempt) {
+                return (_jsx(StudentResultCircle, { status: "none", label: "Assignment not graded" }));
+            }
+            const totalScore = studentItem.nbgradesTotalScore ?? 0;
+            const totalPoints = studentItem.nbgradesTotalPoints ?? 0;
+            const nbgrades = Array.isArray(studentItem.nbgrades)
+                ? studentItem.nbgrades
+                : [];
+            const status = totalPoints === 0
+                ? 'pass'
+                : totalScore <= 0
+                    ? 'fail'
+                    : totalScore >= totalPoints
+                        ? 'pass'
+                        : 'partial';
+            const tooltip = nbgrades.length > 0
+                ? `Assignment graded: ${totalScore} / ${totalPoints} (${nbgrades.length} checks)`
+                : `Assignment graded: ${totalScore} / ${totalPoints}`;
+            return _jsx(StudentResultCircle, { status: status, label: tooltip });
+        }
+        default:
+            return _jsx(StudentResultCircle, { status: "none", label: "No result yet" });
+    }
+};
+export default StudentItemStatus;

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

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

package/lib/components/students/index.js

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

package/lib/components/tokens/SpaceVariantToken.d.ts

@@ -0,0 +1,5 @@
+import { ISpaceVariant } from '../../models';
+export declare const SpaceVariantToken: (props: {
+    variant: ISpaceVariant | string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SpaceVariantToken;

package/lib/components/tokens/SpaceVariantToken.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Token } from '@primer/react';
+import { ProjectIcon } from '@primer/octicons-react';
+import { StudentIcon } from '@datalayer/icons-react';
+export const SpaceVariantToken = (props) => {
+    const variant = String(props.variant || 'default').toLowerCase();
+    if (variant.includes('project')) {
+        return _jsx(Token, { text: "project", leadingVisual: ProjectIcon });
+    }
+    switch (variant) {
+        case 'default':
+            return _jsx(Token, { text: "default" });
+        case 'course':
+            return _jsx(Token, { text: "course", leadingVisual: StudentIcon });
+        default:
+            return _jsx(Token, { text: String(variant || 'default') });
+    }
+};
+export default SpaceVariantToken;

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

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

package/lib/components/tokens/index.js

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

package/lib/components/toolbars/AssignmentEditorToolbar.d.ts

@@ -0,0 +1,4 @@
+export declare const AssignmentEditorToolbar: (props: {
+    notebookId: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AssignmentEditorToolbar;

package/lib/components/toolbars/AssignmentEditorToolbar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { RepoPushIcon } from '@primer/octicons-react';
+// import { PlayIcon, StopIcon } from '@primer/octicons-react';
+// import { notebookStore } from '@datalayer/jupyter-react';
+import { useGradeStore } from '../../state/substates';
+export const AssignmentEditorToolbar = (props) => {
+    //  const { notebookId } = props;
+    //   const notebook = notebookStore.getState().selectNotebook(notebookId);
+    const { grade } = useGradeStore();
+    return (_jsx(Box, { display: "flex", children: _jsx(Box, { children: _jsx(Button, { variant: "invisible", size: "small", leadingVisual: RepoPushIcon, onClick: () => grade(new Date()), children: "Grade" }) }) }));
+};
+export default AssignmentEditorToolbar;

package/lib/components/toolbars/DocumentEditorToolbar.d.ts

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

package/lib/components/toolbars/DocumentEditorToolbar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Button, Box } from '@primer/react';
+import { RepoPushIcon } from '@primer/octicons-react';
+import { documentStore } from '../../state/substates';
+export const DocumentEditorToolbar = () => {
+    return (_jsx(Box, { display: "flex", children: _jsx(Box, { children: _jsx(Button, { variant: "invisible", size: "small", leadingVisual: RepoPushIcon, onClick: () => documentStore.getState().save(new Date()), children: "Save" }) }) }));
+};
+export default DocumentEditorToolbar;

package/lib/components/toolbars/NotebookEditorToolbar.d.ts

@@ -0,0 +1,29 @@
+import { Session } from '@jupyterlab/services';
+import { CommandRegistry } from '@lumino/commands';
+import type { IRuntimeDesc } from '../../models';
+/**
+ * NotebookEditorToolbar component properties
+ */
+export type INotebookEditorToolbar = {
+    /**
+     * Jupyter commands registry
+     */
+    commandRegistry?: CommandRegistry;
+    /**
+     * Kernel description
+     */
+    runtimeDesc?: IRuntimeDesc;
+    /**
+     * Callback to save the notebook model
+     */
+    save: () => void;
+    /**
+     * Session connection
+     */
+    sessionConnection?: Session.ISessionConnection;
+};
+/**
+ * Notebook editor toolbar
+ */
+export declare function NotebookEditorToolbar(props: INotebookEditorToolbar): JSX.Element;
+export default NotebookEditorToolbar;

package/lib/components/toolbars/NotebookEditorToolbar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { NotebookCommandIds } from '@datalayer/jupyter-react';
+import { Button } from '@primer/react';
+import { PlayIcon, StopIcon } from '@primer/octicons-react';
+import { useEffect, useState } from 'react';
+/**
+ * Notebook editor toolbar
+ */
+export function NotebookEditorToolbar(props) {
+    const { commandRegistry, runtimeDesc, sessionConnection } = props;
+    const [kernelStatus, setKernelStatus] = useState();
+    useEffect(() => {
+        const onStatusChanged = () => {
+            setKernelStatus(sessionConnection?.kernel?.status);
+        };
+        onStatusChanged();
+        sessionConnection?.statusChanged.connect(onStatusChanged);
+        sessionConnection?.connectionStatusChanged.connect(onStatusChanged);
+        return () => {
+            sessionConnection?.statusChanged.disconnect(onStatusChanged);
+            sessionConnection?.connectionStatusChanged.disconnect(onStatusChanged);
+        };
+    }, [sessionConnection]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "invisible", size: "small", leadingVisual: PlayIcon, disabled: !runtimeDesc?.location || kernelStatus === 'busy', onClick: (e) => commandRegistry?.execute(NotebookCommandIds.runAll), children: "Run all" }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: StopIcon, disabled: !runtimeDesc?.location || kernelStatus !== 'busy', onClick: (e) => commandRegistry?.execute(NotebookCommandIds.interrupt), children: "Interrupt" })] }));
+}
+export default NotebookEditorToolbar;

package/lib/context/ContextInspector.d.ts

@@ -1,3 +1,4 @@
+import type { MessageDetail } from './MessageHistory';
 /**
  * Tool detail from API
  */
@@ -12,20 +13,6 @@ interface ToolDetail {
     requiresApproval: boolean;
     sourceCode: string | null;
 }
-/**
- * Message detail from API
- */
-interface MessageDetail {
-    role: string;
-    content: string;
-    estimatedTokens: number;
-    timestamp: string | null;
-    inContext: boolean;
-    toolName: string | null;
-    toolCallId: string | null;
-    isToolCall: boolean;
-    isToolResult: boolean;
-}
 /**
  * System prompt from API
  */

package/lib/context/ContextInspector.js

@@ -7,8 +7,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { Text, Button, Label, ProgressBar } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { AiModelIcon, TerminalIcon, CommentDiscussionIcon, DatabaseIcon, KeyIcon, CodeIcon, CheckCircleIcon, XCircleIcon, ChevronDownIcon, ChevronRightIcon, InfoIcon, } from '@primer/octicons-react';
-import React, { useState, useMemo } from 'react';
+import { AiModelIcon, TerminalIcon, DatabaseIcon, KeyIcon, CodeIcon, ChevronDownIcon, ChevronRightIcon, InfoIcon, } from '@primer/octicons-react';
+import React, { useState } from 'react';
 /**
  * Get the API base URL for fetching context data.
  * If apiBase prop is provided, use it.
@@ -84,48 +84,6 @@ function ToolDetailView({ tool }) {
                     maxHeight: 300,
                 }, children: tool.sourceCode }))] }));
 }
-/**
- * Message detail view component
- */
-function MessageDetailView({ message }) {
-    const roleColors = {
-        user: 'accent.fg',
-        assistant: 'success.fg',
-        system: 'attention.fg',
-        tool: 'done.fg',
-    };
-    const roleIcons = {
-        user: CommentDiscussionIcon,
-        assistant: AiModelIcon,
-        system: InfoIcon,
-        tool: TerminalIcon,
-    };
-    const RoleIcon = roleIcons[message.role] || CommentDiscussionIcon;
-    return (_jsxs(Box, { sx: {
-            p: 2,
-            mb: 1,
-            bg: message.inContext ? 'canvas.default' : 'canvas.inset',
-            border: '1px solid',
-            borderColor: message.inContext ? 'border.default' : 'border.muted',
-            borderRadius: 2,
-            opacity: message.inContext ? 1 : 0.7,
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(RoleIcon, { size: 14 }), _jsx(Text, { sx: {
-                            fontWeight: 'semibold',
-                            fontSize: 0,
-                            color: roleColors[message.role] || 'fg.default',
-                            textTransform: 'capitalize',
-                        }, children: message.role }), message.toolName && (_jsx(Label, { size: "small", variant: "secondary", children: message.toolName })), message.isToolCall && (_jsx(Label, { size: "small", variant: "accent", children: "call" })), message.isToolResult && (_jsx(Label, { size: "small", variant: "success", children: "result" })), message.inContext ? (_jsx(CheckCircleIcon, { size: 12, fill: "var(--fgColor-success)" })) : (_jsx(XCircleIcon, { size: 12, fill: "var(--fgColor-muted)" })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 'auto' }, children: [formatTokens(message.estimatedTokens), " tokens"] })] }), _jsx(Text, { sx: {
-                    fontSize: 0,
-                    fontFamily: 'mono',
-                    display: 'block',
-                    whiteSpace: 'pre-wrap',
-                    wordBreak: 'break-word',
-                    maxHeight: 100,
-                    overflow: 'auto',
-                }, children: message.content.length > 500
-                    ? message.content.slice(0, 500) + '...'
-                    : message.content })] }));
-}
 /**
  * ContextInspector component displays full detailed context snapshot.
  */
@@ -133,22 +91,6 @@ export function ContextInspector({ agentId, apiBase, liveData, }) {
     const hasLiveData = liveData !== undefined;
     // REST polling removed — data comes exclusively via WS `agent.snapshot`.
     const contextData = liveData;
-    // Separate messages by in_context status
-    const { inContextMessages, outOfContextMessages } = useMemo(() => {
-        if (!contextData?.messages) {
-            return { inContextMessages: [], outOfContextMessages: [] };
-        }
-        return {
-            inContextMessages: contextData.messages.filter(m => m.inContext),
-            outOfContextMessages: contextData.messages.filter(m => !m.inContext),
-        };
-    }, [contextData?.messages]);
-    const messageHistoryTokens = useMemo(() => {
-        if (!contextData?.messages) {
-            return 0;
-        }
-        return contextData.messages.reduce((sum, message) => sum + (message.estimatedTokens || 0), 0);
-    }, [contextData?.messages]);
     if (!hasLiveData) {
         return (_jsx(Box, { sx: {
                 p: 3,
@@ -210,19 +152,7 @@ export function ContextInspector({ agentId, apiBase, liveData, }) {
                                 wordBreak: 'break-word',
                                 maxHeight: 200,
                                 overflow: 'auto',
-                            }, children: prompt.content })] }, idx)))) }), _jsx(CollapsibleSection, { title: "Tool Definitions", icon: TerminalIcon, count: contextData.tools.length, tokens: contextData.toolTokens, children: contextData.tools.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No tools configured" })) : (contextData.tools.map((tool, idx) => (_jsx(ToolDetailView, { tool: tool }, idx)))) }), _jsx(CollapsibleSection, { title: "Message History", icon: CommentDiscussionIcon, count: contextData.messages.length, tokens: messageHistoryTokens, children: contextData.messages.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No messages yet" })) : (_jsxs(_Fragment, { children: [outOfContextMessages.length > 0 && (_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Text, { sx: {
-                                        fontWeight: 'semibold',
-                                        fontSize: 1,
-                                        color: 'fg.muted',
-                                        mb: 2,
-                                        display: 'block',
-                                    }, children: ["Out of Context (", outOfContextMessages.length, ")"] }), outOfContextMessages.map((msg, idx) => (_jsx(MessageDetailView, { message: msg }, `out-${idx}`)))] })), inContextMessages.length > 0 && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
-                                        fontWeight: 'semibold',
-                                        fontSize: 1,
-                                        color: 'success.fg',
-                                        mb: 2,
-                                        display: 'block',
-                                    }, children: ["In Context (", inContextMessages.length, ")"] }), inContextMessages.map((msg, idx) => (_jsx(MessageDetailView, { message: msg }, `in-${idx}`)))] }))] })) }), contextData.memoryBlocks.length > 0 && (_jsx(CollapsibleSection, { title: "Memory Blocks", icon: DatabaseIcon, count: contextData.memoryBlocks.length, tokens: contextData.memoryTokens, children: contextData.memoryBlocks.map((block, idx) => (_jsx(Box, { as: "pre", sx: {
+                            }, children: prompt.content })] }, idx)))) }), _jsx(CollapsibleSection, { title: "Tool Definitions", icon: TerminalIcon, count: contextData.tools.length, tokens: contextData.toolTokens, children: contextData.tools.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No tools configured" })) : (contextData.tools.map((tool, idx) => (_jsx(ToolDetailView, { tool: tool }, idx)))) }), contextData.memoryBlocks.length > 0 && (_jsx(CollapsibleSection, { title: "Memory Blocks", icon: DatabaseIcon, count: contextData.memoryBlocks.length, tokens: contextData.memoryTokens, children: contextData.memoryBlocks.map((block, idx) => (_jsx(Box, { as: "pre", sx: {
                         p: 2,
                         mb: 2,
                         bg: 'canvas.inset',

package/lib/context/CostUsageChart.d.ts

@@ -1,12 +1,13 @@
 export interface CostUsageChartProps {
     serviceName?: string;
     agentId?: string;
+    runtimeId?: string;
     apiKey?: string;
-    runUrl?: string;
-    wsRunUrl?: string;
+    datalayerUrl?: string;
+    wsUrl?: string;
     liveCumulativeUsd?: number;
     liveTimestampMs?: number | null;
     height?: number;
 }
-export declare function CostUsageChart({ serviceName, agentId, apiKey, runUrl, wsRunUrl, liveCumulativeUsd, liveTimestampMs, height, }: CostUsageChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, datalayerUrl, wsUrl, liveCumulativeUsd, liveTimestampMs, height, }: CostUsageChartProps): import("react/jsx-runtime").JSX.Element;
 export default CostUsageChart;