@promptbook/cli 0.114.0-13 → 0.114.0-18

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;
@@ -1487,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 {
@@ -2817,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,7 +1,6 @@
 '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';
 import { Maximize2, X } from 'lucide-react';

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,6 +5,7 @@ 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';
@@ -16,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';
@@ -125,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) {

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

@@ -314,9 +314,8 @@ export const MarkdownContent = memo(function MarkdownContent(props: MarkdownCont
         containerElement.addEventListener('click', handleSummaryClick);
         containerElement.addEventListener('click', handleInlineReferenceMenuActionClick);
 
-        const inlineReferenceIconImages = containerElement.querySelectorAll<HTMLImageElement>(
-            INLINE_REFERENCE_ICON_SELECTOR,
-        );
+        const inlineReferenceIconImages =
+            containerElement.querySelectorAll<HTMLImageElement>(INLINE_REFERENCE_ICON_SELECTOR);
         const handleInlineReferenceIconError = (event: Event) => {
             if (event.currentTarget instanceof HTMLImageElement) {
                 event.currentTarget.hidden = true;

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

@@ -1,3 +1,6 @@
+import type { AgentMessageProjectChange } from '../../../utils/agent-message-runtime/AgentMessageProjectChange';
+import { normalizeAgentMessageProjectChange } from '../../../utils/agent-message-runtime/AgentMessageProjectChange';
+
 /**
  * Synthetic tool name used for agent-project chips in chat UI.
  *
@@ -11,6 +14,9 @@ export const AGENT_PROJECT_TOOL_CALL_NAME = 'agent_project_touched';
 /**
  * Safe, user-facing metadata shown in agent-project chips.
  *
+ * Everything besides the project name is optional, because a chip written by an older server — or
+ * one whose project has meanwhile been deleted — still has to render.
+ *
  * @private internal chat-ui type for touched agent projects
  */
 export type AgentProjectToolCallResult = {
@@ -24,10 +30,53 @@ export type AgentProjectToolCallResult = {
      */
     readonly displayName?: string;
 
+    /**
+     * Short project description, resolved the same way as on the project page.
+     */
+    readonly description?: string;
+
     /**
      * Link to the project page, when the chat knows where the project lives.
      */
     readonly projectHref?: string;
+
+    /**
+     * Address the running project itself is served on, when it has one.
+     */
+    readonly projectUrl?: string;
+
+    /**
+     * Whether the project was running when the answer finished.
+     */
+    readonly isRunning?: boolean;
+
+    /**
+     * Runtime status label, the same one the project page shows.
+     */
+    readonly runtimeStatusLabel?: string;
+
+    /**
+     * Total size of the project, already formatted for display.
+     */
+    readonly sizeLabel?: string;
+
+    /**
+     * Count of files inside the project.
+     */
+    readonly fileCount?: number;
+
+    /**
+     * Whether the project folder is a git repository.
+     */
+    readonly isGitRepository?: boolean;
+
+    /**
+     * What this very message changed in the project, when it changed anything.
+     *
+     * Its `projectName` repeats the one above because the change is reported by the agent runner
+     * in exactly this shape, and reusing it keeps the two descriptions from drifting apart.
+     */
+    readonly change?: AgentMessageProjectChange;
 };
 
 /**
@@ -48,17 +97,45 @@ export function parseAgentProjectToolCallResult(result: unknown): AgentProjectTo
         return null;
     }
 
+    const change = normalizeAgentMessageProjectChange(candidate.change);
+
     return {
         projectName: candidate.projectName.trim(),
-        ...(typeof candidate.displayName === 'string' && candidate.displayName.trim().length > 0
-            ? { displayName: candidate.displayName.trim() }
-            : {}),
-        ...(typeof candidate.projectHref === 'string' && candidate.projectHref.trim().length > 0
-            ? { projectHref: candidate.projectHref.trim() }
+        ...pickTrimmedText('displayName', candidate.displayName),
+        ...pickTrimmedText('description', candidate.description),
+        ...pickTrimmedText('projectHref', candidate.projectHref),
+        ...pickTrimmedText('projectUrl', candidate.projectUrl),
+        ...pickTrimmedText('runtimeStatusLabel', candidate.runtimeStatusLabel),
+        ...pickTrimmedText('sizeLabel', candidate.sizeLabel),
+        ...(typeof candidate.isRunning === 'boolean' ? { isRunning: candidate.isRunning } : {}),
+        ...(typeof candidate.isGitRepository === 'boolean' ? { isGitRepository: candidate.isGitRepository } : {}),
+        ...(typeof candidate.fileCount === 'number' && Number.isFinite(candidate.fileCount) && candidate.fileCount >= 0
+            ? { fileCount: candidate.fileCount }
             : {}),
+        ...(change ? { change } : {}),
     };
 }
 
+/**
+ * Keeps one optional text field only when it carries content.
+ *
+ * @param fieldName - Name of the payload field.
+ * @param value - Raw field value.
+ * @returns Object holding the trimmed field, or an empty object.
+ *
+ * @private internal helper of `parseAgentProjectToolCallResult`
+ */
+function pickTrimmedText<TFieldName extends string>(
+    fieldName: TFieldName,
+    value: unknown,
+): Partial<Record<TFieldName, string>> {
+    if (typeof value !== 'string' || value.trim().length === 0) {
+        return {};
+    }
+
+    return { [fieldName]: value.trim() } as Record<TFieldName, string>;
+}
+
 /**
  * Resolves the chip label of one touched agent project.
  *