@promptbook/cli 0.113.0-9 → 0.114.0-0

package/src/book-components/BookEditor/useBookEditorMonacoUploads/useBookEditorMonacoUploadQueue.ts

@@ -1,6 +1,16 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { DEFAULT_MAX_CONCURRENT_UPLOADS } from '../../../config';
-import type { BookEditorMonacoOnFileUpload, BookEditorMonacoUploadProgressCallback, QueueProgressUpdate, SetUploadItems, UpdateUploadItem, UploadFilesRef, UploadItem, UploadItemsRef, UploadProgressUpdate } from './bookEditorMonacoUploadTypes';
+import type {
+    BookEditorMonacoOnFileUpload,
+    BookEditorMonacoUploadProgressCallback,
+    QueueProgressUpdate,
+    SetUploadItems,
+    UpdateUploadItem,
+    UploadFilesRef,
+    UploadItem,
+    UploadItemsRef,
+    UploadProgressUpdate,
+} from './bookEditorMonacoUploadTypes';
 import { clearScheduledTimer } from './clearScheduledTimer';
 import { replaceUploadItemById } from './useBookEditorMonacoUploadItemsState';
 

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

@@ -942,11 +942,27 @@
     cursor: pointer;
     font-size: 20px;
     transition: color 0.2s;
