@datalayer/agent-runtimes 1.3.73 → 1.3.75

package/lib/components/teams/NotebookPreview.d.ts

@@ -27,11 +27,20 @@ export type NotebookPreviewProps = {
     title: string;
     /** How tall it is, in pixels; it scrolls within. */
     maxHeight?: number;
-    /** Takes the reader to the notebook that runs; the line under it says so. */
+    /**
+     * Takes the reader to the notebook that runs; the line under it says so.
+     * Unsaid, in a balloon that carries the notebook as its large visual, a
+     * click expands it (`BalloonVisual`).
+     */
     onOpen?: () => void;
+    /**
+     * The line under it, which opens it: `Open it below to run it`. Shown
+     * when `onOpen` or this is given — in a balloon, its *Expand* says it.
+     */
+    openLabel?: string;
 };
 /** A notebook, read-only and small, with the way to the one that runs. */
-export declare function NotebookPreview({ notebook, title, maxHeight, onOpen, }: NotebookPreviewProps): JSX.Element | null;
+export declare function NotebookPreview({ notebook, title, maxHeight, onOpen: onOpenGiven, openLabel, }: NotebookPreviewProps): JSX.Element | null;
 /** Where the notebook that runs is: `TeamNotebook` marks its section. */
 export declare const TEAM_NOTEBOOK_SELECTOR = "[data-team-notebook]";
 /** Takes the reader to the notebook that runs: scrolled to, and focused. */

package/lib/components/teams/NotebookPreview.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
+import { useBalloonExpand } from '../../chat/assistant/BalloonVisual';
 /** jupyter-react's notebook, read-only, with no kernel: loaded when a notebook is drawn. */
 const NotebookPreviewView = lazy(() => import('./NotebookPreviewView'));
 /** The document a notebook artifact carries, or none when it is not one. */
@@ -24,7 +25,9 @@ export function notebookDocument(data) {
     return undefined;
 }
 /** A notebook, read-only and small, with the way to the one that runs. */
-export function NotebookPreview({ notebook, title, maxHeight = 220, onOpen, }) {
+export function NotebookPreview({ notebook, title, maxHeight = 220, onOpen: onOpenGiven, openLabel, }) {
+    const expand = useBalloonExpand();
+    const onOpen = onOpenGiven ?? expand ?? undefined;
     const doc = notebookDocument(notebook);
     if (!doc) {
         return null;
@@ -38,7 +41,7 @@ export function NotebookPreview({ notebook, title, maxHeight = 220, onOpen, }) {
                     borderRadius: 2,
                     bg: 'canvas.default',
                     cursor: onOpen ? 'pointer' : 'default',
-                }, children: _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 0, m: 2 }, children: "Opening the notebook\u2026" }), children: _jsx(NotebookPreviewView, { nbformat: doc, height: maxHeight }) }) }), onOpen ? (_jsx(Text, { as: "button", type: "button", onClick: onOpen, "data-notebook-preview-open": "", sx: {
+                }, children: _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 0, m: 2 }, children: "Opening the notebook\u2026" }), children: _jsx(NotebookPreviewView, { nbformat: doc, height: maxHeight }) }) }), onOpen && (onOpenGiven || openLabel) ? (_jsx(Text, { as: "button", type: "button", onClick: onOpen, "data-notebook-preview-open": "", sx: {
                     alignSelf: 'flex-start',
                     p: 0,
                     border: 0,
@@ -47,7 +50,7 @@ export function NotebookPreview({ notebook, title, maxHeight = 220, onOpen, }) {
                     fontSize: 0,
                     cursor: 'pointer',
                     '&:hover': { textDecoration: 'underline' },
-                }, children: "Open it below to run it" })) : null] }));
+                }, children: openLabel ?? 'Open it to run it' })) : null] }));
 }
 /** Where the notebook that runs is: `TeamNotebook` marks its section. */
 export const TEAM_NOTEBOOK_SELECTOR = '[data-team-notebook]';

package/lib/components/teams/NotebookPreviewView.js

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { useTheme } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { JupyterReactTheme, Notebook, ServiceManagerLess, } from '@datalayer/jupyter-react';
+import { JUPYTER_DARK_VARIABLES, JUPYTER_LIGHT_VARIABLES, } from './jupyterThemeVariables';
 /** Each preview has its own id in jupyter-react's store. */
 let drawn = 0;
 export function NotebookPreviewView({ nbformat, height, }) {
@@ -16,7 +17,14 @@ export function NotebookPreviewView({ nbformat, height, }) {
     }, [nbformat]);
     const content = useMemo(() => JSON.parse(JSON.stringify(nbformat)), [nbformat]);
     const { colorScheme } = useTheme();
