@agent-relay/dashboard 2.0.81 → 2.0.82

package/src/components/hooks/useChannelAdmin.ts

@@ -0,0 +1,329 @@
+/**
+ * useChannelAdmin Hook
+ *
+ * Manages channel administration: settings, members, and permissions.
+ * Used by ChannelAdminPanel for admin-only operations.
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { api } from '../../lib/api';
+
+export interface ChannelMemberInfo {
+  id: string;
+  name: string;
+  displayName?: string;
+  avatarUrl?: string;
+  role: 'admin' | 'member';
+  joinedAt: string;
+  isAgent: boolean;
+}
+
+export interface ChannelSettings {
+  id: string;
+  name: string;
+  description?: string;
+  topic?: string;
+  isPrivate: boolean;
+  createdAt: string;
+  creatorId: string;
+  admins: string[];
+}
+
+export interface UseChannelAdminOptions {
+  /** Channel ID to manage */
+  channelId: string;
+  /** Current user ID for permission checks */
+  currentUserId?: string;
+  /** Page size for member pagination (default: 20) */
+  pageSize?: number;
+  /** Auto-fetch on mount (default: true) */
+  autoFetch?: boolean;
+}
+
+export interface UseChannelAdminReturn {
+  /** Channel settings */
+  settings: ChannelSettings | null;
+  /** List of members for current page */
+  members: ChannelMemberInfo[];
+  /** Loading states */
+  isLoadingSettings: boolean;
+  isLoadingMembers: boolean;
+  /** Error messages */
+  settingsError: string | null;
+  membersError: string | null;
+  /** Whether current user is admin */
+  isAdmin: boolean;
+  /** Member pagination */
+  memberPage: number;
+  memberTotalPages: number;
+  memberTotalCount: number;
+  goToMemberPage: (page: number) => void;
+  /** Member search */
+  memberSearchQuery: string;
+  setMemberSearchQuery: (query: string) => void;
+  /** Update channel settings */
+  updateSettings: (updates: Partial<Pick<ChannelSettings, 'description' | 'topic'>>) => Promise<void>;
+  /** Remove a member from channel */
+  removeMember: (memberId: string) => Promise<void>;
+  /** Assign an agent to the channel */
+  assignAgent: (agentName: string) => Promise<void>;
+  /** Promote/demote member to/from admin */
+  setMemberRole: (memberId: string, role: 'admin' | 'member') => Promise<void>;
+  /** Refresh data */
+  refreshSettings: () => void;
+  refreshMembers: () => void;
+}
+
+export function useChannelAdmin(
+  options: UseChannelAdminOptions
+): UseChannelAdminReturn {
+  const {
+    channelId,
+    currentUserId,
+    pageSize = 20,
+    autoFetch = true,
+  } = options;
+
+  // Settings state
+  const [settings, setSettings] = useState<ChannelSettings | null>(null);
+  const [isLoadingSettings, setIsLoadingSettings] = useState(false);
+  const [settingsError, setSettingsError] = useState<string | null>(null);
+
+  // Members state
+  const [members, setMembers] = useState<ChannelMemberInfo[]>([]);
+  const [isLoadingMembers, setIsLoadingMembers] = useState(false);
+  const [membersError, setMembersError] = useState<string | null>(null);
+  const [memberPage, setMemberPage] = useState(1);
+  const [memberTotalCount, setMemberTotalCount] = useState(0);
+  const [memberSearchQuery, setMemberSearchQuery] = useState('');
+
+  // Calculate admin status
+  const isAdmin = useMemo(() => {
+    if (!currentUserId || !settings) return false;
+    return settings.creatorId === currentUserId || settings.admins.includes(currentUserId);
+  }, [currentUserId, settings]);
+
+  // Calculate total pages
+  const memberTotalPages = useMemo(() => {
+    return Math.max(1, Math.ceil(memberTotalCount / pageSize));
+  }, [memberTotalCount, pageSize]);
+
+  // Fetch channel settings
+  const fetchSettings = useCallback(async () => {
+    setIsLoadingSettings(true);
+    setSettingsError(null);
+
+    try {
+      const result = await api.get<{
+        channel: ChannelSettings;
+        currentUserRole: 'admin' | 'member' | null;
+      }>(`/api/channels/${channelId}`);
+
+      if (result.channel) {
+        setSettings(result.channel);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch channel settings';
+      setSettingsError(message);
+      console.error('[useChannelAdmin] Settings fetch error:', err);
+    } finally {
+      setIsLoadingSettings(false);
+    }
+  }, [channelId]);
+
+  // Fetch channel members
+  const fetchMembers = useCallback(async (page: number, search: string) => {
+    setIsLoadingMembers(true);
+    setMembersError(null);
+
+    try {
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: pageSize.toString(),
+      });
+
+      if (search.trim()) {
+        params.set('search', search.trim());
+      }
+
+      const result = await api.get<{
+        members: ChannelMemberInfo[];
+        pagination: {
+          page: number;
+          limit: number;
+          total: number;
+          totalPages: number;
+        };
+      }>(`/api/channels/${channelId}/members?${params.toString()}`);
+
+      if (result.members) {
+        setMembers(result.members);
+        setMemberTotalCount(result.pagination?.total || result.members.length);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch members';
+      setMembersError(message);
+      console.error('[useChannelAdmin] Members fetch error:', err);
+    } finally {
+      setIsLoadingMembers(false);
+    }
+  }, [channelId, pageSize]);
+
+  // Auto-fetch on mount or channelId change
+  useEffect(() => {
+    if (autoFetch && channelId) {
+      fetchSettings();
+      fetchMembers(1, '');
+    }
+  }, [autoFetch, channelId, fetchSettings, fetchMembers]);
+
+  // Fetch members when page or search changes
+  useEffect(() => {
+    if (autoFetch && channelId) {
+      fetchMembers(memberPage, memberSearchQuery);
+    }
+  }, [memberPage, memberSearchQuery, autoFetch, channelId, fetchMembers]);
+
+  // Reset to page 1 when search changes
+  useEffect(() => {
+    setMemberPage(1);
+  }, [memberSearchQuery]);
+
+  // Go to specific member page
+  const goToMemberPage = useCallback((page: number) => {
+    const validPage = Math.max(1, Math.min(page, memberTotalPages));
+    setMemberPage(validPage);
+  }, [memberTotalPages]);
+
+  // Update channel settings
+  const updateSettings = useCallback(async (updates: Partial<Pick<ChannelSettings, 'description' | 'topic'>>) => {
+    if (!isAdmin) {
+      throw new Error('Permission denied: Admin access required');
+    }
+
+    try {
+      await api.patch(`/api/channels/${channelId}`, updates);
+
+      // Optimistically update local state
+      setSettings((prev) => prev ? { ...prev, ...updates } : null);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to update settings';
+      setSettingsError(message);
+      throw err;
+    }
+  }, [channelId, isAdmin]);
+
+  // Remove a member
+  const removeMember = useCallback(async (memberId: string) => {
+    if (!isAdmin) {
+      throw new Error('Permission denied: Admin access required');
+    }
+
+    try {
+      await api.delete(`/api/channels/${channelId}/members/${memberId}`);
+
+      // Optimistically update local state
+      setMembers((prev) => prev.filter((m) => m.id !== memberId));
+      setMemberTotalCount((prev) => Math.max(0, prev - 1));
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to remove member';
+      setMembersError(message);
+      throw err;
+    }
+  }, [channelId, isAdmin]);
+
+  // Assign an agent to the channel
+  const assignAgent = useCallback(async (agentName: string) => {
+    if (!isAdmin) {
+      throw new Error('Permission denied: Admin access required');
+    }
+
+    try {
+      const result = await api.post<{ member: ChannelMemberInfo }>(`/api/channels/${channelId}/agents`, {
+        agentName,
+      });
+
+      // Add to members list if returned
+      if (result.member) {
+        setMembers((prev) => [...prev, result.member]);
+        setMemberTotalCount((prev) => prev + 1);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to assign agent';
+      setMembersError(message);
+      throw err;
+    }
+  }, [channelId, isAdmin]);
+
+  // Set member role
+  const setMemberRole = useCallback(async (memberId: string, role: 'admin' | 'member') => {
+    if (!isAdmin) {
+      throw new Error('Permission denied: Admin access required');
+    }
+
+    try {
+      await api.patch(`/api/channels/${channelId}/members/${memberId}`, { role });
+
+      // Optimistically update local state
+      setMembers((prev) =>
+        prev.map((m) => m.id === memberId ? { ...m, role } : m)
+      );
+
+      // Update admins list in settings
+      if (role === 'admin') {
+        setSettings((prev) => {
+          if (!prev) return null;
+          const member = members.find((m) => m.id === memberId);
+          if (member && !prev.admins.includes(member.name)) {
+            return { ...prev, admins: [...prev.admins, member.name] };
+          }
+          return prev;
+        });
+      } else {
+        setSettings((prev) => {
+          if (!prev) return null;
+          const member = members.find((m) => m.id === memberId);
+          if (member) {
+            return { ...prev, admins: prev.admins.filter((a) => a !== member.name) };
+          }
+          return prev;
+        });
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to update member role';
+      setMembersError(message);
+      throw err;
+    }
+  }, [channelId, isAdmin, members]);
+
+  // Refresh functions
+  const refreshSettings = useCallback(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  const refreshMembers = useCallback(() => {
+    fetchMembers(memberPage, memberSearchQuery);
+  }, [fetchMembers, memberPage, memberSearchQuery]);
+
+  return {
+    settings,
+    members,
+    isLoadingSettings,
+    isLoadingMembers,
+    settingsError,
+    membersError,
+    isAdmin,
+    memberPage,
+    memberTotalPages,
+    memberTotalCount,
+    goToMemberPage,
+    memberSearchQuery,
+    setMemberSearchQuery,
+    updateSettings,
+    removeMember,
+    assignAgent,
+    setMemberRole,
+    refreshSettings,
+    refreshMembers,
+  };
+}

package/src/components/hooks/useChannelBrowser.ts

@@ -0,0 +1,239 @@
+/**
+ * useChannelBrowser Hook
+ *
+ * Manages browsing, searching, and joining channels.
+ * Includes debounced search and pagination support.
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useDebounce } from './useDebounce';
+import { api } from '../../lib/api';
+
+export interface BrowseChannel {
+  id: string;
+  name: string;
+  description?: string;
+  memberCount: number;
+  isJoined: boolean;
+  isPrivate: boolean;
+  createdAt: string;
+}
+
+export interface UseChannelBrowserOptions {
+  /** Workspace ID (required for API calls) */
+  workspaceId: string;
+  /** Initial page size (default: 20) */
+  pageSize?: number;
+  /** Search debounce delay in ms (default: 300) */
+  debounceDelay?: number;
+  /** Auto-fetch on mount (default: true) */
+  autoFetch?: boolean;
+}
+
+export interface UseChannelBrowserReturn {
+  /** List of channels for current page */
+  channels: BrowseChannel[];
+  /** Loading state */
+  isLoading: boolean;
+  /** Error message if any */
+  error: string | null;
+  /** Current search query */
+  searchQuery: string;
+  /** Update search query */
+  setSearchQuery: (query: string) => void;
+  /** Current page (1-indexed) */
+  currentPage: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Total count of channels matching search */
+  totalCount: number;
+  /** Navigate to a specific page */
+  goToPage: (page: number) => void;
+  /** Join a channel */
+  joinChannel: (channelId: string) => Promise<void>;
+  /** Leave a channel */
+  leaveChannel: (channelId: string) => Promise<void>;
+  /** Refresh the channel list */
+  refresh: () => void;
+}
+
+export function useChannelBrowser(
+  options: UseChannelBrowserOptions
+): UseChannelBrowserReturn {
+  const {
+    workspaceId,
+    pageSize = 20,
+    debounceDelay = 300,
+    autoFetch = true,
+  } = options;
+
+  const [channels, setChannels] = useState<BrowseChannel[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalCount, setTotalCount] = useState(0);
+
+  // Debounce search query
+  const debouncedSearchQuery = useDebounce(searchQuery, debounceDelay);
+
+  // Calculate total pages
+  const totalPages = useMemo(() => {
+    return Math.max(1, Math.ceil(totalCount / pageSize));
+  }, [totalCount, pageSize]);
+
+  // Fetch channels from API (workspace-scoped)
+  const fetchChannels = useCallback(async (page: number, search: string) => {
+    if (!workspaceId) {
+      setError('Workspace ID is required');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Build query params
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: pageSize.toString(),
+      });
+
+      if (search.trim()) {
+        params.set('search', search.trim());
+      }
+
+      // Use workspace-scoped endpoint
+      const result = await api.get<{
+        channels: Array<{
+          id: string;
+          name: string;
+          description?: string;
+          memberCount?: number;
+          isPrivate?: boolean;
+          createdAt: string;
+          // Backend may use different field names
+          isMember?: boolean;
+        }>;
+        archivedChannels?: unknown[];
+        pagination?: {
+          page: number;
+          limit: number;
+          total: number;
+          totalPages: number;
+        };
+      }>(`/api/workspaces/${workspaceId}/channels?${params.toString()}`);
+
+      if (result.channels) {
+        // Map backend response to BrowseChannel format
+        const mappedChannels: BrowseChannel[] = result.channels.map((ch) => ({
+          id: ch.id,
+          name: ch.name,
+          description: ch.description,
+          memberCount: ch.memberCount || 0,
+          isJoined: ch.isMember ?? false,
+          isPrivate: ch.isPrivate ?? false,
+          createdAt: ch.createdAt,
+        }));
+        setChannels(mappedChannels);
+        setTotalCount(result.pagination?.total || result.channels.length);
+      } else {
+        // API might return different structure - handle gracefully
+        setChannels([]);
+        setTotalCount(0);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch channels';
+      setError(message);
+      console.error('[useChannelBrowser] Fetch error:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [workspaceId, pageSize]);
+
+  // Fetch when search or page changes
+  useEffect(() => {
+    if (autoFetch) {
+      fetchChannels(currentPage, debouncedSearchQuery);
+    }
+  }, [currentPage, debouncedSearchQuery, autoFetch, fetchChannels]);
+
+  // Reset to page 1 when search changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [debouncedSearchQuery]);
+
+  // Go to specific page
+  const goToPage = useCallback((page: number) => {
+    const validPage = Math.max(1, Math.min(page, totalPages));
+    setCurrentPage(validPage);
+  }, [totalPages]);
+
+  // Join a channel (workspace-scoped)
+  const joinChannel = useCallback(async (channelId: string) => {
+    if (!workspaceId) {
+      throw new Error('Workspace ID is required');
+    }
+
+    try {
+      await api.post(`/api/workspaces/${workspaceId}/channels/${encodeURIComponent(channelId)}/join`);
+
+      // Optimistically update local state
+      setChannels((prev) =>
+        prev.map((ch) =>
+          ch.id === channelId
+            ? { ...ch, isJoined: true, memberCount: ch.memberCount + 1 }
+            : ch
+        )
+      );
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to join channel';
+      setError(message);
+      throw err;
+    }
+  }, [workspaceId]);
+
+  // Leave a channel (workspace-scoped)
+  const leaveChannel = useCallback(async (channelId: string) => {
+    if (!workspaceId) {
+      throw new Error('Workspace ID is required');
+    }
+
+    try {
+      await api.post(`/api/workspaces/${workspaceId}/channels/${encodeURIComponent(channelId)}/leave`);
+
+      // Optimistically update local state
+      setChannels((prev) =>
+        prev.map((ch) =>
+          ch.id === channelId
+            ? { ...ch, isJoined: false, memberCount: Math.max(0, ch.memberCount - 1) }
+            : ch
+        )
+      );
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to leave channel';
+      setError(message);
+      throw err;
+    }
+  }, [workspaceId]);
+
+  // Refresh current view
+  const refresh = useCallback(() => {
+    fetchChannels(currentPage, debouncedSearchQuery);
+  }, [fetchChannels, currentPage, debouncedSearchQuery]);
+
+  return {
+    channels,
+    isLoading,
+    error,
+    searchQuery,
+    setSearchQuery,
+    currentPage,
+    totalPages,
+    totalCount,
+    goToPage,
+    joinChannel,
+    leaveChannel,
+    refresh,
+  };
+}

package/src/components/hooks/useChannelCommands.ts

@@ -0,0 +1,138 @@
+/**
+ * useChannelCommands Hook
+ *
+ * Provides channel-related commands for the CommandPalette.
+ * Integrates /create-channel, /join-channel, /leave-channel, /channels commands.
+ */
+
+import { useMemo, useCallback, createElement } from 'react';
+import type { Command } from '../CommandPalette';
+import { api } from '../../lib/api';
+
+export interface ChannelInfo {
+  id: string;
+  name: string;
+  memberCount?: number;
+}
+
+export interface UseChannelCommandsOptions {
+  /** List of channels user has joined */
+  joinedChannels: string[];
+  /** Callback when user wants to browse channels */
+  onBrowseChannels: () => void;
+  /** Callback when user wants to create a channel */
+  onCreateChannel: () => void;
+  /** Callback when a channel is joined */
+  onChannelJoined?: (channelName: string) => void;
+  /** Callback when a channel is left */
+  onChannelLeft?: (channelName: string) => void;
+}
+
+export interface UseChannelCommandsReturn {
+  /** Commands to add to CommandPalette */
+  commands: Command[];
+  /** Autocomplete suggestions for channel names */
+  getChannelSuggestions: (query: string) => Promise<ChannelInfo[]>;
+}
+
+export function useChannelCommands(
+  options: UseChannelCommandsOptions
+): UseChannelCommandsReturn {
+  const {
+    joinedChannels,
+    onBrowseChannels,
+    onCreateChannel,
+    onChannelJoined,
+    onChannelLeft,
+  } = options;
+
+  // Get channel suggestions for autocomplete
+  const getChannelSuggestions = useCallback(async (query: string): Promise<ChannelInfo[]> => {
+    try {
+      const params = new URLSearchParams({
+        search: query,
+        limit: '10',
+      });
+
+      const result = await api.get<{
+        channels: Array<{ id: string; name: string; memberCount: number }>;
+      }>(`/api/channels/browse?${params.toString()}`);
+
+      return result.channels || [];
+    } catch (err) {
+      console.error('[useChannelCommands] Failed to get suggestions:', err);
+      return [];
+    }
+  }, []);
+
+  // Join channel action (reserved for future use)
+  const _joinChannel = useCallback(async (channelName: string) => {
+    try {
+      // Normalize channel name
+      const normalized = channelName.startsWith('#') ? channelName.slice(1) : channelName;
+
+      await api.post(`/api/channels/${normalized}/join`);
+      onChannelJoined?.(`#${normalized}`);
+    } catch (err) {
+      console.error('[useChannelCommands] Failed to join channel:', err);
+    }
+  }, [onChannelJoined]);
+
+  // Leave channel action
+  const leaveChannel = useCallback(async (channelName: string) => {
+    try {
+      // Normalize channel name
+      const normalized = channelName.startsWith('#') ? channelName.slice(1) : channelName;
+
+      await api.post(`/api/channels/${normalized}/leave`);
+      onChannelLeft?.(`#${normalized}`);
+    } catch (err) {
+      console.error('[useChannelCommands] Failed to leave channel:', err);
+    }
+  }, [onChannelLeft]);
+
+  // Build commands
+  const commands = useMemo((): Command[] => {
+    const channelCommands: Command[] = [
+      {
+        id: 'browse-channels',
+        label: 'Browse Channels',
+        description: 'Discover and join public channels',
+        category: 'channels',
+        icon: createElement('span', { className: 'text-sm' }, '#'),
+        shortcut: '/channels',
+        action: onBrowseChannels,
+      },
+      {
+        id: 'create-channel',
+        label: 'Create Channel',
+        description: 'Start a new channel',
+        category: 'channels',
+        icon: createElement('span', { className: 'text-sm' }, '+'),
+        shortcut: '/create-channel',
+        action: onCreateChannel,
+      },
+    ];
+
+    // Add leave commands for joined channels
+    for (const channel of joinedChannels) {
+      const displayName = channel.startsWith('#') ? channel : `#${channel}`;
+      channelCommands.push({
+        id: `leave-${channel}`,
+        label: `Leave ${displayName}`,
+        description: 'Leave this channel',
+        category: 'channels',
+        icon: createElement('span', { className: 'text-sm' }, '⊗'),
+        action: () => leaveChannel(channel),
+      });
+    }
+
+    return channelCommands;
+  }, [joinedChannels, onBrowseChannels, onCreateChannel, leaveChannel]);
+
+  return {
+    commands,
+    getChannelSuggestions,
+  };
+}
+