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 && {openCount}} - {agentStatus?.running && ( - - - Agent - {agentStatus.contextPercent !== undefined && ( - - {Math.round(agentStatus.contextPercent)}% - - )} - - - )} + {Math.round(agentStatus.contextPercent)}% + + )} + + {resolvedThreads.length > 0 && (