@datalayer/agent-runtimes 1.3.54 → 1.3.56

package/lib/chat/base/ChatBase.js

@@ -1342,7 +1342,12 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             return true;
         })
             .map(tool => ({ id: tool.name, name: tool.name }));
-        return [...fromConfig, ...fromPage];
+        /*
+         * Kept apart: the runtime's tools, and the frontend tools — the ones this
+         * page runs. The menu names them under two headings, so a person can tell
+         * what the agent does on the server from what it does here.
+         */
+        return { runtime: fromConfig, frontend: fromPage };
     }, [configQuery.data?.builtinTools, frontendTools, protocol?.options]);
     /*
      * Who is answering, as one row when that is all there is.
@@ -3489,7 +3494,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             maxWidth: 920,
             mx: 'auto',
             bg: 'canvas.default',
-        }, children: _jsx(ChatMessageList, { displayItems: displayItems, isLoading: isLoading, isStreaming: isStreaming, showLoadingIndicator: showLoadingIndicator, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: defaultAvatarConfig, padding: padding, renderToolResult: effectiveRenderToolResult, approvalConfig: approvalConfig, messagesEndRef: messagesEndRef, onRespond: handleRespond, showTurnFooters: showTurnFooter, agentUsage: agentUsage, onRemoveItems: handleRemoveItems, emptyContent: launching ? null : (_jsx(ChatEmptyState, { emptyState: emptyState, brandIcon: brandIcon, description: resolvedDescription, suggestions: resolvedSuggestions, submitOnSuggestionClick: submitOnSuggestionClick, onSuggestionSubmit: handleSuggestionSubmit, onSuggestionFill: handleSuggestionFill })) }) }));
+        }, children: _jsx(ChatMessageList, { displayItems: displayItems, isLoading: isLoading, isStreaming: isStreaming, showLoadingIndicator: showLoadingIndicator, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: defaultAvatarConfig, padding: padding, renderToolResult: effectiveRenderToolResult, approvalConfig: approvalConfig, messagesEndRef: messagesEndRef, onRespond: handleRespond, showTurnFooters: showTurnFooter, agentUsage: agentUsage, onRemoveItems: handleRemoveItems, mcpServers: filteredMcpServers, emptyContent: launching ? null : (_jsx(ChatEmptyState, { emptyState: emptyState, brandIcon: brandIcon, description: resolvedDescription, suggestions: resolvedSuggestions, submitOnSuggestionClick: submitOnSuggestionClick, onSuggestionSubmit: handleSuggestionSubmit, onSuggestionFill: handleSuggestionFill })) }) }));
     const inputToolbar = showInput ? (_jsx(InputPrompt, { input: input, setInput: setInput, isLoading: isLoading, kernelStatus: liveKernelStatus, connectionConfirmed: connectionConfirmed, placeholder: placeholder, 
         /*
           The same openers the empty state offers, typed into the box they would
@@ -3513,7 +3518,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                 models: configQuery.data.decisionModels,
                 note: configQuery.data.decisionsNote,
             }
-            : undefined, selectedModel: selectedModel, onModelSelect: setSelectedModel, availableTools: builtinTools, mcpServers: filteredMcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: getEnabledMcpToolNames().length, onToggleMcpTool: toggleMcpTool, onToggleAllMcpServerTools: toggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: toggleMcpToolApproval, skills: skillsQuery.data?.skills || [], skillsLoading: !!skillsQuery.isLoading, enabledSkills: enabledSkills, onToggleSkill: toggleSkill, onToggleAllSkills: toggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: toggleSkillApproval, apiBase: indicatorApiBase, authToken: protocol?.authToken, mcpStatusData: effectiveMcpStatusData })) : null;
+            : undefined, selectedModel: selectedModel, onModelSelect: setSelectedModel, availableTools: builtinTools.runtime, availableFrontendTools: builtinTools.frontend, mcpServers: filteredMcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: getEnabledMcpToolNames().length, onToggleMcpTool: toggleMcpTool, onToggleAllMcpServerTools: toggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: toggleMcpToolApproval, skills: skillsQuery.data?.skills || [], skillsLoading: !!skillsQuery.isLoading, enabledSkills: enabledSkills, onToggleSkill: toggleSkill, onToggleAllSkills: toggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: toggleSkillApproval, apiBase: indicatorApiBase, authToken: protocol?.authToken, mcpStatusData: effectiveMcpStatusData })) : null;
     // Shared header element. It is rendered either at the top of the chat (when
     // no ephemeral notebook is shown) or INSIDE the chat body column (when the
     // notebook is visible) so the header always follows the chat body across all

package/lib/chat/index.d.ts

@@ -62,6 +62,7 @@ export { ChatHeader, type ChatHeaderProps } from './header/ChatHeader';
 export { ChatViewModeToggle, VIEW_MODE_ICONS, type ChatViewModeToggleProps, } from './header/ChatViewModeToggle';
 export { MessagePart, type MessagePartProps, TextPart, type TextPartProps, ReasoningPart, type ReasoningPartProps, ToolPart, type ToolPartProps, DynamicToolPart, type DynamicToolPartProps, } from './parts';
 export { ToolCallDisplay, type ToolCallDisplayProps } from './tools';
+export { ICON_PACKAGES, SpecMark, hasMark, marksOfFrontendTool, marksOfMcpServer, marksOfRuntimeTool, marksOfSkill, marksOfToolCall, parseIconRef, useMarkIcon, type IconPackage, type IconRef, type MarkIcon, type MarkedMcpServer, type Marks, type SpecMarkProps, type ToolKind, type ToolMarks, } from './marks';
 export { ToolApprovalDialog, useToolApprovalDialog, type ToolApprovalDialogProps, } from './tools/ToolApprovalDialog';
 export { ToolApprovalBanner, type ToolApprovalBannerProps, type PendingApproval, } from './tools/ToolApprovalBanner';
 export { Chat, type ChatProps } from './Chat';

package/lib/chat/index.js

@@ -73,6 +73,9 @@ export { ChatViewModeToggle, VIEW_MODE_ICONS, } from './header/ChatViewModeToggl
 export { MessagePart, TextPart, ReasoningPart, ToolPart, DynamicToolPart, } from './parts';
 // Components - Tool UI
 export { ToolCallDisplay } from './tools';
+// Marks: the icon (by package), else the emoji, of an MCP server, a skill, a
+// frontend tool set or a runtime tool — and whose a tool call is.
+export { ICON_PACKAGES, SpecMark, hasMark, marksOfFrontendTool, marksOfMcpServer, marksOfRuntimeTool, marksOfSkill, marksOfToolCall, parseIconRef, useMarkIcon, } from './marks';
 export { ToolApprovalDialog, useToolApprovalDialog, } from './tools/ToolApprovalDialog';
 export { ToolApprovalBanner, } from './tools/ToolApprovalBanner';
 // Components - Transport-agnostic chat

package/lib/chat/marks/SpecMark.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The mark of a catalogue entry: its icon, else its emoji, else nothing.
+ *
+ * An MCP server, a skill, a tool and a frontend tool set each name an icon by
+ * its package (`@datalayer/icons-react:odoo`). Each package is imported when
+ * the first icon from it is drawn, once, and never before: the Datalayer icons
+ * are five hundred components, and a chat that names three of them should not
+ * have to carry the rest up front.
+ *
+ * @module chat/marks/SpecMark
+ */
+import React from 'react';
+import { type IconPackage, type IconRef } from './iconRef';
+/** What either package exports an icon as. */
+export type MarkIcon = React.ComponentType<{
+    size?: number;
+    'aria-hidden'?: boolean | 'true' | 'false';
+}>;
+type IconModule = Record<string, unknown>;
+/** Import a package of icons, once. */
+export declare function loadIconPackage(pkg: IconPackage): Promise<IconModule>;
+/** The icon a reference names, from its loaded package; refused when it has none. */
+export declare function iconOf(ref: IconRef, module: IconModule): MarkIcon;
+/** An icon reference resolved: the component, `undefined` while its package loads. */
+export declare function useMarkIcon(icon: string | undefined): MarkIcon | undefined;
+export interface SpecMarkProps {
+    /** `<package>:<name>`, as the catalogue says it. */
+    icon?: string;
+    /** Drawn where there is no icon. */
+    emoji?: string;
+    /** In pixels. */
+    size?: number;
+}
+/**
+ * The icon, else the emoji, else nothing.
+ *
+ * While the icon's package loads, a blank of the icon's size holds its place,
+ * so the line it sits in does not move when it arrives.
+ */
+export declare function SpecMark({ icon, emoji, size }: SpecMarkProps): React.JSX.Element | null;
+/** Whether an entry has a mark to draw. */
+export declare function hasMark(marks: {
+    icon?: string;
+    emoji?: string;
+} | null | undefined): boolean;
+export default SpecMark;

