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

package/src/features/agent/chat/ModernAgentOutput/utils.test.ts

@@ -0,0 +1,229 @@
+import { AgentMessage, AgentMessageType } from "@vertesia/common";
+import { describe, expect, it } from "vitest";
+import { getSlidingViewMessageBuckets, groupMessagesWithStreaming, isToolActivityMessage, mergeConsecutiveToolGroups, shouldCollapseAdjacentRenderedMessage } from "./utils";
+
+function makeMessage(overrides: Partial<AgentMessage>): AgentMessage {
+    return {
+        timestamp: 0,
+        workflow_run_id: "run-1",
+        type: AgentMessageType.THOUGHT,
+        message: "",
+        ...overrides,
+    };
+}
+
+describe("ModernAgentOutput utils - tool preamble behavior", () => {
+    it("treats tool preamble thoughts as tool activity", () => {
+        const preamble = makeMessage({
+            message: "I will now call tools",
+            details: {
+                display_role: "tool_preamble",
+                tools: ["search_documents"],
+            },
+        });
+
+        expect(isToolActivityMessage(preamble)).toBe(true);
+    });
+
+    it("groups a single tool preamble into a tool_group (not a standalone message)", () => {
+        const preamble = makeMessage({
+            timestamp: 1000,
+            message: "I will now call tools",
+            details: {
+                display_role: "tool_preamble",
+                tools: ["search_documents"],
+            },
+        });
+
+        const grouped = mergeConsecutiveToolGroups(groupMessagesWithStreaming([preamble], new Map()));
+
+        expect(grouped).toHaveLength(1);
+        expect(grouped[0].type).toBe("tool_group");
+        if (grouped[0].type === "tool_group") {
+            expect(grouped[0].messages).toHaveLength(1);
+            expect(grouped[0].messages[0].details?.display_role).toBe("tool_preamble");
+        }
+    });
+
+    it("keeps preamble and tool-call thought in the same activity tool group", () => {
+        const activityGroupId = "activity-1";
+        const preamble = makeMessage({
+            timestamp: 1000,
+            message: "Let me check available docs before answering.",
+            details: {
+                display_role: "tool_preamble",
+                tools: ["list-assistant-knowledge"],
+                activity_group_id: activityGroupId,
+            },
+        });
+        const toolCall = makeMessage({
+            timestamp: 1010,
+            message: "Searching for all knowledge documents available",
+            details: {
+                tool: "list-assistant-knowledge",
+                tool_status: "running",
+                activity_group_id: activityGroupId,
+            },
+        });
+
+        const grouped = mergeConsecutiveToolGroups(groupMessagesWithStreaming([preamble, toolCall], new Map()));
+
+        expect(grouped).toHaveLength(1);
+        expect(grouped[0].type).toBe("tool_group");
+        if (grouped[0].type === "tool_group") {
+            expect(grouped[0].messages).toHaveLength(2);
+            expect(grouped[0].messages[0].details?.display_role).toBe("tool_preamble");
+            expect(grouped[0].messages[1].details?.tool).toBe("list-assistant-knowledge");
+        }
+    });
+});
+
+describe("ModernAgentOutput utils - sliding view thinking", () => {
+    it("does not surface stale thinking after newer important messages", () => {
+        const thinking = makeMessage({
+            timestamp: 1000,
+            message: "Now let me update the benchmark doc, then launch all workstreams.",
+            type: AgentMessageType.THOUGHT,
+        });
+        const answer = makeMessage({
+            timestamp: 2000,
+            message: "All 10 workstreams are now running.",
+            type: AgentMessageType.ANSWER,
+        });
+
+        const result = getSlidingViewMessageBuckets([thinking, answer], false, false);
+
+        expect(result.importantMessages).toEqual([answer]);
+        expect(result.recentThinking).toEqual([]);
+    });
+
+    it("keeps the newest thinking when nothing more important has happened yet", () => {
+        const question = makeMessage({
+            timestamp: 1000,
+            message: "Start the benchmark.",
+            type: AgentMessageType.QUESTION,
+        });
+        const thinking = makeMessage({
+            timestamp: 2000,
+            message: "Launching the workstreams now.",
+            type: AgentMessageType.THOUGHT,
+        });
+
+        const result = getSlidingViewMessageBuckets([question, thinking], false, false);
+
+        expect(result.importantMessages).toEqual([question]);
+        expect(result.recentThinking).toEqual([thinking]);
+    });
+});
+
+describe("ModernAgentOutput utils - streamed deduplication", () => {
+    it("skips a stale streaming item once an equivalent streamed answer is persisted", () => {
+        const answer = makeMessage({
+            timestamp: 2000,
+            type: AgentMessageType.ANSWER,
+            message: "Here is the final synthesis.",
+            details: {
+                streamed: true,
+            },
+        });
+
+        const grouped = groupMessagesWithStreaming(
+            [answer],
+            new Map([
+                ["stream-1", {
+                    text: "Here is the final synthesis.",
+                    startTimestamp: 1000,
+                    workstreamId: "main",
+                }],
+            ]),
+        );
+
+        expect(grouped).toHaveLength(1);
+        expect(grouped[0].type).toBe("single");
+    });
+
+    it("skips a stale streaming item when the persisted message matches by activity id", () => {
+        const answer = makeMessage({
+            timestamp: 2000,
+            type: AgentMessageType.ANSWER,
+            message: "Different final text",
+            details: {
+                activity_id: "activity-1",
+            },
+        });
+
+        const grouped = groupMessagesWithStreaming(
+            [answer],
+            new Map([
+                ["activity-1", {
+                    text: "partial text",
+                    startTimestamp: 1000,
+                    workstreamId: "main",
+                    activityId: "activity-1",
+                }],
+            ]),
+        );
+
+        expect(grouped).toHaveLength(1);
+        expect(grouped[0].type).toBe("single");
+    });
+});
+
+describe("ModernAgentOutput utils - adjacent rendered deduplication", () => {
+    it("collapses adjacent answer and complete messages with the same text", () => {
+        const previous = makeMessage({
+            timestamp: 1000,
+            type: AgentMessageType.ANSWER,
+            message: "Final answer",
+            workstream_id: "main",
+        });
+        const current = makeMessage({
+            timestamp: 1500,
+            type: AgentMessageType.COMPLETE,
+            message: "Final answer",
+            workstream_id: "main",
+        });
+
+        expect(shouldCollapseAdjacentRenderedMessage(previous, current)).toBe(true);
+    });
+
+    it("collapses adjacent streamed thought and answer messages with the same text", () => {
+        const previous = makeMessage({
+            timestamp: 1000,
+            type: AgentMessageType.THOUGHT,
+            message: "Synthesizing results",
+            workstream_id: "roundtable",
+            details: {
+                streamed: true,
+            },
+        });
+        const current = makeMessage({
+            timestamp: 1200,
+            type: AgentMessageType.ANSWER,
+            message: "Synthesizing results",
+            workstream_id: "roundtable",
+            details: {
+                streamed: true,
+            },
+        });
+
+        expect(shouldCollapseAdjacentRenderedMessage(previous, current)).toBe(true);
+    });
+
+    it("keeps repeated content when it is from a different workstream", () => {
+        const previous = makeMessage({
+            timestamp: 1000,
+            type: AgentMessageType.ANSWER,
+            message: "Same text",
+            workstream_id: "alpha",
+        });
+        const current = makeMessage({
+            timestamp: 1200,
+            type: AgentMessageType.COMPLETE,
+            message: "Same text",
+            workstream_id: "beta",
+        });
+
+        expect(shouldCollapseAdjacentRenderedMessage(previous, current)).toBe(false);
+    });
+});

