@agent-relay/dashboard 2.0.82 → 2.0.84

package/src/components/channels/api.ts

@@ -1,11 +1,11 @@
 /**
  * Channels API Service
  *
- * Channels are handled entirely by the daemon (not cloud).
- * Real-time messaging uses the daemon's CHANNEL_* protocol while the HTTP API now reads from daemon storage.
+ * Channels are handled entirely by the broker (not cloud).
+ * Real-time messaging uses the broker's CHANNEL_* protocol while the HTTP API now reads from broker storage.
  *
  * Cloud channels were removed because:
- * - Daemon already has full channel protocol support (CHANNEL_JOIN, CHANNEL_MESSAGE, etc.)
+ * - Broker already has full channel protocol support (CHANNEL_JOIN, CHANNEL_MESSAGE, etc.)
  * - Having two parallel implementations caused confusion
  * - See trajectory traj_fnmapojrllau for architectural decision
  */
@@ -50,7 +50,7 @@ export class ApiError extends Error {
 }
 
 // =============================================================================
-// Channel API Functions - daemon-backed with minimal placeholders
+// Channel API Functions - broker-backed with minimal placeholders
 // =============================================================================
 
 /**
@@ -96,7 +96,7 @@ export async function getChannel(
   _workspaceId: string,
   channelId: string
 ): Promise<GetChannelResponse> {
-  // Minimal channel details until daemon exposes metadata
+  // Minimal channel details until broker exposes metadata
   return {
     channel: {
       id: channelId,
@@ -229,7 +229,7 @@ export async function createChannel(
 }
 
 /**
- * Send a message to a channel via daemon API
+ * Send a message to a channel via broker API
  */
 export async function sendMessage(
   workspaceId: string,
@@ -249,6 +249,7 @@ export async function sendMessage(
         channel: channelId,
         body: request.content,
         thread: request.threadId,
+        attachmentIds: request.attachmentIds,
         workspaceId,
       }),
     });
