diff --git a/packages/cli/src/ui/components/Composer.test.tsx b/packages/cli/src/ui/components/Composer.test.tsx
index ba637b9cdc..29e077e126 100644
--- a/packages/cli/src/ui/components/Composer.test.tsx
+++ b/packages/cli/src/ui/components/Composer.test.tsx
@@ -954,4 +954,50 @@ describe('Composer', () => {
expect(lastFrame()).not.toContain('ShortcutsHelp');
});
});
+
+ describe('Snapshots', () => {
+ it('matches snapshot in idle state', () => {
+ const uiState = createMockUIState();
+ const { lastFrame } = renderComposer(uiState);
+ expect(lastFrame()).toMatchSnapshot();
+ });
+
+ it('matches snapshot while streaming', () => {
+ const uiState = createMockUIState({
+ streamingState: StreamingState.Responding,
+ thought: {
+ subject: 'Thinking',
+ description: 'Thinking about the meaning of life...',
+ },
+ });
+ const { lastFrame } = renderComposer(uiState);
+ expect(lastFrame()).toMatchSnapshot();
+ });
+
+ it('matches snapshot in narrow view', () => {
+ const uiState = createMockUIState({
+ terminalWidth: 40,
+ });
+ const { lastFrame } = renderComposer(uiState);
+ expect(lastFrame()).toMatchSnapshot();
+ });
+
+ it('matches snapshot in minimal UI mode', () => {
+ const uiState = createMockUIState({
+ cleanUiDetailsVisible: false,
+ });
+ const { lastFrame } = renderComposer(uiState);
+ expect(lastFrame()).toMatchSnapshot();
+ });
+
+ it('matches snapshot in minimal UI mode while loading', () => {
+ const uiState = createMockUIState({
+ cleanUiDetailsVisible: false,
+ streamingState: StreamingState.Responding,
+ elapsedTime: 1000,
+ });
+ const { lastFrame } = renderComposer(uiState);
+ expect(lastFrame()).toMatchSnapshot();
+ });
+ });
});
diff --git a/packages/cli/src/ui/components/Composer.tsx b/packages/cli/src/ui/components/Composer.tsx
index f8f105b623..1905f7798b 100644
--- a/packages/cli/src/ui/components/Composer.tsx
+++ b/packages/cli/src/ui/components/Composer.tsx
@@ -141,8 +141,7 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
settings.merged.ui.showShortcutsHint &&
!hideShortcutsHintForSuggestions &&
!hideMinimalModeHintWhileBusy &&
- !hasPendingActionRequired &&
- (!showUiDetails || !showLoadingIndicator);
+ !hasPendingActionRequired;
const showMinimalModeBleedThrough =
!hideUiDetailsForSuggestions && Boolean(minimalModeBleedThrough);
const showMinimalInlineLoading = !showUiDetails && showLoadingIndicator;
@@ -185,6 +184,35 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
alignItems={isNarrow ? 'flex-start' : 'center'}
justifyContent={isNarrow ? 'flex-start' : 'space-between'}
>
+
+ {showUiDetails && showLoadingIndicator && (
+
+ )}
+
{
)}
{showShortcutsHelp && }
- {showUiDetails && showLoadingIndicator && (
-
-
-
- )}
{showUiDetails && }
{showUiDetails && (
Snapshots > matches snapshot in idle state 1`] = `
+"
+ ShortcutsHint
+────────────────────────────────────────────────────────────────────────────────────────────────────
+ ApprovalModeIndicator StatusDisplay
+InputPrompt: Type your message or @path/to/file
+Footer"
+`;
+
+exports[`Composer > Snapshots > matches snapshot in minimal UI mode 1`] = `
+"
+ ShortcutsHint
+InputPrompt: Type your message or @path/to/file"
+`;
+
+exports[`Composer > Snapshots > matches snapshot in minimal UI mode while loading 1`] = `
+"
+ LoadingIndicator
+InputPrompt: Type your message or @path/to/file"
+`;
+
+exports[`Composer > Snapshots > matches snapshot in narrow view 1`] = `
+"
+
+ShortcutsHint
+────────────────────────────────────────
+ ApprovalModeIndicator
+
+StatusDisplay
+InputPrompt: Type your message or
+@path/to/file
+Footer"
+`;
+
+exports[`Composer > Snapshots > matches snapshot while streaming 1`] = `
+"
+ LoadingIndicator: Thinking ShortcutsHint
+────────────────────────────────────────────────────────────────────────────────────────────────────
+ ApprovalModeIndicator
+InputPrompt: Type your message or @path/to/file
+Footer"
+`;