@promptbook/cli 0.114.0-3 → 0.114.0-31

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

@@ -0,0 +1,206 @@
+import { type ReactElement } from 'react';
+import type { AgentMessageProjectChange } from '../../../utils/agent-message-runtime/AgentMessageProjectChange';
+import { classNames } from '../../_common/react-utils/classNames';
+import type { AgentProjectToolCallResult } from '../utils/agentProjectToolCall';
+import { resolveAgentProjectToolCallLabel } from '../utils/agentProjectToolCall';
+import styles from './Chat.module.css';
+import { renderAgentProjectDiff } from './renderAgentProjectDiff';
+
+/**
+ * Length of the commit hash shown in the change summary.
+ */
+const AGENT_PROJECT_COMMIT_HASH_DISPLAY_LENGTH = 7;
+
+/**
+ * Renders the detail view of one project the answer worked with.
+ *
+ * The card answers the two questions a project chip raises: what this project is right now — its
+ * runtime state and where to open it — and what this very message did to it.
+ *
+ * @param options - Parsed project chip payload.
+ * @returns Project details section for the tool modal.
+ *
+ * @private function of ChatToolCallModal
+ */
+export function renderAgentProjectToolCallDetails(options: {
+    readonly project: AgentProjectToolCallResult;
+}): ReactElement {
+    const { project } = options;
+
+    return (
+        <>
+            <header className={styles.toolCallHeader}>
+                <span className={styles.toolCallIcon} aria-hidden="true">
+                    📁
+                </span>
+                <div className={styles.toolCallHeaderMeta}>
+                    <p className={styles.toolCallModalLabel}>Project</p>
+                    <h3 className={styles.toolCallTitle}>{resolveAgentProjectToolCallLabel(project)}</h3>
+                    <p className={styles.toolCallSubtitle}>
+                        {project.description || 'Here is what the agent worked with.'}
+                    </p>
+                </div>
+            </header>
+
+            <div className={styles.toolCallGrid}>
+                {renderAgentProjectStatusPanel(project)}
+                {renderAgentProjectFactsPanel(project)}
+            </div>
+
+            {renderAgentProjectChangeSection(project.change)}
+        </>
+    );
+}
+
+/**
+ * Renders the runtime state of the project together with the ways to open it.
+ *
+ * @param project - Parsed project chip payload.
+ * @returns Status panel.
+ *
+ * @private function of ChatToolCallModal
+ */
+function renderAgentProjectStatusPanel(project: AgentProjectToolCallResult): ReactElement {
+    const isRunning = project.isRunning === true;
+    // Note: A chip written before projects reported their state knows nothing, which must not be
+    //       shown as a project that is stopped
+    const isRuntimeStateKnown = project.isRunning !== undefined || project.runtimeStatusLabel !== undefined;
+
+    return (
+        <section className={styles.toolCallPanel}>
+            <p className={styles.toolCallPanelTitle}>Status</p>
+            {isRuntimeStateKnown && (
+                <p
+                    className={classNames(
+                        styles.agentProjectStatus,
+                        isRunning ? styles.agentProjectStatusRunning : styles.agentProjectStatusStopped,
+                    )}
+                >
+                    <span className={styles.agentProjectStatusDot} aria-hidden="true" />
+                    {project.runtimeStatusLabel || (isRunning ? 'Running' : 'Not running')}
+                </p>
+            )}
+            <div className={styles.agentProjectLinks}>
+                {project.projectUrl && (
+                    <a
+                        className={styles.agentProjectLink}
+                        href={project.projectUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        title={
+                            isRunning
+                                ? 'Open the project in a new tab'
+                                : 'The project must run before it can be opened.'
+                        }
+                    >
+                        Open the project ↗
+                    </a>
+                )}
+                {project.projectHref && (
+                    <a className={styles.agentProjectLink} href={project.projectHref} target="_blank" rel="noreferrer">
+                        Open the project page ↗
+                    </a>
+                )}
+            </div>
+        </section>
+    );
+}
+
+/**
+ * Renders the project facts shown in the header of the project page.
+ *
+ * @param project - Parsed project chip payload.
+ * @returns Facts panel.
+ *
+ * @private function of ChatToolCallModal
+ */
+function renderAgentProjectFactsPanel(project: AgentProjectToolCallResult): ReactElement {
+    return (
+        <section className={styles.toolCallPanel}>
+            <p className={styles.toolCallPanelTitle}>Project</p>
+            <ul className={styles.toolCallList}>
+                <li className={styles.toolCallItem}>
+                    <span className={styles.toolCallItemLabel}>Folder</span>
+                    <span className={styles.toolCallItemValue}>{project.projectName}</span>
+                </li>
+                {project.sizeLabel && (
+                    <li className={styles.toolCallItem}>
+                        <span className={styles.toolCallItemLabel}>Size</span>
+                        <span className={styles.toolCallItemValue}>
+                            {project.sizeLabel}
+                            {typeof project.fileCount === 'number' &&
+                                ` in ${project.fileCount} ${project.fileCount === 1 ? 'file' : 'files'}`}
+                        </span>
+                    </li>
+                )}
+                {project.isGitRepository !== undefined && (
+                    <li className={styles.toolCallItem}>
+                        <span className={styles.toolCallItemLabel}>Version control</span>
+                        <span className={styles.toolCallItemValue}>
+                            {project.isGitRepository ? 'Git repository' : 'Not a git repository'}
+                        </span>
+                    </li>
+                )}
+            </ul>
+        </section>
+    );
+}
+
+/**
+ * Renders what this very message changed in the project.
+ *
+ * @param change - Commit the answered message created, when it changed anything.
+ * @returns Change section.
+ *
+ * @private function of ChatToolCallModal
+ */
+function renderAgentProjectChangeSection(change: AgentMessageProjectChange | undefined): ReactElement {
+    if (!change) {
+        return (
+            <div className={styles.agentProjectChange}>
+                <p className={styles.toolCallPanelTitle}>Changes in this message</p>
+                <p className={styles.toolCallEmpty}>This message did not change anything in the project.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles.agentProjectChange}>
+            <p className={styles.toolCallPanelTitle}>Changes in this message</p>
+            <div className={styles.agentProjectChangeSummary}>
+                <span className={styles.toolCallSummaryMetaBadge}>
+                    {change.changedFiles.length} {change.changedFiles.length === 1 ? 'file' : 'files'}
+                </span>
+                <span className={classNames(styles.agentProjectChangeCount, styles.agentProjectChangeCountAdded)}>
+                    +{change.insertionCount}
+                </span>
+                <span className={classNames(styles.agentProjectChangeCount, styles.agentProjectChangeCountRemoved)}>
+                    −{change.deletionCount}
+                </span>
+                <span className={styles.agentProjectCommit}>
+                    commit {change.commitHash.slice(0, AGENT_PROJECT_COMMIT_HASH_DISPLAY_LENGTH)} ·{' '}
+                    {new Date(change.committedAt).toLocaleString()}
+                </span>
+            </div>
+            {change.changedFiles.length > 0 && (
+                <ul className={styles.agentProjectChangedFiles}>
+                    {change.changedFiles.map((changedFile) => (
+                        <li key={changedFile.path} className={styles.agentProjectChangedFile}>
+                            <span className={styles.agentProjectChangedFilePath}>{changedFile.path}</span>
+                            <span className={styles.agentProjectChangedFileCounts}>
+                                <span className={styles.agentProjectChangeCountAdded}>
+                                    +{changedFile.insertionCount}
+                                </span>{' '}
+                                <span className={styles.agentProjectChangeCountRemoved}>
+                                    −{changedFile.deletionCount}
+                                </span>
+                            </span>
+                        </li>
+                    ))}
+                </ul>
+            )}
+            {change.diff.trim().length > 0 &&
+                renderAgentProjectDiff({ diff: change.diff, isDiffTruncated: change.isDiffTruncated })}
+        </div>
+    );
+}

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

@@ -5,8 +5,10 @@ import type { WithTake } from '../../../utils/take/interfaces/ITakeChain';
 import { classNames } from '../../_common/react-utils/classNames';
 import type { ChatMessage } from '../types/ChatMessage';
 import type { ChatParticipant } from '../types/ChatParticipant';
+import { AGENT_PROJECT_TOOL_CALL_NAME, parseAgentProjectToolCallResult } from '../utils/agentProjectToolCall';
 import { getToolCallChipletInfo, TOOL_TITLES } from '../utils/getToolCallChipletInfo';
 import { resolveToolCallState } from '../utils/resolveToolCallState';
+import { isTimeoutToolCallName } from '../utils/timeoutToolCallPresentation';
 import { getToolCallTimestamp } from '../utils/toolCallParsing/getToolCallTimestamp';
 import { parseToolCallArguments } from '../utils/toolCallParsing/parseToolCallArguments';
 import { parseToolCallResult } from '../utils/toolCallParsing/parseToolCallResult';
@@ -15,6 +17,7 @@ import {
     WALLET_CREDENTIAL_TOOL_CALL_NAME,
 } from '../utils/walletCredentialToolCall';
 import styles from './Chat.module.css';
+import { renderAgentProjectToolCallDetails } from './renderAgentProjectToolCallDetails';
 import { renderEmailToolCallDetails } from './renderEmailToolCallDetails';
 import { renderMemoryToolCallDetails } from './renderMemoryToolCallDetails';
 import { renderPopupToolCallDetails } from './renderPopupToolCallDetails';
@@ -124,6 +127,12 @@ export function renderToolCallDetails(options: ToolCallDetailsOptions): ReactEle
         return memoryView;
     }
 
