@datalayer/agent-runtimes 1.3.35 → 1.3.37

package/lib/chat/ChatFloating.d.ts

@@ -14,7 +14,7 @@
 import React from 'react';
 import { type AssistantCharacter } from './assistant/characters';
 import type { AssistantCharacterData } from './assistant/formats/types';
-import type { ChatCommonProps, ChatViewMode } from '../types';
+import type { ChatCommonProps, ChatViewMode, ThemeOverrides } from '../types';
 /**
  * ChatFloating props — extends ChatCommonProps with floating/popup-specific configuration.
  */
@@ -28,6 +28,12 @@ export interface ChatFloatingProps extends ChatCommonProps {
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
     /** Default open state */
     defaultOpen?: boolean;
+    /**
+     * Properties laid over the theme the conversation wears, by mode — an
+     * application's accent (LOOP T-05): the chat sets its theme again inside
+     * it, so the accent the page around it set does not reach its bubbles.
+     */
+    themeOverrides?: ThemeOverrides;
     /** width */
     width?: number | string;
     /** height */
@@ -109,5 +115,5 @@ export interface ChatFloatingProps extends ChatCommonProps {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, buttonGlow, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, sidebarMountPoint, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, showContextRing, themeVariant, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching, launchingMessage, assistantCharacter, }: ChatFloatingProps): React.JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, buttonGlow, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, sidebarMountPoint, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, showContextRing, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching, launchingMessage, assistantCharacter, }: ChatFloatingProps): React.JSX.Element;
 export default ChatFloating;

package/lib/chat/ChatFloating.js

@@ -59,7 +59,7 @@ const clamp = (value, max) => Math.max(8, Math.min(value, Math.max(8, max)));
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, buttonGlow = true, offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, sidebarMountPoint = null, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, showContextRing = false, themeVariant, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching = false, launchingMessage, assistantCharacter = DEFAULT_ASSISTANT_CHARACTER, }) {
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, buttonGlow = true, offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, sidebarMountPoint = null, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, showContextRing = false, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching = false, launchingMessage, assistantCharacter = DEFAULT_ASSISTANT_CHARACTER, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -698,7 +698,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     borderColor: 'border.muted',
                     touchAction: 'none',
                     '&:active': { cursor: 'grabbing' },
-                }, children: _jsx(GrabberIcon, { size: 16 }) })), _jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, themeVariant: themeVariant, colorMode: colorMode, autoFocus: isOpen, focusTrigger: focusTrigger, launching: launching, launchingMessage: launchingMessage, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
+                }, children: _jsx(GrabberIcon, { size: 16 }) })), _jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, themeVariant: themeVariant, themeOverrides: themeOverrides, colorMode: colorMode, autoFocus: isOpen, focusTrigger: focusTrigger, launching: launching, launchingMessage: launchingMessage, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
                     showNewChat: showNewChatButton,
                     showClear: showClearButton && messages.length > 0,
                     showSettings: showSettingsButton && !!onSettingsClick,

package/lib/chat/base/ChatBase.js

@@ -141,7 +141,7 @@ const ThemedJupyterReactTheme = JupyterReactTheme;
  *   chat height/flex chain is preserved); CSS custom properties and inherited
  *   properties (color, font) still cascade through it.
  */
