@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/modules/chat/ChatContainer.tsx

@@ -1,268 +0,0 @@
-import { useEffect } from "react";
-import { useChatStore } from "@/stores/chatStore";
-import { useWebSocket } from "@/hooks/useWebSocket";
-import { useUserStore } from "@/stores/userStore";
-import { useGlobalConfigStore } from "@/stores/useGlobalConfigStore";
-import { ChatHistory } from "./ChatHistory";
-import { ChatInput } from "./ChatInput";
-import { apiClient } from "@/lib/api";
-import { Bot, User } from "lucide-react";
-
-interface ChatContainerProps {
-  agentId?: string;
-  sessionId?: string;
-}
-
-function getInitials(name: string) {
-  return name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase() || "?";
-}
-
-export function ChatContainer({ agentId = "agent_id", sessionId = "user_id" }: ChatContainerProps) {
-  const { messages, addMessage, setMessages, isLoading, setLoading, currentSteps, addStep, clearSteps } = useChatStore();
-  const { status, send, subscribe } = useWebSocket();
-  const { currentUser, fetchUser } = useUserStore();
-  const agents = useGlobalConfigStore(s => s.agents);
-  const fetchAgents = useGlobalConfigStore(s => s.fetchAgents);
-
-  const isConnected = status === "connected";
-  const isConnecting = status === "connecting";
-
-  const coordinator = agents.find(a => a.role === 'coordinator' && a.enabled);
-  const agentName = coordinator?.name ?? "Coordinador";
-  const userName = currentUser?.name ?? "Usuario";
-
-  // Load user and agents if needed
-  useEffect(() => {
-    if (!currentUser) fetchUser();
-    if (agents.length === 0) fetchAgents();
-  }, []);
-
-  // Load history
-  useEffect(() => {
-    if (!sessionId) return;
-    const fetchHistory = async () => {
-      try {
-        const response = await apiClient<{ messages: any[] }>(`/api/chat/history?sessionId=${sessionId}`);
-        if (response.messages) {
-          const formattedMessages = response.messages.map((m: any) => ({
-            id: m.id,
-            conversationId: m.session_id,
-            type: (m.role === "user" ? "user" : "agent") as any,
-            content: m.content,
-            agentId: agentId,
-            timestamp: m.created_at,
-          }));
-          setMessages(formattedMessages);
-        }
-      } catch (error) {
-        console.error("Failed to fetch chat history:", error);
-      }
-    };
-    fetchHistory();
-  }, [sessionId, agentId, setMessages]);
-
-  // Subscribe to messages/responses/steps
-  useEffect(() => {
-    const handleMessage = (data: any) => {
-      const messageId = data.id || "agent-streaming-id";
-      const { messages, addMessage, updateMessage, setLoading, clearSteps } = useChatStore.getState();
-      const existingMessage = messages.find(m => m.id === messageId);
-
-      // Handle streaming chunks
-      if (data.isChunk && existingMessage) {
-        // Append chunk to existing message
-        updateMessage(messageId, {
-          content: (existingMessage.content || "") + data.content,
-          timestamp: data.timestamp || existingMessage.timestamp,
-        });
-      } else if (data.isChunk && !existingMessage) {
-        // First chunk - create new message
-        addMessage({
-          id: messageId,
-          conversationId: sessionId,
-          type: "agent" as const,
-          content: data.content || "",
-          agentId: agentId,
-          timestamp: data.timestamp || new Date().toISOString(),
-        });
-      } else if (existingMessage) {
-        // Replace content (non-chunk update)
-        updateMessage(messageId, {
-          content: data.content || existingMessage.content,
-          timestamp: data.timestamp || existingMessage.timestamp,
-        });
-      } else {
-        // New message (non-streaming)
-        addMessage({
-          id: messageId,
-          conversationId: sessionId,
-          type: "agent" as const,
-          content: data.content || data.message || JSON.stringify(data),
-          agentId: agentId,
-          timestamp: data.timestamp || new Date().toISOString(),
-        });
-      }
-
-      // Finalize when not a chunk
-      if (!data.isChunk) {
-        clearSteps();
-        setLoading(false);
-      }
-    };
-
-    const handleAudioMessage = (data: any) => {
-      const messageId = data.id || crypto.randomUUID();
-      const { addMessage, setLoading, clearSteps } = useChatStore.getState();
-
-      addMessage({
-        id: messageId,
-        conversationId: sessionId,
-        type: "agent" as const,
-        content: data.content || "",
-        agentId: agentId,
-        timestamp: data.timestamp || new Date().toISOString(),
-        audio: data.audio ? { base64: data.audio, mimeType: data.mimeType } : undefined,
-      });
-
-      clearSteps();
-      setLoading(false);
-    };
-
-    const handleProgress = (data: any) => {
-      if (data.content) {
-        useChatStore.getState().addStep(data.content);
-      }
-    };
-
-    const handleTyping = (data: any) => {
-      const { setLoading, clearSteps } = useChatStore.getState();
-      if (data.isTyping === false) {
-        clearSteps();
-        setLoading(false);
-      }
-    };
-
-    const unsubMsg = subscribe("message", handleMessage);
-    const unsubResp = subscribe("response", handleMessage);
-    const unsubAudio = subscribe("audio", handleAudioMessage);
-    const unsubProgress = subscribe("progress", handleProgress);
-    const unsubTyping = subscribe("typing", handleTyping);
-    return () => { unsubMsg(); unsubResp(); unsubAudio(); unsubProgress(); unsubTyping(); };
-  }, [subscribe, sessionId, agentId, addMessage, setLoading]);
-
-  const handleSendMessage = (content: string, audioBase64?: string) => {
-    const messageId = crypto.randomUUID();
-    
-    if (audioBase64) {
-      addMessage({
-        id: messageId,
-        conversationId: sessionId,
-        type: "user" as const,
-        content,
-        agentId,
-        timestamp: new Date().toISOString(),
-        audio: { base64: audioBase64, mimeType: "audio/webm" },
-      });
-    } else {
-      addMessage({
-        id: messageId,
-        conversationId: sessionId,
-        type: "user" as const,
-        content,
-        agentId,
-        timestamp: new Date().toISOString(),
-      });
-    }
-    
-    setLoading(true);
-
-    if (isConnected) {
-      if (audioBase64) {
-        send({ type: "audio", audio: audioBase64, sessionId, timestamp: new Date().toISOString() });
-      } else {
-        send({ type: "message", content, sessionId, timestamp: new Date().toISOString() });
-      }
-    } else {
-      setTimeout(() => {
-        if (isLoading) {
-          setLoading(false);
-          addMessage({
-            id: crypto.randomUUID(),
-            conversationId: sessionId,
-            type: "error" as const,
-            content: "No se pudo conectar al agente. Verifica que el gateway esté funcionando.",
-            timestamp: new Date().toISOString(),
-          });
-        }
-      }, 3000);
-    }
-  };
-
-  return (
-    <div className="flex h-full flex-col min-h-0">
-
-      {/* ── Header ──────────────────────────────────────────────────────── */}
-      <div className="flex items-center justify-between border-b border-white/5 px-5 py-3 shrink-0 bg-zinc-950/80 backdrop-blur-sm z-10">
-
-        {/* Agent info */}
-        <div className="flex items-center gap-3">
-          <div className="relative">
-            <div className="h-9 w-9 rounded-xl bg-zinc-900 border border-cyan-500/20 flex items-center justify-center shadow">
-              <Bot className="h-4.5 w-4.5 text-cyan-400" />
-            </div>
-            <span className={`absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-zinc-950 ${
-              isConnected ? "bg-emerald-500" : isConnecting ? "bg-yellow-500 animate-pulse" : "bg-zinc-600"
-            }`} />
-          </div>
-          <div>
-            <p className="text-sm font-bold text-white leading-tight">{agentName}</p>
-            <p className="text-[10px] text-zinc-500 font-mono uppercase tracking-wider">Coordinador</p>
-          </div>
-          <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full border text-[10px] font-bold uppercase tracking-wider ml-1 ${
-            isConnected
-              ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400"
-              : isConnecting
-                ? "bg-yellow-500/10 border-yellow-500/20 text-yellow-400"
-                : "bg-zinc-800 border-zinc-700 text-zinc-500"
-          }`}>
-            <span className={`h-1.5 w-1.5 rounded-full ${
-              isConnected ? "bg-emerald-500 animate-pulse" : isConnecting ? "bg-yellow-500 animate-pulse" : "bg-zinc-600"
-            }`} />
-            {isConnected ? "En línea" : isConnecting ? "Conectando" : "Desconectado"}
-          </div>
-        </div>
-
-        {/* User info */}
-        <div className="flex items-center gap-2.5">
-          <div className="text-right">
-            <p className="text-sm font-semibold text-zinc-200 leading-tight">{userName}</p>
-            <p className="text-[10px] text-zinc-600 font-mono">Usuario</p>
-          </div>
-          <div className="h-9 w-9 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-[12px] font-bold text-white shadow ring-2 ring-zinc-950">
-            {currentUser?.name ? getInitials(currentUser.name) : <User className="h-4 w-4" />}
-          </div>
-        </div>
-      </div>
-
-      {/* ── Messages ────────────────────────────────────────────────────── */}
-      <div className="flex-1 overflow-y-auto min-h-0 bg-zinc-950/30">
-        <ChatHistory
-          messages={messages}
-          isLoading={isLoading}
-          currentSteps={currentSteps}
-          userName={userName}
-          agentName={agentName}
-        />
-      </div>
-
-      {/* ── Input ───────────────────────────────────────────────────────── */}
-      <div className="shrink-0 border-t border-white/5 bg-zinc-950/80 backdrop-blur-sm">
-        <ChatInput
-          onSendMessage={handleSendMessage}
-          disabled={!isConnected && !isConnecting}
-        />
-      </div>
-
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/chat/ChatHistory.tsx

@@ -1,101 +0,0 @@
-import type { Message } from "@/types";
-import { ChatMessage } from "./ChatMessage";
-import { useEffect, useRef } from "react";
-import { Bot, Zap } from "lucide-react";
-
-interface ChatHistoryProps {
-  messages: Message[];
-  isLoading?: boolean;
-  currentSteps?: string[];
-  userName?: string;
-  agentName?: string;
-}
-
-export function ChatHistory({ messages, isLoading = false, currentSteps = [], userName, agentName }: ChatHistoryProps) {
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, isLoading, currentSteps]);
-
-  if (messages.length === 0 && !isLoading) {
-    return (
-      <div className="flex flex-1 flex-col items-center justify-center p-8 gap-4">
-        <div className="relative">
-          <div className="h-16 w-16 rounded-2xl bg-zinc-900 border border-cyan-500/20 flex items-center justify-center shadow-xl">
-            <Bot className="h-8 w-8 text-cyan-400" />
-          </div>
-          <span className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-emerald-500 border-2 border-zinc-950 shadow" />
-        </div>
-        <div className="text-center space-y-1">
-          <p className="text-sm font-semibold text-zinc-300">
-            {agentName ? `${agentName} está listo` : "Agente listo"}
-          </p>
-          <p className="text-xs text-zinc-600">Inicia la conversación escribiendo un mensaje</p>
-        </div>
-        <div className="flex items-center gap-2 mt-2">
-          {["¿Qué puedes hacer?", "Dame un resumen", "Ayúdame con una tarea"].map(hint => (
-            <span
-              key={hint}
-              className="text-[11px] text-zinc-600 border border-white/5 bg-zinc-900/50 px-3 py-1 rounded-full"
-            >
-              {hint}
-            </span>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-1 flex-col gap-4 p-4 min-h-0">
-      {messages.map(message => (
-        <ChatMessage
-          key={message.id}
-          message={message}
-          userName={userName}
-          agentName={agentName}
-        />
-      ))}
-
-      {isLoading && (
-        <div className="flex items-end gap-2">
-          <div className="h-8 w-8 rounded-full bg-zinc-900 border border-cyan-500/20 flex items-center justify-center shrink-0 ring-2 ring-zinc-950">
-            <Bot className="h-4 w-4 text-cyan-400" />
-          </div>
-          <div className="flex flex-col gap-1.5 max-w-[72%]">
-            {/* Step narrations */}
-            {currentSteps.length > 0 && (
-              <div className="flex flex-col gap-1">
-                {currentSteps.map((step, i) => {
-                  const isLatest = i === currentSteps.length - 1;
-                  return (
-                    <div
-                      key={i}
-                      className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl border text-xs transition-all ${
-                        isLatest
-                          ? "bg-zinc-900 border-cyan-500/20 text-cyan-300"
-                          : "bg-zinc-950/50 border-white/5 text-zinc-600"
-                      }`}
-                    >
-                      <Zap className={`h-3 w-3 shrink-0 ${isLatest ? "text-cyan-500 animate-pulse" : "text-zinc-700"}`} />
-                      <span className="leading-tight">{step}</span>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-            {/* Typing dots */}
-            <div className="bg-zinc-900 border border-white/5 px-4 py-3 rounded-2xl rounded-tl-sm flex items-center gap-1.5 w-fit">
-              <span className="h-1.5 w-1.5 rounded-full bg-cyan-500 animate-bounce [animation-delay:0ms]" />
-              <span className="h-1.5 w-1.5 rounded-full bg-cyan-500 animate-bounce [animation-delay:150ms]" />
-              <span className="h-1.5 w-1.5 rounded-full bg-cyan-500 animate-bounce [animation-delay:300ms]" />
-            </div>
-          </div>
-        </div>
-      )}
-
-      <div ref={messagesEndRef} className="h-0" />
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/chat/ChatInput.tsx

