@promptbook/cli 0.114.0-5 → 0.114.0-50

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

@@ -159,8 +159,7 @@
         rgba(248, 250, 252, 0.94) 100%
     );
     --chat-input-container-border-color: rgba(148, 163, 184, 0.3);
-    --chat-input-container-shadow: 0 14px 34px rgba(15, 23, 42, 0.12),
-        inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    --chat-input-container-shadow: 0 14px 34px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
     --chat-input-text-color: #0f172a;
     --chat-input-placeholder-color: #8b9bb1;
     --chat-input-action-color: #64748b;
@@ -244,19 +243,10 @@
         rgba(2, 6, 23, 0.88) 58%,
         rgba(2, 6, 23, 0.98) 100%
     );
-    --chat-input-drag-over-backdrop: linear-gradient(
-        180deg,
-        rgba(14, 165, 233, 0.08) 0%,
-        rgba(8, 47, 73, 0.5) 100%
-    );
-    --chat-input-container-background: linear-gradient(
-        150deg,
-        rgba(15, 23, 42, 0.96) 0%,
-        rgba(15, 23, 42, 0.9) 100%
-    );
+    --chat-input-drag-over-backdrop: linear-gradient(180deg, rgba(14, 165, 233, 0.08) 0%, rgba(8, 47, 73, 0.5) 100%);
+    --chat-input-container-background: linear-gradient(150deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.9) 100%);
     --chat-input-container-border-color: rgba(71, 85, 105, 0.88);
-    --chat-input-container-shadow: 0 20px 44px rgba(2, 6, 23, 0.42),
-        inset 0 1px 0 rgba(148, 163, 184, 0.1);
+    --chat-input-container-shadow: 0 20px 44px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(148, 163, 184, 0.1);
     --chat-input-text-color: #e2e8f0;
     --chat-input-placeholder-color: #94a3b8;
     --chat-input-action-color: #cbd5e1;
@@ -426,17 +416,10 @@
 }
 
 .chatMainFlow .chatChildren {
-    grid-area: 💬;
+    grid-area: 🟦;
     width: 100%;
-    height: 100%;
     min-width: 0;
-    min-height: 0;
     z-index: 300;
-    pointer-events: none;
-}
-
-.chatMainFlow .chatChildren > * {
-    pointer-events: auto;
 }
 
 /* Chat messages area */
@@ -742,7 +725,12 @@
     border-radius: 999px;
     box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
     color: inherit;
-    font-family: 'OpenMojiColor', 'OpenMojiBlack', Arial, Helvetica, sans-serif;
+    /*
+     * OpenMoji includes ASCII digits for keycap emoji sequences. Keeping it first in this stack
+     * makes time labels such as `10:28 AM` use its non-text digit glyphs, so chips must inherit
+     * the chat typography and use OpenMoji only as its existing emoji fallback.
+     */
+    font-family: inherit;
     cursor: pointer;
     transition: all 0.2s ease;
     backdrop-filter: blur(8px);
@@ -1489,10 +1477,7 @@
     color: inherit;
     cursor: pointer;
     opacity: 0.85;
-    transition:
-        background 0.2s ease,
-        opacity 0.2s ease,
-        transform 0.2s ease;
+    transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
 }
 
 .attachmentRemoveButton:hover {
@@ -2819,6 +2804,166 @@
     color: #a16207;
 }
 
+.agentProjectStatus {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 14px 0;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.agentProjectStatusDot {
+    width: 9px;
+    height: 9px;
+    border-radius: 999px;
+    background: currentColor;
+    flex: none;
+}
+
+.agentProjectStatusRunning {
+    color: #047857;
+}
+
+.agentProjectStatusStopped {
+    color: #64748b;
+}
+
+.agentProjectLinks {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.agentProjectLink {
+    color: #1d4ed8;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+    word-break: break-word;
+}
+
+.agentProjectLink:hover {
+    text-decoration: underline;
+}
+
+.agentProjectChange {
+    padding: 0 32px 8px;
+    background: #fefefe;
+}
+
+.agentProjectChangeSummary {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+}
+
+.agentProjectChangeCount {
+    font-family: Consolas, 'Courier New', monospace;
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.agentProjectChangeCountAdded {
+    color: #047857;
+}
+
+.agentProjectChangeCountRemoved {
+    color: #b91c1c;
+}
+
+.agentProjectCommit {
+    font-family: Consolas, 'Courier New', monospace;
+    font-size: 12px;
+    color: #64748b;
+}
+
+.agentProjectChangedFiles {
+    list-style: none;
+    margin: 0 0 12px 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: 160px;
+    overflow-y: auto;
+}
+
+.agentProjectChangedFile {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 13px;
+}
+
+.agentProjectChangedFilePath {
+    font-family: Consolas, 'Courier New', monospace;
+    color: #0f172a;
+    word-break: break-all;
+}
+
+.agentProjectChangedFileCounts {
+    font-family: Consolas, 'Courier New', monospace;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.agentProjectDiff {
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #f8fafc;
+}
+
+.agentProjectDiffCode {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 12px 0;
+    max-height: 320px;
+    overflow: auto;
+    font-family: Consolas, 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.5;
+}
+
+.agentProjectDiffLine {
+    padding: 0 12px;
+    white-space: pre;
+    color: #334155;
+}
+
+.agentProjectDiffLineAdded {
+    background: rgba(16, 185, 129, 0.14);
+    color: #065f46;
+}
+
+.agentProjectDiffLineRemoved {
+    background: rgba(239, 68, 68, 0.12);
+    color: #991b1b;
+}
+
+.agentProjectDiffLineHunk {
+    color: #6d28d9;
+    background: rgba(109, 40, 217, 0.08);
+}
+
+.agentProjectDiffLineMeta {
+    color: #94a3b8;
+}
+
+.agentProjectDiffTruncated {
+    margin: 0;
+    padding: 8px 12px;
+    border-top: 1px solid #e2e8f0;
+    font-size: 12px;
+    color: #64748b;
+}
+
 .toolCallModeFooter {
     display: flex;
     justify-content: flex-end;

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

@@ -1,4 +1,5 @@
 'use client';
+import { spaceTrim } from 'spacetrim';
 
 import type { Feature, GeoJsonObject, GeoJsonProperties, Geometry } from 'geojson';
 import type { LatLng, Layer, Map as LeafletMap, Path, PathOptions } from 'leaflet';
@@ -253,10 +254,12 @@ function createPointOfInterestMarker(leaflet: LeafletNamespace, feature: ChatGeo
 
     const icon = leaflet.divIcon({
         className: styles.poiMarkerIcon,
-        html: `
-            <span class="${styles.poiMarkerPulse}" aria-hidden="true"></span>
-            ${initialHtml}
-        `.trim(),
+        html: spaceTrim(
+            (block) => `
+                <span class="${styles.poiMarkerPulse}" aria-hidden="true"></span>
+                ${block(initialHtml)}
+            `,
+        ).trim(),
         iconSize: [POI_MARKER_CONFIG.size, POI_MARKER_CONFIG.size],
         iconAnchor: POI_MARKER_CONFIG.anchor,
     });

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.
  *