@promptbook/cli 0.114.0-2 → 0.114.0-21

package/src/book-3.0/describeAgentPlannedMessageSchedule.ts

@@ -0,0 +1,94 @@
+import { formatTimeoutDurationHuman } from '../book-components/Chat/utils/timeoutToolCallPresentation';
+
+/**
+ * Schedule of one planned message as it is described to an agent.
+ *
+ * The fields match `AgentPlannedMessageSnapshot`, so one snapshot, one scheduling result, and one
+ * stored planned message are all described by the very same sentence.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export type AgentPlannedMessageScheduleDescription = {
+    readonly intervalMs?: number | null;
+    readonly cronExpression?: string | null;
+    readonly startsAt?: string | null;
+    readonly endsAt?: string | null;
+    readonly maxRunCount?: number | null;
+    readonly runCount?: number | null;
+    readonly dueAt?: string | null;
+};
+
+/**
+ * Describes one planned-message schedule in a single sentence fragment.
+ *
+ * A planned message can repeat forever, repeat a bounded number of times, run inside a date window, or
+ * wake the agent only once. Every surface showing a planned message — the wake-up itself, the goal-chat
+ * notes, the planned-message prompt section, and the model tools — describes it with this one helper,
+ * so an agent never has to reconcile two different wordings of the same plan.
+ *
+ * @param schedule - Schedule of the planned message.
+ * @returns Fragment such as `repeats every 5 minutes (2 of 10 runs done)`.
+ *
+ * @private internal utility of the Agents Server planned messages
+ */
+export function describeAgentPlannedMessageSchedule(schedule: AgentPlannedMessageScheduleDescription): string {
+    const scheduleParts = [
+        describeAgentPlannedMessageRecurrence(schedule),
+        ...describeAgentPlannedMessageBounds(schedule),
+    ];
+
+    return scheduleParts.join(', ');
+}
+
+/**
+ * Describes how often one planned message wakes the agent.
+ *
+ * @param schedule - Schedule of the planned message.
+ * @returns Recurrence fragment.
+ *
+ * @private internal utility of `describeAgentPlannedMessageSchedule`
+ */
+function describeAgentPlannedMessageRecurrence(schedule: AgentPlannedMessageScheduleDescription): string {
+    if (schedule.cronExpression) {
+        return `repeats on cron \`${schedule.cronExpression}\``;
+    }
+
+    if (schedule.intervalMs) {
+        return `repeats every ${formatTimeoutDurationHuman(schedule.intervalMs)}`;
+    }
+
+    return schedule.dueAt ? `wakes you once at ${schedule.dueAt}` : 'wakes you once';
+}
+
+/**
+ * Describes the bounds limiting how long one planned message keeps repeating.
+ *
+ * @param schedule - Schedule of the planned message.
+ * @returns Fragments for the starting date, ending date, and run count that are really set.
+ *
+ * @private internal utility of `describeAgentPlannedMessageSchedule`
+ */
+function describeAgentPlannedMessageBounds(schedule: AgentPlannedMessageScheduleDescription): Array<string> {
+    const bounds: Array<string> = [];
+    const runCount = schedule.runCount || 0;
+
+    if (schedule.startsAt) {
+        bounds.push(`starting ${schedule.startsAt}`);
+    }
+
+    if (schedule.endsAt) {
+        bounds.push(`until ${schedule.endsAt}`);
+    }
+
+    if (schedule.maxRunCount) {
+        bounds.push(`${runCount} of ${schedule.maxRunCount} runs done`);
+    } else if (runCount > 0) {
+        bounds.push(`${runCount} run${runCount === 1 ? '' : 's'} done`);
+    }
+
+    if ((schedule.cronExpression || schedule.intervalMs) && schedule.dueAt) {
+        bounds.push(`next at ${schedule.dueAt}`);
+    }
+
+    return bounds;
+}

package/src/book-components/BookEditor/BookEditorMonaco.tsx

@@ -15,6 +15,8 @@ import { BookEditorMonacoConstants } from './BookEditorMonacoConstants';
 import { BookEditorMonacoUploadPanel } from './BookEditorMonacoUploadPanel';
 import { BOOK_EDITOR_RENDER_THEME, resolveBookEditorRenderTheme } from './BookEditorTheme';
 import { createDeprecatedCommitmentDiagnostics } from './createDeprecatedCommitmentDiagnostics.browser';
