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

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

@@ -3,6 +3,7 @@ import { Activity, FileTextIcon, HelpCircleIcon, PaperclipIcon, SendIcon, StopCi
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { ConversationFile, FileProcessingStatus } from "@vertesia/common";
 import { SelectDocument } from "../../../store";
+import { useUITranslation } from "../../../../i18n/index.js";
 
 /** Represents an uploaded file attachment */
 export interface UploadedFile {
@@ -82,12 +83,12 @@ export default function MessageInput({
     isStreaming = false,
     isCompleted = false,
     activeTaskCount = 0,
-    placeholder = "Type your message...",
+    placeholder,
     // File upload props
     onFilesSelected,
     uploadedFiles = [],
     onRemoveFile,
-    acceptedFileTypes = ".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.webp",
+    acceptedFileTypes,
     maxFiles = 5,
     processingFiles,
     hasProcessingFiles = false,
@@ -102,6 +103,8 @@ export default function MessageInput({
     // Styling props
     className,
 }: MessageInputProps) {
+    const { t } = useUITranslation();
+    const resolvedPlaceholder = placeholder ?? t('agent.typeYourMessage');
     const ref = useRef<HTMLTextAreaElement | null>(null);
     const fileInputRef = useRef<HTMLInputElement | null>(null);
     const [value, setValue] = useState("");
@@ -294,7 +297,6 @@ export default function MessageInput({
         }, 100);
     };
 
-    const hasAttachments = uploadedFiles.length > 0 || selectedDocuments.length > 0 || (processingFiles && processingFiles.size > 0);
 
     return (
         <div
@@ -309,7 +311,7 @@ export default function MessageInput({
                 <div className="absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 rounded-lg z-10 pointer-events-none">
                     <div className="text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2">
                         <UploadIcon className="size-5" />
-                        Drop files to upload
+                        {t('agent.dropFilesToUpload')}
                     </div>
                 </div>
             )}
@@ -326,108 +328,106 @@ export default function MessageInput({
                 />
             )}
 
-            {/* Attachments preview */}
-            {hasAttachments && !hideFileUpload && (
+            {/* Uploaded files preview */}
+            {!hideFileUpload && (uploadedFiles.length > 0 || (processingFiles && processingFiles.size > 0)) && (
                 <div className="flex flex-col gap-2 mb-3">
-                    {/* Uploaded files section */}
-                    {(uploadedFiles.length > 0 || (processingFiles && processingFiles.size > 0)) && (
-                        <div>
-                            <div className="flex items-center gap-1 mb-1">
-                                <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
-                                    Uploaded Files
-                                </span>
-                                <VTooltip
-                                    description="Files uploaded to this conversation remain available throughout. The agent can access them anytime."
-                                    placement="top"
-                                    size="md"
-                                >
-                                    <HelpCircleIcon className="size-3 text-gray-400 dark:text-gray-500" />
-                                </VTooltip>
-                            </div>
-                            <div className="flex flex-wrap gap-2">
-                                {/* Processing files (uploading/processing/error) */}
-                                {processingFiles && Array.from(processingFiles.values()).map((file) => (
-                                    <div
-                                        key={file.id}
-                                        className={cn(
-                                            "flex items-center gap-1.5 px-2 py-1 rounded-md text-sm",
-                                            file.status === FileProcessingStatus.ERROR
-                                                ? "bg-destructive/10 text-destructive"
-                                                : file.status === FileProcessingStatus.READY
-                                                    ? "bg-success/10 text-success"
-                                                    : "bg-attention/10 text-attention",
-                                        )}
-                                    >
-                                        <FileTextIcon className={cn(
-                                            "size-3.5",
-                                            (file.status === FileProcessingStatus.UPLOADING || file.status === FileProcessingStatus.PROCESSING) && "animate-pulse",
-                                        )} />
-                                        <span className="max-w-[120px] truncate">{file.name}</span>
-                                        <span className="text-xs opacity-70">
-                                            {file.status === FileProcessingStatus.UPLOADING ? 'Uploading...'
-                                                : file.status === FileProcessingStatus.PROCESSING ? 'Processing...'
-                                                : file.status === FileProcessingStatus.ERROR ? 'Error'
-                                                : file.status === FileProcessingStatus.READY ? 'Ready' : file.status}
-                                        </span>
-                                    </div>
-                                ))}
-                                {/* Uploaded files (with remove button) */}
-                                {uploadedFiles.map((file) => (
-                                    <div
-                                        key={file.id}
-                                        className="flex items-center gap-1.5 px-2 py-1 bg-success/10 text-success rounded-md text-sm"
-                                    >
-                                        <FileTextIcon className="size-3.5" />
-                                        <span className="max-w-[120px] truncate">{file.name}</span>
-                                        {onRemoveFile && (
-                                            <button
-                                                onClick={() => onRemoveFile(file.id)}
-                                                className="ml-1 p-0.5 hover:bg-success/20 rounded"
-                                            >
-                                                <XIcon className="size-3" />
-                                            </button>
-                                        )}
-                                    </div>
-                                ))}
-                            </div>
+                    <div>
+                        <div className="flex items-center gap-1 mb-1">
+                            <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                                {t('agent.uploadedFiles')}
+                            </span>
+                            <VTooltip
+                                description={t('agent.filesUploadedDescription')}
+                                placement="top"
+                                size="md"
+                            >
+                                <HelpCircleIcon className="size-3 text-gray-400 dark:text-gray-500" />
+                            </VTooltip>
                         </div>
-                    )}
-                    {/* Selected documents section */}
-                    {selectedDocuments.length > 0 && (
-                        <div>
-                            <div className="flex items-center gap-1 mb-1">
-                                <span className="text-xs font-medium text-blue-600 dark:text-blue-400">
-                                    Document Attachments
-                                </span>
-                                <VTooltip
-                                    description="Documents from the store attached to this message. The agent can re-fetch them by ID anytime, or re-attach to include content directly."
-                                    placement="top"
-                                    size="md"
+                        <div className="flex flex-wrap gap-2">
+                            {/* Processing files (uploading/processing/error) */}
+                            {processingFiles && Array.from(processingFiles.values()).map((file) => (
+                                <div
+                                    key={file.id}
+                                    className={cn(
+                                        "flex items-center gap-1.5 px-2 py-1 rounded-md text-sm",
+                                        file.status === FileProcessingStatus.ERROR
+                                            ? "bg-destructive/10 text-destructive"
+                                            : file.status === FileProcessingStatus.READY
+                                                ? "bg-success/10 text-success"
+                                                : "bg-attention/10 text-attention",
+                                    )}
                                 >
-                                    <HelpCircleIcon className="size-3 text-blue-400 dark:text-blue-500" />
-                                </VTooltip>
-                            </div>
-                            <div className="flex flex-wrap gap-2">
-                                {selectedDocuments.map((doc) => (
-                                    <div
-                                        key={doc.id}
-                                        className="flex items-center gap-1.5 px-2 py-1 bg-blue-100 dark:bg-blue-900/30 rounded-md text-sm text-blue-700 dark:text-blue-300"
+                                    <FileTextIcon className={cn(
+                                        "size-3.5",
+                                        (file.status === FileProcessingStatus.UPLOADING || file.status === FileProcessingStatus.PROCESSING) && "animate-pulse",
+                                    )} />
+                                    <span className="max-w-[120px] truncate">{file.name}</span>
+                                    <span className="text-xs opacity-70">
+                                        {file.status === FileProcessingStatus.UPLOADING ? t('agent.uploading')
+                                            : file.status === FileProcessingStatus.PROCESSING ? t('agent.processing')
+                                            : file.status === FileProcessingStatus.ERROR ? t('agent.error')
+                                            : file.status === FileProcessingStatus.READY ? t('agent.ready') : file.status}
+                                    </span>
+                                </div>
+                            ))}
+                            {/* Uploaded files (with remove button) */}
+                            {uploadedFiles.map((file) => (
+                                <div
+                                    key={file.id}
+                                    className="flex items-center gap-1.5 px-2 py-1 bg-success/10 text-success rounded-md text-sm"
+                                >
+                                    <FileTextIcon className="size-3.5" />
+                                    <span className="max-w-[120px] truncate">{file.name}</span>
+                                    {onRemoveFile && (
+                                        <button
+                                            onClick={() => onRemoveFile(file.id)}
+                                            className="ml-1 p-0.5 hover:bg-success/20 rounded"
+                                        >
+                                            <XIcon className="size-3" />
+                                        </button>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Selected documents section — always visible regardless of hideFileUpload */}
+            {selectedDocuments.length > 0 && (
+                <div className="mb-3">
+                    <div className="flex items-center gap-1 mb-1">
+                        <span className="text-xs font-medium text-blue-600 dark:text-blue-400">
+                            {t('agent.documentAttachments')}
+                        </span>
+                        <VTooltip
+                            description={t('agent.documentAttachmentsDescription')}
+                            placement="top"
+                            size="md"
+                        >
+                            <HelpCircleIcon className="size-3 text-blue-400 dark:text-blue-500" />
+                        </VTooltip>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                        {selectedDocuments.map((doc) => (
+                            <div
+                                key={doc.id}
+                                className="flex items-center gap-1.5 px-2 py-1 bg-blue-100 dark:bg-blue-900/30 rounded-md text-sm text-blue-700 dark:text-blue-300"
+                            >
+                                <FileTextIcon className="size-3.5" />
+                                <span className="max-w-[120px] truncate">{doc.name}</span>
+                                {onRemoveDocument && (
+                                    <button
+                                        onClick={() => onRemoveDocument(doc.id)}
+                                        className="ml-1 p-0.5 hover:bg-blue-200 dark:hover:bg-blue-800 rounded"
                                     >
-                                        <FileTextIcon className="size-3.5" />
-                                        <span className="max-w-[120px] truncate">{doc.name}</span>
-                                        {onRemoveDocument && (
-                                            <button
-                                                onClick={() => onRemoveDocument(doc.id)}
-                                                className="ml-1 p-0.5 hover:bg-blue-200 dark:hover:bg-blue-800 rounded"
-                                            >
-                                                <XIcon className="size-3" />
-                                            </button>
-                                        )}
-                                    </div>
-                                ))}
+                                        <XIcon className="size-3" />
+                                    </button>
+                                )}
                             </div>
-                        </div>
-                    )}
+                        ))}
+                    </div>
                 </div>
             )}
 
@@ -443,7 +443,7 @@ export default function MessageInput({
                             className="text-xs"
                         >
                             <UploadIcon className="size-3.5 mr-1.5" />
-                            Upload
+                            {t('agent.upload')}
                         </Button>
                     )}
                     {renderDocumentSearch && (
@@ -455,7 +455,12 @@ export default function MessageInput({
                             className="text-xs"
                         >
                             <FileTextIcon className="size-3.5 mr-1.5" />
-                            Search Documents
+                            {t('agent.searchDocuments')}
+                            {selectedDocuments.length > 0 && (
+                                <span className="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-blue-600 text-white">
+                                    {selectedDocuments.length}
+                                </span>
+                            )}
                         </Button>
                     )}
                 </div>
@@ -471,7 +476,7 @@ export default function MessageInput({
                         onChange={(e) => setValue(e.target.value)}
                         onPaste={handlePaste}
                         disabled={disabled}
-                        placeholder={isStreaming ? "Agent is working... (Esc Esc to stop)" : (onFilesSelected ? "Ask anything... (drop or paste files)" : placeholder)}
+                        placeholder={isStreaming ? t('agent.agentWorking') : (onFilesSelected ? t('agent.askAnything') : resolvedPlaceholder)}
                         rows={2}
                         style={{ minHeight: '60px', maxHeight: '200px' }}
                     />
@@ -481,7 +486,7 @@ export default function MessageInput({
                             className="rounded-full"
                             disabled={!isCompleted}
                             onClick={() => setIsObjectModalOpen(true)}
-                            alt="Link Object"
+                            alt={t('agent.linkObject')}
                         >
                             <PaperclipIcon className="size-4" />
                         </Button>
@@ -494,19 +499,19 @@ export default function MessageInput({
                         onClick={handleStop}
                         disabled={isStopping}
                         className="px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white"
-                        title="Stop the agent"
+                        title={t('agent.stopAgent')}
                     >
-                        {isStopping ? <Spinner size="sm" className="mr-2" /> : <StopCircleIcon className="size-4 mr-2" />} <span>Stop</span>
+                        {isStopping ? <Spinner size="sm" className="mr-2" /> : <StopCircleIcon className="size-4 mr-2" />} <span>{t('agent.stop')}</span>
                     </Button>
                 ) : (
                     <Button
                         onClick={handleSend}
                         disabled={disabled || isSending || !value.trim() || hasProcessingFiles}
                         className="px-4 py-2.5"
-                        title={hasProcessingFiles ? "Wait for files to finish processing" : undefined}
+                        title={hasProcessingFiles ? t('agent.waitForFiles') : undefined}
                     >
                         {isSending ? <Spinner size="sm" className="mr-2" /> : <SendIcon className="size-4 mr-2" />}
-                        <span>{hasProcessingFiles ? "Processing..." : "Send"}</span>
+                        <span>{hasProcessingFiles ? t('agent.processing') : t('agent.send')}</span>
                     </Button>
                 )}
             </div>
@@ -515,13 +520,13 @@ export default function MessageInput({
                 {activeTaskCount > 0 ? (
                     <div className="flex items-center justify-center">
                         <Activity className="h-3 w-3 mr-1 text-attention" />
-                        <span>Agent has {activeTaskCount} active workstream{activeTaskCount !== 1 ? 's' : ''} running</span>
+                        <span>{t('agent.activeWorkstreams', { count: activeTaskCount })}</span>
                     </div>
                 ) : isStreaming
-                    ? "Agent is working... Press Esc twice or click Stop to interrupt"
+                    ? t('agent.agentWorkingStop')
                     : disabled
-                        ? "Agent is processing, you can continue once it completes..."
-                        : "Enter to send • Shift+Enter for new line"}
+                        ? t('agent.agentProcessing')
+                        : t('agent.enterToSend')}
             </div>
 
             {/* Object Selection Modal */}
@@ -530,7 +535,7 @@ export default function MessageInput({
                 onClose={() => setIsObjectModalOpen(false)}
                 className='min-w-[60vw]'
             >
-                <ModalTitle>Link Object</ModalTitle>
+                <ModalTitle>{t('agent.linkObject')}</ModalTitle>
                 <ModalBody className="pb-6">
                     <SelectDocument onChange={handleObjectSelect} />
                 </ModalBody>

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

@@ -4,8 +4,9 @@ import { NavLink } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
 import { MarkdownRenderer } from "@vertesia/ui/widgets";
 import dayjs from "dayjs";
-import { AlertCircle, Bot, CheckCircle, Clock, CopyIcon, Download, Info, Layers, type LucideIcon, MessageSquare, User } from "lucide-react";
+import { AlertCircle, Bot, CheckCircle, Clock, CopyIcon, Download, Info, Layers, type LucideIcon, MessageSquare, RefreshCcw, User } from "lucide-react";
 import React, { useEffect, useState, useMemo, memo, useRef } from "react";
+import { useUITranslation } from '../../../../i18n/index.js';
 import { PulsatingCircle } from "../AnimatedThinkingDots";
 import { AskUserWidget } from "../AskUserWidget";
 import { useImageLightbox } from "../ImageLightbox";
@@ -110,6 +111,12 @@ function mergeClassNames(
     return result as MessageItemClassNames;
 }
 
+/** Map sender labels from MESSAGE_STYLES to i18n keys where applicable. */
+const SENDER_I18N_KEYS: Record<string, string> = {
+    Ready: 'agent.ready',
+    Error: 'agent.error',
+};
+
 /** Per-message-type visual config (border, bg, icon color, sender label, icon component, optional className overrides). */
 export interface MessageStyleConfig extends MessageItemClassNames {
     borderColor: string;
@@ -147,6 +154,7 @@ export const MESSAGE_STYLES: Record<AgentMessageType | 'default', MessageStyleCo
     [AgentMessageType.SYSTEM]: { borderColor: 'border-l-muted', iconColor: 'text-muted', sender: 'System', Icon: Info },
     [AgentMessageType.STREAMING_CHUNK]: { borderColor: 'border-l-info', iconColor: 'text-info', sender: 'Agent', Icon: Bot },
     [AgentMessageType.BATCH_PROGRESS]: { borderColor: 'border-l-blue-500', iconColor: 'text-blue-600 dark:text-blue-400', sender: 'Batch', Icon: Layers },
+    [AgentMessageType.RESTARTING]: { borderColor: 'border-l-attention', iconColor: 'text-attention', sender: 'Restarting', Icon: RefreshCcw },
     default: { borderColor: 'border-l-muted', iconColor: 'text-muted', sender: 'Agent', Icon: Bot },
 };
 
@@ -169,6 +177,7 @@ function MessageItemComponent({
     CollectionLinkComponent,
 }: MessageItemProps) {
     const [showDetails, setShowDetails] = useState(false);
+    const { t } = useUITranslation();
     const { client } = useUserSession();
     const toast = useToast();
     const urlCache = useArtifactUrlCache();
@@ -252,7 +261,7 @@ function MessageItemComponent({
         navigator.clipboard.writeText(textToCopy).then(() => {
             toast({
                 status: "success",
-                title: "Copied to clipboard",
+                title: t('agent.copiedToClipboard'),
                 duration: 2000,
             });
         });
@@ -265,7 +274,7 @@ function MessageItemComponent({
         if (!content.trim()) {
             toast({
                 status: "error",
-                title: "No content to export",
+                title: t('agent.noContentToExport'),
                 duration: 2000,
             });
             return;
@@ -348,6 +357,14 @@ function MessageItemComponent({
         // Handle string content with markdown - content is already processed
         const runId = (message as any).workflow_run_id as string | undefined;
 
+        if (!runId && typeof content === 'string' && content.includes('artifact:')) {
+            console.warn('[MessageItem] message contains artifact references but workflow_run_id is missing!', {
+                type: message.type,
+                workflow_run_id: (message as any).workflow_run_id,
+                hasArtifact: content.includes('artifact:'),
+            });
+        }
+
         return (
             <div className={cn("vprose prose prose-slate dark:prose-invert prose-p:leading-relaxed prose-p:my-3 prose-headings:font-semibold prose-headings:tracking-normal prose-headings:mt-6 prose-headings:mb-3 prose-h1:text-xl prose-h2:text-lg prose-h3:text-base prose-li:my-1 prose-ul:my-3 prose-ol:my-3 prose-table:my-5 prose-pre:my-4 prose-hr:my-6 max-w-none text-[15px] break-words", resolvedStyle.proseClassName)} style={{ overflowWrap: 'anywhere' }}>
                 <MarkdownRenderer
@@ -462,7 +479,7 @@ function MessageItemComponent({
                         <div className={cn(showPulsatingCircle ? "animate-fadeIn" : "", resolvedStyle.iconClassName)}>
                             {renderIcon()}
                         </div>
-                        <span className={cn("text-xs font-medium text-muted", resolvedStyle.senderClassName)}>{resolvedStyle.sender}</span>
+                        <span className={cn("text-xs font-medium text-muted", resolvedStyle.senderClassName)}>{SENDER_I18N_KEYS[resolvedStyle.sender] ? t(SENDER_I18N_KEYS[resolvedStyle.sender]) : resolvedStyle.sender}</span>
                         {workstreamId !== "main" && workstreamId !== "all" && (
                             <Badge variant="default" className="text-xs text-muted ml-1">
                                 {workstreamId}
@@ -477,7 +494,7 @@ function MessageItemComponent({
                             variant="ghost" size="xs"
                             onClick={copyToClipboard}
                             className="text-muted/50 hover:text-muted h-5 w-5 p-0"
-                            title="Copy message"
+                            title={t('agent.copyMessage')}
                         >
                             <CopyIcon className="size-3" />
                         </Button>
@@ -487,7 +504,7 @@ function MessageItemComponent({
                                     <Button
                                         variant="ghost" size="xs"
                                         className="text-muted/50 hover:text-muted h-5 w-5 p-0"
-                                        title="Export message"
+                                        title={t('agent.exportMessage')}
                                         disabled={isExportingFile}
                                     >
                                         <Download className={`size-3 ${isExportingFile ? 'animate-pulse' : ''}`} />
@@ -495,10 +512,10 @@ function MessageItemComponent({
                                 }
                             >
                                 <MenuItem onClick={() => exportToFormat(MarkdownRenditionFormat.pdf)}>
-                                    Export as PDF
+                                    {t('agent.exportAsPdf')}
                                 </MenuItem>
                                 <MenuItem onClick={() => exportToFormat(MarkdownRenditionFormat.docx)}>
-                                    Export as Word
+                                    {t('agent.exportAsWord')}
                                 </MenuItem>
                             </Dropdown>
                         )}
@@ -586,7 +603,7 @@ function MessageItemComponent({
                             onClick={() => setShowDetails(!showDetails)}
                             className="text-[11px] text-muted flex items-center"
                         >
-                            {showDetails ? "Hide" : "Show"} details
+                            {showDetails ? t('agent.hideDetails') : t('agent.showDetails')}
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 className={`h-3 w-3 ml-1 transition-transform ${showDetails ? "rotate-180" : ""}`}

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

@@ -1,5 +1,6 @@
 import { Plan } from "@vertesia/common";
 import { AlertCircle, CheckCircle, Circle, Clock } from "lucide-react";
+import { useUITranslation } from '../../../../i18n/index.js';
 
 interface PlanPanelProps {
     plan: Plan;
@@ -9,11 +10,12 @@ interface PlanPanelProps {
 
 // todo: remove this file
 export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPanelProps) {
+    const { t } = useUITranslation();
     if (!isVisible) return null;
 
     return (
         <div className="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 p-3 shadow-sm transition-all duration-300 ease-in-out transform">
-            <div className="text-xs font-medium mb-2 text-gray-800 dark:text-gray-200">Agent Plan</div>
+            <div className="text-xs font-medium mb-2 text-gray-800 dark:text-gray-200">{t('agent.agentPlan')}</div>
 
             {/* Plan Steps */}
             {plan.plan && plan.plan.length > 0 ? (
@@ -59,14 +61,14 @@ export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPan
             ) : (
                 <div className="text-xs text-gray-500 dark:text-gray-400 italic flex items-center">
                     <AlertCircle className="h-3.5 w-3.5 mr-1.5 text-amber-500" />
-                    No plan detected yet
+                    {t('agent.noPlanDetected')}
                 </div>
             )}
 
             {/* Workstream Status Summary */}
             {workstreamStatus.size > 1 && (
                 <div className="mt-3 pt-2 border-t border-gray-200 dark:border-gray-700">
-                    <div className="text-xs font-medium mb-1.5 text-gray-800 dark:text-gray-200">Workstreams</div>
+                    <div className="text-xs font-medium mb-1.5 text-gray-800 dark:text-gray-200">{t('agent.workstreams')}</div>
                     <div className="grid grid-cols-2 gap-1.5">
                         {Array.from(workstreamStatus.entries())
                             // Filter to only show real workstreams (main or those with valid names - not numeric IDs)
@@ -87,20 +89,20 @@ export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPan
                             .map(([id, status]) => {
                                 let StatusIcon = Circle;
                                 let statusColor = "text-gray-400";
-                                let statusText = "Pending";
+                                let statusText = t('agent.pending');
 
                                 if (status === "in_progress") {
                                     StatusIcon = Clock;
                                     statusColor = "text-blue-500";
-                                    statusText = "In Progress";
+                                    statusText = t('agent.inProgress');
                                 } else if (status === "completed") {
                                     StatusIcon = CheckCircle;
                                     statusColor = "text-green-500";
-                                    statusText = "Completed";
+                                    statusText = t('agent.completed');
                                 }
 
                                 // Format workstream IDs for better display
-                                const displayId = id === "main" ? "Main" : id;
+                                const displayId = id === "main" ? t('agent.main') : id;
 
                                 return (
                                     <div key={id} className="flex items-center">

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

@@ -1,5 +1,6 @@
 import { Plan } from "@vertesia/common";
 import { AlertCircle, CheckCircle, Circle, Clock } from "lucide-react";
+import { useUITranslation } from '../../../../i18n/index.js';
 import SlideInPanel from "./SlideInPanel";
 
 interface PlanPanelProps {
@@ -10,12 +11,13 @@ interface PlanPanelProps {
 }
 
 export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClose }: PlanPanelProps) {
+    const { t } = useUITranslation();
     return (
         plan && (
-            <SlideInPanel isOpen={isOpen} onClose={onClose} title="Agent Plan">
+            <SlideInPanel isOpen={isOpen} onClose={onClose} title={t('agent.agentPlan')}>
                 {/* Plan Summary */}
                 <div className="mb-4 p-3 bg-info rounded-md border border-info">
-                    <div className="text-sm font-medium text-info mb-1">Plan Progress</div>
+                    <div className="text-sm font-medium text-info mb-1">{t('agent.planProgress')}</div>
                     <div className="flex items-center gap-2">
                         <div className="w-full bg-muted rounded-full h-2.5">
                             <div
@@ -45,7 +47,7 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                 {/* Detailed Plan Steps */}
                 <div className="rounded-md border border-muted">
                     <div className="p-3 border-b border-muted bg-muted/50">
-                        <div className="font-medium text-sm">Step-by-Step Plan</div>
+                        <div className="font-medium text-sm">{t('agent.stepByStepPlan')}</div>
                     </div>
 
                     <div className="divide-y divide-gray-100 dark:divide-gray-800">
@@ -96,10 +98,10 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                                                         }`}
                                                 >
                                                     {status === "completed"
-                                                        ? "Completed"
+                                                        ? t('agent.completed')
                                                         : status === "in_progress"
-                                                            ? "In Progress"
-                                                            : "Pending"}
+                                                            ? t('agent.inProgress')
+                                                            : t('agent.pending')}
                                                 </span>
                                             </div>
                                         </div>
@@ -109,8 +111,8 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                         ) : (
                             <div className="p-4 text-center text-gray-500 dark:text-gray-400 italic">
                                 <AlertCircle className="h-5 w-5 mx-auto mb-2 text-amber-500" />
-                                <p>No plan has been detected yet</p>
-                                <p className="text-xs mt-1">Plans will appear here when the agent creates one</p>
+                                <p>{t('agent.noPlanDetected')}</p>
+                                <p className="text-xs mt-1">{t('agent.plansWillAppear')}</p>
                             </div>
                         )}
                     </div>
@@ -120,7 +122,7 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                 {workstreamStatus.size > 1 && (
                     <div className="mt-4 rounded-md border border-gray-200 dark:border-gray-800">
                         <div className="p-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
-                            <div className="font-medium text-sm">Workstreams</div>
+                            <div className="font-medium text-sm">{t('agent.workstreams')}</div>
                         </div>
                         <div className="p-3">
                             <div className="grid grid-cols-1 gap-2">
@@ -144,22 +146,22 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                                         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-blue-500";
                                             statusBg = "bg-blue-100 dark:bg-blue-800/30";
-                                            statusText = "In Progress";
+                                            statusText = t('agent.inProgress');
                                         } else if (status === "completed") {
                                             StatusIcon = CheckCircle;
                                             statusColor = "text-green-500";
                                             statusBg = "bg-green-100 dark:bg-green-800/30";
-                                            statusText = "Completed";
+                                            statusText = t('agent.completed');
                                         }
 
                                         // Format workstream IDs for better display
-                                        const displayId = id === "main" ? "Main Workstream" : id;
+                                        const displayId = id === "main" ? t('agent.mainWorkstream') : id;
 
                                         return (
                                             <div key={id} className={`flex items-center p-2 rounded ${statusBg}`}>