package/lib/chat/marks/SpecMark.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The mark of a catalogue entry: its icon, else its emoji, else nothing.
+ *
+ * An MCP server, a skill, a tool and a frontend tool set each name an icon by
+ * its package (`@datalayer/icons-react:odoo`). Each package is imported when
+ * the first icon from it is drawn, once, and never before: the Datalayer icons
+ * are five hundred components, and a chat that names three of them should not
+ * have to carry the rest up front.
+ *
+ * @module chat/marks/SpecMark
+ */
+import { useEffect, useState } from 'react';
+import { parseIconRef } from './iconRef';
+const LOADERS = {
+    '@datalayer/icons-react': () => import('@datalayer/icons-react'),
+    '@primer/octicons-react': () => import('@primer/octicons-react'),
+};
+const loaded = new Map();
+const loading = new Map();
+/** Import a package of icons, once. */
+export function loadIconPackage(pkg) {
+    const pending = loading.get(pkg) ??
+        LOADERS[pkg]().then(module => {
+            loaded.set(pkg, module);
+            return module;
+        });
+    loading.set(pkg, pending);
+    return pending;
+}
+/** The icon a reference names, from its loaded package; refused when it has none. */
+export function iconOf(ref, module) {
+    const icon = module[ref.exportName];
+    if (!icon) {
+        throw new Error(`${ref.pkg} has no icon ${ref.name} (${ref.exportName}): name one it has`);
+    }
+    return icon;
+}
+/** An icon reference resolved: the component, `undefined` while its package loads. */
+export function useMarkIcon(icon) {
+    const ref = icon ? parseIconRef(icon) : undefined;
+    const pkg = ref?.pkg;
+    const ready = pkg ? loaded.get(pkg) : undefined;
+    const [, setLoaded] = useState(0);
+    const [failure, setFailure] = useState(null);
+    useEffect(() => {
+        if (!pkg || ready) {
+            return;
+        }
+        let live = true;
+        loadIconPackage(pkg).then(() => live && setLoaded(n => n + 1), error => live && setFailure(error));
+        return () => {
+            live = false;
+        };
+    }, [pkg, ready]);
+    if (failure) {
+        throw failure;
+    }
+    return ref && ready ? iconOf(ref, ready) : undefined;
+}
+/**
+ * The icon, else the emoji, else nothing.
+ *
+ * While the icon's package loads, a blank of the icon's size holds its place,
+ * so the line it sits in does not move when it arrives.
+ */
+export function SpecMark({ icon, emoji, size = 16 }) {
+    const Icon = useMarkIcon(icon);
+    if (icon) {
+        return Icon ? (_jsx("span", { "data-mark": icon, style: { display: 'inline-flex', flexShrink: 0, lineHeight: 0 }, children: _jsx(Icon, { size: size, "aria-hidden": "true" }) })) : (_jsx("span", { "data-mark": icon, "aria-hidden": "true", style: { display: 'inline-block', width: size, height: size } }));
+    }
+    if (emoji) {
+        return (_jsx("span", { "data-mark": "emoji", "aria-hidden": "true", style: {
+                display: 'inline-flex',
+                flexShrink: 0,
+                fontSize: Math.round(size * 0.9),
+                lineHeight: 1,
+            }, children: emoji }));
+    }
+    return null;
+}
+/** Whether an entry has a mark to draw. */
+export function hasMark(marks) {
+    return Boolean(marks?.icon || marks?.emoji);
+}
+export default SpecMark;