@@ -279,7 +280,7 @@ export async function sendMessage(
 }
 
 /**
- * Join a channel via daemon API
+ * Join a channel via broker API
  */
 export async function joinChannel(
   workspaceId: string,
@@ -320,7 +321,7 @@ export async function joinChannel(
 }
 
 /**
- * Leave a channel via daemon API
+ * Leave a channel via broker API
  */
 export async function leaveChannel(
   workspaceId: string,
@@ -416,7 +417,7 @@ export async function deleteChannel(
   _workspaceId: string,
   _channelId: string
 ): Promise<void> {
-  // Daemon deletes automatically when empty; nothing to do client-side
+  // Broker deletes automatically when empty; nothing to do client-side
   return;
 }
 
@@ -428,31 +429,31 @@ export async function markRead(
   _channelId: string,
   _upToMessageId?: string
 ): Promise<void> {
-  // TODO: add mark-read to daemon; no-op for now
+  // TODO: add mark-read to broker; no-op for now
   return;
 }
 
 /**
- * Pin a message (no-op in daemon mode)
+ * Pin a message (no-op in broker mode)
  */
 export async function pinMessage(
   _workspaceId: string,
   _channelId: string,
   _messageId: string
 ): Promise<void> {
-  // Pinning not supported in daemon mode
+  // Pinning not supported in broker mode
   return;
 }
 
 /**
- * Unpin a message (no-op in daemon mode)
+ * Unpin a message (no-op in broker mode)
  */
 export async function unpinMessage(
   _workspaceId: string,
   _channelId: string,
   _messageId: string
 ): Promise<void> {
-  // Unpinning not supported in daemon mode
+  // Unpinning not supported in broker mode
   return;
 }
 
@@ -478,7 +479,7 @@ export interface AvailableMember {
 
 /**
  * Get available members for channel invites
- * Returns workspace members (humans) and agents from linked daemons
+ * Returns workspace members (humans) and agents from linked brokers
  */
 export async function getAvailableMembers(
   workspaceId?: string
@@ -519,14 +520,14 @@ export async function getAvailableMembers(
 // =============================================================================
 
 /**
- * Search messages (returns empty in daemon mode - search via relay)
+ * Search messages (returns empty in broker mode - search via relay)
  */
 export async function searchMessages(
   _workspaceId: string,
   query: string,
   _options?: { channelId?: string; limit?: number; offset?: number }
 ): Promise<SearchResponse> {
-  // Search not implemented in daemon mode
+  // Search not implemented in broker mode
   return {
     results: [],
     total: 0,
@@ -685,17 +686,17 @@ export async function getChannelMembers(
 // =============================================================================
 
 /**
- * Always returns true - channels now only use daemon/relay
+ * Always returns true - channels now only use broker/relay
  */
 export function isRealApiEnabled(): boolean {
   return true;
 }
 
 /**
- * No-op - API mode is fixed to daemon/local
+ * No-op - API mode is fixed to broker/local
  */
 export function setApiMode(_useReal: boolean): void {
-  console.log('[ChannelsAPI] Mode is fixed to daemon-based implementation');
+  console.log('[ChannelsAPI] Mode is fixed to broker-based implementation');
 }
 
 export function getApiMode(): 'real' | 'mock' {

package/src/components/channels/types.ts

@@ -6,6 +6,9 @@
  */
 
 import type { ThreadMetadata } from '../../types/threading';
+import type { Agent } from '../../types';
+import type { HumanUser } from '../MentionAutocomplete';
+import type { UserPresence } from '../hooks/usePresence';
 
 /**
  * Channel visibility types.
@@ -296,6 +299,17 @@ export interface ChannelMessageListProps {
   unreadState?: UnreadState;
   /** Current user name */
   currentUser: string;
+  /** Current user info (for avatar fallback) */
+  currentUserInfo?: {
+    displayName: string;
+    avatarUrl?: string;
+  };
+  /** Online users for avatar fallback */
+  onlineUsers?: UserPresence[];
+  /** Agents for avatar fallback */
+  agents?: Agent[];
+  /** Known human users for avatar fallback */
+  humanUsers?: HumanUser[];
   /** Whether loading more messages */
   isLoadingMore?: boolean;
   /** Whether there are more messages to load */
@@ -306,6 +320,8 @@ export interface ChannelMessageListProps {
   onThreadClick?: (messageId: string) => void;
   /** Callback when clicking on a member name (for DM navigation) */
   onMemberClick?: (memberId: string, entityType: 'user' | 'agent') => void;
+  /** Callback when toggling a reaction on a message */
+  onReaction?: (messageId: string, emoji: string, hasReacted: boolean) => void;
 }
 
 /**

package/src/components/hooks/index.ts

@@ -13,13 +13,6 @@ export {
   type OrchestratorEvent,
 } from './useOrchestrator';
 export { useAgentLogs, type UseAgentLogsOptions, type UseAgentLogsReturn, type LogLine, type LogConnectionState } from './useAgentLogs';
-export {
-  useSession,
-  type UseSessionOptions,
-  type UseSessionReturn,
-  type SessionError,
-  type CloudUser,
-} from './useSession';
 export { useTrajectory } from './useTrajectory';
 export {
   useRecentRepos,
@@ -27,12 +20,6 @@ export {
   type UseRecentReposReturn,
   type RecentRepo,
 } from './useRecentRepos';
-export {
-  useWorkspaceStatus,
-  type UseWorkspaceStatusOptions,
-  type UseWorkspaceStatusReturn,
-  type WorkspaceStatus,
-} from './useWorkspaceStatus';
 export {
   useWorkspaceRepos,
   type UseWorkspaceReposOptions,
@@ -46,12 +33,6 @@ export {
   type ChannelMessage,
   type ChannelConnectionState,
 } from './useChannels';
-export {
-  useWorkspaceMembers,
-  filterOnlineUsersByWorkspace,
-  type UseWorkspaceMembersOptions,
-  type UseWorkspaceMembersReturn,
-} from './useWorkspaceMembers';
 export {
   usePinnedAgents,
   type UsePinnedAgentsReturn,

package/src/components/hooks/useMessages.test.ts

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useMessages } from './useMessages';
+
+const mockSendMessage = vi.fn();
+
+vi.mock('../../lib/api', () => ({
+  api: {
+    sendMessage: (...args: unknown[]) => mockSendMessage(...args),
+  },
+}));
+
+describe('useMessages', () => {
+  beforeEach(() => {
+    mockSendMessage.mockReset();
+  });
+
+  it('keeps optimistic messages in sending status after successful send', async () => {
+    mockSendMessage.mockResolvedValue({ success: true });
+    const baseMessages: Parameters<typeof useMessages>[0]['messages'] = [];
+
+    const { result } = renderHook(() =>
+      useMessages({
+        messages: baseMessages,
+        senderName: 'Dashboard',
+      })
+    );
+
+    let ok = false;
+    await act(async () => {
+      ok = await result.current.sendMessage('Lead', 'hello world');
+    });
+
+    expect(ok).toBe(true);
+    expect(result.current.messages).toHaveLength(1);
+    expect(result.current.messages[0]?.status).toBe('sending');
+    expect(result.current.messages[0]?.to).toBe('Lead');
+  });
+
+  it('uses canonical message id from send response when available', async () => {
+    mockSendMessage.mockResolvedValue({ success: true, data: { messageId: 'evt_123' } });
+    const baseMessages: Parameters<typeof useMessages>[0]['messages'] = [];
+
+    const { result } = renderHook(() =>
+      useMessages({
+        messages: baseMessages,
+        senderName: 'Dashboard',
+      })
+    );
+
+    await act(async () => {
+      await result.current.sendMessage('Lead', 'hello world');
+    });
+
+    expect(result.current.messages[0]?.id).toBe('evt_123');
+    expect(result.current.messages[0]?.status).toBe('sending');
+  });
+
+  it('removes optimistic message and surfaces error on failed send', async () => {
+    mockSendMessage.mockResolvedValue({ success: false, error: 'send failed' });
+    const baseMessages: Parameters<typeof useMessages>[0]['messages'] = [];
+
+    const { result } = renderHook(() =>
+      useMessages({
+        messages: baseMessages,
+        senderName: 'Dashboard',
+      })
+    );
+
+    let ok = true;
+    await act(async () => {
+      ok = await result.current.sendMessage('Lead', 'hello world');
+    });
+
+    expect(ok).toBe(false);
+    expect(result.current.messages).toHaveLength(0);
+    expect(result.current.sendError).toBe('send failed');
+  });
+});

package/src/components/hooks/useMessages.ts

@@ -64,8 +64,11 @@ export function useMessages({
   // 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';
+  // Effective sender name for the current user (used for filtering own messages).
+  // Read localStorage directly as a fallback so we never display "Dashboard".
+  const effectiveSenderName = senderName
+    || (typeof window !== 'undefined' ? localStorage.getItem('relay_username') : null)
+    || 'You';
 
   // Optimistic messages: shown immediately before server confirms
   // These have status='sending' and a temp ID prefixed with 'optimistic-'
@@ -272,8 +275,14 @@ export function useMessages({
         const result = await api.sendMessage(request);
 
         if (result.success) {
-          // Success! The optimistic message will be cleaned up when
-          // the real message arrives via WebSocket
+          // If the server returned a canonical message ID, update the optimistic
+          // message so dedup logic can match it when the real event arrives.
+          const canonicalId = result.data?.messageId;
+          if (canonicalId) {
+            setOptimisticMessages((prev) =>
+              prev.map((m) => (m.id === optimisticId ? { ...m, id: canonicalId } : m)),
+            );
+          }
           return true;
         }
 

package/src/components/hooks/useOrchestrator.ts

@@ -1,7 +1,7 @@
 /**
  * useOrchestrator Hook
  *
- * Connects to the daemon orchestrator for workspace and agent management.
+ * Connects to the broker orchestrator for workspace and agent management.
  * Provides real-time updates via WebSocket.
  */
 

package/src/components/hooks/usePresence.ts

@@ -7,8 +7,10 @@
  * - Handles user presence announcements
  */
 
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { getWebSocketUrl } from '../../lib/config';
+import { usePresence as useRelayPresence } from '@relaycast/react';
+import { useRelayConfigStatus } from '../../providers/RelayConfigProvider';
 
 /** User presence information */
 export interface UserPresence {
@@ -75,6 +77,9 @@ function getPresenceUrl(): string {
 
 export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn {
   const { currentUser, wsUrl, autoConnect = true, onEvent, workspaceId } = options;
+  const relayPresenceState = useRelayPresence();
+  const { configured: relayConfigured } = useRelayConfigStatus();
+  const usingRelayPresence = relayConfigured;
 
   const [onlineUsers, setOnlineUsers] = useState<UserPresence[]>([]);
   const [typingUsers, setTypingUsers] = useState<TypingIndicator[]>([]);
@@ -94,6 +99,16 @@ export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn
   const onEventRef = useRef(onEvent);
   onEventRef.current = onEvent; // Keep ref in sync with callback prop
 
+  const relayOnlineUsers = useMemo<UserPresence[]>(() => {
+    return relayPresenceState.agents
+      .filter((agent) => agent.status === 'online' && agent.type === 'human')
+      .map((agent) => ({
+        username: agent.name,
+        connectedAt: agent.createdAt ?? agent.lastSeen,
+        lastSeen: agent.lastSeen,
+      }));
+  }, [relayPresenceState]);
+
   // Clear stale typing indicators (after 3 seconds of no update)
   useEffect(() => {
     const interval = setInterval(() => {
@@ -107,6 +122,7 @@ export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn
   }, []);
 
   const connect = useCallback(() => {
+    if (usingRelayPresence) return;
     const user = currentUserRef.current;
     if (!user) return; // Don't connect without user info
     if (wsRef.current?.readyState === WebSocket.OPEN) return;
@@ -251,7 +267,7 @@ export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn
     } catch (e) {
       console.error('[usePresence] Failed to create WebSocket:', e);
     }
-  }, [wsUrl]); // Use ref for currentUser to avoid dependency
+  }, [wsUrl, usingRelayPresence]); // Use refs for currentUser/workspace/onEvent to avoid dependencies
 
   const disconnect = useCallback(() => {
     // Clear reconnect timeout first
@@ -288,6 +304,7 @@ export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn
 
   // Send typing indicator
   const sendTyping = useCallback((isTyping: boolean) => {
+    if (usingRelayPresence) return;
     if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
     const user = currentUserRef.current;
     if (!user) return;
@@ -312,10 +329,11 @@ export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn
         sendTyping(false);
       }, 3000);
     }
-  }, []); // Use ref for currentUser to avoid dependency
+  }, [usingRelayPresence]); // Use ref for currentUser to avoid dependency
 
   // Connect when user is available
   useEffect(() => {
+    if (usingRelayPresence) return;
     if (!autoConnect || !currentUserRef.current) return;
 
     // Prevent connecting if already connected or connecting
@@ -329,10 +347,11 @@ export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn
       disconnect();
     };
     // Callbacks are now stable (use refs internally), so only need to depend on user identity
-  }, [autoConnect, currentUser?.username, connect, disconnect]);
+  }, [autoConnect, currentUser?.username, connect, disconnect, usingRelayPresence]);
 
   // Send leave on page unload
   useEffect(() => {
+    if (usingRelayPresence) return;
     const handleUnload = () => {
       const user = currentUserRef.current;
       if (wsRef.current?.readyState === WebSocket.OPEN && user) {
@@ -346,10 +365,11 @@ export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn
 
     window.addEventListener('beforeunload', handleUnload);
     return () => window.removeEventListener('beforeunload', handleUnload);
-  }, []); // Use ref for currentUser to avoid dependency
+  }, [usingRelayPresence]); // Use ref for currentUser to avoid dependency
 
   // Visibility change listener: reconnect when tab becomes visible
   useEffect(() => {
+    if (usingRelayPresence) return;
     const handleVisibilityChange = () => {
       if (document.visibilityState === 'visible') {
         // Check if connection is dead and reconnect
@@ -365,7 +385,26 @@ export function usePresence(options: UsePresenceOptions = {}): UsePresenceReturn
     return () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
-  }, [connect]);
+  }, [connect, usingRelayPresence]);
+
+  // If Relay SDK presence is active, ensure any legacy presence socket is closed.
+  useEffect(() => {
+    if (!usingRelayPresence) return;
+    disconnect();
+  }, [disconnect, usingRelayPresence]);
+
+  if (usingRelayPresence) {
+    const relayConnected = !relayPresenceState.loading && !relayPresenceState.error;
+    return {
+      onlineUsers: relayOnlineUsers,
+      typingUsers: [],
+      sendTyping: () => undefined,
+      isConnected: relayConnected,
+      connectionState: relayPresenceState.loading
+        ? 'reconnecting'
+        : (relayPresenceState.error ? 'disconnected' : 'connected'),
+    };
+  }
 
   return {
     onlineUsers,