@machina.ai/cell-cli 1.33.0-rc1 → 1.38.1-rc1

package/dist/src/ui/components/Composer.test.js

@@ -4,8 +4,9 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { describe, it, expect, vi, afterEach } from 'vitest';
+import { beforeEach, afterEach, describe, it, expect, vi } from 'vitest';
 import { render } from '../../test-utils/render.js';
+import { act, useEffect } from 'react';
 import { Box, Text } from 'ink';
 import { Composer } from './Composer.js';
 import { UIStateContext } from '../contexts/UIStateContext.js';
@@ -13,6 +14,9 @@ import { UIActionsContext, } from '../contexts/UIActionsContext.js';
 import { ConfigContext } from '../contexts/ConfigContext.js';
 import { SettingsContext } from '../contexts/SettingsContext.js';
 import { createMockSettings } from '../../test-utils/settings.js';
+import { ApprovalMode, tokenLimit, CoreToolCallStatus, } from '@google/gemini-cli-core';
+import { StreamingState } from '../types.js';
+import { TransientMessageType } from '../../utils/events.js';
 // Mock VimModeContext hook
 vi.mock('../contexts/VimModeContext.js', () => ({
     useVimMode: vi.fn(() => ({
@@ -20,9 +24,16 @@ vi.mock('../contexts/VimModeContext.js', () => ({
         vimMode: 'INSERT',
     })),
 }));
-import { ApprovalMode } from '@google/gemini-cli-core';
-import { StreamingState, ToolCallStatus } from '../types.js';
-import { TransientMessageType } from '../../utils/events.js';
+vi.mock('../hooks/useTerminalSize.js', () => ({
+    useTerminalSize: vi.fn(() => ({
+        columns: 100,
+        rows: 24,
+    })),
+}));
+const composerTestControls = vi.hoisted(() => ({
+    suggestionsVisible: false,
+    isAlternateBuffer: false,
+}));
 // Mock child components
 vi.mock('./LoadingIndicator.js', () => ({
     LoadingIndicator: ({ thought, thoughtLabel, }) => {
@@ -32,16 +43,7 @@ vi.mock('./LoadingIndicator.js', () => ({
     },
 }));
 vi.mock('./StatusDisplay.js', () => ({
-    StatusDisplay: () => _jsx(Text, { children: "StatusDisplay" }),
-}));
-vi.mock('./ToastDisplay.js', () => ({
-    ToastDisplay: () => _jsx(Text, { children: "ToastDisplay" }),
-    shouldShowToast: (uiState) => uiState.ctrlCPressedOnce ||
-        Boolean(uiState.transientMessage) ||
-        uiState.ctrlDPressedOnce ||
-        (uiState.showEscapePrompt &&
-            (uiState.buffer.text.length > 0 || uiState.history.length > 0)) ||
-        Boolean(uiState.queueErrorMessage),
+    StatusDisplay: ({ hideContextSummary }) => (_jsxs(Text, { children: ["StatusDisplay", hideContextSummary ? ' (hidden summary)' : ''] })),
 }));
 vi.mock('./ContextSummaryDisplay.js', () => ({
     ContextSummaryDisplay: () => _jsx(Text, { children: "ContextSummaryDisplay" }),
@@ -50,14 +52,11 @@ vi.mock('./HookStatusDisplay.js', () => ({
     HookStatusDisplay: () => _jsx(Text, { children: "HookStatusDisplay" }),
 }));
 vi.mock('./ApprovalModeIndicator.js', () => ({
-    ApprovalModeIndicator: () => _jsx(Text, { children: "ApprovalModeIndicator" }),
+    ApprovalModeIndicator: ({ approvalMode }) => (_jsxs(Text, { children: ["ApprovalModeIndicator: ", approvalMode] })),
 }));
 vi.mock('./ShellModeIndicator.js', () => ({
     ShellModeIndicator: () => _jsx(Text, { children: "ShellModeIndicator" }),
 }));
-vi.mock('./ShortcutsHint.js', () => ({
-    ShortcutsHint: () => _jsx(Text, { children: "ShortcutsHint" }),
-}));
 vi.mock('./ShortcutsHelp.js', () => ({
     ShortcutsHelp: () => _jsx(Text, { children: "ShortcutsHelp" }),
 }));
@@ -65,13 +64,21 @@ vi.mock('./DetailedMessagesDisplay.js', () => ({
     DetailedMessagesDisplay: () => _jsx(Text, { children: "DetailedMessagesDisplay" }),
 }));
 vi.mock('./InputPrompt.js', () => ({
-    InputPrompt: ({ placeholder }) => (_jsxs(Text, { children: ["InputPrompt: ", placeholder] })),
+    InputPrompt: ({ placeholder, onSuggestionsVisibilityChange, }) => {
+        useEffect(() => {
+            onSuggestionsVisibilityChange?.(composerTestControls.suggestionsVisible);
+        }, [onSuggestionsVisibilityChange]);
+        return _jsxs(Text, { children: ["InputPrompt: ", placeholder] });
+    },
     calculatePromptWidths: vi.fn(() => ({
         inputWidth: 80,
         suggestionsWidth: 40,
         containerWidth: 84,
     })),
 }));
+vi.mock('../hooks/useAlternateBuffer.js', () => ({
+    useAlternateBuffer: () => composerTestControls.isAlternateBuffer,
+}));
 vi.mock('./Footer.js', () => ({
     Footer: () => _jsx(Text, { children: "Footer" }),
 }));
@@ -110,20 +117,25 @@ const createMockUIState = (overrides = {}) => ({
     isFocused: true,
     thought: '',
     currentLoadingPhrase: '',
+    currentTip: '',
+    currentWittyPhrase: '',
     elapsedTime: 0,
     ctrlCPressedOnce: false,
     ctrlDPressedOnce: false,
     showEscapePrompt: false,
     shortcutsHelpVisible: false,
+    cleanUiDetailsVisible: true,
     ideContextState: null,
     geminiMdFileCount: 0,
     renderMarkdown: true,
-    filteredConsoleMessages: [],
     history: [],
     sessionStats: {
+        sessionId: 'test-session',
+        sessionStartTime: new Date(),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        metrics: {},
         lastPromptTokenCount: 0,
-        sessionTokenCount: 0,
-        totalPrompts: 0,
+        promptCount: 0,
     },
     branchName: 'main',
     debugMessage: '',
@@ -132,8 +144,9 @@ const createMockUIState = (overrides = {}) => ({
     nightly: false,
     isTrustedFolder: true,
     activeHooks: [],
-    isBackgroundShellVisible: false,
+    isBackgroundTaskVisible: false,
     embeddedShellFocused: false,
+    showIsExpandableHint: false,
     quota: {
         userTier: undefined,
         stats: undefined,
@@ -146,8 +159,12 @@ const createMockUIActions = () => ({
     handleFinalSubmit: vi.fn(),
     handleClearScreen: vi.fn(),
     setShellModeActive: vi.fn(),
+    setCleanUiDetailsVisible: vi.fn(),
+    toggleCleanUiDetailsVisible: vi.fn(),
+    revealCleanUiDetailsTemporarily: vi.fn(),
     onEscapePromptChange: vi.fn(),
     vimHandleInput: vi.fn(),
+    setShortcutsHelpVisible: vi.fn(),
 });
 const createMockConfig = (overrides = {}) => ({
     getModel: vi.fn(() => 'gemini-1.5-pro'),
@@ -155,7 +172,7 @@ const createMockConfig = (overrides = {}) => ({
     getDebugMode: vi.fn(() => false),
     getAccessibility: vi.fn(() => ({})),
     getMcpServers: vi.fn(() => ({})),
-    isPlanEnabled: vi.fn(() => false),
+    isPlanEnabled: vi.fn(() => true),
     getToolRegistry: () => ({
         getTool: vi.fn(),
     }),
@@ -169,22 +186,49 @@ const createMockConfig = (overrides = {}) => ({
     }),
     ...overrides,
 });
-const renderComposer = (uiState, settings = createMockSettings(), config = createMockConfig(), uiActions = createMockUIActions()) => render(_jsx(ConfigContext.Provider, { value: config, children: _jsx(SettingsContext.Provider, { value: settings, children: _jsx(UIStateContext.Provider, { value: uiState, children: _jsx(UIActionsContext.Provider, { value: uiActions, children: _jsx(Composer, {}) }) }) }) }));
+import { InputContext } from '../contexts/InputContext.js';
+const renderComposer = async (uiState, settings = createMockSettings({ ui: {} }), config = createMockConfig(), uiActions = createMockUIActions(), inputStateOverrides = {}) => {
+    const inputState = {
+        buffer: { text: '' },
+        userMessages: [],
+        shellModeActive: false,
+        showEscapePrompt: false,
+        copyModeEnabled: false,
+        inputWidth: 80,
+        suggestionsWidth: 40,
+        ...uiState,
+        ...inputStateOverrides,
+    };
+    const result = await render(_jsx(ConfigContext.Provider, { value: config, children: _jsx(SettingsContext.Provider, { value: settings, children: _jsx(InputContext.Provider, { value: inputState, children: _jsx(UIStateContext.Provider, { value: uiState, children: _jsx(UIActionsContext.Provider, { value: uiActions, children: _jsx(Composer, { isFocused: true }) }) }) }) }) }));
+    // Wait for shortcuts hint debounce if using fake timers
+    if (vi.isFakeTimers()) {
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(250);
+        });
+    }
+    return result;
+};
 describe('Composer', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        composerTestControls.suggestionsVisible = false;
+        composerTestControls.isAlternateBuffer = false;
+    });
     afterEach(() => {
+        vi.useRealTimers();
         vi.restoreAllMocks();
     });
     describe('Footer Display Settings', () => {
-        it('renders Footer by default when hideFooter is false', () => {
+        it('renders Footer by default when hideFooter is false', async () => {
             const uiState = createMockUIState();
             const settings = createMockSettings({ ui: { hideFooter: false } });
-            const { lastFrame } = renderComposer(uiState, settings);
+            const { lastFrame } = await renderComposer(uiState, settings);
             expect(lastFrame()).toContain('Footer');
         });
-        it('does NOT render Footer when hideFooter is true', () => {
+        it('does NOT render Footer when hideFooter is true', async () => {
             const uiState = createMockUIState();
             const settings = createMockSettings({ ui: { hideFooter: true } });
-            const { lastFrame } = renderComposer(uiState, settings);
+            const { lastFrame } = await renderComposer(uiState, settings);
             // Check for content that only appears IN the Footer component itself
             expect(lastFrame()).not.toContain('[NORMAL]'); // Vim mode indicator
             expect(lastFrame()).not.toContain('(main'); // Branch name with parentheses
@@ -225,13 +269,13 @@ describe('Composer', () => {
                 toggleVimEnabled: vi.fn(),
                 setVimMode: vi.fn(),
             });
-            const { lastFrame } = renderComposer(uiState, settings, config);
+            const { lastFrame } = await renderComposer(uiState, settings, config);
             expect(lastFrame()).toContain('Footer');
             // Footer should be rendered with all the state passed through
         });
     });
     describe('Loading Indicator', () => {
-        it('renders LoadingIndicator with thought when streaming', () => {
+        it('renders LoadingIndicator with thought when streaming', async () => {
             const uiState = createMockUIState({
                 streamingState: StreamingState.Responding,
                 thought: {
@@ -241,49 +285,53 @@ describe('Composer', () => {
                 currentLoadingPhrase: 'Analyzing',
                 elapsedTime: 1500,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             const output = lastFrame();
             expect(output).toContain('LoadingIndicator: Processing');
         });
-        it('renders generic thinking text in loading indicator when full inline thinking is enabled', () => {
+        it('renders generic thinking text in loading indicator when full inline thinking is enabled', async () => {
             const uiState = createMockUIState({
                 streamingState: StreamingState.Responding,
                 thought: {
-                    subject: 'Detailed in-history thought',
+                    subject: 'Thinking about code',
                     description: 'Full text is already in history',
                 },
             });
             const settings = createMockSettings({
                 ui: { inlineThinkingMode: 'full' },
             });
-            const { lastFrame } = renderComposer(uiState, settings);
+            const { lastFrame } = await renderComposer(uiState, settings);
             const output = lastFrame();
-            expect(output).toContain('LoadingIndicator: Thinking ...');
+            // In Refreshed UX, we don't force 'Thinking...' label in renderStatusNode
+            // It uses the subject directly
+            expect(output).toContain('LoadingIndicator: Thinking about code');
         });
-        it('keeps shortcuts hint visible while loading', () => {
+        it('shows shortcuts hint while loading', async () => {
             const uiState = createMockUIState({
                 streamingState: StreamingState.Responding,
                 elapsedTime: 1,
+                cleanUiDetailsVisible: false,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             const output = lastFrame();
             expect(output).toContain('LoadingIndicator');
-            expect(output).toContain('ShortcutsHint');
+            expect(output).toContain('press tab twice for more');
+            expect(output).not.toContain('? for shortcuts');
         });
-        it('renders LoadingIndicator without thought when accessibility disables loading phrases', () => {
+        it('renders LoadingIndicator with thought when loadingPhrases is off', async () => {
             const uiState = createMockUIState({
                 streamingState: StreamingState.Responding,
                 thought: { subject: 'Hidden', description: 'Should not show' },
             });
-            const config = createMockConfig({
-                getAccessibility: vi.fn(() => ({ enableLoadingPhrases: false })),
+            const settings = createMockSettings({
+                ui: { loadingPhrases: 'off' },
             });
-            const { lastFrame } = renderComposer(uiState, undefined, config);
+            const { lastFrame } = await renderComposer(uiState, settings);
             const output = lastFrame();
             expect(output).toContain('LoadingIndicator');
-            expect(output).not.toContain('Should not show');
+            expect(output).toContain('LoadingIndicator: Hidden');
         });
-        it('does not render LoadingIndicator when waiting for confirmation', () => {
+        it('does not render LoadingIndicator when waiting for confirmation', async () => {
             const uiState = createMockUIState({
                 streamingState: StreamingState.WaitingForConfirmation,
                 thought: {
@@ -291,11 +339,11 @@ describe('Composer', () => {
                     description: 'Should not show during confirmation',
                 },
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             const output = lastFrame();
             expect(output).not.toContain('LoadingIndicator');
         });
-        it('does not render LoadingIndicator when a tool confirmation is pending', () => {
+        it('does not render LoadingIndicator when a tool confirmation is pending', async () => {
             const uiState = createMockUIState({
                 streamingState: StreamingState.Responding,
                 pendingHistoryItems: [
@@ -306,7 +354,7 @@ describe('Composer', () => {
                                 callId: 'call-1',
                                 name: 'edit',
                                 description: 'edit file',
-                                status: ToolCallStatus.Confirming,
+                                status: CoreToolCallStatus.AwaitingApproval,
                                 resultDisplay: undefined,
                                 confirmationDetails: undefined,
                             },
@@ -314,34 +362,47 @@ describe('Composer', () => {
                     },
                 ],
             });
-            const { lastFrame } = renderComposer(uiState);
-            const output = lastFrame();
-            expect(output).not.toContain('LoadingIndicator');
-            expect(output).not.toContain('esc to cancel');
+            const { lastFrame } = await renderComposer(uiState);
+            const output = lastFrame({ allowEmpty: true });
+            expect(output).toBe('');
         });
-        it('renders LoadingIndicator when embedded shell is focused but background shell is visible', () => {
+        it('renders LoadingIndicator when embedded shell is focused but background shell is visible', async () => {
             const uiState = createMockUIState({
                 streamingState: StreamingState.Responding,
                 embeddedShellFocused: true,
-                isBackgroundShellVisible: true,
+                isBackgroundTaskVisible: true,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             const output = lastFrame();
             expect(output).toContain('LoadingIndicator');
         });
-        it('does NOT render LoadingIndicator when embedded shell is focused and background shell is NOT visible', () => {
+        it('renders both LoadingIndicator and ApprovalModeIndicator when streaming in full UI mode', async () => {
+            const uiState = createMockUIState({
+                streamingState: StreamingState.Responding,
+                thought: {
+                    subject: 'Thinking',
+                    description: '',
+                },
+                showApprovalModeIndicator: ApprovalMode.PLAN,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            const output = lastFrame();
+            expect(output).toContain('LoadingIndicator: Thinking');
+            expect(output).toContain('ApprovalModeIndicator');
+        });
+        it('does NOT render LoadingIndicator when embedded shell is focused and background shell is NOT visible', async () => {
             const uiState = createMockUIState({
                 streamingState: StreamingState.Responding,
                 embeddedShellFocused: true,
-                isBackgroundShellVisible: false,
+                isBackgroundTaskVisible: false,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             const output = lastFrame();
             expect(output).not.toContain('LoadingIndicator');
         });
     });
     describe('Message Queue Display', () => {
-        it('displays queued messages when present', () => {
+        it('displays queued messages when present', async () => {
             const uiState = createMockUIState({
                 messageQueue: [
                     'First queued message',
@@ -349,17 +410,17 @@ describe('Composer', () => {
                     'Third queued message',
                 ],
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             const output = lastFrame();
             expect(output).toContain('First queued message');
             expect(output).toContain('Second queued message');
             expect(output).toContain('Third queued message');
         });
-        it('renders QueuedMessageDisplay with empty message queue', () => {
+        it('renders QueuedMessageDisplay with empty message queue', async () => {
             const uiState = createMockUIState({
                 messageQueue: [],
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             // The component should render but return null for empty queue
             // This test verifies that the component receives the correct prop
             const output = lastFrame();
@@ -367,54 +428,69 @@ describe('Composer', () => {
         });
     });
     describe('Context and Status Display', () => {
-        it('shows StatusDisplay and ApprovalModeIndicator in normal state', () => {
+        it('shows StatusDisplay and ApprovalModeIndicator in normal state', async () => {
             const uiState = createMockUIState({
                 ctrlCPressedOnce: false,
                 ctrlDPressedOnce: false,
-                showEscapePrompt: false,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             const output = lastFrame();
             expect(output).toContain('StatusDisplay');
             expect(output).toContain('ApprovalModeIndicator');
             expect(output).not.toContain('ToastDisplay');
         });
-        it('shows ToastDisplay and hides ApprovalModeIndicator when a toast is present', () => {
+        it('shows ToastDisplay and hides ApprovalModeIndicator when a toast is present', async () => {
             const uiState = createMockUIState({
                 ctrlCPressedOnce: true,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             const output = lastFrame();
-            expect(output).toContain('ToastDisplay');
-            expect(output).not.toContain('ApprovalModeIndicator');
+            expect(output).toContain('Press Ctrl+C again to exit.');
+            // In Refreshed UX, Row 1 shows toast, and Row 2 shows ApprovalModeIndicator/StatusDisplay
+            // They are no longer mutually exclusive.
+            expect(output).toContain('ApprovalModeIndicator');
             expect(output).toContain('StatusDisplay');
         });
-        it('shows ToastDisplay for other toast types', () => {
+        it('shows ToastDisplay for other toast types', async () => {
             const uiState = createMockUIState({
                 transientMessage: {
                     text: 'Warning',
                     type: TransientMessageType.Warning,
                 },
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             const output = lastFrame();
-            expect(output).toContain('ToastDisplay');
-            expect(output).not.toContain('ApprovalModeIndicator');
+            expect(output).toContain('Warning');
+            expect(output).toContain('ApprovalModeIndicator');
         });
     });
     describe('Input and Indicators', () => {
-        it('renders InputPrompt when input is active', () => {
+        it('hides non-essential UI details in clean mode', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+            });
+            const settings = createMockSettings({
+                ui: { showShortcutsHint: false },
+            });
+            const { lastFrame } = await renderComposer(uiState, settings);
+            const output = lastFrame();
+            expect(output).not.toContain('press tab twice for more');
+            expect(output).not.toContain('? for shortcuts');
+            expect(output).toContain('InputPrompt');
+            expect(output).not.toContain('Footer');
+        });
+        it('renders InputPrompt when input is active', async () => {
             const uiState = createMockUIState({
                 isInputActive: true,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             expect(lastFrame()).toContain('InputPrompt');
         });
-        it('does not render InputPrompt when input is inactive', () => {
+        it('does not render InputPrompt when input is inactive', async () => {
             const uiState = createMockUIState({
                 isInputActive: false,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             expect(lastFrame()).not.toContain('InputPrompt');
         });
         it.each([
@@ -422,57 +498,122 @@ describe('Composer', () => {
             [ApprovalMode.AUTO_EDIT],
             [ApprovalMode.PLAN],
             [ApprovalMode.YOLO],
-        ])('shows ApprovalModeIndicator when approval mode is %s and shell mode is inactive', (mode) => {
+        ])('shows ApprovalModeIndicator when approval mode is %s and shell mode is inactive', async (mode) => {
             const uiState = createMockUIState({
                 showApprovalModeIndicator: mode,
-                shellModeActive: false,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             expect(lastFrame()).toMatch(/ApprovalModeIndic[\s\S]*ator/);
         });
-        it('shows ShellModeIndicator when shell mode is active', () => {
-            const uiState = createMockUIState({
-                shellModeActive: true,
-            });
-            const { lastFrame } = renderComposer(uiState);
+        it('shows ShellModeIndicator when shell mode is active', async () => {
+            const uiState = createMockUIState();
+            const { lastFrame } = await renderComposer(uiState, undefined, undefined, undefined, { shellModeActive: true });
             expect(lastFrame()).toMatch(/ShellModeIndic[\s\S]*tor/);
         });
-        it('shows RawMarkdownIndicator when renderMarkdown is false', () => {
+        it('shows RawMarkdownIndicator when renderMarkdown is false', async () => {
             const uiState = createMockUIState({
                 renderMarkdown: false,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             expect(lastFrame()).toContain('raw markdown mode');
         });
-        it('does not show RawMarkdownIndicator when renderMarkdown is true', () => {
+        it('does not show RawMarkdownIndicator when renderMarkdown is true', async () => {
             const uiState = createMockUIState({
                 renderMarkdown: true,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             expect(lastFrame()).not.toContain('raw markdown mode');
         });
+        it.each([
+            { mode: ApprovalMode.YOLO, label: '● YOLO' },
+            { mode: ApprovalMode.PLAN, label: '● plan' },
+            {
+                mode: ApprovalMode.AUTO_EDIT,
+                label: '● auto edit',
+            },
+        ])('shows minimal mode badge "$mode" when clean UI details are hidden', async ({ mode, label }) => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+                showApprovalModeIndicator: mode,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            expect(lastFrame()).toContain(label);
+        });
+        it('hides minimal mode badge while loading in clean mode', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+                streamingState: StreamingState.Responding,
+                elapsedTime: 1,
+                showApprovalModeIndicator: ApprovalMode.PLAN,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            const output = lastFrame();
+            expect(output).toContain('LoadingIndicator');
+            expect(output).not.toContain('plan');
+            expect(output).toContain('press tab twice for more');
+            expect(output).not.toContain('? for shortcuts');
+        });
+        it('hides minimal mode badge while action-required state is active', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+                showApprovalModeIndicator: ApprovalMode.PLAN,
+                customDialog: (_jsx(Box, { children: _jsx(Text, { children: "Prompt" }) })),
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            expect(lastFrame({ allowEmpty: true })).toBe('');
+        });
+        it('shows Esc rewind prompt in minimal mode without showing full UI', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+                history: [{ id: 1, type: 'user', text: 'msg' }],
+            });
+            const { lastFrame } = await renderComposer(uiState, undefined, undefined, undefined, { showEscapePrompt: true });
+            const output = lastFrame();
+            expect(output).toContain('Press Esc again to rewind.');
+            expect(output).not.toContain('ContextSummaryDisplay');
+        });
+        it('shows context usage bleed-through when over 60%', async () => {
+            const model = 'gemini-2.5-pro';
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+                currentModel: model,
+                sessionStats: {
+                    sessionId: 'test-session',
+                    sessionStartTime: new Date(),
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    metrics: {},
+                    lastPromptTokenCount: Math.floor(tokenLimit(model) * 0.7),
+                    promptCount: 0,
+                },
+            });
+            const settings = createMockSettings({
+                ui: {
+                    footer: { hideContextPercentage: false },
+                },
+            });
+            const { lastFrame } = await renderComposer(uiState, settings);
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(250);
+            });
+            // StatusDisplay (which contains ContextUsageDisplay) should bleed through in minimal mode
+            expect(lastFrame()).toContain('StatusDisplay');
+            expect(lastFrame()).toContain('70% used');
+        });
     });
     describe('Error Details Display', () => {
-        it('shows DetailedMessagesDisplay when showErrorDetails is true', () => {
+        it('shows DetailedMessagesDisplay when showErrorDetails is true', async () => {
             const uiState = createMockUIState({
                 showErrorDetails: true,
-                filteredConsoleMessages: [
-                    {
-                        type: 'error',
-                        content: 'Test error',
-                        count: 1,
-                    },
-                ],
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             expect(lastFrame()).toContain('DetailedMessagesDisplay');
             expect(lastFrame()).toContain('ShowMoreLines');
         });
-        it('does not show error details when showErrorDetails is false', () => {
+        it('does not show error details when showErrorDetails is false', async () => {
             const uiState = createMockUIState({
                 showErrorDetails: false,
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             expect(lastFrame()).not.toContain('DetailedMessagesDisplay');
         });
     });
@@ -486,7 +627,7 @@ describe('Composer', () => {
                 toggleVimEnabled: vi.fn(),
                 setVimMode: vi.fn(),
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             expect(lastFrame()).toContain("InputPrompt:   Press 'Esc' for NORMAL mode.");
         });
         it('shows correct placeholder in NORMAL mode', async () => {
@@ -498,22 +639,209 @@ describe('Composer', () => {
                 toggleVimEnabled: vi.fn(),
                 setVimMode: vi.fn(),
             });
-            const { lastFrame } = renderComposer(uiState);
+            const { lastFrame } = await renderComposer(uiState);
             expect(lastFrame()).toContain("InputPrompt:   Press 'i' for INSERT mode.");
         });
     });
     describe('Shortcuts Hint', () => {
-        it('hides shortcuts hint when a action is required (e.g. dialog is open)', () => {
+        it('restores shortcuts hint after 200ms debounce when buffer is empty', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+            });
+            const { lastFrame } = await renderComposer(uiState, undefined, undefined, undefined, { buffer: { text: '' } });
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(250);
+            });
+            expect(lastFrame({ allowEmpty: true })).toContain('press tab twice for more');
+        });
+        it('hides shortcuts hint when text is typed in buffer', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+            });
+            const { lastFrame } = await renderComposer(uiState, undefined, undefined, undefined, { buffer: { text: 'hello' } });
+            expect(lastFrame()).not.toContain('press tab twice for more');
+            expect(lastFrame()).not.toContain('? for shortcuts');
+        });
+        it('hides shortcuts hint when showShortcutsHint setting is false', async () => {
+            const uiState = createMockUIState();
+            const settings = createMockSettings({
+                ui: {
+                    showShortcutsHint: false,
+                },
+            });
+            const { lastFrame } = await renderComposer(uiState, settings);
+            expect(lastFrame()).not.toContain('? for shortcuts');
+        });
+        it('hides shortcuts hint when a action is required (e.g. dialog is open)', async () => {
             const uiState = createMockUIState({
                 customDialog: (_jsxs(Box, { children: [_jsx(Text, { children: "Test Dialog" }), _jsx(Text, { children: "Test Content" })] })),
             });
-            const { lastFrame } = renderComposer(uiState);
-            expect(lastFrame()).not.toContain('ShortcutsHint');
+            const { lastFrame, unmount } = await renderComposer(uiState);
+            expect(lastFrame({ allowEmpty: true })).toBe('');
+            unmount();
+        });
+        it('keeps shortcuts hint visible when no action is required', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(250);
+            });
+            expect(lastFrame()).toContain('press tab twice for more');
+        });
+        it('shows shortcuts hint when full UI details are visible', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: true,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(250);
+            });
+            // In Refreshed UX, shortcuts hint is in the top multipurpose status row
+            expect(lastFrame()).toContain('? for shortcuts');
+        });
+        it('shows shortcuts hint while loading when full UI details are visible', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: true,
+                streamingState: StreamingState.Responding,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(250);
+            });
+            // In experimental layout, status row is visible during loading
+            expect(lastFrame()).toContain('LoadingIndicator');
+            expect(lastFrame()).toContain('? for shortcuts');
+            expect(lastFrame()).not.toContain('press tab twice for more');
+        });
+        it('shows shortcuts hint while loading in minimal mode', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+                streamingState: StreamingState.Responding,
+                elapsedTime: 1,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(250);
+            });
+            // In experimental layout, status row is visible in clean mode while busy
+            expect(lastFrame()).toContain('LoadingIndicator');
+            expect(lastFrame()).toContain('press tab twice for more');
+            expect(lastFrame()).not.toContain('? for shortcuts');
+        });
+        it('shows shortcuts help in minimal mode when toggled on', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+                shortcutsHelpVisible: true,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            expect(lastFrame()).toContain('ShortcutsHelp');
+        });
+        it('hides shortcuts hint when suggestions are visible above input in alternate buffer', async () => {
+            composerTestControls.isAlternateBuffer = true;
+            composerTestControls.suggestionsVisible = true;
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+                showApprovalModeIndicator: ApprovalMode.PLAN,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            expect(lastFrame()).not.toContain('press tab twice for more');
+            expect(lastFrame()).not.toContain('? for shortcuts');
+            expect(lastFrame()).not.toContain('plan');
         });
-        it('keeps shortcuts hint visible when no action is required', () => {
+        it('hides approval mode indicator when suggestions are visible above input in alternate buffer', async () => {
+            composerTestControls.isAlternateBuffer = true;
+            composerTestControls.suggestionsVisible = true;
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: true,
+                showApprovalModeIndicator: ApprovalMode.YOLO,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            expect(lastFrame()).not.toContain('ApprovalModeIndicator');
+        });
+        it('keeps shortcuts hint when suggestions are visible below input in regular buffer', async () => {
+            composerTestControls.isAlternateBuffer = false;
+            composerTestControls.suggestionsVisible = true;
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(250);
+            });
+            // In Refreshed UX, shortcuts hint is in the top status row and doesn't collide with suggestions below
+            expect(lastFrame()).toContain('press tab twice for more');
+        });
+    });
+    describe('Shortcuts Help', () => {
+        it('shows shortcuts help in passive state', async () => {
+            const uiState = createMockUIState({
+                shortcutsHelpVisible: true,
+                streamingState: StreamingState.Idle,
+            });
+            const { lastFrame, unmount } = await renderComposer(uiState);
+            expect(lastFrame()).toContain('ShortcutsHelp');
+            unmount();
+        });
+        it('hides shortcuts help while streaming', async () => {
+            const uiState = createMockUIState({
+                shortcutsHelpVisible: true,
+                streamingState: StreamingState.Responding,
+            });
+            const { lastFrame, unmount } = await renderComposer(uiState);
+            expect(lastFrame()).not.toContain('ShortcutsHelp');
+            unmount();
+        });
+        it('hides shortcuts help when action is required', async () => {
+            const uiState = createMockUIState({
+                shortcutsHelpVisible: true,
+                customDialog: (_jsx(Box, { children: _jsx(Text, { children: "Test Dialog" }) })),
+            });
+            const { lastFrame, unmount } = await renderComposer(uiState);
+            expect(lastFrame({ allowEmpty: true })).toBe('');
+            unmount();
+        });
+    });
+    describe('Snapshots', () => {
+        it('matches snapshot in idle state', async () => {
             const uiState = createMockUIState();
-            const { lastFrame } = renderComposer(uiState);
-            expect(lastFrame()).toContain('ShortcutsHint');
+            const { lastFrame } = await renderComposer(uiState);
+            expect(lastFrame()).toMatchSnapshot();
+        });
+        it('matches snapshot while streaming', async () => {
+            const uiState = createMockUIState({
+                streamingState: StreamingState.Responding,
+                thought: {
+                    subject: 'Thinking',
+                    description: 'Thinking about the meaning of life...',
+                },
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            expect(lastFrame()).toMatchSnapshot();
+        });
+        it('matches snapshot in narrow view', async () => {
+            const uiState = createMockUIState({
+                terminalWidth: 40,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            expect(lastFrame()).toMatchSnapshot();
+        });
+        it('matches snapshot in minimal UI mode', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            expect(lastFrame()).toMatchSnapshot();
+        });
+        it('matches snapshot in minimal UI mode while loading', async () => {
+            const uiState = createMockUIState({
+                cleanUiDetailsVisible: false,
+                streamingState: StreamingState.Responding,
+                elapsedTime: 1000,
+            });
+            const { lastFrame } = await renderComposer(uiState);
+            expect(lastFrame()).toMatchSnapshot();
         });
     });
 });