@elizaos/client 1.5.5-alpha.10

package/src/hooks/__tests__/use-panel-width-state.test.ts

@@ -0,0 +1,243 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { describe, it, expect, beforeEach, mock } from 'bun:test';
+import { usePanelWidthState } from '../use-panel-width-state';
+
+// Mock clientLogger
+mock.module('../../lib/logger', () => ({
+  default: {
+    error: mock(),
+  },
+}));
+
+describe('usePanelWidthState', () => {
+  beforeEach(() => {
+    // Clear localStorage before each test
+    localStorage.clear();
+
+    // Reset window dimensions (above 1400 threshold)
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1500,
+    });
+  });
+
+  it('should initialize with default values when localStorage is empty', () => {
+    const { result } = renderHook(() => usePanelWidthState());
+
+    expect(result.current.mainPanelSize).toBe(70);
+    expect(result.current.sidebarPanelSize).toBe(30);
+    expect(result.current.isFloatingMode).toBe(false);
+    expect(result.current.floatingThreshold).toBe(1400);
+  });
+
+  it('should load persisted values from localStorage on mount', async () => {
+    // Set up localStorage with saved values (use correct keys)
+    localStorage.setItem('eliza-main-panel-width', '65');
+    localStorage.setItem('eliza-sidebar-panel-width', '35');
+
+    const { result } = renderHook(() => usePanelWidthState());
+
+    await waitFor(() => {
+      expect(result.current.mainPanelSize).toBe(65);
+      expect(result.current.sidebarPanelSize).toBe(35);
+    });
+  });
+
+  it('should persist main panel size to localStorage when updated', async () => {
+    const { result } = renderHook(() => usePanelWidthState());
+
+    act(() => {
+      result.current.setMainPanelSize(75);
+    });
+
+    await waitFor(() => {
+      expect(result.current.mainPanelSize).toBe(75);
+    });
+
+    expect(localStorage.getItem('eliza-main-panel-width')).toBe('75');
+  });
+
+  it('should persist sidebar panel size to localStorage when updated', async () => {
+    const { result } = renderHook(() => usePanelWidthState());
+
+    act(() => {
+      result.current.setSidebarPanelSize(25);
+    });
+
+    await waitFor(() => {
+      expect(result.current.sidebarPanelSize).toBe(25);
+    });
+
+    expect(localStorage.getItem('eliza-sidebar-panel-width')).toBe('25');
+  });
+
+  it('should validate and clamp panel sizes within bounds', async () => {
+    const { result } = renderHook(() => usePanelWidthState());
+
+    // Test main panel size clamping
+    act(() => {
+      result.current.setMainPanelSize(5); // Below minimum (20)
+    });
+
+    await waitFor(() => {
+      expect(result.current.mainPanelSize).toBe(20);
+    });
+
+    act(() => {
+      result.current.setMainPanelSize(95); // Above maximum (80)
+    });
+
+    await waitFor(() => {
+      expect(result.current.mainPanelSize).toBe(80);
+    });
+
+    // Test sidebar panel size clamping
+    act(() => {
+      result.current.setSidebarPanelSize(15); // Below minimum (20)
+    });
+
+    await waitFor(() => {
+      expect(result.current.sidebarPanelSize).toBe(20);
+    });
+
+    act(() => {
+      result.current.setSidebarPanelSize(85); // Above maximum (80)
+    });
+
+    await waitFor(() => {
+      expect(result.current.sidebarPanelSize).toBe(80);
+    });
+  });
+
+  it('should reset panel sizes to defaults and clear localStorage', () => {
+    // Set up some custom values first
+    localStorage.setItem('eliza-main-panel-width', '60');
+    localStorage.setItem('eliza-sidebar-panel-width', '40');
+
+    const { result } = renderHook(() => usePanelWidthState());
+
+    // Verify initial persisted values
+    expect(result.current.mainPanelSize).toBe(60);
+    expect(result.current.sidebarPanelSize).toBe(40);
+
+    // Reset to defaults
+    act(() => {
+      result.current.resetPanelSizes();
+    });
+
+    expect(result.current.mainPanelSize).toBe(70);
+    expect(result.current.sidebarPanelSize).toBe(30);
+    expect(localStorage.getItem('eliza-main-panel-width')).toBe(null);
+    expect(localStorage.getItem('eliza-sidebar-panel-width')).toBe(null);
+  });
+
+  it('should handle localStorage errors gracefully when reading', () => {
+    // Set up invalid values
+    localStorage.setItem('eliza-main-panel-width', 'invalid');
+    localStorage.setItem('eliza-sidebar-panel-width', 'invalid');
+
+    const { result } = renderHook(() => usePanelWidthState());
+
+    // Should fall back to defaults
+    expect(result.current.mainPanelSize).toBe(70);
+    expect(result.current.sidebarPanelSize).toBe(30);
+  });
+
+  it('should handle localStorage errors gracefully when writing', () => {
+    const { result } = renderHook(() => usePanelWidthState());
+
+    // Mock localStorage to throw an error on setItem
+    const originalSetItem = localStorage.setItem;
+    localStorage.setItem = () => {
+      throw new Error('localStorage save error');
+    };
+
+    // Should still update state even if localStorage fails
+    act(() => {
+      result.current.setMainPanelSize(65);
+    });
+
+    expect(result.current.mainPanelSize).toBe(65);
+
+    // Restore original setItem immediately
+    localStorage.setItem = originalSetItem;
+  });
+
+  it('should handle invalid JSON values from localStorage', () => {
+    localStorage.setItem('eliza-main-panel-width', 'not-a-number');
+    localStorage.setItem('eliza-sidebar-panel-width', 'also-not-a-number');
+
+    const { result } = renderHook(() => usePanelWidthState());
+
+    // Should use defaults when values can't be parsed
+    expect(result.current.mainPanelSize).toBe(70);
+    expect(result.current.sidebarPanelSize).toBe(30);
+  });
+
+  it('should handle out-of-range values from localStorage', () => {
+    localStorage.setItem('eliza-main-panel-width', '150'); // Way too high (> 100)
+    localStorage.setItem('eliza-sidebar-panel-width', '0'); // Way too low (<= 0)
+
+    const { result } = renderHook(() => usePanelWidthState());
+
+    // Should fall back to defaults when values are out of valid loading range
+    expect(result.current.mainPanelSize).toBe(70); // Default value
+    expect(result.current.sidebarPanelSize).toBe(30); // Default value
+  });
+
+  it('should detect floating mode based on window width', () => {
+    // Set window width below threshold
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1300,
+    });
+
+    const { result } = renderHook(() => usePanelWidthState());
+
+    expect(result.current.isFloatingMode).toBe(true);
+  });
+
+  it('should toggle floating mode manually', () => {
+    const { result } = renderHook(() => usePanelWidthState());
+
+    expect(result.current.isFloatingMode).toBe(false);
+
+    act(() => {
+      result.current.toggleFloatingMode();
+    });
+
+    expect(result.current.isFloatingMode).toBe(true);
+  });
+
+  it('should update floating threshold and persist to localStorage', () => {
+    const { result } = renderHook(() => usePanelWidthState());
+
+    act(() => {
+      result.current.setFloatingThreshold(900);
+    });
+
+    expect(result.current.floatingThreshold).toBe(900);
+    expect(localStorage.getItem('eliza-floating-threshold')).toBe('900');
+  });
+
+  it('should respond to window resize events', () => {
+    const { result } = renderHook(() => usePanelWidthState());
+
+    // Initially not in floating mode (width 1500 > 1400)
+    expect(result.current.isFloatingMode).toBe(false);
+
+    act(() => {
+      // Simulate window resize to trigger floating mode
+      Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: 1300,
+      });
+      window.dispatchEvent(new Event('resize'));
+    });
+
+    expect(result.current.isFloatingMode).toBe(true);
+  });
+});

