@promptbook/cli 0.113.0-1 → 0.113.0-11

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

@@ -1,8 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useId, useMemo, useState } from 'react';
-import type { KeyboardEvent, MouseEvent, WheelEvent } from 'react';
-import { LIVE_PAGE_PREVIEW_VIEWPORT_HEIGHT, LIVE_PAGE_PREVIEW_VIEWPORT_WIDTH } from '../utils/livePagePreviewConstants';
+import { useEffect, useMemo, useState, type MouseEvent, type WheelEvent } from 'react';
 import styles from './Chat.module.css';
 
 /**
@@ -20,47 +18,35 @@ export type CitationIframePreviewProps = {
  *
  * @private type of `<CitationIframePreview/>`
  */
-type EmbedStatus = 'loading' | 'embed' | 'browser';
+type EmbedStatus = 'loading' | 'embed' | 'browser-stream';
 
 /**
- * Browser-preview interaction sent to the Agents Server preview route.
+ * Prefix shared with the Agents Server page-preview stream route.
  *
- * @private type of `<CitationIframePreview/>`
+ * @private component constant of `<CitationIframePreview/>`
  */
-type LivePagePreviewInteraction =
-    | {
-          readonly type: 'click';
-          readonly x: number;
-          readonly y: number;
-      }
-    | {
-          readonly type: 'wheel';
-          readonly deltaX: number;
-          readonly deltaY: number;
-      }
-    | {
-          readonly type: 'keyDown';
-          readonly key: string;
-      };
+const BROWSER_PREVIEW_SESSION_ID_PREFIX = 'page-preview-';
 
 /**
- * Pointer position translated into the live-preview browser viewport.
+ * Fallback suffix length used when `crypto.randomUUID` is unavailable.
  *
- * @private type of `<CitationIframePreview/>`
+ * @private component constant of `<CitationIframePreview/>`
  */
-type LivePagePreviewPointerPosition = {
-    readonly x: number;
-    readonly y: number;
-};
+const BROWSER_PREVIEW_RANDOM_SUFFIX_LENGTH = 24;
 
 /**
- * Keyboard keys that should not be forwarded as standalone browser actions.
+ * Pointer ratio resolved from one browser preview interaction.
+ *
+ * @private type of `<CitationIframePreview/>`
  */
