@promptbook/cli 0.114.0-2 → 0.114.0-21

package/src/book-components/Chat/MarkdownContent/MarkdownContent.tsx

@@ -6,7 +6,12 @@ import type { string_markdown } from '../../../types/string_markdown';
 import { classNames } from '../../_common/react-utils/classNames';
 import { CodeBlock } from '../CodeBlock/CodeBlock';
 import type { MarkdownInlineReference } from '../utils/renderMarkdown';
-import { renderMarkdown } from '../utils/renderMarkdown';
+import {
+    MARKDOWN_INLINE_REFERENCE_ICON_ATTRIBUTE,
+    MARKDOWN_INLINE_REFERENCE_MENU_ACTION_ATTRIBUTE,
+    MARKDOWN_INLINE_REFERENCE_MENU_ACTION_REFERENCE_ATTRIBUTE,
+    renderMarkdown,
+} from '../utils/renderMarkdown';
 import styles from './MarkdownContent.module.css';
 
 /**
@@ -16,6 +21,20 @@ import styles from './MarkdownContent.module.css';
  */
 const DETAILS_SUMMARY_SELECTOR = 'summary';
 
+/**
+ * Selector matching client-action buttons rendered inside inline-reference menus.
+ *
+ * @private utility of `MarkdownContent` component
+ */
+const INLINE_REFERENCE_MENU_ACTION_SELECTOR = `[${MARKDOWN_INLINE_REFERENCE_MENU_ACTION_ATTRIBUTE}]`;
+
+/**
+ * Selector matching inline-reference favicon images which need a broken-image fallback.
+ *
+ * @private utility of `MarkdownContent` component
+ */
+const INLINE_REFERENCE_ICON_SELECTOR = `img[${MARKDOWN_INLINE_REFERENCE_ICON_ATTRIBUTE}]`;
+
 /**
  * Props for markdown content.
  */
@@ -110,6 +129,45 @@ function resolveClickedDetailsElement(target: EventTarget | null, container: HTM
     return details instanceof HTMLDetailsElement ? details : null;
 }
 
+/**
+ * Resolves the configured callback for one rendered inline-reference menu action.
+ *
+ * @param actionButton - Clicked menu action button.
+ * @param inlineReferences - References available to the markdown content.
+ * @returns Matching action callback, or `null` when the rendered marker is stale.
+ *
+ * @private utility of `MarkdownContent` component
+ */
+function resolveInlineReferenceMenuAction(
+    actionButton: HTMLButtonElement,
+    inlineReferences: ReadonlyArray<MarkdownInlineReference> | undefined,
+): (() => void | Promise<void>) | null {
+    const actionId = actionButton.getAttribute(MARKDOWN_INLINE_REFERENCE_MENU_ACTION_ATTRIBUTE);
+    const referenceId = actionButton.getAttribute(MARKDOWN_INLINE_REFERENCE_MENU_ACTION_REFERENCE_ATTRIBUTE);
+
+    if (!actionId || !referenceId || !inlineReferences) {
+        return null;
+    }
+
+    const reference = inlineReferences.find((candidateReference) => candidateReference.reference === referenceId);
+    const option = reference?.menu?.options.find((candidateOption) => candidateOption.action?.id === actionId);
+
+    return option?.action?.onSelect || null;
+}
+
+/**
+ * Hides a favicon when it has completed without loading any pixels.
+ *
+ * @param faviconImage - Inline-reference favicon to inspect.
+ *
+ * @private utility of `MarkdownContent` component
+ */
+function hideBrokenInlineReferenceIcon(faviconImage: HTMLImageElement): void {
+    if (faviconImage.complete && faviconImage.naturalWidth === 0) {
+        faviconImage.hidden = true;
+    }
+}
+
 /**
  * Renders markdown content with support for code highlighting, math, and tables.
  *
@@ -215,8 +273,59 @@ export const MarkdownContent = memo(function MarkdownContent(props: MarkdownCont
             pendingToggleFallbackTimeoutIds.add(fallbackTimeoutId);
         };
 
+        /**
+         * Executes one delegated inline-reference menu action without allowing the click to reach
+         * surrounding chat message handlers.
+         */
+        const handleInlineReferenceMenuActionClick = (event: MouseEvent) => {
+            const targetElement = event.target instanceof Element ? event.target : null;
+            const actionButton = targetElement?.closest(INLINE_REFERENCE_MENU_ACTION_SELECTOR);
+
+            if (!(actionButton instanceof HTMLButtonElement) || !containerElement.contains(actionButton)) {
+                return;
+            }
+
+            const action = resolveInlineReferenceMenuAction(actionButton, inlineReferences);
+            if (!action || actionButton.disabled) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+            actionButton.disabled = true;
+            actionButton.setAttribute('aria-busy', 'true');
+
+            void Promise.resolve()
+                .then(action)
+                .catch((error) => {
+                    console.error('Inline reference menu action failed:', error);
+                })
+                .finally(() => {
+                    if (!actionButton.isConnected) {
+                        return;
+                    }
+
+                    actionButton.disabled = false;
+                    actionButton.removeAttribute('aria-busy');
+                });
+        };
+
         containerElement.addEventListener('toggle', handleToggle, true);
         containerElement.addEventListener('click', handleSummaryClick);