package/src/hooks/__tests__/use-sidebar-state.test.ts

@@ -0,0 +1,117 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { describe, it, expect, beforeEach, mock } from 'bun:test';
+import { useSidebarState } from '../use-sidebar-state';
+
+// Mock clientLogger
+mock.module('../../lib/logger', () => ({
+  default: {
+    error: mock(),
+  },
+}));
+
+describe('useSidebarState', () => {
+  beforeEach(() => {
+    // Clear localStorage before each test
+    localStorage.clear();
+  });
+
+  it('should initialize with false when no stored state exists', () => {
+    const { result } = renderHook(() => useSidebarState());
+
+    expect(result.current.isVisible).toBe(false);
+  });
+
+  it('should load stored state when it exists', async () => {
+    localStorage.setItem('eliza-agent-sidebar-visible', 'true');
+
+    const { result } = renderHook(() => useSidebarState());
+
+    await waitFor(() => {
+      expect(result.current.isVisible).toBe(true);
+    });
+  });
+
+  it('should save state when setSidebarVisible is called', async () => {
+    const { result } = renderHook(() => useSidebarState());
+
+    act(() => {
+      result.current.setSidebarVisible(true);
+    });
+
+    await waitFor(() => {
+      expect(result.current.isVisible).toBe(true);
+    });
+
+    expect(localStorage.getItem('eliza-agent-sidebar-visible')).toBe('true');
+  });
+
+  it('should toggle state when toggleSidebar is called', async () => {
+    const { result } = renderHook(() => useSidebarState());
+
+    // Initially false
+    expect(result.current.isVisible).toBe(false);
+
+    // Toggle to true
+    act(() => {
+      result.current.toggleSidebar();
+    });
+
+    await waitFor(() => {
+      expect(result.current.isVisible).toBe(true);
+    });
+
+    expect(localStorage.getItem('eliza-agent-sidebar-visible')).toBe('true');
+
+    // Toggle back to false
+    act(() => {
+      result.current.toggleSidebar();
+    });
+
+    await waitFor(() => {
+      expect(result.current.isVisible).toBe(false);
+    });
+
+    expect(localStorage.getItem('eliza-agent-sidebar-visible')).toBe('false');
+  });
+
+  it('should handle localStorage errors gracefully', () => {
+    // Set up invalid JSON
+    localStorage.setItem('eliza-agent-sidebar-visible', 'invalid-json');
+
+    const { result } = renderHook(() => useSidebarState());
+
+    // Should default to false when JSON parsing fails
+    expect(result.current.isVisible).toBe(false);
+  });
+
+  it('should handle localStorage save errors gracefully', async () => {
+    // Mock localStorage to throw an error on setItem
+    const originalSetItem = localStorage.setItem;
+    localStorage.setItem = () => {
+      throw new Error('localStorage save error');
+    };
+
+    const { result } = renderHook(() => useSidebarState());
+
+    // Should still update state even if localStorage fails
+    act(() => {
+      result.current.setSidebarVisible(true);
+    });
+
+    await waitFor(() => {
+      expect(result.current.isVisible).toBe(true);
+    });
+
+    // Restore original setItem
+    localStorage.setItem = originalSetItem;
+  });
+
+  it('should handle invalid JSON in localStorage', () => {
+    localStorage.setItem('eliza-agent-sidebar-visible', 'invalid-json');
+
+    const { result } = renderHook(() => useSidebarState());
+
+    // Should default to false when JSON parsing fails
+    expect(result.current.isVisible).toBe(false);
+  });
+});