-const LIVE_PAGE_PREVIEW_IGNORED_KEYS = new Set(['Alt', 'CapsLock', 'Control', 'Meta', 'Shift']);
+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 live server-side browser preview with an "Open in new tab" link
+ * 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>`.
@@ -70,26 +56,27 @@ const LIVE_PAGE_PREVIEW_IGNORED_KEYS = new Set(['Alt', 'CapsLock', 'Control', 'M
  */
 export function CitationIframePreview({ src, title }: CitationIframePreviewProps) {
     const [status, setStatus] = useState<EmbedStatus>('loading');
+    const browserPreviewSessionId = useMemo(() => createBrowserPreviewSessionId(), [src]);
 
     useEffect(() => {
-        let isCancelled = false;
+        let cancelled = false;
 
         fetch(`/api/page-preview/check?url=${encodeURIComponent(src)}`)
             .then((response) => response.json())
             .then((data: { canEmbed: boolean }) => {
-                if (!isCancelled) {
-                    setStatus(data.canEmbed ? 'embed' : 'browser');
+                if (!cancelled) {
+                    setStatus(data.canEmbed ? 'embed' : 'browser-stream');
                 }
             })
             .catch(() => {
                 // API not available — fall back to iframe (e.g. outside agents-server)
-                if (!isCancelled) {
+                if (!cancelled) {
                     setStatus('embed');
                 }
             });
 
         return () => {
-            isCancelled = true;
+            cancelled = true;
         };
     }, [src]);
 
@@ -97,157 +84,122 @@ export function CitationIframePreview({ src, title }: CitationIframePreviewProps
         return <div className={styles.citationIframeLoading}>Loading preview…</div>;
     }
 
-    if (status === 'browser') {
-        return <LiveBrowserPreview src={src} title={title} />;
+    if (status === 'browser-stream') {
+        return (
+            <div className={styles.citationBrowserStreamFallback}>
+                <img
+                    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.citationBrowserStreamLink}>
+                    Open in new tab ↗
+                </a>
+            </div>
+        );
     }
 
     return <iframe src={src} className={styles.citationIframe} title={title} />;
 }
 
 /**
- * Renders and controls a streamed browser preview for non-embeddable citation URLs.
+ * Creates one client-side browser preview session id.
  *
- * @private component of `<CitationIframePreview/>`
+ * @returns Session id accepted by Agents Server page-preview stream routes.
  */
-function LiveBrowserPreview({ src, title }: CitationIframePreviewProps) {
-    const reactSessionId = useId();
-    const sessionId = useMemo(() => createLivePagePreviewSessionId(reactSessionId), [reactSessionId]);
-    const streamSrc = useMemo(
-        () => `/api/page-preview/live?url=${encodeURIComponent(src)}&sessionId=${encodeURIComponent(sessionId)}`,
-        [sessionId, src],
-    );
-
-    const handleClick = useCallback(
-        (event: MouseEvent<HTMLImageElement>) => {
-            event.currentTarget.focus();
-            const position = resolveLivePagePreviewPointerPosition(event);
-            if (!position) {
-                return;
-            }
-
-            void postLivePagePreviewInteraction(sessionId, {
-                type: 'click',
-                x: position.x,
-                y: position.y,
-            });
-        },
-        [sessionId],
-    );
-
-    const handleWheel = useCallback(
-        (event: WheelEvent<HTMLImageElement>) => {
-            event.preventDefault();
-            void postLivePagePreviewInteraction(sessionId, {
-                type: 'wheel',
-                deltaX: event.deltaX,
-                deltaY: event.deltaY,
-            });
-        },
-        [sessionId],
-    );
-
-    const handleKeyDown = useCallback(
-        (event: KeyboardEvent<HTMLImageElement>) => {
-            if (event.altKey || event.ctrlKey || event.metaKey) {
-                return;
-            }
-
-            const key = normalizeLivePagePreviewKey(event.key);
-            if (!key) {
-                return;
-            }
-
-            event.preventDefault();
-            void postLivePagePreviewInteraction(sessionId, {
-                type: 'keyDown',
-                key,
-            });
-        },
-        [sessionId],
-    );
-
-    return (
-        <div className={styles.citationBrowserPreviewFallback}>
-            <img
-                src={streamSrc}
-                alt={`Live browser preview of ${title}`}
-                className={styles.citationBrowserPreviewImage}
-                onClick={handleClick}
-                onWheel={handleWheel}
-                onKeyDown={handleKeyDown}
-                tabIndex={0}
-            />
-            <a href={src} target="_blank" rel="noopener noreferrer" className={styles.citationBrowserPreviewLink}>
-                Open in new tab ↗
-            </a>
-        </div>
-    );
+function createBrowserPreviewSessionId(): string {
+    const randomId =
+        globalThis.crypto && 'randomUUID' in globalThis.crypto
+            ? globalThis.crypto.randomUUID()
+            : createFallbackBrowserPreviewSessionSuffix();
+
+    return `${BROWSER_PREVIEW_SESSION_ID_PREFIX}${randomId}`.toLowerCase();
 }
 
 /**
- * Creates one browser-preview session id from React's hydration-stable id.
+ * Creates a sufficiently long fallback session suffix when Web Crypto UUIDs are unavailable.
  *
- * @param reactSessionId - React-generated id for the component instance.
- * @returns Session id shared by the stream and interaction endpoints.
+ * @returns Lowercase random suffix.
  */
-function createLivePagePreviewSessionId(reactSessionId: string): string {
-    return `preview-${reactSessionId.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+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);
 }
 
 /**
- * Converts one pointer event over the stream image to browser viewport coordinates.
+ * Resolves pointer coordinates as ratios inside the streamed preview image.
  *
- * @param event - Pointer event from the stream image.
- * @returns Browser viewport position or null when the image has no layout box.
+ * @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 resolveLivePagePreviewPointerPosition(
-    event: MouseEvent<HTMLImageElement>,
-): LivePagePreviewPointerPosition | null {
+function resolveBrowserPreviewPointerRatio(
+    event: MouseEvent<HTMLImageElement> | WheelEvent<HTMLImageElement>,
+): BrowserPreviewPointerRatio | null {
     const rect = event.currentTarget.getBoundingClientRect();
     if (rect.width <= 0 || rect.height <= 0) {
         return null;
     }
 
     return {
-        x: ((event.clientX - rect.left) / rect.width) * LIVE_PAGE_PREVIEW_VIEWPORT_WIDTH,
-        y: ((event.clientY - rect.top) / rect.height) * LIVE_PAGE_PREVIEW_VIEWPORT_HEIGHT,
+        xRatio: (event.clientX - rect.left) / rect.width,
+        yRatio: (event.clientY - rect.top) / rect.height,
     };
 }
 
 /**
- * Normalizes one browser keyboard key before forwarding it to Playwright.
+ * Sends one browser-preview interaction to the Agents Server stream session.
  *
- * @param key - Browser KeyboardEvent key.
- * @returns Playwright-compatible key name or null when the key should be ignored.
+ * @param payload - Browser-preview input payload.
  */
