@datalayer/agent-runtimes 1.3.74 → 1.3.78

package/lib/chat/assistant/SandboxDetailsDialog.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Dialog, Heading, IconButton, Label, Link, Text, } from '@primer/react';
+import { CheckIcon, CopyIcon } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { KernelAPI, KernelConnection, ServerConnection, } from '@jupyterlab/services';
+import { KernelVariables, executeSilently, } from '@datalayer/jupyter-react';
+import { NO_SANDBOX_YET, SANDBOX_KIND_LABELS, displayUrl, sandboxIsLive, sandboxExecuteOverHttp, timeLeft, } from './assistantDetails';
+/** A status, as a Primer label. */
+function StatusLabel({ status }) {
+    const variant = status === 'running' || status === 'idle'
+        ? 'success'
+        : status === 'busy' || status === 'starting'
+            ? 'attention'
+            : status === 'error' || status === 'dead'
+                ? 'danger'
+                : 'secondary';
+    return (_jsx(Label, { variant: variant, size: "small", "data-sandbox-status": status, children: status }));
+}
+/** A URL, linked, with a copy button. */
+function UrlValue({ url }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, minWidth: 0 }, children: [_jsx(Link, { href: url, target: "_blank", rel: "noreferrer", sx: { fontFamily: 'mono', fontSize: 0, wordBreak: 'break-all' }, children: url }), _jsx(IconButton, { icon: copied ? CheckIcon : CopyIcon, "aria-label": "Copy the URL", size: "small", variant: "invisible", onClick: () => {
+                    void navigator.clipboard?.writeText(url).then(() => {
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 1500);
+                    });
+                } })] }));
+}
+/** A moment, for a reader. */
+function moment(value) {
+    if (value === undefined || value === '') {
+        return undefined;
+    }
+    const at = typeof value === 'number'
+        ? new Date(value < 1e12 ? value * 1000 : value)
+        : new Date(value);
+    return Number.isNaN(at.getTime()) ? undefined : at.toLocaleString();
+}
+const PYODIDE_MARKER = '__DL_PYODIDE__';
+const PYODIDE_SNIPPET = `def __dl_pyodide():
+    import json, sys
+    facts = {'python': sys.version.split()[0], 'packages': []}
+    try:
+        import pyodide
+        facts['version'] = pyodide.__version__
+    except Exception:
+        pass
+    try:
+        import pyodide_js
+        facts['packages'] = sorted(str(k) for k in pyodide_js.loadedPackages.object_keys())
+    except Exception:
+        pass
+    print('${PYODIDE_MARKER}' + json.dumps(facts) + '${PYODIDE_MARKER}')
+try:
+    __dl_pyodide()
+finally:
+    del __dl_pyodide
+`;
+/** Pyodide's facts out of what the snippet printed. */
+export function parsePyodideFacts(stdout) {
+    const end = stdout.lastIndexOf(PYODIDE_MARKER);
+    const start = end > 0 ? stdout.lastIndexOf(PYODIDE_MARKER, end - 1) : -1;
+    if (start < 0) {
+        return undefined;
+    }
+    try {
+        const facts = JSON.parse(stdout.slice(start + PYODIDE_MARKER.length, end));
+        return {
+            version: facts.version,
+            python: facts.python,
+            packages: Array.isArray(facts.packages) ? facts.packages : [],
+        };
+    }
+    catch {
+        return undefined;
+    }
+}
+/** The kernel connection the dialog lists from: the host's, or one opened here. */
+function useKernelConnection(sandbox) {
+    const [opened, setOpened] = useState(null);
+    const { connection, url, token, kernelId, kind } = sandbox;
+    const live = sandboxIsLive(sandbox);
+    useEffect(() => {
+        if (connection || !url || !kernelId || kind === 'browser' || !live) {
+            return;
+        }
+        const base = url.replace(/\/+$/, '') + '/';
+        const serverSettings = ServerConnection.makeSettings({
+            baseUrl: base,
+            wsUrl: base.replace(/^http/, 'ws'),
+            token: token ?? '',
+            appendToken: true,
+        });
+        const opening = new KernelConnection({
+            model: { id: kernelId, name: '' },
+            serverSettings,
+            handleComms: true,
+        });
+        setOpened(opening);
+        return () => {
+            setOpened(null);
+            opening.dispose();
+        };
+    }, [connection, url, token, kernelId, kind, live]);
+    return live ? (connection ?? opened) : null;
+}
+export function SandboxDetailsDialog({ sandbox, name, onClose, }) {
+    const connection = useKernelConnection(sandbox);
+    const [kernel, setKernel] = useState({});
+    const [pyodide, setPyodide] = useState();
+    const [showPackages, setShowPackages] = useState(false);
+    // The kernel, as it says it is: its name, language, status, last activity.
+    useEffect(() => {
+        if (!connection) {
+            setKernel({});
+            return;
+        }
+        let cancelled = false;
+        const update = (next) => !cancelled && setKernel(current => ({ ...current, ...next }));
+        update({
+            id: connection.id,
+            name: connection.name || undefined,
+            status: connection.status,
+        });
+        connection.info
+            .then(info => update({
+            language: [info.language_info?.name, info.language_info?.version]
+                .filter(Boolean)
+                .join(' '),
+        }))
+            .catch(() => undefined);
+        if (sandbox.kind !== 'browser') {
+            KernelAPI.getKernelModel(connection.id, connection.serverSettings)
+                .then(model => update({
+                name: model?.name || undefined,
+                lastActivity: model?.last_activity,
+            }))
+                .catch(() => undefined);
+        }
+        const onStatus = (_, status) => update({ status });
+        connection.statusChanged.connect(onStatus);
+        return () => {
+            cancelled = true;
+            connection.statusChanged.disconnect(onStatus);
+        };
+    }, [connection, sandbox.kind]);
+    // Pyodide's version and packages, asked once of the browser kernel.
+    useEffect(() => {
+        if (sandbox.kind !== 'browser' || !connection) {
+            return;
+        }
+        let cancelled = false;
+        executeSilently(connection, PYODIDE_SNIPPET)
+            .then(({ stdout }) => {
+            if (!cancelled) {
+                setPyodide(parsePyodideFacts(stdout));
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [connection, sandbox.kind]);
+    // Without a connection, the agent's server runs the snippet in its sandbox.
+    const execute = useMemo(() => 
+    // Not before the sandbox is up: the server would start one to answer.
+    !connection && sandbox.serverUrl && sandboxIsLive(sandbox)
+        ? sandboxExecuteOverHttp(sandbox.serverUrl, sandbox.agentId)
+        : undefined, [connection, sandbox.serverUrl, sandbox.agentId]);
+    const url = displayUrl(sandbox.url ?? sandbox.serverUrl);
+    const left = timeLeft(sandbox.expiresAt);
+    const facts = [];
+    const add = (key, value) => {
+        if (value !== undefined && value !== null && value !== '') {
+            facts.push([key, value]);
+        }
+    };
+    add('Environment', sandbox.environment);
+    add('URL', url ? _jsx(UrlValue, { url: url }) : undefined);
+    add('Kernel', kernel.name || kernel.id ? (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: [kernel.name, kernel.id?.slice(0, 8)].filter(Boolean).join(' · ') })) : undefined);
+    add('Language', kernel.language);
+    add('Kernel status', kernel.status ? _jsx(StatusLabel, { status: kernel.status }) : undefined);
+    add('Agent', sandbox.kind === 'local' || sandbox.kind === 'runtime'
+        ? sandbox.agentId
+        : undefined);
+    add('Runtime', sandbox.runtimeUid);
+    add('Time left', left);
+    add('Burning rate', sandbox.burningRate !== undefined
+        ? `${sandbox.burningRate} credits/h`
+        : undefined);
+    add('Pyodide', pyodide?.version);
+    add('Packages', pyodide && pyodide.packages.length > 0 ? (_jsxs(Box, { children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowPackages(!showPackages), "aria-expanded": showPackages, sx: { px: 1 }, children: `${pyodide.packages.length} loaded` }), showPackages && (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, fontFamily: 'mono', fontSize: 0 }, "data-sandbox-packages": "", children: pyodide.packages.join(', ') }))] })) : undefined);
+    add('Started', moment(sandbox.startedAt));
+    add('Last activity', moment(sandbox.lastActivity ?? kernel.lastActivity));
+    return (_jsx(Dialog, { title: `${name} · Code Sandbox`, onClose: onClose, width: "xlarge", height: "large", children: _jsxs(Box, { "data-assistant-sandbox-details": "", sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Box, { "data-sandbox-summary": "", sx: {
+                        p: 3,
+                        bg: 'canvas.subtle',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold' }, "data-sandbox-kind": sandbox.kind, children: [SANDBOX_KIND_LABELS[sandbox.kind], sandbox.kind === 'runtime' && sandbox.variant
+                                            ? ` (${sandbox.variant})`
+                                            : ''] }), sandbox.status && _jsx(StatusLabel, { status: sandbox.status })] }), _jsx(Box, { as: "dl", sx: {
+                                display: 'grid',
+                                gridTemplateColumns: 'max-content minmax(0, 1fr)',
+                                columnGap: 3,
+                                rowGap: 1,
+                                m: 0,
+                                fontSize: 1,
+                                alignItems: 'center',
+                            }, children: facts.map(([key, value]) => (_jsxs(Box, { sx: { display: 'contents' }, children: [_jsx(Box, { as: "dt", sx: { color: 'fg.muted' }, children: key }), _jsx(Box, { as: "dd", sx: { m: 0, minWidth: 0 }, "data-sandbox-fact": key, children: value })] }, key))) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "Variables" }), sandboxIsLive(sandbox) ? (_jsx(KernelVariables, { connection: connection, execute: execute, maxHeight: "calc(80vh - 360px)" })) : (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, "data-sandbox-not-running": "", children: NO_SANDBOX_YET }))] })] }) }));
+}
+export default SandboxDetailsDialog;

