@vertesia/ui 1.0.0-dev.20260305.083323Z → 1.0.0-dev.20260331.091034Z

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

@@ -1,7 +1,8 @@
-import { AsyncExecutionResult } from "@vertesia/client";
-import { Button, Command, CommandGroup, CommandItem, CommandList, cn, Popover, PopoverContent, PopoverTrigger, useToast } from "@vertesia/ui/core";
+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, MoreVertical, XIcon } from "lucide-react";
+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";
@@ -9,18 +10,28 @@ import { getConversationUrl } from "./utils";
 export interface HeaderProps {
     title: string;
     isCompleted: boolean;
+    /** Workflow is in a terminal state (completed/failed/cancelled) — not just idle */
+    isTerminal?: boolean;
     onClose?: () => void;
     isModal: boolean;
-    run: AsyncExecutionResult;
+    agentRunId: string;
+    workflowRunId: string;
     viewMode: AgentConversationViewMode;
     onViewModeChange: (mode: AgentConversationViewMode) => void;
     showPlanPanel: boolean;
     hasPlan?: boolean;
+    showPlanButton?: boolean;
     onTogglePlanPanel: () => void;
     onDownload?: () => void;
-    onCopyRunId?: () => 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 */
+    onRestart?: (newRun: AgentRun) => void;
+    /** Called after a fork succeeds — receives the new AgentRun */
+    onFork?: (newRun: AgentRun) => void;
     /** Show green indicator when receiving streaming chunks */
     isReceivingChunks?: boolean;
     /** Additional className for the outer container */
@@ -29,21 +40,28 @@ export interface HeaderProps {
 
 export default function Header({
     title,
+    isTerminal = false,
     onClose,
     isModal,
-    run,
+    agentRunId,
+    workflowRunId,
     viewMode,
     onViewModeChange,
     showPlanPanel,
     hasPlan = false,
+    showPlanButton = true,
     onTogglePlanPanel,
     onDownload,
-    onCopyRunId,
+    // onCopyRunId,
     resetWorkflow,
     onExportPdf,
+    onShowDetails,
+    onRestart,
+    onFork,
     isReceivingChunks = false,
     className,
 }: HeaderProps) {
+    const { t } = useUITranslation();
     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)}>
@@ -53,7 +71,7 @@ export default function Header({
                         <span className="font-medium">{title}</span>
                     </div>
                     <span className="text-xs text-muted ml-1 flex items-center gap-1.5">
-                        (Run ID: {run.runId.substring(0, 8)}...)
+                        (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",
@@ -66,41 +84,46 @@ export default function Header({
                 <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" className="rounded-l-md" onClick={() => onViewModeChange("stacked")}>
-                            Details
+                        <Button variant={viewMode === "stacked" ? "outline" : "ghost"} size="xs" onClick={() => onViewModeChange("stacked")}>
+                            {t('agent.details')}
                         </Button>
-                        <Button variant={viewMode === "sliding" ? "outline" : "ghost"} size="xs" className="rounded-r-md" onClick={() => onViewModeChange("sliding")}>
-                            Summary
+                        <Button variant={viewMode === "sliding" ? "outline" : "ghost"} size="xs" onClick={() => onViewModeChange("sliding")}>
+                            {t('agent.summary')}
                         </Button>
                     </div>
 
-                    {/* Plan Panel Toggle - Nicer styled button */}
-                    <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>
-                        )}
-                        <Button
-                            size="sm"
-                            variant={showPlanPanel ? "primary" : "secondary"}
-                            onClick={onTogglePlanPanel}
-                            className="transition-all duration-200 rounded-md"
-                            title="Toggle plan panel"
-                        >
-                            <ClipboardList className="size-4 mr-1.5" />
-                            <span className="font-medium text-xs">{showPlanPanel ? "Hide Plan" : "Show Plan"}</span>
-                        </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>
+                            )}
+                            <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>
+                    )}
 
                     {/* More actions */}
                     <MoreDropdown
-                        run={run}
+                        agentRunId={agentRunId}
+                        workflowRunId={workflowRunId}
                         isModal={isModal}
+                        isTerminal={isTerminal}
                         onClose={onClose}
                         onDownload={onDownload}
-                        onCopyRunId={onCopyRunId}
                         resetWorkflow={resetWorkflow}
                         onExportPdf={onExportPdf}
