feat(ui): Phase 8 UI/UX optimization and system documentation update

## Sidebar Enhancement - Change tabs to icon + small label layout for better space utilization - Add Teams tab with team collaboration entry point ## Settings Page Improvements - Connect theme toggle to gatewayStore.saveQuickConfig for persistence - Remove OpenFang backend download section, simplify UI - Add time range filter to UsageStats (7d/30d/all) - Add stat cards with icons (sessions, messages, input/output tokens) - Add token usage overview bar chart - Add 8 ZCLAW system skill definitions with categories ## Bug Fixes - Fix ChannelList duplicate content with deduplication logic - Integrate CreateTriggerModal in TriggersPanel - Add independent SecurityStatusPanel with 12 default enabled layers - Change workflow view to use SchedulerPanel as unified entry ## New Components - CreateTriggerModal: Event trigger creation modal - HandApprovalModal: Hand approval workflow dialog - HandParamsForm: Enhanced Hand parameter form - SecurityLayersPanel: 16-layer security status display ## Architecture - Add TOML config parsing support (toml-utils.ts, config-parser.ts) - Add request timeout and retry mechanism (request-helper.ts) - Add secure token storage (secure-storage.ts, secure_storage.rs) ## Tests - Add unit tests for config-parser, toml-utils, request-helper - Add team-client and teamStore tests ## Documentation - Update SYSTEM_ANALYSIS.md with Phase 8 completion - UI completion: 100% (30/30 components) - API coverage: 93% (63/68 endpoints) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-15 14:12:11 +08:00
parent bf79c06d4a
commit 3e81bd3e50
30 changed files with 8875 additions and 284 deletions
--- a/desktop/tests/lib/request-helper.test.ts
+++ b/desktop/tests/lib/request-helper.test.ts
@@ -0,0 +1,417 @@
+/**
+ * Request Helper Tests
+ *
+ * Tests for request timeout, automatic retry with exponential backoff,
+* and request cancellation support.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+  requestWithRetry,
+  requestJson,
+  RequestManager,
+  RequestError,
+  RequestCancelledError,
+  DEFAULT_REQUEST_CONFIG,
+  get,
+  post,
+  put,
+  del,
+  patch,
+} from '../../src/lib/request-helper';
+
+// Mock fetch globally
+const mockFetch = vi.fn();
+const originalFetch = global.fetch;
+
+describe('request-helper', () => {
+  beforeEach(() => {
+    global.fetch = mockFetch;
+    mockFetch.mockClear();
+  });
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+    mockFetch.mockReset();
+  });
+
+  describe('DEFAULT_REQUEST_CONFIG', () => {
+    it('should have correct default values', () => {
+      expect(DEFAULT_REQUEST_CONFIG.timeout).toBe(30000);
+      expect(DEFAULT_REQUEST_CONFIG.retries).toBe(3);
+      expect(DEFAULT_REQUEST_CONFIG.retryDelay).toBe(1000);
+      expect(DEFAULT_REQUEST_CONFIG.retryOn).toEqual([408, 429, 500, 502, 503, 504]);
+      expect(DEFAULT_REQUEST_CONFIG.maxRetryDelay).toBe(30000);
+    });
+  });
+
+  describe('RequestError', () => {
+    it('should create error with all properties', () => {
+      const error = new RequestError('Test error', 500, 'Server Error', 'response body');
+
+      expect(error.message).toBe('Test error');
+      expect(error.status).toBe(500);
+      expect(error.statusText).toBe('Server Error');
+      expect(error.responseBody).toBe('response body');
+    });
+
+    it('should detect retryable status codes', () => {
+      const error = new RequestError('Test', 500, 'Error');
+      expect(error.isRetryable()).toBe(true);
+      expect(error.isRetryable([500, 502])).toBe(true);
+      expect(error.isRetryable([401])).toBe(false);
+    });
+
+    it('should detect timeout errors', () => {
+      const timeoutError = new RequestError('timeout', 408, 'Request Timeout');
+      expect(timeoutError.isTimeout()).toBe(true);
+
+      const const otherError = new RequestError('other', 500, 'Error');
+      expect(otherError.isTimeout()).toBe(false);
+    });
+
+    it('should detect auth errors', () => {
+      const authError = new RequestError('Unauthorized', 401, 'Unauthorized');
+      expect(authError.isAuthError()).toBe(true);
+
+      const forbiddenError = new RequestError('Forbidden', 403, 'Forbidden');
+      expect(forbiddenError.isAuthError()).toBe(true);
+
+      const otherError = new RequestError('Server Error', 500, 'Error');
+      expect(otherError.isAuthError()).toBe(false);
+    });
+  });
+
+  describe('RequestCancelledError', () => {
+    it('should create cancellation error', () => {
+      const error = new RequestCancelledError('Request was cancelled');
+      expect(error.message).toBe('Request was cancelled');
+      expect(error.name).toBe('RequestCancelledError');
+    });
+
+    it('should use default message', () => {
+      const error = new RequestCancelledError();
+      expect(error.message).toBe('Request cancelled');
+    });
+  });
+
+  describe('requestWithRetry', () => {
+    it('should return response on success', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({ data: 'success' }),
+      });
+
+      const response = await requestWithRetry('https://api.example.com/test');
+      const data = await response.json();
+
+      expect(data).toEqual({ data: 'success' });
+      expect(mockFetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('should retry on retryable status codes', async () => {
+      // First call fails with 503
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        status: 503,
+        statusText: 'Service Unavailable',
+        text: async () => 'Error body',
+      });
+
+      // Second call succeeds
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({ data: 'retried success' }),
+      });
+
+      const response = await requestWithRetry('https://api.example.com/test', {}, {
+        retries: 2,
+        retryDelay: 10, // Small delay for testing
+      });
+      const data = await response.json();
+
+      expect(data).toEqual({ data: 'retried success' });
+      expect(mockFetch).toHaveBeenCalledTimes(2);
+    });
+
+    it('should not retry on non-retryable status codes', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        status: 401,
+        statusText: 'Unauthorized',
+        text: async () => '{"error": "Unauthorized"}',
+      });
+
+      await expect(requestWithRetry('https://api.example.com/test')).rejects(RequestError);
+
+      expect(mockFetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('should throw after all retries exhausted', async () => {
+      // All calls fail with 503
+      mockFetch.mockResolvedValue({
+        ok: false,
+        status: 503,
+        statusText: 'Service Unavailable',
+        text: async () => 'Error',
+      });
+
+      await expect(
+        requestWithRetry('https://api.example.com/test', {}, { retries: 2, retryDelay: 10 })
+      ).rejects(RequestError);
+    });
+
+    it('should handle timeout correctly', async () => {
+      // Create a promise that never resolves to simulate timeout
+      mockFetch.mockImplementationOnce(() => new Promise(() => {}));
+
+      await expect(
+        requestWithRetry('https://api.example.com/test', {}, { timeout: 50, retries: 1 })
+      ).rejects(RequestError);
+    });
+
+    it('should handle network errors', async () => {
+      mockFetch.mockRejectedValueOnce(new Error('Network error'));
+
+      await expect(requestWithRetry('https://api.example.com/test')).rejects(RequestError);
+    });
+
+    it('should pass through request options', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({}),
+      });
+
+      await requestWithRetry('https://api.example.com/test', {
+        method: 'POST',
+        headers: { 'X-Custom': 'value' },
+        body: JSON.stringify({ test: 'data' }),
+      });
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        'https://api.example.com/test',
+        expect.objectContaining({
+          method: 'POST',
+          headers: expect.objectContaining({
+            'X-Custom': 'value',
+          }),
+          body: '{"test":"data"}',
+          signal: expect.any(AbortSignal),
+        })
+      );
+    });
+  });
+
+  describe('requestJson', () => {
+    it('should parse JSON response', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({ message: 'hello' }),
+      });
+
+      const result = await requestJson<{ message: string }>('https://api.example.com/test');
+      expect(result).toEqual({ message: 'hello' });
+    });
+
+    it('should throw on invalid JSON', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        text: async () => 'not valid json',
+      });
+
+      await expect(requestJson('https://api.example.com/test')).rejects(RequestError);
+    });
+  });
+
+  describe('RequestManager', () => {
+    let manager: RequestManager;
+
+    beforeEach(() => {
+      manager = new RequestManager();
+    });
+
+    it('should track active requests', () => {
+      const controller = manager.createRequest('test-1');
+
+      expect(manager.isRequestActive('test-1')).toBe(true);
+      expect(manager.activeCount).toBe(1);
+    });
+
+    it('should cancel request', () => {
+      const controller = manager.createRequest('test-1');
+      expect(manager.cancelRequest('test-1')).toBe(true);
+      expect(manager.isRequestActive('test-1')).toBe(false);
+    });
+
+    it('should return false when cancelling non-existent request', () => {
+      expect(manager.cancelRequest('non-existent')).toBe(false);
+    });
+
+    it('should replace existing request with same ID', () => {
+      const controller1 = manager.createRequest('test-1');
+      const controller2 = manager.createRequest('test-1');
+
+      expect(controller1.signal.aborted).toBe(true);
+      expect(manager.isRequestActive('test-1')).toBe(true);
+    });
+
+    it('should get all active request IDs', () => {
+      manager.createRequest('test-1');
+      manager.createRequest('test-2');
+      manager.createRequest('test-3');
+
+      const ids = manager.getActiveRequestIds();
+      expect(ids).toHaveLength(3);
+      expect(ids).toContain('test-1');
+      expect(ids).toContain('test-2');
+      expect(ids).toContain('test-3');
+    });
+
+    it('should cancel all requests', () => {
+      manager.createRequest('test-1');
+      manager.createRequest('test-2');
+      manager.createRequest('test-3');
+
+      manager.cancelAll();
+
+      expect(manager.activeCount).toBe(0);
+    });
+
+    it('should execute managed request successfully', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({ success: true }),
+      });
+
+      const response = await manager.executeManaged('test-1', 'https://api.example.com/test');
+      const data = await response.json();
+
+      expect(data).toEqual({ success: true });
+      expect(manager.isRequestActive('test-1')).toBe(false);
+    });
+
+    it('should clean up on error', async () => {
+      mockFetch.mockRejectedValueOnce(new Error('Test error'));
+
+      await expect(
+        manager.executeManaged('test-1', 'https://api.example.com/test')
+      ).rejects();
+
+      expect(manager.isRequestActive('test-1')).toBe(false);
+    });
+
+    it('should execute managed JSON request', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({ data: 'test' }),
+      });
+
+      const result = await manager.executeManagedJson<{ data: string }>(
+        'test-1',
+        'https://api.example.com/test'
+      );
+
+      expect(result).toEqual({ data: 'test' });
+    });
+  });
+
+  describe('Convenience functions', () => {
+    it('should make GET request', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({}),
+      });
+
+      await get('https://api.example.com/test');
+      expect(mockFetch).toHaveBeenCalledWith(
+        'https://api.example.com/test',
+        expect.objectContaining({ method: 'GET' })
+      );
+    });
+
+    it('should make POST request', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({}),
+      });
+
+      await post('https://api.example.com/test', { data: 'test' });
+      expect(mockFetch).toHaveBeenCalledWith(
+        'https://api.example.com/test',
+        expect.objectContaining({
+          method: 'POST',
+          body: '{"data":"test"}',
+        })
+      );
+    });
+
+    it('should make PUT request', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({}),
+      });
+
+      await put('https://api.example.com/test', { data: 'test' });
+      expect(mockFetch).toHaveBeenCalledWith(
+        'https://api.example.com/test',
+        expect.objectContaining({
+          method: 'PUT',
+          body: '{"data":"test"}',
+        })
+      );
+    });
+
+    it('should make DELETE request', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({}),
+      });
+
+      await del('https://api.example.com/test');
+      expect(mockFetch).toHaveBeenCalledWith(
+        'https://api.example.com/test',
+        expect.objectContaining({ method: 'DELETE' })
+      );
+    });
+
+    it('should make PATCH request', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        statusText: 'OK',
+        json: async () => ({}),
+      });
+
+      await patch('https://api.example.com/test', { data: 'test' });
+      expect(mockFetch).toHaveBeenCalledWith(
+        'https://api.example.com/test',
+        expect.objectContaining({
+          method: 'PATCH',
+          body: '{"data":"test"}',
+        })
+      );
+    });
+  });
+});