agent-relay 1.6.0 → 2.0.0

package/packages/dashboard/ui/react-components/hooks/useMessages.ts

@@ -0,0 +1,309 @@
+/**
+ * useMessages Hook
+ *
+ * React hook for managing message state with filtering,
+ * threading, and send functionality.
+ */
+
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import type { Message, SendMessageRequest } from '../../types';
+import { api } from '../../lib/api';
+
+export interface UseMessagesOptions {
+  messages: Message[];
+  currentChannel?: string;
+  /** Optional sender name for cloud mode (GitHub username). Falls back to 'Dashboard' if not provided. */
+  senderName?: string;
+}
+
+export interface ThreadInfo {
+  id: string;
+  name: string;
+  lastMessage: Message;
+  messageCount: number;
+  unreadCount: number;
+  participants: string[];
+}
+
+export interface UseMessagesReturn {
+  // Filtered messages
+  messages: Message[];
+  threadMessages: (threadId: string) => Message[];
+
+  // Channel/thread state
+  currentChannel: string;
+  setCurrentChannel: (channel: string) => void;
+  currentThread: string | null;
+  setCurrentThread: (threadId: string | null) => void;
+
+  // Thread info
+  activeThreads: ThreadInfo[];
+  totalUnreadThreadCount: number;
+
+  // Message actions
+  sendMessage: (to: string, content: string, thread?: string, attachmentIds?: string[]) => Promise<boolean>;
+  isSending: boolean;
+  sendError: string | null;
+
+  // Stats
+  totalCount: number;
+  unreadCount: number;
+}
+
+export function useMessages({
+  messages,
+  currentChannel: initialChannel = 'general',
+  senderName,
+}: UseMessagesOptions): UseMessagesReturn {
+  const [currentChannel, setCurrentChannel] = useState(initialChannel);
+  const [currentThreadInternal, setCurrentThreadInternal] = useState<string | null>(null);
+  const [isSending, setIsSending] = useState(false);
+  const [sendError, setSendError] = useState<string | null>(null);
+
+  // Track seen threads with timestamp of when they were last viewed
+  // This allows us to show new messages that arrive after viewing
+  const [seenThreads, setSeenThreads] = useState<Map<string, number>>(new Map());
+
+  // Effective sender name for the current user (used for filtering own messages)
+  const effectiveSenderName = senderName || 'Dashboard';
+
+  // Optimistic messages: shown immediately before server confirms
+  // These have status='sending' and a temp ID prefixed with 'optimistic-'
+  const [optimisticMessages, setOptimisticMessages] = useState<Message[]>([]);
+
+  // Clean up optimistic messages when they appear in the real messages list
+  // Match by to + content only (not from, since server may use different sender like '_DashboardUI')
+  useEffect(() => {
+    if (optimisticMessages.length === 0) return;
+
+    // Create a set of "fingerprints" for real messages (recent ones only)
+    // Use to + content only - the 'from' field may differ between optimistic (user's name)
+    // and real message (server may use '_DashboardUI' as relay client name)
+    const recentMessages = messages.slice(-50); // Only check recent messages for performance
+    const realFingerprints = new Set(
+      recentMessages.map((m) => `${m.to}:${m.content.slice(0, 100)}`)
+    );
+
+    // Remove optimistic messages that now exist in real messages
+    setOptimisticMessages((prev) =>
+      prev.filter((opt) => {
+        const fingerprint = `${opt.to}:${opt.content.slice(0, 100)}`;
+        return !realFingerprints.has(fingerprint);
+      })
+    );
+  }, [messages, optimisticMessages.length]);
+
+  // Combine real messages with optimistic messages
+  const allMessages = useMemo(() => {
+    if (optimisticMessages.length === 0) return messages;
+    // Append optimistic messages at the end (they're the most recent)
+    return [...messages, ...optimisticMessages];
+  }, [messages, optimisticMessages]);
+
+  // Filter messages by current channel
+  // Only exclude reply-chain replies (where thread is another message's ID)
+  // Keep topic thread messages (where thread is a topic name, not a message ID)
+  const filteredMessages = useMemo(() => {
+    // Build set of message IDs for efficient lookup
+    const messageIds = new Set(allMessages.map((m) => m.id));
+
+    // Filter out reply-chain replies (thread points to existing message ID)
+    // Keep topic thread messages (thread is a name, not a message ID)
+    const mainViewMessages = allMessages.filter((m) => {
+      if (!m.thread) return true; // No thread - show it
+      // If thread is a message ID, it's a reply - hide it from main view
+      // If thread is a topic name, show it
+      return !messageIds.has(m.thread);
+    });
+
+    if (currentChannel === 'general') {
+      return mainViewMessages;
+    }
+    return mainViewMessages.filter(
+      (m) => m.from === currentChannel || m.to === currentChannel
+    );
+  }, [allMessages, currentChannel]);
+
+  // Get messages for a specific thread
+  const threadMessages = useCallback(
+    (threadId: string) => allMessages.filter((m) => m.thread === threadId),
+    [allMessages]
+  );
+
+  // Calculate active threads with unread counts
+  const activeThreads = useMemo((): ThreadInfo[] => {
+    const threadMap = new Map<string, Message[]>();
+    const messageIds = new Set(allMessages.map((m) => m.id));
+
+    // Group messages by thread
+    for (const msg of allMessages) {
+      if (msg.thread) {
+        const existing = threadMap.get(msg.thread) || [];
+        existing.push(msg);
+        threadMap.set(msg.thread, existing);
+      }
+    }
+
+    // Convert to ThreadInfo array
+    const threads: ThreadInfo[] = [];
+    for (const [threadId, threadMsgs] of threadMap.entries()) {
+      // Sort by timestamp to get the last message
+      const sorted = [...threadMsgs].sort(
+        (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+      );
+
+      // Get unique participants
+      const participants = [...new Set(threadMsgs.flatMap((m) => [m.from, m.to]))].filter(
+        (p) => p !== '*'
+      );
+
+      // Count unread messages in thread
+      // Consider messages as "read" if they arrived before we last viewed this thread
+      // Exclude messages from current user - users shouldn't get notifications for their own messages
+      const seenTimestamp = seenThreads.get(threadId);
+      const unreadCount = threadMsgs.filter((m) => {
+        if (m.from === effectiveSenderName) return false; // Don't count own messages as unread
+        if (m.isRead) return false; // Already marked as read
+        if (seenTimestamp) {
+          // If we've seen this thread, only count messages after that time
+          return new Date(m.timestamp).getTime() > seenTimestamp;
+        }
+        return true; // Not seen yet, count as unread
+      }).length;
+
+      // Determine thread name: if threadId is a message ID, use first message content as name
+      let name = threadId;
+      if (messageIds.has(threadId)) {
+        // Find the original message that started the thread
+        const originalMsg = allMessages.find((m) => m.id === threadId);
+        if (originalMsg) {
+          // Use first line of content, truncated
+          const firstLine = originalMsg.content.split('\n')[0];
+          name = firstLine.length > 30 ? firstLine.substring(0, 30) + '...' : firstLine;
+        }
+      }
+
+      threads.push({
+        id: threadId,
+        name,
+        lastMessage: sorted[0],
+        messageCount: threadMsgs.length,
+        unreadCount,
+        participants,
+      });
+    }
+
+    // Sort by last activity (most recent first)
+    return threads.sort(
+      (a, b) =>
+        new Date(b.lastMessage.timestamp).getTime() - new Date(a.lastMessage.timestamp).getTime()
+    );
+  }, [allMessages, seenThreads]);
+
+  // Wrapper for setCurrentThread that also marks the thread as seen
+  const setCurrentThread = useCallback((threadId: string | null) => {
+    setCurrentThreadInternal(threadId);
+    if (threadId) {
+      // Mark thread as seen with current timestamp
+      setSeenThreads((prev) => {
+        const next = new Map(prev);
+        next.set(threadId, Date.now());
+        return next;
+      });
+    }
+  }, []);
+
+  // Calculate total unread threads
+  const totalUnreadThreadCount = useMemo(
+    () => activeThreads.filter((t) => t.unreadCount > 0).length,
+    [activeThreads]
+  );
+
+  // Calculate stats
+  const stats = useMemo(() => {
+    const unread = allMessages.filter((m) => !m.isRead).length;
+    return {
+      totalCount: allMessages.length,
+      unreadCount: unread,
+    };
+  }, [allMessages]);
+
+  // Send message function with optimistic updates
+  const sendMessage = useCallback(
+    async (to: string, content: string, thread?: string, attachmentIds?: string[]): Promise<boolean> => {
+      setIsSending(true);
+      setSendError(null);
+
+      // Create optimistic message and add it immediately for snappy UX
+      const from = effectiveSenderName;
+      const optimisticId = `optimistic-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+      const optimisticMsg: Message = {
+        id: optimisticId,
+        from,
+        to,
+        content,
+        timestamp: new Date().toISOString(),
+        status: 'sending',
+        thread,
+        isRead: true, // User's own messages are always "read"
+      };
+
+      // Add optimistic message immediately - UI updates instantly
+      setOptimisticMessages((prev) => [...prev, optimisticMsg]);
+
+      try {
+        const request: SendMessageRequest & { from?: string } = {
+          to,
+          message: content,
+          thread,
+          attachments: attachmentIds,
+        };
+
+        // Include sender name for cloud mode (GitHub username)
+        if (senderName) {
+          request.from = senderName;
+        }
+
+        // Use api.sendMessage which handles:
+        // - Workspace proxy routing (in cloud mode)
+        // - CSRF token headers
+        // - Credentials
+        const result = await api.sendMessage(request);
+
+        if (result.success) {
+          // Success! The optimistic message will be cleaned up when
+          // the real message arrives via WebSocket
+          return true;
+        }
+
+        // Failed - remove the optimistic message and show error
+        setOptimisticMessages((prev) => prev.filter((m) => m.id !== optimisticId));
+        setSendError(result.error || 'Failed to send message');
+        return false;
+      } catch (_error) {
+        // Network error - remove optimistic message
+        setOptimisticMessages((prev) => prev.filter((m) => m.id !== optimisticId));
+        setSendError('Network error');
+        return false;
+      } finally {
+        setIsSending(false);
+      }
+    },
+    [effectiveSenderName, senderName]
+  );
+
+  return {
+    messages: filteredMessages,
+    threadMessages,
+    currentChannel,
+    setCurrentChannel,
+    currentThread: currentThreadInternal,
+    setCurrentThread,
+    activeThreads,
+    totalUnreadThreadCount,
+    sendMessage,
+    isSending,
+    sendError,
+    ...stats,
+  };
+}

package/packages/dashboard/ui/react-components/hooks/useOrchestrator.ts

@@ -0,0 +1,364 @@
+/**
+ * useOrchestrator Hook
+ *
+ * Connects to the daemon orchestrator for workspace and agent management.
+ * Provides real-time updates via WebSocket.
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { Workspace } from '../WorkspaceSelector';
+
+export interface OrchestratorAgent {
+  id: string;
+  name: string;
+  workspaceId: string;
+  provider: string;
+  status: 'running' | 'idle' | 'crashed' | 'restarting' | 'stopped';
+  pid?: number;
+  task?: string;
+  spawnedAt: Date;
+  restartCount: number;
+}
+
+export interface OrchestratorEvent {
+  type: string;
+  workspaceId?: string;
+  agentId?: string;
+  data: unknown;
+  timestamp: Date;
+}
+
+export interface UseOrchestratorOptions {
+  /** Orchestrator API URL (default: http://localhost:3456) */
+  apiUrl?: string;
+  /** Enable orchestrator connection (default: false - orchestrator is optional) */
+  enabled?: boolean;
+}
+
+export interface UseOrchestratorResult {
+  /** All workspaces */
+  workspaces: Workspace[];
+  /** Currently active workspace ID */
+  activeWorkspaceId?: string;
+  /** Active workspace agents */
+  agents: OrchestratorAgent[];
+  /** Connection status */
+  isConnected: boolean;
+  /** Loading state */
+  isLoading: boolean;
+  /** Error state */
+  error: Error | null;
+  /** Switch to a workspace */
+  switchWorkspace: (workspaceId: string) => Promise<void>;
+  /** Add a new workspace */
+  addWorkspace: (path: string, name?: string) => Promise<Workspace>;
+  /** Remove a workspace */
+  removeWorkspace: (workspaceId: string) => Promise<void>;
+  /** Spawn an agent */
+  spawnAgent: (name: string, task?: string, provider?: string) => Promise<OrchestratorAgent>;
+  /** Stop an agent */
+  stopAgent: (agentName: string) => Promise<void>;
+  /** Refresh data */
+  refresh: () => Promise<void>;
+}
+
+export function useOrchestrator(options: UseOrchestratorOptions = {}): UseOrchestratorResult {
+  const { apiUrl = 'http://localhost:3456', enabled = false } = options;
+
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [activeWorkspaceId, setActiveWorkspaceId] = useState<string>();
+  const [agents, setAgents] = useState<OrchestratorAgent[]>([]);
+  const [isConnected, setIsConnected] = useState(false);
+  const [isLoading, setIsLoading] = useState(enabled);
+  const [error, setError] = useState<Error | null>(null);
+
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // Convert API URL to WebSocket URL
+  const wsUrl = apiUrl.replace(/^http/, 'ws');
+
+  // Fetch initial data - only if enabled
+  const fetchData = useCallback(async () => {
+    if (!enabled) {
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await fetch(`${apiUrl}/workspaces`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch workspaces: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      setWorkspaces(
+        data.workspaces.map((w: Workspace) => ({
+          ...w,
+          lastActiveAt: new Date(w.lastActiveAt),
+        }))
+      );
+      setActiveWorkspaceId(data.activeWorkspaceId);
+
+      // Fetch agents for active workspace
+      if (data.activeWorkspaceId) {
+        const agentsResponse = await fetch(`${apiUrl}/workspaces/${data.activeWorkspaceId}/agents`);
+        if (agentsResponse.ok) {
+          const agentsData = await agentsResponse.json();
+          setAgents(
+            agentsData.agents.map((a: OrchestratorAgent) => ({
+              ...a,
+              spawnedAt: new Date(a.spawnedAt),
+            }))
+          );
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiUrl, enabled]);
+
+  // WebSocket connection - only connect if enabled
+  useEffect(() => {
+    // Skip connection if orchestrator is not enabled
+    if (!enabled) {
+      return;
+    }
+
+    const connect = () => {
+      try {
+        const ws = new WebSocket(wsUrl);
+
+        ws.onopen = () => {
+          setIsConnected(true);
+          setError(null);
+        };
+
+        ws.onmessage = (event) => {
+          try {
+            const message = JSON.parse(event.data);
+
+            if (message.type === 'init') {
+              // Initial state from server
+              setWorkspaces(
+                message.data.workspaces.map((w: Workspace) => ({
+                  ...w,
+                  lastActiveAt: new Date(w.lastActiveAt),
+                }))
+              );
+              setActiveWorkspaceId(message.data.activeWorkspaceId);
+              setAgents(
+                message.data.agents?.map((a: OrchestratorAgent) => ({
+                  ...a,
+                  spawnedAt: new Date(a.spawnedAt),
+                })) || []
+              );
+              setIsLoading(false);
+            } else if (message.type === 'event') {
+              handleEvent(message.data as OrchestratorEvent);
+            }
+          } catch (err) {
+            console.error('Failed to parse WebSocket message:', err);
+          }
+        };
+
+        ws.onclose = () => {
+          setIsConnected(false);
+          wsRef.current = null;
+
+          // Reconnect after delay
+          reconnectTimeoutRef.current = setTimeout(connect, 3000);
+        };
+
+        ws.onerror = (err) => {
+          console.error('WebSocket error:', err);
+          ws.close();
+        };
+
+        wsRef.current = ws;
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        // Retry connection
+        reconnectTimeoutRef.current = setTimeout(connect, 3000);
+      }
+    };
+
+    // Start with HTTP fetch, then upgrade to WebSocket
+    fetchData().then(connect);
+
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, [wsUrl, fetchData, enabled]);
+
+  // Handle real-time events
+  const handleEvent = useCallback((event: OrchestratorEvent) => {
+    switch (event.type) {
+      case 'workspace:added':
+        setWorkspaces((prev) => [...prev, event.data as Workspace]);
+        break;
+
+      case 'workspace:removed':
+        setWorkspaces((prev) => prev.filter((w) => w.id !== event.workspaceId));
+        break;
+
+      case 'workspace:updated':
+        setWorkspaces((prev) =>
+          prev.map((w) =>
+            w.id === event.workspaceId ? { ...w, ...(event.data as Partial<Workspace>) } : w
+          )
+        );
+        break;
+
+      case 'workspace:switched':
+        setActiveWorkspaceId((event.data as { currentId: string }).currentId);
+        break;
+
+      case 'agent:spawned':
+        setAgents((prev) => [...prev, event.data as OrchestratorAgent]);
+        break;
+
+      case 'agent:stopped':
+      case 'agent:crashed':
+        setAgents((prev) => prev.filter((a) => a.name !== (event.data as { name: string }).name));
+        break;
+
+      case 'agent:restarted':
+        setAgents((prev) =>
+          prev.map((a) =>
+            a.name === (event.data as { name: string }).name
+              ? { ...a, status: 'running' as const, restartCount: a.restartCount + 1 }
+              : a
+          )
+        );
+        break;
+    }
+  }, []);
+
+  // Switch workspace
+  const switchWorkspace = useCallback(
+    async (workspaceId: string) => {
+      const response = await fetch(`${apiUrl}/workspaces/${workspaceId}/switch`, {
+        method: 'POST',
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to switch workspace: ${response.statusText}`);
+      }
+
+      // Fetch agents for new workspace
+      const agentsResponse = await fetch(`${apiUrl}/workspaces/${workspaceId}/agents`);
+      if (agentsResponse.ok) {
+        const agentsData = await agentsResponse.json();
+        setAgents(
+          agentsData.agents.map((a: OrchestratorAgent) => ({
+            ...a,
+            spawnedAt: new Date(a.spawnedAt),
+          }))
+        );
+      }
+    },
+    [apiUrl]
+  );
+
+  // Add workspace
+  const addWorkspace = useCallback(
+    async (path: string, name?: string): Promise<Workspace> => {
+      const response = await fetch(`${apiUrl}/workspaces`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path, name }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to add workspace');
+      }
+
+      return response.json();
+    },
+    [apiUrl]
+  );
+
+  // Remove workspace
+  const removeWorkspace = useCallback(
+    async (workspaceId: string) => {
+      const response = await fetch(`${apiUrl}/workspaces/${workspaceId}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to remove workspace: ${response.statusText}`);
+      }
+    },
+    [apiUrl]
+  );
+
+  // Spawn agent
+  const spawnAgent = useCallback(
+    async (name: string, task?: string, provider?: string): Promise<OrchestratorAgent> => {
+      if (!activeWorkspaceId) {
+        throw new Error('No active workspace');
+      }
+
+      const response = await fetch(`${apiUrl}/workspaces/${activeWorkspaceId}/agents`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, task, provider }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to spawn agent');
+      }
+
+      return response.json();
+    },
+    [apiUrl, activeWorkspaceId]
+  );
+
+  // Stop agent
+  const stopAgent = useCallback(
+    async (agentName: string) => {
+      if (!activeWorkspaceId) {
+        throw new Error('No active workspace');
+      }
+
+      const response = await fetch(
+        `${apiUrl}/workspaces/${activeWorkspaceId}/agents/${agentName}`,
+        {
+          method: 'DELETE',
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`Failed to stop agent: ${response.statusText}`);
+      }
+    },
+    [apiUrl, activeWorkspaceId]
+  );
+
+  return {
+    workspaces,
+    activeWorkspaceId,
+    agents,
+    isConnected,
+    isLoading,
+    error,
+    switchWorkspace,
+    addWorkspace,
+    removeWorkspace,
+    spawnAgent,
+    stopAgent,
+    refresh: fetchData,
+  };
+}