+        containerElement.addEventListener('click', handleInlineReferenceMenuActionClick);
+
+        const inlineReferenceIconImages =
+            containerElement.querySelectorAll<HTMLImageElement>(INLINE_REFERENCE_ICON_SELECTOR);
+        const handleInlineReferenceIconError = (event: Event) => {
+            if (event.currentTarget instanceof HTMLImageElement) {
+                event.currentTarget.hidden = true;
+            }
+        };
+
+        inlineReferenceIconImages.forEach((faviconImage) => {
+            hideBrokenInlineReferenceIcon(faviconImage);
+            faviconImage.addEventListener('error', handleInlineReferenceIconError);
+        });
 
         const preElements = containerElement.querySelectorAll('pre');
 
@@ -261,12 +370,16 @@ export const MarkdownContent = memo(function MarkdownContent(props: MarkdownCont
         return () => {
             containerElement.removeEventListener('toggle', handleToggle, true);
             containerElement.removeEventListener('click', handleSummaryClick);
+            containerElement.removeEventListener('click', handleInlineReferenceMenuActionClick);
+            inlineReferenceIconImages.forEach((faviconImage) => {
+                faviconImage.removeEventListener('error', handleInlineReferenceIconError);
+            });
             pendingToggleFallbackTimeoutIds.forEach((timeoutId) => window.clearTimeout(timeoutId));
             pendingToggleFallbackTimeoutIds.clear();
             rootsRef.current.forEach((root) => root.unmount());
             rootsRef.current = [];
         };
-    }, [htmlContent, resolvedTheme]);
+    }, [htmlContent, inlineReferences, resolvedTheme]);
 
     return (
         <div

package/src/book-components/Chat/save/react/exports/chat-preview-2025-10-13 (1).jsx

@@ -1,3 +1,4 @@
+import { spaceTrim } from 'spacetrim';
 import { Chat } from '@promptbook/components';
 
 export function ChatPreviewChatComponent() {
@@ -43,7 +44,47 @@ export function ChatPreviewChatComponent() {
                     createdAt: '2025-10-12T23:13:15.925Z',
                     sender: 'ASSISTANT_1',
                     content:
-                        "**Absolutely!** Here’s a quick overview:\n\n- **Bold**\n- _Italic_\n- __Underline__\n- ~~Strikethrough~~\n- `Inline code`\n- Code block:\n\n```js\nconsole.log('Hello, world!');\n```\n> Blockquote\n> With\n> Multiple lines\n\n\n- Some text with [Link](https://example.com)\n- ![image](https://img.youtube.com/vi/nD1v9dMvnLY/maxresdefault.jpg)\n- Lists:\n  - Item 1\n    - Nested item\n- Numbered list:\n  1. First\n     1. Nested\n- Table:\n\n| Syntax | Description |\n|--------|-------------|\n| Header | Title       |\n| Cell   | Data        |\n\n- Emoji: 😄 🎉\n- Mention: @user\n- Hashtag: #demo\n- Math: $E=mc^2$\n- Horizontal rule:\n\n---",
+                        spaceTrim(`
+                            **Absolutely!** Here’s a quick overview:
+
+                            - **Bold**
+                            - _Italic_
+                            - __Underline__
+                            - ~~Strikethrough~~
+                            - \`Inline code\`
+                            - Code block:
+
+                            \`\`\`js
+                            console.log('Hello, world!');
+                            \`\`\`
+                            > Blockquote
+                            > With
+                            > Multiple lines
+
+
+                            - Some text with [Link](https://example.com)
+                            - ![image](https://img.youtube.com/vi/nD1v9dMvnLY/maxresdefault.jpg)
+                            - Lists:
+                              - Item 1
+                                - Nested item
+                            - Numbered list:
+                              1. First
+                                 1. Nested
+                            - Table:
+
+                            | Syntax | Description |
+                            |--------|-------------|
+                            | Header | Title       |
+                            | Cell   | Data        |
+
+                            - Emoji: 😄 🎉
+                            - Mention: @user
+                            - Hashtag: #demo
+                            - Math: $E=mc^2$
+                            - Horizontal rule:
+
+                            ---
+                        `),
                     isComplete: true,
                 },
                 {
@@ -51,7 +92,22 @@ export function ChatPreviewChatComponent() {
                     createdAt: '2025-10-12T23:13:15.925Z',
                     sender: 'USER',
                     content:
-                        "Wow, that's a lot! Can you combine some of them?\n\n**Bold _italic_ and `inline code`**\n\nOr maybe:\n> _Blockquote with a [link](https://example.com)_\n\nAnd a table:\n\n| Name | Value |\n|------|-------|\n| Pi   | $\\pi$ |\n\n---",
+                        spaceTrim(`
+                            Wow, that's a lot! Can you combine some of them?
+
+                            **Bold _italic_ and \`inline code\`**
+
+                            Or maybe:
+                            > _Blockquote with a [link](https://example.com)_
+
+                            And a table:
+
+                            | Name | Value |
+                            |------|-------|
+                            | Pi   | $\\pi$ |
+
+                            ---
+                        `),
                     isComplete: true,
                 },
                 {
@@ -59,7 +115,19 @@ export function ChatPreviewChatComponent() {
                     createdAt: '2025-10-12T23:13:15.925Z',
                     sender: 'ASSISTANT_1',
                     content:
-                        'Of course! Here’s a creative mix:\n\n- ~~Strikethrough~~ and __underline__\n- 1. Numbered with *italic* and emoji 🚀\n- - Nested `inline code`\n\n> Blockquote with math: $a^2 + b^2 = c^2$\n\n---\n\nLet me know if you want to see more! #rich #features',
+                        spaceTrim(`
+                            Of course! Here’s a creative mix:
+
+                            - ~~Strikethrough~~ and __underline__
+                            - 1. Numbered with *italic* and emoji 🚀
+                            - - Nested \`inline code\`
+
+                            > Blockquote with math: $a^2 + b^2 = c^2$
+
+                            ---
+
+                            Let me know if you want to see more! #rich #features
+                        `),
                     isComplete: true,
                 },
                 {
@@ -67,7 +135,15 @@ export function ChatPreviewChatComponent() {
                     createdAt: '2025-10-12T23:13:15.925Z',
                     sender: 'ASSISTANT_1',
                     content:
-                        'And here are some more emojis:\n\n😄🎉🚀💡📊📝🔥🌟✅❌\n❤🧡💙💚💛🧡❤️🤎🖤💜\n🐱‍👤🐱‍💻🐱🚀🐱‍🏍💫🎞🎫🎠🎏\n😀😀😁😂🤣😃😄😆😅🤩\n➿🛂🛃🛄🛅♿📶🚻🚹🚾',
+                        spaceTrim(`
+                            And here are some more emojis:
+
+                            😄🎉🚀💡📊📝🔥🌟✅❌
+                            ❤🧡💙💚💛🧡❤️🤎🖤💜
+                            🐱‍👤🐱‍💻🐱🚀🐱‍🏍💫🎞🎫🎠🎏
+                            😀😀😁😂🤣😃😄😆😅🤩
+                            ➿🛂🛃🛄🛅♿📶🚻🚹🚾
+                        `),
                     isComplete: true,
                 },
                 {
@@ -75,7 +151,21 @@ export function ChatPreviewChatComponent() {
                     createdAt: '2025-10-12T23:13:15.925Z',
                     sender: 'ASSISTANT_1',
                     content:
-                        '## And lists:\n\n- Item 1\n- Item 2\n    - Nested Item 2a\n    - Nested Item 2b\n- Item 3\n\n1. First item\n2. Second item\n   1. Nested second item a\n   2. Nested second item b\n3. Third item',
+                        spaceTrim(`
+                            ## And lists:
+
+                            - Item 1
+                            - Item 2
+                                - Nested Item 2a
+                                - Nested Item 2b
+                            - Item 3
+
+                            1. First item
+                            2. Second item
+                               1. Nested second item a
+                               2. Nested second item b
+                            3. Third item
+                        `),
                     isComplete: true,
                 },
             ]}

package/src/book-components/Chat/utils/$provideServerDomWindow.ts

@@ -0,0 +1,77 @@
+import type { WindowLike as DomWindowLike } from 'dompurify';
+import { spaceTrim } from 'spacetrim';
+import { assertsError } from '../../../errors/assertsError';
+import { EnvironmentMismatchError } from '../../../errors/EnvironmentMismatchError';
+
+/**
+ * Shared DOM window reused by every render which happens outside of a browser
+ *
+ * @private utility of `$provideServerDomWindow`
+ */
+let serverDomWindow: DomWindowLike | null = null;
+
+/**
+ * Provides a DOM `window` for runtimes which do not have one, for example Node.js during server-side rendering
+ *
+ * Note: `$` is used to indicate that this function is not a pure function - it creates and caches one shared DOM window
+ *
+ * @returns DOM window which can back a DOM-dependent library like `DOMPurify`
+ * @throws {EnvironmentMismatchError} When the current runtime can not create a DOM window
+ * @private utility of `renderMarkdown`
+ */
+export function $provideServerDomWindow(): DomWindowLike {
+    if (serverDomWindow === null) {
+        const { JSDOM } = requireServerDomLibrary();
+        serverDomWindow = new JSDOM('').window as unknown as DomWindowLike;
+    }
+
+    return serverDomWindow;
+}
+
+/**
+ * Loads `jsdom` which backs the DOM window outside of a browser
+ *
+ * Note: [😷] `jsdom` reaches for Node.js built-ins like `fs`, `child_process` and `net`, so browser bundlers must
+ *       never follow the `require` below - even though it is unreachable in a browser, bundlers resolve it statically.
+ *       They are told to replace `jsdom` with an empty module by the `browser` field of the generated package
+ *       manifests, which is written by `applyBrowserUnsupportedDependencyStubs` during the package generation.
+ *
+ * @returns The `jsdom` library
+ * @throws {EnvironmentMismatchError} When `jsdom` can not be loaded in the current runtime
+ * @private utility of `$provideServerDomWindow`
+ */
+function requireServerDomLibrary(): typeof import('jsdom') {
+    let serverDomLibrary: Partial<typeof import('jsdom')> | null = null;
+    let serverDomLibraryError: Error | null = null;
+
+    try {
+        // Note: [😷] Keep `'jsdom'` written as a literal, bundlers do not replace a computed module name
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        serverDomLibrary = require('jsdom') as typeof import('jsdom');
+    } catch (error) {
+        assertsError(error);
+        serverDomLibraryError = error;
+    }
+
+    if (typeof serverDomLibrary?.JSDOM !== 'function') {
+        throw new EnvironmentMismatchError(
+            spaceTrim(
+                (block) => `
+                    Markdown can not be rendered because there is no DOM in the current runtime.
+
+                    Rendered markdown is sanitized through \`DOMPurify\`, which needs a DOM - the DOM of the browser
+                    when the code runs in a browser and \`jsdom\` in every other runtime, for example during
+                    server-side rendering in **Node.js**.
+
+                    ${block(
+                        serverDomLibraryError === null
+                            ? 'The `jsdom` module was resolved but it does not export `JSDOM`, which happens when a bundler replaces `jsdom` with an empty module in a build which is neither a browser build nor a Node.js build.'
+                            : `${serverDomLibraryError.name}: ${serverDomLibraryError.message}`,
+                    )}
+                `,
+            ),
+        );
+    }
+
+    return serverDomLibrary as typeof import('jsdom');
+}

package/src/book-components/Chat/utils/agentProjectToolCall.ts

@@ -0,0 +1,151 @@
+import type { AgentMessageProjectChange } from '../../../utils/agent-message-runtime/AgentMessageProjectChange';
+import { normalizeAgentMessageProjectChange } from '../../../utils/agent-message-runtime/AgentMessageProjectChange';
+
+/**
+ * Synthetic tool name used for agent-project chips in chat UI.
+ *
+ * The Agents Server emits one such tool call per project an answer viewed or edited, so the chat
+ * shows which projects the agent worked with below the message that touched them.
+ *
+ * @private internal chat-ui marker for touched agent projects
+ */
+export const AGENT_PROJECT_TOOL_CALL_NAME = 'agent_project_touched';
+
+/**
+ * Safe, user-facing metadata shown in agent-project chips.
+ *
+ * Everything besides the project name is optional, because a chip written by an older server — or
+ * one whose project has meanwhile been deleted — still has to render.
+ *
+ * @private internal chat-ui type for touched agent projects
+ */
+export type AgentProjectToolCallResult = {
+    /**
+     * Directory name of the project.
+     */
+    readonly projectName: string;
+
+    /**
+     * Human-readable project name shown in the chip.
+     */
+    readonly displayName?: string;
+
+    /**
+     * Short project description, resolved the same way as on the project page.
+     */
+    readonly description?: string;
+
+    /**
+     * Link to the project page, when the chat knows where the project lives.
+     */
+    readonly projectHref?: string;
+
+    /**
+     * Address the running project itself is served on, when it has one.
+     */
+    readonly projectUrl?: string;
+
+    /**
+     * Whether the project was running when the answer finished.
+     */
+    readonly isRunning?: boolean;
+
+    /**
+     * Runtime status label, the same one the project page shows.
+     */
+    readonly runtimeStatusLabel?: string;
+
+    /**
+     * Total size of the project, already formatted for display.
+     */
+    readonly sizeLabel?: string;
+
+    /**
+     * Count of files inside the project.
+     */
+    readonly fileCount?: number;
+
+    /**
+     * Whether the project folder is a git repository.
+     */
+    readonly isGitRepository?: boolean;
+
+    /**
+     * What this very message changed in the project, when it changed anything.
+     *
+     * Its `projectName` repeats the one above because the change is reported by the agent runner
+     * in exactly this shape, and reusing it keeps the two descriptions from drifting apart.
+     */
+    readonly change?: AgentMessageProjectChange;
+};
+
+/**
+ * Parses the project-chip payload from one tool result.
+ *
+ * @param result - Raw tool result payload.
+ * @returns Parsed project metadata, or `null` when the result describes no project.
+ *
+ * @private internal helper reused by chip and modal rendering
+ */
+export function parseAgentProjectToolCallResult(result: unknown): AgentProjectToolCallResult | null {
+    if (!result || typeof result !== 'object' || Array.isArray(result)) {
+        return null;
+    }
+
+    const candidate = result as Partial<AgentProjectToolCallResult>;
+    if (typeof candidate.projectName !== 'string' || candidate.projectName.trim().length === 0) {
+        return null;
+    }
+
+    const change = normalizeAgentMessageProjectChange(candidate.change);
+
+    return {
+        projectName: candidate.projectName.trim(),
+        ...pickTrimmedText('displayName', candidate.displayName),
+        ...pickTrimmedText('description', candidate.description),
+        ...pickTrimmedText('projectHref', candidate.projectHref),
+        ...pickTrimmedText('projectUrl', candidate.projectUrl),
+        ...pickTrimmedText('runtimeStatusLabel', candidate.runtimeStatusLabel),
+        ...pickTrimmedText('sizeLabel', candidate.sizeLabel),
+        ...(typeof candidate.isRunning === 'boolean' ? { isRunning: candidate.isRunning } : {}),
+        ...(typeof candidate.isGitRepository === 'boolean' ? { isGitRepository: candidate.isGitRepository } : {}),
+        ...(typeof candidate.fileCount === 'number' && Number.isFinite(candidate.fileCount) && candidate.fileCount >= 0
+            ? { fileCount: candidate.fileCount }
+            : {}),
+        ...(change ? { change } : {}),
+    };
+}
+
+/**
+ * Keeps one optional text field only when it carries content.
+ *
+ * @param fieldName - Name of the payload field.
+ * @param value - Raw field value.
+ * @returns Object holding the trimmed field, or an empty object.
+ *
+ * @private internal helper of `parseAgentProjectToolCallResult`
+ */
+function pickTrimmedText<TFieldName extends string>(
+    fieldName: TFieldName,
+    value: unknown,
+): Partial<Record<TFieldName, string>> {
+    if (typeof value !== 'string' || value.trim().length === 0) {
+        return {};
+    }
+
+    return { [fieldName]: value.trim() } as Record<TFieldName, string>;
+}
+
+/**
+ * Resolves the chip label of one touched agent project.
+ *
+ * @param projectResult - Parsed project metadata.
+ * @returns Human-readable project name.
+ *
+ * @private internal helper reused by chip and modal rendering
+ */
+export function resolveAgentProjectToolCallLabel(projectResult: AgentProjectToolCallResult): string {
+    return projectResult.displayName || projectResult.projectName;
+}
+
+// Note: [💞] Ignore a discrepancy between file name and entity name

package/src/book-components/Chat/utils/externalSourceToolCall.ts

@@ -0,0 +1,65 @@
+import type {
+    AgentMessageTouchedExternalSource,
+    AgentMessageTouchedExternalSourceKind,
+} from '../../../utils/agent-message-runtime/AgentMessageTouchedExternalSource';
+import { normalizeAgentMessageTouchedExternalSource } from '../../../utils/agent-message-runtime/AgentMessageTouchedExternalSource';
+
+/**
+ * Synthetic tool name used for external-source chips in chat UI.
+ *
+ * The Agents Server emits one such tool call per source outside the agent an answer viewed or
+ * edited, so the chat shows which services, websites and searches the agent really reached below
+ * the message that touched them. Work the agent does inside itself emits nothing.
+ *
+ * @private internal chat-ui marker for touched external sources
+ */
+export const EXTERNAL_SOURCE_TOOL_CALL_NAME = 'external_source_touched';
+
+/**
+ * Emoji shown in the chip of each external source category.
+ *
+ * @private internal chat-ui constant for touched external sources
+ */
+const EXTERNAL_SOURCE_EMOJI_BY_KIND: Readonly<Record<AgentMessageTouchedExternalSourceKind, string>> = {
+    integration: '🔌',
+    website: '🌐',
+    search: '🔎',
+};
+
+/**
+ * Parses the external-source chip payload from one tool result.
+ *
+ * @param result - Raw tool result payload.
+ * @returns Parsed source metadata, or `null` when the result describes no external source.
+ *
+ * @private internal helper reused by chip and modal rendering
+ */
+export function parseExternalSourceToolCallResult(result: unknown): AgentMessageTouchedExternalSource | null {
+    return normalizeAgentMessageTouchedExternalSource(result);
+}
+
+/**
+ * Resolves the chip label of one touched external source.
+ *
+ * @param externalSource - Parsed source metadata.
+ * @returns User-facing name of the source.
+ *
+ * @private internal helper reused by chip and modal rendering
+ */
+export function resolveExternalSourceToolCallLabel(externalSource: AgentMessageTouchedExternalSource): string {
+    return externalSource.name;
+}
+
+/**
+ * Resolves the chip emoji of one touched external source.
+ *
+ * @param externalSource - Parsed source metadata.
+ * @returns Emoji telling apart an integration, a website and a search.
+ *
+ * @private internal helper reused by chip and modal rendering
+ */
+export function resolveExternalSourceToolCallEmoji(externalSource: AgentMessageTouchedExternalSource): string {
+    return EXTERNAL_SOURCE_EMOJI_BY_KIND[externalSource.kind];
+}
+
+// Note: [💞] Ignore a discrepancy between file name and entity name

package/src/book-components/Chat/utils/getToolCallChipletInfo.ts

@@ -1,6 +1,17 @@
 import type { ToolCall } from '../../../types/ToolCall';
 import { ASSISTANT_PREPARATION_TOOL_CALL_NAME } from '../../../types/ToolCall';
 import type { AgentChipData } from '../AgentChip/AgentChip';
+import {
+    AGENT_PROJECT_TOOL_CALL_NAME,
+    parseAgentProjectToolCallResult,
+    resolveAgentProjectToolCallLabel,
+} from './agentProjectToolCall';
+import {
+    EXTERNAL_SOURCE_TOOL_CALL_NAME,
+    parseExternalSourceToolCallResult,
+    resolveExternalSourceToolCallEmoji,
+    resolveExternalSourceToolCallLabel,
+} from './externalSourceToolCall';
 import { formatToolCallLocalTime } from './formatToolCallLocalTime';
 import { formatToolCallTranslationTemplate } from './formatToolCallTranslationTemplate';
 import {
@@ -112,6 +123,8 @@ type ToolCallChipletResolver = (context: ToolCallChipletContext) => ToolCallChip
  */
 const SPECIALIZED_TOOL_CALL_CHIPLET_RESOLVERS: ReadonlyArray<ToolCallChipletResolver> = [
     resolveWalletCredentialChipletInfo,
+    resolveAgentProjectToolCallChipletInfo,
+    resolveExternalSourceToolCallChipletInfo,
     resolveTeamToolCallChipletInfo,
     resolveTimeToolCallChipletInfo,
     resolveEmailToolCallChipletInfo,
@@ -140,6 +153,8 @@ export function buildToolCallChipText(chipletInfo: ToolCallChipletInfo): string
 export const TOOL_TITLES: Record<string, { title: string; emoji: string }> = {
     [ASSISTANT_PREPARATION_TOOL_CALL_NAME]: { title: 'Preparing agent', emoji: '✨' },
     [WALLET_CREDENTIAL_TOOL_CALL_NAME]: { title: 'Credential used', emoji: '🔐' },
+    [AGENT_PROJECT_TOOL_CALL_NAME]: { title: 'Project', emoji: '📁' },
+    [EXTERNAL_SOURCE_TOOL_CALL_NAME]: { title: 'External source', emoji: '🌐' },
     'self-learning': { title: 'self-learning', emoji: '🧠' },
     retrieve_user_memory: { title: 'Reading memory', emoji: '🧠' },
     store_user_memory: { title: 'Storing memory', emoji: '🧠' },
@@ -320,6 +335,55 @@ function resolveWalletCredentialChipletInfo(context: ToolCallChipletContext): To
     return createEmojiToolCallChipletInfo(context, walletCredentialResult.credentialName);
 }
 
+/**
+ * Resolves the project-name chip label for touched agent projects.
+ *
+ * @param context - Shared chiplet resolution context.
+ * @returns Chiplet info when the tool call marks a touched project, otherwise `null`.
+ *
+ * @private utility of `<Chat/>`
+ */
+function resolveAgentProjectToolCallChipletInfo(context: ToolCallChipletContext): ToolCallChipletInfo | null {
+    if (context.toolCall.name !== AGENT_PROJECT_TOOL_CALL_NAME) {
+        return null;
+    }
+
+    const projectResult = parseAgentProjectToolCallResult(context.resultRaw);
+    if (!projectResult) {
+        return null;
+    }
+
+    return createEmojiToolCallChipletInfo(context, resolveAgentProjectToolCallLabel(projectResult));
+}
+
+/**
+ * Resolves the source-name chip label for touched external sources.
+ *
+ * The emoji tells apart an integration, a website and a search, so it overrides the single emoji
+ * registered for the tool name itself.
+ *
+ * @param context - Shared chiplet resolution context.
+ * @returns Chiplet info when the tool call marks a touched external source, otherwise `null`.
+ *
+ * @private utility of `<Chat/>`
+ */
+function resolveExternalSourceToolCallChipletInfo(context: ToolCallChipletContext): ToolCallChipletInfo | null {
+    if (context.toolCall.name !== EXTERNAL_SOURCE_TOOL_CALL_NAME) {
+        return null;
+    }
+
+    const externalSource = parseExternalSourceToolCallResult(context.resultRaw);
+    if (!externalSource) {
+        return null;
+    }
+
+    return {
+        text: `${resolveExternalSourceToolCallEmoji(externalSource)} ${resolveExternalSourceToolCallLabel(
+            externalSource,
+        )}`,
+    };
+}
+
 /**
  * Resolves a chip label and agent metadata for TEAM tool calls.
  *