package/src/features/agent/chat/ModernAgentOutput/utils.ts

@@ -28,91 +28,28 @@ export const DONE_STATES = [
 export function isInProgress(messages: AgentMessage[]) {
     if (!messages.length) return true;
 
-    // First, group messages by workstream
-    const workstreamMessages = new Map<string, AgentMessage[]>();
-
-    messages.forEach((message) => {
-        const workstreamId = getWorkstreamId(message);
-        if (!workstreamMessages.has(workstreamId)) {
-            workstreamMessages.set(workstreamId, []);
-        }
-        workstreamMessages.get(workstreamId)!.push(message);
-    });
-
-    // Log all workstreams we found for debugging
-    console.log("[isInProgress] Workstreams found:", Array.from(workstreamMessages.keys()));
-
-    // If there's only one workstream and it's not "main", we should treat it as the main one
-    // This handles cases where a conversation might not have an explicit main workstream
-    if (workstreamMessages.size === 1 && !workstreamMessages.has("main")) {
-        const onlyWorkstreamId = workstreamMessages.keys().next().value || "unknown";
-        console.log(`[isInProgress] Only one workstream found (${onlyWorkstreamId}), treating as main`);
-
-        const onlyWorkstreamMsgs = workstreamMessages.get(onlyWorkstreamId)!;
-        const lastMessage = onlyWorkstreamMsgs[onlyWorkstreamMsgs.length - 1];
-
-        console.log(`[isInProgress] Last message type in only workstream: ${lastMessage.type}`);
-
-        // Check if this single workstream is completed
-        if (!DONE_STATES.includes(
-            lastMessage.type
-        )) {
-            console.log("[isInProgress] Only workstream is still in progress");
-            return true;
-        }
-
-        console.log("[isInProgress] Only workstream is completed");
-        return false;
-    }
-
-    // Check the main workstream if it exists
-    if (workstreamMessages.has("main")) {
-        const mainWorkstreamMsgs = workstreamMessages.get("main")!;
-
-        // If there are no messages in the main workstream, the conversation is still in progress
-        if (mainWorkstreamMsgs.length === 0) {
-            console.log("[isInProgress] Main workstream exists but has no messages, still in progress");
-            return true;
-        }
-
-        // Check if the main workstream is completed
-        const lastMainMessage = mainWorkstreamMsgs[mainWorkstreamMsgs.length - 1];
-        console.log(`[isInProgress] Last message type in main workstream: ${lastMainMessage.type}`);
-
-        if (!DONE_STATES.includes(
-            lastMainMessage.type
-        )) {
-            console.log("[isInProgress] Main workstream is still in progress");
-            return true;
-        }
-
-        console.log("[isInProgress] Main workstream is completed");
-        return false;
-    }
-
-    // If we get here, there are multiple workstreams but no "main" workstream
-    // We'll keep the conversation active if any workstream is still active
-    console.log("[isInProgress] Multiple workstreams but no main, checking if any are still active");
-
-    for (const [workstreamId, msgs] of workstreamMessages.entries()) {
-        if (msgs.length > 0) {
-            const lastMessage = msgs[msgs.length - 1];
-            if (!DONE_STATES.includes(
-                lastMessage.type
-            )) {
-                console.log(`[isInProgress] Workstream ${workstreamId} is still active`);
-                return true;
-            }
-        }
+    // Only the main workstream determines whether the conversation is in progress.
+    // Child workstream COMPLETE/IDLE messages must not flip this flag.
+    const mainMessages = messages.filter(m => getWorkstreamId(m) === 'main');
+
+    // If there are no main workstream messages yet, check if there's exactly one
+    // workstream — treat it as main (handles single-workstream conversations).
+    if (mainMessages.length === 0) {
+        const lastMessage = messages[messages.length - 1];
+        return !DONE_STATES.includes(lastMessage.type);
     }
 
-    console.log("[isInProgress] All workstreams are completed");
-    return false;
+    const lastMainMessage = mainMessages[mainMessages.length - 1];
+    return !DONE_STATES.includes(lastMainMessage.type);
 }
 
 export const formatRelative = (ts: number | string) =>
     typeof ts === "number" ? dayjs(ts).fromNow() : dayjs(new Date(ts)).fromNow();
 
+function getTimestampMs(timestamp: number | string): number {
+    return typeof timestamp === "number" ? timestamp : new Date(timestamp).getTime();
+}
+
 /**
  * Extract the workstream ID from a message
  * @param message The agent message to analyze
@@ -137,6 +74,65 @@ export function getWorkstreamId(message: AgentMessage): string {
     return "main";
 }
 
+/**
+ * Returns the message buckets used by the sliding conversation view.
+ * Generic thinking should only appear when it is still the newest relevant activity.
+ */
+export function getSlidingViewMessageBuckets(
+    messages: AgentMessage[],
+    isCompleted: boolean,
+    hasStreaming: boolean,
+): { importantMessages: AgentMessage[]; recentThinking: AgentMessage[] } {
+    const latestUserQuestionTimestamp = messages.reduce((max, msg) => {
+        if (msg.type !== AgentMessageType.QUESTION) return max;
+        return Math.max(max, getTimestampMs(msg.timestamp));
+    }, -Infinity);
+
+    const importantMessages = messages.filter((msg) =>
+        msg.type === AgentMessageType.ANSWER ||
+        msg.type === AgentMessageType.QUESTION ||
+        msg.type === AgentMessageType.COMPLETE ||
+        msg.type === AgentMessageType.IDLE ||
+        msg.type === AgentMessageType.REQUEST_INPUT ||
+        msg.type === AgentMessageType.TERMINATED ||
+        msg.type === AgentMessageType.ERROR ||
+        (msg.type === AgentMessageType.THOUGHT &&
+            (msg.details?.tool || msg.details?.tools || msg.details?.streamed || msg.details?.display_role === "tool_preamble"))
+    );
+
+    const latestImportantTimestamp = importantMessages.reduce((max, msg) => {
+        return Math.max(max, getTimestampMs(msg.timestamp));
+    }, -Infinity);
+
+    const recentThinking = !isCompleted && !hasStreaming
+        ? messages
+            .filter((msg) =>
+                msg.type === AgentMessageType.UPDATE ||
+                msg.type === AgentMessageType.PLAN ||
+                (msg.type === AgentMessageType.THOUGHT &&
+                    !msg.details?.tool &&
+                    !msg.details?.tools &&
+                    !msg.details?.streamed &&
+                    msg.details?.display_role !== "tool_preamble"))
+            .filter((msg) => {
+                const timestamp = getTimestampMs(msg.timestamp);
+
+                if (Number.isFinite(latestUserQuestionTimestamp) && timestamp < latestUserQuestionTimestamp) {
+                    return false;
+                }
+
+                if (Number.isFinite(latestImportantTimestamp) && timestamp < latestImportantTimestamp) {
+                    return false;
+                }
+
+                return true;
+            })
+            .slice(-1)
+        : [];
+
+    return { importantMessages, recentThinking };
+}
+
 /**
  * Get a map of workstream IDs to their completion status
  * @param messages List of agent messages
@@ -154,7 +150,8 @@ export function getWorkstreamStatusMap(messages: AgentMessage[]): Map<string, "p
             // Initialize all workstreams as pending
             statusMap.set(workstreamId, "pending");
         }
-        workstreamMessages.get(workstreamId)!.push(message);
+        const wsMessages = workstreamMessages.get(workstreamId);
+        wsMessages?.push(message);
     });
 
     // Log all workstreams found
@@ -195,10 +192,10 @@ export function getWorkstreamStatusMap(messages: AgentMessage[]): Map<string, "p
 // Helper function to get conversation URL - used by other components
 export async function getConversationUrl(
     vertesia: VertesiaClient,
-    workflowRunId: string,
+    agentRunId: string,
 ): Promise<string> {
-    return vertesia.files
-        .getDownloadUrl(`agents/${workflowRunId}/conversation.json`)
+    return vertesia.agents
+        .getArtifactUrl(agentRunId, 'conversation.json')
         .then((r) => r.url);
 }
 
@@ -218,6 +215,100 @@ export interface StreamingData {
     workstreamId?: string;
     isComplete?: boolean;
     startTimestamp: number;
+    activityId?: string;
+}
+
+function normalizeComparableText(text: unknown): string | undefined {
+    if (typeof text !== "string") return undefined;
+    const normalized = text.replace(/\r\n/g, "\n").trim();
+    return normalized || undefined;
+}
+
+function getMessageComparableText(message: AgentMessage): string | undefined {
+    return normalizeComparableText(message.message);
+}
+
+function isStreamReplacedByMessage(
+    streaming: StreamingData,
+    messages: AgentMessage[],
+): boolean {
+    const streamingText = normalizeComparableText(streaming.text);
+    if (!streamingText) return false;
+
+    const streamWorkstreamId = streaming.workstreamId || "main";
+
+    return messages.some((message) => {
+        const messageTimestamp = getTimestampMs(message.timestamp);
+        if (messageTimestamp < streaming.startTimestamp) return false;
+        if (getWorkstreamId(message) !== streamWorkstreamId) return false;
+
+        if (
+            streaming.activityId &&
+            message.details?.activity_id === streaming.activityId
+        ) {
+            return true;
+        }
+
+        if (
+            message.type !== AgentMessageType.THOUGHT &&
+            message.type !== AgentMessageType.ANSWER &&
+            message.type !== AgentMessageType.COMPLETE &&
+            message.type !== AgentMessageType.IDLE
+        ) {
+            return false;
+        }
+
+        if (!message.details?.streamed) return false;
+
+        return getMessageComparableText(message) === streamingText;
+    });
+}
+
+export function shouldCollapseAdjacentRenderedMessage(
+    previous: AgentMessage,
+    current: AgentMessage,
+): boolean {
+    if (getWorkstreamId(previous) !== getWorkstreamId(current)) return false;
+
+    const previousText = getMessageComparableText(previous);
+    const currentText = getMessageComparableText(current);
+    if (!previousText || previousText !== currentText) return false;
+
+    const previousTimestamp = getTimestampMs(previous.timestamp);
+    const currentTimestamp = getTimestampMs(current.timestamp);
+    if (currentTimestamp - previousTimestamp > 10_000) return false;
+
+    if (
+        previous.type === AgentMessageType.ANSWER &&
+        (current.type === AgentMessageType.COMPLETE || current.type === AgentMessageType.IDLE)
+    ) {
+        return true;
+    }
+
+    if (
+        previous.type === AgentMessageType.THOUGHT &&
+        (current.type === AgentMessageType.ANSWER ||
+            current.type === AgentMessageType.COMPLETE ||
+            current.type === AgentMessageType.IDLE) &&
+        (previous.details?.streamed || current.details?.streamed)
+    ) {
+        return true;
+    }
+
+    if (
+        previous.type === current.type &&
+        (previous.details?.streamed || current.details?.streamed) &&
+        (
+            current.type === AgentMessageType.THOUGHT ||
+            current.type === AgentMessageType.ANSWER ||
+            current.type === AgentMessageType.COMPLETE ||
+            current.type === AgentMessageType.IDLE
+        )
+    ) {
+        return true;
+    }
+
+    return false;
 }
 
 /**
@@ -240,6 +331,26 @@ export function isToolCallMessage(message: AgentMessage): boolean {
     return message.type === AgentMessageType.THOUGHT && !!message.details?.tool;
 }
 
+function isToolPreambleMessage(message: AgentMessage): boolean {
+    const details = message.details as { display_role?: string } | undefined;
+    return message.type === AgentMessageType.THOUGHT && details?.display_role === "tool_preamble";
+}
+
+/**
+ * Check if a message should be rendered as part of tool activity.
+ * Includes concrete tool calls plus tool preambles emitted before tool_use.
+ */
+export function isToolActivityMessage(message: AgentMessage): boolean {
+    if (isToolCallMessage(message)) return true;
+    if (message.type !== AgentMessageType.THOUGHT) return false;
+
+    const details = message.details as { display_role?: string; tools?: unknown } | undefined;
+    if (isToolPreambleMessage(message)) return true;
+    if (Array.isArray(details?.tools) && details.tools.length > 0) return true;
+
+    return false;
+}
+
 /**
  * Get the tool_run_id from a message's details, if present
  */
@@ -285,7 +396,7 @@ export function groupConsecutiveToolCalls(messages: AgentMessage[]): MessageGrou
 
     const flushToolGroup = () => {
         if (currentToolGroup.length > 0) {
-            if (currentToolGroup.length === 1) {
+            if (currentToolGroup.length === 1 && !isToolPreambleMessage(currentToolGroup[0])) {
                 // Single tool call - no need to group
                 groups.push({ type: 'single', message: currentToolGroup[0] });
             } else {
@@ -301,7 +412,7 @@ export function groupConsecutiveToolCalls(messages: AgentMessage[]): MessageGrou
     };
 
     for (const message of messages) {
-        if (isToolCallMessage(message)) {
+        if (isToolActivityMessage(message)) {
             currentToolGroup.push(message);
         } else {
             // Flush any pending tool group before adding non-tool message
@@ -316,13 +427,6 @@ export function groupConsecutiveToolCalls(messages: AgentMessage[]): MessageGrou
     return groups;
 }
 
-/**
- * Helper to get timestamp as number
- */
-function getTimestampMs(timestamp: number | string): number {
-    return typeof timestamp === "number" ? timestamp : new Date(timestamp).getTime();
-}
-
 /**
  * Group messages with streaming messages interleaved in chronological order
  * Messages with the same tool_iteration are grouped together (parallel tool calls)
@@ -376,8 +480,8 @@ export function groupMessagesWithStreaming(
                     firstTimestamp: getTimestampMs(message.timestamp),
                 });
             }
-            activityGroups.get(activityGroupId)!.messages.push(message);
-        } else if (isToolCallMessage(message)) {
+            activityGroups.get(activityGroupId)?.messages.push(message);
+        } else if (isToolActivityMessage(message)) {
             const toolIteration = getToolIteration(message);
             const toolRunId = getToolRunId(message);
 
@@ -389,7 +493,7 @@ export function groupMessagesWithStreaming(
                         firstTimestamp: getTimestampMs(message.timestamp)
                     });
                 }
-                iterationGroups.get(toolIteration)!.messages.push(message);
+                iterationGroups.get(toolIteration)?.messages.push(message);
             } else if (toolRunId) {
                 // Fallback: group by tool_run_id if no iteration
                 if (!toolRunGroups.has(toolRunId)) {
@@ -398,7 +502,7 @@ export function groupMessagesWithStreaming(
                         firstTimestamp: getTimestampMs(message.timestamp)
                     });
                 }
-                toolRunGroups.get(toolRunId)!.messages.push(message);
+                toolRunGroups.get(toolRunId)?.messages.push(message);
             } else {
                 // No tool_iteration or tool_run_id - will use consecutive grouping
                 standaloneMessages.push(message);
@@ -461,6 +565,7 @@ export function groupMessagesWithStreaming(
     streamingMessages.forEach((data, streamingId) => {
         // Skip empty streaming messages
         if (!data.text) return;
+        if (isStreamReplacedByMessage(data, messages)) return;
 
         // Filter by workstream if specified
         if (activeWorkstream && activeWorkstream !== "all") {
@@ -496,7 +601,7 @@ export function groupMessagesWithStreaming(
 
     const flushToolGroup = () => {
         if (currentToolGroup.length > 0) {
-            if (currentToolGroup.length === 1) {
+            if (currentToolGroup.length === 1 && !isToolPreambleMessage(currentToolGroup[0])) {
                 groups.push({ type: 'single', message: currentToolGroup[0] });
             } else {
                 groups.push({
@@ -575,7 +680,7 @@ export function groupMessagesWithStreaming(
                 toolRunId: item.toolRunId,
                 toolStatus: latestStatus
             });
-        } else if (isToolCallMessage(item.message)) {
+        } else if (isToolActivityMessage(item.message)) {
             // Standalone tool message - use consecutive grouping
             currentToolGroup.push(item.message);
         } else {

package/src/features/agent/chat/SlidingThinkingIndicator.tsx

@@ -2,6 +2,7 @@ import { AgentMessage, AgentMessageType } from "@vertesia/common";
 import { Button, cn } from "@vertesia/ui/core";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
+import { useUITranslation } from '../../../i18n/index.js';
 import { AnimatedThinkingDots, PulsatingCircle, PulsingMessageLoader } from "./AnimatedThinkingDots";
 import MessageItem from "./ModernAgentOutput/MessageItem";
 import { ThinkingMessages } from "./WaitingMessages";
@@ -28,6 +29,7 @@ export function SlidingThinkingIndicator({
     showDetails: externalShowDetails,
     onShowDetailsChange,
 }: SlidingThinkingIndicatorProps) {
+    const { t } = useUITranslation();
     // Use external state if provided, otherwise use internal state
     const [internalShowDetails, setInternalShowDetails] = useState(false);
 
@@ -275,15 +277,15 @@ export function SlidingThinkingIndicator({
                         variant="ghost"
                         onClick={() => setShowDetails(!showDetails)}
                         className="text-slate-500 hover:text-slate-700 flex items-center gap-1 text-xs"
-                        title={showDetails ? "Hide thinking details" : "Show all messages"}
+                        title={showDetails ? t('agent.hideThinkingDetails') : t('agent.showAllMessages')}
                     >
                         {showDetails ? (
                             <>
-                                <EyeOffIcon className="h-3 w-3" /> Hide details
+                                <EyeOffIcon className="h-3 w-3" /> {t('agent.hideDetails')}
                             </>
                         ) : (
                             <>
-                                <EyeIcon className="h-3 w-3" /> Show details
+                                <EyeIcon className="h-3 w-3" /> {t('agent.showDetails')}
                             </>
                         )}
                     </Button>