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

package/src/features/agent/PayloadBuilder.tsx

@@ -3,7 +3,7 @@ import { AgentSearchScope, ConversationVisibility, ExecutionEnvironmentRef, InCo
 import { JSONObject } from "@vertesia/json";
 import { useUserSession } from "@vertesia/ui/session";
 import Ajv, { ValidateFunction } from "ajv";
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useContext, useState, useSyncExternalStore } from "react";
 
 export type WorkflowMode = 'start' | 'schedule';
 
@@ -14,9 +14,30 @@ export interface ScheduledWorkflowConfig {
     timezone: string;
 }
 
+export class PayloadBuilderStore {
+    private _listeners = new Set<() => void>();
+    snapshot: PayloadBuilder;
+
+    constructor(client: VertesiaClient) {
+        this.snapshot = new PayloadBuilder(client, this);
+    }
+
+    subscribe = (listener: () => void) => {
+        this._listeners.add(listener);
+        return () => { this._listeners.delete(listener); };
+    };
+
+    getSnapshot = () => this.snapshot;
+
+    notify() {
+        this._listeners.forEach(listener => listener());
+    }
+}
+
 export class PayloadBuilder {
     _interactive: boolean = true;
     _debug_mode: boolean = false;
+    _non_blocking_subagents: boolean = true;
     _checkpoint_tokens: number | undefined;
     _visibility: ConversationVisibility | undefined;
     _user_channels: UserChannel[] | undefined;
@@ -32,22 +53,28 @@ export class PayloadBuilder {
     _scheduledWorkflowConfig: ScheduledWorkflowConfig | undefined;
 
     private _interactionParamsSchema?: JSONSchema | null;
+    private _schemaVersion = 0;
     private _inputValidator?: {
         validate: ValidateFunction;
         schema: JSONSchema;
     };
 
-    constructor(public vertesia: VertesiaClient, public updateState: (data: PayloadBuilder) => void) {
+    private _store: PayloadBuilderStore;
+
+    constructor(public vertesia: VertesiaClient, store: PayloadBuilderStore) {
+        this._store = store;
     }
 
     onStateChanged() {
         const newInstance = this.clone();
-        this.updateState(newInstance);
+        this._store.snapshot = newInstance;
+        this._store.notify();
     }
 
     clone() {
-        const builder = new PayloadBuilder(this.vertesia, this.updateState);
+        const builder = new PayloadBuilder(this.vertesia, this._store);
         builder._interactionParamsSchema = this._interactionParamsSchema;
+        builder._schemaVersion = this._schemaVersion;
         builder._interaction = this._interaction;
         builder._data = this._data;
         builder._environment = this._environment;
@@ -55,6 +82,7 @@ export class PayloadBuilder {
         builder._tool_names = [...this._tool_names];
         builder._interactive = this._interactive;
         builder._debug_mode = this._debug_mode;
+        builder._non_blocking_subagents = this._non_blocking_subagents;
         builder._checkpoint_tokens = this._checkpoint_tokens;
         builder._visibility = this._visibility;
         builder._user_channels = this._user_channels ? [...this._user_channels] : undefined;
@@ -70,6 +98,14 @@ export class PayloadBuilder {
     set mode(mode: 'start' | 'schedule') {
         if (mode !== this._mode) {
             this._mode = mode;
+            if (mode === 'schedule' && !this._scheduledWorkflowConfig) {
+                this._scheduledWorkflowConfig = {
+                    name: '',
+                    description: '',
+                    cron_expression: '0 9 * * *',
+                    timezone: 'UTC'
+                } as ScheduledWorkflowConfig;
+            }
             this.onStateChanged();
         }
     }
@@ -87,6 +123,14 @@ export class PayloadBuilder {
         return this._scheduledWorkflowConfig;
     }
 
+    updateScheduledWorkflowConfig(patch: Partial<ScheduledWorkflowConfig>) {
+        this._scheduledWorkflowConfig = {
+            ...this._scheduledWorkflowConfig,
+            ...patch
+        } as ScheduledWorkflowConfig;
+        this.onStateChanged();
+    }
+
     get interactive() {
         return this._interactive;
     }
@@ -109,6 +153,17 @@ export class PayloadBuilder {
         }
     }
 
+    get non_blocking_subagents() {
+        return this._non_blocking_subagents;
+    }
+
+    set non_blocking_subagents(value: boolean) {
+        if (value !== this._non_blocking_subagents) {
+            this._non_blocking_subagents = value;
+            this.onStateChanged();
+        }
+    }
+
     get checkpoint_tokens(): number | undefined {
         return this._checkpoint_tokens;
     }
@@ -171,20 +226,29 @@ export class PayloadBuilder {
         const envId = inter.runtime?.environment || context.config?.environment;
         const model = context.config?.model;
         const env = await (envId ?
-            this.vertesia.environments.retrieve(context.config?.environment)
+            this.vertesia.environments.retrieve(envId).catch(() => undefined)
             :
             Promise.resolve(undefined)
         );
 
 
-        this.interactionParamsSchema = context.interactionParamsSchema ?? null;
-        // trigger the setter to update the corresponding interactionParamsSchema
+        // Set data BEFORE the interaction setter so that initializeBooleanDefaults (called
+        // inside the interactionParamsSchema setter) uses the real run values as its base
+        // rather than an empty object. This prevents an intermediate render where the schema
+        // is set but _data is still {} — which would cause Input to mount with empty state.
+        this._data = context.data;
+
+        // Set interaction (which recomputes interactionParamsSchema from prompts via setter)
         this.interaction = inter;
+        // Prefer the schema stored in context (persisted with the run) over the recomputed one
+        if (context.interactionParamsSchema != null) {
+            this.interactionParamsSchema = context.interactionParamsSchema;
+        }
 
         this._tool_names = context.tool_names || [];
-        this._data = context.data;
         this._interactive = context.interactive;
         this._debug_mode = context.debug_mode ?? false;
+        this._non_blocking_subagents = context.non_blocking_subagents ?? true;
         this._checkpoint_tokens = context.checkpoint_tokens;
         this._user_channels = context.user_channels;
         this.collection = context.collection_id ?? undefined;
@@ -277,6 +341,25 @@ export class PayloadBuilder {
         }
     }
 
+    markStarted() {
+        this.start = true;
+    }
+
+    // Method-style setters for use in React components (avoids react-hooks/immutability lint errors)
+    setMode(mode: 'start' | 'schedule') { this.mode = mode; }
+    setInteraction(interaction: InCodeInteraction | undefined) { this.interaction = interaction; }
+    setEnvironment(environment: ExecutionEnvironmentRef | undefined) { this.environment = environment; }
+    setModel(model: string | undefined) { this.model = model; }
+    setToolNames(tools: string[]) { this.tool_names = tools; }
+    setCollection(collection: string | undefined) { this.collection = collection; }
+    setInteractive(interactive: boolean) { this.interactive = interactive; }
+    setDebugMode(debug_mode: boolean) { this.debug_mode = debug_mode; }
+    setUserChannels(channels: UserChannel[] | undefined) { this.user_channels = channels; }
+    setCheckpointTokens(value: number | undefined) { this.checkpoint_tokens = value; }
+    setVisibility(value: ConversationVisibility | undefined) { this.visibility = value; }
+    setData(data: JSONObject) { this.data = data; }
+    setPreserveRunValues(value: boolean) { this.preserveRunValues = value; }
+
     get start(): boolean {
         return this._start;
     }
@@ -289,6 +372,10 @@ export class PayloadBuilder {
         this._preserveRunValues = value;
     }
 
+    get schemaVersion(): number {
+        return this._schemaVersion;
+    }
+
     get interactionParamsSchema(): JSONSchema | null | undefined {
         return this._interactionParamsSchema;
     }
@@ -296,6 +383,7 @@ export class PayloadBuilder {
     set interactionParamsSchema(schema: JSONSchema | null | undefined) {
         if (this._interactionParamsSchema !== schema) {
             this._interactionParamsSchema = schema;
+            this._schemaVersion += 1;
             // Booleans must be true or false, never undefined
             if (schema) {
                 this._data = this.initializeBooleanDefaults(this._data || {}, schema);
@@ -332,6 +420,7 @@ export class PayloadBuilder {
         this._start = false;
         this._interactive = true;
         this._debug_mode = false;
+        this._non_blocking_subagents = true;
         this._checkpoint_tokens = undefined;
         this._visibility = undefined;
         this._user_channels = undefined;
@@ -390,11 +479,9 @@ interface PayloadProviderProps {
 }
 export function PayloadBuilderProvider({ children }: PayloadProviderProps) {
     const { client } = useUserSession();
-    const [builder, setBuilder] = useState<PayloadBuilder>();
-    useEffect(() => {
-        setBuilder(new PayloadBuilder(client, setBuilder));
-    }, []);
-    return builder && (
+    const [store] = useState(() => new PayloadBuilderStore(client));
+    const builder = useSyncExternalStore(store.subscribe, store.getSnapshot);
+    return (
         <PayloadContext.Provider value={builder}>{children}</PayloadContext.Provider >
     )
 }

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

@@ -0,0 +1,424 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Badge, Button, useToast, Tabs, TabsBar, TabsPanel, type Tab as TabDefinition } from '@vertesia/ui/core';
+import { useUITranslation } from '../../../i18n/index.js';
+import {
+    CheckCircleIcon,
+    ClipboardCopyIcon,
+    DownloadCloudIcon,
+    FileTextIcon,
+    Loader2Icon,
+    LayoutListIcon,
+    XCircleIcon,
+    XIcon,
+} from 'lucide-react';
+import { FileProcessingStatus } from '@vertesia/common';
+import type { Plan, ConversationFile, AgentMessage } from '@vertesia/common';
+import { useUserSession } from '@vertesia/ui/session';
+import InlineSlidingPlanPanel from './ModernAgentOutput/InlineSlidingPlanPanel';
+import { getConversationUrl } from './ModernAgentOutput/utils.js';
+import { DocumentPanel } from './DocumentPanel.js';
+import { ArtifactsTab } from './ArtifactsTab.js';
+import type { OpenDocument } from './types/document.js';
+
+// ---------------------------------------------------------------------------
+// Workstream list types
+// ---------------------------------------------------------------------------
+
+export interface WorkstreamInfo {
+    workstream_id: string;
+    launch_id: string;
+    elapsed_ms: number;
+    deadline_ms: number;
+    remaining_ms: number;
+    status: 'running' | 'canceling';
+    phase?: string;
+    child_workflow_id?: string;
+    child_workflow_run_id?: string;
+}
+
+// ---------------------------------------------------------------------------
+// UploadedDocuments (moved from WorkflowPayloadForm)
+// ---------------------------------------------------------------------------
+
+interface UploadedDocumentsProps {
+    files?: Map<string, ConversationFile>;
+}
+
+function UploadedDocumentsTab({ files }: UploadedDocumentsProps) {
+    const { t } = useUITranslation();
+    const filesArray = useMemo(() => {
+        return files ? Array.from(files.values()) : [];
+    }, [files]);
+
+    const getStatusIcon = (status: FileProcessingStatus) => {
+        switch (status) {
+            case FileProcessingStatus.UPLOADING:
+            case FileProcessingStatus.PROCESSING:
+                return <Loader2Icon className="size-4 animate-spin text-info" />;
+            case FileProcessingStatus.READY:
+                return <CheckCircleIcon className="size-4 text-success" />;
+            case FileProcessingStatus.ERROR:
+                return <XCircleIcon className="size-4 text-destructive" />;
+            default:
+                return <FileTextIcon className="size-4 text-muted" />;
+        }
+    };
+
+    const getStatusBadge = (status: FileProcessingStatus) => {
+        switch (status) {
+            case FileProcessingStatus.UPLOADING:
+                return <Badge variant="info">{t('agent.uploading')}</Badge>;
+            case FileProcessingStatus.PROCESSING:
+                return <Badge variant="info">{t('agent.processing')}</Badge>;
+            case FileProcessingStatus.READY:
+                return <Badge variant="success">{t('agent.ready')}</Badge>;
+            case FileProcessingStatus.ERROR:
+                return <Badge variant="destructive">{t('agent.error')}</Badge>;
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <div className="p-3">
+            {filesArray.length === 0 ? (
+                <div className="text-sm text-muted text-center py-8">
+                    {t('agent.noFilesUploadedYet')}
+                </div>
+            ) : (
+                <div className="space-y-2">
+                    {filesArray.map((file) => (
+                        <div
+                            key={file.id}
+                            className="flex items-start gap-2 p-2 border border-muted rounded-md"
+                        >
+                            <div className="mt-0.5">{getStatusIcon(file.status)}</div>
+                            <div className="flex-1 min-w-0">
+                                <div className="flex items-center justify-between gap-2">
+                                    <span className="text-sm font-medium truncate">
+                                        {file.name}
+                                    </span>
+                                    {getStatusBadge(file.status)}
+                                </div>
+                                {file.error && (
+                                    <div className="text-xs text-destructive mt-1">
+                                        {file.error}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Workstreams tab
+// ---------------------------------------------------------------------------
+
+interface WorkstreamsTabProps {
+    workstreams: WorkstreamInfo[];
+    messages: AgentMessage[];
+    runId?: string;
+}
+
+function WorkstreamsTab({ workstreams }: WorkstreamsTabProps) {
+    const { t } = useUITranslation();
+    const { client } = useUserSession();
+    const toast = useToast();
+
+    const copyRunId = useCallback((runId: string) => {
+        navigator.clipboard.writeText(runId);
+        toast({ status: 'success', title: t('agent.runIdCopied'), duration: 2000 });
+    }, [toast]);
+
+    const downloadConversation = useCallback(async (runId: string) => {
+        try {
+            const url = await getConversationUrl(client, runId);
+            if (url) window.open(url, '_blank');
+        } catch {
+            toast({ status: 'error', title: t('agent.failedToDownload') });
+        }
+    }, [client, toast]);
+
+    if (workstreams.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center py-8 text-muted">
+                <LayoutListIcon className="size-8 mb-2" />
+                <span className="text-sm">{t('agent.noActiveWorkstreams')}</span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-3 space-y-2">
+            {workstreams.map((ws) => {
+                const elapsed = Math.round(ws.elapsed_ms / 1000);
+                const remaining = Math.round(ws.remaining_ms / 1000);
+                const progress = ws.deadline_ms > 0
+                    ? Math.min(100, Math.round((ws.elapsed_ms / ws.deadline_ms) * 100))
+                    : 0;
+
+                return (
+                    <div
+                        key={ws.launch_id}
+                        className="p-3 border rounded-md space-y-2"
+                    >
+                        <div className="flex items-center justify-between">
+                            <span className="text-sm font-medium truncate">
+                                {ws.workstream_id}
+                            </span>
+                            <Badge variant={ws.status === 'running' ? 'info' : 'attention'}>
+                                {ws.status === 'running' ? (ws.phase || 'running') : 'canceling'}
+                            </Badge>
+                        </div>
+                        {/* Progress bar */}
+                        <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+                            <div
+                                className="h-full bg-info rounded-full transition-all duration-500"
+                                style={{ width: `${progress}%` }}
+                            />
+                        </div>
+                        <div className="flex justify-between text-xs text-muted">
+                            <span>{t('agent.elapsed', { seconds: elapsed })}</span>
+                            <span>{t('agent.remaining', { seconds: remaining })}</span>
+                        </div>
+                        {/* Actions */}
+                        {ws.child_workflow_run_id && (
+                            <div className="flex gap-1 pt-1 border-t border-muted">
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="text-xs h-7 px-2 text-muted hover:text-foreground"
+                                    onClick={() => copyRunId(ws.child_workflow_run_id!)}
+                                >
+                                    <ClipboardCopyIcon className="size-3 mr-1" />
+                                    {t('agent.copyRunId')}
+                                </Button>
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="text-xs h-7 px-2 text-muted hover:text-foreground"
+                                    onClick={() => downloadConversation(ws.child_workflow_run_id!)}
+                                >
+                                    <DownloadCloudIcon className="size-3 mr-1" />
+                                    {t('agent.download')}
+                                </Button>
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Right panel tabs
+// ---------------------------------------------------------------------------
+
+type RightPanelTab = 'plan' | 'workstreams' | 'documents' | 'uploads' | 'artifacts' | 'payload' | 'conversation';
+
+export interface AgentRightPanelProps {
+    /** Optional payload content to show as a "Payload" tab */
+    payloadContent?: React.ReactNode;
+    /** Optional conversation content to show as a "Conversation" tab */
+    conversationContent?: React.ReactNode;
+    // Plan
+    plan?: Plan;
+    workstreamStatus?: Map<string, 'pending' | 'in_progress' | 'completed' | 'skipped'>;
+    plans?: Array<{ plan: Plan; timestamp: number }>;
+    activePlanIndex?: number;
+    onChangePlan?: (index: number) => void;
+    showPlan?: boolean;
+
+    // Workstreams
+    activeWorkstreams?: WorkstreamInfo[];
+    messages?: AgentMessage[];
+    hideWorkstreams?: boolean;
+
+    // Documents
+    openDocuments?: OpenDocument[];
+    activeDocumentId?: string | null;
+    onSelectDocument?: (id: string) => void;
+    onCloseDocument?: (id: string) => void;
+    docRefreshKey?: number;
+    runId?: string;
+
+    // Uploads
+    processingFiles?: Map<string, ConversationFile>;
+
+    // Artifacts
+    /** Show the Artifacts tab (opt-in, default false) */
+    showArtifacts?: boolean;
+    artifactRefreshKey?: number;
+
+    // Panel control
+    onClose: () => void;
+    /** Which tab to auto-activate when panel opens */
+    defaultTab?: RightPanelTab;
+}
+
+function AgentRightPanelComponent({
+    // Plan
+    plan,
+    workstreamStatus,
+    plans = [],
+    activePlanIndex = 0,
+    onChangePlan,
+    showPlan,
+
+    // Workstreams
+    activeWorkstreams = [],
+    messages = [],
+    hideWorkstreams = false,
+
+    // Documents
+    openDocuments = [],
+    activeDocumentId,
+    onSelectDocument,
+    onCloseDocument,
+    docRefreshKey = 0,
+    runId,
+
+    // Uploads
+    processingFiles,
+
+    // Artifacts
+    showArtifacts = false,
+    artifactRefreshKey = 0,
+
+    // Payload
+    payloadContent,
+
+    // Conversation
+    conversationContent,
+
+    // Panel
+    onClose,
+    defaultTab,
+}: AgentRightPanelProps) {
+    const { t } = useUITranslation();
+    const [activeTab, setActiveTab] = useState<RightPanelTab>(defaultTab || 'plan');
+
+// Determine which tabs have content (for badges/indicators)
+    const hasWorkstreams = !hideWorkstreams && activeWorkstreams.length > 0;
+    const hasDocuments = openDocuments.length > 0;
+    const hasUploads = processingFiles ? processingFiles.size > 0 : false;
+    const hasPlan = showPlan && plan;
+
+    const handleCloseDocPanel = useCallback(() => {
+        setActiveTab('plan');
+    }, []);
+
+    const conversationTab: TabDefinition = {
+        name: 'conversation',
+        label: 'Conversation',
+        content: conversationContent ? <div className="flex flex-col h-full min-h-0">{conversationContent}</div> : null,
+        is_allowed: !!conversationContent,
+    };
+
+    const tabs: TabDefinition[] = [
+        ...(conversationContent ? [conversationTab] : []),
+        {
+            name: 'plan',
+            label: hasPlan
+                ? <span className="flex items-center gap-1">{t('agent.plan')} <span className="inline-block w-1.5 h-1.5 rounded-full bg-info" /></span>
+                : t('agent.plan'),
+            content: plan ? (
+                <InlineSlidingPlanPanel
+                    plan={plan}
+                    workstreamStatus={workstreamStatus || new Map()}
+                    isOpen={true}
+                    onClose={onClose}
+                    plans={plans}
+                    activePlanIndex={activePlanIndex}
+                    onChangePlan={onChangePlan}
+                />
+            ) : (
+                <div className="flex flex-col items-center justify-center py-8 text-muted">
+                    <span className="text-sm">{t('agent.noPlanAvailable')}</span>
+                </div>
+            ),
+            is_allowed: true,
+        },
+        {
+            name: 'workstreams',
+            label: hasWorkstreams
+                ? <span className="flex items-center gap-1">{t('agent.workstreams')} <span className="inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] rounded-full bg-info text-info">{activeWorkstreams.length}</span></span>
+                : t('agent.workstreams'),
+            content: <WorkstreamsTab workstreams={activeWorkstreams} messages={messages} runId={runId} />,
+            is_allowed: !hideWorkstreams,
+        },
+        {
+            name: 'documents',
+            label: hasDocuments
+                ? <span className="flex items-center gap-1">{t('agent.documents')} <span className="inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] rounded-full bg-info text-info">{openDocuments.length}</span></span>
+                : t('agent.documents'),
+            content: openDocuments.length > 0 && onSelectDocument && onCloseDocument ? (
+                <DocumentPanel
+                    isOpen={true}
+                    onClose={handleCloseDocPanel}
+                    documents={openDocuments}
+                    activeDocumentId={activeDocumentId ?? null}
+                    onSelectDocument={onSelectDocument}
+                    onCloseDocument={onCloseDocument}
+                    refreshKey={docRefreshKey}
+                    runId={runId}
+                />
+            ) : (
+                <div className="flex flex-col items-center justify-center py-8 text-muted">
+                    <FileTextIcon className="size-8 mb-2" />
+                    <span className="text-sm">{t('agent.noDocumentsOpen')}</span>
+                </div>
+            ),
+            is_allowed: true,
+        },
+        {
+            name: 'uploads',
+            label: hasUploads
+                ? <span className="flex items-center gap-1">{t('agent.uploads')} <span className="inline-block w-1.5 h-1.5 rounded-full bg-info" /></span>
+                : t('agent.uploads'),
+            content: <UploadedDocumentsTab files={processingFiles} />,
+            is_allowed: true,
+        },
+        {
+            name: 'artifacts',
+            label: t('agent.artifacts'),
+            content: <ArtifactsTab runId={runId} refreshKey={artifactRefreshKey} />,
+            is_allowed: showArtifacts,
+        },
+        {
+            name: 'payload',
+            label: t('agent.payload'),
+            content: payloadContent ? <div className="overflow-y-auto">{payloadContent}</div> : null,
+            is_allowed: !!payloadContent,
+        },
+    ];
+
+    return (
+        <Tabs
+            tabs={tabs}
+            current={activeTab}
+            onTabChange={(name) => setActiveTab(name as RightPanelTab)}
+            fullHeight
+            className="px-0"
+        >
+            <div className="flex items-center border-b shrink-0 px-1">
+                <div className="flex-1 overflow-x-auto">
+                    <TabsBar className="border-b-0 mb-0 min-w-max" />
+                </div>
+                {!conversationContent && (
+                    <Button variant="ghost" size="sm" className="shrink-0 ml-1" onClick={onClose}>
+                        <XIcon className="size-4" />
+                    </Button>
+                )}
+            </div>
+            <TabsPanel className="pt-0" />
+        </Tabs>
+    );
+}
+
+export const AgentRightPanel = React.memo(AgentRightPanelComponent);