-    color: var(--star-inactive-color, #ccc);
+    color: var(--chat-feedback-star-color, var(--star-inactive-color, #ccc));
 }
 
-.ratingStar.active {
-    color: #ffd700;
+.feedbackStar {
+    color: var(--chat-feedback-star-color, #ccc);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+
+.feedbackStarIcon {
+    display: block;
+    color: var(--chat-feedback-star-color, currentColor) !important;
+    fill: var(--chat-feedback-star-fill, none) !important;
+    stroke: var(--chat-feedback-star-color, currentColor) !important;
+}
+
+.feedbackStarIcon * {
+    fill: var(--chat-feedback-star-fill, none) !important;
+    stroke: var(--chat-feedback-star-color, currentColor) !important;
 }
 
 /* Sender Avatar */
@@ -2390,8 +2406,7 @@
     right: 0;
     bottom: 0;
 
-    background-color: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(8px);
+    background-color: rgba(15, 23, 42, 0.76);
 
     display: flex;
     justify-content: center;
@@ -2403,11 +2418,9 @@
 @keyframes modalFadeIn {
     from {
         opacity: 0;
-        backdrop-filter: blur(0px);
     }
     to {
         opacity: 1;
-        backdrop-filter: blur(8px);
     }
 }
 
@@ -2477,6 +2490,11 @@
     padding: 24px;
 }
 
+.ratingModal[data-chat-modal='citation-browser'] {
+    box-sizing: border-box;
+    padding: 24px;
+}
+
 .toolCallModal {
     max-width: 800px;
     padding: 0;
@@ -2486,6 +2504,25 @@
     position: relative;
 }
 
+.citationBrowserModal {
+    width: min(90vw, 800px);
+    max-width: 800px;
+    max-height: calc(100vh - 48px);
+    max-height: calc(100dvh - 48px);
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background: #f8fafc;
+}
+
+.citationBrowserModalBody {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+}
+
 .imageAttachmentModal {
     width: min(92vw, 1040px);
     max-width: 1040px;
@@ -3480,41 +3517,160 @@
     text-decoration: underline;
 }
 
-.citationBrowserStreamFallback {
+.liveBrowserPreview {
     width: 100%;
-    position: relative;
+    min-height: 0;
     display: flex;
     flex-direction: column;
+    background: #f8fafc;
+}
+
+.citationBrowserModal .liveBrowserPreview {
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.liveBrowserPreview:fullscreen {
+    background: #0f172a;
+}
+
+.liveBrowserPreviewToolbar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 8px;
+    background: #f1f5f9;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.liveBrowserPreviewToolbarButton {
+    flex: none;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: #334155;
+    font-size: 14px;
+    line-height: 1;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+.liveBrowserPreviewToolbarButton:hover:not(:disabled) {
+    background: #e2e8f0;
+}
+
+.liveBrowserPreviewToolbarButton:disabled {
+    opacity: 0.35;
+    cursor: default;
+}
+
+.liveBrowserPreviewZoomLabel {
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+}
+
+.liveBrowserPreviewToolbarCloseButton {
+    margin-left: 2px;
+}
+
+.liveBrowserPreviewToolbarCloseButton svg {
+    width: 14px;
+    height: 14px;
+}
+
+.liveBrowserPreviewUrlForm {
+    flex: 1;
+    min-width: 0;
+    margin: 0 4px;
 }
 
-.citationBrowserStreamImage {
+.liveBrowserPreviewUrlInput {
     width: 100%;
-    max-height: 60vh;
+    padding: 5px 12px;
+    border: 1px solid #e2e8f0;
+    border-radius: 999px;
+    background: #ffffff;
+    color: #0f172a;
+    font-size: 12px;
+    outline: none;
+}
+
+.liveBrowserPreviewUrlInput:focus {
+    border-color: #94a3b8;
+}
+
+.liveBrowserPreviewStreamArea {
+    position: relative;
+    height: 60vh;
     min-height: 400px;
-    object-fit: cover;
-    object-position: top;
+    overflow: auto;
+    background: #f8f8f8;
+    outline: none;
+    touch-action: none;
+}
+
+.citationBrowserModal .liveBrowserPreviewStreamArea {
+    height: min(60vh, 640px);
+    min-height: min(400px, calc(100dvh - 140px));
+}
+
+.liveBrowserPreviewStreamArea:focus-visible {
+    box-shadow: inset 0 0 0 2px #94a3b8;
+}
+
+.liveBrowserPreview:fullscreen .liveBrowserPreviewStreamArea {
+    flex: 1;
+    height: auto;
+    min-height: 0;
+}
+
+.liveBrowserPreviewStreamImage {
+    position: relative;
     display: block;
-    cursor: crosshair;
+    width: 100%;
+    background: #ffffff;
     user-select: none;
     touch-action: none;
 }
 
-.citationBrowserStreamLink {
-    display: block;
-    text-align: center;
-    padding: 10px 16px;
-    background: #f0f0f0;
-    color: #333;
+.liveBrowserPreviewConnecting {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #64748b;
     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;
+.liveBrowserPreviewOverlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    background: rgba(15, 23, 42, 0.55);
+    color: #ffffff;
+    text-align: center;
+}
+
+.liveBrowserPreviewOverlayButton {
+    padding: 8px 20px;
+    border: none;
+    border-radius: 999px;
+    background: #ffffff;
+    color: #0f172a;
+    font-weight: 600;
+    cursor: pointer;
 }
 
 .citationMetadata {
@@ -4435,6 +4591,11 @@
         align-items: center;
     }
 
+    .ratingModal[data-chat-modal='citation-browser'] {
+        padding: 8px;
+        align-items: center;
+    }
+
     .ratingModalContent {
         margin: 0;
         width: 100%;
@@ -4451,6 +4612,19 @@
         border-radius: 16px;
     }
 
+    .ratingModalContent.citationBrowserModal {
+        width: 100%;
+        max-height: calc(100vh - 16px);
+        max-height: calc(100dvh - 16px);
+        padding: 0;
+        border-radius: 14px;
+    }
+
+    .citationBrowserModal .liveBrowserPreviewStreamArea {
+        height: 58vh;
+        min-height: min(320px, calc(100dvh - 112px));
+    }
+
     .imageAttachmentModalHeader {
         padding: 16px 56px 12px 16px;
     }

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

@@ -119,6 +119,7 @@ export function Chat(props: ChatProps) {
         toolTitles,
         teammates,
         teamAgentProfiles,
+        markdownInlineReferences,
         layout,
         visualMode = 'ARTICLE_MODE',
         theme = 'LIGHT',
@@ -128,6 +129,7 @@ export function Chat(props: ChatProps) {
         isSpeechPlaybackEnabled = true,
         elevenLabsVoiceId,
         chatUiTranslations,
+        agentIdentifier,
     } = props;
 
     const buttonColor = useMemo(() => Color.from(buttonColorRaw || '#0066cc'), [buttonColorRaw]);
@@ -363,6 +365,7 @@ export function Chat(props: ChatProps) {
                         toolTitles={toolTitles}
                         teammates={teammates}
                         teamAgentProfiles={teamAgentProfiles}
+                        markdownInlineReferences={markdownInlineReferences}
                         visualMode={visualMode}
                         soundSystem={soundSystem}
                         onToolCallClick={openToolCall}
@@ -437,6 +440,7 @@ export function Chat(props: ChatProps) {
                 participants={participants}
                 resolveCitationLabel={resolveCitationLabel}
                 soundSystem={soundSystem}
+                agentIdentifier={agentIdentifier}
                 onClose={closeCitationModal}
             />
 

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import { CloseIcon } from '../../icons/CloseIcon';
 import { DownloadIcon } from '../../icons/DownloadIcon';
 import { classNames } from '../../_common/react-utils/classNames';
@@ -11,6 +12,7 @@ import { isPlainTextCitation, resolveCitationPreviewUrl } from '../utils/citatio
 import type { ParsedCitation } from '../utils/parseCitationsFromContent';
 import styles from './Chat.module.css';
 import type { ChatSoundSystem } from './ChatProps';
+import type { CitationIframePreviewStatus } from './CitationIframePreview';
 import { CitationIframePreview } from './CitationIframePreview';
 
 /**
@@ -24,6 +26,13 @@ export type ChatCitationModalProps = {
     participants: ReadonlyArray<ChatParticipant>;
     resolveCitationLabel?: CitationLabelResolver;
     soundSystem?: ChatSoundSystem;
+
+    /**
+     * Optional agent identifier (name or permanent id) scoping the live browser fallback
+     * to the agent's persistent server-side browser profile.
+     */
+    agentIdentifier?: string;
+
     onClose: () => void;
 };
 
@@ -43,15 +52,20 @@ const EMPTY_MODAL_CITATION: ParsedCitation = {
  * @private component of `<Chat/>`
  */
 export function ChatCitationModal(props: ChatCitationModalProps) {
-    const { isOpen, citation, participants, resolveCitationLabel, soundSystem, onClose } = props;
+    const { isOpen, citation, participants, resolveCitationLabel, soundSystem, agentIdentifier, onClose } = props;
     const resolvedCitation = citation || EMPTY_MODAL_CITATION;
     const label = useResolvedCitationLabel(resolvedCitation, resolveCitationLabel);
+    const previewUrl = citation ? resolveCitationPreviewUrl(citation, participants) : null;
+    const [citationPreviewStatus, setCitationPreviewStatus] = useState<CitationIframePreviewStatus>('loading');
+
+    useEffect(() => {
+        setCitationPreviewStatus('loading');
+    }, [isOpen, previewUrl, citation?.source]);
 
     if (!isOpen || !citation) {
         return null;
     }
 
-    const previewUrl = resolveCitationPreviewUrl(citation, participants);
     const isValidUrl = !!previewUrl;
     const previewTarget = previewUrl ?? citation.source;
     const previewBase = previewTarget.split(/[?#]/)[0]!;
@@ -62,86 +76,113 @@ export function ChatCitationModal(props: ChatCitationModalProps) {
     const hasTextPreview = !isValidUrl && (citation.excerpt || isTextCitation);
     const textPreviewContent = isTextCitation ? citation.source : citation.excerpt ?? '';
     const textPreviewHeading = isTextCitation ? 'Text:' : 'Excerpt:';
+    const isLiveBrowserPreview = isValidUrl && !isImage && citationPreviewStatus === 'browser-stream';
+    const citationIframePreview =
+        isValidUrl && !isImage ? (
+            <CitationIframePreview
+                src={previewUrl ?? citation.source}
+                title={`Preview of ${label}`}
+                agentIdentifier={agentIdentifier}
+                onClose={isLiveBrowserPreview ? onClose : undefined}
+                onStatusChange={setCitationPreviewStatus}
+                initialStatus={citationPreviewStatus}
+            />
+        ) : null;
 
     return (
         <div
             className={styles.ratingModal}
+            data-chat-modal={isLiveBrowserPreview ? 'citation-browser' : undefined}
             onClick={(event) => {
                 if (event.target === event.currentTarget) {
                     onClose();
                 }
             }}
         >
-            <div className={classNames(styles.ratingModalContent, styles.toolCallModal)}>
-                <button type="button" className={styles.modalCloseButton} onClick={onClose} aria-label="Close dialog">
-                    <CloseIcon />
-                </button>
-                <div className={styles.searchModalHeader}>
-                    <span className={styles.searchModalIcon}>📄</span>
-                    <h3 className={styles.searchModalQuery}>{label}</h3>
-                </div>
+            <div
+                className={classNames(
+                    styles.ratingModalContent,
+                    styles.toolCallModal,
+                    isLiveBrowserPreview && styles.citationBrowserModal,
+                )}
+            >
+                {isLiveBrowserPreview ? (
+                    <div className={styles.citationBrowserModalBody}>{citationIframePreview}</div>
+                ) : (
+                    <>
+                        <button
+                            type="button"
+                            className={styles.modalCloseButton}
+                            onClick={onClose}
+                            aria-label="Close dialog"
+                        >
+                            <CloseIcon />
+                        </button>
+                        <div className={styles.searchModalHeader}>
+                            <span className={styles.searchModalIcon}>📄</span>
+                            <h3 className={styles.searchModalQuery}>{label}</h3>
+                        </div>
 
-                <div className={styles.searchModalContent}>
-                    <div className={styles.citationDetails}>
-                        {isValidUrl ? (
-                            <div className={styles.citationPreview}>
-                                {isImage ? (
-                                    <img
-                                        src={previewUrl ?? citation.source}
-                                        className={styles.citationImage}
-                                        alt={`Preview of ${citation.source}`}
-                                        style={{
-                                            maxWidth: '100%',
-                                            maxHeight: '100%',
-                                            objectFit: 'contain',
-                                            display: 'block',
-                                            margin: '0 auto',
-                                        }}
-                                    />
+                        <div className={styles.searchModalContent}>
+                            <div className={styles.citationDetails}>
+                                {isValidUrl ? (
+                                    <div className={styles.citationPreview}>
+                                        {isImage ? (
+                                            <img
+                                                src={previewUrl ?? citation.source}
+                                                className={styles.citationImage}
+                                                alt={`Preview of ${citation.source}`}
+                                                style={{
+                                                    maxWidth: '100%',
+                                                    maxHeight: '100%',
+                                                    objectFit: 'contain',
+                                                    display: 'block',
+                                                    margin: '0 auto',
+                                                }}
+                                            />
+                                        ) : (
+                                            citationIframePreview
+                                        )}
+                                    </div>
+                                ) : hasTextPreview ? (
+                                    <div className={styles.citationExcerpt}>
+                                        <h4>{textPreviewHeading}</h4>
+                                        <MarkdownContent content={textPreviewContent} />
+                                    </div>
                                 ) : (
-                                    <CitationIframePreview
-                                        src={previewUrl ?? citation.source}
-                                        title={`Preview of ${label}`}
-                                    />
+                                    <div
+                                        className={styles.noResults}
+                                        onClick={() => {
+                                            console.info({ citation });
+                                        }}
+                                    >
+                                        <p>📄 Document preview unavailable</p>
+                                    </div>
                                 )}
                             </div>
-                        ) : hasTextPreview ? (
-                            <div className={styles.citationExcerpt}>
-                                <h4>{textPreviewHeading}</h4>
-                                <MarkdownContent content={textPreviewContent} />
-                            </div>
-                        ) : (
-                            <div
-                                className={styles.noResults}
-                                onClick={() => {
-                                    console.info({ citation });
-                                }}
-                            >
-                                <p>📄 Document preview unavailable</p>
-                            </div>
-                        )}
-                    </div>
-                </div>
+                        </div>
 
-                <div className={styles.ratingActions}>
-                    {previewUrl && (
-                        <a
-                            href={previewUrl}
-                            download={citation.source}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className={styles.downloadButton}
-                            onClick={() => {
-                                if (soundSystem) {
-                                    /* not await */ soundSystem.play('button_click');
-                                }
-                            }}
-                        >
-                            <DownloadIcon size={18} />
-                            <span>Download</span>
-                        </a>
-                    )}
-                </div>
+                        <div className={styles.ratingActions}>
+                            {previewUrl && (
+                                <a
+                                    href={previewUrl}
+                                    download={citation.source}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className={styles.downloadButton}
+                                    onClick={() => {
+                                        if (soundSystem) {
+                                            /* not await */ soundSystem.play('button_click');
+                                        }
+                                    }}
+                                >
+                                    <DownloadIcon size={18} />
+                                    <span>Download</span>
+                                </a>
+                            )}
+                        </div>
+                    </>
+                )}
             </div>
         </div>
     );

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

@@ -0,0 +1,103 @@
+import { Star } from 'lucide-react';
+import type { CSSProperties, MouseEventHandler } from 'react';
+import { classNames } from '../../_common/react-utils/classNames';
+import styles from './Chat.module.css';
+
+/**
+ * Star values available in the chat feedback UI.
+ *
+ * @private constant of `<Chat/>`
+ */
+export const CHAT_FEEDBACK_STAR_RATINGS = [1, 2, 3, 4, 5] as const;
+
+/**
+ * Fill color used for selected chat feedback stars.
+ *
+ * @private constant of `<Chat/>`
+ */
+const CHAT_FEEDBACK_STAR_ACTIVE_COLOR = '#ffd700';
+
+/**
+ * Icon size follows the surrounding star text size.
+ *
+ * @private constant of `<Chat/>`
+ */
+const CHAT_FEEDBACK_STAR_ICON_SIZE = '1em';
+
+/**
+ * Props for the shared chat feedback star icon.
+ *
+ * @private type of `<Chat/>`
+ */
+type ChatFeedbackStarProps = {
+    readonly isActive: boolean;
+    readonly inactiveColor: string;
+    readonly className?: string;
+    readonly onClick?: MouseEventHandler<HTMLSpanElement>;
+    readonly onMouseEnter?: MouseEventHandler<HTMLSpanElement>;
+    readonly onMouseLeave?: MouseEventHandler<HTMLSpanElement>;
+};
+
+/**
+ * Resolves the inactive color for stars in the feedback controls.
+ *
+ * @param mode Current chat color mode.
+ * @param tone Visual weight for the inactive star.
+ * @returns Hex color for an inactive star.
+ *
+ * @private function of `<Chat/>`
+ */
+export function resolveChatFeedbackStarInactiveColor(mode: 'LIGHT' | 'DARK', tone: 'subtle' | 'muted' = 'subtle') {
+    if (tone === 'muted') {
+        return mode === 'LIGHT' ? '#888' : '#666';
+    }
+
+    return mode === 'LIGHT' ? '#ccc' : '#555';
+}
+
+/**
+ * Renders one CSS-colored feedback star.
+ *
+ * @private component of `<Chat/>`
+ */
+export function ChatFeedbackStar({
+    isActive,
+    inactiveColor,
+    className,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+}: ChatFeedbackStarProps) {
+    const chatFeedbackStarColor = isActive ? CHAT_FEEDBACK_STAR_ACTIVE_COLOR : inactiveColor;
+    const chatFeedbackStarFill = isActive ? 'currentColor' : 'none';
+    const chatFeedbackStarIconStyle = {
+        color: chatFeedbackStarColor,
+        fill: chatFeedbackStarFill,
+        stroke: chatFeedbackStarColor,
+    } as CSSProperties;
+
+    return (
+        <span
+            className={classNames(styles.feedbackStar, className)}
+            style={
+                {
+                    '--chat-feedback-star-color': chatFeedbackStarColor,
+                    '--chat-feedback-star-fill': chatFeedbackStarFill,
+                    color: chatFeedbackStarColor,
+                } as CSSProperties
+            }
+            onClick={onClick}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+        >
+            <Star
+                aria-hidden="true"
+                focusable="false"
+                className={styles.feedbackStarIcon}
+                size={CHAT_FEEDBACK_STAR_ICON_SIZE}
+                fill={chatFeedbackStarFill}
+                style={chatFeedbackStarIconStyle}
+            />
+        </span>
+    );
+}