package/lib/chat/marks/iconRef.d.ts

@@ -0,0 +1,29 @@
+/**
+ * An icon reference, as the agentspecs catalogues write it.
+ *
+ * `<package>:<name>`: the package the icon is in and the icon's own name, in
+ * kebab case, as that package names it — `@datalayer/icons-react:odoo` (the
+ * Datalayer icons' `odoo.svg`, exported as `OdooIcon`),
+ * `@primer/octicons-react:mark-github` (`MarkGithubIcon`). The rule is
+ * `agentspecs.marks`; this is the same rule, read on the page.
+ *
+ * @module chat/marks/iconRef
+ */
+/** The packages an icon may come from. */
+export declare const ICON_PACKAGES: readonly ["@datalayer/icons-react", "@primer/octicons-react"];
+export type IconPackage = (typeof ICON_PACKAGES)[number];
+export interface IconRef {
+    /** The package the icon is in. */
+    pkg: IconPackage;
+    /** The icon's name, in kebab case: `odoo`, `mark-github`. */
+    name: string;
+    /** What the package exports it as: `OdooIcon`, `MarkGithubIcon`. */
+    exportName: string;
+}
+/**
+ * The component an icon's name is exported as, by the rule both packages
+ * follow: each word capitalised, joined, and `Icon` after it.
+ */
+export declare function exportNameOf(name: string): string;
+/** Read an icon reference; anything else is refused. */
+export declare function parseIconRef(ref: string): IconRef;

