UI enhancement

frontend/src/hooks/useAgentInsight.js

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useAgentInsight() {
+  const [insight, setInsight] = useState(null);
+  const timers = useRef([]);
+
+  const clearTimers = useCallback(() => {
+    timers.current.forEach((timer) => window.clearTimeout(timer));
+    timers.current = [];
+  }, []);
+
+  useEffect(() => () => clearTimers(), [clearTimers]);
+
+  const runInsight = useCallback((payload) => {
+    clearTimers();
+    const { title, summary, details = [], actions = [] } = payload;
+
+    setInsight({
+      processing: true,
+      phase: "understanding",
+      title,
+      summary: null,
+      details: [],
+      actions: [],
+    });
+
+    timers.current.push(window.setTimeout(() => {
+      setInsight((current) => current ? { ...current, phase: "summary", summary } : current);
+    }, 520));
+
+    timers.current.push(window.setTimeout(() => {
+      setInsight((current) => current ? { ...current, phase: "details", details } : current);
+    }, 960));
+
+    timers.current.push(window.setTimeout(() => {
+      setInsight((current) => current ? {
+        ...current,
+        phase: "done",
+        processing: false,
+        actions,
+      } : current);
+    }, 1400));
+  }, [clearTimers]);
+
+  const clearInsight = useCallback(() => {
+    clearTimers();
+    setInsight(null);
+  }, [clearTimers]);
+
+  return { insight, runInsight, clearInsight };
+}