@promptbook/cli 0.113.0-0 → 0.113.0-2

package/esm/src/book-components/Chat/Chat/CitationIframePreview.d.ts

@@ -9,8 +9,8 @@ export type CitationIframePreviewProps = {
 };
 /**
  * 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.

package/esm/src/book-components/Chat/Chat/CitationIframePreview.test.d.ts

@@ -0,0 +1,2 @@
+/** @jest-environment jsdom */
+export {};

package/esm/src/version.d.ts

@@ -15,7 +15,7 @@ export declare const BOOK_LANGUAGE_VERSION: string_semantic_version;
 export declare const PROMPTBOOK_ENGINE_VERSION: string_promptbook_version;
 /**
  * Represents the version string of the Promptbook engine.
- * It follows semantic versioning (e.g., `0.112.0`).
+ * It follows semantic versioning (e.g., `0.113.0-1`).
  *
  * @generated
  */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@promptbook/cli",
-    "version": "0.113.0-0",
+    "version": "0.113.0-2",
     "description": "Promptbook: Create persistent AI agents that turn your company's scattered knowledge into action",
     "private": false,
     "sideEffects": false,

package/src/book-components/Chat/Chat/Chat.module.css

@@ -3356,6 +3356,43 @@
     text-decoration: underline;
 }
 
+.citationBrowserStreamFallback {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.citationBrowserStreamImage {
+    width: 100%;
+    max-height: 60vh;
+    min-height: 400px;
+    object-fit: cover;
+    object-position: top;
+    display: block;
+    cursor: crosshair;
+    user-select: none;
+    touch-action: none;
+}
+
+.citationBrowserStreamLink {
+    display: block;
+    text-align: center;
+    padding: 10px 16px;
+    background: #f0f0f0;
+    color: #333;
+    font-size: 0.9em;
+    font-weight: 500;
+    text-decoration: none;
+    border-top: 1px solid #ddd;
+    transition: background 0.15s;
+}
+
+.citationBrowserStreamLink:hover {
+    background: #e0e0e0;
+    text-decoration: underline;
+}
+
 .citationMetadata {
     background: #f8f8f8;
     padding: 16px;

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/cli/promptbookCli.ts

@@ -48,6 +48,13 @@ const DEPRECATED_TOP_LEVEL_COMMAND_MESSAGES: Readonly<Record<string, string>> =
     'start-pipelines-server': OLD_PIPELINE_SYSTEM_DEPRECATION_MESSAGE,
 };
 
+/**
+ * Raw top-level CLI arguments that print the Promptbook version.
+ *
+ * @private internal constant of `promptbookCli`
+ */
+const VERSION_OPTION_ARGUMENTS: ReadonlySet<string> = new Set(['-v', '--version']);
+
 /**
  * Runs CLI utilities of Promptbook package
  *
@@ -65,8 +72,15 @@ export async function promptbookCli(): Promise<void> {
         );
     }
 
-    const cliArguments = process.argv.slice(2);
-    const isVerbose = cliArguments.some((arg) => arg === '--verbose' || arg === '-v');
+    const commandLineArguments = process.argv.slice(2);
+    const isVersionRequested = isTopLevelVersionRequested(commandLineArguments);
+
+    if (isVersionRequested) {
+        console.info(PROMPTBOOK_ENGINE_VERSION);
+        return process.exit(0);
+    }
+
+    const isVerbose = commandLineArguments.some((argument) => argument === '--verbose' || argument === '-v');
     //     <- TODO: Can be this be done with commander before the commander commands are initialized?
     if (isVerbose) {
         console.info(
@@ -104,7 +118,7 @@ export async function promptbookCli(): Promise<void> {
     // TODO: [🧠] Should it be here or not> $addGlobalOptionsToCommand(program);
     program.commands.forEach($addGlobalOptionsToCommand);
 
-    if (cliArguments.length === 0) {
+    if (commandLineArguments.length === 0) {
         program.outputHelp();
         return process.exit(0);
     }
@@ -112,6 +126,17 @@ export async function promptbookCli(): Promise<void> {
     program.parse(process.argv);
 }
 
+/**
+ * Checks whether the invocation asks for the root Promptbook CLI version.
+ *
+ * @private internal utility of `promptbookCli`
+ */
+function isTopLevelVersionRequested(commandLineArguments: ReadonlyArray<string>): boolean {
+    const firstCommandLineArgument = commandLineArguments[0];
+
+    return firstCommandLineArgument !== undefined && VERSION_OPTION_ARGUMENTS.has(firstCommandLineArgument);
+}
+
 /**
  * Adds one deprecation notice to each configured top-level legacy command.
  */