@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/components/WelcomeDialog.tsx

@@ -1,279 +0,0 @@
-import { useEffect, useState } from "react";
-import * as Dialog from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import { useWelcomeStore, type WelcomeData } from "@/stores/useWelcomeStore";
-
-// Bee SVG Component
-function Bee({ delay, startX, startY, duration }: { delay: number; startX: number; startY: number; duration: number }) {
-  const style: React.CSSProperties = {
-    position: "absolute",
-    left: `${startX}%`,
-    top: `${startY}%`,
-    animation: `flyBee ${duration}s ease-in-out ${delay}s infinite`,
-    opacity: 0,
-  };
-
-  return (
-    <svg
-      style={style}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      className="drop-shadow-lg"
-    >
-      <ellipse cx="12" cy="14" rx="6" ry="8" fill="#FBBF24" />
-      <ellipse cx="12" cy="14" rx="3" ry="6" fill="#1F2937" />
-      <circle cx="8" cy="10" r="2" fill="#1F2937" />
-      <circle cx="16" cy="10" r="2" fill="#1F2937" />
-      <path
-        d="M6 8 Q4 4 8 6"
-        stroke="#1F2937"
-        strokeWidth="1"
-        fill="none"
-      />
-      <path
-        d="M18 8 Q20 4 16 6"
-        stroke="#1F2937"
-        strokeWidth="1"
-        fill="none"
-      />
-      <path
-        d="M9 18 L6 22 L9 20 Z"
-        fill="#1F2937"
-      />
-      <path
-        d="M15 18 L18 22 L15 20 Z"
-        fill="#1F2937"
-      />
-    </svg>
-  );
-}
-
-// Star sparkle
-function Sparkle({ delay, x, y }: { delay: number; x: number; y: number }) {
-  const style: React.CSSProperties = {
-    position: "absolute",
-    left: `${x}%`,
-    top: `${y}%`,
-    animation: `sparkle 2s ease-in-out ${delay}s infinite`,
-  };
-
-  return (
-    <svg style={style} width="12" height="12" viewBox="0 0 24 24" fill="none">
-      <path
-        d="M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z"
-        fill="#FCD34D"
-        className="animate-pulse"
-      />
-    </svg>
-  );
-}
-
-export function WelcomeDialog() {
-  const { isOpen, data, close } = useWelcomeStore();
-  const [countdown, setCountdown] = useState(4);
-
-  useEffect(() => {
-    if (isOpen) {
-      setCountdown(4);
-      const timer = setInterval(() => {
-        setCountdown((prev) => {
-          if (prev <= 1) {
-            clearInterval(timer);
-            close();
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-
-      return () => clearInterval(timer);
-    }
-  }, [isOpen, close]);
-
-  if (!isOpen || !data) return null;
-
-  const channelList = data.channels?.length > 0
-    ? data.channels.join(", ")
-    : "WebChat";
-
-  return (
-    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && close()}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 animate-fade-in" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-full max-w-lg focus:outline-none">
-          <Dialog.Title className="sr-only">Bienvenido al Enjambre</Dialog.Title>
-          <div className="relative bg-gradient-to-br from-amber-50 via-yellow-50 to-orange-100 rounded-3xl shadow-2xl overflow-hidden border-4 border-amber-300/50">
-            {/* Animated background with bees */}
-            <div className="absolute inset-0 overflow-hidden pointer-events-none">
-              {/* Gradient overlay */}
-              <div className="absolute inset-0 bg-gradient-to-b from-amber-200/30 to-orange-200/30" />
-
-              {/* Bees */}
-              <Bee delay={0} startX={10} startY={20} duration={8} />
-              <Bee delay={1} startX={80} startY={30} duration={7} />
-              <Bee delay={2} startX={20} startY={60} duration={9} />
-              <Bee delay={0.5} startX={70} startY={70} duration={8} />
-              <Bee delay={1.5} startX={40} startY={10} duration={10} />
-              <Bee delay={2.5} startX={60} startY={50} duration={7} />
-
-              {/* Sparkles */}
-              <Sparkle delay={0} x={15} y={15} />
-              <Sparkle delay={0.5} x={85} y={25} />
-              <Sparkle delay={1} x={25} y={75} />
-              <Sparkle delay={1.5} x={75} y={80} />
-              <Sparkle delay={2} x={50} y={10} />
-            </div>
-
-            {/* Content */}
-            <div className="relative p-8 text-center">
-              {/* Header */}
-              <div className="mb-6">
-                <h1 className="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-600 via-orange-600 to-amber-700 drop-shadow-sm">
-                  🐝 BIENVENIDO AL ENJAMBRE 🐝
-                </h1>
-                <p className="text-lg font-semibold text-amber-800 mt-2">
-                  ✦在你的 Hive✦
-                </p>
-              </div>
-
-              {/* Divider */}
-              <div className="w-full h-px bg-gradient-to-r from-transparent via-amber-400 to-transparent mb-6" />
-
-              {/* User Info */}
-              <div className="mb-6">
-                {data.user && (
-                  <p className="text-2xl font-bold text-gray-800 mb-4">
-                    👋 Hola, <span className="text-amber-700">{data.user.name}</span>!
-                  </p>
-                )}
-
-                <div className="flex flex-col gap-2 text-left bg-white/60 rounded-xl p-4 backdrop-blur-sm">
-                  {data.agent && (
-                    <p className="text-gray-700">
-                      <span className="font-semibold">🤖 Tu agente:</span>{" "}
-                      <span className="text-amber-700">{data.agent.name}</span>
-                    </p>
-                  )}
-                  {data.agent && (
-                    <p className="text-gray-700">
-                      <span className="font-semibold">🧠 Provider:</span>{" "}
-                      <span className="text-amber-700">{data.agent.provider}/{data.agent.model}</span>
-                    </p>
-                  )}
-                  <p className="text-gray-700">
-                    <span className="font-semibold">📡 Canales:</span>{" "}
-                    <span className="text-amber-700">{channelList}</span>
-                  </p>
-                  {data.voice?.enabled && (
-                    <p className="text-gray-700">
-                      <span className="font-semibold">🎤 Voz:</span>{" "}
-                      <span className="text-amber-700">
-                        {data.voice.sttProvider} + {data.voice.ttsProvider}
-                      </span>
-                    </p>
-                  )}
-                </div>
-              </div>
-
-              {/* Divider */}
-              <div className="w-full h-px bg-gradient-to-r from-transparent via-amber-400 to-transparent mb-6" />
-
-              {/* Hive Capabilities */}
-              <div className="mb-6 text-left">
-                <p className="text-lg font-bold text-gray-800 mb-3 text-center">
-                  💡 LO QUE PUEDES HACER CON HIVE:
-                </p>
-                <div className="grid grid-cols-2 gap-2 text-sm">
-                  <Capability icon="🗣️" text="Voz en tiempo real (STT/TTS)" />
-                  <Capability icon="🔧" text="Code Bridge (claude-code, gemini)" />
-                  <Capability icon="🔌" text="MCP Servers" />
-                  <Capability icon="🎨" text="Canvas visual" />
-                  <Capability icon="📱" text="Múltiples canales" />
-                  <Capability icon="🧠" text="Múltiples agentes" />
-                  <Capability icon="💬" text="Memoria conversacional" />
-                  <Capability icon="⚡" text="Ejecución de tools" />
-                </div>
-              </div>
-
-              {/* Footer */}
-              <div className="mt-4">
-                <p className="text-amber-600 font-medium animate-pulse">
-                  🌐 Abriendo Dashboard en {countdown}s...
-                </p>
-              </div>
-
-              {/* Close button */}
-              <Dialog.Close asChild>
-                <button
-                  className="absolute top-4 right-4 p-2 rounded-full bg-amber-200/80 hover:bg-amber-300 transition-colors"
-                  aria-label="Cerrar"
-                >
-                  <X className="w-5 h-5 text-amber-800" />
-                </button>
-              </Dialog.Close>
-            </div>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-
-      <style>{`
-        @keyframes flyBee {
-          0% {
-            transform: translate(0, 0) rotate(0deg);
-            opacity: 0;
-          }
-          10% {
-            opacity: 1;
-          }
-          25% {
-            transform: translate(100px, -50px) rotate(15deg);
-          }
-          50% {
-            transform: translate(50px, 50px) rotate(-10deg);
-          }
-          75% {
-            transform: translate(-80px, 20px) rotate(20deg);
-          }
-          90% {
-            opacity: 1;
-          }
-          100% {
-            transform: translate(0, 0) rotate(0deg);
-            opacity: 0;
-          }
-        }
-
-        @keyframes sparkle {
-          0%, 100% {
-            opacity: 0;
-            transform: scale(0.5);
-          }
-          50% {
-            opacity: 1;
-            transform: scale(1.2);
-          }
-        }
-
-        .animate-fade-in {
-          animation: fadeIn 0.3s ease-out;
-        }
-
-        @keyframes fadeIn {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-      `}</style>
-    </Dialog.Root>
-  );
-}
-
-function Capability({ icon, text }: { icon: string; text: string }) {
-  return (
-    <div className="flex items-center gap-2 bg-white/50 rounded-lg px-3 py-2">
-      <span className="text-lg">{icon}</span>
-      <span className="text-gray-700 text-xs">{text}</span>
-    </div>
-  );
-}

package/packages/hive-ui/src/components/ui/accordion.tsx

@@ -1,52 +0,0 @@
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/packages/hive-ui/src/components/ui/alert-dialog.tsx

@@ -1,104 +0,0 @@
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

package/packages/hive-ui/src/components/ui/alert.tsx

@@ -1,45 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = "Alert";
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, children, ...props }, ref) => (
-    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props}>
-      {children}
-    </h5>
-  ),
-);
-AlertTitle.displayName = "AlertTitle";
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
-  ),
-);
-AlertDescription.displayName = "AlertDescription";
-
-export { Alert, AlertTitle, AlertDescription };