-function normalizeLivePagePreviewKey(key: string): string | null {
-    if (!key || LIVE_PAGE_PREVIEW_IGNORED_KEYS.has(key)) {
-        return null;
-    }
-
-    if (key === ' ') {
-        return 'Space';
-    }
-
-    return key;
-}
-
-/**
- * Sends one live-preview interaction to the Agents Server.
- *
- * @param sessionId - Active live-preview session id.
- * @param interaction - Interaction to apply to the browser page.
- */
-async function postLivePagePreviewInteraction(
-    sessionId: string,
-    interaction: LivePagePreviewInteraction,
-): Promise<void> {
-    await fetch('/api/page-preview/interact', {
+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({
-            sessionId,
-            ...interaction,
-        }),
+        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';
 

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

@@ -1,13 +1,13 @@
 'use client';
 
 import {
-    useCallback,
-    useEffect,
-    useRef,
-    useState,
-    type ChangeEvent,
-    type KeyboardEvent as ReactKeyboardEvent,
-    type MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type MutableRefObject
 } from 'react';
 import { spaceTrim } from 'spacetrim';
 import type { ChatMessage } from '../types/ChatMessage';
@@ -34,6 +34,18 @@ type PendingEnterIntentSnapshot = {
     readonly replyingToMessageId: string | null;
 };
 
+/**
+ * One programmatic request to replace the composer content with an editable draft.
+ *
+ * A fresh object identity is used for every request so repeated draft insertions
+ * (even with identical text) re-apply to the composer.
+ *
+ * @private function of `<ChatInputArea/>`
+ */
+export type ChatComposerDraft = {
+    readonly content: string;
+};
+
 /**
  * Props for `useChatInputAreaComposer`.
  *
@@ -43,6 +55,7 @@ type UseChatInputAreaComposerProps = {
     readonly onMessage?: ChatProps['onMessage'];
     readonly onChange?: ChatProps['onChange'];
     readonly defaultMessage?: string;
+    readonly draftMessage?: ChatComposerDraft;
     readonly enterBehavior?: ChatProps['enterBehavior'];
     readonly resolveEnterBehavior?: ChatProps['resolveEnterBehavior'];
     readonly isFocusedOnLoad?: boolean;
@@ -473,6 +486,38 @@ function useChatInputAreaComposerFocus({
     );
 }
 
+/**
+ * Applies programmatic draft-message insertions to the composer.
+ *
+ * Each new `draftMessage` object replaces the composer content and moves the caret
+ * to the end so the seeded draft can be edited before sending. Repeated requests with
+ * identical text still apply because every request carries a fresh object identity.
+ *
+ * @private function of `useChatInputAreaComposer`
+ */
+function useChatInputAreaDraftMessage(params: {
+    readonly draftMessage?: ChatComposerDraft;
+    readonly textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
+    readonly applyMessageContent: (nextContent: string) => void;
+}): void {
+    const { draftMessage, textareaRef, applyMessageContent } = params;
+    const lastAppliedDraftMessageRef = useRef<ChatComposerDraft | undefined>(undefined);
+
+    useEffect(() => {
+        if (draftMessage === undefined || draftMessage === lastAppliedDraftMessageRef.current) {
+            return;
+        }
+
+        lastAppliedDraftMessageRef.current = draftMessage;
+        applyMessageContent(draftMessage.content);
+
+        const textareaElement = textareaRef.current;
+        if (textareaElement) {
+            focusTextareaCaret(textareaElement, draftMessage.content.length);
+        }
+    }, [applyMessageContent, draftMessage, textareaRef]);
+}
+
 /**
  * Creates the newline insertion action used by the composer Enter handling.
  *
@@ -695,6 +740,7 @@ export function useChatInputAreaComposer(props: UseChatInputAreaComposerProps) {
         onMessage,
         onChange,
         defaultMessage,
+        draftMessage,
         enterBehavior,
         resolveEnterBehavior,
         isFocusedOnLoad,
@@ -719,6 +765,12 @@ export function useChatInputAreaComposer(props: UseChatInputAreaComposerProps) {
         isMobile,
     });
 
+    useChatInputAreaDraftMessage({
+        draftMessage,
+        textareaRef,
+        applyMessageContent,
+    });
+
     const handleInsertNewline = useChatInputAreaNewlineHandler({
         textareaRef,
         messageContentRef,