package/lib/chat/assistant/SpeechBalloon.d.ts

@@ -13,6 +13,9 @@
  * them all — the person's and the agent's, under a header that counts them,
  * scrolled to the newest — rather than the newest line alone.
  *
+ * Given suggestions while the agent waits for a question, it offers them as
+ * chips under its words: one clicked is sent as the person's prompt.
+ *
  * Shown `current` (LOOP T-23), it is the one thing being said or done now:
  * *Now*, then the words as they are written, or the tool being called
  * ("Using **list_invoices**…"), cut to a few lines, and what goes with them
@@ -23,9 +26,20 @@
  * @module chat/assistant/SpeechBalloon
  */
 import type { JSX, ReactNode } from 'react';
-import { type BalloonApproval, type BalloonHistoryMessage } from './state';
+import { type BalloonApproval } from './state';
+import type { DisplayItem } from '../../types/chat';
 import type { DecisionAsker } from './decisions';
-import type { BalloonDisplay, BalloonToolLine } from './toolLine';
+import { type BalloonDisplay, type BalloonToolLine } from './toolLine';
+/** A suggestion the balloon offers: its label, and the prompt it sends. */
+export type BalloonSuggestion = {
+    label: string;
+    prompt: string;
+};
+/** The suggestions, as chips: each sends its prompt. */
+export declare function BalloonSuggestions({ suggestions, onSuggestion, }: {
+    suggestions: readonly BalloonSuggestion[];
+    onSuggestion: (suggestion: BalloonSuggestion) => void;
+}): JSX.Element;
 export interface SpeechBalloonProps {
     text: string;
     /** There is more than the balloon holds. */
@@ -64,10 +78,11 @@ export interface SpeechBalloonProps {
     /** What goes with the words, under them: a notebook given, read-only. */
     attachment?: ReactNode;
     /**
-     * The conversation's messages (`history`): listed in the balloon, every
-     * one, in place of the newest line alone.
+     * The conversation (`history`), in the chat's own model — its messages
+     * and tool calls, as the chat holds them — listed in the balloon by the
+     * chat's own components, in place of the newest line alone.
      */
-    history?: readonly BalloonHistoryMessage[];
+    history?: readonly DisplayItem[];
     /**
      * What goes with the words is a large visual (a notebook): an *Expand*
      * button under it draws it large, named by `expandTitle`.
@@ -75,10 +90,43 @@ export interface SpeechBalloonProps {
     onExpand?: () => void;
     /** What the large visual is, for the *Expand* button: `Accounting's notebook`. */
     expandTitle?: string;
+    /** Draws the listed history large (`history` display): its *Expand*. */
+    onExpandHistory?: () => void;
+    /**
+     * What the person may ask, as chips under the words: one clicked is sent
+     * as the prompt (`onSuggestion`), as if typed and asked.
+     */
+    suggestions?: readonly BalloonSuggestion[];
+    onSuggestion?: (suggestion: BalloonSuggestion) => void;
+    /**
+     * At work with nothing written yet: the chat's three dots — after the
+     * current line, or last in the history — until words arrive.
+     */
+    waiting?: boolean;
+    /**
+     * The words uncut, when `text` was cut to fit: *more* shows them whole,
+     * in the balloon, *less* folds them back.
+     */
+    fullText?: string;
 }
 /** How tall the listed conversation grows before it scrolls, in pixels. */
 export declare const BALLOON_HISTORY_MAX_HEIGHT = 220;
 /** Shorter, when something goes with the words under it (a notebook). */
 export declare const BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT = 120;
-export declare function SpeechBalloon({ text, more, onOpen, above, side, align, tailAt, approval, decide, onDecisionActive, wide, onDismissPeek, display, tool, speaking, busy, attachment, history, onExpand, expandTitle, }: SpeechBalloonProps): JSX.Element;
+/**
+ * The conversation in the `history` balloon: a header that counts it and
+ * opens it, then every message, the person's to the right, scrolled to the
+ * newest.
+ */
+/**
+ * The history balloon, large (*Expand*): every message, then the tool being
+ * called and what goes with the words, in the overlay or the page's area,
+ * scrolled there.
+ */
+export declare function BalloonHistoryLarge({ history, tool, attachment, }: {
+    history: readonly DisplayItem[];
+    tool?: BalloonToolLine;
+    attachment?: ReactNode;
+}): JSX.Element;
+export declare function SpeechBalloon({ text, more, onOpen, above, side, align, tailAt, approval, decide, onDecisionActive, wide, onDismissPeek, display, tool, speaking, busy, attachment, history, onExpand, expandTitle, suggestions, onSuggestion, waiting, fullText, onExpandHistory, }: SpeechBalloonProps): JSX.Element;
 export default SpeechBalloon;

package/lib/chat/assistant/SpeechBalloon.js

@@ -1,13 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Button, IconButton, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { XIcon } from '@primer/octicons-react';
-import { ASSISTANT_WORDS, } from './state';
+import { ASSISTANT_WORDS } from './state';
 import { moreWaiting } from './ConversationBalloon';
 import { DecisionAsk } from './DecisionAsk';
-import { BalloonToolLineView, CurrentBalloonBody, ToolLineAnnouncer, conversationHeaderText, } from './BalloonParts';
+import { BalloonChatItems, BalloonToolCall, CurrentBalloonBody, ToolLineAnnouncer, conversationHeaderText, } from './BalloonParts';
+import { conversationCount, withToolCall, } from './toolLine';
 import { BalloonExpandButton } from './BalloonVisual';
+import { ScreenFullIcon } from '@primer/octicons-react';
+/** The suggestions, as chips: each sends its prompt. */
+export function BalloonSuggestions({ suggestions, onSuggestion, }) {
+    return (_jsx(Box, { role: "group", "aria-label": "Suggestions", "data-balloon-suggestions": "", sx: { display: 'flex', flexWrap: 'wrap', gap: 1, mt: 2 }, children: suggestions.map(suggestion => (_jsx(Button, { size: "small", "data-balloon-suggestion": suggestion.label, "aria-label": `Ask: ${suggestion.prompt}`, title: suggestion.prompt, onClick: () => onSuggestion(suggestion), sx: { borderRadius: 999 }, children: suggestion.label }, suggestion.label))) }));
+}
 /** How tall the listed conversation grows before it scrolls, in pixels. */
 export const BALLOON_HISTORY_MAX_HEIGHT = 220;
 /** Shorter, when something goes with the words under it (a notebook). */
@@ -17,7 +23,15 @@ export const BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT = 120;
  * opens it, then every message, the person's to the right, scrolled to the
  * newest.
  */
-function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGHT, }) {
+/**
+ * The history balloon, large (*Expand*): every message, then the tool being
+ * called and what goes with the words, in the overlay or the page's area,
+ * scrolled there.
+ */
+export function BalloonHistoryLarge({ history, tool, attachment, }) {
+    return (_jsxs(Box, { role: "log", "aria-label": "Conversation", "data-balloon-history-large": "", sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(BalloonChatItems, { items: withToolCall(history, tool), density: "comfortable" }), attachment ? _jsx(Box, { children: attachment }) : null] }));
+}
+function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGHT, onExpand, tool, waiting = false, }) {
     const listRef = useRef(null);
     const newest = history[history.length - 1]?.id;
     useEffect(() => {
@@ -25,7 +39,21 @@ function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGH
         if (list) {
             list.scrollTop = list.scrollHeight;
         }
-    }, [history.length, newest]);
+    }, [history.length, newest, waiting, tool?.id, tool?.phase]);
+    // The chat's markdown draws after the list does: kept at the newest as
+    // what is drawn grows.
+    useEffect(() => {
+        const list = listRef.current;
+        const content = list?.firstElementChild;
+        if (!list || !content || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            list.scrollTop = list.scrollHeight;
+        });
+        observer.observe(content);
+        return () => observer.disconnect();
+    }, []);
     return (_jsxs(Box, { "data-balloon-history": "", sx: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-header": "", onClick: onOpen, sx: {
                     m: 0,
                     p: 0,
@@ -39,24 +67,27 @@ function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGH
                     fontWeight: 'semibold',
                     color: 'fg.muted',
                     '&:hover': { textDecoration: 'underline' },
-                }, children: conversationHeaderText(history.length) }), _jsx(Box, { ref: listRef, role: "log", "aria-label": "Conversation", "data-balloon-history-list": "", sx: {
+                }, children: conversationHeaderText(conversationCount(history)) }), onExpand ? (_jsx(IconButton, { icon: ScreenFullIcon, size: "small", variant: "invisible", "aria-label": "Expand the conversation", "data-balloon-history-expand": "", onClick: onExpand, sx: { position: 'absolute', top: '4px', right: '28px' } })) : null, _jsx(Box, { ref: listRef, role: "log", "aria-label": "Conversation", "data-balloon-history-list": "", sx: {
                     maxHeight,
                     overflowY: 'auto',
                     display: 'flex',
                     flexDirection: 'column',
-                    gap: 1,
                     pr: 1,
-                }, children: history.map(message => (_jsx(Box, { "data-balloon-history-message": message.role, sx: {
-                        alignSelf: message.role === 'user' ? 'flex-end' : 'flex-start',
-                        maxWidth: '88%',
-                        px: 2,
-                        py: 1,
-                        borderRadius: 2,
-                        bg: message.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
-                        overflowWrap: 'anywhere',
-                    }, children: message.text }, message.id))) })] }));
+                }, children: _jsx(BalloonChatItems, { items: withToolCall(history, tool), waiting: waiting }) })] }));
 }
