diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 99dbadb6b..218d1f446 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -2582,7 +2582,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                     type="button"
                     variant="ghost"
                     className={cn(
-                      "h-8 cursor-pointer rounded-full px-3 text-sm font-medium",
+                      "relative h-8 cursor-pointer rounded-full px-3 text-sm font-medium overflow-visible",
                       activeComposerMode === "video"
                         ? "border border-blue-500 bg-blue-50 text-blue-600 hover:bg-blue-100"
                         : activeComposerMode === "image"
@@ -2590,14 +2590,22 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                           : "border border-zinc-300 bg-zinc-50 text-zinc-700 hover:bg-zinc-100"
                     )}
                   >
-                    {activeComposerMode === "video" ? (
-                      <Video className="mr-1 h-4 w-4" />
-                    ) : activeComposerMode === "image" ? (
-                      <ImagePlus className="mr-1 h-4 w-4" />
-                    ) : (
-                      <Sparkles className="mr-1 h-4 w-4" />
-                    )}
-                    {activeModeLabel}
+                    {activeComposerMode === "agent" ? (
+                      <>
+                        <span className="pointer-events-none absolute -inset-[1px] rounded-full border border-indigo-300/70 shadow-[0_0_14px_rgba(99,102,241,0.22),0_0_12px_rgba(59,130,246,0.18)] animate-pulse" />
+                        <span className="pointer-events-none absolute -inset-[2px] rounded-full bg-gradient-to-r from-blue-300/10 via-violet-300/16 to-blue-300/10 blur-[2px] animate-pulse" />
+                      </>
+                    ) : null}
+                    <span className="relative z-10 flex items-center">
+                      {activeComposerMode === "video" ? (
+                        <Video className="mr-1 h-4 w-4" />
+                      ) : activeComposerMode === "image" ? (
+                        <ImagePlus className="mr-1 h-4 w-4" />
+                      ) : (
+                        <Sparkles className="mr-1 h-4 w-4" />
+                      )}
+                      {activeModeLabel}
+                    </span>
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent