@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/hooks/useRecentRepos.ts

@@ -0,0 +1,130 @@
+/**
+ * useRecentRepos Hook
+ *
+ * Tracks and persists recently accessed repositories/projects.
+ * Stores in localStorage for persistence across sessions.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import type { Project } from '../../types';
+
+const STORAGE_KEY = 'relay:recentRepos';
+const MAX_RECENT = 5;
+
+export interface RecentRepo {
+  id: string;
+  path: string;
+  name?: string;
+  lastAccessed: number;
+}
+
+export interface UseRecentReposOptions {
+  /** Maximum number of recent repos to track (default: 5) */
+  maxRecent?: number;
+}
+
+export interface UseRecentReposReturn {
+  /** List of recent repos, most recent first */
+  recentRepos: RecentRepo[];
+  /** Add or update a repo in recent list */
+  addRecentRepo: (project: Project) => void;
+  /** Remove a repo from recent list */
+  removeRecentRepo: (id: string) => void;
+  /** Clear all recent repos */
+  clearRecentRepos: () => void;
+  /** Get recent repos as Project-like objects for display */
+  getRecentProjects: (allProjects: Project[]) => Project[];
+}
+
+/**
+ * Load recent repos from localStorage
+ */
+function loadRecentRepos(): RecentRepo[] {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (!stored) return [];
+    const parsed = JSON.parse(stored);
+    if (!Array.isArray(parsed)) return [];
+    return parsed;
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Save recent repos to localStorage
+ */
+function saveRecentRepos(repos: RecentRepo[]): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(repos));
+  } catch {
+    // Silently fail if localStorage is not available
+  }
+}
+
+export function useRecentRepos(options: UseRecentReposOptions = {}): UseRecentReposReturn {
+  const maxRecent = options.maxRecent ?? MAX_RECENT;
+  const [recentRepos, setRecentRepos] = useState<RecentRepo[]>([]);
+
+  // Load from localStorage on mount
+  useEffect(() => {
+    setRecentRepos(loadRecentRepos());
+  }, []);
+
+  // Add or update a repo in recent list
+  const addRecentRepo = useCallback((project: Project) => {
+    setRecentRepos((prev) => {
+      // Remove if already exists
+      const filtered = prev.filter((r) => r.id !== project.id);
+
+      // Add to front with current timestamp
+      const newRepo: RecentRepo = {
+        id: project.id,
+        path: project.path,
+        name: project.name,
+        lastAccessed: Date.now(),
+      };
+
+      // Keep only maxRecent items
+      const updated = [newRepo, ...filtered].slice(0, maxRecent);
+
+      // Persist to localStorage
+      saveRecentRepos(updated);
+
+      return updated;
+    });
+  }, [maxRecent]);
+
+  // Remove a repo from recent list
+  const removeRecentRepo = useCallback((id: string) => {
+    setRecentRepos((prev) => {
+      const updated = prev.filter((r) => r.id !== id);
+      saveRecentRepos(updated);
+      return updated;
+    });
+  }, []);
+
+  // Clear all recent repos
+  const clearRecentRepos = useCallback(() => {
+    setRecentRepos([]);
+    saveRecentRepos([]);
+  }, []);
+
+  // Get recent repos as Project objects (matched against current projects)
+  const getRecentProjects = useCallback((allProjects: Project[]): Project[] => {
+    const projectMap = new Map(allProjects.map((p) => [p.id, p]));
+    return recentRepos
+      .map((r) => projectMap.get(r.id))
+      .filter((p): p is Project => p !== undefined);
+  }, [recentRepos]);
+
+  return {
+    recentRepos,
+    addRecentRepo,
+    removeRecentRepo,
+    clearRecentRepos,
+    getRecentProjects,
+  };
+}
+
+export default useRecentRepos;

package/src/components/hooks/useSession.ts

