diff --git a/apps/penpal/frontend/src/components/CommentsPanel.test.tsx b/apps/penpal/frontend/src/components/CommentsPanel.test.tsx
index 60822e22..e05df6fb 100644
--- a/apps/penpal/frontend/src/components/CommentsPanel.test.tsx
+++ b/apps/penpal/frontend/src/components/CommentsPanel.test.tsx
@@ -134,10 +134,26 @@ describe('CommentsPanel', () => {
expect(screen.getByText('Anchor text not found in document')).toBeDefined();
});
- it('renders agent working indicator', () => {
+ it('renders agent working indicator visible when active', () => {
const workingThread: ThreadResponse = { ...mockThread, agentWorking: true };
const { container } = renderPanel([workingThread]);
- expect(container.querySelector('.thread-working')).toBeDefined();
+ const el = container.querySelector('.thread-working');
+ expect(el).toBeDefined();
+ expect(el?.classList.contains('hidden')).toBe(false);
+ });
+
+ it('renders agent working indicator hidden when inactive', () => {
+ const { container } = renderPanel([mockThread]);
+ const el = container.querySelector('.thread-working');
+ expect(el).toBeDefined();
+ expect(el?.classList.contains('hidden')).toBe(true);
+ });
+
+ it('always renders agent indicator in DOM for layout stability', () => {
+ const { container } = renderPanel();
+ const el = container.querySelector('.agent-indicator');
+ expect(el).toBeDefined();
+ expect(el?.classList.contains('hidden')).toBe(true);
});
it('renders agent status indicator when running', () => {
@@ -156,4 +172,36 @@ describe('CommentsPanel', () => {
expect(screen.getByText('Agent')).toBeDefined();
expect(screen.getByText('45%')).toBeDefined();
});
+
+ it('agent indicator is visible when running, hidden when not', () => {
+ const { container, rerender } = render(
+
+
+ ,
+ );
+ const indicator = container.querySelector('.agent-indicator');
+ expect(indicator?.classList.contains('hidden')).toBe(false);
+
+ rerender(
+
+
+ ,
+ );
+ const indicatorAfter = container.querySelector('.agent-indicator');
+ expect(indicatorAfter?.classList.contains('hidden')).toBe(true);
+ });
});
diff --git a/apps/penpal/frontend/src/components/CommentsPanel.tsx b/apps/penpal/frontend/src/components/CommentsPanel.tsx
index 4ab90328..5573a7f6 100644
--- a/apps/penpal/frontend/src/components/CommentsPanel.tsx
+++ b/apps/penpal/frontend/src/components/CommentsPanel.tsx
@@ -98,28 +98,26 @@ export default function CommentsPanel({
Comments {openCount > 0 && }
- {agentStatus?.running && (
-
-
- Agent
- {agentStatus.contextPercent !== undefined && (
-
- {Math.round(agentStatus.contextPercent)}%
-
- )}
-
-
- )}
+ {Math.round(agentStatus.contextPercent)}%
+
+ )}
+
+
{resolvedThreads.length > 0 && (