@vertesia/ui 1.0.0 → 1.1.0-dev.20260427.060440Z

package/src/core/components/shadcn/tooltip.tsx

@@ -14,8 +14,8 @@ type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitiv
   side?: "top" | "right" | "bottom" | "left"
 };
 
-const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<React.ElementRef<typeof TooltipPrimitive.Content>>> = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
+const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<React.ComponentRef<typeof TooltipPrimitive.Content>>> = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
     side?: "top" | "right" | "bottom" | "left"
   }
@@ -49,9 +49,26 @@ interface TooltipPopoverProps {
   asChild?: boolean;
 }
 export function VTooltip({ description, children, size = 'sm', placement = 'top', className, asChild }: TooltipPopoverProps) {
+  const [open, setOpen] = React.useState(false);
+  const suppressRef = React.useRef(false);
+
+  React.useEffect(() => {
+    const suppress = () => {
+      setOpen(false);
+      suppressRef.current = true;
+      requestAnimationFrame(() => { suppressRef.current = false; });
+    };
+    window.addEventListener('blur', suppress);
+    document.addEventListener('visibilitychange', suppress);
+    return () => {
+      window.removeEventListener('blur', suppress);
+      document.removeEventListener('visibilitychange', suppress);
+    };
+  }, []);
+
   return (
     <TooltipProvider delayDuration={0}>
-      <Tooltip>
+      <Tooltip open={open} onOpenChange={(v) => { if (!suppressRef.current) setOpen(v); }}>
         <TooltipTrigger className="cursor-pointer" asChild={asChild}>
           {children}
         </TooltipTrigger>

package/src/core/hooks/PortalContainerProvider.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const PortalContainerContext = React.createContext<HTMLElement | undefined>(undefined);
+export const PortalContainerContext = React.createContext<HTMLElement | undefined>(undefined);
 
 function findOrCreatePortalContainer(root: ShadowRoot | Document, id = "plugin-portal-container") {
     // Determine the actual parent element to search and append to
@@ -26,10 +26,18 @@ export function PortalContainerProvider({
     children: React.ReactNode;
     id?: string;
 }) {
+    const inherited = React.useContext(PortalContainerContext);
     const ref = React.useRef<HTMLDivElement>(null);
-    const [container, setContainer] = React.useState<HTMLElement | null | undefined>(undefined);
+    const [container, setContainer] = React.useState<HTMLElement | null | undefined>(
+        inherited || undefined
+    );
 
     React.useEffect(() => {
+        // If a parent already provides a portal container, inherit it
+        if (inherited) {
+            setContainer(inherited);
+            return;
+        }
         if (ref.current) {
             const root = ref.current.getRootNode();
             if (root instanceof ShadowRoot || root instanceof Document) {
@@ -39,7 +47,7 @@ export function PortalContainerProvider({
                 setContainer(null);
             }
         }
-    }, [id]);
+    }, [id, inherited]);
 
     // If container not discovered yet → render hidden marker only
     if (container === undefined) {

package/src/env/index.ts

@@ -6,6 +6,7 @@ import { AuthTokenPayload } from "@vertesia/common";
 export interface EnvProps {
     name: string; // the app name
     version: string,
+    commitTimestamp?: string, // ISO timestamp of the deployed commit
     sdkVersion?: string, // the @vertesia/ui package version
     isLocalDev: boolean,
     isDocker: boolean,
@@ -56,6 +57,10 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
         return this.prop("version");
     }
 
+    get commitTimestamp() {
+        return this._props?.commitTimestamp;
+    }
+
     get sdkVersion() {
         return this._props?.sdkVersion;
     }
@@ -69,19 +74,11 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
     }
 
     get isProd() {
-        return this.type === "production";
-    }
-
-    get isStable() {
-        return this.type === "production" || this.type === "preview" || this.type === "disaster-recovery";
+        return this.type === "production" || this.type === "preview";
     }
 
     get isDev() {
-        return !this.isStable;
-    }
-
-    get isPreview() {
-        return this.type === "preview";
+        return !this.isProd;
     }
 
     get isLocalDev() {

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

@@ -30,7 +30,7 @@ export interface WorkstreamInfo {
     elapsed_ms: number;
     deadline_ms: number;
     remaining_ms: number;
-    status: 'running' | 'canceling';
+    status: 'running' | 'canceling' | 'completed' | 'canceled';
     phase?: string;
     child_workflow_id?: string;
     child_workflow_run_id?: string;
@@ -124,7 +124,7 @@ interface WorkstreamsTabProps {
     runId?: string;
 }
 
-function WorkstreamsTab({ workstreams }: WorkstreamsTabProps) {
+function WorkstreamsTab({ workstreams, messages: _messages }: WorkstreamsTabProps) {
     const { t } = useUITranslation();
     const { client } = useUserSession();
     const toast = useToast();
@@ -155,12 +155,21 @@ function WorkstreamsTab({ workstreams }: WorkstreamsTabProps) {
     return (
         <div className="p-3 space-y-2">
             {workstreams.map((ws) => {
+                const isActive = ws.status === 'running' || ws.status === 'canceling';
                 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;
 
+                const statusBadge = ws.status === 'running'
+                    ? <Badge variant="info">{ws.phase || 'running'}</Badge>
+                    : ws.status === 'canceling'
+                        ? <Badge variant="attention">canceling</Badge>
+                        : ws.status === 'completed'
+                            ? <Badge variant="done">{t('agent.completed')}</Badge>
+                            : <Badge variant="destructive">{t('agent.canceled')}</Badge>;
+
                 return (
                     <div
                         key={ws.launch_id}
@@ -170,21 +179,23 @@ function WorkstreamsTab({ workstreams }: WorkstreamsTabProps) {
                             <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>
+                            {statusBadge}
                         </div>
+                        {/* Progress bar — only for active workstreams */}
+                        {isActive && (
+                            <>
+                                <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">
@@ -244,6 +255,7 @@ export interface AgentRightPanelProps {
     activeDocumentId?: string | null;
     onSelectDocument?: (id: string) => void;
     onCloseDocument?: (id: string) => void;
+    onUpdateDocumentTitle?: (id: string, title: string) => void;
     docRefreshKey?: number;
     runId?: string;
 
@@ -259,6 +271,10 @@ export interface AgentRightPanelProps {
     onClose: () => void;
     /** Which tab to auto-activate when panel opens */
     defaultTab?: RightPanelTab;
+    /** Controlled active tab (overrides internal state when provided) */
+    activeTab?: RightPanelTab;
+    /** Callback when the active tab changes */
+    onTabChange?: (tab: RightPanelTab) => void;
 }
 
 function AgentRightPanelComponent({
@@ -280,6 +296,7 @@ function AgentRightPanelComponent({
     activeDocumentId,
     onSelectDocument,
     onCloseDocument,
+    onUpdateDocumentTitle,
     docRefreshKey = 0,
     runId,
 
@@ -299,9 +316,16 @@ function AgentRightPanelComponent({
     // Panel
     onClose,
     defaultTab,
+    activeTab: activeTabProp,
+    onTabChange,
 }: AgentRightPanelProps) {
     const { t } = useUITranslation();
-    const [activeTab, setActiveTab] = useState<RightPanelTab>(defaultTab || 'plan');
+    const [internalActiveTab, setInternalActiveTab] = useState<RightPanelTab>(defaultTab || 'plan');
+    const activeTab = activeTabProp ?? internalActiveTab;
+    const handleTabChange = (name: string) => {
+        setInternalActiveTab(name as RightPanelTab);
+        onTabChange?.(name as RightPanelTab);
+    };
 
 // Determine which tabs have content (for badges/indicators)
     const hasWorkstreams = !hideWorkstreams && activeWorkstreams.length > 0;
@@ -309,10 +333,6 @@ function AgentRightPanelComponent({
     const hasUploads = processingFiles ? processingFiles.size > 0 : false;
     const hasPlan = showPlan && plan;
 
-    const handleCloseDocPanel = useCallback(() => {
-        setActiveTab('plan');
-    }, []);
-
     const conversationTab: TabDefinition = {
         name: 'conversation',
         label: 'Conversation',
@@ -360,11 +380,11 @@ function AgentRightPanelComponent({
             content: openDocuments.length > 0 && onSelectDocument && onCloseDocument ? (
                 <DocumentPanel
                     isOpen={true}
-                    onClose={handleCloseDocPanel}
                     documents={openDocuments}
                     activeDocumentId={activeDocumentId ?? null}
                     onSelectDocument={onSelectDocument}
                     onCloseDocument={onCloseDocument}
+                    onUpdateDocumentTitle={onUpdateDocumentTitle}
                     refreshKey={docRefreshKey}
                     runId={runId}
                 />
@@ -402,7 +422,7 @@ function AgentRightPanelComponent({
         <Tabs
             tabs={tabs}
             current={activeTab}
-            onTabChange={(name) => setActiveTab(name as RightPanelTab)}
+            onTabChange={handleTabChange}
             fullHeight
             className="px-0"
         >

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ExternalLinkIcon, FileTextIcon, Loader2Icon, X } from 'lucide-react';
 import { useUserSession } from '@vertesia/ui/session';
-import { Button } from '@vertesia/ui/core';
+import { Button, VTooltip } from '@vertesia/ui/core';
 import { NavLink } from '@vertesia/ui/router';
 import { MarkdownRenderer } from '@vertesia/ui/widgets';
 import { useUITranslation } from '../../../i18n/index.js';
@@ -10,22 +10,22 @@ import type { OpenDocument } from './types/document.js';
 
 interface DocumentPanelProps {
     isOpen: boolean;
-    onClose: () => void;
     documents: OpenDocument[];
     activeDocumentId: string | null;
     onSelectDocument: (id: string) => void;
     onCloseDocument: (id: string) => void;
+    onUpdateDocumentTitle?: (id: string, title: string) => void;
     refreshKey: number;
     runId?: string;
 }
 
 function DocumentPanelComponent({
     isOpen,
-    onClose,
     documents,
     activeDocumentId,
     onSelectDocument,
     onCloseDocument,
+    onUpdateDocumentTitle,
     refreshKey,
     runId,
 }: DocumentPanelProps) {
@@ -45,7 +45,9 @@ function DocumentPanelComponent({
                 client.store.objects.retrieve(docId),
             ]);
             setContent(textResult.text);
-            setDocName(obj.name);
+            const name = obj.name;
+            setDocName(name);
+            if (name) onUpdateDocumentTitle?.(docId, name);
         } catch (err: unknown) {
             const message = err instanceof Error ? err.message : t('agent.failedToLoadDocument');
             setError(message);
@@ -53,7 +55,7 @@ function DocumentPanelComponent({
         } finally {
             setIsLoading(false);
         }
-    }, [client]);
+    }, [client, onUpdateDocumentTitle]);
 
     // Fetch content when active document changes or refreshKey bumps
     useEffect(() => {
@@ -77,33 +79,33 @@ function DocumentPanelComponent({
                     </h3>
                 </div>
                 <div className="flex items-center gap-1">
+                    <DocumentTabBar
+                        documents={documents}
+                        activeId={activeDocumentId}
+                        onSelect={onSelectDocument}
+                    />
                     {activeDocumentId && (
                         <NavLink
                             href={`/store/objects/${activeDocumentId}#overview`}
                             topLevelNav
                             className="inline-flex items-center justify-center rounded-md text-sm font-medium h-8 w-8 hover:bg-muted/20 text-muted hover:text-foreground"
                         >
-                            <ExternalLinkIcon className="size-4" />
-                            <span className="sr-only">{t('agent.openDocument')}</span>
+                            <VTooltip description={t('agent.openDocument')} placement="top" size='xs'>
+                                <ExternalLinkIcon className="size-4" />
+                            </VTooltip>
                         </NavLink>
                     )}
-                    <Button variant="ghost" size="sm" onClick={onClose}>
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => activeDocumentId && onCloseDocument(activeDocumentId)}
+                        title={t('agent.close')}
+                    >
                         <X className="size-4" />
-                        <span className="sr-only">{t('agent.close')}</span>
                     </Button>
                 </div>
             </div>
 
-            {/* Tab bar */}
-            <div className="shrink-0">
-                <DocumentTabBar
-                    documents={documents}
-                    activeId={activeDocumentId}
-                    onSelect={onSelectDocument}
-                    onClose={onCloseDocument}
-                />
-            </div>
-
             {/* Content area */}
             <div className="flex-1 overflow-y-auto px-4 py-4">
                 {isLoading ? (

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

@@ -1,49 +1,38 @@
-import { XIcon } from 'lucide-react';
-import { cn } from '@vertesia/ui/core';
+import { ChevronDownIcon } from 'lucide-react';
+import { Button, Dropdown, MenuItem } from '@vertesia/ui/core';
 import type { OpenDocument } from './types/document.js';
 
 interface DocumentTabBarProps {
     documents: OpenDocument[];
     activeId: string | null;
     onSelect: (id: string) => void;
-    onClose: (id: string) => void;
 }
 
-export function DocumentTabBar({ documents, activeId, onSelect, onClose }: DocumentTabBarProps) {
+export function DocumentTabBar({ documents, activeId, onSelect }: DocumentTabBarProps) {
     if (documents.length === 0) return null;
 
     return (
-        <div className="flex items-center gap-1 overflow-x-auto px-2 py-1.5 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
-            {documents.map((doc) => {
-                const isActive = doc.id === activeId;
-                return (
-                    <button
+        <div className="flex items-center gap-1 px-2 py-1.5">
+            <Dropdown
+                align="right"
+                trigger={
+                    <Button variant="ghost" size="xs"
+                        title='All opened documents'
+                        className="flex items-center gap-1.5 max-w-[220px] text-xs h-7 px-2">
+                        <ChevronDownIcon className="size-3 shrink-0" />
+                    </Button>
+                }
+            >
+                {documents.map((doc) => (
+                    <MenuItem
                         key={doc.id}
                         onClick={() => onSelect(doc.id)}
-                        className={cn(
-                            'group flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md transition-colors whitespace-nowrap max-w-[200px]',
-                            isActive
-                                ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm'
-                                : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700/50'
-                        )}
+                        className={doc.id === activeId ? 'font-medium' : ''}
                     >
-                        <span className="truncate">{doc.title}</span>
-                        <span
-                            role="button"
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                onClose(doc.id);
-                            }}
-                            className={cn(
-                                'shrink-0 p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-600',
-                                isActive ? 'opacity-60 hover:opacity-100' : 'opacity-0 group-hover:opacity-60 hover:!opacity-100'
-                            )}
-                        >
-                            <XIcon className="size-3" />
-                        </span>
-                    </button>
-                );
-            })}
+                        <span className="truncate max-w-[200px]">{doc.title}</span>
+                    </MenuItem>
+                ))}
+            </Dropdown>
         </div>
     );
 }