@promptbook/cli 0.114.0-2 → 0.114.0-21

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

@@ -681,8 +681,9 @@ export type ChatProps = {
     readonly tasksProgress?: Array<{ id: string; name: string; progress?: number }>; // Simplified task progress type
 
     /**
-     * Content to be shown inside the chat bar in head
-     * If not provided, the chat bar will not be rendered
+     * Optional content displayed in the chat header above the message list.
+     *
+     * If not provided, the header row is not rendered.
      */
     readonly children?: ReactNode;
 

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

@@ -0,0 +1,85 @@
+import { type ReactElement } from 'react';
+import { classNames } from '../../_common/react-utils/classNames';
+import styles from './Chat.module.css';
+
+/**
+ * Line prefixes of unified-diff metadata, which is shown dimmed instead of as a change.
+ */
+const AGENT_PROJECT_DIFF_META_LINE_PREFIXES = [
+    'diff ',
+    'index ',
+    '--- ',
+    '+++ ',
+    'new file',
+    'deleted file',
+    'old mode',
+    'new mode',
+    'similarity index',
+    'rename from',
+    'rename to',
+    'Binary files',
+    '\\ No newline',
+];
+
+/**
+ * Renders one unified diff with added, removed and context lines told apart.
+ *
+ * @param options - Diff text and whether it holds only the beginning of the real diff.
+ * @returns Readable diff block.
+ *
+ * @private function of ChatToolCallModal
+ */
+export function renderAgentProjectDiff(options: {
+    readonly diff: string;
+    readonly isDiffTruncated: boolean;
+}): ReactElement {
+    const diffLines = options.diff.split(/\r?\n/u);
+
+    return (
+        <div className={styles.agentProjectDiff}>
+            <pre className={styles.agentProjectDiffCode}>
+                {diffLines.map((diffLine, diffLineIndex) => (
+                    <span
+                        key={`${diffLineIndex}-${diffLine}`}
+                        className={classNames(styles.agentProjectDiffLine, resolveAgentProjectDiffLineStyle(diffLine))}
+                    >
+                        {diffLine === '' ? ' ' : diffLine}
+                    </span>
+                ))}
+            </pre>
+            {options.isDiffTruncated && (
+                <p className={styles.agentProjectDiffTruncated}>
+                    The change is too large to show in full — open the project to see the rest.
+                </p>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Resolves the style of one diff line from its unified-diff prefix.
+ *
+ * @param diffLine - One raw diff line.
+ * @returns Class name of the line, or `undefined` for plain context lines.
+ *
+ * @private function of ChatToolCallModal
+ */
+function resolveAgentProjectDiffLineStyle(diffLine: string): string | undefined {
+    if (AGENT_PROJECT_DIFF_META_LINE_PREFIXES.some((metaLinePrefix) => diffLine.startsWith(metaLinePrefix))) {
+        return styles.agentProjectDiffLineMeta;
+    }
+
+    if (diffLine.startsWith('@@')) {
+        return styles.agentProjectDiffLineHunk;
+    }
+
+    if (diffLine.startsWith('+')) {
+        return styles.agentProjectDiffLineAdded;
+    }
+
+    if (diffLine.startsWith('-')) {
+        return styles.agentProjectDiffLineRemoved;
+    }
+
+    return undefined;
+}

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;
 }