Feat/perf dashboard (#770)

src/pages/Channels/index.tsx

@@ -96,8 +96,20 @@ export function Channels() {
   const hasStableValue = visibleChannelGroups.length > 0 || visibleAgents.length > 0;
   const isUsingStableValue = hasStableValue && (loading || Boolean(error));
 
+  // Use refs to read current state inside fetchPageData without making it
+  // a dependency — keeps the callback reference stable across renders so
+  // downstream useEffects don't re-execute every time data changes.
+  const channelGroupsRef = useRef(channelGroups);
+  channelGroupsRef.current = channelGroups;
+  const agentsRef = useRef(agents);
+  agentsRef.current = agents;
+
   const fetchPageData = useCallback(async () => {
-    setLoading(true);
+    // Only show loading spinner on first load (stale-while-revalidate).
+    const hasData = channelGroupsRef.current.length > 0 || agentsRef.current.length > 0;
+    if (!hasData) {
+      setLoading(true);
+    }
     setError(null);
     try {
       const [channelsRes, agentsRes] = await Promise.all([
@@ -116,10 +128,13 @@ export function Channels() {
       setChannelGroups(channelsRes.channels || []);
       setAgents(agentsRes.agents || []);
     } catch (fetchError) {
+      // Preserve previous data on error — don't clear channelGroups/agents.
       setError(String(fetchError));
     } finally {
       setLoading(false);
     }
+  // Stable reference — reads state via refs, no deps needed.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -127,13 +142,31 @@ export function Channels() {
   }, [fetchPageData]);
 
   useEffect(() => {
+    // Throttle channel-status events to avoid flooding fetchPageData during AI tasks.
+    let throttleTimer: ReturnType<typeof setTimeout> | null = null;
+    let pending = false;
+
     const unsubscribe = subscribeHostEvent('gateway:channel-status', () => {
+      if (throttleTimer) {
+        pending = true;
+        return;
+      }
       void fetchPageData();
+      throttleTimer = setTimeout(() => {
+        throttleTimer = null;
+        if (pending) {
+          pending = false;
+          void fetchPageData();
+        }
+      }, 2000);
     });
     return () => {
       if (typeof unsubscribe === 'function') {
         unsubscribe();
       }
+      if (throttleTimer) {
+        clearTimeout(throttleTimer);
+      }
     };
   }, [fetchPageData]);
 

src/stores/channels.ts

@@ -80,7 +80,7 @@ export const useChannelsStore = create<ChannelsState>((set, get) => ({
             } | null;
           }>>;
           channelDefaultAccountId?: Record<string, string>;
-      }>('channels.status', { probe: true });
+      }>('channels.status', { probe: false });
       if (data) {
         const channels: Channel[] = [];
 

src/stores/cron.ts

@@ -27,12 +27,19 @@ export const useCronStore = create<CronState>((set) => ({
   error: null,
   
   fetchJobs: async () => {
-    set({ loading: true, error: null });
+    const currentJobs = useCronStore.getState().jobs;
+    // Only show loading spinner when there's no data yet (stale-while-revalidate).
+    if (currentJobs.length === 0) {
+      set({ loading: true, error: null });
+    } else {
+      set({ error: null });
+    }
     
     try {
       const result = await hostApiFetch<CronJob[]>('/api/cron/jobs');
       set({ jobs: result, loading: false });
     } catch (error) {
+      // Preserve previous jobs on error so the user sees stale data instead of nothing.
       set({ error: String(error), loading: false });
     }
   },

src/stores/skills.ts

@@ -171,7 +171,8 @@ export const useSkillsStore = create<SkillsState>((set, get) => ({
     } catch (error) {
       console.error('Failed to fetch skills:', error);
       const appError = normalizeAppError(error, { module: 'skills', operation: 'fetch' });
-      set({ loading: false, error: mapErrorCodeToSkillErrorKey(appError.code, 'fetch') });
+      // Preserve previous skills on error (stale-while-revalidate).
+      set((prev) => ({ loading: false, error: mapErrorCodeToSkillErrorKey(appError.code, 'fetch'), skills: prev.skills }));
     }
   },