+    const agentProjectResult =
+        toolCall.name === AGENT_PROJECT_TOOL_CALL_NAME ? parseAgentProjectToolCallResult(resultRaw) : null;
+    if (agentProjectResult) {
+        return renderAgentProjectToolCallDetails({ project: agentProjectResult });
+    }
+
     const walletCredentialResult =
         toolCall.name === WALLET_CREDENTIAL_TOOL_CALL_NAME ? parseWalletCredentialToolCallResult(resultRaw) : null;
     if (walletCredentialResult) {
@@ -375,18 +384,6 @@ function isTimeToolCallName(toolName: string): boolean {
     return toolName === 'get_current_time' || toolName === 'useTime';
 }
 
-/**
- * Checks whether a tool name should use the timeout renderer.
- *
- * @param toolName - Raw tool name.
- * @returns `true` when the tool is a timeout-like tool.
- *
- * @private function of ChatToolCallModal
- */
-function isTimeoutToolCallName(toolName: string): boolean {
-    return toolName === 'set_timeout' || toolName === 'cancel_timeout';
-}
-
 /**
  * Checks whether a tool name should use the email renderer.
  *

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

@@ -229,6 +229,57 @@
     transform: translateY(0.03em);
 }
 
+.MarkdownContent
+    :is(
+        a.inlineReferenceChip:global(.inlineReferenceChip--with-icon),
+        details.inlineReferenceChip:global(.inlineReferenceChip--with-icon) > summary
+    )::before {
+    display: none;
+}
+
+.MarkdownContent :global(.inlineReferenceIcon) {
+    position: relative;
+    display: inline-flex;
+    width: 1.1em;
+    height: 1.1em;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--md-link-color) 22%, transparent);
+    border-radius: 0.24em;
+    background: color-mix(in srgb, var(--md-link-color) 10%, white);
+    font-size: 0.86em;
+    line-height: 1;
+}
+
+.MarkdownContent :global(.inlineReferenceIconFallback) {
+    overflow: hidden;
+    max-width: 100%;
+    color: var(--md-link-color);
+    font-size: 0.48em;
+    font-weight: 750;
+    letter-spacing: -0.04em;
+    white-space: nowrap;
+}
+
+.MarkdownContent :global(.inlineReferenceIcon) img {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    margin: 0;
+    border-radius: 0;
+    background: color-mix(in srgb, var(--md-link-color) 7%, white);
+    object-fit: contain;
+}
+
+.MarkdownContent :global(.inlineReferenceIcon) img[hidden] {
+    display: none;
+}
+
 .MarkdownContent :is(a.inlineReferenceChip, details.inlineReferenceChip > summary):hover,
 .MarkdownContent :is(a.inlineReferenceChip, details.inlineReferenceChip > summary):focus-visible {
     border-color: color-mix(in srgb, var(--md-link-color) 52%, rgba(148, 163, 184, 0.35));
@@ -254,7 +305,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.38em;
-    color: var(--md-muted-color);
+    color: #b91c1c;
     font-size: 0.78em;
     font-weight: 650;
 }
@@ -264,7 +315,8 @@
     height: 0.52em;
     margin-left: 0.05em;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--md-muted-color) 55%, transparent);
+    background: #ef4444;
+    box-shadow: 0 0 0 0.16em color-mix(in srgb, #ef4444 18%, transparent);
 }
 
 .MarkdownContent :global(.inlineReferenceMenuStatus--active) {
@@ -290,21 +342,37 @@
 
 .MarkdownContent :global(.inlineReferenceMenuOption) {
     display: block;
+    width: 100%;
     padding: 0.45rem 0.55rem;
+    border: 0;
     border-radius: 0.4rem;
+    background: transparent;
     color: var(--md-link-color);
+    font-family: inherit;
     font-size: 0.82em;
     font-weight: 650;
     line-height: 1.35;
+    text-align: left;
     text-decoration: none;
 }
 
 .MarkdownContent a:global(.inlineReferenceMenuOption):hover,
-.MarkdownContent a:global(.inlineReferenceMenuOption):focus-visible {
+.MarkdownContent a:global(.inlineReferenceMenuOption):focus-visible,
+.MarkdownContent button:global(.inlineReferenceMenuOption):hover,
+.MarkdownContent button:global(.inlineReferenceMenuOption):focus-visible {
     background: color-mix(in srgb, var(--md-link-color) 10%, transparent);
     text-decoration: none;
 }
 
+.MarkdownContent button:global(.inlineReferenceMenuOption) {
+    cursor: pointer;
+}
+
+.MarkdownContent button:global(.inlineReferenceMenuOption):disabled {
+    cursor: wait;
+    opacity: 0.55;
+}
+
 .MarkdownContent :global(.inlineReferenceMenuOption--disabled) {
     cursor: not-allowed;
     color: var(--md-muted-color);
@@ -445,7 +513,7 @@
     opacity: 0.8;
 }
 
-.MarkdownContent details {
+.MarkdownContent details:not(.inlineReferenceChip) {
     margin: 0.95em 0;
     border: 1px solid var(--md-table-border);
     border-radius: 16px;
@@ -455,13 +523,13 @@
     transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
 
-.MarkdownContent details:hover,
-.MarkdownContent details:focus-within {
+.MarkdownContent details:not(.inlineReferenceChip):hover,
+.MarkdownContent details:not(.inlineReferenceChip):focus-within {
     border-color: color-mix(in srgb, var(--md-link-color) 24%, var(--md-table-border) 76%);
     box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
 }
 
-.MarkdownContent details > summary {
+.MarkdownContent details:not(.inlineReferenceChip) > summary {
     display: flex;
     align-items: center;
     gap: 0.72rem;
@@ -479,7 +547,7 @@
     transition: background 0.18s ease, color 0.18s ease;
 }
 
-.MarkdownContent details > summary::before {
+.MarkdownContent details:not(.inlineReferenceChip) > summary::before {
     content: '';
     width: 0.62rem;
     height: 0.62rem;
@@ -492,8 +560,8 @@
     transition: transform 0.18s ease, opacity 0.18s ease;
 }
 
-.MarkdownContent details > summary:hover,
-.MarkdownContent details > summary:focus-visible {
+.MarkdownContent details:not(.inlineReferenceChip) > summary:hover,
+.MarkdownContent details:not(.inlineReferenceChip) > summary:focus-visible {
     background: linear-gradient(
         180deg,
         color-mix(in srgb, var(--md-table-head-bg) 76%, rgba(255, 255, 255, 0.95) 24%),
@@ -501,34 +569,34 @@
     );
 }
 
-.MarkdownContent details > summary:focus-visible {
+.MarkdownContent details:not(.inlineReferenceChip) > summary:focus-visible {
     outline: 2px solid color-mix(in srgb, var(--md-link-color) 52%, transparent);
     outline-offset: -2px;
 }
 
-.MarkdownContent details > summary::-webkit-details-marker {
+.MarkdownContent details:not(.inlineReferenceChip) > summary::-webkit-details-marker {
     display: none;
 }
 
-.MarkdownContent details[open] > summary {
+.MarkdownContent details:not(.inlineReferenceChip)[open] > summary {
     border-bottom: 1px solid color-mix(in srgb, var(--md-table-border) 88%, transparent);
 }
 
-.MarkdownContent details[open] > summary::before {
+.MarkdownContent details:not(.inlineReferenceChip)[open] > summary::before {
     transform: rotate(45deg);
     opacity: 1;
 }
 
-.MarkdownContent details > :not(summary) {
+.MarkdownContent details:not(.inlineReferenceChip) > :not(summary) {
     margin-left: 1.05em;
     margin-right: 1.05em;
 }
 
-.MarkdownContent details > summary + * {
+.MarkdownContent details:not(.inlineReferenceChip) > summary + * {
     margin-top: 0.95em;
 }
 
-.MarkdownContent details > :last-child {
+.MarkdownContent details:not(.inlineReferenceChip) > :last-child {
     margin-bottom: 1.05em;
 }
 

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