@uipath/apollo-wind 0.13.0 → 0.14.0

package/dist/components/custom/panel-flow.d.ts

@@ -4,10 +4,24 @@ export interface FlowPanelNavItem {
     label: string;
     icon: React.ReactNode;
 }
+export interface FlowPanelToolItem {
+    icon: 'search' | 'bot';
+    title: string;
+    description: string;
+}
+export interface FlowPanelToolCard {
+    title: string;
+    items: FlowPanelToolItem[];
+}
 export interface FlowPanelChatMessage {
     id: string;
     role: 'user' | 'assistant';
-    content: string;
+    /** Text content — user bubble or simple assistant text */
+    content?: string;
+    /** Collapsible reasoning trace label shown above tool card */
+    traceLabel?: string;
+    /** Expandable tool/agent card */
+    toolCard?: FlowPanelToolCard;
 }
 export interface FlowPanelProps {
     className?: string;
@@ -31,8 +45,8 @@ export interface FlowPanelProps {
  * chat panel.
  *
  * - **Collapsed**: 60px icon rail with logo, nav icons, and avatar
- * - **Expanded**: Icon rail + 420px chat panel with Flow/Autopilot tabs,
- *   chat messages, and input field
+ * - **Expanded**: Icon rail + 420px chat panel with Flow title,
+ *   chat messages, and composer input
  */
 export declare function FlowPanel({ className, open, onOpenChange, navItems, activeNavId, onNavChange, chatMessages, expandedContent, }: FlowPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare const defaultFlowNavItems: FlowPanelNavItem[];

package/dist/components/custom/panel-flow.js

@@ -1,19 +1,42 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CornerDownLeft, House, MessageCircle, PanelRightOpen, Plus, Workflow } from "lucide-react";
+import { Bot, Brain, ChevronUp, Copy, House, MessageCircle, PanelRightOpen, RefreshCcw, Search, ThumbsDown, ThumbsUp, Workflow } from "lucide-react";
 import { useState } from "react";
 import { Avatar, AvatarFallback } from "../ui/avatar.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
 import { cn } from "../../lib/index.js";
+import { ChatComposer } from "./chat-composer.js";
 function UiPathLogo() {
     return /*#__PURE__*/ jsx("div", {
-        className: "flex h-9 w-9 items-center justify-center rounded-lg bg-brand shadow-sm",
-        children: /*#__PURE__*/ jsx("span", {
-            className: "text-xs font-bold text-foreground-on-accent select-none",
-            children: "Ui"
+        className: "flex h-9 w-9 items-center justify-center overflow-clip rounded-lg bg-[#0092b8] shadow-sm",
+        children: /*#__PURE__*/ jsxs("svg", {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "h-[22px] w-[22px]",
+            "aria-hidden": "true",
+            children: [
+                /*#__PURE__*/ jsx("path", {
+                    d: "M18.57 11.4014H18.273C17.3139 11.4014 16.7183 12.002 16.7183 12.9686V22.4331C16.7183 23.3997 17.3139 24.0003 18.273 24.0003H18.57C19.5289 24.0003 20.1246 23.3997 20.1246 22.4331V12.9686C20.1246 12.002 19.5289 11.4014 18.57 11.4014Z",
+                    fill: "white"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M22.689 5.54073C20.5215 5.19295 18.8111 3.48437 18.463 1.31918C18.4564 1.27831 18.4034 1.27831 18.3968 1.31918C18.0487 3.48437 16.3383 5.19295 14.1708 5.54073C14.1299 5.54728 14.1299 5.60028 14.1708 5.60683C16.3383 5.95453 18.0487 7.66319 18.3968 9.82838C18.4034 9.86925 18.4564 9.86925 18.463 9.82838C18.8111 7.66319 20.5215 5.95453 22.689 5.60683C22.73 5.60028 22.73 5.54728 22.689 5.54073ZM20.5595 5.59031C19.4757 5.76416 18.6205 6.61848 18.4465 7.70108C18.4432 7.72151 18.4167 7.72151 18.4134 7.70108C18.2393 6.61848 17.3841 5.76416 16.3003 5.59031C16.2799 5.58703 16.2799 5.56053 16.3003 5.55725C17.3841 5.38337 18.2393 4.52907 18.4134 3.44648C18.4167 3.42604 18.4432 3.42604 18.4465 3.44648C18.6205 4.52907 19.4757 5.38337 20.5595 5.55725C20.5799 5.56053 20.5799 5.58703 20.5595 5.59031Z",
+                    fill: "white"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M23.9846 2.15915C22.9008 2.33301 22.0456 3.18733 21.8716 4.26993C21.8683 4.29036 21.8418 4.29036 21.8385 4.26993C21.6645 3.18733 20.8092 2.33301 19.7255 2.15915C19.705 2.15588 19.705 2.12938 19.7255 2.1261C20.8092 1.95221 21.6645 1.09792 21.8385 0.0153254C21.8418 -0.00510845 21.8683 -0.00510845 21.8716 0.0153254C22.0456 1.09792 22.9008 1.95221 23.9846 2.1261C24.0051 2.12938 24.0051 2.15588 23.9846 2.15915Z",
+                    fill: "white"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M12.7647 6.85913H12.4063C11.4704 6.85913 10.889 7.4373 10.889 8.36778V15.8529C10.889 19.4018 9.80316 20.8493 7.14102 20.8493C4.47888 20.8493 3.393 19.3952 3.393 15.8306V8.36778C3.393 7.4373 2.8116 6.85913 1.87582 6.85913H1.51723C0.581398 6.85913 0 7.4373 0 8.36778V15.8529C0 21.259 2.40265 24.0001 7.14102 24.0001C11.8794 24.0001 14.2819 21.259 14.2819 15.8529V8.36778C14.2819 7.4373 13.7005 6.85913 12.7647 6.85913Z",
+                    fill: "white"
+                })
+            ]
         })
     });
 }
-function IconRail({ navItems, activeId, onNavClick, hasShadow }) {
+function IconRail({ navItems, activeId, onNavClick, onLogoClick, hasShadow }) {
     return /*#__PURE__*/ jsxs("div", {
         className: cn('flex w-[60px] shrink-0 flex-col justify-between bg-surface-overlay', hasShadow && 'shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)]'),
         children: [
@@ -22,21 +45,41 @@ function IconRail({ navItems, activeId, onNavClick, hasShadow }) {
                 children: [
                     /*#__PURE__*/ jsx("div", {
                         className: "flex h-[60px] w-[60px] shrink-0 items-center justify-center",
-                        children: /*#__PURE__*/ jsx(UiPathLogo, {})
+                        children: /*#__PURE__*/ jsxs(Tooltip, {
+                            children: [
+                                /*#__PURE__*/ jsx(TooltipTrigger, {
+                                    asChild: true,
+                                    children: /*#__PURE__*/ jsx("button", {
+                                        type: "button",
+                                        onClick: onLogoClick,
+                                        "aria-label": "UiPath",
+                                        className: "rounded-lg transition-opacity hover:opacity-80",
+                                        children: /*#__PURE__*/ jsx(UiPathLogo, {})
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(TooltipContent, {
+                                    side: "right",
+                                    children: "UiPath"
+                                })
+                            ]
+                        })
                     }),
                     /*#__PURE__*/ jsx("nav", {
-                        className: "flex flex-col items-center pt-[18px]",
+                        className: "flex flex-col items-center gap-1 pt-[18px]",
                         children: navItems.map((item)=>/*#__PURE__*/ jsxs(Tooltip, {
                                 children: [
                                     /*#__PURE__*/ jsx(TooltipTrigger, {
                                         asChild: true,
                                         children: /*#__PURE__*/ jsx("button", {
                                             type: "button",
-                                            className: cn('flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground', activeId === item.id && 'text-brand-foreground'),
+                                            className: "group flex h-12 w-full items-center justify-center",
                                             onClick: ()=>onNavClick(item.id),
                                             children: /*#__PURE__*/ jsx("div", {
-                                                className: cn('flex h-9 w-9 items-center justify-center rounded-lg transition-colors', activeId === item.id && 'bg-surface-hover'),
-                                                children: item.icon
+                                                className: cn('flex h-9 w-9 items-center justify-center rounded-lg text-foreground-muted group-hover:bg-surface-hover group-hover:text-foreground-hover', activeId === item.id && 'bg-surface-hover text-foreground-hover'),
+                                                children: /*#__PURE__*/ jsx("div", {
+                                                    className: "h-5 w-5 group-hover:scale-[1.2]",
+                                                    children: item.icon
+                                                })
                                             })
                                         })
                                     }),
@@ -62,75 +105,180 @@ function IconRail({ navItems, activeId, onNavClick, hasShadow }) {
         ]
     });
 }
+const toolIconMap = {
+    search: Search,
+    bot: Bot
+};
+function ToolCard({ card }) {
+    const [open, setOpen] = useState(true);
+    return /*#__PURE__*/ jsx(Collapsible, {
+        open: open,
+        onOpenChange: setOpen,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "overflow-hidden rounded-2xl border border-surface-hover",
+            children: [
+                /*#__PURE__*/ jsx(CollapsibleTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        className: "flex w-full items-center justify-between border-b border-surface-hover p-4",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "whitespace-nowrap text-sm font-normal leading-5 text-foreground",
+                                children: card.title
+                            }),
+                            /*#__PURE__*/ jsx(ChevronUp, {
+                                className: cn('h-4 w-4 shrink-0 text-foreground-muted transition-transform duration-200', !open && 'rotate-180')
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(CollapsibleContent, {
+                    className: "overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up",
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-col gap-2 pb-4 pt-1",
+                        children: [
+                            /*#__PURE__*/ jsx("p", {
+                                className: "px-4 py-[5px] text-xs text-foreground-muted",
+                                children: "Agents and tools used"
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "flex flex-col gap-3",
+                                children: card.items.map((item, i)=>{
+                                    const Icon = toolIconMap[item.icon];
+                                    return /*#__PURE__*/ jsxs("div", {
+                                        className: "flex items-start gap-2.5 pl-4 pr-9",
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "flex h-5 w-5 shrink-0 items-center justify-center",
+                                                children: /*#__PURE__*/ jsx(Icon, {
+                                                    className: "h-4 w-4 text-foreground-secondary"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: "flex flex-col gap-0.5",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("p", {
+                                                        className: "text-sm font-normal leading-4 text-foreground",
+                                                        children: item.title
+                                                    }),
+                                                    /*#__PURE__*/ jsx("p", {
+                                                        className: "text-sm font-normal leading-5 text-foreground-muted",
+                                                        children: item.description
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }, i);
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+function MessageActions() {
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex items-center gap-2",
+        children: [
+            {
+                icon: RefreshCcw,
+                label: 'Refresh'
+            },
+            {
+                icon: ThumbsUp,
+                label: 'Thumbs up'
+            },
+            {
+                icon: ThumbsDown,
+                label: 'Thumbs down'
+            },
+            {
+                icon: Copy,
+                label: 'Copy'
+            }
+        ].map(({ icon: Icon, label })=>/*#__PURE__*/ jsx("button", {
+                type: "button",
+                "aria-label": label,
+                className: "flex h-6 w-6 items-center justify-center overflow-hidden rounded text-foreground-muted hover:text-foreground",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    className: "h-4 w-4"
+                })
+            }, label))
+    });
+}
 function DefaultChatContent({ chatMessages }) {
+    const [openTraces, setOpenTraces] = useState({});
+    const isTraceOpen = (id)=>openTraces[id] ?? true;
+    const toggleTrace = (id)=>{
+        setOpenTraces((prev)=>({
+                ...prev,
+                [id]: !isTraceOpen(id)
+            }));
+    };
     return /*#__PURE__*/ jsx("div", {
-        className: "flex flex-1 flex-col justify-end gap-7 overflow-y-auto",
-        children: chatMessages.map((msg)=>'user' === msg.role ? /*#__PURE__*/ jsx("div", {
-                className: "flex flex-col items-end pr-6",
+        className: "flex flex-1 flex-col justify-end gap-7 overflow-y-auto py-2",
+        children: chatMessages.map((msg)=>{
+            if ('user' === msg.role) return /*#__PURE__*/ jsx("div", {
+                className: "flex flex-col items-end pl-4 w-full",
                 children: /*#__PURE__*/ jsx("div", {
-                    className: "max-w-[360px] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-[4px] bg-surface-raised px-6 py-4",
+                    className: "max-w-[360px] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-[4px] bg-surface-raised pl-6 pr-9 py-4",
                     children: /*#__PURE__*/ jsx("p", {
-                        className: "text-base leading-6 tracking-[-0.4px] text-foreground",
+                        className: "text-sm font-normal leading-6 text-foreground-secondary",
                         children: msg.content
                     })
                 })
-            }, msg.id) : /*#__PURE__*/ jsx("div", {
-                className: "flex items-center gap-2",
-                children: /*#__PURE__*/ jsx("p", {
-                    className: "text-base font-medium leading-5 text-foreground-muted",
-                    children: msg.content
-                })
-            }, msg.id))
-    });
-}
-function ChatInput() {
-    return /*#__PURE__*/ jsxs("div", {
-        className: "flex flex-col gap-3",
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: "flex h-12 items-center rounded-2xl border border-border bg-surface-raised px-4",
-                children: /*#__PURE__*/ jsx("input", {
-                    type: "text",
-                    placeholder: "Ask me to help build your Flow",
-                    className: "flex-1 bg-transparent text-sm text-foreground placeholder:text-foreground-subtle outline-none",
-                    readOnly: true
-                })
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "flex items-center justify-between",
+            }, msg.id);
+            const traceOpen = isTraceOpen(msg.id);
+            return /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-4",
                 children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex items-center gap-2",
+                    msg.traceLabel && /*#__PURE__*/ jsxs(Collapsible, {
+                        open: traceOpen,
+                        onOpenChange: ()=>toggleTrace(msg.id),
                         children: [
-                            /*#__PURE__*/ jsx("button", {
-                                type: "button",
-                                className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground",
-                                "aria-label": "Add attachment",
-                                children: /*#__PURE__*/ jsx(Plus, {
-                                    className: "h-5 w-5"
+                            /*#__PURE__*/ jsx(CollapsibleTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsxs("button", {
+                                    type: "button",
+                                    className: "flex items-center gap-2 text-left",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Brain, {
+                                            className: "h-4 w-4 shrink-0 text-foreground-muted"
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-sm font-medium leading-5 text-foreground-muted",
+                                            children: msg.traceLabel
+                                        }),
+                                        /*#__PURE__*/ jsx(ChevronUp, {
+                                            className: cn('h-4 w-4 shrink-0 text-foreground-muted transition-transform duration-200', !traceOpen && 'rotate-180')
+                                        })
+                                    ]
                                 })
                             }),
-                            /*#__PURE__*/ jsx("button", {
-                                type: "button",
-                                className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground",
-                                "aria-label": "Add workflow",
-                                children: /*#__PURE__*/ jsx(Workflow, {
-                                    className: "h-5 w-5"
+                            msg.toolCard && /*#__PURE__*/ jsx(CollapsibleContent, {
+                                className: "overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up",
+                                children: /*#__PURE__*/ jsxs("div", {
+                                    className: "flex flex-col gap-2 pt-4",
+                                    children: [
+                                        /*#__PURE__*/ jsx(ToolCard, {
+                                            card: msg.toolCard
+                                        }),
+                                        /*#__PURE__*/ jsx(MessageActions, {})
+                                    ]
                                 })
                             })
                         ]
                     }),
-                    /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        className: "flex h-8 w-8 items-center justify-center rounded-full bg-brand text-foreground-on-accent",
-                        "aria-label": "Submit message",
-                        children: /*#__PURE__*/ jsx(CornerDownLeft, {
-                            className: "h-4 w-4"
-                        })
+                    msg.content && /*#__PURE__*/ jsx("p", {
+                        className: "text-sm font-normal leading-5 text-foreground-muted",
+                        children: msg.content
                     })
                 ]
-            })
-        ]
+            }, msg.id);
+        })
     });
 }
 function ExpandedPanel({ chatMessages, expandedContent, onClose }) {
@@ -140,22 +288,13 @@ function ExpandedPanel({ chatMessages, expandedContent, onClose }) {
             /*#__PURE__*/ jsxs("div", {
                 className: "flex items-center justify-between",
                 children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex items-center gap-4 text-base tracking-[-0.6px] leading-9",
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: "font-bold text-foreground",
-                                children: "Flow"
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: "font-medium text-foreground-subtle",
-                                children: "Autopilot"
-                            })
-                        ]
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-base font-bold leading-9 tracking-tight text-foreground",
+                        children: "Flow"
                     }),
                     /*#__PURE__*/ jsx("button", {
                         type: "button",
-                        className: "text-foreground-muted transition-colors hover:text-foreground",
+                        className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground",
                         onClick: onClose,
                         "aria-label": "Close panel",
                         children: /*#__PURE__*/ jsx(PanelRightOpen, {
@@ -167,7 +306,12 @@ function ExpandedPanel({ chatMessages, expandedContent, onClose }) {
             expandedContent ?? /*#__PURE__*/ jsx(DefaultChatContent, {
                 chatMessages: chatMessages
             }),
-            /*#__PURE__*/ jsx(ChatInput, {})
+            /*#__PURE__*/ jsx("div", {
+                className: "pt-12",
+                children: /*#__PURE__*/ jsx(ChatComposer, {
+                    placeholder: "Ask me to help build your Flow"
+                })
+            })
         ]
     });
 }
@@ -179,6 +323,9 @@ function FlowPanel({ className, open = false, onOpenChange, navItems = [], activ
         onNavChange?.(id);
         onOpenChange?.(true);
     };
+    const handleLogoClick = ()=>{
+        onOpenChange?.(!open);
+    };
     return /*#__PURE__*/ jsx(TooltipProvider, {
         delayDuration: 300,
         children: /*#__PURE__*/ jsxs("div", {
@@ -188,12 +335,20 @@ function FlowPanel({ className, open = false, onOpenChange, navItems = [], activ
                     navItems: navItems,
                     activeId: activeId,
                     onNavClick: handleNavClick,
+                    onLogoClick: handleLogoClick,
                     hasShadow: open
                 }),
-                open && /*#__PURE__*/ jsx(ExpandedPanel, {
-                    chatMessages: chatMessages,
-                    expandedContent: expandedContent,
-                    onClose: ()=>onOpenChange?.(false)
+                /*#__PURE__*/ jsx("div", {
+                    className: "overflow-hidden shrink-0",
+                    style: {
+                        width: open ? 420 : 0,
+                        transition: 'width 300ms ease-out'
+                    },
+                    children: /*#__PURE__*/ jsx(ExpandedPanel, {
+                        chatMessages: chatMessages,
+                        expandedContent: expandedContent,
+                        onClose: ()=>onOpenChange?.(false)
+                    })
                 })
             ]
         })
@@ -204,21 +359,21 @@ const defaultFlowNavItems = [
         id: 'chat',
         label: 'Chat',
         icon: /*#__PURE__*/ jsx(MessageCircle, {
-            className: "h-5 w-5"
+            className: "h-full w-full"
         })
     },
     {
         id: 'home',
         label: 'Home',
         icon: /*#__PURE__*/ jsx(House, {
-            className: "h-5 w-5"
+            className: "h-full w-full"
         })
     },
     {
         id: 'flows',
         label: 'Flows',
         icon: /*#__PURE__*/ jsx(Workflow, {
-            className: "h-5 w-5"
+            className: "h-full w-full"
         })
     }
 ];

package/dist/components/custom/toolbar-canvas.cjs

@@ -32,32 +32,34 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 function ToolbarSeparator() {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: "h-8 w-px bg-border-subtle"
+        className: "h-8 w-px bg-surface-overlay"
     });
 }
-function ToolbarButton({ icon, label, onClick }) {
+function ToolbarButton({ icon: Icon, label, onClick }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
         type: "button",
-        className: "flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground",
+        className: "group flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:bg-surface-hover hover:text-foreground",
         onClick: onClick,
         "aria-label": label,
-        children: icon
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+            className: "h-5 w-5 group-hover:h-6 group-hover:w-6"
+        })
     });
 }
 function FlowCanvasToolbar({ className, activeMode = 'build', onModeChange }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('flex h-[60px] items-center gap-2 rounded-3xl border border-border bg-surface-raised px-2.5', className),
+        className: (0, index_cjs_namespaceObject.cn)('flex h-[60px] items-center gap-2 rounded-[24px] border border-surface-overlay bg-surface-raised px-2.5', className),
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1",
+                className: "flex h-10 items-center gap-1 rounded-xl border border-surface-overlay p-1",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
                         type: "button",
-                        className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'build' === activeMode ? 'border border-border bg-surface text-foreground' : 'text-foreground-subtle hover:text-foreground-hover'),
+                        className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5', 'build' === activeMode ? 'border border-surface-hover bg-foreground-inverse text-foreground shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05)] hover:border-transparent hover:bg-surface-hover hover:shadow-none' : 'text-foreground-muted hover:bg-surface-hover hover:text-foreground'),
                         onClick: ()=>onModeChange?.('build'),
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
-                                className: "h-5 w-5"
+                                className: (0, index_cjs_namespaceObject.cn)('h-5 w-5', 'build' === activeMode ? 'text-foreground-accent' : '')
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                 children: "Build"
@@ -66,11 +68,11 @@ function FlowCanvasToolbar({ className, activeMode = 'build', onModeChange }) {
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
                         type: "button",
-                        className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors', 'evaluate' === activeMode ? 'border border-border bg-surface text-foreground' : 'text-foreground-subtle hover:text-foreground-hover'),
+                        className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5', 'evaluate' === activeMode ? 'border border-surface-hover bg-foreground-inverse text-foreground shadow-[0px_4px_4px_0px_rgba(0,0,0,0.05)] hover:border-transparent hover:bg-surface-hover hover:shadow-none' : 'text-foreground-muted hover:bg-surface-hover hover:text-foreground'),
                         onClick: ()=>onModeChange?.('evaluate'),
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ListChecks, {
-                                className: "h-5 w-5"
+                                className: (0, index_cjs_namespaceObject.cn)('h-5 w-5', 'evaluate' === activeMode ? 'text-foreground-accent' : '')
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                 children: "Evaluate"
@@ -81,35 +83,25 @@ function FlowCanvasToolbar({ className, activeMode = 'build', onModeChange }) {
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Undo2, {
-                    className: "h-5 w-5"
-                }),
+                icon: external_lucide_react_namespaceObject.Undo2,
                 label: "Undo"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Redo2, {
-                    className: "h-5 w-5"
-                }),
+                icon: external_lucide_react_namespaceObject.Redo2,
                 label: "Redo"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Play, {
-                    className: "h-5 w-5"
-                }),
+                icon: external_lucide_react_namespaceObject.Play,
                 label: "Run"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarSeparator, {}),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
-                    className: "h-5 w-5"
-                }),
+                icon: external_lucide_react_namespaceObject.Plus,
                 label: "Add node"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolbarButton, {
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.StickyNote, {
-                    className: "h-5 w-5"
-                }),
+                icon: external_lucide_react_namespaceObject.StickyNote,
                 label: "Add note"
             })
         ]