@@ -1,108 +0,0 @@
-import { useState, useRef, type KeyboardEvent } from "react";
-import { Textarea } from "@/components/ui/textarea";
-import { SendHorizontal, Mic, Square } from "lucide-react";
-
-interface ChatInputProps {
-  onSendMessage: (content: string, audioBase64?: string) => void;
-  disabled?: boolean;
-}
-
-export function ChatInput({ onSendMessage, disabled = false }: ChatInputProps) {
-  const [message, setMessage] = useState("");
-  const [isRecording, setIsRecording] = useState(false);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const chunksRef = useRef<Blob[]>([]);
-
-  const handleSend = () => {
-    if (message.trim() && !disabled) {
-      onSendMessage(message.trim());
-      setMessage("");
-    }
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-
-  const startRecording = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      const mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
-      mediaRecorderRef.current = mediaRecorder;
-      chunksRef.current = [];
-
-      mediaRecorder.ondataavailable = (e) => {
-        if (e.data.size > 0) {
-          chunksRef.current.push(e.data);
-        }
-      };
-
-      mediaRecorder.onstop = async () => {
-        const blob = new Blob(chunksRef.current, { type: "audio/webm" });
-        const reader = new FileReader();
-        reader.readAsDataURL(blob);
-        reader.onloadend = () => {
-          const base64 = (reader.result as string).split(",")[1];
-          onSendMessage("[Audio mensaje]", base64);
-        };
-        stream.getTracks().forEach(track => track.stop());
-      };
-
-      mediaRecorder.start();
-      setIsRecording(true);
-    } catch (error) {
-      console.error("Error accessing microphone:", error);
-    }
-  };
-
-  const stopRecording = () => {
-    if (mediaRecorderRef.current && isRecording) {
-      mediaRecorderRef.current.stop();
-      setIsRecording(false);
-    }
-  };
-
-  return (
-    <div className="px-4 py-3">
-      <div className={`flex items-end gap-2 rounded-2xl border bg-zinc-900/50 backdrop-blur-sm px-3 py-2 transition-all ${
-        disabled
-          ? "border-white/5 opacity-60"
-          : "border-white/10 focus-within:border-blue-500/40 focus-within:shadow-lg focus-within:shadow-blue-500/5"
-      }`}>
-        <button
-          onClick={isRecording ? stopRecording : startRecording}
-          disabled={disabled}
-          className={`h-8 w-8 rounded-xl flex items-center justify-center shrink-0 mb-0.5 transition-all ${
-            isRecording 
-              ? "bg-red-600 hover:bg-red-500 animate-pulse" 
-              : "bg-zinc-700 hover:bg-zinc-600"
-          } disabled:opacity-30 disabled:cursor-not-allowed text-white`}
-        >
-          {isRecording ? <Square className="h-3.5 w-3.5" /> : <Mic className="h-3.5 w-3.5" />}
-        </button>
-        <Textarea
-          value={message}
-          onChange={e => setMessage(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder={disabled ? "Conectando al agente..." : "Escribe un mensaje..."}
-          disabled={disabled}
-          className="flex-1 min-h-[36px] max-h-[160px] resize-none border-0 bg-transparent p-0 text-sm text-zinc-100 placeholder:text-zinc-600 focus-visible:ring-0 focus-visible:ring-offset-0 leading-relaxed"
-          rows={1}
-        />
-        <button
-          onClick={handleSend}
-          disabled={!message.trim() || disabled}
-          className="h-8 w-8 rounded-xl flex items-center justify-center shrink-0 mb-0.5 transition-all disabled:opacity-30 disabled:cursor-not-allowed bg-blue-600 hover:bg-blue-500 disabled:bg-zinc-800 text-white shadow shadow-blue-600/20"
-        >
-          <SendHorizontal className="h-3.5 w-3.5" />
-        </button>
-      </div>
-      <p className="text-[10px] text-zinc-700 mt-1.5 text-center">
-        {isRecording ? "Grabando... haz clic en ■ para enviar" : "Enter para enviar · Shift+Enter nueva línea · 🎤 para audio"}
-      </p>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/chat/ChatMessage.tsx

@@ -1,137 +0,0 @@
-import { useState } from "react";
-import type { Message } from "@/types";
-import { Bot, AlertTriangle, Play, Pause, Volume2 } from "lucide-react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-
-interface ChatMessageProps {
-  message: Message;
-  userName?: string;
-  agentName?: string;
-}
-
-function getInitials(name: string) {
-  return name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase() || "?";
-}
-
-function formatTime(ts: string) {
-  return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-}
-
-function AudioPlayer({ audio, mimeType = "audio/webm" }: { audio: string; mimeType?: string }) {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [audioUrl, setAudioUrl] = useState<string | null>(null);
-
-  const playAudio = () => {
-    if (!audioUrl) {
-      const url = `data:${mimeType};base64,${audio}`;
-      setAudioUrl(url);
-    }
-    setIsPlaying(true);
-  };
-
-  const pauseAudio = () => {
-    setIsPlaying(false);
-  };
-
-  if (!audio) return null;
-
-  return (
-    <div className="flex items-center gap-2 mt-2">
-      <button
-        onClick={isPlaying ? pauseAudio : playAudio}
-        className="h-8 w-8 rounded-full bg-cyan-600 hover:bg-cyan-500 flex items-center justify-center transition-colors"
-      >
-        {isPlaying ? <Pause className="h-4 w-4 text-white" /> : <Play className="h-4 w-4 text-white ml-0.5" />}
-      </button>
-      {audioUrl && (
-        <audio
-          src={audioUrl}
-          onEnded={() => setIsPlaying(false)}
-          autoPlay={isPlaying}
-          className="hidden"
-        />
-      )}
-      <div className="flex-1 h-8 bg-zinc-800 rounded-lg overflow-hidden">
-        <div className="h-full w-full flex items-center px-2">
-          <Volume2 className="h-4 w-4 text-zinc-400 mr-2" />
-          <div className="flex-1 h-1.5 bg-zinc-700 rounded-full overflow-hidden">
-            <div className="h-full w-1/3 bg-cyan-500 rounded-full animate-pulse" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function ChatMessage({ message, userName = "Tú", agentName = "Agente" }: ChatMessageProps) {
-  const isUser = message.type === "user";
-  const isError = message.type === "error";
-  const isSystem = message.type === "system";
-  const hasAudio = !!message.audio?.base64 || !!message.audio?.url;
-
-  if (isSystem) {
-    return (
-      <div className="flex justify-center my-1">
-        <span className="text-[10px] text-zinc-600 bg-zinc-900/50 border border-white/5 px-3 py-1 rounded-full font-mono">
-          {message.content}
-        </span>
-      </div>
-    );
-  }
-
-  if (isError) {
-    return (
-      <div className="flex items-center gap-2 justify-center my-1">
-        <div className="flex items-center gap-2 text-[11px] text-red-400 bg-red-500/10 border border-red-500/20 px-3 py-1.5 rounded-xl">
-          <AlertTriangle className="h-3 w-3 shrink-0" />
-          {message.content}
-        </div>
-      </div>
-    );
-  }
-
-  if (isUser) {
-    return (
-      <div className="flex items-end justify-end gap-2 group">
-        <div className="flex flex-col items-end gap-1 max-w-[72%]">
-          <div className="bg-gradient-to-br from-blue-600 to-indigo-600 text-white px-4 py-2.5 rounded-2xl rounded-tr-sm shadow-lg shadow-blue-600/10 text-sm leading-relaxed whitespace-pre-wrap">
-            {message.content}
-          </div>
-          {hasAudio && message.audio?.base64 && (
-            <AudioPlayer audio={message.audio.base64} mimeType={message.audio.mimeType} />
-          )}
-          <span className="text-[10px] text-zinc-600 pr-1 opacity-0 group-hover:opacity-100 transition-opacity">
-            {formatTime(message.timestamp)}
-          </span>
-        </div>
-        <div className="h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-[11px] font-bold text-white shrink-0 shadow ring-2 ring-zinc-950">
-          {getInitials(userName)}
-        </div>
-      </div>
-    );
-  }
-
-  // Agent message
-  return (
-    <div className="flex items-end gap-2 group">
-      <div className="h-8 w-8 rounded-full bg-zinc-900 border border-cyan-500/20 flex items-center justify-center shrink-0 shadow ring-2 ring-zinc-950">
-        <Bot className="h-4 w-4 text-cyan-400" />
-      </div>
-      <div className="flex flex-col gap-1 max-w-[72%]">
-        <span className="text-[10px] font-semibold text-cyan-500 pl-1 uppercase tracking-wider">{agentName}</span>
-        <div className="bg-zinc-900 border border-white/5 text-zinc-100 px-4 py-2.5 rounded-2xl rounded-tl-sm text-sm leading-relaxed shadow prose prose-invert prose-p:leading-relaxed prose-pre:bg-black/50 prose-pre:border prose-pre:border-white/10 max-w-none prose-sm">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {message.content}
-          </ReactMarkdown>
-        </div>
-        {hasAudio && message.audio?.base64 && (
-          <AudioPlayer audio={message.audio.base64} mimeType={message.audio.mimeType} />
-        )}
-        <span className="text-[10px] text-zinc-600 pl-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          {formatTime(message.timestamp)}
-        </span>
-      </div>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/chat/ThinkingIndicator.tsx

@@ -1,10 +0,0 @@
-export function ThinkingIndicator() {
-  return (
-    <div className="flex items-center gap-1.5 text-sm text-hive-thinking">
-      <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-hive-thinking" />
-      <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-hive-thinking [animation-delay:0.2s]" />
-      <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-hive-thinking [animation-delay:0.4s]" />
-      <span className="ml-1">Agente pensando…</span>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/layout/AppLayout.tsx

@@ -1,45 +0,0 @@
-import { Outlet } from "react-router-dom";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { Header } from "./Header";
-import { AppSidebar } from "./HiveSidebar";
-import { useWebSocket } from "@/hooks/useWebSocket";
-import { useUserStore } from "@/stores/userStore";
-import { useEffect } from "react";
-
-// Workaround for React Router v7 + React 18 type incompatibility
-// Using type assertion to bypass the JSX element type mismatch
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const OutletComponent = Outlet as any;
-
-export function AppLayout() {
-  const { connect } = useWebSocket();
-  const { currentUser, fetchUser } = useUserStore();
-
-  useEffect(() => {
-    fetchUser();
-  }, [fetchUser]);
-
-  useEffect(() => {
-    if (currentUser?.id) {
-      connect(currentUser.id);
-    }
-  }, [connect, currentUser?.id]);
-
-  return (
-    <SidebarProvider>
-      <AppSidebar />
-      <SidebarInset className="bg-background relative overflow-hidden">
-        {/* Ambient Glows Globales */}
-        <div className="hive-glow-blob hive-glow-blob--blue -top-20 -left-20 h-[500px] w-[500px] opacity-20" />
-        <div className="hive-glow-blob hive-glow-blob--purple -bottom-20 -right-20 h-[500px] w-[500px] opacity-20" />
-
-        <div className="flex flex-1 flex-col overflow-hidden relative z-10">
-          <Header />
-          <main className="hive-page flex-1 min-h-0 p-4 animate-fade-in flex flex-col overflow-auto">
-            <OutletComponent />
-          </main>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
-  );
-}