Rename and copilot and add mascot

apps/rowboat/app/globals.css

@@ -147,3 +147,19 @@ body {
   scrollbar-width: thin;
   scrollbar-color: #9ca3af transparent;
 }
+
+@keyframes float {
+  0% { transform: translateX(0); }
+  50% { transform: translateX(24px); }
+  100% { transform: translateX(0); }
+}
+
+@keyframes pulse-mascot {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+/* Combine float (side-to-side) and pulse (scale) */
+.animate-float {
+  animation: float 5s ease-in-out infinite, pulse-mascot 4s infinite;
+}

apps/rowboat/app/projects/[projectId]/copilot/app.tsx

@@ -274,9 +274,9 @@ export const Copilot = forwardRef<{ handleUserMessage: (message: string) => void
                     <div className="flex items-center gap-3">
                         <div className="flex items-center gap-2">
                             <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                                COPILOT
+                                SKIPPER
                             </div>
-                            <Tooltip content="Ask copilot to help you build and modify your workflow">
+                            <Tooltip content="A copilot to help you build and modify your workflow">
                                 <InfoIcon className="w-4 h-4 text-gray-400 cursor-help" />
                             </Tooltip>
                         </div>

apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx

@@ -924,7 +924,7 @@ export function WorkflowEditor({
                         className="gap-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm"
                         startContent={showCopilot ? null : <Sparkles size={16} />}
                     >
-                        {showCopilot ? "Hide Copilot" : "Copilot"}
+                        {showCopilot ? "Hide Skipper" : "Skipper"}
                     </Button>
                 </div>}
                 {!isLive && <>
@@ -961,7 +961,7 @@ export function WorkflowEditor({
                         className="gap-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm"
                         startContent={showCopilot ? null : <Sparkles size={16} />}
                     >
-                        {showCopilot ? "Hide Copilot" : "Copilot"}
+                        {showCopilot ? "Hide Skipper" : "Skipper"}
                     </Button>
                 </>}
             </div>

apps/rowboat/components/common/panel-common.tsx

@@ -72,7 +72,8 @@ export function Panel({
     >
         {variant === 'copilot' && showWelcome && (
             <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none -mt-16">
-                <Sparkles className="w-32 h-32 text-blue-400/40 dark:text-blue-500/25 animate-sparkle" />
+                {/* Replace Sparkles icon with mascot image */}
+                <img src="/mascot.png" alt="Rowboat Mascot" className="w-48 h-48 object-contain mb-2 animate-float" />
                 {SHOW_COPILOT_MARQUEE && (
                     <div className="relative mt-8 max-w-full px-8">
                         <div className="font-mono text-sm whitespace-nowrap text-blue-400/60 dark:text-blue-500/40 font-small inline-flex">