@vertesia/ui 1.4.0 → 1.5.0-dev.20260713.113008Z

package/src/features/agent/chat/ModernAgentOutput/MessageInput.test.tsx

@@ -54,6 +54,31 @@ describe('MessageInput', () => {
         expect(onFilesSelected).toHaveBeenCalledWith([file]);
     });
 
+    it('does not send or clear the text when Enter is pressed while files are still processing', () => {
+        const onSend = vi.fn();
+        renderWithProviders(<MessageInput onSend={onSend} onFilesSelected={vi.fn()} hasProcessingFiles />);
+
+        const textbox = screen.getByRole('textbox') as HTMLTextAreaElement;
+        fireEvent.change(textbox, { target: { value: 'please analyze this' } });
+        fireEvent.keyDown(textbox, { key: 'Enter' });
+
+        expect(onSend).not.toHaveBeenCalled();
+        // The typed text must be retained so the user doesn't have to re-type it.
+        expect(textbox.value).toBe('please analyze this');
+    });
+
+    it('sends and clears the text on Enter once files have finished processing', () => {
+        const onSend = vi.fn();
+        renderWithProviders(<MessageInput onSend={onSend} onFilesSelected={vi.fn()} />);
+
+        const textbox = screen.getByRole('textbox') as HTMLTextAreaElement;
+        fireEvent.change(textbox, { target: { value: 'please analyze this' } });
+        fireEvent.keyDown(textbox, { key: 'Enter' });
+
+        expect(onSend).toHaveBeenCalledWith('please analyze this');
+        expect(textbox.value).toBe('');
+    });
+
     it('renders attachment actions before the MCP slot', () => {
         renderWithProviders(<MessageInput onSend={vi.fn()} mcpSlot={<button type="button">MCP</button>} isCompleted />);
 

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

@@ -346,7 +346,11 @@ export default function MessageInput({
 
     const handleSend = () => {
         const message = value.trim();
-        if (!message || disabled || isSending) return;
+        // Mirror the send button's disabled condition so the keyboard (Enter) path can't
+        // dispatch a send that the parent will reject while files are still uploading —
+        // otherwise the text would be cleared below and lost. The disabled button + its
+        // "wait for files" tooltip already explain why Enter does nothing here.
+        if (!message || disabled || isSending || hasProcessingFiles) return;
 
         onSend(message);
         setValue('');

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

@@ -359,6 +359,10 @@ function MessageItemComponent({
     // Check if message has exportable content (markdown text)
     const hasExportableContent = typeof messageContent === 'string' && messageContent.trim().length > 0;
 
+    // UX config for REQUEST_INPUT messages (narrowed const so it stays typed inside the JSX closures below)
+    const askUserUx =
+        message.type === AgentMessageType.REQUEST_INPUT ? (message.details as AskUserMessageDetails)?.ux : undefined;
+
     // PERFORMANCE: Memoize markdown components to prevent MarkdownRenderer remounts
     const markdownComponents = useMemo(
         () => ({
@@ -639,36 +643,32 @@ function MessageItemComponent({
                     )}
                 >
                     {/* Check for REQUEST_INPUT with UX config - render AskUserWidget instead of plain text */}
-                    {message.type === AgentMessageType.REQUEST_INPUT && (message.details as AskUserMessageDetails)?.ux
-                        ? (() => {
-                              // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
-                              const uxConfig = (message.details as AskUserMessageDetails).ux!;
-                              return (
-                                  <AskUserWidget
-                                      question={typeof messageContent === 'string' ? messageContent : ''}
-                                      options={uxConfig.options}
-                                      variant={uxConfig.variant}
-                                      multiSelect={uxConfig.multiSelect}
-                                      onSelect={(optionId) => onSendMessage?.(optionId)}
-                                      onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
-                                      allowFreeResponse={!uxConfig.options?.length || !!uxConfig.free_response}
-                                      placeholder={uxConfig.free_response?.placeholder}
-                                      submitLabel={uxConfig.free_response?.submit_label}
-                                      onSubmit={(value) => onSendMessage?.(value, uxConfig.free_response?.metadata)}
-                                      hideBorder
-                                      compact
-                                      answered={requestInputAnswered}
-                                  />
-                              );
-                          })()
-                        : visibleMessageContent && (
-                              <div
-                                  className="message-content break-words w-full"
-                                  style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }}
-                              >
-                                  {renderContent(processedContent || visibleMessageContent)}
-                              </div>
-                          )}
+                    {askUserUx ? (
+                        <AskUserWidget
+                            question={typeof messageContent === 'string' ? messageContent : ''}
+                            options={askUserUx.options}
+                            variant={askUserUx.variant}
+                            multiSelect={askUserUx.multiSelect}
+                            onSelect={(optionId) => onSendMessage?.(optionId)}
+                            onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
+                            allowFreeResponse={!askUserUx.options?.length || !!askUserUx.free_response}
+                            placeholder={askUserUx.free_response?.placeholder}
+                            submitLabel={askUserUx.free_response?.submit_label}
+                            onSubmit={(value) => onSendMessage?.(value, askUserUx.free_response?.metadata)}
+                            hideBorder
+                            compact
+                            answered={requestInputAnswered}
+                        />
+                    ) : (
+                        visibleMessageContent && (
+                            <div
+                                className="message-content break-words w-full"
+                                style={{ overflowWrap: 'anywhere', wordBreak: 'break-word' }}
+                            >
+                                {renderContent(processedContent || visibleMessageContent)}
+                            </div>
+                        )
+                    )}
 
                     {messageAttachments.length > 0 && (
                         <AttachmentPreviewList

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

@@ -20,16 +20,16 @@ export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPan
             {/* Plan Steps */}
             {plan.plan && plan.plan.length > 0 ? (
                 <div className="space-y-1.5">
-                    {plan.plan.map((task, index) => {
+                    {plan.plan.map((task) => {
                         // Extract task info
                         const taskId = task.id.toString();
                         const taskGoal = task.goal;
 
                         // Determine task status - use task.status if available or lookup from workstream
                         let status: 'pending' | 'in_progress' | 'completed' | 'skipped' = task.status || 'pending';
-                        if (workstreamStatus.has(taskId)) {
-                            // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
-                            status = workstreamStatus.get(taskId)!;
+                        const wsStatus = workstreamStatus.get(taskId);
+                        if (wsStatus !== undefined) {
+                            status = wsStatus;
                         }
 
                         // Determine status icon and style
@@ -45,8 +45,7 @@ export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPan
                         }
 
                         return (
-                            // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                            <div key={index} className="flex items-start">
+                            <div key={taskId} className="flex items-start">
                                 <div className={`me-1.5 mt-0.5 ${statusColor}`}>
                                     <StatusIcon className="h-3.5 w-3.5" />
                                 </div>

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

@@ -61,9 +61,9 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                                 // Determine task status - use task.status if available or lookup from workstream
                                 let status: 'pending' | 'in_progress' | 'completed' | 'skipped' =
                                     task.status || 'pending';
-                                if (workstreamStatus.has(taskId)) {
-                                    // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
-                                    status = workstreamStatus.get(taskId)!;
+                                const wsStatus = workstreamStatus.get(taskId);
+                                if (wsStatus !== undefined) {
+                                    status = wsStatus;
                                 }
 
                                 // Determine status icon and style
@@ -81,8 +81,7 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                                 }
 
                                 return (
-                                    // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                                    <div key={index} className={`flex p-3 ${bgColor}`}>
+                                    <div key={`plan-step-${index}`} className={`flex p-3 ${bgColor}`}>
                                         <div className={`me-3 mt-0.5 flex-shrink-0 ${statusColor}`}>
                                             <StatusIcon className="h-4 w-4" />
                                         </div>

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

@@ -267,14 +267,13 @@ function FileDisplay({ files, className: fileClassName }: { files: string[]; cla
 
     return (
         <div className={cn('mt-2 flex flex-wrap gap-2', fileClassName)}>
-            {files.map((file, idx) => {
+            {files.map((file) => {
                 const fileName = file.split('/').pop()?.split('?')[0] || 'file';
                 if (isImageUrl(file)) {
                     return (
                         <Button
                             variant="unstyled"
-                            // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                            key={idx}
+                            key={file}
                             className="cursor-pointer p-0"
                             onClick={() => openImage(file, fileName)}
                             title={t('agent.clickToEnlarge')}
@@ -290,8 +289,7 @@ function FileDisplay({ files, className: fileClassName }: { files: string[]; cla
                 }
                 return (
                     <a
-                        // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
-                        key={idx}
+                        key={file}
                         href={file}
                         target="_blank"
                         rel="noopener noreferrer"

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

@@ -1,7 +1,8 @@
 import type { AgentMessage } from '@vertesia/common';
-import { Button, cn } from '@vertesia/ui/core';
+import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@vertesia/ui/core';
 import { i18nInstance, NAMESPACE, useUITranslation } from '@vertesia/ui/i18n';
-import { CheckCircle, Clock } from 'lucide-react';
+import { CheckCircle, ChevronDown, Clock } from 'lucide-react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { getWorkstreamId } from './utils';
 
 interface WorkstreamTabsProps {
@@ -12,6 +13,322 @@ interface WorkstreamTabsProps {
     completionStatus?: Map<string, boolean>; // Optional completion status per workstream
 }
 
+// Tab-item styling for the header workstream bar: filled `bg-info` active pill with
+// count badges and completion icons (distinct from the right panel's underline tabs).
+const TAB_ITEM_BASE =
+    'flex items-center gap-1.5 px-2 py-1 text-xs font-medium whitespace-nowrap transition-colors border-b-2 shrink-0 cursor-pointer';
+const TAB_ITEM_INACTIVE = 'border-transparent text-muted hover:bg-muted';
+const TAB_ITEM_ACTIVE = 'border-info bg-info text-info';
+const TAB_GAP_PX = 4; // matches the `gap-1` between tab items
+
+// Shorten long workstream names for the tab row.
+function truncateName(name: string) {
+    return name.length > 20 ? `${name.substring(0, 18)}...` : name;
+}
+
+type WorkstreamEntry = [id: string, name: string];
+
+interface WorkstreamMoreMenuProps {
+    /** The overflowed workstream entries to list inside the menu. */
+    items: WorkstreamEntry[];
+    current: string;
+    onSelect: (id: string) => void;
+    label: string;
+    /** Whether the active workstream is one of the overflowed entries. */
+    active: boolean;
+    count?: Map<string, number>;
+    completionStatus?: Map<string, boolean>;
+}
+
+/** Trailing "More" dropdown of overflowed workstream tabs; opens on hover, click, or keyboard. */
+function WorkstreamMoreMenu({
+    items,
+    current,
+    onSelect,
+    label,
+    active,
+    count,
+    completionStatus,
+}: WorkstreamMoreMenuProps) {
+    const [open, setOpen] = useState(false);
+    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const openedByHover = useRef(false);
+
+    const cancelClose = () => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    };
+    const openOnHover = () => {
+        cancelClose();
+        openedByHover.current = true;
+        setOpen(true);
+    };
+    // Delay the close so the pointer can travel across the gap onto the menu.
+    const closeAfterDelay = () => {
+        cancelClose();
+        closeTimer.current = setTimeout(() => setOpen(false), 150);
+    };
+
+    // Clear any pending close timer on unmount.
+    useEffect(() => () => clearTimeout(closeTimer.current ?? undefined), []);
+
+    return (
+        // Non-modal: a modal menu sets body `pointer-events: none` while open, which makes
+        // the hover open/close flap. It still closes on outside-click / Escape.
+        <DropdownMenu
+            modal={false}
+            open={open}
+            onOpenChange={(next) => {
+                // Fired by click / keyboard / dismiss (not by hover); keep our state in sync.
+                cancelClose();
+                if (next) openedByHover.current = false;
+                setOpen(next);
+            }}
+        >
+            <DropdownMenuTrigger asChild>
+                {/* Tab-bar primitive: raw button is the menu trigger (asChild). */}
+                <button
+                    type="button"
+                    onMouseEnter={openOnHover}
+                    onMouseLeave={closeAfterDelay}
+                    className={cn(TAB_ITEM_BASE, active ? TAB_ITEM_ACTIVE : TAB_ITEM_INACTIVE)}
+                >
+                    {label}
+                    <ChevronDown className="ms-0.5 size-3.5" />
+                </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+                align="end"
+                className="w-max"
+                onMouseEnter={cancelClose}
+                onMouseLeave={closeAfterDelay}
+                onCloseAutoFocus={(e) => {
+                    // Keep hover-opens from returning the focus ring to the trigger.
+                    if (openedByHover.current) e.preventDefault();
+                }}
+            >
+                {items.map(([id, name]) => {
+                    const showCount = (count?.get(id) ?? 0) > 0;
+                    return (
+                        <DropdownMenuItem
+                            key={id}
+                            onClick={() => onSelect(id)}
+                            className={cn('flex items-center gap-2', id === current && 'text-info')}
+                        >
+                            <span className="truncate">{name}</span>
+                            {showCount && (
+                                <span className="ms-auto inline-flex items-center gap-1">
+                                    <span className="inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] text-muted">
+                                        {count?.get(id)}
+                                    </span>
+                                    {completionStatus &&
+                                        id !== 'all' &&
+                                        (completionStatus.get(id) ? (
+                                            <CheckCircle className="size-3 text-success" />
+                                        ) : (
+                                            <Clock className="size-3 text-attention" />
+                                        ))}
+                                </span>
+                            )}
+                        </DropdownMenuItem>
+                    );
+                })}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
+
+interface WorkstreamOverflowBarProps {
+    entries: WorkstreamEntry[];
+    activeWorkstream: string;
+    onSelectWorkstream: (id: string) => void;
+    count?: Map<string, number>;
+    completionStatus?: Map<string, boolean>;
+}
+
+/**
+ * Workstream tabs as a horizontal row; any that don't fit collapse into a trailing
+ * "More" dropdown. The visible/overflow split is measured from a hidden full-width row,
+ * and the active tab is always promoted into view so it can never hide in the menu.
+ */
+function WorkstreamOverflowBar({
+    entries,
+    activeWorkstream,
+    onSelectWorkstream,
+    count,
+    completionStatus,
+}: WorkstreamOverflowBarProps) {
+    const { t } = useUITranslation();
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
+    const moreRef = useRef<HTMLButtonElement | null>(null);
+    // `count` leading tabs are shown. When `promote` is set, the active tab is pulled
+    // into the last slot (before More) and `count` counts the tabs shown before it.
+    const [layout, setLayout] = useState<{ count: number; promote: boolean }>({
+        count: entries.length,
+        promote: false,
+    });
+
+    const recompute = () => {
+        const container = containerRef.current;
+        if (!container) return;
+        const containerWidth = container.clientWidth;
+        const widths = entries.map((_, i) => itemRefs.current[i]?.offsetWidth ?? 0);
+        const totalAll = widths.reduce((sum, w) => sum + w, 0) + TAB_GAP_PX * Math.max(0, entries.length - 1);
+
+        // How many tabs (in order, optionally skipping one) fit within `available`.
+        const fitCount = (available: number, skipIndex: number) => {
+            let used = 0;
+            let fitted = 0;
+            for (let i = 0; i < entries.length; i++) {
+                if (i === skipIndex) continue;
+                const cand = used + (fitted > 0 ? TAB_GAP_PX : 0) + widths[i];
+                if (cand > available) break;
+                used = cand;
+                fitted += 1;
+            }
+            return fitted;
+        };
+
+        let next: { count: number; promote: boolean };
+        if (totalAll <= containerWidth) {
+            next = { count: entries.length, promote: false };
+        } else {
+            const moreWidth = moreRef.current?.offsetWidth ?? 0;
+            const naturalCount = Math.max(1, fitCount(containerWidth - moreWidth - TAB_GAP_PX, -1));
+            const activeIndex = entries.findIndex(([id]) => id === activeWorkstream);
+            if (activeIndex < 0 || activeIndex < naturalCount) {
+                next = { count: naturalCount, promote: false };
+            } else {
+                // Active tab overflowed: reserve its slot at the end, fit leading tabs before it.
+                const leadAvailable = containerWidth - moreWidth - widths[activeIndex] - TAB_GAP_PX * 2;
+                next = { count: fitCount(leadAvailable, activeIndex), promote: true };
+            }
+        }
+        setLayout((prev) => (prev.count === next.count && prev.promote === next.promote ? prev : next));
+    };
+
+    // Re-measure after every render (tab/label changes) and on container resize.
+    const recomputeRef = useRef(recompute);
+    recomputeRef.current = recompute;
+    useLayoutEffect(() => {
+        recomputeRef.current();
+    });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined') return;
+        const observer = new ResizeObserver(() => recomputeRef.current());
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, []);
+
+    const activeIndex = entries.findIndex(([id]) => id === activeWorkstream);
+    let visible: WorkstreamEntry[];
+    let overflow: WorkstreamEntry[];
+    if (layout.promote && activeIndex >= 0) {
+        // Pull the active tab into the last visible slot; the tab it displaces overflows.
+        const others = entries.filter((_, i) => i !== activeIndex);
+        visible = [...others.slice(0, layout.count), entries[activeIndex]];
+        overflow = others.slice(layout.count);
+    } else {
+        visible = entries.slice(0, layout.count);
+        overflow = entries.slice(layout.count);
+    }
+    const activeInOverflow = overflow.some(([id]) => id === activeWorkstream);
+    const moreLabel = t('agent.moreTabs');
+
+    // Inner tab content (name + count badge + completion icon), shared by the hidden
+    // measurement row and the visible row so their measured widths match.
+    const renderTabInner = (id: string, name: string, isActive: boolean) => {
+        const showCount = (count?.get(id) ?? 0) > 0;
+        return (
+            <>
+                {truncateName(name)}
+                {showCount && (
+                    <span className="flex items-center gap-1">
+                        <span
+                            className={cn(
+                                'inline-flex items-center justify-center p-1 text-xs rounded-full',
+                                isActive ? 'bg-info text-info' : 'bg-muted text-muted',
+                            )}
+                        >
+                            {count?.get(id)}
+                        </span>
+                        {/* Show completion status indicator if we have it and it's not 'all' */}
+                        {completionStatus &&
+                            id !== 'all' &&
+                            (completionStatus.get(id) ? (
+                                <CheckCircle className="size-3 text-success" />
+                            ) : (
+                                <Clock className="size-3 text-attention" />
+                            ))}
+                    </span>
+                )}
+            </>
+        );
+    };
+
+    return (
+        <div ref={containerRef} className="relative mb-1 bg-muted border-b border-muted/20">
+            {/* Hidden measurement row: all tabs + More at natural width, kept separate
+                from the visible row so measuring can't feed back into the layout. */}
+            <div aria-hidden className="pointer-events-none invisible absolute start-0 top-0 flex w-max gap-1">
+                {entries.map(([id, name], i) => (
+                    <button
+                        type="button"
+                        key={id}
+                        tabIndex={-1}
+                        ref={(el) => {
+                            itemRefs.current[i] = el;
+                        }}
+                        className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}
+                    >
+                        {renderTabInner(id, name, false)}
+                    </button>
+                ))}
+                <button type="button" tabIndex={-1} ref={moreRef} className={cn(TAB_ITEM_BASE, TAB_ITEM_INACTIVE)}>
+                    {moreLabel}
+                    <ChevronDown className="ms-0.5 size-3.5" />
+                </button>
+            </div>
+
+            {/* Visible row */}
+            <div className="flex gap-1 overflow-hidden">
+                {visible.map(([id, name]) => {
+                    const isActive = activeWorkstream === id;
+                    return (
+                        // Tab-bar primitive: raw button mirrors the filled active-pill styling.
+                        <button
+                            type="button"
+                            key={id}
+                            aria-current={isActive ? 'page' : undefined}
+                            onClick={() => onSelectWorkstream(id)}
+                            title={name.length > 20 ? name : undefined}
+                            className={cn(TAB_ITEM_BASE, isActive ? TAB_ITEM_ACTIVE : TAB_ITEM_INACTIVE)}
+                        >
+                            {renderTabInner(id, name, isActive)}
+                        </button>
+                    );
+                })}
+
+                {overflow.length > 0 && (
+                    <WorkstreamMoreMenu
+                        items={overflow}
+                        current={activeWorkstream}
+                        onSelect={onSelectWorkstream}
+                        label={moreLabel}
+                        active={activeInOverflow}
+                        count={count}
+                        completionStatus={completionStatus}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}
+
 /**
  * Component that displays tabs for different workstreams
  */
@@ -58,46 +375,13 @@ export default function WorkstreamTabs({
     }
 
     return (
-        <div className="flex overflow-x-auto gap-1 mb-1 bg-muted border-b border-muted/20 sticky top-0 z-10">
-            {sortedWorkstreams.map(([id, name]) => (
-                <Button
-                    variant="unstyled"
-                    key={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}
-                >
-                    {/* Shorten long names for better UI */}
-                    {name.length > 20 ? `${name.substring(0, 18)}...` : name}
-                    {/* biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here */}
-                    {count?.has(id) && count.get(id)! > 0 && (
-                        <div className="flex items-center gap-1">
-                            <span
-                                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>
-                            {/* Show completion status indicator if we have it and it's not 'all' */}
-                            {completionStatus &&
-                                id !== 'all' &&
-                                (completionStatus.get(id) ? (
-                                    <CheckCircle className="size-3 text-success" />
-                                ) : (
-                                    <Clock className="size-3 text-attention" />
-                                ))}
-                        </div>
-                    )}
-                </Button>
-            ))}
-        </div>
+        <WorkstreamOverflowBar
+            entries={sortedWorkstreams}
+            activeWorkstream={activeWorkstream}
+            onSelectWorkstream={onSelectWorkstream}
+            count={count}
+            completionStatus={completionStatus}
+        />
     );
 }