+                        onShowDetails={onShowDetails}
+                        onRestart={onRestart}
+                        onFork={onFork}
                     />
                     {onClose && !isModal && (
                         <Button size="xs" variant="ghost" onClick={onClose}>
@@ -114,33 +137,43 @@ export default function Header({
 }
 
 function MoreDropdown({
-    run,
+    agentRunId,
+    workflowRunId,
     isModal,
+    isTerminal,
     onClose,
     onDownload,
-    onCopyRunId,
     resetWorkflow,
     onExportPdf,
+    onShowDetails,
+    onRestart,
+    onFork,
 }: {
-    run: AsyncExecutionResult;
+    agentRunId: string;
+    workflowRunId: string;
     isModal: boolean;
+    isTerminal: boolean;
     onClose?: () => void;
     onDownload?: () => void;
     onCopyRunId?: () => void;
     resetWorkflow?: () => void;
     onExportPdf?: () => void;
+    onShowDetails?: () => void;
+    onRestart?: (newRun: AgentRun) => void;
+    onFork?: (newRun: AgentRun) => void;
 }) {
+    const { t } = useUITranslation();
     const toast = useToast();
     const { client } = useUserSession();
     const builder = usePayloadBuilder();
 
-    const cancelWorkflow = async (run: AsyncExecutionResult) => {
+    const cancelWorkflow = async () => {
         try {
-            await client.store.workflows.terminate(run.workflowId, run.runId, "cancel");
+            await client.agents.terminate(agentRunId, "cancel");
 
             toast({
                 status: "success",
-                title: "Workflow cancelled",
+                title: t('agent.workflowCancelled'),
                 duration: 2000,
             });
 
@@ -148,89 +181,134 @@ function MoreDropdown({
             resetWorkflow?.();
 
             return true;
-        } catch (error) {
+        } catch (_error) {
             toast({
                 status: "error",
-                title: "Failed to cancel workflow",
+                title: t('agent.failedToCancelWorkflow'),
                 duration: 2000,
             });
             return false;
         }
     };
 
+    const restartWorkflow = async () => {
+        try {
+            const newRun = await client.agents.restart(agentRunId);
+            toast({
+                status: "success",
+                title: t('agent.conversationRestarted'),
+                duration: 2000,
+            });
+            onRestart?.(newRun);
+        } catch (_error) {
+            toast({
+                status: "error",
+                title: t('agent.failedToRestartConversation'),
+                duration: 2000,
+            });
+        }
+    };
+
+    const forkWorkflow = async () => {
+        try {
+            const newRun = await client.agents.fork(agentRunId);
+            toast({
+                status: "success",
+                title: t('agent.conversationForked'),
+                duration: 2000,
+            });
+            onFork?.(newRun);
+        } catch (_error) {
+            toast({
+                status: "error",
+                title: t('agent.failedToForkConversation'),
+                duration: 2000,
+            });
+        }
+    };
+
     const openUrl = (url: string) => {
         window.open(url, "_blank");
         return url;
     }
 
+    const copyAgentRunId = () => {
+        navigator.clipboard.writeText(agentRunId);
+        toast({
+            status: "success",
+            title: t('agent.agentRunIdCopied'),
+            duration: 2000,
+        });
+    };
+
+    const copyWorkflowRunId = () => {
+        navigator.clipboard.writeText(workflowRunId);
+        toast({
+            status: "success",
+            title: t('agent.workflowRunIdCopied'),
+            duration: 2000,
+        });
+    };
+
     return (
-        <Popover hover>
-            <PopoverTrigger>
-                <Button size="xs" variant="ghost" title="More actions">
+        <Dropdown
+            align="right"
+            trigger={
+                <Button size="xs" variant="ghost" title={t('agent.moreActions')}>
                     <MoreVertical className="size-4" />
                 </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-48" align="end">
-                <div className="rounded-md shadow-lg z-50">
-                    <div className="py-1 min-w-36">
-                        <Command>
-                            <CommandList>
-                                <CommandGroup>
-                                    <div className="flex items-center px-3 py-1.5 text-xs text-gray-700 dark:text-gray-300">
-                                        <span className="text-muted">Actions</span>
-                                    </div>
-                                    {
-                                        isModal && (
-                                            <CommandItem className="text-xs" onSelect={() => openUrl(`/store/agent-runner?agentId=${run.runId}__${run.workflowId}`)}>
-                                                <ExternalLink className="size-3.5 mr-2 text-muted" /> Open in new tab
-                                            </CommandItem>
-                                        )
-                                    }
-                                    <CommandItem className="text-xs" onSelect={() => {
-                                        if (onCopyRunId) {
-                                            onCopyRunId();
-                                        } else {
-                                            navigator.clipboard.writeText(run.runId);
-                                            toast({
-                                                status: "success",
-                                                title: "Run ID copied",
-                                                duration: 2000,
-                                            });
-                                        }
-                                    }}>
-                                        <CopyIcon className="size-3.5 mr-2 text-muted" /> Copy Run ID
-                                    </CommandItem>
-                                    <CommandItem className="text-xs" onSelect={() => {
-                                        if (onDownload) {
-                                            onDownload();
-                                        } else {
-                                            getConversationUrl(client, run.runId).then((r) => window.open(r, "_blank"));
-                                        }
-                                    }}>
-                                        <DownloadCloudIcon className="size-3.5 mr-2 text-muted" /> Download
-                                        Conversation
-                                    </CommandItem>
-                                    {onExportPdf && (
-                                        <CommandItem className="text-xs" onSelect={onExportPdf}>
-                                            <DownloadCloudIcon className="size-3.5 mr-2 text-muted" /> Export as PDF
-                                        </CommandItem>
-                                    )}
-                                    {onClose && isModal && (
-                                        <CommandItem className="text-xs" onSelect={onClose}>
-                                            <XIcon className="size-3.5 mr-2 text-muted" /> Close
-                                        </CommandItem>
-                                    )}
-                                    <CommandItem className="text-xs text-destructive" onSelect={() => {
-                                        cancelWorkflow(run);
-                                    }}>
-                                        <XIcon className="size-3.5 mr-2 text-destructive" /> Cancel Workflow
-                                    </CommandItem>
-                                </CommandGroup>
-                            </CommandList>
-                        </Command>
-                    </div>
-                </div>
-            </PopoverContent>
-        </Popover>
+            }
+        >
+            <MenuGroup label="Actions">
+                {isModal && (
+                    <MenuItem onClick={() => openUrl(`/store/agent-runner/${agentRunId}`)}>
+                        <ExternalLink className="size-3.5 text-muted" /> {t('agent.openInNewTab')}
+                    </MenuItem>
+                )}
+                <MenuItem onClick={copyAgentRunId}>
+                    <CopyIcon className="size-3.5 text-muted" /> {t('agent.copyAgentRunId')}
+                </MenuItem>
+                <MenuItem onClick={copyWorkflowRunId}>
+                    <CopyIcon className="size-3.5 text-muted" /> {t('agent.copyWorkflowRunId')}
+                </MenuItem>
+                {onShowDetails && (
+                    <MenuItem onClick={onShowDetails}>
+                        <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"));
+                    }
+                }}>
+                    <DownloadCloudIcon className="size-3.5 text-muted" /> {t('agent.downloadConversation')}
+                </MenuItem>
+                {onExportPdf && (
+                    <MenuItem onClick={onExportPdf}>
+                        <DownloadCloudIcon className="size-3.5 text-muted" /> {t('agent.exportAsPdf')}
+                    </MenuItem>
+                )}
+                {onClose && isModal && (
+                    <MenuItem onClick={onClose}>
+                        <XIcon className="size-3.5 text-muted" /> {t('agent.close')}
+                    </MenuItem>
+                )}
+                {onRestart && isTerminal && (
+                    <MenuItem onClick={restartWorkflow}>
+                        <RefreshCcw className="size-3.5 text-muted" /> {t('agent.restartConversation')}
+                    </MenuItem>
+                )}
+                {onFork && (
+                    <MenuItem onClick={forkWorkflow}>
+                        <GitFork className="size-3.5 text-muted" /> {t('agent.forkConversation')}
+                    </MenuItem>
+                )}
+                <MenuItem onClick={cancelWorkflow} variant="destructive">
+                    <XIcon className="size-3.5" /> {t('agent.cancelWorkflow')}
+                </MenuItem>
+            </MenuGroup>
+        </Dropdown>
     );
 }

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

@@ -1,7 +1,8 @@
 import { Plan } from "@vertesia/common";
 import { Badge, Button, cn } from "@vertesia/ui/core";
-import { AlertCircle, CheckCircle, Circle, Clock, X } from "lucide-react";
+import { AlertCircle, CheckCircle, Circle, Clock } from "lucide-react";
 import React from "react";
+import { useUITranslation } from '../../../../i18n/index.js';
 
 interface InlinePlanPanelProps {
   plan: Plan;
@@ -17,11 +18,13 @@ function InlineSlidingPlanPanelComponent({
   plan,
   workstreamStatus,
   isOpen,
-  onClose,
+  onClose: _onClose,
   plans = [],
   activePlanIndex = 0,
   onChangePlan = () => { },
 }: InlinePlanPanelProps) {
+  const { t } = useUITranslation();
+
   // Don't render if panel is closed
   if (!isOpen) {
     return null;
@@ -29,27 +32,14 @@ function InlineSlidingPlanPanelComponent({
 
   // Render the normal panel
   return (
-    <div className="h-full shadow-xl border border-muted/20 overflow-hidden">
-      <div className="flex items-center justify-between p-3 border-b border-muted/20">
-        <h3 className="font-bold text-base">
-          Plan
-        </h3>
-        <Button variant={"ghost"} onClick={onClose} >
-          <X className="size-4" />
-          <span className="sr-only">Close</span>
-        </Button>
-      </div>
+    <div className="h-full overflow-hidden">
       <div
-        className="p-3 overflow-y-auto"
-        style={{
-          height: "calc(100% - 44px)",
-          maxHeight: "calc(100vh - 150px)",
-        }}
+        className="p-3 overflow-y-auto h-full"
       >
         {/* Plan Summary - count only tasks, excluding main workstream */}
         <div className="mb-3 p-2 bg-info rounded-md border border-info">
           <div className="text-xs font-medium text-info mb-1">
-            Task Progress
+            {t('agent.taskProgress')}
           </div>
           <div className="flex items-center gap-2">
             {/* Calculate progress based on plan tasks, regardless of workstream */}
@@ -107,20 +97,20 @@ function InlineSlidingPlanPanelComponent({
               }
               disabled={activePlanIndex >= plans.length - 1}
             >
-              Older Plan
+              {t('agent.olderPlan')}
             </Button>
             <div className="text-xs text-muted">
               {plans[activePlanIndex]?.timestamp
                 ? new Date(
                   plans[activePlanIndex].timestamp,
                 ).toLocaleTimeString()
-                : "Unknown time"}
+                : t('agent.unknownTime')}
             </div>
             <Button variant={"ghost"}
               onClick={() => onChangePlan(Math.max(0, activePlanIndex - 1))}
               disabled={activePlanIndex <= 0}
             >
-              Newer Plan
+              {t('agent.newerPlan')}
             </Button>
           </div>
         )}
@@ -128,7 +118,7 @@ function InlineSlidingPlanPanelComponent({
         {/* Detailed Plan Steps */}
         <div className="rounded-md border border-muted/30">
           <div className="p-2 border-b border-muted/30 bg-muted">
-            <div className="font-medium text-xs">Step-by-Step Plan</div>
+            <div className="font-medium text-xs">{t('agent.stepByStepPlan')}</div>
           </div>
 
           <div className="divide-y divide-muted/20 max-h-[calc(100vh-350px)] overflow-y-auto">
@@ -175,10 +165,10 @@ function InlineSlidingPlanPanelComponent({
                         </div>
                         <Badge variant={status === "completed" ? "success" : status === "in_progress" ? "info" : "default"}>
                           {status === "completed"
-                            ? "Completed"
+                            ? t('agent.completed')
                             : status === "in_progress"
-                              ? "In Progress"
-                              : "Pending"}
+                              ? t('agent.inProgress')
+                              : t('agent.pending')}
                         </Badge>
                       </div>
                     </div>
@@ -188,9 +178,9 @@ function InlineSlidingPlanPanelComponent({
             ) : (
               <div className="p-3 text-center text-muted italic">
                 <AlertCircle className="size-4 mx-auto mb-2 text-attention" />
-                <p className="text-xs">No plan has been detected yet</p>
+                <p className="text-xs">{t('agent.noPlanDetected')}</p>
                 <p className="text-xs mt-1">
-                  Plans will appear here when the agent creates one
+                  {t('agent.plansWillAppear')}
                 </p>
               </div>
             )}
@@ -215,7 +205,7 @@ function InlineSlidingPlanPanelComponent({
           return workstreamEntries.length > 0 ? (
             <div className="mt-3 rounded-md border border-gray-200 dark:border-gray-800">
               <div className="p-2 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
-                <div className="font-medium text-xs">Workstreams</div>
+                <div className="font-medium text-xs">{t('agent.workstreams')}</div>
               </div>
               <div className="p-3">
                 <div className="grid grid-cols-1 gap-2">
@@ -223,18 +213,18 @@ function InlineSlidingPlanPanelComponent({
                     let StatusIcon = Circle;
                     let statusColor = "text-gray-400";
                     let statusBg = "bg-gray-100 dark:bg-gray-800";
-                    let statusText = "Pending";
+                    let statusText = t('agent.pending');
 
                     if (status === "in_progress") {
                       StatusIcon = Clock;
                       statusColor = "text-info";
                       statusBg = "bg-info/20";
-                      statusText = "In Progress";
+                      statusText = t('agent.inProgress');
                     } else if (status === "completed") {
                       StatusIcon = CheckCircle;
                       statusColor = "text-success";
                       statusBg = "bg-success/20";
-                      statusText = "Completed";
+                      statusText = t('agent.completed');
                     }
 
                     return (