package/lib/chat/marks/iconRef.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * An icon reference, as the agentspecs catalogues write it.
+ *
+ * `<package>:<name>`: the package the icon is in and the icon's own name, in
+ * kebab case, as that package names it — `@datalayer/icons-react:odoo` (the
+ * Datalayer icons' `odoo.svg`, exported as `OdooIcon`),
+ * `@primer/octicons-react:mark-github` (`MarkGithubIcon`). The rule is
+ * `agentspecs.marks`; this is the same rule, read on the page.
+ *
+ * @module chat/marks/iconRef
+ */
+/** The packages an icon may come from. */
+export const ICON_PACKAGES = [
+    '@datalayer/icons-react',
+    '@primer/octicons-react',
+];
+const ICON_REF = /^(@datalayer\/icons-react|@primer\/octicons-react):([a-z0-9]+(?:-[a-z0-9]+)*)$/;
+/**
+ * The component an icon's name is exported as, by the rule both packages
+ * follow: each word capitalised, joined, and `Icon` after it.
+ */
+export function exportNameOf(name) {
+    return (name
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('') + 'Icon');
+}
+/** Read an icon reference; anything else is refused. */
+export function parseIconRef(ref) {
+    const match = ICON_REF.exec(ref);
+    if (!match) {
+        throw new Error(`The icon ${JSON.stringify(ref)} is not <package>:<name>, the package one of ${ICON_PACKAGES.join(', ')} and the name in kebab case`);
+    }
+    const [, pkg, name] = match;
+    return { pkg: pkg, name, exportName: exportNameOf(name) };
+}

package/lib/chat/marks/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The marks of the catalogues: icons by package, emoji, and whose a tool call is.
+ *
+ * @module chat/marks
+ */
+export { ICON_PACKAGES, exportNameOf, parseIconRef, type IconPackage, type IconRef, } from './iconRef';
+export { SpecMark, hasMark, iconOf, loadIconPackage, useMarkIcon, type MarkIcon, type SpecMarkProps, } from './SpecMark';
+export { SKILL_TOOLS, marksOfFrontendTool, marksOfMcpServer, marksOfRuntimeTool, marksOfSkill, marksOfToolCall, skillIdOfCall, type MarkedMcpServer, type Marks, type ToolKind, type ToolMarks, } from './toolMarks';

package/lib/chat/marks/index.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The marks of the catalogues: icons by package, emoji, and whose a tool call is.
+ *
+ * @module chat/marks
+ */
+export { ICON_PACKAGES, exportNameOf, parseIconRef, } from './iconRef';
+export { SpecMark, hasMark, iconOf, loadIconPackage, useMarkIcon, } from './SpecMark';
+export { SKILL_TOOLS, marksOfFrontendTool, marksOfMcpServer, marksOfRuntimeTool, marksOfSkill, marksOfToolCall, skillIdOfCall, } from './toolMarks';

package/lib/chat/marks/toolMarks.d.ts

@@ -0,0 +1,43 @@
+/** The two marks of a catalogue entry. */
+export interface Marks {
+    /** `<package>:<name>` */
+    icon?: string;
+    emoji?: string;
+}
+/** What a tool call is, by who it belongs to. */
+export type ToolKind = 'mcp' | 'skill' | 'frontend' | 'runtime';
+export interface ToolMarks extends Marks {
+    kind: ToolKind;
+    /** The catalogue entry (or the MCP server) it belongs to. */
+    ownerId: string;
+}
+/** An MCP server as the chat knows it: what it serves, and its marks if it says them. */
+export interface MarkedMcpServer {
+    id: string;
+    tools: {
+        name: string;
+    }[];
+    icon?: string;
+    emoji?: string;
+}
+/** The tools the skills area runs a skill through. */
+export declare const SKILL_TOOLS: Set<string>;
+/** The skill a skill tool call names, without its version. */
+export declare function skillIdOfCall(toolName: string, args: Record<string, unknown> | undefined): string | null;
+/** An MCP server's marks: its own when it says them, the catalogue's by its id otherwise. */
+export declare function marksOfMcpServer(server: {
+    id: string;
+    icon?: string;
+    emoji?: string;
+}): Marks;
+/** A skill's marks, from the catalogue, by its id with or without a version. */
+export declare function marksOfSkill(skillId: string): Marks;
+/** A frontend tool's marks, by its name. */
+export declare function marksOfFrontendTool(toolName: string): Marks;
+/** A runtime tool's marks, by the name it is registered under. */
+export declare function marksOfRuntimeTool(toolName: string): Marks;
+/**
+ * Who a call belongs to, and its marks; `null` when nobody the catalogue
+ * marks claims it.
+ */
+export declare function marksOfToolCall(toolName: string, args: Record<string, unknown> | undefined, mcpServers?: readonly MarkedMcpServer[]): ToolMarks | null;

package/lib/chat/marks/toolMarks.js

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Whose mark a tool call carries.
+ *
+ * A call names a tool, and the tool belongs to something the catalogue marks:
+ * an MCP server (by the tools the server says it serves), a skill (the skill
+ * tools carry the skill's name in their arguments), a frontend tool set (by
+ * the names in its `toolset`) or a runtime tool (by its `runtime.method`, the
+ * name the runtime registers it under). A tool none of them claims has no mark.
+ *
+ * @module chat/marks/toolMarks
+ */
+import { MCP_SERVER_LIBRARY } from '../../specs/mcpServers';
+import { SKILLS_CATALOG } from '../../specs/skills';
+import { FRONTEND_TOOL_CATALOG } from '../../specs/frontendTools';
+import { TOOL_CATALOG } from '../../specs/tools';
+/** The tools the skills area runs a skill through. */
+export const SKILL_TOOLS = new Set([
+    'run_skill_script',
+    'load_skill',
+    'read_skill_resource',
+]);
+function marksOf(entry) {
+    return { icon: entry?.icon, emoji: entry?.emoji };
+}
+/** The skill a skill tool call names, without its version. */
+export function skillIdOfCall(toolName, args) {
+    if (!SKILL_TOOLS.has(toolName)) {
+        return null;
+    }
+    const raw = args?.skill_name ?? args?.skill ?? args?.name;
+    if (typeof raw !== 'string' || raw.length === 0) {
+        return null;
+    }
+    return raw.split(':', 1)[0] || raw;
+}
+let frontendIndex = null;
+let runtimeIndex = null;
+/** Each frontend tool's name, to the first set of the catalogue that has it. */
+function frontendTools() {
+    if (!frontendIndex) {
+        frontendIndex = new Map();
+        for (const spec of Object.values(FRONTEND_TOOL_CATALOG)) {
+            for (const name of spec.toolset ?? []) {
+                if (!frontendIndex.has(name)) {
+                    frontendIndex.set(name, { id: spec.id, ...marksOf(spec) });
+                }
+            }
+        }
+    }
+    return frontendIndex;
+}
+/** Each runtime tool's registered name (`runtime.method`), to its spec. */
+function runtimeTools() {
+    if (!runtimeIndex) {
+        runtimeIndex = new Map();
+        for (const spec of Object.values(TOOL_CATALOG)) {
+            const method = spec.runtime?.method;
+            if (method && !runtimeIndex.has(method)) {
+                runtimeIndex.set(method, { id: spec.id, ...marksOf(spec) });
+            }
+        }
+    }
+    return runtimeIndex;
+}
+/** An MCP server's marks: its own when it says them, the catalogue's by its id otherwise. */
+export function marksOfMcpServer(server) {
+    if (server.icon || server.emoji) {
+        return marksOf(server);
+    }
+    return marksOf(MCP_SERVER_LIBRARY[server.id]);
+}
+/** A skill's marks, from the catalogue, by its id with or without a version. */
+export function marksOfSkill(skillId) {
+    return marksOf(SKILLS_CATALOG[skillId.split(':', 1)[0] || skillId]);
+}
+/** A frontend tool's marks, by its name. */
+export function marksOfFrontendTool(toolName) {
+    return marksOf(frontendTools().get(toolName));
+}
+/** A runtime tool's marks, by the name it is registered under. */
+export function marksOfRuntimeTool(toolName) {
+    return marksOf(runtimeTools().get(toolName));
+}
+/**
+ * Who a call belongs to, and its marks; `null` when nobody the catalogue
+ * marks claims it.
+ */
+export function marksOfToolCall(toolName, args, mcpServers = []) {
+    const skillId = skillIdOfCall(toolName, args);
+    if (skillId) {
+        return { kind: 'skill', ownerId: skillId, ...marksOfSkill(skillId) };
+    }
+    const server = mcpServers.find(candidate => candidate.tools.some(tool => tool.name === toolName));
+    if (server) {
+        return { kind: 'mcp', ownerId: server.id, ...marksOfMcpServer(server) };
+    }
+    const frontend = frontendTools().get(toolName);
+    if (frontend) {
+        return { kind: 'frontend', ownerId: frontend.id, ...marksOf(frontend) };
+    }
+    const runtime = runtimeTools().get(toolName);
+    if (runtime) {
+        return { kind: 'runtime', ownerId: runtime.id, ...marksOf(runtime) };
+    }
+    return null;
+}

package/lib/chat/messages/ChatMessageList.d.ts

@@ -5,6 +5,7 @@
  * @module chat/messages/MessageList
  */
 import { type ReactNode, type RefObject } from 'react';
+import { type MarkedMcpServer } from '../marks';
 import type { DisplayItem, AvatarConfig, RenderToolResult } from '../../types/chat';
 import type { ChatMessage } from '../../types/messages';
 import type { ContextSnapshotData } from '../../types/context';
@@ -66,6 +67,12 @@ export interface ChatMessageListProps {
      * `note`, which has no footer of its own.
      */
     renderMessageFooter?: (message: ChatMessage) => ReactNode;
+    /**
+     * The MCP servers the agent has, with the tools each serves: a tool call is
+     * drawn with the marks of the server it belongs to. Skills, frontend tools
+     * and runtime tools are found in the catalogues.
+     */
+    mcpServers?: readonly MarkedMcpServer[];
 }
 type SubagentAvatarConfig = Required<Pick<AvatarConfig, 'userAvatar' | 'assistantAvatar' | 'showAvatars' | 'avatarSize' | 'userAvatarBg' | 'assistantAvatarBg'>>;
 export interface SubagentChatPanelProps {
@@ -85,5 +92,5 @@ export interface SubagentChatPanelProps {
  * approval decisions are sent over the shared monitoring socket.
  */
 export declare function SubagentChatPanel({ toolCallId, subagentName: subagentNameHint, height, avatarConfig, }: SubagentChatPanelProps): React.ReactElement | null;
-export declare function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, showTurnFooters, agentUsage, onRemoveItems, renderMessageFooter, }: ChatMessageListProps): import("react").JSX.Element;
+export declare function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, showTurnFooters, agentUsage, onRemoveItems, renderMessageFooter, mcpServers, }: ChatMessageListProps): import("react").JSX.Element;
 export {};