package/packages/hive-ui/src/components/ui/aspect-ratio.tsx

@@ -1,5 +0,0 @@
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };

package/packages/hive-ui/src/components/ui/avatar.tsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
-import { cn } from "@/lib/utils";
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };

package/packages/hive-ui/src/components/ui/badge.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

package/packages/hive-ui/src/components/ui/bee-loader.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { useLoaderStore } from "@/stores/useLoaderStore";
-import { cn } from "@/lib/utils";
-
-export const BeeLoader: React.FC = () => {
-    const { isLoading, message } = useLoaderStore();
-
-    if (!isLoading) return null;
-
-    return (
-        <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-background/60 backdrop-blur-md animate-in fade-in duration-300">
-            <div className="relative h-32 w-32 animate-bounce duration-[2000ms]">
-                {/* SVG Bee */}
-                <svg
-                    viewBox="0 0 100 100"
-                    className="h-full w-full drop-shadow-[0_0_15px_rgba(245,158,11,0.5)]"
-                >
-                    {/* Wings */}
-                    <g className="animate-[wing-flap_0.1s_infinite]">
-                        <path
-                            d="M50 40 C30 20 10 30 20 50 C30 70 50 60 50 40"
-                            fill="rgba(255,255,255,0.7)"
-                            stroke="white"
-                            strokeWidth="1"
-                        />
-                        <path
-                            d="M50 40 C70 20 90 30 80 50 C70 70 50 60 50 40"
-                            fill="rgba(255,255,255,0.7)"
-                            stroke="white"
-                            strokeWidth="1"
-                        />
-                    </g>
-
-                    {/* Body */}
-                    <ellipse cx="50" cy="55" rx="20" ry="15" fill="#F59E0B" />
-                    <path d="M40 45 Q50 40 60 45" fill="none" stroke="#1F2937" strokeWidth="2" strokeLinecap="round" />
-                    <path d="M35 55 Q50 50 65 55" fill="none" stroke="#1F2937" strokeWidth="3" />
-                    <path d="M40 65 Q50 60 60 65" fill="none" stroke="#1F2937" strokeWidth="2" />
-
-                    {/* Head */}
-                    <circle cx="68" cy="50" r="8" fill="#F59E0B" />
-                    <circle cx="72" cy="48" r="1.5" fill="#1F2937" />
-
-                    {/* Antennae */}
-                    <path d="M70 42 Q75 35 80 38" fill="none" stroke="#1F2937" strokeWidth="1" />
-                    <path d="M68 42 Q65 35 60 38" fill="none" stroke="#1F2937" strokeWidth="1" />
-
-                    {/* Stinger */}
-                    <path d="M30 55 L20 55" stroke="#1F2937" strokeWidth="2" strokeLinecap="round" />
-                </svg>
-            </div>
-
-            {message && (
-                <p className="mt-8 text-lg font-medium tracking-wide text-primary animate-pulse italic">
-                    {message}
-                </p>
-            )}
-
-            <style dangerouslySetInnerHTML={{
-                __html: `
-        @keyframes wing-flap {
-          0%, 100% { transform: scaleY(1); }
-          50% { transform: scaleY(0.5); }
-        }
-      `}} />
-        </div>
-    );
-};