feat: resolve thoughtstream empty state and hitl metrics to 100% coverage

edycutjong · edycutjong · commit 8a808dc3ea32 · 2026-03-06T23:25:24.000+07:00
diff --git a/backend/app/agent/agents/resolver.py b/backend/app/agent/agents/resolver.py
@@ -260,7 +260,7 @@ async def await_approval(state: AgentState, config: dict | None = None) -> dict:
     # Track when HITL was requested
     tracker = get_tracker()
     metrics = tracker.get_request(state["thread_id"])
-    if metrics:
+    if metrics and not metrics.hitl_requested_at:
         metrics.hitl_requested_at = time.time()
 
     decision = interrupt({
diff --git a/backend/tests/test_agent_nodes.py b/backend/tests/test_agent_nodes.py
@@ -1141,6 +1141,7 @@ async def test_dict_decision_approved(self):
         state["proposed_action"] = {"type": "refund", "description": "Refund $50"}
 
         mock_metrics = MagicMock()
+        mock_metrics.hitl_requested_at = None
         with patch("app.agent.agents.resolver.interrupt", return_value={"approved": True, "reason": ""}), \
              patch("app.agent.agents.resolver.get_tracker") as mock_tracker:
             mock_tracker.return_value.get_request.return_value = mock_metrics
diff --git a/frontend/src/components/AnimatedNumber.tsx b/frontend/src/components/AnimatedNumber.tsx
@@ -43,9 +43,6 @@ export default function AnimatedNumber({ value, duration = 800, format }: Animat
             }
         };
 
-        if (animationFrame.current) {
-            cancelAnimationFrame(animationFrame.current);
-        }
         animationFrame.current = requestAnimationFrame(animate);
 
         return () => {
diff --git a/frontend/src/components/MetricsPanel.tsx b/frontend/src/components/MetricsPanel.tsx
@@ -266,13 +266,15 @@ export default function MetricsPanel({ metrics, onCacheCleared, onOpenTraces }:
 
                             {/* Provider split bar */}
                             <div className="metric-card py-2 px-3">
-                                <div className="flex items-center gap-2 mb-2" style={{ flexWrap: "nowrap", overflow: "hidden" }}>
+                                <div className="flex items-center gap-3 mb-2 w-full overflow-hidden">
                                     {Object.entries(providers).map(([label, { count, color, icon }]) => {
                                         const pct = ((count / modelTotal) * 100);
                                         return (
-                                            <span key={label} className="flex items-center gap-1 text-xs font-semibold" style={{ color, flexShrink: 0, whiteSpace: "nowrap" }}>
-                                                {icon} {label} <AnimatedNumber value={pct} format={(v) => Math.round(v) + "%"} />
-                                            </span>
+                                            <div key={label} className="flex items-center gap-1 text-xs font-semibold min-w-0" style={{ color }}>
+                                                <span className="shrink-0">{icon}</span>
+                                                <span className="truncate">{label}</span>
+                                                <span className="shrink-0"><AnimatedNumber value={pct} format={(v) => Math.round(v) + "%"} /></span>
+                                            </div>
                                         );
                                     })}
                                 </div>
diff --git a/frontend/src/components/ThoughtStream.tsx b/frontend/src/components/ThoughtStream.tsx
@@ -137,51 +137,87 @@ export default function ThoughtStream({ thoughts, status }: ThoughtStreamProps)
 
             {/* Single scroll for all content */}
             <div className="flex-1 overflow-y-auto pl-6 pr-4 pb-6 space-y-2" style={{ scrollbarGutter: "stable" }}>
-                {thoughts.length === 0 ? (
-                    <div className="px-3 py-2.5">
-                        {status === "processing" ? (
-                            <div className="flex items-center gap-2">
-                                <span className="text-sm" style={{ color: "var(--aegis-text-muted)" }}>Agent is thinking</span>
-                                <div className="typing-indicator" style={{ padding: 0 }}>
+
+                {/* 1. Empty States (No thoughts generated yet) */}
+                {thoughts.length === 0 && (
+                    <div className="px-3 py-2.5 flex flex-col gap-3">
+                        {status === "processing" && (
+                            <>
+                                <p className="text-sm" style={{ color: "var(--aegis-text-muted)" }}>
+                                    Agent is thinking
+                                </p>
+                                <div className="px-3 typing-indicator" data-testid="typing-indicator">
                                     <span /><span /><span />
                                 </div>
-                            </div>
-                        ) : (
+                            </>
+                        )}
+                        {status === "error" && (
+                            <p className="text-sm" style={{ color: "var(--aegis-error)" }}>
+                                ✗ An error occurred while connecting to the agent.
+                            </p>
+                        )}
+                        {status === "completed" && (
+                            <p className="text-sm" style={{ color: "var(--aegis-text-muted)" }}>
+                                Agent completed the task without generating any output.
+                            </p>
+                        )}
+                        {status === "cached" && (
+                            <p className="text-sm" style={{ color: "var(--aegis-text-muted)" }}>
+                                Loaded from cache. Processing skipped.
+                            </p>
+                        )}
+                        {(status === "idle" || status === "awaiting_approval") && (
                             <p className="text-sm" style={{ color: "var(--aegis-text-muted)" }}>
                                 Submit a support ticket to see the agent&apos;s thought process...
                             </p>
                         )}
                     </div>
-                ) : (
-                    thoughts.map((step, i) => {
-                        const { agent, message } = parseAgentName(step);
-                        const agentStyle = agent ? AGENT_COLORS[agent] : null;
-                        const agentIcon = agent ? AGENT_ICONS[agent] : null;
-                        const displayMessage = devMode ? message : simplifyForUser(message);
-
-                        return (
-                            <div key={i} className="thought-step flex items-start gap-3 px-3 py-2.5 rounded-lg transition-all hover:bg-white/2" style={{ animationDelay: `${i * 80}ms` }}>
-                                <span className={`text-lg font-bold shrink-0 ${getColor(step)}`}>
-                                    {getIcon(step)}
-                                </span>
-                                <div className="flex items-start gap-2 flex-1 min-w-0">
-                                    {devMode && agentStyle && (
-                                        <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-wider shrink-0 border ${agentStyle.bg} ${agentStyle.text} ${agentStyle.border}`}>
-                                            <span>{agentIcon}</span>
-                                            {agent}
-                                        </span>
-                                    )}
-                                    <span className="text-sm leading-relaxed" style={{ fontFamily: devMode ? "var(--font-mono)" : "inherit", color: "var(--aegis-text)" }}>
-                                        {displayMessage}
+                )}
+
+                {/* 2. Thought Stream (List of generated thoughts) */}
+                {thoughts.length > 0 && thoughts.map((step, i) => {
+                    const { agent, message } = parseAgentName(step);
+                    const agentStyle = agent ? AGENT_COLORS[agent] : null;
+                    const agentIcon = agent ? AGENT_ICONS[agent] : null;
+                    const displayMessage = devMode ? message : simplifyForUser(message);
+
+                    return (
+                        <div key={i} className="thought-step flex items-start gap-3 px-3 py-2.5 rounded-lg transition-all hover:bg-white/2" style={{ animationDelay: `${i * 80}ms` }}>
+                            <span className={`text-lg font-bold shrink-0 ${getColor(step)}`}>
+                                {getIcon(step)}
+                            </span>
+                            <div className="flex items-start gap-2 flex-1 min-w-0">
+                                {devMode && agentStyle && (
+                                    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-wider shrink-0 border ${agentStyle.bg} ${agentStyle.text} ${agentStyle.border}`}>
+                                        <span>{agentIcon}</span>
+                                        {agent}
                                     </span>
-                                </div>
+                                )}
+                                <span className="text-sm leading-relaxed" style={{ fontFamily: devMode ? "var(--font-mono)" : "inherit", color: "var(--aegis-text)" }}>
+                                    {displayMessage}
+                                </span>
                             </div>
-                        );
-                    })
-                )}
-                {status === "processing" && thoughts.length > 0 && (
-                    <div className="typing-indicator" data-testid="typing-indicator">
-                        <span /><span /><span />
+                        </div>
+                    );
+                })}
+
+                {/* 3. Trailing Status Indicators (Appended to the bottom of the stream) */}
+                {thoughts.length > 0 && (
+                    <div className="pt-2">
+                        {status === "processing" && (
+                            <div className="px-3 typing-indicator" data-testid="typing-indicator">
+                                <span /><span /><span />
+                            </div>
+                        )}
+                        {status === "awaiting_approval" && (
+                            <div className="px-3 py-2 flex items-center gap-2 text-sm" style={{ color: "var(--aegis-warning)" }}>
+                                <span className="relative flex h-2 w-2">
+                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" style={{ backgroundColor: "var(--aegis-warning)" }}></span>
+                                    <span className="relative inline-flex rounded-full h-2 w-2" style={{ backgroundColor: "var(--aegis-warning)" }}></span>
+                                </span>
+                                Waiting for your input...
+                            </div>
+                        )}
                     </div>
                 )}
             </div>
diff --git a/frontend/src/components/__tests__/AnimatedNumber.test.tsx b/frontend/src/components/__tests__/AnimatedNumber.test.tsx
@@ -0,0 +1,93 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, act } from "@testing-library/react";
+import AnimatedNumber from "../AnimatedNumber";
+
+describe("AnimatedNumber", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        // Mock requestAnimationFrame to work predictably with fake timers
+        let time = 0;
+        vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb: FrameRequestCallback) => {
+            return setTimeout(() => {
+                time += 16;
+                cb(time);
+            }, 16) as unknown as number;
+        });
+        vi.spyOn(window, "cancelAnimationFrame").mockImplementation((id: number) => {
+            clearTimeout(id);
+        });
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+        vi.useRealTimers();
+    });
+
+    it("renders initial value", () => {
+        render(<AnimatedNumber value={25} />);
+        expect(screen.getByText("25")).toBeInTheDocument();
+    });
+
+    it("animates from start to end value", () => {
+        const { rerender } = render(<AnimatedNumber value={0} duration={800} />);
+        expect(screen.getByText("0")).toBeInTheDocument();
+
+        // Change value to trigger animation
+        rerender(<AnimatedNumber value={100} duration={800} />);
+
+        act(() => {
+            vi.advanceTimersByTime(400); // Advance halfway
+        });
+
+        const intermediateText = document.body.textContent;
+        const num = parseInt(intermediateText || "0", 10);
+        // It shouldn't be exactly 0 or 100 halfway through
+        expect(num).toBeGreaterThan(0);
+        expect(num).toBeLessThan(100);
+
+        act(() => {
+            vi.advanceTimersByTime(500); // Advance past duration
+        });
+
+        expect(screen.getByText("100")).toBeInTheDocument();
+    });
+
+    it("cancels animation frame on unmount", () => {
+        const { rerender, unmount } = render(<AnimatedNumber value={0} duration={800} />);
+
+        // Trigger animation
+        rerender(<AnimatedNumber value={100} duration={800} />);
+        act(() => {
+            vi.advanceTimersByTime(16); // Start animation
+        });
+
+        // Unmount while animating should trigger cancelAnimationFrame
+        const cancelSpy = vi.spyOn(window, "cancelAnimationFrame");
+        unmount();
+
+        expect(cancelSpy).toHaveBeenCalled();
+    });
+
+    it("uses custom format function", () => {
+        render(<AnimatedNumber value={50.5} format={(val) => `~${val.toFixed(1)}~`} />);
+        expect(screen.getByText("~50.5~")).toBeInTheDocument();
+    });
+
+    it("handles changing value while already animating", () => {
+        const { rerender } = render(<AnimatedNumber value={0} duration={800} />);
+
+        rerender(<AnimatedNumber value={100} duration={800} />);
+        act(() => {
+            vi.advanceTimersByTime(100); // Partially through animation
+        });
+
+        // Interrupt with a new value
+        rerender(<AnimatedNumber value={50} duration={800} />);
+
+        act(() => {
+            vi.advanceTimersByTime(1000); // Finish animation
+        });
+
+        expect(screen.getByText("50")).toBeInTheDocument();
+    });
+});
diff --git a/frontend/src/components/__tests__/ThoughtStream.test.tsx b/frontend/src/components/__tests__/ThoughtStream.test.tsx
@@ -5,9 +5,32 @@ import ThoughtStream from "../ThoughtStream";
 
 describe("ThoughtStream", () => {
     // ── Empty State ──
-    it("shows placeholder when no thoughts", () => {
+    it("shows placeholder when no thoughts and not processing", () => {
         render(<ThoughtStream thoughts={[]} status="idle" />);
         expect(screen.getByText(/submit a support ticket/i)).toBeInTheDocument();
+        expect(screen.queryByTestId("typing-indicator")).not.toBeInTheDocument();
+    });
+
+    it("shows 'Agent is thinking...' when processing but no thoughts", () => {
+        render(<ThoughtStream thoughts={[]} status="processing" />);
+        expect(screen.getByText(/agent is thinking/i)).toBeInTheDocument();
+        expect(screen.getByTestId("typing-indicator")).toBeInTheDocument();
+        expect(screen.queryByText(/submit a support ticket/i)).not.toBeInTheDocument();
+    });
+
+    it("shows error state when status is error but no thoughts", () => {
+        render(<ThoughtStream thoughts={[]} status="error" />);
+        expect(screen.getByText(/an error occurred/i)).toBeInTheDocument();
+    });
+
+    it("shows completed state when status is completed but no thoughts", () => {
+        render(<ThoughtStream thoughts={[]} status="completed" />);
+        expect(screen.getByText(/agent completed the task without generating any output/i)).toBeInTheDocument();
+    });
+
+    it("shows cached state when status is cached but no thoughts", () => {
+        render(<ThoughtStream thoughts={[]} status="cached" />);
+        expect(screen.getByText(/loaded from cache/i)).toBeInTheDocument();
     });
 
     // ── Rendering Thoughts ──

Original file line number	Diff line number	Diff line change
`@@ -43,9 +43,6 @@ export default function AnimatedNumber({ value, duration = 800, format }: Animat`
`43`	`43`	`}`
`44`	`44`	`};`
`45`	`45`
`46`		`- if (animationFrame.current) {`
`47`		`- cancelAnimationFrame(animationFrame.current);`
`48`		`- }`
`49`	`46`	`animationFrame.current = requestAnimationFrame(animate);`
`50`	`47`
`51`	`48`	`return () => {`