@promptbook/cli 0.113.0-0 → 0.113.0-10

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

@@ -0,0 +1,212 @@
+'use client';
+
+import { useState, type CSSProperties } from 'react';
+import { classNames } from '../../_common/react-utils/classNames';
+import { CloseIcon } from '../../icons/CloseIcon';
+import type { ChatMessage } from '../types/ChatMessage';
+import styles from './Chat.module.css';
+import { ChatImageAttachmentModal } from './ChatImageAttachmentModal';
+
+/**
+ * One uploaded file attached to a chat message.
+ *
+ * @private type of `<Chat/>`
+ */
+export type ChatMessageAttachment = NonNullable<ChatMessage['attachments']>[number];
+
+/**
+ * File extensions treated as image attachments when the MIME type is missing.
+ *
+ * @private constant of `<ChatMessageAttachments/>`
+ */
+const IMAGE_ATTACHMENT_EXTENSIONS = new Set(['avif', 'gif', 'jpg', 'jpeg', 'png', 'svg', 'webp']);
+
+/**
+ * Props accepted by the shared attachment chip list.
+ *
+ * @private props of `<Chat/>`
+ */
+type ChatMessageAttachmentsProps = {
+    readonly attachments: ReadonlyArray<ChatMessageAttachment>;
+    readonly mode: 'LIGHT' | 'DARK';
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    readonly onRemoveAttachment?: (attachment: ChatMessageAttachment, attachmentIndex: number) => void;
+};
+
+/**
+ * Returns whether the attachment should open in the in-chat image preview.
+ *
+ * @private function of `<ChatMessageAttachments/>`
+ */
+function isImageChatMessageAttachment(attachment: ChatMessageAttachment): boolean {
+    if (attachment.type.toLowerCase().startsWith('image/')) {
+        return true;
+    }
+
+    const extension =
+        getChatMessageAttachmentExtension(attachment.url) || getChatMessageAttachmentExtension(attachment.name);
+
+    return Boolean(extension && IMAGE_ATTACHMENT_EXTENSIONS.has(extension));
+}
+
+/**
+ * Gets a file extension from an attachment URL or name.
+ *
+ * @private function of `<ChatMessageAttachments/>`
+ */
+function getChatMessageAttachmentExtension(value: string): string | null {
+    const pathname = value.split(/[?#]/)[0] ?? '';
+    const filename = pathname.split(/[\\/]/).pop();
+
+    if (!filename || !filename.includes('.')) {
+        return null;
+    }
+
+    return filename.split('.').pop()?.toLowerCase() || null;
+}
+
+/**
+ * Renders the shared clickable body of one attachment chip.
+ *
+ * @private component of `<ChatMessageAttachments/>`
+ */
+function ChatMessageAttachmentChipBody(props: {
+    readonly attachment: ChatMessageAttachment;
+    readonly isImageAttachment: boolean;
+    readonly className?: string;
+    readonly onOpenImageAttachment: (attachment: ChatMessageAttachment) => void;
+}) {
+    const { attachment, isImageAttachment, className, onOpenImageAttachment } = props;
+    const content = (
+        <>
+            <span className={styles.attachmentIcon}>📎</span>
+            <span className={styles.attachmentName}>{attachment.name}</span>
+        </>
+    );
+
+    if (isImageAttachment) {
+        return (
+            <button
+                type="button"
+                className={className || styles.attachment}
+                title={attachment.name}
+                aria-label={`Open image attachment ${attachment.name}`}
+                onPointerDown={(event) => {
+                    event.stopPropagation();
+                }}
+                onClick={(event) => {
+                    event.stopPropagation();
+                    onOpenImageAttachment(attachment);
+                }}
+            >
+                {content}
+            </button>
+        );
+    }
+
+    return (
+        <a
+            href={attachment.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={className || styles.attachment}
+            title={attachment.name}
+        >
+            {content}
+        </a>
+    );
+}
+
+/**
+ * Renders one attachment chip, optionally with composer removal controls.
+ *
+ * @private component of `<ChatMessageAttachments/>`
+ */
+function ChatMessageAttachmentChip(props: {
+    readonly attachment: ChatMessageAttachment;
+    readonly attachmentIndex: number;
+    readonly onOpenImageAttachment: (attachment: ChatMessageAttachment) => void;
+    readonly onRemoveAttachment?: (attachment: ChatMessageAttachment, attachmentIndex: number) => void;
+}) {
+    const { attachment, attachmentIndex, onOpenImageAttachment, onRemoveAttachment } = props;
+    const isImageAttachment = isImageChatMessageAttachment(attachment);
+
+    if (!onRemoveAttachment) {
+        return (
+            <ChatMessageAttachmentChipBody
+                attachment={attachment}
+                isImageAttachment={isImageAttachment}
+                onOpenImageAttachment={onOpenImageAttachment}
+            />
+        );
+    }
+
+    return (
+        <span className={classNames(styles.attachment, styles.attachmentWithRemove)} title={attachment.name}>
+            <ChatMessageAttachmentChipBody
+                attachment={attachment}
+                isImageAttachment={isImageAttachment}
+                className={styles.attachmentMainAction}
+                onOpenImageAttachment={onOpenImageAttachment}
+            />
+            <button
+                type="button"
+                className={styles.attachmentRemoveButton}
+                onPointerDown={(event) => {
+                    event.stopPropagation();
+                }}
+                onClick={(event) => {
+                    event.stopPropagation();
+                    onRemoveAttachment(attachment, attachmentIndex);
+                }}
+                aria-label={`Remove attachment ${attachment.name}`}
+                title="Remove attachment"
+            >
+                <CloseIcon />
+            </button>
+        </span>
+    );
+}
+
+/**
+ * Renders chat attachment chips and the shared image preview modal.
+ *
+ * @private component of `<Chat/>`
+ */
+export function ChatMessageAttachments({
+    attachments,
+    mode,
+    className,
+    style,
+    onRemoveAttachment,
+}: ChatMessageAttachmentsProps) {
+    const [selectedImageAttachment, setSelectedImageAttachment] = useState<ChatMessageAttachment | null>(null);
+
+    if (attachments.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className={classNames(styles.attachments, className)} style={style}>
+                {attachments.map((attachment, index) => (
+                    <ChatMessageAttachmentChip
+                        key={`${attachment.url}-${attachment.name}-${index}`}
+                        attachment={attachment}
+                        attachmentIndex={index}
+                        onOpenImageAttachment={setSelectedImageAttachment}
+                        onRemoveAttachment={onRemoveAttachment}
+                    />
+                ))}
+            </div>
+            <ChatImageAttachmentModal
+                attachment={selectedImageAttachment}
+                mode={mode}
+                onClose={() => {
+                    setSelectedImageAttachment(null);
+                }}
+            />
+        </>
+    );
+}

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

@@ -17,8 +17,8 @@ import { MarkdownContent } from '../MarkdownContent/MarkdownContent';
 import { SourceChip } from '../SourceChip/SourceChip';
 import type { ChatMessage } from '../types/ChatMessage';
 import type { ChatParticipant } from '../types/ChatParticipant';
-import { createCitationFootnoteRenderModel } from '../utils/createCitationFootnoteRenderModel';
 import { resolveCitationPreviewUrl } from '../utils/citationHelpers';
+import { createCitationFootnoteRenderModel } from '../utils/createCitationFootnoteRenderModel';
 import { getChatMessageTimingDisplay } from '../utils/getChatMessageTimingDisplay';
 import type { ParsedCitation } from '../utils/parseCitationsFromContent';
 import type { MessageButton } from '../utils/parseMessageButtons';
@@ -32,6 +32,7 @@ import {
 import { splitMessageContentIntoSegments } from '../utils/splitMessageContentIntoSegments';
 import styles from './Chat.module.css';
 import { chatCssClassNames } from './chatCssClassNames';
+import { ChatMessageAttachments } from './ChatMessageAttachments';
 import { ChatMessageRichContent } from './ChatMessageRichContent';
 import { ChatMessageToolCallChips } from './ChatMessageToolCallChips';
 import type { ChatProps } from './ChatProps';
@@ -49,7 +50,7 @@ import { useChatMessageSpeechPlayback } from './useChatMessageSpeechPlayback';
  */
 type ChatMessageItemProps = Pick<
     ChatProps,
-    'onMessage' | 'onActionButton' | 'onQuickMessageButton' | 'participants'
+    'onMessage' | 'onActionButton' | 'onQuickMessageButton' | 'onQuickMessageDraftButton' | 'participants'
 > & {
     message: ChatMessage;
     participant: ChatParticipant | undefined;
@@ -243,6 +244,7 @@ export const ChatMessageItem = memo(
             onMessage,
             onActionButton,
             onQuickMessageButton,
+            onQuickMessageDraftButton,
             setExpandedMessageId,
             isExpanded,
             currentRating,
@@ -404,6 +406,14 @@ export const ChatMessageItem = memo(
                         return nextButtons;
                     }
 
+                    if (button.type === 'messageDraft') {
+                        if (onQuickMessageDraftButton) {
+                            nextButtons.push({ button, buttonIndex });
+                        }
+
+                        return nextButtons;
+                    }
+
                     if (!onActionButton || consumedActionButtonIndexes.has(buttonIndex)) {
                         return nextButtons;
                     }
@@ -411,7 +421,14 @@ export const ChatMessageItem = memo(
                     nextButtons.push({ button, buttonIndex });
                     return nextButtons;
                 }, []),
-            [buttons, consumedActionButtonIndexes, onActionButton, onMessage, onQuickMessageButton],
+            [
+                buttons,
+                consumedActionButtonIndexes,
+                onActionButton,
+                onMessage,
+                onQuickMessageButton,
+                onQuickMessageDraftButton,
+            ],
         );
         const shouldShowButtons = isLastMessage && renderableButtons.length > 0;
         const speechPlaybackEnabled = isSpeechPlaybackEnabled ?? true;
@@ -938,21 +955,7 @@ export const ChatMessageItem = memo(
                         </div>
 
                         {message.attachments && message.attachments.length > 0 && (
-                            <div className={styles.attachments}>
-                                {message.attachments.map((attachment, index) => (
-                                    <a
-                                        key={index}
-                                        href={attachment.url}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className={styles.attachment}
-                                        title={attachment.name}
-                                    >
-                                        <span className={styles.attachmentIcon}>📎</span>
-                                        <span className={styles.attachmentName}>{attachment.name}</span>
-                                    </a>
-                                ))}
-                            </div>
+                            <ChatMessageAttachments attachments={message.attachments} mode={mode} />
                         )}
 
                         <ChatMessageToolCallChips chips={toolCallChips} onToolCallClick={onToolCallClick} />
@@ -1009,6 +1012,13 @@ export const ChatMessageItem = memo(
                                                 return;
                                             }
 
+                                            if (button.type === 'messageDraft') {
+                                                if (onQuickMessageDraftButton) {
+                                                    void onQuickMessageDraftButton(button.messageDraft);
+                                                }
+                                                return;
+                                            }
+
                                             void handleActionButtonClick(buttonIndex, button.code);
                                         }}
                                         disabled={button.type === 'action' && pendingActionButtonIndex === buttonIndex}
@@ -1162,6 +1172,10 @@ export const ChatMessageItem = memo(
             return false;
         }
 
+        if (prev.onQuickMessageDraftButton !== next.onQuickMessageDraftButton) {
+            return false;
+        }
+
         if (prev.onReplyToMessage !== next.onReplyToMessage) {
             return false;
         }

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

@@ -50,6 +50,7 @@ export type ChatMessageListProps = {
     onMessage?: (messageContent: string) => Promisable<void>;
     onActionButton?: ChatProps['onActionButton'];
     onQuickMessageButton?: ChatProps['onQuickMessageButton'];
+    onQuickMessageDraftButton?: ChatProps['onQuickMessageDraftButton'];
     onReplyToMessage?: ChatProps['onReplyToMessage'];
     canReplyToMessage?: ChatProps['canReplyToMessage'];
     onCreateAgent?: (bookContent: string) => void;
@@ -97,6 +98,7 @@ export function ChatMessageList(props: ChatMessageListProps) {
         onMessage,
         onActionButton,
         onQuickMessageButton,
+        onQuickMessageDraftButton,
         onReplyToMessage,
         canReplyToMessage,
         onCreateAgent,
@@ -149,6 +151,7 @@ export function ChatMessageList(props: ChatMessageListProps) {
                         onMessage={onMessage}
                         onActionButton={onActionButton}
                         onQuickMessageButton={onQuickMessageButton}
+                        onQuickMessageDraftButton={onQuickMessageDraftButton}
                         onReplyToMessage={onReplyToMessage}
                         canReplyToMessage={canReplyToMessage}
                         setExpandedMessageId={setExpandedMessageId}

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

@@ -549,6 +549,15 @@ export type ChatProps = {
      */
     onQuickMessageButton?(messageContent: string): Promisable<void>;
 
+    /**
+     * Called when user clicks a quick draft-message button parsed from message markdown.
+     *
+     * Unlike `onQuickMessageButton`, this prefills the composer with an editable draft
+     * instead of sending the message. When not provided, `<Chat/>` prefills its own
+     * composer so the draft can be edited before sending.
+     */
+    onQuickMessageDraftButton?(messageDraftContent: string): Promisable<void>;
+
     /**
      * Optional callback fired when the user starts replying to one existing message.
      */

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState, type MouseEvent, type WheelEvent } from 'react';
 import styles from './Chat.module.css';
 
 /**
@@ -18,12 +18,36 @@ export type CitationIframePreviewProps = {
  *
  * @private type of `<CitationIframePreview/>`
  */
-type EmbedStatus = 'loading' | 'embed' | 'screenshot';
+type EmbedStatus = 'loading' | 'embed' | 'browser-stream';
+
+/**
+ * Prefix shared with the Agents Server page-preview stream route.
+ *
+ * @private component constant of `<CitationIframePreview/>`
+ */
+const BROWSER_PREVIEW_SESSION_ID_PREFIX = 'page-preview-';
+
+/**
+ * Fallback suffix length used when `crypto.randomUUID` is unavailable.
+ *
+ * @private component constant of `<CitationIframePreview/>`
+ */
+const BROWSER_PREVIEW_RANDOM_SUFFIX_LENGTH = 24;
+
+/**
+ * Pointer ratio resolved from one browser preview interaction.
+ *
+ * @private type of `<CitationIframePreview/>`
+ */
+type BrowserPreviewPointerRatio = {
+    readonly xRatio: number;
+    readonly yRatio: number;
+};
 
 /**
  * Renders a citation URL preview as an iframe when the target page allows embedding,
- * or falls back to a server-side screenshot with an "Open in new tab" link when it
- * does not (e.g. X-Frame-Options: DENY / SAMEORIGIN).
+ * or falls back to a live server-side browser stream with an "Open in new tab" link
+ * when it does not (e.g. X-Frame-Options: DENY / SAMEORIGIN).
  *
  * Embedding capability is determined by `GET /api/page-preview/check?url=<url>`.
  * If that endpoint is unavailable the component falls back to the iframe directly.
@@ -32,6 +56,7 @@ type EmbedStatus = 'loading' | 'embed' | 'screenshot';
  */
 export function CitationIframePreview({ src, title }: CitationIframePreviewProps) {
     const [status, setStatus] = useState<EmbedStatus>('loading');
+    const browserPreviewSessionId = useMemo(() => createBrowserPreviewSessionId(), [src]);
 
     useEffect(() => {
         let cancelled = false;
@@ -40,7 +65,7 @@ export function CitationIframePreview({ src, title }: CitationIframePreviewProps
             .then((response) => response.json())
             .then((data: { canEmbed: boolean }) => {
                 if (!cancelled) {
-                    setStatus(data.canEmbed ? 'embed' : 'screenshot');
+                    setStatus(data.canEmbed ? 'embed' : 'browser-stream');
                 }
             })
             .catch(() => {
@@ -59,15 +84,45 @@ export function CitationIframePreview({ src, title }: CitationIframePreviewProps
         return <div className={styles.citationIframeLoading}>Loading preview…</div>;
     }
 
-    if (status === 'screenshot') {
+    if (status === 'browser-stream') {
         return (
-            <div className={styles.citationScreenshotFallback}>
+            <div className={styles.citationBrowserStreamFallback}>
                 <img
-                    src={`/api/page-preview/screenshot?url=${encodeURIComponent(src)}`}
-                    alt={`Screenshot of ${title}`}
-                    className={styles.citationScreenshotImage}
+                    src={`/api/page-preview/stream?url=${encodeURIComponent(src)}&sessionId=${encodeURIComponent(
+                        browserPreviewSessionId,
+                    )}`}
+                    alt={`Live browser preview of ${title}`}
+                    className={styles.citationBrowserStreamImage}
+                    draggable={false}
+                    onClick={(event) => {
+                        const pointerRatio = resolveBrowserPreviewPointerRatio(event);
+                        if (!pointerRatio) {
+                            return;
+                        }
+
+                        sendBrowserPreviewInput({
+                            sessionId: browserPreviewSessionId,
+                            type: 'click',
+                            ...pointerRatio,
+                        });
+                    }}
+                    onWheel={(event) => {
+                        event.preventDefault();
+                        const pointerRatio = resolveBrowserPreviewPointerRatio(event);
+                        if (!pointerRatio) {
+                            return;
+                        }
+
+                        sendBrowserPreviewInput({
+                            sessionId: browserPreviewSessionId,
+                            type: 'wheel',
+                            deltaX: event.deltaX,
+                            deltaY: event.deltaY,
+                            ...pointerRatio,
+                        });
+                    }}
                 />
-                <a href={src} target="_blank" rel="noopener noreferrer" className={styles.citationScreenshotLink}>
+                <a href={src} target="_blank" rel="noopener noreferrer" className={styles.citationBrowserStreamLink}>
                     Open in new tab ↗
                 </a>
             </div>
@@ -76,3 +131,75 @@ export function CitationIframePreview({ src, title }: CitationIframePreviewProps
 
     return <iframe src={src} className={styles.citationIframe} title={title} />;
 }
+
+/**
+ * Creates one client-side browser preview session id.
+ *
+ * @returns Session id accepted by Agents Server page-preview stream routes.
+ */
+function createBrowserPreviewSessionId(): string {
+    const randomId =
+        globalThis.crypto && 'randomUUID' in globalThis.crypto
+            ? globalThis.crypto.randomUUID()
+            : createFallbackBrowserPreviewSessionSuffix();
+
+    return `${BROWSER_PREVIEW_SESSION_ID_PREFIX}${randomId}`.toLowerCase();
+}
+
+/**
+ * Creates a sufficiently long fallback session suffix when Web Crypto UUIDs are unavailable.
+ *
+ * @returns Lowercase random suffix.
+ */
+function createFallbackBrowserPreviewSessionSuffix(): string {
+    let suffix = '';
+
+    while (suffix.length < BROWSER_PREVIEW_RANDOM_SUFFIX_LENGTH) {
+        suffix += Math.random().toString(36).slice(2);
+    }
+
+    return suffix.slice(0, BROWSER_PREVIEW_RANDOM_SUFFIX_LENGTH);
+}
+
+/**
+ * Resolves pointer coordinates as ratios inside the streamed preview image.
+ *
+ * @param event - Mouse or wheel event fired inside the live preview image.
+ * @returns Pointer ratio or `null` when the image has no measurable size.
+ */
+function resolveBrowserPreviewPointerRatio(
+    event: MouseEvent<HTMLImageElement> | WheelEvent<HTMLImageElement>,
+): BrowserPreviewPointerRatio | null {
+    const rect = event.currentTarget.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+        return null;
+    }
+
+    return {
+        xRatio: (event.clientX - rect.left) / rect.width,
+        yRatio: (event.clientY - rect.top) / rect.height,
+    };
+}
+
+/**
+ * Sends one browser-preview interaction to the Agents Server stream session.
+ *
+ * @param payload - Browser-preview input payload.
+ */
+function sendBrowserPreviewInput(payload: {
+    readonly sessionId: string;
+    readonly type: 'click' | 'wheel';
+    readonly xRatio: number;
+    readonly yRatio: number;
+    readonly deltaX?: number;
+    readonly deltaY?: number;
+}): void {
+    void fetch('/api/page-preview/input', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+        keepalive: true,
+    }).catch(() => undefined);
+}

package/src/book-components/Chat/Chat/createProgressCardChecklistMarkdown.ts

@@ -14,13 +14,6 @@ const PENDING_PROGRESS_MARKER_HTML = '<span data-chat-progress-marker="pending"
  */
 const COMPLETED_PROGRESS_MARKER_HTML = '<span data-chat-progress-marker="completed" aria-hidden="true"></span>';
 
-/**
- * Human-facing label shown for "now" progress updates.
- *
- * @private internal helper of `<ChatMessageItem/>`
- */
-const PROGRESS_NOW_LABEL = "What I'm Doing Now";
-
 /**
  * Human-facing label shown for "next" progress updates.
  *
@@ -85,7 +78,7 @@ function createProgressCardMarkdownSections(progressCard: NonNullable<ChatMessag
     }
 
     if (normalizedNow) {
-        markdownSections.push(`**${PROGRESS_NOW_LABEL}:** ${normalizedNow}`);
+        markdownSections.push(normalizedNow);
     }
 
     const itemLines: Array<string> = [];

package/src/book-components/Chat/Chat/insertDictationChunk.ts

@@ -8,11 +8,11 @@ export function insertDictationChunk(params: {
     readonly dictatedText: string;
     readonly selectionStart: number;
     readonly selectionEnd: number;
-    readonly shouldReplaceSelection: boolean;
+    readonly isReplacingSelection: boolean;
 }): { nextValue: string; start: number; caret: number } {
-    const { currentValue, dictatedText, selectionStart, selectionEnd, shouldReplaceSelection } = params;
+    const { currentValue, dictatedText, selectionStart, selectionEnd, isReplacingSelection } = params;
     const replaceStart = selectionStart;
-    const replaceEnd = shouldReplaceSelection ? selectionEnd : selectionStart;
+    const replaceEnd = isReplacingSelection ? selectionEnd : selectionStart;
     const prefix = currentValue.slice(0, replaceStart);
     const suffix = currentValue.slice(replaceEnd);
     const previousCharacter = prefix.slice(-1);

package/src/book-components/Chat/Chat/learnDictationDictionary.ts

@@ -30,7 +30,7 @@ export function learnDictationDictionary(
                 continue;
             }
 
-            if (previousWord.toLowerCase() !== correctedWord.toLowerCase()) {
+            if (previousWord !== correctedWord) {
                 nextDictionary[previousWord.toLowerCase()] = correctedWord;
             }
         }

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

@@ -1,10 +1,6 @@
 import { type ReactElement } from 'react';
 import type { TODO_any } from '../../../utils/organization/TODO_any';
-import {
-    buildTimeoutToolPrimarySentence,
-    buildTimeoutToolScheduleSentence,
-    resolveTimeoutToolCallPresentation,
-} from '../utils/timeoutToolCallPresentation';
+import { buildTimeoutToolPrimarySentence, buildTimeoutToolScheduleSentence, resolveTimeoutToolCallPresentation } from '../utils/timeoutToolCallPresentation';
 import styles from './Chat.module.css';
 import { renderToolCallClockPanel } from './renderToolCallClockPanel';