@agent-relay/dashboard 2.0.82 → 2.0.84

package/src/components/hooks/useThread.ts

@@ -1,6 +1,12 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  useThread as useRelayThread,
+  useReply as useRelayReply,
+} from '@relaycast/react';
+import type { MessageWithMeta } from '@relaycast/sdk';
 import type { Message } from '../../types';
 import { api } from '../../lib/api';
+import { useRelayConfigStatus } from '../../providers/RelayConfigProvider';
 
 interface UseThreadOptions {
   threadId: string | null;
@@ -19,118 +25,149 @@ interface UseThreadReturn {
   addReply: (reply: Message) => void;
 }
 
+function toMessage(msg: MessageWithMeta): Message {
+  return {
+    id: msg.id,
+    from: msg.agentName ?? '',
+    to: '*',
+    content: msg.text,
+    timestamp: msg.createdAt ?? new Date().toISOString(),
+    replyCount: msg.replyCount ?? 0,
+    reactions: msg.reactions ?? [],
+    isRead: true,
+  };
+}
+
 export function useThread({ threadId, fallbackMessages }: UseThreadOptions): UseThreadReturn {
-  const [parentMessage, setParentMessage] = useState<Message | null>(null);
-  const [replies, setReplies] = useState<Message[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const { configured: relayConfigured } = useRelayConfigStatus();
+
+  // SDK hooks — always called (hooks can't be conditional)
+  const relayThread = useRelayThread(threadId ?? '');
+  const { reply: relayReply } = useRelayReply();
+
+  // REST / client-side fallback state
+  const [restParent, setRestParent] = useState<Message | null>(null);
+  const [restReplies, setRestReplies] = useState<Message[]>([]);
+  const [restLoading, setRestLoading] = useState(false);
   const [hasMore, setHasMore] = useState(false);
   const [cursor, setCursor] = useState<string | undefined>();
   const [useFallback, setUseFallback] = useState(false);
-
-  // Use a ref to track the active threadId for cancellation of loadMore
   const activeThreadIdRef = useRef<string | null>(null);
 
-  // Fetch thread from API when threadId changes
+  // REST / fallback fetch when Relaycast is not configured
   useEffect(() => {
     activeThreadIdRef.current = threadId;
-
-    if (!threadId) {
-      setParentMessage(null);
-      setReplies([]);
+    if (!threadId || relayConfigured) {
+      setRestParent(null);
+      setRestReplies([]);
       setHasMore(false);
       setCursor(undefined);
       setUseFallback(false);
-      setIsLoading(false);
+      setRestLoading(false);
       return;
     }
 
-    // Reset state immediately when switching threads to avoid stale data flash
-    setParentMessage(null);
-    setReplies([]);
+    setRestParent(null);
+    setRestReplies([]);
     setHasMore(false);
     setCursor(undefined);
     setUseFallback(false);
 
     let cancelled = false;
-    setIsLoading(true);
+    setRestLoading(true);
 
-    api.getThread(threadId, { limit: 50 }).then((result) => {
+    const loadThread = async () => {
+      const result = await api.getThread(threadId, { limit: 50 });
       if (cancelled) return;
-      setIsLoading(false);
+      setRestLoading(false);
 
       if (result.success && result.data) {
         setUseFallback(false);
         const { parent, replies: fetchedReplies, nextCursor } = result.data;
-        setParentMessage(parent as Message);
-        setReplies(fetchedReplies);
+        setRestParent(parent as Message);
+        setRestReplies(fetchedReplies);
         setHasMore(!!nextCursor);
         setCursor(nextCursor);
       } else {
-        // API not available — fall back to client-side messages
         setUseFallback(true);
       }
-    });
-
-    return () => {
-      cancelled = true;
     };
-  }, [threadId]);
 
-  // Use fallback messages when API is unavailable
-  // For topic threads, the threadId is not the id of any message — it's the `thread` field on replies.
-  // So we also check for the first reply whose thread matches.
-  const effectiveParent = useFallback
+    void loadThread();
+    return () => { cancelled = true; };
+  }, [threadId, relayConfigured]);
+
+  // --- Derive final values based on mode ---
+
+  const isRelayMode = relayConfigured && !!threadId;
+
+  // Relay path: map SDK MessageWithMeta → dashboard Message
+  const relayParent = isRelayMode && relayThread.parent ? toMessage(relayThread.parent) : null;
+  const relayReplies = isRelayMode ? relayThread.replies.map(toMessage) : [];
+
+  // Fallback path: use client-side messages
+  const fallbackParent = useFallback
     ? (fallbackMessages?.find((m) => m.id === threadId)
       ?? fallbackMessages?.filter((m) => m.thread === threadId)
           .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())[0]
       ?? null)
-    : parentMessage;
+    : null;
+  const fallbackReplies = useFallback
+    ? (fallbackMessages?.filter((m) => m.thread === threadId && m.id !== fallbackParent?.id) ?? [])
+    : [];
 
-  const effectiveReplies = useFallback
-    ? (fallbackMessages?.filter((m) => m.thread === threadId && m.id !== effectiveParent?.id) ?? [])
-    : replies;
+  // Pick the active source
+  const parentMessage = isRelayMode ? relayParent : (useFallback ? fallbackParent : restParent);
+  const replies = isRelayMode ? relayReplies : (useFallback ? fallbackReplies : restReplies);
+  const isLoading = isRelayMode ? relayThread.loading : restLoading;
 
   const loadMore = useCallback(async () => {
-    if (!threadId || !hasMore || !cursor || useFallback) return;
+    if (relayConfigured || !threadId || !hasMore || !cursor || useFallback) return;
     const loadingThreadId = threadId;
-    setIsLoading(true);
+    setRestLoading(true);
     const result = await api.getThread(threadId, { cursor, limit: 50 });
-    // If thread changed while loading, discard the stale response
     if (activeThreadIdRef.current !== loadingThreadId) return;
-    setIsLoading(false);
+    setRestLoading(false);
     if (result.success && result.data) {
-      setReplies((prev) => [...result.data!.replies, ...prev]);
+      setRestReplies((prev) => [...result.data!.replies, ...prev]);
       setHasMore(!!result.data.nextCursor);
       setCursor(result.data.nextCursor);
     }
-  }, [threadId, hasMore, cursor, useFallback]);
+  }, [threadId, hasMore, cursor, useFallback, relayConfigured]);
 
   const sendReply = useCallback(
     async (text: string): Promise<boolean> => {
       if (!threadId) return false;
+      if (relayConfigured) {
+        try {
+          await relayReply(threadId, text);
+          return true;
+        } catch {
+          // Fall through to REST fallback.
+        }
+      }
       const result = await api.postReply(threadId, text);
       if (result.success && result.data) {
-        setReplies((prev) => [...prev, result.data!]);
+        setRestReplies((prev) => [...prev, result.data!]);
         return true;
       }
       return false;
     },
-    [threadId],
+    [threadId, relayConfigured, relayReply],
   );
 
   const addReply = useCallback((reply: Message) => {
-    setReplies((prev) => {
-      // Deduplicate
+    setRestReplies((prev) => {
       if (prev.some((m) => m.id === reply.id)) return prev;
       return [...prev, reply];
     });
   }, []);
 
   return {
-    parentMessage: effectiveParent,
-    replies: effectiveReplies,
+    parentMessage,
+    replies,
     isLoading,
-    hasMore: useFallback ? false : hasMore,
+    hasMore: useFallback || isRelayMode ? false : hasMore,
     loadMore,
     sendReply,
     addReply,

package/src/components/hooks/useTrajectory.ts

@@ -49,6 +49,61 @@ interface UseTrajectoryResult {
   selectedTrajectoryId: string | null;
 }
 
+function extractHistory(data: unknown): { success: boolean; trajectories: TrajectoryHistoryEntry[]; error?: string } {
+  if (!data || typeof data !== 'object') {
+    return { success: false, trajectories: [], error: 'Invalid history response' };
+  }
+
+  const raw = data as { success?: boolean; trajectories?: TrajectoryHistoryEntry[] };
+  const hasSuccess = Object.prototype.hasOwnProperty.call(raw, 'success');
+
+  if (Array.isArray((data as { trajectories?: unknown }).trajectories)) {
+    const trajectories = (data as { trajectories: TrajectoryHistoryEntry[] }).trajectories;
+    const isSuccess = hasSuccess ? raw.success === true : true;
+    return { success: Boolean(isSuccess), trajectories: isSuccess ? trajectories : [] };
+  }
+
+  if (Array.isArray(data)) {
+    return { success: true, trajectories: data as TrajectoryHistoryEntry[] };
+  }
+
+  return {
+    success: false,
+    trajectories: [],
+    error: 'History payload missing trajectories',
+  };
+}
+
+function extractSteps(data: unknown): { success: boolean; steps: TrajectoryStep[]; error?: string } {
+  if (!data || typeof data !== 'object') {
+    return { success: false, steps: [], error: 'Invalid steps response' };
+  }
+
+  const raw = data as { success?: boolean; steps?: TrajectoryStep[]; error?: string };
+  const hasSuccess = Object.prototype.hasOwnProperty.call(raw, 'success');
+  const hasSteps = Array.isArray(raw.steps);
+
+  if (hasSteps) {
+    const isSuccess = hasSuccess ? raw.success === true : true;
+    const steps = raw.steps ?? [];
+    return {
+      success: Boolean(isSuccess),
+      steps: isSuccess ? steps : [],
+      error: !isSuccess ? raw.error : undefined,
+    };
+  }
+
+  if (Array.isArray(data)) {
+    return { success: true, steps: data as TrajectoryStep[] };
+  }
+
+  return {
+    success: false,
+    steps: [],
+    error: 'Steps payload missing steps',
+  };
+}
+
 export function useTrajectory(options: UseTrajectoryOptions = {}): UseTrajectoryResult {
   const {
     pollInterval = 2000,
@@ -103,9 +158,10 @@ export function useTrajectory(options: UseTrajectoryOptions = {}): UseTrajectory
         : getApiUrl('/api/trajectory/history');
       const response = await fetch(url, { credentials: 'include' });
       const data = await response.json();
+      const normalized = extractHistory(data);
 
-      if (data.success) {
-        setHistory(data.trajectories || []);
+      if (normalized.success) {
+        setHistory(normalized.trajectories || []);
       }
     } catch (err: any) {
       console.error('[useTrajectory] History fetch error:', err);
@@ -129,6 +185,7 @@ export function useTrajectory(options: UseTrajectoryOptions = {}): UseTrajectory
 
       const response = await fetch(url, { credentials: 'include' });
       const data = await response.json();
+      const normalized = extractSteps(data);
 
       // Only update state if this is still the most recent request
       // Check both request counter AND trajectory ID for double protection
@@ -141,11 +198,11 @@ export function useTrajectory(options: UseTrajectoryOptions = {}): UseTrajectory
         return;
       }
 
-      if (data.success) {
-        setSteps(data.steps || []);
+      if (normalized.success) {
+        setSteps(normalized.steps || []);
         setError(null);
       } else {
-        setError(data.error || 'Failed to fetch trajectory steps');
+        setError(normalized.error || 'Failed to fetch trajectory steps');
       }
     } catch (err: any) {
       // Only update error state if this is still the current request

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

@@ -0,0 +1,358 @@
+import { describe, expect, it } from 'vitest';
+import type { DashboardData } from './useWebSocket';
+import { applyBrokerEvent } from './useWebSocket';
+
+function emptyState(): DashboardData {
+  return {
+    agents: [],
+    messages: [],
+  };
+}
+
+describe('applyBrokerEvent', () => {
+  it('adds relay_inbound DM to messages', () => {
+    const next = applyBrokerEvent(emptyState(), {
+      kind: 'relay_inbound',
+      event_id: 'evt_1',
+      from: 'Dashboard',
+      target: 'Lead',
+      body: 'hello',
+    });
+
+    expect(next?.messages).toHaveLength(1);
+    expect(next?.messages[0]).toMatchObject({
+      id: 'evt_1',
+      from: 'Dashboard',
+      to: 'Lead',
+      content: 'hello',
+    });
+  });
+
+  it('skips relay_inbound channel messages (handled by useChannels)', () => {
+    const next = applyBrokerEvent(emptyState(), {
+      kind: 'relay_inbound',
+      event_id: 'evt_ch',
+      from: 'Hero',
+      target: '#general',
+      body: 'hello channel',
+    });
+
+    expect(next?.messages).toHaveLength(0);
+  });
+
+  it('bootstraps empty state when prev is null', () => {
+    const next = applyBrokerEvent(null, {
+      kind: 'relay_inbound',
+      event_id: 'evt_null',
+      from: 'Dashboard',
+      target: 'Lead',
+      body: 'hello',
+    });
+
+    expect(next).not.toBeNull();
+    expect(next?.messages).toHaveLength(1);
+  });
+
+  it('skips relay_inbound with missing fields', () => {
+    const next = applyBrokerEvent(emptyState(), {
+      kind: 'relay_inbound',
+      event_id: 'evt_bad',
+      from: '',
+      target: 'Lead',
+      body: 'hello',
+    });
+
+    expect(next?.messages).toHaveLength(0);
+  });
+
+  // --- Delivery Status ---
+
+  describe('delivery status events', () => {
+    it('delivery_verified sets message status to acked by event_id', () => {
+      const state: DashboardData = {
+        agents: [],
+        messages: [
+          { id: 'evt_1', from: 'Dashboard', to: 'Lead', content: 'hello', timestamp: '2024-01-01', status: 'sending' },
+        ],
+      };
+
+      const next = applyBrokerEvent(state, {
+        kind: 'delivery_verified',
+        name: 'Lead',
+        delivery_id: 'del_1',
+        event_id: 'evt_1',
+      });
+
+      expect(next?.messages[0]?.status).toBe('acked');
+    });
+
+    it('delivery_verified does not modify messages with different event_id', () => {
+      const state: DashboardData = {
+        agents: [],
+        messages: [
+          { id: 'evt_other', from: 'Dashboard', to: 'Lead', content: 'hello', timestamp: '2024-01-01', status: 'sending' },
+        ],
+      };
+
+      const next = applyBrokerEvent(state, {
+        kind: 'delivery_verified',
+        name: 'Lead',
+        delivery_id: 'del_1',
+        event_id: 'evt_1',
+      });
+
+      expect(next?.messages[0]?.status).toBe('sending');
+    });
+
+    it('delivery_verified with missing event_id returns prev state', () => {
+      const state = emptyState();
+      const next = applyBrokerEvent(state, {
+        kind: 'delivery_verified',
+        name: 'Lead',
+        delivery_id: 'del_1',
+      });
+      expect(next).toBe(state);
+    });
+
+    it('delivery_failed sets message status to failed by event_id', () => {
+      const state: DashboardData = {
+        agents: [],
+        messages: [
+          { id: 'evt_2', from: 'Dashboard', to: 'Lead', content: 'hello', timestamp: '2024-01-01', status: 'sending' },
+        ],
+      };
+
+      const next = applyBrokerEvent(state, {
+        kind: 'delivery_failed',
+        name: 'Lead',
+        delivery_id: 'del_2',
+        event_id: 'evt_2',
+        reason: 'timeout',
+      });
+
+      expect(next?.messages[0]?.status).toBe('failed');
+    });
+
+    it('delivery_failed with missing event_id returns prev state', () => {
+      const state = emptyState();
+      const next = applyBrokerEvent(state, {
+        kind: 'delivery_failed',
+        name: 'Lead',
+        delivery_id: 'del_2',
+        reason: 'timeout',
+      });
+      expect(next).toBe(state);
+    });
+  });
+
+  // --- Thinking / Processing State ---
+
+  describe('thinking/processing state events', () => {
+    function stateWithAgent(name: string): DashboardData {
+      return {
+        agents: [{ name, status: 'online' }],
+        messages: [],
+      };
+    }
+
+    it('delivery_ack sets agent isProcessing and processingStartedAt', () => {
+      const state = stateWithAgent('Lead');
+      const before = Date.now();
+
+      const next = applyBrokerEvent(state, {
+        kind: 'delivery_ack',
+        delivery_id: 'del_1',
+        name: 'Lead',
+      });
+
+      const agent = next?.agents.find((a) => a.name === 'Lead');
+      expect(agent?.isProcessing).toBe(true);
+      expect(agent?.processingStartedAt).toBeGreaterThanOrEqual(before);
+      expect(agent?.processingStartedAt).toBeLessThanOrEqual(Date.now());
+    });
+
+    it('delivery_active sets agent isProcessing and processingStartedAt', () => {
+      const state = stateWithAgent('Lead');
+      const before = Date.now();
+
+      const next = applyBrokerEvent(state, {
+        kind: 'delivery_active',
+        delivery_id: 'del_1',
+        name: 'Lead',
+      });
+
+      const agent = next?.agents.find((a) => a.name === 'Lead');
+      expect(agent?.isProcessing).toBe(true);
+      expect(agent?.processingStartedAt).toBeGreaterThanOrEqual(before);
+    });
+
+    it('delivery_ack with missing name field returns prev state', () => {
+      const state = stateWithAgent('Lead');
+      const next = applyBrokerEvent(state, {
+        kind: 'delivery_ack',
+        delivery_id: 'del_1',
+      });
+      expect(next).toBe(state);
+    });
+
+    it('delivery_active with missing name field returns prev state', () => {
+      const state = stateWithAgent('Lead');
+      const next = applyBrokerEvent(state, {
+        kind: 'delivery_active',
+        delivery_id: 'del_1',
+      });
+      expect(next).toBe(state);
+    });
+
+    it('delivery_ack does not modify unrelated agents', () => {
+      const state: DashboardData = {
+        agents: [
+          { name: 'Lead', status: 'online' },
+          { name: 'Helper', status: 'online' },
+        ],
+        messages: [],
+      };
+
+      const next = applyBrokerEvent(state, {
+        kind: 'delivery_ack',
+        delivery_id: 'del_1',
+        name: 'Lead',
+      });
+
+      expect(next?.agents.find((a) => a.name === 'Helper')?.isProcessing).toBeUndefined();
+    });
+
+    it('agent_idle clears processingStartedAt and lastLogLine', () => {
+      const state: DashboardData = {
+        agents: [{ name: 'Lead', status: 'online', isProcessing: true, processingStartedAt: 12345, lastLogLine: 'some log' }],
+        messages: [],
+      };
+
+      const next = applyBrokerEvent(state, {
+        kind: 'agent_idle',
+        name: 'Lead',
+        idle_secs: 5,
+      });
+
+      const agent = next?.agents.find((a) => a.name === 'Lead');
+      expect(agent?.isProcessing).toBe(false);
+      expect(agent?.processingStartedAt).toBeUndefined();
+      expect(agent?.lastLogLine).toBeUndefined();
+    });
+  });
+
+  // --- Worker Stream Logs ---
+
+  describe('worker stream events', () => {
+    it('worker_stream sets lastLogLine on the matching agent', () => {
+      const state: DashboardData = {
+        agents: [{ name: 'Lead', status: 'online', isProcessing: true }],
+        messages: [],
+      };
+
+      const next = applyBrokerEvent(state, {
+        kind: 'worker_stream',
+        name: 'Lead',
+        stream: 'stdout',
+        chunk: 'Running tests...',
+      });
+
+      expect(next?.agents.find((a) => a.name === 'Lead')?.lastLogLine).toBe('Running tests...');
+    });
+
+    it('worker_stream does not modify unrelated agents', () => {
+      const state: DashboardData = {
+        agents: [
+          { name: 'Lead', status: 'online' },
+          { name: 'Helper', status: 'online' },
+        ],
+        messages: [],
+      };
+
+      const next = applyBrokerEvent(state, {
+        kind: 'worker_stream',
+        name: 'Lead',
+        stream: 'stdout',
+        chunk: 'log line',
+      });
+
+      expect(next?.agents.find((a) => a.name === 'Helper')?.lastLogLine).toBeUndefined();
+    });
+
+    it('worker_stream with missing name returns prev state', () => {
+      const state = emptyState();
+      const next = applyBrokerEvent(state, {
+        kind: 'worker_stream',
+        stream: 'stdout',
+        chunk: 'text',
+      });
+      expect(next).toBe(state);
+    });
+
+    it('worker_stream overwrites previous lastLogLine', () => {
+      const state: DashboardData = {
+        agents: [{ name: 'Lead', status: 'online', lastLogLine: 'old line' }],
+        messages: [],
+      };
+
+      const next = applyBrokerEvent(state, {
+        kind: 'worker_stream',
+        name: 'Lead',
+        stream: 'stdout',
+        chunk: 'new line',
+      });
+
+      expect(next?.agents.find((a) => a.name === 'Lead')?.lastLogLine).toBe('new line');
+    });
+  });
+
+  // --- Full Lifecycle Integration ---
+
+  describe('full delivery lifecycle', () => {
+    it('sending -> acked -> processing -> stream -> idle clears all state', () => {
+      let state: DashboardData = {
+        agents: [{ name: 'Lead', status: 'online' }],
+        messages: [
+          { id: 'evt_lc', from: 'Dashboard', to: 'Lead', content: 'do stuff', timestamp: '2024-01-01', status: 'sending' },
+        ],
+      };
+
+      // 1. delivery_verified -> message becomes acked
+      state = applyBrokerEvent(state, {
+        kind: 'delivery_verified',
+        name: 'Lead',
+        delivery_id: 'del_lc',
+        event_id: 'evt_lc',
+      })!;
+      expect(state.messages[0]?.status).toBe('acked');
+
+      // 2. delivery_ack -> agent starts processing
+      state = applyBrokerEvent(state, {
+        kind: 'delivery_ack',
+        delivery_id: 'del_lc',
+        name: 'Lead',
+      })!;
+      expect(state.agents[0]?.isProcessing).toBe(true);
+      expect(state.agents[0]?.processingStartedAt).toBeDefined();
+
+      // 3. worker_stream -> log line appears
+      state = applyBrokerEvent(state, {
+        kind: 'worker_stream',
+        name: 'Lead',
+        stream: 'stdout',
+        chunk: 'Compiling...',
+      })!;
+      expect(state.agents[0]?.lastLogLine).toBe('Compiling...');
+
+      // 4. agent_idle -> processing state fully cleared
+      state = applyBrokerEvent(state, {
+        kind: 'agent_idle',
+        name: 'Lead',
+        idle_secs: 3,
+      })!;
+      expect(state.agents[0]?.isProcessing).toBe(false);
+      expect(state.agents[0]?.processingStartedAt).toBeUndefined();
+      expect(state.agents[0]?.lastLogLine).toBeUndefined();
+    });
+  });
+});