@vertesia/ui 0.79.0 → 0.80.0-dev-20251118

package/src/features/agent/PayloadBuilder.tsx

@@ -1,29 +1,33 @@
 import { AsyncExecutionResult, VertesiaClient } from "@vertesia/client";
-import { ExecutionEnvironmentRef, Interaction, mergePromptsSchema, PopulatedInteraction, supportsToolUse } from "@vertesia/common";
+import { AgentSearchScope, ExecutionEnvironmentRef, InCodeInteraction, mergeInCodePromptSchemas, supportsToolUse, WorkflowInteractionVars } from "@vertesia/common";
 import { JSONObject } from "@vertesia/json";
 import { useUserSession } from "@vertesia/ui/session";
 import Ajv, { ValidateFunction } from "ajv";
 import type { JSONSchema4 } from "json-schema";
 import React, { createContext, useContext, useEffect, useState } from "react";
 
-export interface ConversationWorkflowPayload {
-    interaction?: Interaction | undefined;
-    config: {
-        environment?: ExecutionEnvironmentRef | undefined;
-        model?: string;
-    }
-    data?: JSONObject | undefined,
-    tool_names: string[],
-}
 
-export class PayloadBuilder implements ConversationWorkflowPayload {
+// export interface ConversationWorkflowPayload {
+//     config: {
+//         environment?: ExecutionEnvironmentRef | undefined;
+//         model?: string;
+//     }
+//     data?: JSONObject | undefined,
+//     tool_names: string[],
+// }
+
+export class PayloadBuilder {
     _interactive: boolean = true;
     _debug_mode: boolean = false;
     _collection: string | undefined;
     _start: boolean = false;
     _preserveRunValues: boolean = false;
+    _interaction: InCodeInteraction | undefined;
+    _environment: ExecutionEnvironmentRef | undefined;
+    _model: string = '';
+    _tool_names: string[] = [];
+    _data: JSONObject | undefined;
 
-    payload: ConversationWorkflowPayload;
     private _interactionParamsSchema?: JSONSchema4 | null;
     private _inputValidator?: {
         validate: ValidateFunction;
@@ -31,12 +35,6 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
     };
 
     constructor(public vertesia: VertesiaClient, public updateState: (data: PayloadBuilder) => void) {
-        this.payload = {
-            config: {
-                model: '',
-            },
-            tool_names: [],
-        }
     }
 
     onStateChanged() {
@@ -47,7 +45,11 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
     clone() {
         const builder = new PayloadBuilder(this.vertesia, this.updateState);
         builder._interactionParamsSchema = this._interactionParamsSchema;
-        builder.payload = this.payload;
+        builder._interaction = this._interaction;
+        builder._data = this._data;
+        builder._environment = this._environment;
+        builder._model = this._model;
+        builder._tool_names = [...this._tool_names];
         builder._interactive = this._interactive;
         builder._debug_mode = this._debug_mode;
         builder._inputValidator = this._inputValidator;
@@ -91,31 +93,64 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
     }
 
     get search_scope() {
-        return this._collection ? "collection" : undefined;
+        return this._collection ? AgentSearchScope.Collection : undefined;
+    }
+
+    async restoreConversation(context: WorkflowInteractionVars) {
+        
+        // Handle version-specific interaction resolution
+        let interactionRef = context.interaction;
+        if (context.version) {
+            const objectIdRegex = /^[a-fA-F0-9]{24}$/;
+            if (!objectIdRegex.test(interactionRef)) {
+                // regex to check if interactionRef is an object id (24 hex characters), only append version if not an object id
+                interactionRef = `${interactionRef}@${context.version}`;
+            }
+        }
+        
+        const inter = await this.vertesia.interactions.catalog.resolve(interactionRef);
+        const envId = inter.runtime?.environment || context.config?.environment;
+        const model = context.config?.model;
+        const env = await (envId ?
+            this.vertesia.environments.retrieve(context.config?.environment)
+            :
+            Promise.resolve(undefined)
+        );
+
+
+        this.interactionParamsSchema = context.interactionParamsSchema ?? null;
+        // trigger the setter to update the corresponding interactionParamsSchema
+        this.interaction = inter;
+
+        this._tool_names = context.tool_names || [];
+        this._data = context.data;
+        this._interactive = context.interactive;
+        this._debug_mode = context.debug_mode ?? false;
+        this.collection = context.collection_id ?? undefined;
+
+        // we need to trigger the setter to deal with default models
+        this.environment = env;
+        if (model) {
+            this._model = model;
+        }
+
+        this.onStateChanged();
     }
 
     get interaction() {
-        return this.payload.interaction;
+        return this._interaction;
     }
-    set interaction(interaction: Interaction | undefined) {
-        if (interaction?.id !== this.payload.interaction?.id) {
-            this.payload.interaction = interaction;
-            this._interactionParamsSchema = mergePromptsSchema(this.interaction as PopulatedInteraction) as JSONSchema4;
+    set interaction(interaction: InCodeInteraction | undefined) {
+        if (interaction?.id !== this._interaction?.id) {
+            this._interaction = interaction;
+            // trigger the setter to update the onChange state
+            this.interactionParamsSchema = interaction ? mergeInCodePromptSchemas(interaction.prompts) as JSONSchema4 : undefined;
             // Reset the validator when schema changes
             this._inputValidator = undefined;
             if (interaction && !this._preserveRunValues) {
-                if (interaction.environment) {
-                    if (typeof interaction.environment === 'string') {
-                        this.vertesia.environments.retrieve(interaction.environment).then((environment) => this.environment = environment);
-                    } else {
-                        this.payload.config.environment = interaction.environment;
-                    }
-                }
-                if (interaction.model) {
-                    this.payload.config.model = interaction.model;
-                } else {
-                    this.payload.config.model = this.environment?.default_model && supportsToolUse(this.environment.default_model, this.environment.provider)
-                        ? this.environment.default_model : undefined;
+                if (interaction.runtime?.environment) {
+                    const envId = interaction.runtime.environment;
+                    this.vertesia.environments.retrieve(envId).then((environment) => this.environment = environment);
                 }
             }
             this.onStateChanged();
@@ -123,19 +158,19 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
     }
 
     get environment() {
-        return this.payload.config.environment;
+        return this._environment;
     }
     set environment(environment: ExecutionEnvironmentRef | undefined) {
-        if (environment?.id !== this.payload.config.environment?.id) {
-            this.payload.config.environment = environment;
+        if (environment?.id !== this._environment?.id) {
+            this._environment = environment;
             if (!this._preserveRunValues) {
                 // First try to use the interaction model, then the environment default model
-                const interactionModel = this.payload.interaction?.model;
+                const interactionModel = this.interaction?.runtime?.model;
                 if (interactionModel && environment && supportsToolUse(interactionModel, environment.provider)) {
-                    this.payload.config.model = interactionModel;
+                    this._model = interactionModel;
                 } else {
-                    this.payload.config.model = environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
-                        ? environment.default_model : undefined;
+                    this._model = environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
+                        ? environment.default_model : '';
                 }
             }
 
@@ -144,35 +179,31 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
     }
 
     get model() {
-        return this.payload.config.model;
+        return this._model;
     }
     set model(model: string | undefined) {
-        if (model !== this.payload.config.model) {
-            this.payload.config.model = model;
+        if (model !== this._model) {
+            this._model = model || '';
             this.onStateChanged();
         }
     }
 
     get tool_names() {
-        return this.payload.tool_names;
+        return this._tool_names;
     }
     set tool_names(tools: string[]) {
-        this.payload.tool_names = tools;
+        this._tool_names = tools;
         this.onStateChanged();
     }
 
     get data(): JSONObject | undefined {
-        return this.payload.data;
+        return this._data;
     }
     set data(prompt_data: JSONObject) {
-        this.payload.data = prompt_data;
+        this._data = prompt_data;
         this.onStateChanged();
     }
 
-    get config() {
-        return this.payload.config;
-    }
-
     set run(run: AsyncExecutionResult | { workflow_id: string; run_id: string }) {
         console.log("run", run);
         this.onStateChanged();
@@ -214,15 +245,11 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
         this._debug_mode = false;
         this._collection = undefined;
         this._preserveRunValues = false;
-        this.payload = {
-            config: {
-                environment: undefined,
-                model: '',
-            },
-            tool_names: [],
-            interaction: undefined,
-            data: undefined
-        };
+        this._model = '';
+        this._environment = undefined;
+        this._tool_names = [];
+        this._interaction = undefined;
+        this._data = undefined;
         this._interactionParamsSchema = null;
         this._inputValidator = undefined;
         this.model = undefined;
@@ -250,7 +277,7 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
             };
         }
 
-        const prompt_data = this.payload.data || {};
+        const prompt_data = this._data || {};
         const isValid = this._inputValidator.validate(prompt_data);
 
         if (!isValid) {

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

@@ -1,33 +1,17 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Bot, Cpu, SendIcon, XIcon } from "lucide-react";
+import { useUserSession } from "@vertesia/ui/session";
 import { AsyncExecutionResult, VertesiaClient } from "@vertesia/client";
-import {
-    AgentMessage,
-    AgentMessageType,
-    Plan,
-    UserInputSignal
-} from "@vertesia/common";
+import { AgentMessage, AgentMessageType, Plan, UserInputSignal } from "@vertesia/common";
 import { Button, MessageBox, Spinner, useToast } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
-import {
-    Bot,
-    Cpu,
-    SendIcon,
-    XIcon
-} from "lucide-react";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import {
-    AnimatedThinkingDots,
-    PulsatingCircle
-} from "./AnimatedThinkingDots";
+
+import { AnimatedThinkingDots, PulsatingCircle } from "./AnimatedThinkingDots";
 import AllMessagesMixed from "./ModernAgentOutput/AllMessagesMixed";
 import Header from "./ModernAgentOutput/Header";
 import MessageInput from "./ModernAgentOutput/MessageInput";
-import PlanPanel from "./ModernAgentOutput/PlanPanel";
-import {
-    getWorkstreamId,
-    insertMessageInTimeline,
-    isInProgress,
-} from "./ModernAgentOutput/utils";
+import { getWorkstreamId, insertMessageInTimeline, isInProgress } from "./ModernAgentOutput/utils";
 import { ThinkingMessages } from "./WaitingMessages";
+import InlineSlidingPlanPanel from "./ModernAgentOutput/InlineSlidingPlanPanel";
 
 type StartWorkflowFn = (
     initialMessage?: string,
@@ -177,7 +161,7 @@ function StartWorkflowView({
             <div className="flex items-center justify-between py-2 px-3 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
                 <div className="flex items-center space-x-2">
                     <div className="p-1">
-                        <Cpu className="h-3.5 w-3.5 text-gray-400 dark:text-gray-500" />
+                        <Cpu className="size-3.5 text-muted" />
                     </div>
                     <span className="font-medium text-sm text-gray-700 dark:text-gray-300">
                         {title}
@@ -193,7 +177,7 @@ function StartWorkflowView({
                         title="Close"
                         className="text-slate-500 hover:text-slate-700"
                     >
-                        <XIcon className="h-4 w-4" />
+                        <XIcon className="size-4" />
                     </Button>
                 )}
             </div>
@@ -239,7 +223,7 @@ function StartWorkflowView({
                         {isSending ? (
                             <Spinner size="sm" className="mr-1.5" />
                         ) : (
-                            <SendIcon className="h-3.5 w-3.5 mr-1.5" />
+                            <SendIcon className="size-3.5 mr-1.5" />
                         )}
                         {startButtonText}
                     </Button>
@@ -269,9 +253,7 @@ function ModernAgentConversationInner({
     const [inputValue, setInputValue] = useState<string>("");
     const [isSending, setIsSending] = useState(false);
     const [viewMode, setViewMode] = useState<"stacked" | "sliding">("sliding");
-    //TODO _setShowPlanPanel state not used
-    const [showPlanPanel, _setShowPlanPanel] = useState<boolean>(false);
-    const [showSlidingPanel, setShowSlidingPanel] = useState<boolean>(false);
+    const [showSlidingPanel, setShowSlidingPanel] = useState<boolean>(!isModal);
     // Keep track of multiple plans and their timestamps
     const [plans, setPlans] = useState<Array<{ plan: Plan; timestamp: number }>>(
         [],
@@ -602,103 +584,112 @@ function ModernAgentConversationInner({
     };
 
     return (
-        <div
-            className={`flex flex-col h-full min-h-0 ${isModal ? "rounded-lg overflow-hidden" : ""}`}
-        >
-            <Header
-                title={actualTitle}
-                isCompleted={isCompleted}
-                onClose={onClose}
-                isModal={isModal}
-                run={run}
-                viewMode={viewMode}
-                onViewModeChange={setViewMode}
-                showPlanPanel={showSlidingPanel}
-                hasPlan={plans.length > 0}
-                onTogglePlanPanel={() => {
-                    setShowSlidingPanel(!showSlidingPanel);
-                    // When opening the plan panel, mark that we've shown it
-                    if (!showSlidingPanel) {
-                        sessionStorage.setItem("plan-panel-shown", "true");
-                    }
-                }}
-                onDownload={downloadConversation}
-                onCopyRunId={copyRunId}
-                resetWorkflow={resetWorkflow}
-            />
-
-            {/* Inline Plan Panel - only shown when toggle is clicked */}
-            {showPlanPanel && !showSlidingPanel && plans.length > 0 && (
-                <PlanPanel
-                    plan={getActivePlan.plan}
-                    workstreamStatus={getActivePlan.workstreamStatus}
-                    isVisible={true}
-                />
-            )}
-
-            {messages.length === 0 && !isCompleted ? (
-                <div className="flex-1 flex flex-col items-center justify-center h-full text-center py-6 bg-white dark:bg-gray-900">
-                    <div className="bg-white dark:bg-slate-800 p-5 max-w-md border border-blue-200 dark:border-blue-900/50 rounded-lg shadow-sm">
-                        <div className="flex items-center space-x-3 mb-3">
-                            <PulsatingCircle size="sm" color="blue" />
-                            <div className="text-sm text-slate-600 dark:text-slate-300 font-medium">
-                                {ThinkingMessages[thinkingMessageIndex]}
-                            </div>
-                        </div>
-                        <div className="mt-4 flex justify-center">
-                            <AnimatedThinkingDots color="blue" className="mt-1" />
-                        </div>
-                    </div>
-                </div>
-            ) : (
-                <AllMessagesMixed
-                    messages={messages}
-                    bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
-                    viewMode={viewMode}
+        <div className="flex gap-2 h-full">
+            {/* Conversation Area - responsive width based on panel visibility */}
+            <div className={`flex flex-col h-full min-h-0 border-0 ${
+                showSlidingPanel ? 'lg:w-2/3 flex-1' : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`
+            }`}>
+                <Header
+                    title={actualTitle}
                     isCompleted={isCompleted}
-                    plan={getActivePlan.plan}
-                    workstreamStatus={getActivePlan.workstreamStatus}
+                    onClose={onClose}
+                    isModal={isModal}
+                    run={run}
+                    viewMode={viewMode}
+                    onViewModeChange={setViewMode}
                     showPlanPanel={showSlidingPanel}
+                    hasPlan={plans.length > 0}
                     onTogglePlanPanel={() => {
-                        console.log(
-                            "Toggle plan panel called, current state:",
-                            showSlidingPanel,
-                        );
                         setShowSlidingPanel(!showSlidingPanel);
-                    }}
-                    plans={plans}
-                    activePlanIndex={activePlanIndex}
-                    onChangePlan={(index) => setActivePlanIndex(index)}
-                    taskLabels={getActivePlan.plan.plan?.reduce((acc, task) => {
-                        if (task.id && task.goal) {
-                            acc.set(task.id.toString(), task.goal);
+                        // When opening the plan panel, mark that we've shown it
+                        if (!showSlidingPanel) {
+                            sessionStorage.setItem("plan-panel-shown", "true");
                         }
-                        return acc;
-                    }, new Map<string, string>())}
+                    }}
+                    onDownload={downloadConversation}
+                    onCopyRunId={copyRunId}
+                    resetWorkflow={resetWorkflow}
                 />
-            )}
 
-            {workflowStatus && (
-                workflowStatus !== "RUNNING" ? (
-                    <MessageBox
-                        status={workflowStatus === "COMPLETED" ? 'success' : 'done'}
-                        icon={null}
-                        className="flex-shrink-0 m-2"
-                    >
-                        This Workflow is {workflowStatus}
-                    </MessageBox>
-                ) : showInput && (
-                    <MessageInput
-                        value={inputValue}
-                        onChange={setInputValue}
-                        onSend={handleSendMessage}
-                        disabled={false}
-                        isSending={isSending}
+                {messages.length === 0 && !isCompleted ? (
+                    <div className="flex-1 flex flex-col items-center justify-center h-full text-center py-6">
+                        <div className="p-5 max-w-md border border-info rounded-lg shadow-sm">
+                            <div className="flex items-center space-x-3 mb-3">
+                                <PulsatingCircle size="sm" color="blue" />
+                                <div className="text-sm text-muted font-medium">
+                                    {ThinkingMessages[thinkingMessageIndex]}
+                                </div>
+                            </div>
+                            <div className="mt-4 flex justify-center">
+                                <AnimatedThinkingDots color="blue" className="mt-1" />
+                            </div>
+                        </div>
+                    </div>
+                ) : (
+                    <AllMessagesMixed
+                        messages={messages}
+                        bottomRef={bottomRef as React.RefObject<HTMLDivElement>}
+                        viewMode={viewMode}
                         isCompleted={isCompleted}
-                        activeTaskCount={getActiveTaskCount()}
-                        placeholder={placeholder}
+                        plan={getActivePlan.plan}
+                        workstreamStatus={getActivePlan.workstreamStatus}
+                        showPlanPanel={showSlidingPanel}
+                        onTogglePlanPanel={() => {
+                            console.log(
+                                "Toggle plan panel called, current state:",
+                                showSlidingPanel,
+                            );
+                            setShowSlidingPanel(!showSlidingPanel);
+                        }}
+                        plans={plans}
+                        activePlanIndex={activePlanIndex}
+                        onChangePlan={(index) => setActivePlanIndex(index)}
+                        taskLabels={getActivePlan.plan.plan?.reduce((acc, task) => {
+                            if (task.id && task.goal) {
+                                acc.set(task.id.toString(), task.goal);
+                            }
+                            return acc;
+                        }, new Map<string, string>())}
                     />
-                ))}
+                )}
+
+                {workflowStatus && (
+                    workflowStatus !== "RUNNING" ? (
+                        <MessageBox
+                            status={workflowStatus === "COMPLETED" ? 'success' : 'done'}
+                            icon={null}
+                            className="flex-shrink-0 m-2"
+                        >
+                            This Workflow is {workflowStatus}
+                        </MessageBox>
+                    ) : showInput && (
+                        <MessageInput
+                            value={inputValue}
+                            onChange={setInputValue}
+                            onSend={handleSendMessage}
+                            disabled={false}
+                            isSending={isSending}
+                            isCompleted={isCompleted}
+                            activeTaskCount={getActiveTaskCount()}
+                            placeholder={placeholder}
+                        />
+                    ))}
+            </div>
+
+            {/* Plan Panel Area - only rendered when panel should be shown */}
+            {showSlidingPanel && (
+                <div className="h-full lg:w-1/3 border-l">
+                    <InlineSlidingPlanPanel
+                        plan={getActivePlan.plan}
+                        workstreamStatus={getActivePlan.workstreamStatus}
+                        isOpen={showSlidingPanel}
+                        onClose={() => setShowSlidingPanel(false)}
+                        plans={plans}
+                        activePlanIndex={activePlanIndex}
+                        onChangePlan={setActivePlanIndex}
+                    />
+                </div>
+            )}
         </div>
     );
 }

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

@@ -1,6 +1,5 @@
 import { AgentMessage, AgentMessageType, Plan } from "@vertesia/common";
 import React, { useEffect, useMemo, useState } from "react";
-import InlineSlidingPlanPanel from "./InlineSlidingPlanPanel";
 import MessageItem from "./MessageItem";
 import WorkstreamTabs, { extractWorkstreams, filterMessagesByWorkstream } from "./WorkstreamTabs";
 import { DONE_STATES, getWorkstreamId } from "./utils";
@@ -25,13 +24,6 @@ export default function AllMessagesMixed({
     bottomRef,
     viewMode = 'stacked',
     isCompleted = false,
-    plan = { plan: [] },
-    workstreamStatus = new Map(),
-    showPlanPanel = false,
-    onTogglePlanPanel = () => { },
-    plans = [],
-    activePlanIndex = 0,
-    onChangePlan = () => { },
 }: AllMessagesMixedProps) {
     const containerRef = React.useRef<HTMLDivElement | null>(null);
     const [activeWorkstream, setActiveWorkstream] = useState<string>("all");
@@ -127,24 +119,12 @@ export default function AllMessagesMixed({
     return (
         <div
             ref={containerRef}
-            className="flex-1 min-h-0 h-full overflow-y-auto py-2 px-4 sm:px-6 lg:px-8 flex flex-col relative"
+            className="flex-1 min-h-0 h-full overflow-y-auto px-4 sm:px-2 lg:px-4 flex flex-col relative"
             data-testid="all-messages-mixed"
-            style={showPlanPanel ? { paddingRight: "350px" } : {}} // Only make space when panel is showing
         >
-            {/* Plan panel - respect showPlanPanel flag */}
-            <InlineSlidingPlanPanel
-                plan={plan}
-                workstreamStatus={workstreamStatus}
-                isOpen={showPlanPanel}
-                onClose={onTogglePlanPanel}
-                plans={plans}
-                activePlanIndex={activePlanIndex}
-                onChangePlan={onChangePlan}
-            />
-
 
             {/* Workstream tabs with completion indicators */}
-            <div className="sticky top-0 bg-white dark:bg-gray-900 z-10">
+            <div className="sticky top-0 z-10">
                 <WorkstreamTabs
                     workstreams={workstreams}
                     activeWorkstream={activeWorkstream}
@@ -156,7 +136,7 @@ export default function AllMessagesMixed({
 
             {displayMessages.length === 0 ? (
                 <div className="flex items-center justify-center h-full text-center py-8">
-                    <div className="flex items-center px-4 py-3 text-gray-500 dark:text-gray-400">
+                    <div className="flex items-center px-4 py-3 text-muted">
                         {activeWorkstream === "all"
                             ? "Waiting for agent response..."
                             : "No messages in this workstream yet..."}

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

@@ -1,15 +1,7 @@
 import { AsyncExecutionResult } from "@vertesia/client";
 import { Button, Command, CommandGroup, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, 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, MoreVertical, XIcon } from "lucide-react";
 import { PayloadBuilderProvider, usePayloadBuilder } from "../../PayloadBuilder";
 import { getConversationUrl } from "./utils";
 
@@ -45,7 +37,7 @@ export default function Header({
 }: HeaderProps) {
     return (
         <PayloadBuilderProvider>
-            <div className="flex items-center justify-between py-1.5 px-2 border-b shadow-sm flex-shrink-0">
+            <div className="flex flex-wrap items-end justify-between py-1.5 px-2 border-b shadow-sm flex-shrink-0">
                 <div className="flex flex-wrap items-center space-x-2">
                     <div className="flex items-center space-x-1">
                         <Bot className="size-5 text-muted" />
@@ -55,7 +47,7 @@ export default function Header({
                         (Run ID: {run.runId.substring(0, 8)}...)
                     </span>
                 </div>
-                <div className="flex items-center space-x-2">
+                <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">
                         <Button variant={viewMode === "stacked" ? "outline" : "ghost"} size="xs" className="rounded-l-md" onClick={() => onViewModeChange("stacked")}>