@vertesia/ui 0.79.0 → 0.79.1

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

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

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

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

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

@@ -1,15 +1,7 @@
 import { AsyncExecutionResult } from "@vertesia/client";
 import { Button, Command, CommandGroup, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, useToast } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
-import {
-    Bot,
-    ClipboardList,
-    CopyIcon,
-    DownloadCloudIcon,
-    ExternalLink,
-    MoreVertical,
-    XIcon,
-} from "lucide-react";
+import { Bot, ClipboardList, CopyIcon, DownloadCloudIcon, ExternalLink, MoreVertical, XIcon } from "lucide-react";
 import { PayloadBuilderProvider, usePayloadBuilder } from "../../PayloadBuilder";
 import { getConversationUrl } from "./utils";
 

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

@@ -1,4 +1,5 @@
 import { Plan } from "@vertesia/common";
+import { Badge, Button } from "@vertesia/ui/core";
 import { AlertCircle, CheckCircle, Circle, Clock, X } from "lucide-react";
 
 interface InlinePlanPanelProps {
@@ -27,21 +28,15 @@ export default function InlineSlidingPlanPanel({
 
   // Render the normal panel
   return (
-    <div
-      className="fixed top-24 right-8 bottom-24 z-50 bg-white dark:bg-gray-900 shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden"
-      style={{ width: "350px" }}
-    >
-      <div className="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800">
-        <h3 className="font-bold text-gray-800 dark:text-gray-200 text-base">
+    <div className="h-full shadow-xl border border-muted/20 overflow-hidden">
+      <div className="flex items-center justify-between p-3 border-b border-muted/20">
+        <h3 className="font-bold text-base">
           Plan
         </h3>
-        <button
-          className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full text-gray-500 dark:text-gray-400"
-          onClick={onClose}
-        >
-          <X className="h-4 w-4" />
+        <Button variant={"ghost"} onClick={onClose} >
+          <X className="size-4" />
           <span className="sr-only">Close</span>
-        </button>
+        </Button>
       </div>
       <div
         className="p-3 overflow-y-auto"
@@ -51,8 +46,8 @@ export default function InlineSlidingPlanPanel({
         }}
       >
         {/* Plan Summary - count only tasks, excluding main workstream */}
-        <div className="mb-3 p-2 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-100 dark:border-blue-800">
-          <div className="text-xs font-medium text-blue-700 dark:text-blue-300 mb-1">
+        <div className="mb-3 p-2 bg-info rounded-md border border-info">
+          <div className="text-xs font-medium text-info mb-1">
             Task Progress
           </div>
           <div className="flex items-center gap-2">
@@ -87,13 +82,13 @@ export default function InlineSlidingPlanPanel({
 
               return (
                 <>
-                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                  <div className="w-full bg-muted rounded-full h-2">
                     <div
-                      className="bg-blue-600 h-2 rounded-full"
+                      className="bg-background h-2 rounded-full"
                       style={{ width: `${progressPercentage}%` }}
                     />
                   </div>
-                  <span className="text-xs text-gray-600 dark:text-gray-400">
+                  <span className="text-xs text-muted">
                     {totalTasks > 0 ? `${completedTasks}/${totalTasks}` : "0/0"}
                   </span>
                 </>
@@ -105,39 +100,37 @@ export default function InlineSlidingPlanPanel({
         {/* Plan selector - only shown when multiple plans exist */}
         {plans.length > 1 && (
           <div className="mb-3 flex items-center justify-between">
-            <button
-              className="text-xs px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 disabled:opacity-50"
+            <Button variant={"ghost"}
               onClick={() =>
                 onChangePlan(Math.min(plans.length - 1, activePlanIndex + 1))
               }
               disabled={activePlanIndex >= plans.length - 1}
             >
               Older Plan
-            </button>
-            <div className="text-xs text-gray-500 dark:text-gray-400">
+            </Button>
+            <div className="text-xs text-muted">
               {plans[activePlanIndex]?.timestamp
                 ? new Date(
                   plans[activePlanIndex].timestamp,
                 ).toLocaleTimeString()
                 : "Unknown time"}
             </div>
-            <button
-              className="text-xs px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 disabled:opacity-50"
+            <Button variant={"ghost"}
               onClick={() => onChangePlan(Math.max(0, activePlanIndex - 1))}
               disabled={activePlanIndex <= 0}
             >
               Newer Plan
-            </button>
+            </Button>
           </div>
         )}
 
         {/* Detailed Plan Steps */}
-        <div className="rounded-md border border-gray-200 dark:border-gray-800">
-          <div className="p-2 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
+        <div className="rounded-md border border-muted/30">
+          <div className="p-2 border-b border-muted/30 bg-muted">
             <div className="font-medium text-xs">Step-by-Step Plan</div>
           </div>
 
-          <div className="divide-y divide-gray-100 dark:divide-gray-800 max-h-[calc(100vh-350px)] overflow-y-auto">
+          <div className="divide-y divide-muted/20 max-h-[calc(100vh-350px)] overflow-y-auto">
             {plan.plan && plan.plan.length > 0 ? (
               plan.plan.map((task, index) => {
                 // Extract task info with null checks
@@ -156,53 +149,44 @@ export default function InlineSlidingPlanPanel({
 
                 // Determine status icon and style
                 let StatusIcon = Circle;
-                let statusColor = "text-gray-400";
-                let bgColor = "";
+                let statusColor = "text-muted";
 
                 if (status === "in_progress") {
                   StatusIcon = Clock;
-                  statusColor = "text-blue-500";
-                  bgColor = "bg-blue-50/50 dark:bg-blue-900/10";
+                  statusColor = "text-info";
                 } else if (status === "completed") {
                   StatusIcon = CheckCircle;
-                  statusColor = "text-green-500";
+                  statusColor = "text-success";
                 }
 
                 return (
-                  <div key={index} className={`flex p-3 my-1 ${bgColor}`}>
-                    <div className={`mr-2 mt-0.5 flex-shrink-0 ${statusColor}`}>
-                      <StatusIcon className="h-3.5 w-3.5" />
+                  <div key={index} className={`flex p-3 my-1`}>
+                    <div className={`mr-2 mt-0.5 flex-shrink-0 text-muted`}>
+                      {taskId}
                     </div>
                     <div className="w-full">
-                      <div className="text-sm font-medium text-gray-800 dark:text-gray-200 mb-2">
+                      <div className="text-sm font-medium mb-2 text-muted">
                         {taskGoal}
                       </div>
-                      <div className="mt-1 flex justify-between items-center">
-                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
-                          {taskId}
-                        </span>
-                        <span
-                          className={`ml-2 text-xs px-2 py-0.5 rounded-full ${status === "completed"
-                              ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
-                              : status === "in_progress"
-                                ? "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
-                                : "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
-                            }`}
-                        >
+                      <div className="mt-1 flex justify-end items-center">
+                        <div className={`mr-2 mt-0.5 flex-shrink-0 ${statusColor}`}>
+                          <StatusIcon className="size-3.5" />
+                        </div>
+                        <Badge variant={status === "completed" ? "success" : status === "in_progress" ? "info" : "default"}>
                           {status === "completed"
                             ? "Completed"
                             : status === "in_progress"
                               ? "In Progress"
                               : "Pending"}
-                        </span>
+                        </Badge>
                       </div>
                     </div>
                   </div>
                 );
               })
             ) : (
-              <div className="p-3 text-center text-gray-500 dark:text-gray-400 italic">
-                <AlertCircle className="h-4 w-4 mx-auto mb-2 text-amber-500" />
+              <div className="p-3 text-center text-muted italic">
+                <AlertCircle className="size-4 mx-auto mb-2 text-attention" />
                 <p className="text-xs">No plan has been detected yet</p>
                 <p className="text-xs mt-1">
                   Plans will appear here when the agent creates one
@@ -242,13 +226,13 @@ export default function InlineSlidingPlanPanel({
 
                     if (status === "in_progress") {
                       StatusIcon = Clock;
-                      statusColor = "text-blue-500";
-                      statusBg = "bg-blue-100 dark:bg-blue-800/30";
+                      statusColor = "text-info";
+                      statusBg = "bg-info/20";
                       statusText = "In Progress";
                     } else if (status === "completed") {
                       StatusIcon = CheckCircle;
-                      statusColor = "text-green-500";
-                      statusBg = "bg-green-100 dark:bg-green-800/30";
+                      statusColor = "text-success";
+                      statusBg = "bg-success/20";
                       statusText = "Completed";
                     }
 

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

@@ -7,6 +7,7 @@ interface PlanPanelProps {
     isVisible: boolean;
 }
 
+// todo: remove this file
 export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPanelProps) {
     if (!isVisible) return null;
 

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

@@ -12,14 +12,14 @@ interface PlanPanelProps {
 export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClose }: PlanPanelProps) {
     return (
         plan && (
-            <SlideInPanel isOpen={isOpen} onClose={onClose} title="Agent Plan" width="350px">
+            <SlideInPanel isOpen={isOpen} onClose={onClose} title="Agent Plan">
                 {/* Plan Summary */}
-                <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-100 dark:border-blue-800">
-                    <div className="text-sm font-medium text-blue-700 dark:text-blue-300 mb-1">Plan Progress</div>
+                <div className="mb-4 p-3 bg-info rounded-md border border-info">
+                    <div className="text-sm font-medium text-info mb-1">Plan Progress</div>
                     <div className="flex items-center gap-2">
-                        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+                        <div className="w-full bg-muted rounded-full h-2.5">
                             <div
-                                className="bg-blue-600 h-2.5 rounded-full"
+                                className="bg-info h-2.5 rounded-full"
                                 style={{
                                     width: `${plan.plan && plan.plan.length
                                         ? Math.round(
@@ -34,7 +34,7 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                                 }}
                             />
                         </div>
-                        <span className="text-xs text-gray-600 dark:text-gray-400">
+                        <span className="text-xs text-muted">
                             {plan.plan && plan.plan.length
                                 ? `${Array.from(workstreamStatus.values()).filter((status) => status === "completed").length}/${workstreamStatus.size}`
                                 : "0/0"}
@@ -43,8 +43,8 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                 </div>
 
                 {/* Detailed Plan Steps */}
-                <div className="rounded-md border border-gray-200 dark:border-gray-800">
-                    <div className="p-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
+                <div className="rounded-md border border-muted">
+                    <div className="p-3 border-b border-muted bg-muted/50">
                         <div className="font-medium text-sm">Step-by-Step Plan</div>
                     </div>
 

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

@@ -62,14 +62,14 @@ export default function WorkstreamTabs({
   }
 
   return (
-    <div className="flex overflow-x-auto space-x-1 pb-2 mb-2 border-b-2 border-blue-200 dark:border-blue-900 sticky top-0 bg-white dark:bg-gray-900 z-10 pt-1">
+    <div className="flex overflow-x-auto space-x-1 mb-2 border-b-2 border-muted/20 sticky top-0 z-10 pt-1">
       {sortedWorkstreams.map(([id, name]) => (
         <button
           key={id}
           className={`px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors flex items-center gap-1.5
                         ${activeWorkstream === id
-              ? "bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200 border-b-2 border-blue-500"
-              : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/30 border-b-2 border-transparent"
+              ? "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,10 +79,10 @@ 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 w-4 h-4 text-xs
+                className={`inline-flex items-center justify-center size-4 text-xs rounded-full
                                 ${activeWorkstream === id
-                    ? "bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200"
-                    : "bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+                    ? "bg-info text-info"
+                    : "bg-muted text-muted"
                   }`}
               >
                 {count.get(id)}
@@ -91,9 +91,9 @@ export default function WorkstreamTabs({
               {completionStatus &&
                 id !== "all" &&
                 (completionStatus.get(id) ? (
-                  <CheckCircle className="h-3 w-3 text-green-500" />
+                  <CheckCircle className="size-3 text-success" />
                 ) : (
-                  <Clock className="h-3 w-3 text-amber-500" />
+                  <Clock className="size-3 text-attention" />
                 ))}
             </div>
           )}