@promptbook/cli 0.112.0-99 → 0.113.0-0

package/src/book-components/BookEditor/useBookEditorMonacoLanguage.ts

@@ -1,26 +1,16 @@
 import type { editor, Position } from 'monaco-editor';
 import { useEffect } from 'react';
-import { getAllCommitmentDefinitions } from '../../commitments/_common/getAllCommitmentDefinitions';
-import {
-    formatCommitmentReplacementText,
-    getCommitmentNoticeMetadata,
-} from '../../commitments/_common/getCommitmentNoticeMetadata';
-import { PROMPTBOOK_SYNTAX_COLORS } from '../../config';
+import { PROMPTBOOK_SYNTAX_COLORS } from './BookEditorBrowserConfig';
 import { BookEditorMonacoConstants } from './BookEditorMonacoConstants';
 import { BookEditorMonacoTokenization } from './BookEditorMonacoTokenization';
+import type { BookEditorTheme } from './BookEditorTheme';
+import { BOOK_EDITOR_RENDER_THEME, resolveBookEditorRenderTheme } from './BookEditorTheme';
 
 /**
  * Type describing monaco editor.
  */
 type MonacoEditor = typeof import('monaco-editor');
 
-/**
- * Resolved visual theme supported by the Book editor.
- *
- * @private function of BookEditorMonaco
- */
-type BookEditorTheme = 'LIGHT' | 'DARK';
-
 /**
  * Props for use book editor monaco language.
  */
@@ -214,32 +204,18 @@ function createCommitmentRegex(commitmentTypes: ReadonlyArray<string>): RegExp {
 }
 
 /**
- * Creates regex-token-state triples for note-like commitment groups available in this runtime.
+ * Creates regex-token-state triples for note-like commitment groups (TODO/NOTE/NOTES/NONCE).
  *
- * @param commitmentTypes - All known commitment types.
  * @returns Tokenization metadata for TODO/NOTE-like commitment groups.
  *
  * @private function of BookEditorMonaco
  */
