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

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

@@ -1,4 +1,5 @@
 import { AgentMessage } from "@vertesia/common";
+import { cn } from "@vertesia/ui/core";
 import { CheckCircle, Clock } from "lucide-react";
 import { getWorkstreamId } from "./utils";
 
@@ -58,19 +59,20 @@ export default function WorkstreamTabs({
 
   // If there are no multiple workstreams, return an empty div to maintain layout
   if (!hasMultipleWorkstreams) {
-    return <div className="py-1"></div>;
+    return <div className="py-0.5"></div>;
   }
 
   return (
-    <div className="flex overflow-x-auto space-x-1 mb-2 bg-muted border-b-2 border-muted/20 sticky top-0 z-10">
+    <div className="flex overflow-x-auto space-x-1 mb-1 bg-muted border-b border-muted/20 sticky top-0 z-10">
       {sortedWorkstreams.map(([id, name]) => (
         <button
           key={id}
-          className={`px-2 py-1 text-xs font-medium whitespace-nowrap transition-colors flex items-center gap-1.5
-                        ${activeWorkstream === id
+          className={cn(
+            "px-2 py-1 text-xs font-medium whitespace-nowrap transition-colors flex items-center gap-1.5",
+            activeWorkstream === id
               ? "bg-info text-info border-b-2 border-info"
               : "text-muted hover:bg-muted border-b-2 border-transparent"
-            }`}
+          )}
           onClick={() => onSelectWorkstream(id)}
           title={name.length > 20 ? name : undefined}
         >
@@ -79,11 +81,12 @@ export default function WorkstreamTabs({
           {count && count.has(id) && count.get(id)! > 0 && (
             <div className="flex items-center space-x-1">
               <span
-                className={`inline-flex items-center justify-center p-1 text-xs rounded-full
-                                ${activeWorkstream === id
+                className={cn(
+                  "inline-flex items-center justify-center p-1 text-xs rounded-full",
+                  activeWorkstream === id
                     ? "bg-info text-info"
                     : "bg-muted text-muted"
-                  }`}
+                )}
               >
                 {count.get(id)}
               </span>

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

@@ -1,6 +1,6 @@
-import dayjs from "dayjs";
-import { AgentMessage, AgentMessageType } from "@vertesia/common";
 import { VertesiaClient } from "@vertesia/client";
+import { AgentMessage, AgentMessageType } from "@vertesia/common";
+import dayjs from "dayjs";
 
 export function insertMessageInTimeline(arr: AgentMessage[], m: AgentMessage) {
     const t = typeof m.timestamp === "number" ? m.timestamp : new Date(m.timestamp).getTime();
@@ -262,6 +262,16 @@ export function getToolStatus(message: AgentMessage): ToolExecutionStatus | unde
     return message.details?.tool_status;
 }
 
+/**
+ * Get the activity_group_id from message details, if present.
+ * This groups all internal activity updates for one tool-execution cycle.
+ */
+export function getActivityGroupId(message: AgentMessage): string | undefined {
+    const value = message.details?.activity_group_id;
+    if (typeof value !== "string" || value.trim() === "") return undefined;
+    return value;
+}
+
 /**
  * Group consecutive tool call messages together for a cleaner display
  * Non-tool messages remain as single items
@@ -329,6 +339,12 @@ export function groupMessagesWithStreaming(
     streamingMessages: Map<string, StreamingData>,
     activeWorkstream?: string
 ): RenderableGroup[] {
+    // First pass: collect messages by activity_group_id (core grouping signal)
+    const activityGroups = new Map<string, {
+        messages: AgentMessage[];
+        firstTimestamp: number;
+    }>();
+
     // First pass: collect messages by tool_iteration (for parallel tool calls in same iteration)
     const iterationGroups = new Map<number, {
         messages: AgentMessage[];
@@ -345,7 +361,23 @@ export function groupMessagesWithStreaming(
     const standaloneMessages: AgentMessage[] = [];
 
     for (const message of messages) {
-        if (isToolCallMessage(message)) {
+        const activityGroupId = getActivityGroupId(message);
+
+        // Certain message types have dedicated renderers (AskUserWidget for
+        // REQUEST_INPUT, BatchProgressPanel for BATCH_PROGRESS) and must stay
+        // standalone so MessageItem / AllMessagesMixed can route them correctly.
+        if (message.type === AgentMessageType.REQUEST_INPUT
+            || message.type === AgentMessageType.BATCH_PROGRESS) {
+            standaloneMessages.push(message);
+        } else if (activityGroupId) {
+            if (!activityGroups.has(activityGroupId)) {
+                activityGroups.set(activityGroupId, {
+                    messages: [],
+                    firstTimestamp: getTimestampMs(message.timestamp),
+                });
+            }
+            activityGroups.get(activityGroupId)!.messages.push(message);
+        } else if (isToolCallMessage(message)) {
             const toolIteration = getToolIteration(message);
             const toolRunId = getToolRunId(message);
 
@@ -380,11 +412,22 @@ export function groupMessagesWithStreaming(
     type GroupedItem =
         | { kind: 'message'; message: AgentMessage; timestamp: number }
         | { kind: 'streaming'; streamingId: string; data: StreamingData; timestamp: number }
+        | { kind: 'activity_group'; activityGroupId: string; messages: AgentMessage[]; timestamp: number }
         | { kind: 'iteration_group'; iteration: number; messages: AgentMessage[]; timestamp: number }
         | { kind: 'tool_run'; toolRunId: string; messages: AgentMessage[]; timestamp: number };
 
     const items: GroupedItem[] = [];
 
+    // Add activity groups first (strongest grouping signal from core)
+    activityGroups.forEach((group, activityGroupId) => {
+        items.push({
+            kind: 'activity_group',
+            activityGroupId,
+            messages: group.messages,
+            timestamp: group.firstTimestamp
+        });
+    });
+
     // Add iteration groups (parallel tool calls from same iteration)
     iterationGroups.forEach((group, iteration) => {
         items.push({
@@ -478,6 +521,23 @@ export function groupMessagesWithStreaming(
                 startTimestamp: item.data.startTimestamp,
                 isComplete: item.data.isComplete
             });
+        } else if (item.kind === 'activity_group') {
+            // Core activity group - includes tool calls and related progress updates
+            flushToolGroup();
+            const sortedMessages = [...item.messages].sort(
+                (a, b) => getTimestampMs(a.timestamp) - getTimestampMs(b.timestamp)
+            );
+            const latestStatus = sortedMessages.reduce<ToolExecutionStatus | undefined>(
+                (status, msg) => getToolStatus(msg) || status,
+                undefined
+            );
+            groups.push({
+                type: 'tool_group',
+                messages: sortedMessages,
+                firstTimestamp: item.timestamp,
+                toolRunId: item.activityGroupId,
+                toolStatus: latestStatus
+            });
         } else if (item.kind === 'iteration_group') {
             // Iteration group - parallel tool calls from same iteration
             flushToolGroup();
@@ -529,4 +589,79 @@ export function groupMessagesWithStreaming(
     flushToolGroup();
 
     return groups;
-}
+}
+
+/**
+ * Merge the ToolExecutionStatus of two groups.
+ * Priority: error > warning > running > completed > undefined
+ */
+export function mergeToolStatus(
+    a: ToolExecutionStatus | undefined,
+    b: ToolExecutionStatus | undefined,
+): ToolExecutionStatus | undefined {
+    const priority: Record<ToolExecutionStatus, number> = {
+        error: 4,
+        warning: 3,
+        running: 2,
+        completed: 1,
+    };
+    const pa = a ? priority[a] : 0;
+    const pb = b ? priority[b] : 0;
+    return pa >= pb ? (a ?? b) : b;
+}
+
+/**
+ * Post-processing step: merge consecutive tool_group entries into a single
+ * larger group so the UI shows one block instead of many.
+ * Non-tool-group entries (single, streaming) act as separators and are
+ * passed through unchanged.
+ */
+export function mergeConsecutiveToolGroups(groups: RenderableGroup[]): RenderableGroup[] {
+    const merged: RenderableGroup[] = [];
+    let pendingToolGroup: {
+        messages: AgentMessage[];
+        firstTimestamp: number;
+        toolRunId?: string;
+        toolStatus?: ToolExecutionStatus;
+    } | null = null;
+
+    const flushPending = () => {
+        if (pendingToolGroup) {
+            merged.push({
+                type: 'tool_group',
+                messages: pendingToolGroup.messages,
+                firstTimestamp: pendingToolGroup.firstTimestamp,
+                toolRunId: pendingToolGroup.toolRunId,
+                toolStatus: pendingToolGroup.toolStatus,
+            });
+            pendingToolGroup = null;
+        }
+    };
+
+    for (const group of groups) {
+        if (group.type === 'tool_group') {
+            if (pendingToolGroup) {
+                // Merge into the pending group
+                pendingToolGroup.messages = [...pendingToolGroup.messages, ...group.messages];
+                pendingToolGroup.toolStatus = mergeToolStatus(pendingToolGroup.toolStatus, group.toolStatus);
+                // Keep the first toolRunId if any, otherwise take the new one
+                if (!pendingToolGroup.toolRunId && group.toolRunId) {
+                    pendingToolGroup.toolRunId = group.toolRunId;
+                }
+            } else {
+                pendingToolGroup = {
+                    messages: [...group.messages],
+                    firstTimestamp: group.firstTimestamp,
+                    toolRunId: group.toolRunId,
+                    toolStatus: group.toolStatus,
+                };
+            }
+        } else {
+            flushPending();
+            merged.push(group);
+        }
+    }
+    flushPending();
+
+    return merged;
+}

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

@@ -4,7 +4,7 @@ import { FusionFragmentHandler } from "@vertesia/fusion-ux";
 import { useUserSession } from "@vertesia/ui/session";
 import { CodeBlockRendererProps, CodeBlockRendererProvider } from "@vertesia/ui/widgets";
 import { memo, useEffect, useMemo, useState } from "react";
-import { AgentChart, AgentChartSpec } from "./AgentChart";
+import { VegaLiteChartSpec } from "./AgentChart";
 import { VegaLiteChart } from "./VegaLiteChart";
 
 interface SkillWidgetProviderProperties {
@@ -12,13 +12,25 @@ interface SkillWidgetProviderProperties {
 }
 
 /**
- * Widget for rendering Recharts-based charts (bar, line, pie, etc.)
- * Used for `chart` code blocks that use Recharts format
+ * Widget for rendering chart code blocks.
+ * `chart` and `vega-lite` now both render through Vega-Lite.
  */
-const RechartsChartWidget = memo(function RechartsChartWidget({ code }: { code: string }) {
+const ChartWidget = memo(function ChartWidget({ code }: { code: string }) {
     const spec = useMemo(() => {
         try {
-            return JSON.parse(code) as AgentChartSpec;
+            const parsed = JSON.parse(code);
+
+            // Wrapped Vega-Lite format
+            if (parsed?.library === 'vega-lite' && parsed?.spec && typeof parsed.spec === 'object') {
+                return parsed as VegaLiteChartSpec;
+            }
+
+            // Native Vega-Lite spec format
+            if (typeof parsed?.$schema === 'string' && parsed.$schema.includes('vega')) {
+                return { library: 'vega-lite' as const, spec: parsed };
+            }
+
+            return null;
         } catch {
             // During streaming, code may be incomplete JSON - return null to skip rendering
             return null;
@@ -30,7 +42,7 @@ const RechartsChartWidget = memo(function RechartsChartWidget({ code }: { code:
         return null;
     }
 
-    return <AgentChart spec={spec} />
+    return <VegaLiteChart spec={spec} />
 });
 
 /**
@@ -59,7 +71,7 @@ const VegaLiteChartWidget = memo(function VegaLiteChartWidget({ code }: { code:
 });
 
 const defaultComponents: Record<string, React.FunctionComponent<CodeBlockRendererProps>> = {
-    "chart": RechartsChartWidget,
+    "chart": ChartWidget,
     "vega-lite": VegaLiteChartWidget,
     "vegalite": VegaLiteChartWidget,
     "fusion-fragment": FusionFragmentHandler,
@@ -83,17 +95,22 @@ async function fetchSkillWidgets(client: VertesiaClient): Promise<Record<string,
     const installedApps = await client.apps.getInstalledApps("tools");
     const urls = new Set<string>();
     for (const app of installedApps) {
-        for (const item of app.manifest.tool_collections || []) {
-            const collection = normalizeToolCollection(item);
-            const collUrl = collection.url;
-            if (collUrl.startsWith("http://") || collUrl.startsWith("https://")) {
-                const i = collUrl.indexOf("/api/");
-                if (i > 0) {
-                    const url = collUrl.substring(0, i);
-                    urls.add(url + '/api/widgets');
+        if (app.manifest.tool_collections && app.manifest.tool_collections.length > 0) {
+            for (const item of app.manifest.tool_collections || []) {
+                const collection = normalizeToolCollection(item);
+                const collUrl = collection.url;
+                if (collUrl.startsWith("http://") || collUrl.startsWith("https://")) {
+                    const i = collUrl.indexOf("/api/");
+                    if (i > 0) {
+                        const url = collUrl.substring(0, i);
+                        urls.add(url + '/api/widgets');
+                    }
                 }
             }
         }
+        if (app.manifest.endpoint && app.manifest.capabilities?.includes("tools")) {
+            urls.add(new URL('/api/widgets', app.manifest.endpoint).toString());
+        }
     }
 
     const allWidgets = await Promise.all(Array.from(urls).map(url => {

package/src/features/agent/chat/hooks/useAgentPlans.ts

@@ -0,0 +1,190 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AgentMessage, AgentMessageType, Plan } from '@vertesia/common';
+
+export interface UseAgentPlansResult {
+    plans: Array<{ plan: Plan; timestamp: number }>;
+    activePlanIndex: number;
+    setActivePlanIndex: (index: number) => void;
+    workstreamStatusMap: Map<number, Map<string, 'pending' | 'in_progress' | 'completed' | 'skipped'>>;
+    showInput: boolean;
+    /** Whether the sliding plan panel should be shown */
+    showSlidingPanel: boolean;
+    setShowSlidingPanel: (show: boolean | ((prev: boolean) => boolean)) => void;
+}
+
+/**
+ * Hook that extracts plan detection and workstream status management from messages.
+ *
+ * Key improvement: incremental processing. Instead of scanning ALL messages
+ * on every change, tracks `lastProcessedIndex` and only scans new messages.
+ */
+export function useAgentPlans(
+    messages: AgentMessage[],
+    interactive: boolean,
+    isModal = false,
+): UseAgentPlansResult {
+    const [plans, setPlans] = useState<Array<{ plan: Plan; timestamp: number }>>([]);
+    const [activePlanIndex, setActivePlanIndex] = useState<number>(0);
+    const [workstreamStatusMap, setWorkstreamStatusMap] = useState<
+        Map<number, Map<string, 'pending' | 'in_progress' | 'completed' | 'skipped'>>
+    >(new Map());
+    const [showInput, setShowInput] = useState(interactive);
+    const [showSlidingPanel, setShowSlidingPanel] = useState<boolean>(!isModal);
+
+    // Incremental processing: track how far we've scanned
+    const lastProcessedIndex = useRef<number>(-1);
+    // Track known plan timestamps to avoid re-adding
+    const knownPlanTimestamps = useRef<Set<number>>(new Set());
+
+    // Reset when messages are cleared (new run)
+    useEffect(() => {
+        if (messages.length === 0) {
+            setPlans([]);
+            setActivePlanIndex(0);
+            setWorkstreamStatusMap(new Map());
+            setShowSlidingPanel(false);
+            lastProcessedIndex.current = -1;
+            knownPlanTimestamps.current.clear();
+        }
+    }, [messages.length === 0]);
+
+    // Process new messages incrementally
+    useEffect(() => {
+        if (messages.length === 0) return;
+
+        const startIdx = lastProcessedIndex.current + 1;
+        if (startIdx >= messages.length) {
+            // No new messages to process, but still check showInput from last message
+            updateShowInput(messages);
+            return;
+        }
+
+        let plansChanged = false;
+        const newPlansToAdd: Array<{ plan: Plan; timestamp: number }> = [];
+        const newWorkstreamUpdates: Array<{
+            timestamp: number;
+            statusMap: Map<string, 'pending' | 'in_progress' | 'completed' | 'skipped'>;
+        }> = [];
+
+        for (let i = startIdx; i < messages.length; i++) {
+            const message = messages[i];
+
+            if (message.type === AgentMessageType.PLAN) {
+                try {
+                    let newPlanDetails: Plan | null = null;
+
+                    if (message.details && typeof message.details === 'object') {
+                        if (message.details.plan && Array.isArray(message.details.plan)) {
+                            newPlanDetails = { plan: message.details.plan } as Plan;
+                        }
+                    }
+
+                    if (newPlanDetails) {
+                        const timestamp =
+                            typeof message.timestamp === 'number'
+                                ? message.timestamp
+                                : new Date(message.timestamp).getTime();
+
+                        if (!knownPlanTimestamps.current.has(timestamp)) {
+                            knownPlanTimestamps.current.add(timestamp);
+                            plansChanged = true;
+
+                            newPlansToAdd.push({ plan: newPlanDetails, timestamp });
+
+                            // Initialize workstreams for this plan
+                            const newWorkstreamStatus = new Map<
+                                string,
+                                'pending' | 'in_progress' | 'completed' | 'skipped'
+                            >();
+                            newWorkstreamStatus.set('main', 'in_progress');
+
+                            if (Array.isArray(newPlanDetails.plan)) {
+                                newPlanDetails.plan.forEach((task) => {
+                                    if (task && typeof task === 'object' && task.id) {
+                                        const taskId = task.id.toString();
+                                        newWorkstreamStatus.set(taskId, task.status || 'pending');
+                                    }
+                                });
+                            }
+
+                            newWorkstreamUpdates.push({ timestamp, statusMap: newWorkstreamStatus });
+                        }
+                    }
+                } catch (error) {
+                    console.error('Failed to parse plan from message:', error);
+                }
+            }
+        }
+
+        lastProcessedIndex.current = messages.length - 1;
+
+        // Batch state updates
+        if (plansChanged && newPlansToAdd.length > 0) {
+            setPlans((prev) => {
+                // Add newest first
+                const reversed = [...newPlansToAdd].reverse();
+                return [...reversed, ...prev];
+            });
+            setActivePlanIndex(0);
+            setShowSlidingPanel(true);
+
+            if (newWorkstreamUpdates.length > 0) {
+                setWorkstreamStatusMap((prev) => {
+                    const newMap = new Map(prev);
+                    for (const update of newWorkstreamUpdates) {
+                        newMap.set(update.timestamp, update.statusMap);
+                    }
+                    return newMap;
+                });
+            }
+        }
+
+        updateShowInput(messages);
+    }, [messages, interactive]);
+
+    // Auto-show plan panel for the first plan (once only)
+    useEffect(() => {
+        if (
+            plans.length === 1 &&
+            !showSlidingPanel &&
+            !sessionStorage.getItem('plan-panel-shown')
+        ) {
+            const notificationTimeout = setTimeout(() => {
+                setShowSlidingPanel(true);
+                sessionStorage.setItem('plan-panel-shown', 'true');
+            }, 500);
+            return () => clearTimeout(notificationTimeout);
+        }
+    }, [plans.length, showSlidingPanel]);
+
+    // Hide panel when there are no plans
+    useEffect(() => {
+        if (plans.length === 0) {
+            setShowSlidingPanel(false);
+        }
+    }, [plans.length]);
+
+    // Helper to determine showInput from the latest message
+    const updateShowInput = useCallback((msgs: AgentMessage[]) => {
+        const lastMessage = msgs[msgs.length - 1];
+        if (!lastMessage) return;
+
+        if (lastMessage.type === AgentMessageType.TERMINATED) {
+            setShowInput(false);
+        } else if (interactive) {
+            setShowInput(true);
+        } else {
+            setShowInput(lastMessage.type === AgentMessageType.REQUEST_INPUT);
+        }
+    }, [interactive]);
+
+    return {
+        plans,
+        activePlanIndex,
+        setActivePlanIndex,
+        workstreamStatusMap,
+        showInput,
+        showSlidingPanel,
+        setShowSlidingPanel,
+    };
+}