@@ -0,0 +1,209 @@
+/**
+ * useSession Hook
+ *
+ * React hook for managing cloud session state.
+ * Automatically detects session expiration and triggers re-login flow.
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  cloudApi,
+  onSessionExpired,
+  getCsrfToken,
+  type CloudUser,
+  type SessionError,
+  type SessionStatus,
+} from '../../lib/cloudApi';
+
+export interface UseSessionOptions {
+  /** Check session on mount (default: true) */
+  checkOnMount?: boolean;
+  /** Interval to periodically check session in ms (default: 60000, set to 0 to disable) */
+  checkInterval?: number;
+  /** Callback when session expires */
+  onExpired?: (error: SessionError) => void;
+}
+
+export interface UseSessionReturn {
+  /** Current user data (null if not authenticated) */
+  user: CloudUser | null;
+  /** Whether the session check is in progress */
+  isLoading: boolean;
+  /** Whether user is authenticated */
+  isAuthenticated: boolean;
+  /** Whether session has expired (requires re-login) */
+  isExpired: boolean;
+  /** Session error if any */
+  error: SessionError | null;
+  /** CSRF token for API requests */
+  csrfToken: string | null;
+  /** Manually check session status */
+  checkSession: () => Promise<SessionStatus>;
+  /** Clear the expired state (e.g., after dismissing modal) */
+  clearExpired: () => void;
+  /** Redirect to login page */
+  redirectToLogin: () => void;
+  /** Logout the current user */
+  logout: () => Promise<void>;
+}
+
+const DEFAULT_OPTIONS: Required<UseSessionOptions> = {
+  checkOnMount: true,
+  checkInterval: 60000, // 1 minute
+  onExpired: () => {},
+};
+
+export function useSession(options: UseSessionOptions = {}): UseSessionReturn {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+
+  const [user, setUser] = useState<CloudUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isExpired, setIsExpired] = useState(false);
+  const [error, setError] = useState<SessionError | null>(null);
+
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const mountedRef = useRef(true);
+
+  // Check session status
+  const checkSession = useCallback(async (): Promise<SessionStatus> => {
+    try {
+      const status = await cloudApi.checkSession();
+
+      if (!mountedRef.current) return status;
+
+      if (!status.authenticated) {
+        setUser(null);
+        if (status.code) {
+          const sessionError: SessionError = {
+            error: 'Session expired',
+            code: status.code,
+            message: status.message || 'Your session has expired. Please log in again.',
+          };
+          setError(sessionError);
+          setIsExpired(true);
+          opts.onExpired(sessionError);
+        }
+      }
+
+      return status;
+    } catch (_e) {
+      return {
+        authenticated: false,
+        code: 'SESSION_ERROR',
+        message: 'Failed to check session',
+      };
+    }
+  }, [opts]);
+
+  // Fetch user data
+  const fetchUser = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const result = await cloudApi.getMe();
+
+      if (!mountedRef.current) return;
+
+      if (result.success) {
+        setUser(result.data);
+        setIsExpired(false);
+        setError(null);
+      } else if (result.sessionExpired) {
+        setUser(null);
+        setIsExpired(true);
+      } else {
+        setError({
+          error: result.error,
+          code: 'SESSION_ERROR',
+          message: result.error,
+        });
+      }
+    } finally {
+      if (mountedRef.current) {
+        setIsLoading(false);
+      }
+    }
+  }, []);
+
+  // Handle session expiration from any API call
+  useEffect(() => {
+    const unsubscribe = onSessionExpired((sessionError) => {
+      if (!mountedRef.current) return;
+
+      setUser(null);
+      setIsExpired(true);
+      setError(sessionError);
+      opts.onExpired(sessionError);
+    });
+
+    return unsubscribe;
+  }, [opts]);
+
+  // Check session on mount
+  useEffect(() => {
+    mountedRef.current = true;
+
+    if (opts.checkOnMount) {
+      fetchUser();
+    }
+
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [opts.checkOnMount, fetchUser]);
+
+  // Periodic session check
+  useEffect(() => {
+    if (opts.checkInterval <= 0) return;
+
+    intervalRef.current = setInterval(() => {
+      // Only check if we think we're authenticated
+      if (user) {
+        checkSession();
+      }
+    }, opts.checkInterval);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [opts.checkInterval, user, checkSession]);
+
+  // Clear expired state
+  const clearExpired = useCallback(() => {
+    setIsExpired(false);
+    setError(null);
+  }, []);
+
+  // Redirect to login
+  const redirectToLogin = useCallback(() => {
+    // Preserve current path for redirect after login
+    const returnTo = encodeURIComponent(window.location.pathname + window.location.search);
+    window.location.href = `/login?returnTo=${returnTo}`;
+  }, []);
+
+  // Logout
+  const logout = useCallback(async () => {
+    await cloudApi.logout();
+    setUser(null);
+    setIsExpired(false);
+    setError(null);
+    window.location.href = '/login';
+  }, []);
+
+  return {
+    user,
+    isLoading,
+    isAuthenticated: user !== null,
+    isExpired,
+    error,
+    csrfToken: getCsrfToken(),
+    checkSession,
+    clearExpired,
+    redirectToLogin,
+    logout,
+  };
+}
+
+export type { SessionError, CloudUser };

package/src/components/hooks/useThread.ts

@@ -0,0 +1,138 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { Message } from '../../types';
+import { api } from '../../lib/api';
+
+interface UseThreadOptions {
+  threadId: string | null;
+  /** Client-side fallback messages (for non-relaycast servers) */
+  fallbackMessages?: Message[];
+}
+
+interface UseThreadReturn {
+  parentMessage: Message | null;
+  replies: Message[];
+  isLoading: boolean;
+  hasMore: boolean;
+  loadMore: () => Promise<void>;
+  sendReply: (text: string) => Promise<boolean>;
+  /** Append a reply from a WebSocket event */
+  addReply: (reply: Message) => void;
+}
+
+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 [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
+  useEffect(() => {
+    activeThreadIdRef.current = threadId;
+
+    if (!threadId) {
+      setParentMessage(null);
+      setReplies([]);
+      setHasMore(false);
+      setCursor(undefined);
+      setUseFallback(false);
+      setIsLoading(false);
+      return;
+    }
+
+    // Reset state immediately when switching threads to avoid stale data flash
+    setParentMessage(null);
+    setReplies([]);
+    setHasMore(false);
+    setCursor(undefined);
+    setUseFallback(false);
+
+    let cancelled = false;
+    setIsLoading(true);
+
+    api.getThread(threadId, { limit: 50 }).then((result) => {
+      if (cancelled) return;
+      setIsLoading(false);
+
+      if (result.success && result.data) {
+        setUseFallback(false);
+        const { parent, replies: fetchedReplies, nextCursor } = result.data;
+        setParentMessage(parent as Message);
+        setReplies(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
+    ? (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;
+
+  const effectiveReplies = useFallback
+    ? (fallbackMessages?.filter((m) => m.thread === threadId && m.id !== effectiveParent?.id) ?? [])
+    : replies;
+
+  const loadMore = useCallback(async () => {
+    if (!threadId || !hasMore || !cursor || useFallback) return;
+    const loadingThreadId = threadId;
+    setIsLoading(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);
+    if (result.success && result.data) {
+      setReplies((prev) => [...result.data!.replies, ...prev]);
+      setHasMore(!!result.data.nextCursor);
+      setCursor(result.data.nextCursor);
+    }
+  }, [threadId, hasMore, cursor, useFallback]);
+
+  const sendReply = useCallback(
+    async (text: string): Promise<boolean> => {
+      if (!threadId) return false;
+      const result = await api.postReply(threadId, text);
+      if (result.success && result.data) {
+        setReplies((prev) => [...prev, result.data!]);
+        return true;
+      }
+      return false;
+    },
+    [threadId],
+  );
+
+  const addReply = useCallback((reply: Message) => {
+    setReplies((prev) => {
+      // Deduplicate
+      if (prev.some((m) => m.id === reply.id)) return prev;
+      return [...prev, reply];
+    });
+  }, []);
+
+  return {
+    parentMessage: effectiveParent,
+    replies: effectiveReplies,
+    isLoading,
+    hasMore: useFallback ? false : hasMore,
+    loadMore,
+    sendReply,
+    addReply,
+  };
+}