-export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above', align, tailAt, approval, decide, onDecisionActive, wide = false, onDismissPeek, display = 'history', tool, speaking = false, busy = false, attachment, history, onExpand, expandTitle, }) {
+export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above', align, tailAt, approval, decide, onDecisionActive, wide = false, onDismissPeek, display = 'history', tool, speaking = false, busy = false, attachment, history, onExpand, expandTitle, suggestions, onSuggestion, waiting = false, fullText, onExpandHistory, }) {
+    // *more*: the words whole, when they were cut or overflow their lines.
+    const [whole, setWhole] = useState(false);
+    const [overflowing, setOverflowing] = useState(false);
+    const cut = (!!fullText && fullText !== text) || (!!more && text.endsWith('…'));
+    const wholeText = fullText ?? text;
+    // Other words, folded again.
+    useEffect(() => {
+        setWhole(false);
+    }, [wholeText.slice(0, 40)]);
+    const offered = suggestions && suggestions.length > 0 && onSuggestion && !approval
+        ? suggestions
+        : null;
     const current = display === 'current';
     // History with messages to list: all of them, not the newest line alone.
     const listed = !current && history && history.length > 0 ? history : null;
@@ -68,8 +99,14 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                 ? { bottom: `${above}px` }
                 : { top: `${above}px` }),
             [align]: 0,