package/lib/chat/messages/ChatMessageList.js

@@ -16,6 +16,7 @@ import { Box } from '@datalayer/primer-addons';
 import { Streamdown } from 'streamdown';
 import { streamdownMarkdownStyles, streamdownCodeBlockStyles, } from '../styles/streamdownStyles';
 import { ToolCallDisplay } from '../tools/ToolCallDisplay';
+import { marksOfToolCall, skillIdOfCall } from '../marks';
 import { TurnFooter } from './TurnFooter';
 import { normalizeAssistantMarkdown } from './assistantMarkdown';
 import { parseFormSubmission } from './formSubmission';
@@ -275,7 +276,7 @@ export function SubagentChatPanel({ toolCallId, subagentName: subagentNameHint,
 // DefaultToolCallRenderer — reads approvals from the Zustand store,
 // sends decisions over the shared WebSocket (no REST polling).
 // ---------------------------------------------------------------------------
-function DefaultToolCallRenderer({ item, onRespond, }) {
+function DefaultToolCallRenderer({ item, onRespond, mcpServers, }) {
     const resultObject = item.result && typeof item.result === 'object'
         ? item.result
         : undefined;
@@ -300,21 +301,13 @@ function DefaultToolCallRenderer({ item, onRespond, }) {
     // Capture the skill id carried in the tool-call arguments so we can match
     // the inline approval button against that synthetic approval entry.
     const skillApprovalKey = useMemo(() => {
-        const SKILL_TOOLS = new Set([
-            'run_skill_script',
-            'load_skill',
-            'read_skill_resource',
-        ]);
-        if (!SKILL_TOOLS.has(item.toolName))
-            return null;
-        const a = (item.args ?? {});
-        const raw = a.skill_name ?? a.skill ?? a.name;
-        if (typeof raw !== 'string' || raw.length === 0)
-            return null;
-        // Strip optional ``<name>:<version>`` suffix to the base skill id.
-        const base = raw.split(':', 1)[0] || raw;
-        return `skill:${base}`.toLowerCase();
+        // The base skill id, without an optional ``<name>:<version>`` suffix.
+        const skillId = skillIdOfCall(item.toolName, item.args);
+        return skillId ? `skill:${skillId}`.toLowerCase() : null;
     }, [item.toolName, item.args]);
+    // Whose tool it is — its MCP server, skill, frontend tool set or runtime
+    // tool — for the mark drawn before its name.
+    const marks = useMemo(() => marksOfToolCall(item.toolName, item.args, mcpServers), [item.toolName, item.args, mcpServers]);
     // Read pending approvals from the Zustand store (fed by the agent-runtime WS).
     const approvals = useAgentRuntimeStore(s => s.approvals);
     // Prefer an exact match by approval id (when present in SSE tool result).
@@ -399,12 +392,12 @@ function DefaultToolCallRenderer({ item, onRespond, }) {
                     ? () => makeDecision('approve')
                     : undefined, onDeny: effectiveApprovalId && !decision && !externalDecision
                     ? () => makeDecision('reject')
-                    : undefined, approvalLoading: false }), isSubagentDelegation && (_jsx(SubagentChatPanel, { toolCallId: item.toolCallId, subagentName: delegatedSubagentName }))] }));
+                    : undefined, approvalLoading: false, marks: marks }), isSubagentDelegation && (_jsx(SubagentChatPanel, { toolCallId: item.toolCallId, subagentName: delegatedSubagentName }))] }));
 }
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, showTurnFooters = false, agentUsage, onRemoveItems, renderMessageFooter, }) {
+export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, showTurnFooters = false, agentUsage, onRemoveItems, renderMessageFooter, mcpServers, }) {
     if (displayItems.length === 0) {
         return _jsx(_Fragment, { children: emptyContent });
     }
@@ -506,7 +499,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                   not care about hid those tools entirely. Offering the default as a
                   node lets it compose instead of choosing.
                 */
-            const defaultUI = (_jsx(DefaultToolCallRenderer, { item: item, approvalConfig: approvalConfig, onRespond: createRespondCallback(item.toolCallId) }));
+            const defaultUI = (_jsx(DefaultToolCallRenderer, { item: item, approvalConfig: approvalConfig, onRespond: createRespondCallback(item.toolCallId), mcpServers: mcpServers }));
             const toolUI = renderToolResult
                 ? renderToolResult({
                     toolCallId: item.toolCallId,

package/lib/chat/parts/ToolPart.js

@@ -13,6 +13,7 @@ import React from 'react';
 import { Text, Button } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ChevronDownIcon, AlertIcon } from '@primer/octicons-react';
+import { SpecMark, hasMark, marksOfToolCall } from '../marks';
 /**
  * Check if output contains execution result with errors
  */
@@ -89,6 +90,10 @@ export function ToolPart({ part }) {
     const executionResult = extractExecutionResult(part.output);
     const statusInfo = getStatusInfo(part.state, executionResult);
     const toolName = part.type.split('-').slice(1).join('-') || part.type;
+    // Whose tool it is, from the catalogues: its icon, else its emoji, else nothing.
+    const marks = marksOfToolCall(toolName, part.input && typeof part.input === 'object'
+        ? part.input
+        : undefined);
     const effectiveExitOutput = executionResult?.output ??
         (typeof part.output === 'string'
             ? part.output
@@ -119,7 +124,7 @@ export function ToolPart({ part }) {
                     '&:hover': {
                         backgroundColor: 'neutral.muted',
                     },
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "\uD83D\uDD27" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: toolName }), _jsxs(Box, { sx: {
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [hasMark(marks) && (_jsx(Box, { sx: { display: 'flex', color: 'fg.muted' }, children: _jsx(SpecMark, { icon: marks?.icon, emoji: marks?.emoji, size: 14 }) })), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: toolName }), _jsxs(Box, { sx: {
                                     display: 'inline-flex',
                                     alignItems: 'center',
                                     gap: 1,

package/lib/chat/prompt/InputPrompt.d.ts

@@ -195,7 +195,10 @@ export interface InputPromptProps {
     decisions?: Decisions;
     selectedModel?: string;
     onModelSelect?: (modelId: string) => void;
+    /** The runtime's tools. */
     availableTools?: BuiltinTool[];
+    /** The frontend tools: the ones this page runs for the agent. */
+    availableFrontendTools?: BuiltinTool[];
     /** MCP servers to render (already filtered by selection) */
     mcpServers?: MCPServerConfig[];
     enabledMcpTools?: Map<string, Set<string>>;
@@ -220,4 +223,4 @@ export interface InputPromptProps {
     /** Pre-fetched MCP status from WebSocket — bypasses REST polling */
     mcpStatusData?: McpToolsetsStatusResponse | null;
 }
-export declare function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor, draggable, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt, promptVariant, mentionableAgents, promptHistory, headerContent, showAgentsMenu, showInlineAgentsMenu, agents, selectedAgentId, onSelectAgent, showTokenUsage, showContextRing, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading, models, decisions, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }: InputPromptProps): import("react").JSX.Element;
+export declare function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor, draggable, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt, promptVariant, mentionableAgents, promptHistory, headerContent, showAgentsMenu, showInlineAgentsMenu, agents, selectedAgentId, onSelectAgent, showTokenUsage, showContextRing, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading, models, decisions, selectedModel, onModelSelect, availableTools, availableFrontendTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }: InputPromptProps): import("react").JSX.Element;

package/lib/chat/prompt/InputPrompt.js

@@ -29,7 +29,7 @@ const EMPTY_ID_SET = new Set();
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor = 'bottom', draggable = false, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt = false, promptVariant, mentionableAgents, promptHistory, headerContent, showAgentsMenu = false, showInlineAgentsMenu = true, agents = [], selectedAgentId, onSelectAgent, showTokenUsage, showContextRing = false, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu = true, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading = false, models = [], decisions, selectedModel = '', onModelSelect = () => { }, availableTools = [], mcpServers = [], enabledMcpTools = EMPTY_TOOL_MAP, enabledMcpToolCount = 0, onToggleMcpTool = () => { }, onToggleAllMcpServerTools = () => { }, approvedMcpTools = EMPTY_TOOL_MAP, onToggleMcpToolApproval = () => { }, skills = [], skillsLoading = false, enabledSkills = EMPTY_ID_SET, onToggleSkill = () => { }, onToggleAllSkills = () => { }, approvedSkills = EMPTY_ID_SET, onToggleSkillApproval = () => { }, apiBase, authToken, mcpStatusData, }) {
+export function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor = 'bottom', draggable = false, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt = false, promptVariant, mentionableAgents, promptHistory, headerContent, showAgentsMenu = false, showInlineAgentsMenu = true, agents = [], selectedAgentId, onSelectAgent, showTokenUsage, showContextRing = false, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu = true, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading = false, models = [], decisions, selectedModel = '', onModelSelect = () => { }, availableTools = [], availableFrontendTools = [], mcpServers = [], enabledMcpTools = EMPTY_TOOL_MAP, enabledMcpToolCount = 0, onToggleMcpTool = () => { }, onToggleAllMcpServerTools = () => { }, approvedMcpTools = EMPTY_TOOL_MAP, onToggleMcpToolApproval = () => { }, skills = [], skillsLoading = false, enabledSkills = EMPTY_ID_SET, onToggleSkill = () => { }, onToggleAllSkills = () => { }, approvedSkills = EMPTY_ID_SET, onToggleSkillApproval = () => { }, apiBase, authToken, mcpStatusData, }) {
     const isKernelBusy = kernelStatus === 'busy';
     /*
      * Each menu is offered when it is switched on *and* has something behind it.
@@ -143,7 +143,7 @@ export function InputPrompt({ input, setInput, isLoading, kernelStatus, connecti
                             minHeight: 36,
                             bordered: true,
                             subtle: true,
-                            content: (_jsx(_Fragment, { children: anyOffered || extrasOffered || suggestionsOffered ? (_jsxs(_Fragment, { children: [agentsOffered && (_jsx(AgentsMenu, { agents: agents, selectedAgentId: selectedAgentId, onSelectAgent: onSelectAgent })), toolsOffered && (_jsx(ToolsMenu, { codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, mcpServers: mcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: enabledMcpToolCount, onToggleMcpTool: onToggleMcpTool, onToggleAllMcpServerTools: onToggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: onToggleMcpToolApproval, availableTools: availableTools })), skillsOffered && (_jsx(SkillsMenu, { skills: skills, skillsLoading: skillsLoading, enabledSkills: enabledSkills, onToggleSkill: onToggleSkill, onToggleAllSkills: onToggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: onToggleSkillApproval })), modelsOffered && (_jsx(ModelSelector, { models: models, decisions: decisions, selectedModel: selectedModel, onModelSelect: onModelSelect, isA2AProtocol: isA2AProtocol })), suggestionsOffered && (_jsx(SuggestionsMenu, { suggestions: suggestionItems, onPick: text => {
+                            content: (_jsx(_Fragment, { children: anyOffered || extrasOffered || suggestionsOffered ? (_jsxs(_Fragment, { children: [agentsOffered && (_jsx(AgentsMenu, { agents: agents, selectedAgentId: selectedAgentId, onSelectAgent: onSelectAgent })), toolsOffered && (_jsx(ToolsMenu, { codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, mcpServers: mcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: enabledMcpToolCount, onToggleMcpTool: onToggleMcpTool, onToggleAllMcpServerTools: onToggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: onToggleMcpToolApproval, availableTools: availableTools, availableFrontendTools: availableFrontendTools })), skillsOffered && (_jsx(SkillsMenu, { skills: skills, skillsLoading: skillsLoading, enabledSkills: enabledSkills, onToggleSkill: onToggleSkill, onToggleAllSkills: onToggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: onToggleSkillApproval })), modelsOffered && (_jsx(ModelSelector, { models: models, decisions: decisions, selectedModel: selectedModel, onModelSelect: onModelSelect, isA2AProtocol: isA2AProtocol })), suggestionsOffered && (_jsx(SuggestionsMenu, { suggestions: suggestionItems, onPick: text => {
                                                 setInput(text);
                                                 setPickedFocus(n => n + 1);
                                             } })), extrasOffered && (_jsx(Box, { sx: {

package/lib/chat/prompt/menus/SkillsMenu.js

@@ -11,6 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Text, Button, ActionMenu, ActionList, Tooltip, ToggleSwitch, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { BriefcaseIcon } from '@primer/octicons-react';
+import { SpecMark, hasMark, marksOfSkill } from '../../marks';
 export function SkillsMenu({ skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, }) {
     // A count, not a word — see `ToolsMenu`. The names go in the tooltip, which
     // is where a person asking "which skills?" is already looking.
@@ -40,7 +41,7 @@ export function SkillsMenu({ skills, skillsLoading, enabledSkills, onToggleSkill
                                         '&:hover': {
                                             backgroundColor: 'canvas.subtle',
                                         },
-                                    }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { id: `toggle-skill-${skill.id}`, sx: { fontWeight: 'semibold' }, children: skill.name }), skill.status && (_jsx(Text, { sx: {
+                                    }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [hasMark(marksOfSkill(skill.id)) && (_jsx(SpecMark, { ...marksOfSkill(skill.id), size: 16 })), _jsx(Text, { id: `toggle-skill-${skill.id}`, sx: { fontWeight: 'semibold' }, children: skill.name }), skill.status && (_jsx(Text, { sx: {
                                                                 fontSize: '10px',
                                                                 px: 1,
                                                                 borderRadius: 2,