-function createNoteLikeCommitmentStates(commitmentTypes: ReadonlyArray<string>): Array<NoteLikeCommitmentState> {
-    const commitmentTypeSet = new Set(commitmentTypes.map((type) => type.toUpperCase()));
-
-    return NOTE_LIKE_COMMITMENT_GROUPS.flatMap((group) => {
-        const matchingCommitmentTypes = group.commitmentTypes.filter((type) =>
-            commitmentTypeSet.has(type.toUpperCase()),
-        );
-        if (matchingCommitmentTypes.length === 0) {
-            return [];
-        }
-
-        return [
-            {
-                regex: createCommitmentRegex(matchingCommitmentTypes),
-                token: group.token,
-                state: group.state,
-            } satisfies NoteLikeCommitmentState,
-        ];
-    });
+function createNoteLikeCommitmentStates(): Array<NoteLikeCommitmentState> {
+    return NOTE_LIKE_COMMITMENT_GROUPS.map((group) => ({
+        regex: createCommitmentRegex([...group.commitmentTypes]),
+        token: group.token,
+        state: group.state,
+    }));
 }
 
 /**
@@ -286,12 +262,16 @@ function createNoteLikeBodyRules(
  *
  * @private function of BookEditorMonaco
  */
-export function ensureBookEditorMonacoLanguage(monaco: MonacoEditor, theme: BookEditorTheme = 'LIGHT'): void {
+export function ensureBookEditorMonacoLanguage(
+    monaco: MonacoEditor,
+    theme: BookEditorTheme = BOOK_EDITOR_RENDER_THEME,
+): void {
+    const renderedTheme = resolveBookEditorRenderTheme(theme);
     const monacoWithLanguageState = monaco as MonacoEditorWithBookEditorLanguageState;
     if (monacoWithLanguageState[BOOK_EDITOR_LANGUAGE_INITIALIZED_FLAG]) {
-        if (monacoWithLanguageState[BOOK_EDITOR_THEME_MODE_FLAG] !== theme) {
-            applyBookEditorMonacoTheme(monaco, theme);
-            monacoWithLanguageState[BOOK_EDITOR_THEME_MODE_FLAG] = theme;
+        if (monacoWithLanguageState[BOOK_EDITOR_THEME_MODE_FLAG] !== renderedTheme) {
+            applyBookEditorMonacoTheme(monaco, renderedTheme);
+            monacoWithLanguageState[BOOK_EDITOR_THEME_MODE_FLAG] = renderedTheme;
             return;
         }
 
@@ -300,33 +280,31 @@ export function ensureBookEditorMonacoLanguage(monaco: MonacoEditor, theme: Book
     }
 
     monacoWithLanguageState[BOOK_EDITOR_LANGUAGE_INITIALIZED_FLAG] = true;
-    monacoWithLanguageState[BOOK_EDITOR_THEME_MODE_FLAG] = theme;
+    monacoWithLanguageState[BOOK_EDITOR_THEME_MODE_FLAG] = renderedTheme;
 
     monaco.languages.register({ id: BookEditorMonacoConstants.BOOK_LANGUAGE_ID });
 
-    const commitmentDefinitions = getAllCommitmentDefinitions();
-    const commitmentTypes = [...new Set(commitmentDefinitions.map(({ type }) => type))];
-    const commitmentDefinitionByType = new Map(
-        commitmentDefinitions.map((definition) => [definition.type, definition]),
-    );
-    const completionCommitmentTypes = [...commitmentTypes].sort((leftType, rightType) => {
-        const leftDefinition = commitmentDefinitionByType.get(leftType);
-        const rightDefinition = commitmentDefinitionByType.get(rightType);
-        const leftRank = leftDefinition?.isUnfinished ? 1 : 0;
-        const rightRank = rightDefinition?.isUnfinished ? 1 : 0;
-
-        if (leftRank !== rightRank) {
-            return leftRank - rightRank;
-        }
-
-        return commitmentTypes.indexOf(leftType) - commitmentTypes.indexOf(rightType);
-    });
-    const noteLikeCommitmentTypeSet = new Set<string>([...TODO_COMMITMENT_TYPES, ...NOTE_COMMITMENT_TYPES]);
-    const noteLikeCommitmentStates = createNoteLikeCommitmentStates(commitmentTypes);
-    const executableCommitmentTypes = commitmentTypes.filter(
-        (type) => !noteLikeCommitmentTypeSet.has(type.toUpperCase()),
-    );
-    const commitmentRegex = createCommitmentRegex(executableCommitmentTypes);
+    const completionCommitmentTypes = [
+        'GOAL',
+        'RULE',
+        'PERSONA',
+        'KNOWLEDGE',
+        'TASK',
+        'PROMPT',
+        'EXPECT',
+        'FORMAT',
+        'MODEL',
+        'SAMPLE',
+        'FROM',
+        'IMPORT',
+        'IMPORTS',
+        'TEAM',
+        ...TODO_COMMITMENT_TYPES,
+        ...NOTE_COMMITMENT_TYPES,
+        'REMOVE',
+    ];
+    const noteLikeCommitmentStates = createNoteLikeCommitmentStates();
+    const commitmentRegex = BookEditorMonacoTokenization.DYNAMIC_COMMITMENT_REGEX;
     const agentReferenceCommitmentRegex = /^\s*(FROM|IMPORT|IMPORTS|TEAM)(?=\s|$)/;
     const commitmentTransitionRules = createCommitmentTransitionRules(
         noteLikeCommitmentStates,
@@ -334,14 +312,17 @@ export function ensureBookEditorMonacoLanguage(monaco: MonacoEditor, theme: Book
         commitmentRegex,
     );
 
-    const parameterRegex = /@([a-zA-Z0-9_á-žÁ-Žč-řČ-Řš-žŠ-Žа-яА-ЯёЁ]+)/;
+    const PARAMETER_REGEX = /@([a-zA-Z0-9_á-žÁ-Žč-řČ-Řš-žŠ-Žа-яА-ЯёЁ]+)/;
+    const NON_AGENT_REFERENCE_INLINE_AT_TOKEN_REGEX =
+        BookEditorMonacoTokenization.NON_AGENT_REFERENCE_INLINE_AT_TOKEN_REGEX;
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const defaultBodyRules: any = [
         [/^---[-]*$/, ''],
         [CODE_BLOCK_FENCE_REGEX, 'code-block', '@codeblock'],
         ...commitmentTransitionRules,
-        [parameterRegex, 'parameter'],
+        [NON_AGENT_REFERENCE_INLINE_AT_TOKEN_REGEX, ''],
+        [PARAMETER_REGEX, 'parameter'],
         [/\{[^}]+\}/, 'parameter'],
     ];
 
@@ -351,7 +332,8 @@ export function ensureBookEditorMonacoLanguage(monaco: MonacoEditor, theme: Book
         [CODE_BLOCK_FENCE_REGEX, 'code-block', '@codeblock'],
         ...commitmentTransitionRules,
         ...BookEditorMonacoTokenization.AGENT_REFERENCE_HIGHLIGHT_REGEXES.map((regex) => [regex, 'agent-reference']),
-        [parameterRegex, 'parameter'],
+        [NON_AGENT_REFERENCE_INLINE_AT_TOKEN_REGEX, ''],
+        [PARAMETER_REGEX, 'parameter'],
         [/\{[^}]+\}/, 'parameter'],
     ];
 
@@ -362,7 +344,6 @@ export function ensureBookEditorMonacoLanguage(monaco: MonacoEditor, theme: Book
     const todoCommitmentBodyRules: any = createNoteLikeBodyRules('todo-commitment', commitmentTransitionRules);
 
     monaco.languages.setMonarchTokensProvider(BookEditorMonacoConstants.BOOK_LANGUAGE_ID, {
-        ignoreCase: true,
         tokenizer: {
             root: [
                 [/^\s*$/, 'empty'],
@@ -391,29 +372,17 @@ export function ensureBookEditorMonacoLanguage(monaco: MonacoEditor, theme: Book
                 endColumn: word.endColumn,
             };
 
-            const suggestions = completionCommitmentTypes.map((type, index) => {
-                const definition = commitmentDefinitionByType.get(type);
-                const notice = definition ? getCommitmentNoticeMetadata(definition) : null;
-                const completionDocumentation = notice
-                    ? `${notice.detailLabel}. ${notice.message}${
-                          notice.kind === 'deprecated'
-                              ? formatCommitmentReplacementText(definition?.deprecation?.replacedBy)
-                              : ''
-                      }`
-                    : definition?.description || 'Commitment';
-
-                return {
-                    label: type,
-                    kind: monaco.languages.CompletionItemKind.Keyword,
-                    insertText: type,
-                    range,
-                    sortText: index.toString().padStart(4, '0'),
-                    detail: notice?.detailLabel || 'Commitment',
-                    documentation: {
-                        value: completionDocumentation,
-                    },
-                };
-            });
+            const suggestions = completionCommitmentTypes.map((type, index) => ({
+                label: type,
+                kind: monaco.languages.CompletionItemKind.Keyword,
+                insertText: type,
+                range,
+                sortText: index.toString().padStart(4, '0'),
+                detail: 'Commitment',
+                documentation: {
+                    value: 'Book commitment',
+                },
+            }));
 
             return { suggestions };
         },
@@ -437,7 +406,7 @@ export function ensureBookEditorMonacoLanguage(monaco: MonacoEditor, theme: Book
         },
     });
 
-    applyBookEditorMonacoTheme(monaco, theme);
+    applyBookEditorMonacoTheme(monaco, renderedTheme);
 }
 
 /**
@@ -462,8 +431,9 @@ type EnsureBookEditorMonacoLanguageForEditorProps = {
  * @private function of BookEditorMonaco
  */
 export function ensureBookEditorMonacoLanguageForEditor(props: EnsureBookEditorMonacoLanguageForEditorProps): void {
-    const { monaco, monacoEditor, theme = 'LIGHT' } = props;
-    ensureBookEditorMonacoLanguage(monaco, theme);
+    const { monaco, monacoEditor, theme = BOOK_EDITOR_RENDER_THEME } = props;
+    const renderedTheme = resolveBookEditorRenderTheme(theme);
+    ensureBookEditorMonacoLanguage(monaco, renderedTheme);
 
     const model = monacoEditor.getModel();
     if (!model) {

package/src/book-components/BookEditor/useBookEditorMonacoLifecycle.ts

@@ -1,5 +1,6 @@
 import type { editor } from 'monaco-editor';
 import { useCallback, useEffect, useState } from 'react';
+import type { BookEditorTheme } from './BookEditorTheme';
 import { ensureBookEditorMonacoLanguage, ensureBookEditorMonacoLanguageForEditor } from './useBookEditorMonacoLanguage';
 
 /**
@@ -7,11 +8,6 @@ import { ensureBookEditorMonacoLanguage, ensureBookEditorMonacoLanguageForEditor
  */
 type MonacoEditor = typeof import('monaco-editor');
 
-/**
- * Resolved visual theme supported by the Book editor.
- */
-type BookEditorTheme = 'LIGHT' | 'DARK';
-
 /**
  * Props for use book editor monaco lifecycle.
  */

package/src/book-components/BookEditor/useBookEditorMonacoStyles.ts

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { PROMPTBOOK_SYNTAX_COLORS } from '../../config';
+import { PROMPTBOOK_SYNTAX_COLORS } from './BookEditorBrowserConfig';
+import type { BookEditorTheme } from './BookEditorTheme';
 
 /**
  * Relative Y offset multiplier for aligning line background with Monaco rendering.
@@ -17,7 +18,7 @@ type UseBookEditorMonacoStylesProps = {
     readonly scaledContentPaddingLeft: number;
     readonly scaledVerticalLineLeft: number;
     readonly zoomLevel: number;
-    readonly theme: 'LIGHT' | 'DARK';
+    readonly theme: BookEditorTheme;
 };
 
 /**

package/src/book-components/BookEditor/useBookEditorMonacoUploads.ts

@@ -3,7 +3,7 @@ import { type MutableRefObject, useCallback, useEffect, useMemo, useRef, useStat
 import type { Promisable } from 'type-fest';
 import { BookEditable } from '../../book-2.0/agent-source/BookEditable';
 import type { string_book } from '../../book-2.0/agent-source/string_book';
-import { DEFAULT_MAX_CONCURRENT_UPLOADS } from '../../config';
+import { DEFAULT_MAX_CONCURRENT_UPLOADS } from './BookEditorBrowserConfig';
 import { BookEditorMonacoConstants } from './BookEditorMonacoConstants';
 import { BookEditorMonacoFormatting } from './BookEditorMonacoFormatting';
 

package/src/book-components/Chat/Chat/Chat.module.css

@@ -432,6 +432,11 @@
     min-width: 0;
     min-height: 0;
     z-index: 300;
+    pointer-events: none;
+}
+
+.chatMainFlow .chatChildren > * {
+    pointer-events: auto;
 }
 
 /* Chat messages area */
@@ -3306,6 +3311,51 @@
     display: block;
 }
 
+.citationIframeLoading {
+    width: 100%;
+    height: 60vh;
+    min-height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #888;
+    font-size: 0.9em;
+}
+
+.citationScreenshotFallback {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.citationScreenshotImage {
+    width: 100%;
+    max-height: 60vh;
+    min-height: 400px;
+    object-fit: cover;
+    object-position: top;
+    display: block;
+}
+
+.citationScreenshotLink {
+    display: block;
+    text-align: center;
+    padding: 10px 16px;
+    background: #f0f0f0;
+    color: #333;
+    font-size: 0.9em;
+    font-weight: 500;
+    text-decoration: none;
+    border-top: 1px solid #ddd;
+    transition: background 0.15s;
+}
+
+.citationScreenshotLink:hover {
+    background: #e0e0e0;
+    text-decoration: underline;
+}
+
 .citationMetadata {
     background: #f8f8f8;
     padding: 16px;

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

@@ -88,6 +88,7 @@ export function Chat(props: ChatProps) {
         feedbackMode = 'stars',
         feedbackTranslations,
         timingTranslations,
+        resolveCitationLabel,
         onFileUpload,
         chatLocale,
         speechRecognition,
@@ -337,6 +338,7 @@ export function Chat(props: ChatProps) {
                         feedbackMode={feedbackMode}
                         feedbackTranslations={feedbackTranslations}
                         timingTranslations={timingTranslations}
+                        resolveCitationLabel={resolveCitationLabel}
                         chatLocale={chatLocale}
                         onCopy={handleCopy}
                         onMessage={onMessage}
@@ -404,6 +406,7 @@ export function Chat(props: ChatProps) {
                 toolCallIdentity={selectedToolCallIdentity}
                 onClose={closeToolCallModal}
                 toolTitles={toolTitles}
+                resolveCitationLabel={resolveCitationLabel}
                 agentParticipant={agentParticipant}
                 buttonColor={buttonColor}
                 teamAgentProfiles={teamAgentProfiles}
@@ -417,6 +420,7 @@ export function Chat(props: ChatProps) {
                 isOpen={citationModalOpen}
                 citation={selectedCitation}
                 participants={participants}
+                resolveCitationLabel={resolveCitationLabel}
                 soundSystem={soundSystem}
                 onClose={closeCitationModal}
             />

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

@@ -5,9 +5,12 @@ import { DownloadIcon } from '../../icons/DownloadIcon';
 import { classNames } from '../../_common/react-utils/classNames';
 import { MarkdownContent } from '../MarkdownContent/MarkdownContent';
 import type { ChatParticipant } from '../types/ChatParticipant';
-import { getCitationLabel, isPlainTextCitation, resolveCitationPreviewUrl } from '../utils/citationHelpers';
+import type { CitationLabelResolver } from '../types/CitationLabelResolver';
+import { useResolvedCitationLabel } from '../hooks/useResolvedCitationLabel';
+import { isPlainTextCitation, resolveCitationPreviewUrl } from '../utils/citationHelpers';
 import type { ParsedCitation } from '../utils/parseCitationsFromContent';
 import styles from './Chat.module.css';
+import { CitationIframePreview } from './CitationIframePreview';
 import type { ChatSoundSystem } from './ChatProps';
 
 /**
@@ -19,17 +22,30 @@ export type ChatCitationModalProps = {
     isOpen: boolean;
     citation: ParsedCitation | null;
     participants: ReadonlyArray<ChatParticipant>;
+    resolveCitationLabel?: CitationLabelResolver;
     soundSystem?: ChatSoundSystem;
     onClose: () => void;
 };
 
+/**
+ * Empty citation used to keep modal hooks unconditional while the modal is closed.
+ *
+ * @private component constant of `<ChatCitationModal/>`
+ */
+const EMPTY_MODAL_CITATION: ParsedCitation = {
+    id: '',
+    source: '',
+};
+
 /**
  * Modal that previews a citation source or excerpt.
  *
  * @private component of `<Chat/>`
  */
 export function ChatCitationModal(props: ChatCitationModalProps) {
-    const { isOpen, citation, participants, soundSystem, onClose } = props;
+    const { isOpen, citation, participants, resolveCitationLabel, soundSystem, onClose } = props;
+    const resolvedCitation = citation || EMPTY_MODAL_CITATION;
+    const label = useResolvedCitationLabel(resolvedCitation, resolveCitationLabel);
 
     if (!isOpen || !citation) {
         return null;
@@ -42,7 +58,6 @@ export function ChatCitationModal(props: ChatCitationModalProps) {
     const previewSegment = previewBase.split('/').pop() || previewBase;
     const extension = previewSegment.split('.').pop()?.toLowerCase();
     const isImage = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(extension || '');
-    const label = getCitationLabel(citation);
     const isTextCitation = isPlainTextCitation(citation);
     const hasTextPreview = !isValidUrl && (citation.excerpt || isTextCitation);
     const textPreviewContent = isTextCitation ? citation.source : citation.excerpt ?? '';
@@ -84,9 +99,8 @@ export function ChatCitationModal(props: ChatCitationModalProps) {
                                         }}
                                     />
                                 ) : (
-                                    <iframe
+                                    <CitationIframePreview
                                         src={previewUrl ?? citation.source}
-                                        className={styles.citationIframe}
                                         title={`Preview of ${label}`}
                                     />
                                 )}

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

@@ -18,6 +18,7 @@ import { SourceChip } from '../SourceChip/SourceChip';
 import type { ChatMessage } from '../types/ChatMessage';
 import type { ChatParticipant } from '../types/ChatParticipant';
 import { createCitationFootnoteRenderModel } from '../utils/createCitationFootnoteRenderModel';
+import { resolveCitationPreviewUrl } from '../utils/citationHelpers';
 import { getChatMessageTimingDisplay } from '../utils/getChatMessageTimingDisplay';
 import type { ParsedCitation } from '../utils/parseCitationsFromContent';
 import type { MessageButton } from '../utils/parseMessageButtons';
@@ -78,6 +79,10 @@ type ChatMessageItemProps = Pick<
      * Optional localized labels used by timestamp metadata.
      */
     timingTranslations?: ChatProps['timingTranslations'];
+    /**
+     * Optional resolver for turning technical citation sources into page/document titles.
+     */
+    resolveCitationLabel?: ChatProps['resolveCitationLabel'];
     /**
      * Optional moment locale used to format message timestamps.
      */
@@ -248,6 +253,7 @@ export const ChatMessageItem = memo(
             feedbackMode = 'stars',
             feedbackTranslations,
             timingTranslations,
+            resolveCitationLabel,
             chatLocale,
             onCopy,
             onCreateAgent,
@@ -340,6 +346,14 @@ export const ChatMessageItem = memo(
                 }),
             [message.citations, sanitizedContentWithoutButtons],
         );
+        const enrichCitationForRendering = useCallback(
+            (citation: ParsedCitation): ParsedCitation => {
+                const previewUrl = resolveCitationPreviewUrl(citation, participants ?? []);
+
+                return previewUrl && !citation.url ? { ...citation, url: previewUrl } : citation;
+            },
+            [participants],
+        );
         const contentSegments = useMemo(
             () => splitMessageContentIntoSegments(citationFootnoteRenderModel.content),
             [citationFootnoteRenderModel.content],
@@ -951,8 +965,9 @@ export const ChatMessageItem = memo(
                                     >
                                         <span className={styles.citationFootnoteNumber}>{footnote.number}</span>
                                         <SourceChip
-                                            citation={footnote.citation}
+                                            citation={enrichCitationForRendering(footnote.citation)}
                                             onClick={onCitationClick}
+                                            resolveCitationLabel={resolveCitationLabel}
                                             isCitationIdVisible={false}
                                         />
                                     </div>
@@ -964,9 +979,10 @@ export const ChatMessageItem = memo(
                                 {transitiveCitations.map((citation, index) => (
                                     <SourceChip
                                         key={`team-source-${citation.source}-${index}`}
-                                        citation={citation}
+                                        citation={enrichCitationForRendering(citation)}
                                         suffix={`by ${citation.origin.label}`}
                                         onClick={onCitationClick}
+                                        resolveCitationLabel={resolveCitationLabel}
                                     />
                                 ))}
                             </div>
@@ -1178,6 +1194,10 @@ export const ChatMessageItem = memo(
             return false;
         }
 
+        if (prev.resolveCitationLabel !== next.resolveCitationLabel) {
+            return false;
+        }
+
         if (prev.handleRating !== next.handleRating) {
             return false;
         }

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

@@ -38,6 +38,10 @@ export type ChatMessageListProps = {
      * Optional localized labels used by timestamp metadata.
      */
     timingTranslations?: ChatProps['timingTranslations'];
+    /**
+     * Optional resolver for turning technical citation sources into page/document titles.
+     */
+    resolveCitationLabel?: ChatProps['resolveCitationLabel'];
     /**
      * Optional moment locale used to format message timestamps.
      */
@@ -87,6 +91,7 @@ export function ChatMessageList(props: ChatMessageListProps) {
         feedbackMode,
         feedbackTranslations,
         timingTranslations,
+        resolveCitationLabel,
         chatLocale,
         onCopy,
         onMessage,
@@ -156,6 +161,7 @@ export function ChatMessageList(props: ChatMessageListProps) {
                         feedbackMode={feedbackMode}
                         feedbackTranslations={feedbackTranslations}
                         timingTranslations={timingTranslations}
+                        resolveCitationLabel={resolveCitationLabel}
                         chatLocale={chatLocale}
                         onCopy={onCopy}
                         onCreateAgent={onCreateAgent}

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

@@ -12,6 +12,7 @@ import type { AgentChipData } from '../AgentChip/AgentChip';
 import type { string_chat_format_name } from '../save/_common/string_chat_format_name';
 import type { ChatMessage } from '../types/ChatMessage';
 import type { ChatParticipant } from '../types/ChatParticipant';
+import type { CitationLabelResolver } from '../types/CitationLabelResolver';
 import type { ChatSaveFormatHandlerMap } from '../save/_common/ChatSaveFormatHandler';
 
 /**
@@ -830,6 +831,11 @@ export type ChatProps = {
      */
     readonly timingTranslations?: ChatTimingTranslations;
 
+    /**
+     * Optional resolver for turning technical citation sources into page/document titles.
+     */
+    readonly resolveCitationLabel?: CitationLabelResolver;
+
     /**
      * Optional localized labels for general Chat UI elements such as button labels,
      * lifecycle state badges, tool call modal strings, and the default input placeholder.

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

@@ -8,6 +8,7 @@ import { CloseIcon } from '../../icons/CloseIcon';
 import type { AgentChipData } from '../AgentChip/AgentChip';
 import type { ChatMessage } from '../types/ChatMessage';
 import type { ChatParticipant } from '../types/ChatParticipant';
+import type { CitationLabelResolver } from '../types/CitationLabelResolver';
 import styles from './Chat.module.css';
 import { ChatToolCallModalContent } from './ChatToolCallModalContent';
 import { useChatToolCallModalState } from './useChatToolCallModalState';
@@ -29,6 +30,7 @@ export type ChatToolCallModalProps = {
     toolCallIdentity?: string | null;
     onClose: () => void;
     toolTitles?: Record<string, string>;
+    resolveCitationLabel?: CitationLabelResolver;
     agentParticipant?: ChatParticipant;
     buttonColor: WithTake<Color>;
     /**
@@ -77,6 +79,7 @@ export function ChatToolCallModal(props: ChatToolCallModalProps) {
         toolCallIdentity,
         onClose,
         toolTitles,
+        resolveCitationLabel,
         agentParticipant,
         buttonColor,
         teamAgentProfiles,
@@ -157,6 +160,7 @@ export function ChatToolCallModal(props: ChatToolCallModalProps) {
                     onClearSelectedTeamToolCall={clearSelectedTeamToolCall}
                     teamProfiles={teamProfiles}
                     toolTitles={toolTitles}
+                    resolveCitationLabel={resolveCitationLabel}
                     agentParticipant={agentParticipant}
                     buttonColor={buttonColor}
                     locale={locale}

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

@@ -3,6 +3,7 @@ import { Color } from '../../../utils/color/Color';
 import type { WithTake } from '../../../utils/take/interfaces/ITakeChain';
 import type { ChatMessage } from '../types/ChatMessage';
 import type { ChatParticipant } from '../types/ChatParticipant';
+import type { CitationLabelResolver } from '../types/CitationLabelResolver';
 import type { TeamToolCallSummary, TransitiveToolCall } from '../utils/collectTeamToolCallSummary';
 import type { AgentProfileData } from '../utils/loadAgentProfile';
 import type { TeamToolResult } from '../utils/toolCallParsing/TeamToolResult';
@@ -32,6 +33,7 @@ type ChatToolCallModalContentProps = {
     readonly isAdvancedView: boolean;
     readonly locale?: string;
     readonly mode: 'LIGHT' | 'DARK';
+    readonly resolveCitationLabel?: CitationLabelResolver;
     readonly onClearSelectedTeamToolCall: () => void;
     readonly onRequestAdvancedView: () => void;
     readonly onSelectTeamToolCall: (toolCall: TransitiveToolCall) => void;
@@ -58,6 +60,7 @@ export function ChatToolCallModalContent({
     isAdvancedView,
     locale,
     mode,
+    resolveCitationLabel,
     onClearSelectedTeamToolCall,
     onRequestAdvancedView,
     onSelectTeamToolCall,
@@ -89,6 +92,7 @@ export function ChatToolCallModalContent({
                 onClearSelectedTeamToolCall={onClearSelectedTeamToolCall}
                 teamProfiles={teamProfiles}
                 toolTitles={toolTitles}
+                resolveCitationLabel={resolveCitationLabel}
                 agentParticipant={agentParticipant}
                 buttonColor={buttonColor}
             />