-            maxWidth: wide || listed || (current && attachment) ? 300 : current ? 260 : 280,
-            width: wide || listed || (current && attachment) ? 300 : 'max-content',
+            maxWidth: wide || listed || offered || whole || (current && attachment)
+                ? 300
+                : current
+                    ? 260
+                    : 280,
+            width: wide || listed || offered || whole || (current && attachment)
+                ? 300
+                : 'max-content',
             px: 3,
             py: 2,
             bg: 'canvas.default',
@@ -106,9 +143,12 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                             font: 'inherit',
                             textAlign: 'left',
                             cursor: 'pointer',
-                        }, children: _jsx(CurrentBalloonBody, { text: text, tool: tool, busy: busy, speaking: speaking }) })) : listed ? (_jsx(BalloonHistory, { history: listed, onOpen: onOpen, maxHeight: attachment
+                        }, children: _jsx(CurrentBalloonBody, { text: text, tool: tool, busy: busy, speaking: speaking, waiting: waiting, whole: whole, fullText: wholeText, onOverflow: setOverflowing }) })) : listed ? (_jsx(BalloonHistory, { history: listed, onOpen: onOpen, onExpand: onExpandHistory, tool: tool, waiting: waiting, maxHeight: attachment
                             ? BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT
-                            : BALLOON_HISTORY_MAX_HEIGHT })) : (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-more": more ? '' : undefined, onClick: onOpen, sx: {
+                            : BALLOON_HISTORY_MAX_HEIGHT })) : tool ? (
+                    // The tool being called: the chat's card, not inside the peek's
+                    // button (the card is a button of its own).
+                    _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(BalloonToolCall, { line: tool }) })) : (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-more": more ? '' : undefined, onClick: onOpen, sx: {
                             flex: 1,
                             minWidth: 0,
                             m: 0,
@@ -120,6 +160,17 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                             textAlign: 'left',
                             cursor: 'pointer',
                             '&:hover': { textDecoration: 'underline' },
-                        }, children: tool ? (_jsx(BalloonToolLineView, { line: tool })) : (_jsx(Box, { as: "span", role: "status", "aria-live": "polite", children: text })) })), onDismissPeek && !approval ? (_jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": "Dismiss", "data-balloon-dismiss": "", onClick: onDismissPeek, sx: { mt: '-4px', mr: '-8px', flexShrink: 0 } })) : null] }), listed && tool ? (_jsx(Box, { "data-balloon-history-tool": "", sx: { mt: 1 }, children: _jsx(BalloonToolLineView, { line: tool }) })) : null, approval && (_jsxs(Box, { "data-balloon-approval": approval.id, sx: { mt: 1 }, children: [_jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: ASSISTANT_WORDS.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: ASSISTANT_WORDS.deny })] }), approval.others > 0 ? (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 0 }, children: moreWaiting(approval.others) })) : null] })), attachment ? (_jsxs(Box, { "data-balloon-attachment": "", sx: { mt: 2, display: 'flex', flexDirection: 'column', gap: 1 }, children: [attachment, onExpand ? (_jsx(BalloonExpandButton, { title: expandTitle ?? 'the visual', onExpand: onExpand })) : null] })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
+                        }, children: _jsx(Box, { as: "span", role: "status", "aria-live": "polite", children: text }) })), onDismissPeek && !approval ? (_jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": "Dismiss", "data-balloon-dismiss": "", onClick: onDismissPeek, sx: { mt: '-4px', mr: '-8px', flexShrink: 0 } })) : null] }), current && !approval && !tool && (cut || overflowing || whole) ? (_jsx(Box, { as: "button", type: "button", "aria-expanded": whole, "data-balloon-whole": whole ? 'less' : 'more', onClick: () => setWhole(!whole), sx: {
+                    m: 0,
+                    mt: 1,
+                    p: 0,
+                    border: 0,
+                    bg: 'transparent',
+                    color: 'accent.fg',
+                    font: 'inherit',
+                    fontSize: 0,
+                    cursor: 'pointer',
+                    '&:hover': { textDecoration: 'underline' },
+                }, children: whole ? 'less' : 'more' })) : null, !current && !listed && waiting ? (_jsx(Box, { "data-balloon-waiting": "", sx: { mt: 1 }, children: _jsx(BalloonChatItems, { items: [], waiting: true }) })) : null, approval && (_jsxs(Box, { "data-balloon-approval": approval.id, sx: { mt: 1 }, children: [_jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: ASSISTANT_WORDS.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: ASSISTANT_WORDS.deny })] }), approval.others > 0 ? (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 0 }, children: moreWaiting(approval.others) })) : null] })), offered && onSuggestion ? (_jsx(BalloonSuggestions, { suggestions: offered, onSuggestion: onSuggestion })) : null, attachment ? (_jsxs(Box, { "data-balloon-attachment": "", sx: { mt: 2, display: 'flex', flexDirection: 'column', gap: 1 }, children: [attachment, onExpand ? (_jsx(BalloonExpandButton, { title: expandTitle ?? 'the visual', onExpand: onExpand })) : null] })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
 }
 export default SpeechBalloon;