package/src/hooks/use-agent-management.ts

@@ -0,0 +1,130 @@
+import type { Agent, UUID } from '@elizaos/core';
+import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useStartAgent, useStopAgent } from './use-query-hooks';
+import { useToast } from './use-toast';
+// Direct error handling
+
+/**
+ * Custom hook for managing agents (starting, stopping, and tracking status)
+ */
+/**
+ * Custom hook for agent management.
+ * Allows starting and stopping agents with mutation operations.
+ * Provides functions to check if an agent is currently starting or stopping.
+ * @returns Object with functions for starting and stopping agents, checking agent status, and lists of agents in starting and stopping processes.
+ */
+export function useAgentManagement() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  // Mutations for starting and stopping agents
+  const startAgentMutation = useStartAgent();
+  const stopAgentMutation = useStopAgent();
+
+  // Track agents that are currently in the process of starting or stopping
+  const [startingAgents, setStartingAgents] = useState<UUID[]>([]);
+  const [stoppingAgents, setStoppingAgents] = useState<UUID[]>([]);
+
+  /**
+   * Start an agent and navigate to its chat
+   */
+  const startAgent = async (agent: Agent) => {
+    if (!agent.id) {
+      toast({
+        title: 'Error',
+        description: 'Agent ID is missing',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const agentId = agent.id as UUID;
+
+    // Prevent starting if already in progress
+    if (startingAgents.includes(agentId)) {
+      return;
+    }
+
+    try {
+      // Add agent to starting list
+      setStartingAgents((prev) => [...prev, agentId]);
+
+      // Start the agent
+      await startAgentMutation.mutateAsync(agentId);
+    } catch (error) {
+      console.error('Failed to start agent:', error);
+      // Let the mutation's onError handler show the appropriate toast
+    } finally {
+      // Remove agent from starting list regardless of success/failure
+      setStartingAgents((prev) => prev.filter((id) => id !== agentId));
+    }
+  };
+
+  /**
+   * Stop an agent
+   */
+  const stopAgent = async (agent: Agent) => {
+    if (!agent.id) {
+      toast({
+        title: 'Error',
+        description: 'Agent ID is missing',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    const agentId = agent.id as UUID;
+
+    // Prevent stopping if already in progress
+    if (stoppingAgents.includes(agentId)) {
+      return;
+    }
+
+    try {
+      // Add agent to stopping list
+      setStoppingAgents((prev) => [...prev, agentId]);
+
+      // Stop the agent
+      await stopAgentMutation.mutateAsync(agentId);
+
+      toast({
+        title: 'Agent Stopped',
+        description: `${agent.name} has been stopped`,
+      });
+    } catch (error) {
+      console.error('Failed to stop agent:', error);
+      // Let the mutation's onError handler show the appropriate toast
+    } finally {
+      // Remove agent from stopping list regardless of success/failure
+      setStoppingAgents((prev) => prev.filter((id) => id !== agentId));
+    }
+  };
+
+  /**
+   * Check if an agent is currently starting
+   */
+  const isAgentStarting = (agentId: UUID | undefined | null) => {
+    if (!agentId) return false;
+    return startingAgents.includes(agentId);
+  };
+
+  /**
+   * Check if an agent is currently stopping
+   */
+  const isAgentStopping = (agentId: UUID | undefined | null) => {
+    if (!agentId) return false;
+    return stoppingAgents.includes(agentId);
+  };
+
+  return {
+    startAgent,
+    stopAgent,
+    isAgentStarting,
+    isAgentStopping,
+    startingAgents,
+    stoppingAgents,
+  };
+}

package/src/hooks/use-agent-tab-state.ts

@@ -0,0 +1,74 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { UUID } from '@elizaos/core';
+import clientLogger from '@/lib/logger';
+
+// Key for storing agent tab states in localStorage
+const AGENT_TAB_STATE_KEY = 'eliza-agent-tab-states';
+
+type TabValue = 'details' | 'actions' | 'logs' | 'memories' | string;
+
+interface AgentTabStates {
+  [agentId: string]: TabValue;
+}
+
+/**
+ * Custom hook to manage agent sidebar tab state with localStorage persistence
+ * Each agent remembers its last selected tab when switching between agents
+ */
+export function useAgentTabState(agentId: UUID | undefined) {
+  const [currentTab, setCurrentTab] = useState<TabValue>('details');
+
+  // Load tab states from localStorage
+  const getStoredTabStates = useCallback((): AgentTabStates => {
+    try {
+      const stored = localStorage.getItem(AGENT_TAB_STATE_KEY);
+      return stored ? JSON.parse(stored) : {};
+    } catch (error) {
+      clientLogger.error('Error reading agent tab states from localStorage:', error);
+      return {};
+    }
+  }, []);
+
+  // Save tab states to localStorage
+  const saveTabStates = useCallback((states: AgentTabStates) => {
+    try {
+      localStorage.setItem(AGENT_TAB_STATE_KEY, JSON.stringify(states));
+    } catch (error) {
+      clientLogger.error('Error saving agent tab states to localStorage:', error);
+    }
+  }, []);
+
+  // Load the tab state for the current agent when agentId changes
+  useEffect(() => {
+    if (!agentId) {
+      setCurrentTab('details');
+      return;
+    }
+
+    const storedStates = getStoredTabStates();
+    const agentTabState = storedStates[agentId] || 'details';
+    setCurrentTab(agentTabState);
+  }, [agentId, getStoredTabStates]);
+
+  // Update tab state and persist to localStorage
+  const updateTab = useCallback(
+    (newTab: TabValue) => {
+      setCurrentTab(newTab);
+
+      if (agentId) {
+        const storedStates = getStoredTabStates();
+        const updatedStates = {
+          ...storedStates,
+          [agentId]: newTab,
+        };
+        saveTabStates(updatedStates);
+      }
+    },
+    [agentId, getStoredTabStates, saveTabStates]
+  );
+
+  return {
+    currentTab,
+    setTab: updateTab,
+  };
+}