@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/features/agent/chat/ModernAgentOutput/Header.tsx

@@ -1,15 +1,30 @@
-import { AgentRun } from "@vertesia/common";
-import { Button, Dropdown, MenuGroup, MenuItem, cn, useToast } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
-import { Bot, ClipboardList, CopyIcon, DownloadCloudIcon, ExternalLink, GitFork, InfoIcon, MoreVertical, RefreshCcw, XIcon } from "lucide-react";
-import { useUITranslation } from '../../../../i18n/index.js';
-import { PayloadBuilderProvider, usePayloadBuilder } from "../../PayloadBuilder";
-import { type AgentConversationViewMode } from "./AllMessagesMixed";
-import { getConversationUrl } from "./utils";
+import type { AgentRun } from '@vertesia/common';
+import { Button, cn, Dropdown, MenuGroup, MenuItem, useToast } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useRouterContext } from '@vertesia/ui/router';
+import { useUserSession } from '@vertesia/ui/session';
+import {
+    Bot,
+    ClipboardList,
+    CopyIcon,
+    DownloadCloudIcon,
+    ExternalLink,
+    GitFork,
+    InfoIcon,
+    MessageSquareText,
+    MoreVertical,
+    Rewind,
+    Rows3,
+    XIcon,
+} from 'lucide-react';
+import { PayloadBuilderProvider, usePayloadBuilder } from '../../PayloadBuilder';
+import type { AgentConversationViewMode } from './AllMessagesMixed';
+import { getConversationUrl } from './utils';
 
 export interface HeaderProps {
     title: string;
     isCompleted: boolean;
+    variant?: 'full' | 'compact';
     /** Workflow is in a terminal state (completed/failed/cancelled) — not just idle */
     isTerminal?: boolean;
     onClose?: () => void;
@@ -22,13 +37,24 @@ export interface HeaderProps {
     hasPlan?: boolean;
     showPlanButton?: boolean;
     onTogglePlanPanel: () => void;
+    /** Show the local display playback toggle next to the conversation controls. */
+    showPlaybackButton?: boolean;
+    isPlaybackEnabled?: boolean;
+    onTogglePlayback?: () => void;
     onDownload?: () => void;
+    onExportFixture?: () => void;
     // onCopyRunId?: () => void;
     resetWorkflow?: () => void;
     onExportPdf?: () => void;
     /** Called to show run details/internals modal */
     onShowDetails?: () => void;
-    /** Called after a restart succeeds — receives the new AgentRun */
+    /** Whether workflow control actions such as cancel should be shown. */
+    allowWorkflowControl?: boolean;
+    /**
+     * @deprecated No longer used. Continuing a completed conversation now happens
+     * automatically when the user sends a message. Kept as an optional no-op to preserve
+     * type compatibility for external consumers of this public component.
+     */
     onRestart?: (newRun: AgentRun) => void;
     /** Called after a clone succeeds — receives the new AgentRun */
     onClone?: (newRun: AgentRun) => void;
@@ -40,6 +66,7 @@ export interface HeaderProps {
 
 export default function Header({
     title,
+    variant = 'full',
     isTerminal = false,
     onClose,
     isModal,
@@ -48,170 +75,237 @@ export default function Header({
     viewMode,
     onViewModeChange,
     showPlanPanel,
-    hasPlan = false,
     showPlanButton = true,
     onTogglePlanPanel,
+    showPlaybackButton = false,
+    isPlaybackEnabled = false,
+    onTogglePlayback,
     onDownload,
+    onExportFixture,
     // onCopyRunId,
     resetWorkflow,
     onExportPdf,
     onShowDetails,
-    onRestart,
+    allowWorkflowControl = true,
     onClone,
     isReceivingChunks = false,
     className,
 }: HeaderProps) {
     const { t } = useUITranslation();
-    const continueWorkflow = useContinueWorkflow(agentRunId, onRestart);
+    const isCompact = variant === 'compact';
+    const nextViewMode: AgentConversationViewMode = viewMode === 'sliding' ? 'stacked' : 'sliding';
+    const verboseLabel = t('agent.verbose');
+    const summaryLabel = t('agent.summary');
+    const nextViewModeLabel = nextViewMode === 'stacked' ? verboseLabel : summaryLabel;
+    const controls = (
+        <div
+            className={cn(
+                isCompact ? 'flex flex-col items-center gap-1' : 'flex justify-end items-center gap-2 ms-auto',
+            )}
+        >
+            {/* View Mode Toggle */}
+            {isCompact ? (
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => onViewModeChange(nextViewMode)}
+                    className="size-8 rounded-lg"
+                    title={nextViewModeLabel}
+                    aria-label={nextViewModeLabel}
+                >
+                    {nextViewMode === 'stacked' ? (
+                        <Rows3 className="size-4" />
+                    ) : (
+                        <MessageSquareText className="size-4" />
+                    )}
+                </Button>
+            ) : (
+                <div className="flex items-center gap-1 bg-muted rounded p-0.5 mt-2 lg:mt-0">
+                    <Button
+                        variant={viewMode === 'stacked' ? 'outline' : 'ghost'}
+                        size="xs"
+                        onClick={() => onViewModeChange('stacked')}
+                        aria-pressed={viewMode === 'stacked'}
+                        className="gap-1.5"
+                    >
+                        <Rows3 className="size-3.5" />
+                        {verboseLabel}
+                    </Button>
+                    <Button
+                        variant={viewMode === 'sliding' ? 'outline' : 'ghost'}
+                        size="xs"
+                        onClick={() => onViewModeChange('sliding')}
+                        aria-pressed={viewMode === 'sliding'}
+                        className="gap-1.5"
+                    >
+                        <MessageSquareText className="size-3.5" />
+                        {summaryLabel}
+                    </Button>
+                </div>
+            )}
+
+            {showPlanButton && (
+                <div className="relative">
+                    <Button
+                        size={variant === 'compact' ? 'icon' : 'sm'}
+                        variant={showPlanPanel ? 'primary' : 'ghost'}
+                        onClick={onTogglePlanPanel}
+                        className={cn(
+                            'transition-all duration-200 rounded-md',
+                            variant === 'compact' && 'size-8 rounded-lg',
+                        )}
+                        title={t('agent.toggleRightSidebar')}
+                    >
+                        <ClipboardList className={cn('size-4', variant === 'full' && 'me-1.5')} />
+                        {variant === 'full' ? (
+                            <span className="font-medium text-xs">
+                                {showPlanPanel ? t('agent.hideSidebar') : t('agent.showSidebar')}
+                            </span>
+                        ) : (
+                            <span className="sr-only">
+                                {showPlanPanel ? t('agent.hideSidebar') : t('agent.showSidebar')}
+                            </span>
+                        )}
+                    </Button>
+                </div>
+            )}
+
+            {showPlaybackButton && onTogglePlayback && (
+                <Button
+                    type="button"
+                    size={variant === 'compact' ? 'icon' : 'sm'}
+                    variant={isPlaybackEnabled ? 'primary' : 'ghost'}
+                    onClick={onTogglePlayback}
+                    aria-pressed={isPlaybackEnabled}
+                    aria-label={t('agent.rewind.label')}
+                    title={t('agent.rewind.label')}
+                    className={cn(
+                        'transition-all duration-200 rounded-md',
+                        variant === 'compact' && 'size-8 rounded-lg',
+                    )}
+                >
+                    <Rewind className={cn('size-4', variant === 'full' && 'me-1.5')} />
+                    {variant === 'full' ? (
+                        <span className="font-medium text-xs">{t('agent.rewind.label')}</span>
+                    ) : (
+                        <span className="sr-only">{t('agent.rewind.label')}</span>
+                    )}
+                </Button>
+            )}
+
+            {/* More actions */}
+            <MoreDropdown
+                compact={isCompact}
+                agentRunId={agentRunId}
+                workflowRunId={workflowRunId}
+                isModal={isModal}
+                isTerminal={isTerminal}
+                onClose={onClose}
+                onDownload={onDownload}
+                onExportFixture={onExportFixture}
+                resetWorkflow={resetWorkflow}
+                onExportPdf={onExportPdf}
+                onShowDetails={onShowDetails}
+                allowWorkflowControl={allowWorkflowControl}
+                onClone={onClone}
+            />
+            {onClose && !isModal && (
+                <Button size="xs" variant="ghost" onClick={onClose} aria-label={t('agent.close')}>
+                    <XIcon className="size-4" />
+                </Button>
+            )}
+        </div>
+    );
+
+    if (variant === 'compact') {
+        return (
+            <PayloadBuilderProvider>
+                <div
+                    className={cn(
+                        'inline-flex items-center rounded-xl border border-border/70 bg-background/90 p-1 shadow-lg shadow-black/10 backdrop-blur',
+                        className,
+                    )}
+                >
+                    {controls}
+                </div>
+            </PayloadBuilderProvider>
+        );
+    }
+
     return (
         <PayloadBuilderProvider>
-            <div className={cn("flex flex-wrap items-end justify-between py-1.5 px-2 border-b shadow-sm flex-shrink-0", className)}>
+            <div
+                className={cn(
+                    'flex flex-wrap items-end justify-between py-1.5 px-2 border-b shadow-sm flex-shrink-0',
+                    className,
+                )}
+            >
                 <div className="flex flex-wrap items-center space-x-2">
                     <div className="flex items-center space-x-1">
                         <Bot className="size-5 text-muted" />
                         <span className="font-medium">{title}</span>
                     </div>
-                    <span className="text-xs text-muted ml-1 flex items-center gap-1.5">
+                    <span className="text-xs text-muted ms-1 flex items-center gap-1.5">
                         (Agent Run ID: {agentRunId})
                         {/* Streaming chunk indicator - gray when idle, purple when receiving */}
-                        <span className={cn(
-                            "w-2 h-2 rounded-full transition-colors duration-200",
-                            isReceivingChunks
-                                ? "bg-purple-500 shadow-[0_0_6px_2px_rgba(168,85,247,0.6)]"
-                                : "bg-gray-400",
-                        )} />
-                    </span>
-                </div>
-                <div className="flex justify-end items-center space-x-2 ml-auto">
-                    {/* View Mode Toggle */}
-                    <div className="flex items-center space-x-1 bg-muted rounded p-0.5 mt-2 lg:mt-0">
-                        <Button variant={viewMode === "stacked" ? "outline" : "ghost"} size="xs" onClick={() => onViewModeChange("stacked")}>
-                            {t('agent.details')}
-                        </Button>
-                        <Button variant={viewMode === "sliding" ? "outline" : "ghost"} size="xs" onClick={() => onViewModeChange("sliding")}>
-                            {t('agent.summary')}
-                        </Button>
-                    </div>
-
-                    {showPlanButton && (
-                        <div className="relative">
-                            {/* Notification badge when plan is available but hidden */}
-                            {hasPlan && !showPlanPanel && (
-                                <span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-primary rounded-full border border-border z-10"></span>
+                        <span
+                            className={cn(
+                                'w-2 h-2 rounded-full transition-colors duration-200',
+                                isReceivingChunks
+                                    ? 'bg-purple-500 shadow-[0_0_6px_2px_rgba(168,85,247,0.6)]'
+                                    : 'bg-gray-400',
                             )}
-                            <Button
-                                size="sm"
-                                variant={showPlanPanel ? "primary" : "secondary"}
-                                onClick={onTogglePlanPanel}
-                                className="transition-all duration-200 rounded-md"
-                                title={t('agent.toggleRightSidebar')}
-                            >
-                                <ClipboardList className="size-4 mr-1.5" />
-                                <span className="font-medium text-xs">{showPlanPanel ? t('agent.hideSidebar') : t('agent.showSidebar')}</span>
-                            </Button>
-                        </div>
-                    )}
-
-                    {onRestart && isTerminal && (
-                        <Button
-                            size="sm"
-                            variant="secondary"
-                            onClick={continueWorkflow}
-                            className="transition-all duration-200 rounded-md"
-                            title={t('agent.continueConversation')}
-                        >
-                            <RefreshCcw className="size-4 mr-1.5" />
-                            <span className="font-medium text-xs">{t('agent.continueConversation')}</span>
-                        </Button>
-                    )}
-
-                    {/* More actions */}
-                    <MoreDropdown
-                        agentRunId={agentRunId}
-                        workflowRunId={workflowRunId}
-                        isModal={isModal}
-                        isTerminal={isTerminal}
-                        onClose={onClose}
-                        onDownload={onDownload}
-                        resetWorkflow={resetWorkflow}
-                        onExportPdf={onExportPdf}
-                        onShowDetails={onShowDetails}
-                        onRestart={onRestart}
-                        onClone={onClone}
-                    />
-                    {onClose && !isModal && (
-                        <Button size="xs" variant="ghost" onClick={onClose}>
-                            <XIcon className="size-4" />
-                        </Button>
-                    )}
+                        />
+                    </span>
                 </div>
+                {controls}
             </div>
         </PayloadBuilderProvider>
     );
 }
 
-function useContinueWorkflow(agentRunId: string, onRestart?: (newRun: AgentRun) => void) {
-    const { t } = useUITranslation();
-    const toast = useToast();
-    const { client } = useUserSession();
-
-    return async () => {
-        try {
-            const newRun = await client.agents.restart(agentRunId);
-            toast({
-                status: "success",
-                title: t('agent.conversationContinued'),
-                duration: 2000,
-            });
-            onRestart?.(newRun);
-        } catch (_error) {
-            toast({
-                status: "error",
-                title: t('agent.failedToContinueConversation'),
-                duration: 2000,
-            });
-        }
-    };
-}
-
 function MoreDropdown({
+    compact = false,
     agentRunId,
     workflowRunId,
     isModal,
     isTerminal,
     onClose,
     onDownload,
+    onExportFixture,
     resetWorkflow,
     onExportPdf,
     onShowDetails,
-    onRestart,
+    allowWorkflowControl = true,
     onClone,
 }: {
+    compact?: boolean;
     agentRunId: string;
     workflowRunId: string;
     isModal: boolean;
     isTerminal: boolean;
     onClose?: () => void;
     onDownload?: () => void;
+    onExportFixture?: () => void;
     onCopyRunId?: () => void;
     resetWorkflow?: () => void;
     onExportPdf?: () => void;
     onShowDetails?: () => void;
-    onRestart?: (newRun: AgentRun) => void;
+    allowWorkflowControl?: boolean;
     onClone?: (newRun: AgentRun) => void;
 }) {
     const { t } = useUITranslation();
     const toast = useToast();
     const { client } = useUserSession();
     const builder = usePayloadBuilder();
-    const continueWorkflow = useContinueWorkflow(agentRunId, onRestart);
+    const { router } = useRouterContext();
 
     const cancelWorkflow = async () => {
         try {
-            await client.agents.terminate(agentRunId, "cancel");
+            await client.agents.terminate(agentRunId, 'cancel');
 
             toast({
-                status: "success",
+                status: 'success',
                 title: t('agent.workflowCancelled'),
                 duration: 2000,
             });
@@ -222,7 +316,7 @@ function MoreDropdown({
             return true;
         } catch (_error) {
             toast({
-                status: "error",
+                status: 'error',
                 title: t('agent.failedToCancelWorkflow'),
                 duration: 2000,
             });
@@ -234,14 +328,14 @@ function MoreDropdown({
         try {
             const newRun = await client.agents.fork(agentRunId);
             toast({
-                status: "success",
+                status: 'success',
                 title: t('agent.conversationCloned'),
                 duration: 2000,
             });
             onClone?.(newRun);
         } catch (_error) {
             toast({
-                status: "error",
+                status: 'error',
                 title: t('agent.failedToCloneConversation'),
                 duration: 2000,
             });
@@ -249,14 +343,17 @@ function MoreDropdown({
     };
 
     const openUrl = (url: string) => {
-        window.open(url, "_blank");
-        return url;
-    }
+        // Carry the active tenant sticky params (a/p) on internal routes so the new tab keeps the
+        // current account/project; leave absolute/external URLs untouched.
+        const href = url.startsWith('/') ? router.getTopRouter().navigator.addStickyParams(url) : url;
+        window.open(href, '_blank');
+        return href;
+    };
 
     const copyAgentRunId = () => {
         navigator.clipboard.writeText(agentRunId);
         toast({
-            status: "success",
+            status: 'success',
             title: t('agent.agentRunIdCopied'),
             duration: 2000,
         });
@@ -265,7 +362,7 @@ function MoreDropdown({
     const copyWorkflowRunId = () => {
         navigator.clipboard.writeText(workflowRunId);
         toast({
-            status: "success",
+            status: 'success',
             title: t('agent.workflowRunIdCopied'),
             duration: 2000,
         });
@@ -275,7 +372,13 @@ function MoreDropdown({
         <Dropdown
             align="right"
             trigger={
-                <Button size="xs" variant="ghost" title={t('agent.moreActions')}>
+                <Button
+                    size={compact ? 'icon' : 'xs'}
+                    variant="ghost"
+                    title={t('agent.moreActions')}
+                    aria-label={t('agent.moreActions')}
+                    className={compact ? 'size-8 rounded-lg' : undefined}
+                >
                     <MoreVertical className="size-4" />
                 </Button>
             }
@@ -297,13 +400,15 @@ function MoreDropdown({
                         <InfoIcon className="size-3.5 text-muted" /> {t('agent.details')}
                     </MenuItem>
                 )}
-                <MenuItem onClick={() => {
-                    if (onDownload) {
-                        onDownload();
-                    } else {
-                        getConversationUrl(client, agentRunId).then((r) => window.open(r, "_blank"));
-                    }
-                }}>
+                <MenuItem
+                    onClick={() => {
+                        if (onDownload) {
+                            onDownload();
+                        } else {
+                            void getConversationUrl(client, agentRunId).then((r) => window.open(r, '_blank'));
+                        }
+                    }}
+                >
                     <DownloadCloudIcon className="size-3.5 text-muted" /> {t('agent.downloadConversation')}
                 </MenuItem>
                 {onExportPdf && (
@@ -311,22 +416,22 @@ function MoreDropdown({
                         <DownloadCloudIcon className="size-3.5 text-muted" /> {t('agent.exportAsPdf')}
                     </MenuItem>
                 )}
+                {onExportFixture && (
+                    <MenuItem onClick={onExportFixture}>
+                        <DownloadCloudIcon className="size-3.5 text-muted" /> {t('agent.rewind.exportFixture')}
+                    </MenuItem>
+                )}
                 {onClose && isModal && (
                     <MenuItem onClick={onClose}>
                         <XIcon className="size-3.5 text-muted" /> {t('agent.close')}
                     </MenuItem>
                 )}
-                {onRestart && isTerminal && (
-                    <MenuItem onClick={continueWorkflow}>
-                        <RefreshCcw className="size-3.5 text-muted" /> {t('agent.continueConversation')}
-                    </MenuItem>
-                )}
                 {onClone && (
                     <MenuItem onClick={cloneWorkflow}>
                         <GitFork className="size-3.5 text-muted" /> {t('agent.cloneConversation')}
                     </MenuItem>
                 )}
-                {!isTerminal && (
+                {allowWorkflowControl && !isTerminal && (
                     <MenuItem onClick={cancelWorkflow} variant="destructive">
                         <XIcon className="size-3.5" /> {t('agent.cancelWorkflow')}
                     </MenuItem>

package/src/features/agent/chat/ModernAgentOutput/InlineSlideInPanel.tsx

@@ -1,5 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import { Button } from '@vertesia/ui/core';
 import { XIcon } from 'lucide-react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
 
 interface InlineSlideInPanelProps {
     isOpen: boolean;
@@ -14,53 +16,55 @@ export default function InlineSlideInPanel({
     onClose,
     title,
     children,
-    width = '320px'
+    width = '320px',
 }: InlineSlideInPanelProps) {
     const [mounted, setMounted] = useState(false);
 
     // Debug logging
-    console.log("InlineSlideInPanel render:", { isOpen, mounted, title });
+    console.log('InlineSlideInPanel render:', { isOpen, mounted, title });
 
     // Handle animation timing
     useEffect(() => {
-        console.log("InlineSlideInPanel useEffect triggered. isOpen:", isOpen);
+        console.log('InlineSlideInPanel useEffect triggered. isOpen:', isOpen);
         if (isOpen) {
-            console.log("InlineSlideInPanel setting mounted to true");
+            console.log('InlineSlideInPanel setting mounted to true');
             setMounted(true);
         } else {
-            console.log("InlineSlideInPanel setting up timer to unmount");
+            console.log('InlineSlideInPanel setting up timer to unmount');
             const timer = setTimeout(() => {
-                console.log("InlineSlideInPanel timer fired, setting mounted to false");
+                console.log('InlineSlideInPanel timer fired, setting mounted to false');
                 setMounted(false);
             }, 300); // Match transition duration
             return () => clearTimeout(timer);
         }
     }, [isOpen]);
-    
+
     if (!mounted && !isOpen) {
         return null;
     }
-    
+
     return (
         <div
-            className={`absolute top-12 right-0 bottom-0 z-40 bg-white dark:bg-gray-900 shadow-lg border-l border-gray-200 dark:border-gray-800 border-4 border-red-500`}
+            className={`absolute top-12 end-0 bottom-0 z-40 bg-white dark:bg-gray-900 shadow-lg border-s border-gray-200 dark:border-gray-800 border-4 border-red-500`}
             style={{ width, transform: 'none' }}
         >
             {/* Header */}
             <div className="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800">
                 <h3 className="font-medium text-gray-800 dark:text-gray-200 text-sm">{title}</h3>
-                <button 
+                <Button
+                    variant="unstyled"
                     className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-full"
                     onClick={onClose}
+                    aria-label="Close"
                 >
                     <XIcon className="h-4 w-4" />
-                </button>
+                </Button>
             </div>
-            
+
             {/* Content */}
             <div className="p-3 overflow-y-auto" style={{ height: 'calc(100% - 44px)' }}>
                 {children}
             </div>
         </div>
     );
-}
+}