-function ThemedChatBoundary({ children, themeVariant, colorMode, }) {
+function ThemedChatBoundary({ children, themeVariant, colorMode, themeOverrides, }) {
     const storeColorMode = useThemeStore(s => s.colorMode);
     const storeThemeVariant = useThemeStore(s => s.theme);
     const resolvedColorMode = colorMode ?? storeColorMode;
@@ -149,9 +149,13 @@ function ThemedChatBoundary({ children, themeVariant, colorMode, }) {
     const systemMode = useSystemColorMode();
     const themeConfig = getThemeConfig(resolvedThemeVariant);
     const resolvedMode = resolvedColorMode === 'auto' ? systemMode : resolvedColorMode;
-    const modeStyles = resolvedMode === 'dark'
-        ? themeConfig.themeStyles.dark
-        : themeConfig.themeStyles.light;
+    const modeStyles = {
+        ...(resolvedMode === 'dark'
+            ? themeConfig.themeStyles.dark
+            : themeConfig.themeStyles.light),
+        // What the host lays over the theme: an application's accent (T-05).
+        ...themeOverrides?.[resolvedMode],
+    };
     const themeBackground = modeStyles.backgroundColor ?? '';
     return (_jsx(ThemedJupyterReactTheme, { colormode: resolvedMode, theme: themeConfig.primerTheme, backgroundColor: themeBackground, loadJupyterLabCss: false, style: {
             ...modeStyles,
@@ -463,7 +467,7 @@ function parseApprovedMcpToolsByServer(mcpStatusData) {
  * ChatBase component — Universal chat panel supporting store, protocol, and custom modes.
  */
 export function ChatBase(props) {
-    const { agentRuntimeConfig, protocol: protocolProp, useStore: useStoreMode = true, disableInternalJupyterTheme = false, themeVariant, colorMode, } = props;
+    const { agentRuntimeConfig, protocol: protocolProp, useStore: useStoreMode = true, disableInternalJupyterTheme = false, themeVariant, colorMode, themeOverrides, } = props;
     // Resolve protocol: string Protocol overrides type in agentRuntimeConfig or
     // is combined with a full ProtocolConfig object.
     const protocolType = typeof protocolProp === 'string' ? protocolProp : undefined;
@@ -490,7 +494,7 @@ export function ChatBase(props) {
         useStore: effectiveUseStoreMode,
     };
     const content = _jsx(ChatBaseInner, { ...innerProps });
-    const wrappedContent = disableInternalJupyterTheme ? (content) : (_jsx(ThemedChatBoundary, { themeVariant: themeVariant, colorMode: colorMode, children: content }));
+    const wrappedContent = disableInternalJupyterTheme ? (content) : (_jsx(ThemedChatBoundary, { themeVariant: themeVariant, colorMode: colorMode, themeOverrides: themeOverrides, children: content }));
     if (!existingQueryClient) {
         return (_jsx(QueryClientProvider, { client: internalQueryClient, children: wrappedContent }));
     }

package/lib/chat/display/EmptyState.js

@@ -60,7 +60,14 @@ export function ChatEmptyState({ emptyState, brandIcon, description, suggestions
                     color: 'var(--button-primary-fgColor-rest)',
                     borderColor: 'accent.emphasis',
                 },
-            }, onClick: () => handleSuggestionClick(suggestion), children: _jsx(Truncate, { inline: true, title: suggestion.message, maxWidth: "100%", sx: { minWidth: 0 }, children: suggestion.title }) }, index))) }));
+            }, onClick: () => handleSuggestionClick(suggestion), 
+            // A chip is a button to the keyboard as well as to the pointer.
+            role: "button", tabIndex: 0, onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    handleSuggestionClick(suggestion);
+                }
+            }, children: _jsx(Truncate, { inline: true, title: suggestion.message, maxWidth: "100%", sx: { minWidth: 0 }, children: suggestion.title }) }, index))) }));
     return (_jsx(ThemeProvider, { children: _jsxs(Box, { sx: {
                 display: 'flex',
                 flexDirection: 'column',

package/lib/chat/presence/Presence.d.ts

@@ -1,6 +1,20 @@
+/**
+ * An application's presence in its chat (LOOP T-08): its face, with a quiet
+ * motion around it while it thinks or works, and one line saying what it is
+ * doing. The face is never redrawn; the motion is a soft ring in the accent,
+ * still under `prefers-reduced-motion`, and the line changes at the theme's
+ * status pace (T-10).
+ *
+ * @module chat/presence/Presence
+ */
+import type { ReactNode } from 'react';
 import { type PresenceState } from './presenceStatus';
 export declare function PresenceFace({ face, size, state, }: {
-    face: string;
+    /**
+     * The face: an emoji, drawn at `size`, or a host's own drawing of it — an
+     * avatar on its disc (I-07) — as wide as `size`.
+     */
+    face: ReactNode;
     size: number;
     state: PresenceState;
 }): import("react").JSX.Element;

package/lib/chat/presence/Presence.js

@@ -1,17 +1,4 @@
 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.
- */
-/**
- * An application's presence in its chat (LOOP T-08): its face, with a quiet
- * motion around it while it thinks or works, and one line saying what it is
- * doing. The face is never redrawn; the motion is a soft ring in the accent,
- * still under `prefers-reduced-motion`, and the line changes at the theme's
- * status pace (T-10).
- *
- * @module chat/presence/Presence
- */
 import { Box, Text } from '@primer/react';
 import { PRESENCE_LINES } from './presenceStatus';
 const ACCENT = 'var(--loop-accent, var(--fgColor-accent))';

package/lib/components/a2ui/datalayer/Chart.d.ts

@@ -0,0 +1,132 @@
+import { type OwnCommon } from './implementation';
+export type ChartKind = 'bar' | 'line' | 'scatter' | 'area';
+export type ChartProps = OwnCommon & {
+    title?: string;
+    kind: ChartKind;
+    x: string;
+    y: string;
+    series?: string;
+    points?: unknown;
+};
+/** The page's colours, read from Primer's variables where the chart is drawn. */
+export type ChartColours = {
+    series: string[];
+    text: string;
+    muted: string;
+    grid: string;
+};
+/** The points a chart can draw, or why it cannot. */
+export declare function chartPoints(points: unknown): {
+    points: Record<string, unknown>[];
+} | {
+    problem: string;
+};
+/** The series a chart draws: one per value of `series`, or one. */
+export declare function chartSeries(points: Record<string, unknown>[], props: Pick<ChartProps, 'x' | 'y' | 'series'>): {
+    name: string;
+    points: Record<string, unknown>[];
+}[];
+/**
+ * The ECharts option a chart draws: categories along the bottom for a bar,
+ * a line or an area (in the order the points give them), numbers both ways
+ * for a scatter.
+ */
+export declare function chartOption(points: Record<string, unknown>[], props: Pick<ChartProps, 'kind' | 'x' | 'y' | 'series'>, colours: ChartColours): {
+    aria: {
+        enabled: boolean;
+    };
+    animation: boolean;
+    color: string[];
+    textStyle: {
+        color: string;
+    };
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+    legend: {
+        top: number;
+        textStyle: {
+            color: string;
+        };
+    } | undefined;
+    tooltip: {
+        trigger: string;
+    };
+    xAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        nameTextStyle: {
+            color: string;
+        };
+        type: string;
+        name: string;
+        nameLocation: string;
+        nameGap: number;
+    } | {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        nameTextStyle: {
+            color: string;
+        };
+        type: string;
+        data: string[];
+        name: string;
+        nameLocation: string;
+        nameGap: number;
+    };
+    yAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        nameTextStyle: {
+            color: string;
+        };
+        type: string;
+        name: string;
+    };
+    series: {
+        name: string;
+        type: "line" | "bar" | "scatter";
+        areaStyle: {} | undefined;
+        data: number[][] | (number | null)[];
+    }[];
+};
+export declare function ChartView({ props }: {
+    props: ChartProps;
+}): import("react").JSX.Element;
+export declare const Chart: import("@a2ui/react/v0_9").ReactComponentImplementation;

package/lib/components/a2ui/datalayer/Chart.js

@@ -0,0 +1,173 @@
+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.
+ */
+/**
+ * Chart (LOOP C-18): the points an application publishes, drawn as a bar, a
+ * line, an area or a scatter — one field along the bottom, one measured, a
+ * series apart for each value of a third. Drawn with ECharts, the chart
+ * library agent-runtimes already draws its usage and context charts with,
+ * in the page's colours (read from Primer's variables, so the chart follows
+ * the theme and the colour mode). Its numbers are also a table under *The
+ * numbers*, reached by keyboard and read by assistive technologies, which a
+ * drawing is not.
+ *
+ * @module components/a2ui/datalayer/Chart
+ */
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import ReactECharts from 'echarts-for-react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { BlockFrame, Problem, Quiet, asWords, isRecord } from './parts';
+import { ownImplementation } from './implementation';
+/** Primer's light colours, for a page that sets no variables. */
+const FALLBACK = {
+    series: ['#0969da', '#1a7f37', '#9a6700', '#8250df', '#cf222e', '#bc4c00'],
+    text: '#1f2328',
+    muted: '#59636e',
+    grid: '#d1d9e0',
+};
+const SERIES_VARIABLES = [
+    '--fgColor-accent',
+    '--fgColor-success',
+    '--fgColor-attention',
+    '--fgColor-done',
+    '--fgColor-danger',
+    '--fgColor-severe',
+];
+function readColours(element) {
+    if (!element) {
+        return FALLBACK;
+    }
+    const style = getComputedStyle(element);
+    const read = (name, fallback) => style.getPropertyValue(name).trim() || fallback;
+    return {
+        series: SERIES_VARIABLES.map((name, index) => read(name, FALLBACK.series[index])),
+        text: read('--fgColor-default', FALLBACK.text),
+        muted: read('--fgColor-muted', FALLBACK.muted),
+        grid: read('--borderColor-muted', FALLBACK.grid),
+    };
+}
+/** The points a chart can draw, or why it cannot. */
+export function chartPoints(points) {
+    if (points === undefined || points === null) {
+        return { points: [] };
+    }
+    if (!Array.isArray(points) || points.some(point => !isRecord(point))) {
+        return { problem: 'What it shows is not a list of points.' };
+    }
+    return { points: points };
+}
+/** The series a chart draws: one per value of `series`, or one. */
+export function chartSeries(points, props) {
+    if (!props.series) {
+        return [{ name: props.y, points }];
+    }
+    const names = [];
+    for (const point of points) {
+        const name = asWords(point[props.series]);
+        if (!names.includes(name)) {
+            names.push(name);
+        }
+    }
+    return names.map(name => ({
+        name,
+        points: points.filter(point => asWords(point[props.series]) === name),
+    }));
+}
+/**
+ * The ECharts option a chart draws: categories along the bottom for a bar,
+ * a line or an area (in the order the points give them), numbers both ways
+ * for a scatter.
+ */
+export function chartOption(points, props, colours) {
+    const series = chartSeries(points, props);
+    const scatter = props.kind === 'scatter';
+    const categories = [];
+    for (const point of points) {
+        const name = asWords(point[props.x]);
+        if (!categories.includes(name)) {
+            categories.push(name);
+        }
+    }
+    const axis = {
+        axisLine: { lineStyle: { color: colours.grid } },
+        axisLabel: { color: colours.muted },
+        splitLine: { lineStyle: { color: colours.grid } },
+        nameTextStyle: { color: colours.muted },
+    };
+    return {
+        aria: { enabled: true },
+        animation: false,
+        color: colours.series,
+        textStyle: { color: colours.text },
+        grid: { left: 48, right: 16, top: series.length > 1 ? 48 : 32, bottom: 40 },
+        legend: series.length > 1
+            ? { top: 0, textStyle: { color: colours.text } }
+            : undefined,
+        tooltip: { trigger: scatter ? 'item' : 'axis' },
+        xAxis: scatter
+            ? {
+                type: 'value',
+                name: props.x,
+                nameLocation: 'middle',
+                nameGap: 26,
+                ...axis,
+            }
+            : {
+                type: 'category',
+                data: categories,
+                name: props.x,
+                nameLocation: 'middle',
+                nameGap: 26,
+                ...axis,
+            },
+        yAxis: { type: 'value', name: props.y, ...axis },
+        series: series.map(one => ({
+            name: one.name,
+            type: props.kind === 'area' ? 'line' : props.kind,
+            areaStyle: props.kind === 'area' ? {} : undefined,
+            data: scatter
+                ? one.points.map(point => [
+                    Number(point[props.x]),
+                    Number(point[props.y]),
+                ])
+                : categories.map(category => {
+                    const point = one.points.find(candidate => asWords(candidate[props.x]) === category);
+                    return point ? Number(point[props.y]) : null;
+                }),
+        })),
+    };
+}
+export function ChartView({ props }) {
+    const { title, kind, x, y, series } = props;
+    const read = useMemo(() => chartPoints(props.points), [props.points]);
+    const frame = useRef(null);
+    const [colours, setColours] = useState(FALLBACK);
+    useLayoutEffect(() => {
+        setColours(readColours(frame.current));
+    }, []);
+    const points = 'points' in read ? read.points : [];
+    const option = useMemo(() => chartOption(points, { kind, x, y, series }, colours), [points, kind, x, y, series, colours]);
+    const columns = series ? [x, series, y] : [x, y];
+    const label = `${title || 'Chart'}: ${y} by ${x}, as a ${kind}`;
+    return (_jsx(BlockFrame, { title: title, label: "Chart", weight: props.weight, testId: "a2ui-chart", children: _jsx(Box, { ref: frame, children: 'problem' in read ? (_jsx(Problem, { children: read.problem })) : points.length === 0 ? (_jsx(Quiet, { children: "No points yet." })) : (_jsxs(Box, { as: "figure", "aria-label": label, sx: { m: 0 }, children: [_jsx("div", { "aria-hidden": "true", children: _jsx(ReactECharts, { option: option, style: { height: 240, width: '100%' }, opts: { renderer: 'svg' }, notMerge: true, lazyUpdate: true }) }), _jsxs(Box, { as: "details", sx: { fontSize: 1 }, children: [_jsx(Box, { as: "summary", sx: {
+                                    cursor: 'pointer',
+                                    color: 'fg.muted',
+                                    '&:focus-visible': {
+                                        outline: '2px solid',
+                                        outlineColor: 'accent.fg',
+                                    },
+                                }, children: _jsx(Text, { children: "The numbers" }) }), _jsxs(Box, { as: "table", sx: {
+                                    mt: 1,
+                                    borderCollapse: 'collapse',
+                                    '& th, & td': {
+                                        textAlign: 'left',
+                                        pr: 3,
+                                        py: '2px',
+                                    },
+                                    '& th': { color: 'fg.muted', fontWeight: 'semibold' },
+                                }, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(column => (_jsx("th", { scope: "col", children: column }, column))) }) }), _jsx("tbody", { children: points.map((point, index) => (_jsx("tr", { children: columns.map(column => (_jsx("td", { children: asWords(point[column]) }, column))) }, index))) })] })] })] })) }) }));
+}
+export const Chart = ownImplementation('Chart', ChartView);