-    return (_jsxs(Box, { "data-notebook-preview-theme": "", sx: { height }, children: [_jsx("span", { "data-jupyter-react-theme-root": "notebook-preview", hidden: true }), _jsx(JupyterReactTheme, { colormode: colorScheme?.startsWith('dark') ? 'dark' : 'light', children: _jsx(Box, { "data-notebook-preview-view": id, sx: {
+    const mode = colorScheme?.startsWith('dark') ? 'dark' : 'light';
+    return (_jsxs(Box, { "data-notebook-preview-theme": mode, sx: { height }, 
+        // JupyterLab writes its theme for the whole page, so two previews in
+        // two modes would share the last one written: each carries its own
+        // mode's variables on its own subtree.
+        style: (mode === 'dark'
+            ? JUPYTER_DARK_VARIABLES
+            : JUPYTER_LIGHT_VARIABLES), children: [_jsx("span", { "data-jupyter-react-theme-root": "notebook-preview", hidden: true }), _jsx(JupyterReactTheme, { colormode: mode, children: _jsx(Box, { "data-notebook-preview-view": id, sx: {
                         height,
                         // No toolbar: no room kept for one.
                         '& .datalayer-NotebookPanel-header': {

package/lib/components/teams/TeamNotebook.d.ts

@@ -17,6 +17,7 @@
  */
 import type { JSX } from 'react';
 import type { A2APeerArtifact } from '../../runtimes/browser/a2aPeer';
+import type { BalloonVisual } from '../../chat/assistant/BalloonVisual';
 export type TeamNotebookProps = {
     /** The notebook, as the peer gave it: its `data` is the nbformat document. */
     notebook: A2APeerArtifact;
@@ -24,9 +25,17 @@ export type TeamNotebookProps = {
     title: string;
     /** How tall the notebook is, in pixels. */
     height?: number;
+    /** Leave the heading out: the dialog it is drawn in shows the title. */
+    hideTitle?: boolean;
 };
 /** The file a notebook is saved as: the peer's name for it, else its name. */
 export declare function notebookFileName(notebook: A2APeerArtifact): string;
 /** A notebook a member of the team gave, under its title, to run in the page. */
-export declare function TeamNotebook({ notebook, title, height, }: TeamNotebookProps): JSX.Element;
+export declare function TeamNotebook({ notebook, title, height, hideTitle, }: TeamNotebookProps): JSX.Element;
+/**
+ * A notebook as a balloon's large visual: read-only in the balloon, and,
+ * expanded, this notebook — editable, run on the browser sandbox, loaded
+ * only then.
+ */
+export declare function notebookBalloonVisual(notebook: A2APeerArtifact, title: string, height?: number): BalloonVisual;
 export default TeamNotebook;

package/lib/components/teams/TeamNotebook.js

@@ -16,9 +16,9 @@ export function notebookFileName(notebook) {
     return `${stem}.ipynb`;
 }
 /** A notebook a member of the team gave, under its title, to run in the page. */
-export function TeamNotebook({ notebook, title, height = 560, }) {
+export function TeamNotebook({ notebook, title, height = 560, hideTitle = false, }) {
     return (_jsxs(Box, { as: "section", "aria-label": title, "data-team-notebook": "", 
-        // Focused when the notebook in a balloon is clicked (`focusTeamNotebook`).
+        // Focused when the notebook in a balloon is clicked (`focusExpanded`).
         tabIndex: -1, sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -32,6 +32,18 @@ export function TeamNotebook({ notebook, title, height = 560, }) {
                 outlineOffset: 4,
                 borderRadius: 2,
             },
-        }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0 }, children: title }), _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Opening the notebook\u2026" }), children: _jsx(TeamNotebookView, { notebook: notebook, fileName: notebookFileName(notebook), height: height }) })] }));
+        }, children: [!hideTitle && (_jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0 }, children: title })), _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Opening the notebook\u2026" }), children: _jsx(TeamNotebookView, { notebook: notebook, fileName: notebookFileName(notebook), height: height }) })] }));
+}
+/**
+ * A notebook as a balloon's large visual: read-only in the balloon, and,
+ * expanded, this notebook — editable, run on the browser sandbox, loaded
+ * only then.
+ */
+export function notebookBalloonVisual(notebook, title, height) {
+    return {
+        id: `notebook:${notebook.filename ?? notebook.name}`,
+        title,
+        render: place => (_jsx(TeamNotebook, { notebook: notebook, title: title, height: height, hideTitle: place === 'overlay' })),
+    };
 }
 export default TeamNotebook;

package/lib/components/teams/jupyterThemeVariables.d.ts

@@ -0,0 +1,9 @@
+/**
+ * JupyterLab's theme variables, light and dark, as its theme extensions state
+ * them. Generated by scripts/codegen/generate_jupyter_theme_variables.mjs: do
+ * not edit.
+ *
+ * @module components/teams/jupyterThemeVariables
+ */
+export declare const JUPYTER_LIGHT_VARIABLES: Readonly<Record<string, string>>;
+export declare const JUPYTER_DARK_VARIABLES: Readonly<Record<string, string>>;

package/lib/components/teams/jupyterThemeVariables.js

@@ -0,0 +1,441 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * JupyterLab's theme variables, light and dark, as its theme extensions state
+ * them. Generated by scripts/codegen/generate_jupyter_theme_variables.mjs: do
+ * not edit.
+ *
+ * @module components/teams/jupyterThemeVariables
+ */
+export const JUPYTER_LIGHT_VARIABLES = {
+    '--jp-shadow-base-lightness': '0',
+    '--jp-shadow-umbra-color': 'rgba( var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.2 )',
+    '--jp-shadow-penumbra-color': 'rgba( var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.14 )',
+    '--jp-shadow-ambient-color': 'rgba( var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.12 )',
+    '--jp-elevation-z0': 'none',
+    '--jp-elevation-z1': '0 2px 1px -1px var(--jp-shadow-umbra-color), 0 1px 1px 0 var(--jp-shadow-penumbra-color), 0 1px 3px 0 var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z2': '0 3px 1px -2px var(--jp-shadow-umbra-color), 0 2px 2px 0 var(--jp-shadow-penumbra-color), 0 1px 5px 0 var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z4': '0 2px 4px -1px var(--jp-shadow-umbra-color), 0 4px 5px 0 var(--jp-shadow-penumbra-color), 0 1px 10px 0 var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z6': '0 3px 5px -1px var(--jp-shadow-umbra-color), 0 6px 10px 0 var(--jp-shadow-penumbra-color), 0 1px 18px 0 var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z8': '0 5px 5px -3px var(--jp-shadow-umbra-color), 0 8px 10px 1px var(--jp-shadow-penumbra-color), 0 3px 14px 2px var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z12': '0 7px 8px -4px var(--jp-shadow-umbra-color), 0 12px 17px 2px var(--jp-shadow-penumbra-color), 0 5px 22px 4px var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z16': '0 8px 10px -5px var(--jp-shadow-umbra-color), 0 16px 24px 2px var(--jp-shadow-penumbra-color), 0 6px 30px 5px var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z20': '0 10px 13px -6px var(--jp-shadow-umbra-color), 0 20px 31px 3px var(--jp-shadow-penumbra-color), 0 8px 38px 7px var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z24': '0 11px 15px -7px var(--jp-shadow-umbra-color), 0 24px 38px 3px var(--jp-shadow-penumbra-color), 0 9px 46px 8px var(--jp-shadow-ambient-color)',
+    '--jp-border-width': '1px',
+    '--jp-border-color0': 'var(--md-grey-400, #bdbdbd)',
+    '--jp-border-color1': 'var(--md-grey-400, #bdbdbd)',
+    '--jp-border-color2': 'var(--md-grey-300, #e0e0e0)',
+    '--jp-border-color3': 'var(--md-grey-200, #eee)',
+    '--jp-inverse-border-color': 'var(--md-grey-600, #757575)',
+    '--jp-border-radius': '2px',
+    '--jp-shortcuts-button-background': 'var(--jp-brand-color3)',
+    '--jp-shortcuts-button-hover-background': 'var(--jp-brand-color2)',
+    '--jp-ui-font-scale-factor': '1.2',
+    '--jp-ui-font-size0': '0.83333em',
+    '--jp-ui-font-size1': '13px',
+    '--jp-ui-font-size2': '1.2em',
+    '--jp-ui-font-size3': '1.44em',
+    '--jp-ui-font-family': "system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    '--jp-ui-font-color0': 'rgba(0, 0, 0, 1)',
+    '--jp-ui-font-color1': 'rgba(0, 0, 0, 0.87)',
+    '--jp-ui-font-color2': 'rgba(0, 0, 0, 0.54)',
+    '--jp-ui-font-color3': 'rgba(0, 0, 0, 0.38)',
+    '--jp-ui-inverse-font-color0': 'rgba(255, 255, 255, 1)',
+    '--jp-ui-inverse-font-color1': 'rgba(255, 255, 255, 1)',
+    '--jp-ui-inverse-font-color2': 'rgba(255, 255, 255, 0.7)',
+    '--jp-ui-inverse-font-color3': 'rgba(255, 255, 255, 0.5)',
+    '--jp-content-line-height': '1.6',
+    '--jp-content-font-scale-factor': '1.2',
+    '--jp-content-font-size0': '0.83333em',
+    '--jp-content-font-size1': '14px',
+    '--jp-content-font-size2': '1.2em',
+    '--jp-content-font-size3': '1.44em',
+    '--jp-content-font-size4': '1.728em',
+    '--jp-content-font-size5': '2.0736em',
+    '--jp-content-presentation-font-size1': '17px',
+    '--jp-content-heading-line-height': '1',
+    '--jp-content-heading-margin-top': '1.2em',
+    '--jp-content-heading-margin-bottom': '0.8em',
+    '--jp-content-heading-font-weight': '500',
+    '--jp-content-font-color0': 'rgba(0, 0, 0, 1)',
+    '--jp-content-font-color1': 'rgba(0, 0, 0, 0.87)',
+    '--jp-content-font-color2': 'rgba(0, 0, 0, 0.54)',
+    '--jp-content-font-color3': 'rgba(0, 0, 0, 0.38)',
+    '--jp-content-link-color': 'var(--md-blue-900, #0d47a1)',
+    '--jp-content-link-visited-color': 'var(--md-purple-700, #7b1fa2)',
+    '--jp-content-font-family': "system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    '--jp-datagrid-font-size': '12px',
+    '--jp-datagrid-font-family': 'var(--jp-content-font-family)',
+    '--jp-code-font-size': '13px',
+    '--jp-code-line-height': '1.3077',
+    '--jp-code-padding': '5px',
+    '--jp-code-font-family-default': "menlo, consolas, 'DejaVu Sans Mono', monospace",
+    '--jp-code-font-family': 'var(--jp-code-font-family-default)',
+    '--jp-code-presentation-font-size': '16px',
+    '--jp-code-cursor-width0': '1.4px',
+    '--jp-code-cursor-width1': '2px',
+    '--jp-code-cursor-width2': '4px',
+    '--jp-layout-color0': 'white',
+    '--jp-layout-color1': 'white',
+    '--jp-layout-color2': 'var(--md-grey-200, #eee)',
+    '--jp-layout-color3': 'var(--md-grey-400, #bdbdbd)',
+    '--jp-layout-color4': 'var(--md-grey-600, #757575)',
+    '--jp-inverse-layout-color0': '#111',
+    '--jp-inverse-layout-color1': 'var(--md-grey-900, #212121)',
+    '--jp-inverse-layout-color2': 'var(--md-grey-800, #424242)',
+    '--jp-inverse-layout-color3': 'var(--md-grey-700, #616161)',
+    '--jp-inverse-layout-color4': 'var(--md-grey-600, #757575)',
+    '--jp-brand-color0': 'var(--md-blue-900, #0d47a1)',
+    '--jp-brand-color1': 'var(--md-blue-700, #1976d2)',
+    '--jp-brand-color2': 'var(--md-blue-300, #64b5f6)',
+    '--jp-brand-color3': 'var(--md-blue-100, #bbdefb)',
+    '--jp-brand-color4': 'var(--md-blue-50, #e3f2fd)',
+    '--jp-accent-color0': 'var(--md-green-900, #1b5e20)',
+    '--jp-accent-color1': 'var(--md-green-700, #388e3c)',
+    '--jp-accent-color2': 'var(--md-green-300, #81c784)',
+    '--jp-accent-color3': 'var(--md-green-100, #c8e6c9)',
+    '--jp-warn-color0': 'var(--md-orange-900, #e65100)',
+    '--jp-warn-color1': 'var(--md-orange-700, #f57c00)',
+    '--jp-warn-color2': 'var(--md-orange-300, #ffb74d)',
+    '--jp-warn-color3': 'var(--md-orange-100, #ffe0b2)',
+    '--jp-error-color0': 'var(--md-red-900, #b71c1c)',
+    '--jp-error-color1': 'var(--md-red-700, #d32f2f)',
+    '--jp-error-color2': 'var(--md-red-300, #e57373)',
+    '--jp-error-color3': 'var(--md-red-100, #ffcdd2)',
+    '--jp-success-color0': 'var(--md-green-900, #1b5e20)',
+    '--jp-success-color1': 'var(--md-green-700, #388e3c)',
+    '--jp-success-color2': 'var(--md-green-300, #81c784)',
+    '--jp-success-color3': 'var(--md-green-100, #c8e6c9)',
+    '--jp-info-color0': 'var(--md-cyan-900, #006064)',
+    '--jp-info-color1': 'var(--md-cyan-700, #0097a7)',
+    '--jp-info-color2': 'var(--md-cyan-300, #4dd0e1)',
+    '--jp-info-color3': 'var(--md-cyan-100, #b2ebf2)',
+    '--jp-cell-padding': '5px',
+    '--jp-cell-collapser-width': '8px',
+    '--jp-cell-collapser-min-height': '20px',
+    '--jp-cell-collapser-not-active-hover-opacity': '0.6',
+    '--jp-cell-editor-background': 'var(--md-grey-100, #f5f5f5)',
+    '--jp-cell-editor-border-color': 'var(--md-grey-300, #e0e0e0)',
+    '--jp-cell-editor-box-shadow': 'inset 0 0 2px var(--md-blue-300, #64b5f6)',
+    '--jp-cell-editor-active-background': 'var(--jp-layout-color0)',
+    '--jp-cell-editor-active-border-color': 'var(--jp-brand-color1)',
+    '--jp-cell-prompt-width': '64px',
+    '--jp-cell-prompt-font-family': 'var(--jp-code-font-family-default)',
+    '--jp-cell-prompt-letter-spacing': '0',
+    '--jp-cell-prompt-opacity': '1',
+    '--jp-cell-prompt-not-active-opacity': '0.5',
+    '--jp-cell-prompt-not-active-font-color': 'var(--md-grey-700, #616161)',
+    '--jp-cell-inprompt-font-color': '#307fc1',
+    '--jp-cell-outprompt-font-color': '#bf5b3d',
+    '--jp-notebook-padding': '10px',
+    '--jp-notebook-select-background': 'var(--jp-layout-color1)',
+    '--jp-notebook-multiselected-color': 'var(--md-blue-50, #e3f2fd)',
+    '--jp-notebook-scroll-padding': 'calc( 100% - var(--jp-code-font-size) * var(--jp-code-line-height) - var(--jp-code-padding) - var(--jp-cell-padding) - 1px )',
+    '--jp-editor-scroll-padding': 'calc( 100% - var(--jp-code-font-size) * var(--jp-code-line-height) - var(--jp-code-padding) - 1px )',
+    '--jp-rendermime-error-background': '#fdd',
+    '--jp-rendermime-table-row-background': 'var(--md-grey-100, #cfd8dc)',
+    '--jp-rendermime-table-row-hover-background': 'var(--md-light-blue-50, #e1f5fe)',
+    '--jp-dialog-background': 'rgba(0, 0, 0, 0.25)',
+    '--jp-console-padding': '10px',
+    '--jp-toolbar-border-color': 'var(--jp-border-color1)',
+    '--jp-toolbar-micro-height': '8px',
+    '--jp-toolbar-background': 'var(--jp-layout-color1)',
+    '--jp-toolbar-box-shadow': '0 0 2px 0 rgba(0, 0, 0, 0.24)',
+    '--jp-toolbar-header-margin': '4px 4px 0 4px',
+    '--jp-toolbar-active-background': 'var(--md-grey-300, #90a4ae)',
+    '--jp-statusbar-height': '24px',
+    '--jp-input-box-shadow': 'inset 0 0 2px var(--md-blue-300, #64b5f6)',
+    '--jp-input-active-background': 'var(--jp-layout-color1)',
+    '--jp-input-hover-background': 'var(--jp-layout-color1)',
+    '--jp-input-background': 'var(--md-grey-100, #f5f5f5)',
+    '--jp-input-border-color': 'var(--jp-inverse-border-color)',
+    '--jp-input-active-border-color': 'var(--jp-brand-color1)',
+    '--jp-input-active-box-shadow-color': 'rgba(19, 124, 189, 0.3)',
+    '--jp-editor-selected-background': '#d9d9d9',
+    '--jp-editor-selected-focused-background': '#d7d4f0',
+    '--jp-editor-cursor-color': 'var(--jp-ui-font-color0)',
+    '--jp-mirror-editor-keyword-color': '#008000',
+    '--jp-mirror-editor-atom-color': '#88f',
+    '--jp-mirror-editor-number-color': '#080',
+    '--jp-mirror-editor-def-color': '#00f',
+    '--jp-mirror-editor-variable-color': 'var(--md-grey-900, #212121)',
+    '--jp-mirror-editor-variable-2-color': 'rgb(0, 54, 109)',
+    '--jp-mirror-editor-variable-3-color': '#085',
+    '--jp-mirror-editor-punctuation-color': '#05a',
+    '--jp-mirror-editor-property-color': '#05a',
+    '--jp-mirror-editor-operator-color': '#7800c2',
+    '--jp-mirror-editor-comment-color': '#408080',
+    '--jp-mirror-editor-string-color': '#ba2121',
+    '--jp-mirror-editor-string-2-color': '#708',
+    '--jp-mirror-editor-meta-color': '#a2f',
+    '--jp-mirror-editor-qualifier-color': '#555',
+    '--jp-mirror-editor-builtin-color': '#008000',
+    '--jp-mirror-editor-bracket-color': '#997',
+    '--jp-mirror-editor-tag-color': '#170',
+    '--jp-mirror-editor-attribute-color': '#00c',
+    '--jp-mirror-editor-header-color': 'blue',
+    '--jp-mirror-editor-quote-color': '#090',
+    '--jp-mirror-editor-link-color': '#00c',
+    '--jp-mirror-editor-error-color': '#f00',
+    '--jp-mirror-editor-hr-color': '#999',
+    '--jp-collaborator-color1': '#ffad8e',
+    '--jp-collaborator-color2': '#dac83d',
+    '--jp-collaborator-color3': '#72dd76',
+    '--jp-collaborator-color4': '#00e4d0',
+    '--jp-collaborator-color5': '#45d4ff',
+    '--jp-collaborator-color6': '#e2b1ff',
+    '--jp-collaborator-color7': '#ff9de6',
+    '--jp-vega-background': 'white',
+    '--jp-sidebar-min-width': '250px',
+    '--jp-search-selected-match-background-color': 'rgb(245, 200, 0)',
+    '--jp-search-selected-match-color': 'black',
+    '--jp-search-unselected-match-background-color': 'var( --jp-inverse-layout-color0 )',
+    '--jp-search-unselected-match-color': 'var(--jp-ui-inverse-font-color0)',
+    '--jp-icon-contrast-color0': 'var(--md-purple-600, #8e24aa)',
+    '--jp-icon-contrast-color1': 'var(--md-green-600, #43a047)',
+    '--jp-icon-contrast-color2': 'var(--md-pink-600, #d81b60)',
+    '--jp-icon-contrast-color3': 'var(--md-blue-600, #1e88e5)',
+    '--jp-accept-color-normal': 'var(--md-blue-700, #1976d2)',
+    '--jp-accept-color-hover': 'var(--md-blue-800, #1565c0)',
+    '--jp-accept-color-active': 'var(--md-blue-900, #0d47a1)',
+    '--jp-warn-color-normal': 'var(--md-red-700, #d32f2f)',
+    '--jp-warn-color-hover': 'var(--md-red-800, #c62828)',
+    '--jp-warn-color-active': 'var(--md-red-900, #b71c1c)',
+    '--jp-reject-color-normal': 'var(--md-grey-600, #757575)',
+    '--jp-reject-color-hover': 'var(--md-grey-700, #616161)',
+    '--jp-reject-color-active': 'var(--md-grey-800, #424242)',
+    '--jp-jupyter-icon-color': '#f37626',
+    '--jp-notebook-icon-color': '#f37626',
+    '--jp-json-icon-color': 'var(--md-orange-700, #f57c00)',
+    '--jp-console-icon-background-color': 'var(--md-blue-700, #1976d2)',
+    '--jp-console-icon-color': 'white',
+    '--jp-terminal-icon-background-color': 'var(--md-grey-800, #424242)',
+    '--jp-terminal-icon-color': 'var(--md-grey-200, #eee)',
+    '--jp-text-editor-icon-color': 'var(--md-grey-700, #616161)',
+    '--jp-inspector-icon-color': 'var(--md-grey-700, #616161)',
+    '--jp-switch-color': 'var(--md-grey-400, #bdbdbd)',
+    '--jp-switch-true-position-color': 'var(--md-orange-900, #e65100)',
+    '--jp-focus-outline-color': 'var(--jp-brand-color1)',
+    '--jp-focus-outline-width': '2px',
+};
+export const JUPYTER_DARK_VARIABLES = {
+    '--jp-shadow-base-lightness': '32',
+    '--jp-shadow-umbra-color': 'rgba( var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.2 )',
+    '--jp-shadow-penumbra-color': 'rgba( var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.14 )',
+    '--jp-shadow-ambient-color': 'rgba( var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.12 )',
+    '--jp-elevation-z0': 'none',
+    '--jp-elevation-z1': '0 2px 1px -1px var(--jp-shadow-umbra-color), 0 1px 1px 0 var(--jp-shadow-penumbra-color), 0 1px 3px 0 var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z2': '0 3px 1px -2px var(--jp-shadow-umbra-color), 0 2px 2px 0 var(--jp-shadow-penumbra-color), 0 1px 5px 0 var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z4': '0 2px 4px -1px var(--jp-shadow-umbra-color), 0 4px 5px 0 var(--jp-shadow-penumbra-color), 0 1px 10px 0 var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z6': '0 3px 5px -1px var(--jp-shadow-umbra-color), 0 6px 10px 0 var(--jp-shadow-penumbra-color), 0 1px 18px 0 var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z8': '0 5px 5px -3px var(--jp-shadow-umbra-color), 0 8px 10px 1px var(--jp-shadow-penumbra-color), 0 3px 14px 2px var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z12': '0 7px 8px -4px var(--jp-shadow-umbra-color), 0 12px 17px 2px var(--jp-shadow-penumbra-color), 0 5px 22px 4px var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z16': '0 8px 10px -5px var(--jp-shadow-umbra-color), 0 16px 24px 2px var(--jp-shadow-penumbra-color), 0 6px 30px 5px var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z20': '0 10px 13px -6px var(--jp-shadow-umbra-color), 0 20px 31px 3px var(--jp-shadow-penumbra-color), 0 8px 38px 7px var(--jp-shadow-ambient-color)',
+    '--jp-elevation-z24': '0 11px 15px -7px var(--jp-shadow-umbra-color), 0 24px 38px 3px var(--jp-shadow-penumbra-color), 0 9px 46px 8px var(--jp-shadow-ambient-color)',
+    '--jp-shortcuts-button-background': 'var(--jp-brand-color2)',
+    '--jp-shortcuts-button-hover-background': 'var(--jp-brand-color1)',
+    '--jp-border-width': '1px',
+    '--jp-border-color0': 'var(--md-grey-700, #616161)',
+    '--jp-border-color1': 'var(--md-grey-700, #616161)',
+    '--jp-border-color2': 'var(--md-grey-800, #424242)',
+    '--jp-border-color3': 'var(--md-grey-900, #212121)',
+    '--jp-inverse-border-color': 'var(--md-grey-600, #757575)',
+    '--jp-border-radius': '2px',
+    '--jp-ui-font-scale-factor': '1.2',
+    '--jp-ui-font-size0': '0.83333em',
+    '--jp-ui-font-size1': '13px',
+    '--jp-ui-font-size2': '1.2em',
+    '--jp-ui-font-size3': '1.44em',
+    '--jp-ui-font-family': "system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    '--jp-ui-font-color0': 'rgba(255, 255, 255, 1)',
+    '--jp-ui-font-color1': 'rgba(255, 255, 255, 0.87)',
+    '--jp-ui-font-color2': 'rgba(255, 255, 255, 0.54)',
+    '--jp-ui-font-color3': 'rgba(255, 255, 255, 0.38)',
+    '--jp-ui-inverse-font-color0': 'rgba(0, 0, 0, 1)',
+    '--jp-ui-inverse-font-color1': 'rgba(0, 0, 0, 0.8)',
+    '--jp-ui-inverse-font-color2': 'rgba(0, 0, 0, 0.5)',
+    '--jp-ui-inverse-font-color3': 'rgba(0, 0, 0, 0.3)',
+    '--jp-content-line-height': '1.6',
+    '--jp-content-font-scale-factor': '1.2',
+    '--jp-content-font-size0': '0.83333em',
+    '--jp-content-font-size1': '14px',
+    '--jp-content-font-size2': '1.2em',
+    '--jp-content-font-size3': '1.44em',
+    '--jp-content-font-size4': '1.728em',
+    '--jp-content-font-size5': '2.0736em',
+    '--jp-content-presentation-font-size1': '17px',
+    '--jp-content-heading-line-height': '1',
+    '--jp-content-heading-margin-top': '1.2em',
+    '--jp-content-heading-margin-bottom': '0.8em',
+    '--jp-content-heading-font-weight': '500',
+    '--jp-content-font-color0': 'rgba(255, 255, 255, 1)',
+    '--jp-content-font-color1': 'rgba(255, 255, 255, 1)',
+    '--jp-content-font-color2': 'rgba(255, 255, 255, 0.7)',
+    '--jp-content-font-color3': 'rgba(255, 255, 255, 0.5)',
+    '--jp-content-link-color': 'var(--md-blue-300, #64b5f6)',
+    '--jp-content-link-visited-color': 'var(--md-purple-300, #ba68c8)',
+    '--jp-content-link-hover-color': 'var(--md-blue-400, #42a5f5)',
+    '--jp-content-font-family': "system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    '--jp-datagrid-font-size': '12px',
+    '--jp-datagrid-font-family': 'var(--jp-content-font-family)',
+    '--jp-code-font-size': '13px',
+    '--jp-code-line-height': '1.3077',
+    '--jp-code-padding': '5px',
+    '--jp-code-font-family-default': "menlo, consolas, 'DejaVu Sans Mono', monospace",
+    '--jp-code-font-family': 'var(--jp-code-font-family-default)',
+    '--jp-code-presentation-font-size': '16px',
+    '--jp-code-cursor-width0': '1.4px',
+    '--jp-code-cursor-width1': '2px',
+    '--jp-code-cursor-width2': '4px',
+    '--jp-layout-color0': '#111',
+    '--jp-layout-color1': 'var(--md-grey-900, #212121)',
+    '--jp-layout-color2': 'var(--md-grey-800, #424242)',
+    '--jp-layout-color3': 'var(--md-grey-700, #616161)',
+    '--jp-layout-color4': 'var(--md-grey-600, #757575)',
+    '--jp-inverse-layout-color0': 'white',
+    '--jp-inverse-layout-color1': 'white',
+    '--jp-inverse-layout-color2': 'var(--md-grey-200, #eee)',
+    '--jp-inverse-layout-color3': 'var(--md-grey-400, #bdbdbd)',
+    '--jp-inverse-layout-color4': 'var(--md-grey-600, #757575)',
+    '--jp-brand-color0': 'var(--md-blue-700, #1976d2)',
+    '--jp-brand-color1': 'var(--md-blue-500, #2196f3)',
+    '--jp-brand-color2': 'var(--md-blue-300, #64b5f6)',
+    '--jp-brand-color3': 'var(--md-blue-100, #bbdefb)',
+    '--jp-brand-color4': 'var(--md-blue-50, #e3f2fd)',
+    '--jp-accent-color0': 'var(--md-green-700, #388e3c)',
+    '--jp-accent-color1': 'var(--md-green-500, #4caf50)',
+    '--jp-accent-color2': 'var(--md-green-300, #81c784)',
+    '--jp-accent-color3': 'var(--md-green-100, #c8e6c9)',
+    '--jp-warn-color0': 'var(--md-orange-700, #f57c00)',
+    '--jp-warn-color1': 'var(--md-orange-500, #ff9800)',
+    '--jp-warn-color2': 'var(--md-orange-300, #ffb74d)',
+    '--jp-warn-color3': 'var(--md-orange-100, #ffe0b2)',
+    '--jp-error-color0': 'var(--md-red-700, #d32f2f)',
+    '--jp-error-color1': 'var(--md-red-500, #f44336)',
+    '--jp-error-color2': 'var(--md-red-300, #e57373)',
+    '--jp-error-color3': 'var(--md-red-100, #ffcdd2)',
+    '--jp-success-color0': 'var(--md-green-700, #388e3c)',
+    '--jp-success-color1': 'var(--md-green-500, #4caf50)',
+    '--jp-success-color2': 'var(--md-green-300, #81c784)',
+    '--jp-success-color3': 'var(--md-green-100, #c8e6c9)',
+    '--jp-info-color0': 'var(--md-cyan-700, #0097a7)',
+    '--jp-info-color1': 'var(--md-cyan-500, #00bcd4)',
+    '--jp-info-color2': 'var(--md-cyan-300, #4dd0e1)',
+    '--jp-info-color3': 'var(--md-cyan-100, #b2ebf2)',
+    '--jp-cell-padding': '5px',
+    '--jp-cell-collapser-width': '8px',
+    '--jp-cell-collapser-min-height': '20px',
+    '--jp-cell-collapser-not-active-hover-opacity': '0.6',
+    '--jp-cell-editor-background': 'var(--jp-layout-color1)',
+    '--jp-cell-editor-border-color': 'var(--md-grey-700, #616161)',
+    '--jp-cell-editor-box-shadow': 'inset 0 0 2px var(--md-blue-300, #64b5f6)',
+    '--jp-cell-editor-active-background': 'var(--jp-layout-color0)',
+    '--jp-cell-editor-active-border-color': 'var(--jp-brand-color1)',
+    '--jp-cell-prompt-width': '64px',
+    '--jp-cell-prompt-font-family': 'var(--jp-code-font-family-default)',
+    '--jp-cell-prompt-letter-spacing': '0',
+    '--jp-cell-prompt-opacity': '1',
+    '--jp-cell-prompt-not-active-opacity': '1',
+    '--jp-cell-prompt-not-active-font-color': 'var(--md-grey-300, #e0e0e0)',
+    '--jp-cell-inprompt-font-color': '#307fc1',
+    '--jp-cell-outprompt-font-color': '#bf5b3d',
+    '--jp-notebook-padding': '10px',
+    '--jp-notebook-select-background': 'var(--jp-layout-color1)',
+    '--jp-notebook-multiselected-color': 'rgba(33, 150, 243, 0.24)',
+    '--jp-notebook-scroll-padding': 'calc( 100% - var(--jp-code-font-size) * var(--jp-code-line-height) - var(--jp-code-padding) - var(--jp-cell-padding) - 1px )',
+    '--jp-editor-scroll-padding': 'calc( 100% - var(--jp-code-font-size) * var(--jp-code-line-height) - var(--jp-code-padding) - 1px )',
+    '--jp-rendermime-error-background': 'rgba(244, 67, 54, 0.28)',
+    '--jp-rendermime-table-row-background': 'var(--md-grey-900, #212121)',
+    '--jp-rendermime-table-row-hover-background': 'rgba(3, 169, 244, 0.2)',
+    '--jp-dialog-background': 'rgba(0, 0, 0, 0.6)',
+    '--jp-console-padding': '10px',
+    '--jp-toolbar-border-color': 'var(--jp-border-color2)',
+    '--jp-toolbar-micro-height': '8px',
+    '--jp-toolbar-background': 'var(--jp-layout-color1)',
+    '--jp-toolbar-box-shadow': '0 0 2px 0 rgba(0, 0, 0, 0.8)',
+    '--jp-toolbar-header-margin': '4px 4px 0 4px',
+    '--jp-toolbar-active-background': 'var(--jp-layout-color0)',
+    '--jp-statusbar-height': '24px',
+    '--jp-input-box-shadow': 'inset 0 0 2px var(--md-blue-300, #64b5f6)',
+    '--jp-input-active-background': 'var(--jp-layout-color0)',
+    '--jp-input-hover-background': 'var(--jp-layout-color2)',
+    '--jp-input-background': 'var(--md-grey-800, #424242)',
+    '--jp-input-border-color': 'var(--jp-inverse-border-color)',
+    '--jp-input-active-border-color': 'var(--jp-brand-color1)',
+    '--jp-input-active-box-shadow-color': 'rgba(19, 124, 189, 0.3)',
+    '--jp-editor-selected-background': 'var(--jp-layout-color2)',
+    '--jp-editor-selected-focused-background': 'rgba(33, 150, 243, 0.24)',
+    '--jp-editor-cursor-color': 'var(--jp-ui-font-color0)',
+    '--jp-mirror-editor-keyword-color': 'var(--md-green-500, #4caf50)',
+    '--jp-mirror-editor-atom-color': 'var(--md-blue-300, #64b5f6)',
+    '--jp-mirror-editor-number-color': 'var(--md-green-400, #66bb6a)',
+    '--jp-mirror-editor-def-color': 'var(--md-blue-600, #1e88e5)',
+    '--jp-mirror-editor-variable-color': 'var(--md-grey-300, #e0e0e0)',
+    '--jp-mirror-editor-variable-2-color': 'var(--md-blue-500, #2196f3)',
+    '--jp-mirror-editor-variable-3-color': 'var(--md-green-600, #43a047)',
+    '--jp-mirror-editor-punctuation-color': 'var(--md-blue-400, #42a5f5)',
+    '--jp-mirror-editor-property-color': 'var(--md-blue-400, #42a5f5)',
+    '--jp-mirror-editor-operator-color': '#d48fff',
+    '--jp-mirror-editor-comment-color': '#408080',
+    '--jp-mirror-editor-string-color': '#ff7070',
+    '--jp-mirror-editor-string-2-color': 'var(--md-purple-300, #ba68c8)',
+    '--jp-mirror-editor-meta-color': '#a2f',
+    '--jp-mirror-editor-qualifier-color': '#555',
+    '--jp-mirror-editor-builtin-color': 'var(--md-green-600, #43a047)',
+    '--jp-mirror-editor-bracket-color': '#997',
+    '--jp-mirror-editor-tag-color': 'var(--md-green-700, #388e3c)',
+    '--jp-mirror-editor-attribute-color': 'var(--md-blue-700, #1976d2)',
+    '--jp-mirror-editor-header-color': 'var(--md-blue-500, #2196f3)',
+    '--jp-mirror-editor-quote-color': 'var(--md-green-300, #81c784)',
+    '--jp-mirror-editor-link-color': 'var(--md-blue-700, #1976d2)',
+    '--jp-mirror-editor-error-color': '#f00',
+    '--jp-mirror-editor-hr-color': '#999',
+    '--jp-collaborator-color1': '#ad4a00',
+    '--jp-collaborator-color2': '#7b6a00',
+    '--jp-collaborator-color3': '#007e00',
+    '--jp-collaborator-color4': '#008772',
+    '--jp-collaborator-color5': '#0079b9',
+    '--jp-collaborator-color6': '#8b45c6',
+    '--jp-collaborator-color7': '#be208b',
+    '--jp-vega-background': 'var(--md-grey-400, #bdbdbd)',
+    '--jp-sidebar-min-width': '250px',
+    '--jp-search-selected-match-background-color': 'rgb(255, 225, 0)',
+    '--jp-search-selected-match-color': 'black',
+    '--jp-search-unselected-match-background-color': 'var( --jp-inverse-layout-color0 )',
+    '--jp-search-unselected-match-color': 'var(--jp-ui-inverse-font-color0)',
+    '--jp-scrollbar-background-color': '#3f4244',
+    '--jp-scrollbar-thumb-color': '104, 112, 114',
+    '--jp-scrollbar-endpad': '3px',
+    '--jp-scrollbar-thumb-margin': '3.5px',
+    '--jp-scrollbar-thumb-radius': '9px',
+    '--jp-icon-contrast-color0': 'var(--md-purple-600, #8e24aa)',
+    '--jp-icon-contrast-color1': 'var(--md-green-600, #43a047)',
+    '--jp-icon-contrast-color2': 'var(--md-pink-600, #d81b60)',
+    '--jp-icon-contrast-color3': 'var(--md-blue-600, #1e88e5)',
+    '--jp-accept-color-normal': 'var(--md-blue-700, #1976d2)',
+    '--jp-accept-color-hover': 'var(--md-blue-800, #1565c0)',
+    '--jp-accept-color-active': 'var(--md-blue-900, #0d47a1)',
+    '--jp-warn-color-normal': 'var(--md-red-700, #d32f2f)',
+    '--jp-warn-color-hover': 'var(--md-red-800, #c62828)',
+    '--jp-warn-color-active': 'var(--md-red-900, #b71c1c)',
+    '--jp-reject-color-normal': 'var(--md-grey-600, #757575)',
+    '--jp-reject-color-hover': 'var(--md-grey-700, #616161)',
+    '--jp-reject-color-active': 'var(--md-grey-800, #424242)',
+    '--jp-jupyter-icon-color': '#f37626',
+    '--jp-notebook-icon-color': '#f37626',
+    '--jp-json-icon-color': 'var(--md-orange-500, #ff9800)',
+    '--jp-console-icon-background-color': 'var(--md-blue-500, #2196f3)',
+    '--jp-console-icon-color': 'white',
+    '--jp-terminal-icon-background-color': 'var(--md-grey-200, #eee)',
+    '--jp-terminal-icon-color': 'var(--md-grey-800, #424242)',
+    '--jp-text-editor-icon-color': 'var(--md-grey-200, #eee)',
+    '--jp-inspector-icon-color': 'var(--md-grey-200, #eee)',
+    '--jp-switch-color': 'var(--md-grey-400, #bdbdbd)',
+    '--jp-switch-true-position-color': 'var(--md-orange-700, #f57c00)',
+    '--jp-focus-outline-color': '#38a0f5',
+    '--jp-focus-outline-width': '2px',
+};

package/lib/components/teams/teamConnections.d.ts

@@ -1,8 +1,16 @@
 import type { AppSpec } from '../../types/agentspecs';
-import type { A2ATeamConnection } from './a2aTeamFlow';
+import { type A2ATeamConnection } from './a2aTeamFlow';
+import type { ToolClass } from '../inspector/agentInspector';
 /**
  * The connections of an application, each with its server's name and mark
  * and its tools. A connection to a server the catalogue does not have is
  * left out: there is nothing to draw it with.
  */
 export declare function teamConnectionsOf(app: Pick<AppSpec, 'connections'>): A2ATeamConnection[];
+/**
+ * Where a member's tool call comes from, for the Agent Inspector: a call to
+ * one of its connections is an MCP call, with the server's mark; any other
+ * is `fallback`'s (`classifyToolCall`, by the catalogues) or a tool its
+ * runtime runs (`write_notebook`).
+ */
+export declare function teamToolClassifier(connections: A2ATeamConnection[], fallback?: (name: string, args?: Record<string, unknown>) => ToolClass): (name: string, args?: Record<string, unknown>) => ToolClass;