+import { createDuplicateFromCommitmentDiagnostics } from './createDuplicateFromCommitmentDiagnostics';
+import { createUnknownCommitmentDiagnostics } from './createUnknownCommitmentDiagnostics';
 import { useBookEditorMonacoDecorations } from './useBookEditorMonacoDecorations';
 import { useBookEditorMonacoDiagnostics } from './useBookEditorMonacoDiagnostics';
 import { useBookEditorMonacoInteractions } from './useBookEditorMonacoInteractions';
@@ -257,7 +259,12 @@ export function BookEditorMonaco(props: BookEditorProps) {
         editor,
         handleFiles,
     });
-    const combinedDiagnostics = [...(diagnostics || []), ...createDeprecatedCommitmentDiagnostics(value)];
+    const combinedDiagnostics = [
+        ...(diagnostics || []),
+        ...createDeprecatedCommitmentDiagnostics(value),
+        ...createUnknownCommitmentDiagnostics(value),
+        ...createDuplicateFromCommitmentDiagnostics(value),
+    ];
     const isActionBarVisible = isBookEditorMonacoActionbarVisible({
         hoistedMenuItems,
         isUploadButtonShown,

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

@@ -1,3 +1,5 @@
+import { createBookCommitmentLineTypeRegex } from '../../book-2.0/agent-source/getBookCommitmentLineType';
+
 /**
  * Regex source for absolute URL references inside TEAM/FROM/IMPORT commitments.
  *
@@ -47,7 +49,7 @@ const AGENT_REFERENCE_COMMITMENT_TYPES = ['FROM', 'IMPORT', 'IMPORTS', 'TEAM'] a
  *
  * @private function of BookEditorMonaco
  */
-const DYNAMIC_COMMITMENT_REGEX = /^\s*[A-Z][A-Z0-9]+(?:\s+[A-Z][A-Z0-9]+)*(?=\s|$)/;
+const DYNAMIC_COMMITMENT_REGEX = createBookCommitmentLineTypeRegex();
 
 /**
  * Regex pattern to match horizontal lines.

package/src/book-components/BookEditor/createDeprecatedCommitmentDiagnostics.browser.ts

@@ -1,11 +1,3 @@
-/**
- * Browser-compatible stub for `createDeprecatedCommitmentDiagnostics`.
- *
- * In the browser build the full Node.js implementation is not available,
- * so this stub always returns an empty array to keep the editor functional.
- *
- * @private internal utility of `BookEditorMonaco`
- */
-export function createDeprecatedCommitmentDiagnostics(_agentSource?: string): [] {
-    return [];
-}
+// The Book editor already uses the commitment parser in the browser for other
+// diagnostics, so reuse the same catalog-driven implementation here as well.
+export { createDeprecatedCommitmentDiagnostics } from './createDeprecatedCommitmentDiagnostics';

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

@@ -0,0 +1,71 @@
+import { parseAgentSourceWithCommitments } from '../../book-2.0/agent-source/parseAgentSourceWithCommitments';
+import type { string_book } from '../../book-2.0/agent-source/string_book';
+
+/**
+ * Monaco diagnostic shown when a Book source declares its parent agent more than once.
+ *
+ * @private internal type of `BookEditorMonaco`
+ */
+type DuplicateFromCommitmentDiagnostic = {
+    readonly startLineNumber: number;
+    readonly startColumn: number;
+    readonly endLineNumber: number;
+    readonly endColumn: number;
+    readonly message: string;
+    readonly source: string;
+    readonly severity: 'warning';
+};
+
+/**
+ * Commitment declaring the parent agent one book inherits from.
+ *
+ * @private internal constant of `createDuplicateFromCommitmentDiagnostics`
+ */
+const FROM_COMMITMENT_TYPE = 'FROM';
+
+/**
+ * Creates Book editor diagnostics for a parent agent declared by more than one `FROM` commitment.
+ *
+ * Repeating `FROM` stays valid — the last one wins and overrides every earlier one — but an author who writes it
+ * twice usually means only one of them, so every `FROM` keyword is marked to show which one actually applies.
+ *
+ * @param agentSource - Current editor content.
+ * @returns Warning markers for every `FROM` keyword, empty when the book declares at most one parent.
+ *
+ * @private internal utility of `BookEditorMonaco`
+ */
+export function createDuplicateFromCommitmentDiagnostics(
+    agentSource?: string_book,
+): ReadonlyArray<DuplicateFromCommitmentDiagnostic> {
+    if (!agentSource?.trim()) {
+        return [];
+    }
+
+    const fromCommitments = parseAgentSourceWithCommitments(agentSource).commitments.filter(
+        (commitment) => commitment.type === FROM_COMMITMENT_TYPE,
+    );
+
+    if (fromCommitments.length < 2) {
+        return [];
+    }
+
+    const lastFromCommitment = fromCommitments[fromCommitments.length - 1]!;
+
+    return fromCommitments.map((fromCommitment) => {
+        const startColumn = fromCommitment.originalLine.indexOf(FROM_COMMITMENT_TYPE) + 1;
+        const isEffectiveFromCommitment = fromCommitment === lastFromCommitment;
+        const message = isEffectiveFromCommitment
+            ? `\`${FROM_COMMITMENT_TYPE}\` is written ${fromCommitments.length} times in this book. Only this last one is used, the earlier ones are ignored.`
+            : `\`${FROM_COMMITMENT_TYPE}\` is written ${fromCommitments.length} times in this book. Only the last one on line ${lastFromCommitment.lineNumber} is used, so this one is ignored.`;
+
+        return {
+            startLineNumber: fromCommitment.lineNumber,
+            startColumn,
+            endLineNumber: fromCommitment.lineNumber,
+            endColumn: startColumn + FROM_COMMITMENT_TYPE.length,
+            message,
+            source: 'Promptbook',
+            severity: 'warning',
+        };
+    });
+}

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

@@ -0,0 +1,50 @@
+import { parseAgentSourceWithCommitments } from '../../book-2.0/agent-source/parseAgentSourceWithCommitments';
+import type { string_book } from '../../book-2.0/agent-source/string_book';
+
+/**
+ * Monaco diagnostic shown when a Book source uses an uppercase commitment not registered by Promptbook.
+ *
+ * @private internal type of `BookEditorMonaco`
+ */
+type UnknownCommitmentDiagnostic = {
+    readonly startLineNumber: number;
+    readonly startColumn: number;
+    readonly endLineNumber: number;
+    readonly endColumn: number;
+    readonly message: string;
+    readonly source: string;
+    readonly severity: 'error';
+};
+
+/**
+ * Creates Book editor diagnostics for uppercase commitments not registered by Promptbook.
+ *
+ * Unknown commitment blocks remain valid extra context in the generated system message,
+ * but the editor marks their keywords so authors can spot likely typos immediately.
+ *
+ * @param agentSource - Current editor content.
+ * @returns Error markers for all unknown commitment keywords.
+ *
+ * @private internal utility of `BookEditorMonaco`
+ */
+export function createUnknownCommitmentDiagnostics(
+    agentSource?: string_book,
+): ReadonlyArray<UnknownCommitmentDiagnostic> {
+    if (!agentSource?.trim()) {
+        return [];
+    }
+
+    return parseAgentSourceWithCommitments(agentSource).unknownCommitments.map((commitment) => {
+        const startColumn = commitment.originalLine.indexOf(commitment.type) + 1;
+
+        return {
+            startLineNumber: commitment.lineNumber,
+            startColumn,
+            endLineNumber: commitment.lineNumber,
+            endColumn: startColumn + commitment.type.length,
+            message: `Unknown commitment \`${commitment.type}\` is added to the system message as extra context.`,
+            source: 'Promptbook',
+            severity: 'error',
+        };
+    });
+}

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

@@ -162,7 +162,7 @@ function createCommitmentRegex(commitmentTypes: ReadonlyArray<string>): RegExp {
 
     const commitmentPatterns = [...commitmentTypes]
         .sort((a: string, b: string) => b.length - a.length)
-        .map((type: string) => (type === 'META' ? 'META\\s+\\w+' : type.replace(/\s+/, '\\s+')))
+        .map((type: string) => type.replace(/\s+/, '\\s+'))
         .join('|');
 
     return new RegExp(`^\\s*(${commitmentPatterns})(?=\\s|$)`);

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

@@ -1,3 +1,4 @@
+import { spaceTrim } from 'spacetrim';
 import { useEffect } from 'react';
 import { PROMPTBOOK_SYNTAX_COLORS } from '../../config';
 import type { BookEditorTheme } from './BookEditorTheme';
@@ -48,66 +49,66 @@ export function useBookEditorMonacoStyles({
             document.head.appendChild(style);
         }
 
-        style.innerHTML = `
+        style.innerHTML = spaceTrim(`
 
-            @import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
-            /* <- [🚚] */
+                @import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+                /* <- [🚚] */
 
-            .${instanceClass} .monaco-editor .view-lines {
-                background-image: linear-gradient(to bottom, transparent ${scaledLineHeight - 1}px, ${lineColor} ${
+                .${instanceClass} .monaco-editor .view-lines {
+                    background-image: linear-gradient(to bottom, transparent ${scaledLineHeight - 1}px, ${lineColor} ${
             scaledLineHeight - 1
         }px);
-                background-size: calc(100% + ${scaledContentPaddingLeft}px) ${scaledLineHeight}px;
-                background-position-x: -${scaledContentPaddingLeft}px;
-                background-position-y: ${scaledLineHeight * BACKGROUND_POSITION_Y_MULTIPLIER}px;
-            }
-            .${instanceClass} .monaco-editor .overflow-guard::before {
-                content: '';
-                position: absolute;
-                left: ${scaledVerticalLineLeft}px;
-                top: 0;
-                bottom: 0;
-                width: 1px;
-                background-color: ${lineColor};
-                z-index: 10;
-            }
+                    background-size: calc(100% + ${scaledContentPaddingLeft}px) ${scaledLineHeight}px;
+                    background-position-x: -${scaledContentPaddingLeft}px;
+                    background-position-y: ${scaledLineHeight * BACKGROUND_POSITION_Y_MULTIPLIER}px;
+                }
+                .${instanceClass} .monaco-editor .overflow-guard::before {
+                    content: '';
+                    position: absolute;
+                    left: ${scaledVerticalLineLeft}px;
+                    top: 0;
+                    bottom: 0;
+                    width: 1px;
+                    background-color: ${lineColor};
+                    z-index: 10;
+                }
 
-            .${instanceClass} .monaco-editor .separator-line {
-                background: linear-gradient(
-                    to bottom, 
-                    transparent ${scaledLineHeight * 0.9 - 2}px, 
-                    ${separatorColor} ${scaledLineHeight * 0.9 - 2}px, 
-                    ${separatorColor} ${scaledLineHeight * 0.9 + 1}px, 
-                    transparent ${scaledLineHeight * 0.9 + 1}px
-                );
-            }
-            
-            .${instanceClass} .monaco-editor .transparent-text {
-                color: transparent !important;
-            }
-            
-            .${instanceClass} .monaco-editor .code-block-box {
-                background-color: ${codeBlockBackground};
-                border-left: 1px solid ${codeBlockBorderColor};
-                border-right: 1px solid ${codeBlockBorderColor};
-                padding-left: ${Math.round(8 * zoomLevel)}px;
-                padding-right: ${Math.round(8 * zoomLevel)}px;
-            }
-            
-            .${instanceClass} .monaco-editor .code-block-top {
-                border-top: 1px solid ${codeBlockBorderColor};
-                border-top-left-radius: ${Math.round(10 * zoomLevel)}px;
-                border-top-right-radius: ${Math.round(10 * zoomLevel)}px;
-                overflow: hidden;
-            }
-            
-            .${instanceClass} .monaco-editor .code-block-bottom {
-                border-bottom: 1px solid ${codeBlockBorderColor};
-                border-bottom-left-radius: ${Math.round(10 * zoomLevel)}px;
-                border-bottom-right-radius: ${Math.round(10 * zoomLevel)}px;
-                overflow: hidden;
-            }
-        `;
+                .${instanceClass} .monaco-editor .separator-line {
+                    background: linear-gradient(
+                        to bottom,
+                        transparent ${scaledLineHeight * 0.9 - 2}px,
+                        ${separatorColor} ${scaledLineHeight * 0.9 - 2}px,
+                        ${separatorColor} ${scaledLineHeight * 0.9 + 1}px,
+                        transparent ${scaledLineHeight * 0.9 + 1}px
+                    );
+                }
+
+                .${instanceClass} .monaco-editor .transparent-text {
+                    color: transparent !important;
+                }
+
+                .${instanceClass} .monaco-editor .code-block-box {
+                    background-color: ${codeBlockBackground};
+                    border-left: 1px solid ${codeBlockBorderColor};
+                    border-right: 1px solid ${codeBlockBorderColor};
+                    padding-left: ${Math.round(8 * zoomLevel)}px;
+                    padding-right: ${Math.round(8 * zoomLevel)}px;
+                }
+
+                .${instanceClass} .monaco-editor .code-block-top {
+                    border-top: 1px solid ${codeBlockBorderColor};
+                    border-top-left-radius: ${Math.round(10 * zoomLevel)}px;
+                    border-top-right-radius: ${Math.round(10 * zoomLevel)}px;
+                    overflow: hidden;
+                }
+
+                .${instanceClass} .monaco-editor .code-block-bottom {
+                    border-bottom: 1px solid ${codeBlockBorderColor};
+                    border-bottom-left-radius: ${Math.round(10 * zoomLevel)}px;
+                    border-bottom-right-radius: ${Math.round(10 * zoomLevel)}px;
+                    overflow: hidden;
+                }
+        `);
 
         return () => {
             if (process.env.NODE_ENV === 'production') {

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