@promptbook/cli 0.114.0-5 → 0.114.0-7

package/src/avatars/visuals/asciiOctopusAvatarVisual.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-magic-numbers */
 
-import { drawAvatarFrame } from '../avatarRenderingUtils';
+import { DEFAULT_AVATAR_SIZE, drawAvatarFrame } from '../avatarRenderingUtils';
 import type { AvatarPalette, AvatarVisualDefinition } from '../types/AvatarVisualDefinition';
 import type { OrganicTentacleRibbonPoint } from './octopusAvatarVisualShared';
 import {
@@ -31,6 +31,16 @@ const OUTLINE_GLYPHS = ['#', '%', '@'];
  */
 const ATMOSPHERE_GLYPHS = ['.', ':', "'", '`'];
 
+/**
+ * Coordinate space the octopus layout is generated in when it is painted into a terminal.
+ *
+ * The terminal renderer has its own character grid, so the geometry only needs one stable
+ * square coordinate space which the grid is then sampled from.
+ *
+ * @private helper of `asciiOctopusAvatarVisual`
+ */
+const TERMINAL_ASCII_OCTOPUS_LAYOUT_SIZE = DEFAULT_AVATAR_SIZE;
+
 /**
  * One 2D point used by the ASCII octopus helpers.
  *
@@ -42,12 +52,11 @@ type Point = {
 };
 
 /**
- * Character-grid metrics used by the ASCII renderer.
+ * Character-cell sampling grid shared by the canvas and the terminal ASCII renderers.
  *
  * @private helper of `asciiOctopusAvatarVisual`
  */
-type AsciiGridMetrics = {
-    readonly fontSize: number;
+type AsciiSampleGrid = {
     readonly cellWidth: number;
     readonly cellHeight: number;
     readonly columnCount: number;
@@ -56,6 +65,22 @@ type AsciiGridMetrics = {
     readonly offsetY: number;
 };
 
+/**
+ * Character-grid metrics used by the canvas ASCII renderer.
+ *
+ * @private helper of `asciiOctopusAvatarVisual`
+ */
+type AsciiGridMetrics = AsciiSampleGrid & {
+    readonly fontSize: number;
+};
+
+/**
+ * Resolved glyph of every sampled cell of one ASCII octopus frame.
+ *
+ * @private helper of `asciiOctopusAvatarVisual`
+ */
+type AsciiOctopusGlyphGrid = ReadonlyArray<ReadonlyArray<AsciiGlyphDescriptor | null>>;
+
 /**
  * One seeded eye definition used by the ASCII renderer.
  *
@@ -135,6 +160,13 @@ export const asciiOctopusAvatarVisual: AvatarVisualDefinition = {
         const staticRandom = createRandom('ascii-octopus-static');
         const gridMetrics = createAsciiGridMetrics(size, gridRandom);
         const layout = createAsciiOctopusLayout(size, timeMs, createRandom, staticRandom, interaction);
+        const glyphGrid = createAsciiOctopusGlyphGrid({
+            sampleGrid: gridMetrics,
+            layout,
+            palette,
+            cellRandom: createRandom('ascii-octopus-cells'),
+            timeMs,
+        });
 
         drawAvatarFrame(context, size, palette);
         drawAsciiBackdrop(context, size, palette, layout, timeMs);
@@ -144,31 +176,15 @@ export const asciiOctopusAvatarVisual: AvatarVisualDefinition = {
         context.textAlign = 'center';
         context.textBaseline = 'middle';
 
-        // The ASCII renderer samples the morphing octopus field on a low-resolution grid so the shape stays organic
-        // while the glyph layout remains deterministic for the same avatar input.
-        const cellRandom = createRandom('ascii-octopus-cells');
-
         for (let rowIndex = 0; rowIndex < gridMetrics.rowCount; rowIndex++) {
             for (let columnIndex = 0; columnIndex < gridMetrics.columnCount; columnIndex++) {
-                const point = {
-                    x: gridMetrics.offsetX + columnIndex * gridMetrics.cellWidth,
-                    y: gridMetrics.offsetY + rowIndex * gridMetrics.cellHeight,
-                };
-                const noise = cellRandom();
-                const glyphDescriptor = resolveAsciiGlyph({
-                    point,
-                    layout,
-                    palette,
-                    cellWidth: gridMetrics.cellWidth,
-                    cellHeight: gridMetrics.cellHeight,
-                    noise,
-                    timeMs,
-                });
+                const glyphDescriptor = glyphGrid[rowIndex]![columnIndex]!;
 
                 if (!glyphDescriptor) {
                     continue;
                 }
 
+                const point = resolveAsciiSampleGridPoint(gridMetrics, columnIndex, rowIndex);
                 context.fillStyle = glyphDescriptor.color;
                 context.fillText(glyphDescriptor.character, point.x, point.y);
             }
@@ -176,8 +192,114 @@ export const asciiOctopusAvatarVisual: AvatarVisualDefinition = {
 
         context.restore();
     },
+    renderTerminalText({ columns, rows, palette, createRandom, timeMs, interaction }) {
+        const staticRandom = createRandom('ascii-octopus-static');
+        const layout = createAsciiOctopusLayout(
+            TERMINAL_ASCII_OCTOPUS_LAYOUT_SIZE,
+            timeMs,
+            createRandom,
+            staticRandom,
+            interaction,
+        );
+
+        return createAsciiOctopusGlyphGrid({
+            sampleGrid: createAsciiTerminalSampleGrid(columns, rows),
+            layout,
+            palette,
+            cellRandom: createRandom('ascii-octopus-cells'),
+            timeMs,
+        });
+    },
 };
 
+/**
+ * Resolves the geometry point sampled for one cell of the grid.
+ *
+ * @param sampleGrid Character-cell sampling grid.
+ * @param columnIndex Zero-based cell column.
+ * @param rowIndex Zero-based cell row.
+ * @returns Sampled point in the octopus coordinate space.
+ *
+ * @private helper of `asciiOctopusAvatarVisual`
+ */
+function resolveAsciiSampleGridPoint(sampleGrid: AsciiSampleGrid, columnIndex: number, rowIndex: number): Point {
+    return {
+        x: sampleGrid.offsetX + columnIndex * sampleGrid.cellWidth,
+        y: sampleGrid.offsetY + rowIndex * sampleGrid.cellHeight,
+    };
+}
+
+/**
+ * Builds the sampling grid used when the octopus is painted straight into terminal character cells.
+ *
+ * @param columns Available terminal columns.
+ * @param rows Available terminal rows.
+ * @returns Character-cell sampling grid covering the whole octopus coordinate space.
+ *
+ * @private helper of `asciiOctopusAvatarVisual`
+ */
+function createAsciiTerminalSampleGrid(columns: number, rows: number): AsciiSampleGrid {
+    const cellWidth = TERMINAL_ASCII_OCTOPUS_LAYOUT_SIZE / columns;
+    const cellHeight = TERMINAL_ASCII_OCTOPUS_LAYOUT_SIZE / rows;
+
+    return {
+        cellWidth,
+        cellHeight,
+        columnCount: columns,
+        rowCount: rows,
+        offsetX: cellWidth / 2,
+        offsetY: cellHeight / 2,
+    };
+}
+
+/**
+ * Samples the morphing octopus field into one deterministic grid of ASCII glyphs.
+ *
+ * The field is sampled on a low-resolution grid so the shape stays organic while the glyph
+ * layout remains deterministic for the same avatar input. Both the canvas visual and the
+ * terminal visual share this single sampling pass so they always describe the same octopus.
+ *
+ * @param options Sampling grid, prepared octopus layout, palette, per-cell noise, and animation time.
+ * @returns Resolved glyph of every sampled cell, where `null` means an empty cell.
+ *
+ * @private helper of `asciiOctopusAvatarVisual`
+ */
+function createAsciiOctopusGlyphGrid(options: {
+    sampleGrid: AsciiSampleGrid;
+    layout: AsciiOctopusLayout;
+    palette: AvatarPalette;
+    cellRandom: () => number;
+    timeMs: number;
+}): AsciiOctopusGlyphGrid {
+    const { sampleGrid, layout, palette, cellRandom, timeMs } = options;
+    const glyphGrid: Array<Array<AsciiGlyphDescriptor | null>> = [];
+
+    for (let rowIndex = 0; rowIndex < sampleGrid.rowCount; rowIndex++) {
+        const glyphRow: Array<AsciiGlyphDescriptor | null> = [];
+
+        for (let columnIndex = 0; columnIndex < sampleGrid.columnCount; columnIndex++) {
+            const point = resolveAsciiSampleGridPoint(sampleGrid, columnIndex, rowIndex);
+            const noise = cellRandom();
+
+            glyphRow.push(
+                resolveAsciiGlyph({
+                    point,
+                    layout,
+                    palette,
+                    cellWidth: sampleGrid.cellWidth,
+                    cellHeight: sampleGrid.cellHeight,
+                    noise,
+                    timeMs,
+                }),
+            );
+        }
+
+        glyphGrid.push(glyphRow);
+    }
+
+    return glyphGrid;
+}
+
 /**
  * Draws the dark terminal-like glow behind the ASCII octopus.
  *

package/src/book-2.0/book-language-documentation/createStandaloneBookLanguageMarkdown.ts

@@ -280,9 +280,7 @@ export function createStandaloneBookLanguageMarkdown(
             ${block(dictionary.tutorialSections.checklistBody)}
 
             ${block(
-                isLowLevelCommitmentsIncluded
-                    ? renderLowLevelCommitmentsChapter(lowLevelCommitments, dictionary)
-                    : '',
+                isLowLevelCommitmentsIncluded ? renderLowLevelCommitmentsChapter(lowLevelCommitments, dictionary) : '',
             )}
 
             ---
@@ -596,7 +594,9 @@ function renderExampleSection(
             **${dictionary.exampleLabels.goal}:** ${exampleText.goal}
 
             **${dictionary.exampleLabels.commitmentsUsed}:** ${renderCommitmentSectionLinks(
-            parseAgentSourceWithCommitments(example.source as string_book).commitments.map((commitment) => commitment.type),
+            parseAgentSourceWithCommitments(example.source as string_book).commitments.map(
+                (commitment) => commitment.type,
+            ),
             commitmentSectionAnchorByType,
         )}
 

package/src/book-2.0/book-language-documentation/renderCommitmentCatalogSection.ts

@@ -53,10 +53,7 @@ export function renderCommitmentCatalogSection(options: RenderCommitmentCatalogS
             ${aliasesMarkdown}
 
             ${block(
-                renderGroupedCommitmentDocumentationMarkdown(
-                    groupedCommitment,
-                    COMMITMENT_CATALOG_HEADING_LEVEL_SHIFT,
-                ),
+                renderGroupedCommitmentDocumentationMarkdown(groupedCommitment, COMMITMENT_CATALOG_HEADING_LEVEL_SHIFT),
             )}
         `,
     );

package/src/book-2.0/book-language-documentation/renderGroupedCommitmentDocumentationMarkdown.ts

@@ -196,10 +196,7 @@ export function renderGroupedCommitmentDocumentationMarkdown(
  *
  * @private internal utility of `createStandaloneBookLanguageMarkdown`
  */
-function renderFocusedCommitmentExamples(
-    documentation: string,
-    group: GroupedCommitmentDocumentationSource,
-): string {
+function renderFocusedCommitmentExamples(documentation: string, group: GroupedCommitmentDocumentationSource): string {
     return documentation.replace(BOOK_CODE_BLOCK_PATTERN, (codeBlock, _fence, source: string) => {
         const focusedSource = createFocusedCommitmentExampleSource(source, group);
         return focusedSource ? getSafeCodeBlock(focusedSource, 'book') : codeBlock;
@@ -223,12 +220,7 @@ function createFocusedCommitmentExampleSource(
     const commitmentTypes = new Set([group.primary.type, ...group.aliases]);
     const isOpenClosedCommitmentFamily =
         commitmentTypes.has(OPEN_COMMITMENT_TYPE) && commitmentTypes.has(CLOSED_COMMITMENT_TYPE);
-    const allowedCommitmentTypes = new Set([
-        group.primary.type,
-        ...group.aliases,
-        'GOAL',
-        CLOSED_COMMITMENT_TYPE,
-    ]);
+    const allowedCommitmentTypes = new Set([group.primary.type, ...group.aliases, 'GOAL', CLOSED_COMMITMENT_TYPE]);
     const canonicalTypeByCommitmentType = createCanonicalCommitmentTypeByCommitmentType(
         group,
         isOpenClosedCommitmentFamily,
@@ -384,9 +376,7 @@ function finalizeFocusedCommitmentExampleSource(
         normalizedFocusedCommitments.push(CLOSED_COMMITMENT_TYPE);
     }
 
-    return [agentName, ...normalizedFocusedCommitments]
-        .filter((line): line is string => Boolean(line))
-        .join('\n\n');
+    return [agentName, ...normalizedFocusedCommitments].filter((line): line is string => Boolean(line)).join('\n\n');
 }
 
 /**
@@ -427,10 +417,7 @@ function createCanonicalCommitmentTypeByCommitmentType(
     canonicalTypeByCommitmentType.set(group.primary.type, group.primary.type);
 
     for (const alias of group.aliases) {
-        canonicalTypeByCommitmentType.set(
-            alias,
-            isOpenClosedCommitmentFamily ? alias : group.primary.type,
-        );
+        canonicalTypeByCommitmentType.set(alias, isOpenClosedCommitmentFamily ? alias : group.primary.type);
     }
 
     return canonicalTypeByCommitmentType;

package/src/book-3.0/AgentTeamConversationWorkspace.ts

@@ -0,0 +1,172 @@
+import { basename, join } from 'path';
+import { AGENT_FINISHED_MESSAGES_DIRECTORY_PATH, AGENT_MESSAGES_DIRECTORY_PATH } from './agentFolderPaths';
+
+// Note: [💞] This file defines the shared TEAM workspace convention rather than one standalone entity.
+
+/**
+ * Relative directory for an active TEAM conversation workspace.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export const AGENT_TEAM_CONVERSATIONS_DIRECTORY_PATH = join(AGENT_MESSAGES_DIRECTORY_PATH, 'team');
+
+/**
+ * Relative directory where completed TEAM conversation transcripts are retained.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export const AGENT_FINISHED_TEAM_CONVERSATIONS_DIRECTORY_PATH = join(AGENT_FINISHED_MESSAGES_DIRECTORY_PATH, 'team');
+
+/**
+ * Name of the JSON manifest that describes one TEAM conversation workspace.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export const AGENT_TEAM_CONVERSATION_MANIFEST_FILE_NAME = 'team.json';
+
+/**
+ * Name of the read-only teammate-source directory inside one TEAM workspace.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export const AGENT_TEAMMATE_SOURCES_DIRECTORY_NAME = 'teammates';
+
+/**
+ * One primary agent represented in a TEAM workspace manifest.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export type AgentTeamConversationPrimaryAgent = {
+    readonly permanentId: string;
+    readonly agentName: string;
+};
+
+/**
+ * One local teammate made available to the coding harness for a single user turn.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export type AgentTeamConversationTeammate = {
+    readonly permanentId: string;
+    readonly agentName: string;
+    readonly url: string;
+    readonly instructions: string;
+    readonly sourceFileName: string;
+};
+
+/**
+ * Persisted roster snapshot for the optional TEAM workspace of one queued message.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export type AgentTeamConversationWorkspaceManifest = {
+    readonly version: 1;
+    readonly primaryAgent: AgentTeamConversationPrimaryAgent;
+    readonly teammates: ReadonlyArray<AgentTeamConversationTeammate>;
+};
+
+/**
+ * Creates the stable directory name that belongs to one queued `.book` message.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export function createAgentTeamConversationWorkspaceDirectoryName(messageFileName: string): string {
+    const rawBaseName = basename(messageFileName).replace(/\.book$/iu, '');
+    const normalizedBaseName = rawBaseName.replace(/[^A-Za-z0-9._-]+/gu, '-').replace(/^[._-]+|[._-]+$/gu, '');
+
+    return normalizedBaseName || 'message';
+}
+
+/**
+ * Creates the relative active workspace path for one queued message.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export function createAgentTeamConversationWorkspacePath(messageFileName: string): string {
+    return join(
+        AGENT_TEAM_CONVERSATIONS_DIRECTORY_PATH,
+        createAgentTeamConversationWorkspaceDirectoryName(messageFileName),
+    );
+}
+
+/**
+ * Creates the relative completed-workspace path for one queued message.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export function createFinishedAgentTeamConversationWorkspacePath(messageFileName: string): string {
+    return join(
+        AGENT_FINISHED_TEAM_CONVERSATIONS_DIRECTORY_PATH,
+        createAgentTeamConversationWorkspaceDirectoryName(messageFileName),
+    );
+}
+
+/**
+ * Creates the source-snapshot file name for one teammate.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export function createAgentTeamTeammateSourceFileName(teammatePermanentId: string): string {
+    const normalizedPermanentId = teammatePermanentId
+        .trim()
+        .replace(/[^A-Za-z0-9._-]+/gu, '-')
+        .replace(/^[._-]+|[._-]+$/gu, '');
+
+    return `${normalizedPermanentId || 'teammate'}.book`;
+}
+
+/**
+ * Checks whether unknown JSON has the minimum shape required for a TEAM workspace manifest.
+ *
+ * @private internal convention shared by the Agents Server and agent-folder runner
+ */
+export function isAgentTeamConversationWorkspaceManifest(
+    value: unknown,
+): value is AgentTeamConversationWorkspaceManifest {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+
+    const manifest = value as Partial<AgentTeamConversationWorkspaceManifest>;
+    if (
+        manifest.version !== 1 ||
+        !isPrimaryAgent(manifest.primaryAgent) ||
+        !Array.isArray(manifest.teammates) ||
+        !manifest.teammates.every(isTeammate)
+    ) {
+        return false;
+    }
+
+    return true;
+}
+
+/**
+ * Checks the primary-agent part of an untrusted manifest.
+ *
+ * @private internal utility of `isAgentTeamConversationWorkspaceManifest`
+ */
+function isPrimaryAgent(value: unknown): value is AgentTeamConversationPrimaryAgent {
+    return Boolean(
+        value &&
+            typeof value === 'object' &&
+            typeof (value as AgentTeamConversationPrimaryAgent).permanentId === 'string' &&
+            typeof (value as AgentTeamConversationPrimaryAgent).agentName === 'string',
+    );
+}
+
+/**
+ * Checks one teammate part of an untrusted manifest.
+ *
+ * @private internal utility of `isAgentTeamConversationWorkspaceManifest`
+ */
+function isTeammate(value: unknown): value is AgentTeamConversationTeammate {
+    return Boolean(
+        value &&
+            typeof value === 'object' &&
+            typeof (value as AgentTeamConversationTeammate).permanentId === 'string' &&
+            typeof (value as AgentTeamConversationTeammate).agentName === 'string' &&
+            typeof (value as AgentTeamConversationTeammate).url === 'string' &&
+            typeof (value as AgentTeamConversationTeammate).instructions === 'string' &&
+            typeof (value as AgentTeamConversationTeammate).sourceFileName === 'string',
+    );
+}

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

@@ -426,17 +426,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 */

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

@@ -1,4 +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';
@@ -253,10 +255,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;