package/lib/components/a2ui/datalayer/Chat.d.ts

@@ -0,0 +1,21 @@
+import type { DisplayItem } from '../../../types/chat';
+import { type OwnCommon } from './implementation';
+export type ChatProps = OwnCommon & {
+    welcome?: string;
+    placeholder?: string;
+    starters?: string[];
+    show_tools?: boolean;
+    messages?: unknown;
+    message?: unknown;
+    setMessage: (message: string) => void;
+};
+/** The transcript a chat draws from what is published, or why it cannot. */
+export declare function chatItems(messages: unknown, showTools: boolean): {
+    items: DisplayItem[];
+} | {
+    problem: string;
+};
+export declare function ChatView({ props }: {
+    props: ChatProps;
+}): import("react").JSX.Element;
+export declare const Chat: import("@a2ui/react/v0_9").ReactComponentImplementation;

package/lib/components/a2ui/datalayer/Chat.js

@@ -0,0 +1,116 @@
+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.
+ */
+/**
+ * Chat (LOOP C-18): the conversation with the application, drawn by the
+ * chat's own parts — its transcript (`ChatMessageList`, the one every chat
+ * draws its turns with), its welcome and starters (`ChatEmptyState`) and its
+ * composer (`InputPromptText`) — from what the application publishes.
+ *
+ * It shows the messages its `messages` binding points at, each
+ * `{role: 'user' | 'assistant', text}`, or `{role: 'tool', name, args,
+ * result}` for a tool call, shown only while `show_tools` holds. Before the
+ * first message it says its welcome and offers its starters. A message
+ * written in the composer — or a starter chosen — is written where its
+ * `message` binding points, then its action is dispatched (the application's
+ * `send`), so the action's context reads the message just written, as a
+ * basic input's action reads its value.
+ *
+ * @module components/a2ui/datalayer/Chat
+ */
+import { createRef, useMemo, useState } from 'react';
+import { IconButton } from '@primer/react';
+import { DependabotIcon, PaperAirplaneIcon, PersonIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { ChatMessageList } from '../../../chat/messages/ChatMessageList';
+import { ChatEmptyState } from '../../../chat/display/EmptyState';
+import { InputPromptText } from '../../../chat/prompt/InputPromptText';
+import { BlockFrame, CARD_RADIUS, Problem, asWords, isRecord } from './parts';
+import { ownImplementation } from './implementation';
+/** The defaults the catalog gives. */
+const PLACEHOLDER = 'Ask anything';
+const AVATARS = {
+    userAvatar: _jsx(PersonIcon, { size: 14 }),
+    assistantAvatar: _jsx(DependabotIcon, { size: 14 }),
+    showAvatars: true,
+    avatarSize: 24,
+    userAvatarBg: 'neutral.muted',
+    assistantAvatarBg: 'accent.emphasis',
+};
+/** The epoch: a published message carries no time, and the transcript shows none. */
+const NO_TIME = new Date(0);
+/** The transcript a chat draws from what is published, or why it cannot. */
+export function chatItems(messages, showTools) {
+    if (messages === undefined || messages === null) {
+        return { items: [] };
+    }
+    if (!Array.isArray(messages)) {
+        return { problem: 'What it shows is not a list of messages.' };
+    }
+    const items = [];
+    for (const [index, message] of messages.entries()) {
+        const id = `m${index}`;
+        if (!isRecord(message)) {
+            return { problem: `Message ${index + 1} is not a message.` };
+        }
+        if (message.role === 'tool') {
+            if (showTools) {
+                items.push({
+                    id,
+                    type: 'tool-call',
+                    toolCallId: id,
+                    toolName: asWords(message.name) || 'tool',
+                    args: isRecord(message.args) ? message.args : {},
+                    result: message.result,
+                    status: 'complete',
+                });
+            }
+            continue;
+        }
+        if (message.role !== 'user' && message.role !== 'assistant') {
+            return {
+                problem: `Message ${index + 1} is from ${asWords(message.role) || 'nobody'}: a message is the user's, the assistant's or a tool's.`,
+            };
+        }
+        items.push({
+            id,
+            role: message.role,
+            content: asWords(message.text ?? message.content),
+            createdAt: NO_TIME,
+        });
+    }
+    return { items };
+}
+export function ChatView({ props }) {
+    const { welcome, starters = [], setMessage, action } = props;
+    const placeholder = props.placeholder ?? PLACEHOLDER;
+    const showTools = props.show_tools ?? true;
+    const read = useMemo(() => chatItems(props.messages, showTools), [props.messages, showTools]);
+    const [draft, setDraft] = useState('');
+    const messagesEnd = useMemo(() => createRef(), []);
+    const inputRef = useMemo(() => createRef(), []);
+    const send = (text) => {
+        const message = text.trim();
+        if (!message) {
+            return;
+        }
+        setMessage(message);
+        action?.();
+        setDraft('');
+    };
+    return (_jsxs(BlockFrame, { label: "Chat", weight: props.weight, testId: "a2ui-chat", children: ['problem' in read ? (_jsx(Problem, { children: read.problem })) : (_jsx(Box, { sx: {
+                    maxHeight: 420,
+                    overflowY: 'auto',
+                    borderRadius: CARD_RADIUS,
+                }, children: _jsx(ChatMessageList, { displayItems: read.items, isLoading: false, isStreaming: false, showLoadingIndicator: false, hideMessagesAfterToolUI: false, avatarConfig: AVATARS, padding: 2, emptyContent: _jsx(ChatEmptyState, { description: "", emptyState: { title: welcome || 'Start a conversation' }, suggestions: starters.map(starter => ({
+                            title: starter,
+                            message: starter,
+                        })), onSuggestionSubmit: suggestion => send(suggestion.message) }), messagesEndRef: messagesEnd, onRespond: async () => undefined }) })), _jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                    gap: 2,
+                }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(InputPromptText, { value: draft, onChange: setDraft, placeholder: placeholder, onSubmit: () => send(draft), inputRef: inputRef }) }), _jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", variant: "primary", disabled: !draft.trim(), onClick: () => send(draft) })] })] }));
+}
+export const Chat = ownImplementation('Chat', ChatView);

package/lib/components/a2ui/datalayer/Evidence.d.ts

@@ -0,0 +1,22 @@
+import { type OwnCommon } from './implementation';
+export type EvidenceProps = OwnCommon & {
+    title?: string;
+    show_passages?: boolean;
+    max_items?: number;
+    sources?: unknown;
+};
+export type Source = {
+    title: string;
+    url: string;
+    passage: string;
+};
+/** The sources a block can show, or why it cannot. */
+export declare function evidenceSources(sources: unknown): {
+    sources: Source[];
+} | {
+    problem: string;
+};
+export declare function EvidenceView({ props }: {
+    props: EvidenceProps;
+}): import("react").JSX.Element;
+export declare const Evidence: import("@a2ui/react/v0_9").ReactComponentImplementation;