perf: speed up initial chat, channels, skills, and cron loading (#901)

tests/unit/channels-page.test.tsx

@@ -59,7 +59,7 @@ describe('Channels page status refresh', () => {
     });
     gatewayState.status = { state: 'running', port: 18789 };
     hostApiFetchMock.mockImplementation(async (path: string) => {
-      if (path === '/api/channels/accounts') {
+      if (path.startsWith('/api/channels/accounts')) {
         return {
           success: true,
           gatewayHealth: {
@@ -100,7 +100,7 @@ describe('Channels page status refresh', () => {
   it('blocks saving when custom account ID is non-canonical', async () => {
     subscribeHostEventMock.mockImplementation(() => vi.fn());
     hostApiFetchMock.mockImplementation(async (path: string) => {
-      if (path === '/api/channels/accounts') {
+      if (path.startsWith('/api/channels/accounts')) {
         return {
           success: true,
           channels: [
@@ -210,7 +210,7 @@ describe('Channels page status refresh', () => {
       const channelFetchCalls = hostApiFetchMock.mock.calls.filter(([path]) => path === '/api/channels/accounts');
       const agentFetchCalls = hostApiFetchMock.mock.calls.filter(([path]) => path === '/api/agents');
       expect(channelFetchCalls).toHaveLength(2);
-      expect(agentFetchCalls).toHaveLength(2);
+      expect(agentFetchCalls).toHaveLength(1);
     });
   });
 
@@ -233,14 +233,59 @@ describe('Channels page status refresh', () => {
       const channelFetchCalls = hostApiFetchMock.mock.calls.filter(([path]) => path === '/api/channels/accounts');
       const agentFetchCalls = hostApiFetchMock.mock.calls.filter(([path]) => path === '/api/agents');
       expect(channelFetchCalls).toHaveLength(2);
-      expect(agentFetchCalls).toHaveLength(2);
+      expect(agentFetchCalls).toHaveLength(1);
+    });
+  });
+
+  it('renders channel data without waiting for slow agents request', async () => {
+    subscribeHostEventMock.mockImplementation(() => vi.fn());
+
+    const agentsDeferred = createDeferred<{
+      success: boolean;
+      agents: Array<Record<string, unknown>>;
+    }>();
+
+    hostApiFetchMock.mockImplementation((path: string) => {
+      if (path.startsWith('/api/channels/accounts')) {
+        return Promise.resolve({
+          success: true,
+          channels: [
+            {
+              channelType: 'feishu',
+              defaultAccountId: 'default',
+              status: 'connected',
+              accounts: [
+                {
+                  accountId: 'default',
+                  name: 'Primary Account',
+                  configured: true,
+                  status: 'connected',
+                  isDefault: true,
+                },
+              ],
+            },
+          ],
+        });
+      }
+      if (path === '/api/agents') {
+        return agentsDeferred.promise;
+      }
+      throw new Error(`Unexpected host API path: ${path}`);
+    });
+
+    render(<Channels />);
+
+    expect(await screen.findByText('Feishu / Lark')).toBeInTheDocument();
+
+    await act(async () => {
+      agentsDeferred.resolve({ success: true, agents: [] });
     });
   });
 
   it('treats WeChat accounts as plugin-managed QR accounts', async () => {
     subscribeHostEventMock.mockImplementation(() => vi.fn());
     hostApiFetchMock.mockImplementation(async (path: string) => {
-      if (path === '/api/channels/accounts') {
+      if (path.startsWith('/api/channels/accounts')) {
         return {
           success: true,
           channels: [
@@ -305,7 +350,7 @@ describe('Channels page status refresh', () => {
 
     let refreshCallCount = 0;
     hostApiFetchMock.mockImplementation((path: string) => {
-      if (path === '/api/channels/accounts') {
+      if (path.startsWith('/api/channels/accounts')) {
         if (refreshCallCount === 0) {
           refreshCallCount += 1;
           return Promise.resolve({
@@ -401,7 +446,7 @@ describe('Channels page status refresh', () => {
     const writeTextMock = vi.mocked(navigator.clipboard.writeText);
 
     hostApiFetchMock.mockImplementation(async (path: string, init?: { method?: string }) => {
-      if (path === '/api/channels/accounts') {
+      if (path.startsWith('/api/channels/accounts')) {
         return {
           success: true,
           gatewayHealth: {
@@ -477,7 +522,7 @@ describe('Channels page status refresh', () => {
     subscribeHostEventMock.mockImplementation(() => vi.fn());
 
     hostApiFetchMock.mockImplementation(async (path: string) => {
-      if (path === '/api/channels/accounts') {
+      if (path.startsWith('/api/channels/accounts')) {
         return {
           success: true,
           gatewayHealth: {
@@ -530,7 +575,7 @@ describe('Channels page status refresh', () => {
     subscribeHostEventMock.mockImplementation(() => vi.fn());
 
     hostApiFetchMock.mockImplementation(async (path: string, init?: { method?: string }) => {
-      if (path === '/api/channels/accounts') {
+      if (path.startsWith('/api/channels/accounts')) {
         return {
           success: true,
           gatewayHealth: {
@@ -584,7 +629,7 @@ describe('Channels page status refresh', () => {
 
     let diagnosticsFetchCount = 0;
     hostApiFetchMock.mockImplementation(async (path: string) => {
-      if (path === '/api/channels/accounts') {
+      if (path.startsWith('/api/channels/accounts')) {
         return {
           success: true,
           gatewayHealth: {

tests/unit/cron-store-fetch-dedupe.test.ts

@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const hostApiFetchMock = vi.fn();
+
+vi.mock('@/lib/host-api', () => ({
+  hostApiFetch: (...args: unknown[]) => hostApiFetchMock(...args),
+}));
+
+vi.mock('@/stores/chat', () => ({
+  useChatStore: {
+    getState: () => ({
+      currentAgentId: 'main',
+    }),
+  },
+}));
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+describe('cron store fetchJobs dedupe', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.clearAllMocks();
+  });
+
+  it('reuses in-flight fetchJobs request when called concurrently', async () => {
+    const listDeferred = deferred<Array<{ id: string }>>();
+    hostApiFetchMock.mockReturnValueOnce(listDeferred.promise);
+
+    const { useCronStore } = await import('@/stores/cron');
+    useCronStore.setState({ jobs: [], loading: false, error: null });
+
+    const first = useCronStore.getState().fetchJobs();
+    const second = useCronStore.getState().fetchJobs();
+    await Promise.resolve();
+
+    expect(hostApiFetchMock).toHaveBeenCalledTimes(1);
+    expect(hostApiFetchMock).toHaveBeenCalledWith('/api/cron/jobs');
+
+    listDeferred.resolve([{ id: 'job-1' }]);
+    await Promise.all([first, second]);
+
+    expect(useCronStore.getState().jobs.map((job) => job.id)).toEqual(['job-1']);
+  });
+});

tests/unit/skills-store-fetch-parallel.test.ts

@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const hostApiFetchMock = vi.fn();
+const rpcMock = vi.fn();
+
+vi.mock('@/lib/host-api', () => ({
+  hostApiFetch: (...args: unknown[]) => hostApiFetchMock(...args),
+}));
+
+vi.mock('@/stores/gateway', () => ({
+  useGatewayStore: {
+    getState: () => ({
+      rpc: (...args: unknown[]) => rpcMock(...args),
+    }),
+  },
+}));
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+describe('skills store fetch parallelization', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.clearAllMocks();
+  });
+
+  it('starts clawhub and config requests before gateway rpc resolves', async () => {
+    const gatewayDeferred = deferred<{ skills: Array<Record<string, unknown>> }>();
+    rpcMock.mockReturnValueOnce(gatewayDeferred.promise);
+    hostApiFetchMock.mockImplementation((path: unknown) => {
+      if (path === '/api/clawhub/list') return Promise.resolve({ success: true, results: [] });
+      if (path === '/api/skills/configs') return Promise.resolve({});
+      return Promise.reject(new Error(`Unexpected path: ${String(path)}`));
+    });
+
+    const { useSkillsStore } = await import('@/stores/skills');
+    useSkillsStore.setState({ skills: [], loading: false, error: null });
+
+    const fetchPromise = useSkillsStore.getState().fetchSkills();
+    await Promise.resolve();
+
+    expect(rpcMock).toHaveBeenCalledWith('skills.status');
+    expect(hostApiFetchMock).toHaveBeenCalledWith('/api/clawhub/list');
+    expect(hostApiFetchMock).toHaveBeenCalledWith('/api/skills/configs');
+
+    gatewayDeferred.resolve({ skills: [] });
+    await fetchPromise;
+  });
+});