package/lib/chat/assistant/assistantDetails.d.ts

@@ -0,0 +1,84 @@
+/**
+ * What the assistant's menu knows of its agent and of its code sandbox, for
+ * *Agent Details…* and *Code Sandbox Details…*.
+ *
+ * Light on purpose: types and pure helpers only. The dialogs that draw them
+ * — `AgentDetails`, jupyter-react's `KernelVariables` — are loaded when one
+ * is opened, never with the character.
+ *
+ * @module chat/assistant/assistantDetails
+ */
+import type { Kernel } from '@jupyterlab/services';
+import type { KernelVariablesExecution } from '@datalayer/jupyter-react';
+/** Where a sandbox runs. */
+export type AssistantSandboxKind = 
+/** Pyodide, in this page. */
+'browser'
+/** A Jupyter server on this machine, the agent's own. */
+ | 'local'
+/** A Jupyter server elsewhere. */
+ | 'jupyter'
+/** A Datalayer cloud runtime. */
+ | 'cloud'
+/** In the agent runtime's process, or at a provider (`eval`, `e2b`, …). */
+ | 'runtime';
+/** A code sandbox, as much of it as its host knows. */
+export type AssistantSandbox = {
+    kind: AssistantSandboxKind;
+    /** `running`, `starting`, `idle`, `stopped`, `error`. */
+    status?: string;
+    /** The sandbox manager's variant: `jupyter-server`, `eval`, `datalayer`, a provider. */
+    variant?: string;
+    /** The Jupyter server, or the base the sandbox is reached at. Shown without its tokens. */
+    url?: string;
+    /** The token the Jupyter server wants: used to connect, never shown. */
+    token?: string;
+    /** The kernel the sandbox runs, on that server. */
+    kernelId?: string;
+    /** The agent whose sandbox it is (a local server's per-agent sandbox). */
+    agentId?: string;
+    /** The environment it runs in. */
+    environment?: string;
+    /** A cloud runtime's identity: its uid, never its pod's name. */
+    runtimeUid?: string;
+    /** When a cloud runtime ends; `null` when it is not metered. */
+    expiresAt?: string | number | null;
+    /** What a cloud runtime burns, in credits per hour. */
+    burningRate?: number;
+    startedAt?: string | number;
+    lastActivity?: string | number;
+    /** The kernel, when the page talks to it: listed live, widgets drawn. */
+    connection?: Kernel.IKernelConnection | null;
+    /**
+     * The agent-runtimes server whose `/api/v1/sandbox/execute` runs code in
+     * the agent's sandbox, when the page has no kernel connection to it.
+     */
+    serverUrl?: string;
+};
+/** Whether a sandbox is up: one with no status is taken to be. */
+export declare function sandboxIsLive(sandbox: AssistantSandbox): boolean;
+/** What the dialog says of a sandbox that is not running yet. */
+export declare const NO_SANDBOX_YET = "No sandbox is running yet: run a cell or ask the agent to execute code.";
+/** What each kind is called. */
+export declare const SANDBOX_KIND_LABELS: Record<AssistantSandboxKind, string>;
+/** Whether a URL is on this machine. */
+export declare function isLocalUrl(url: string | undefined): boolean;
+/** A URL fit to show: no credentials, no token in its query. */
+export declare function displayUrl(url: string | undefined): string | undefined;
+/**
+ * A sandbox from the status its server reports — the Loop's sandbox
+ * service, or the agent's codemode status — and what the host adds.
+ */
+export declare function assistantSandboxOf(status: Record<string, unknown> | null | undefined, options?: {
+    agentId?: string;
+    serverUrl?: string;
+    state?: string;
+}): AssistantSandbox | undefined;
+/**
+ * Run code in an agent's sandbox through its agent-runtimes server
+ * (`POST /api/v1/sandbox/execute`), whatever the variant: what a page with
+ * no kernel connection to the sandbox lists its variables with.
+ */
+export declare function sandboxExecuteOverHttp(serverUrl: string, agentId?: string): (code: string) => Promise<KernelVariablesExecution>;
+/** How long until a moment, for a reader: `1 h 20 min`, `never`. */
+export declare function timeLeft(expiresAt: string | number | null | undefined, now?: number): string | undefined;