feat(cli): implement stable 2-row footer layout with responsive collision handling

This commit introduces a new, more stable footer architecture that addresses
several long-standing UX issues:
- Stabilizes the layout by anchoring mode indicators and context summaries
- Protects safety indicators (YOLO/Plan) from being hidden by notifications
- Decouples ambient tips/wit from real system status to prevent confusion
- Implements intelligent collision detection for narrow terminal windows
- Keeps input visible but disabled during tool approval pauses
- Enhances visual consistency with unified status colors and hook icons

packages/cli/src/ui/components/Composer.tsx

@@ -12,7 +12,9 @@ import {
   CoreToolCallStatus,
 } from '@google/gemini-cli-core';
 import { LoadingIndicator } from './LoadingIndicator.js';
+import { GeminiRespondingSpinner } from './GeminiRespondingSpinner.js';
 import { StatusDisplay } from './StatusDisplay.js';
+import { HookStatusDisplay } from './HookStatusDisplay.js';
 import { ToastDisplay, shouldShowToast } from './ToastDisplay.js';
 import { ApprovalModeIndicator } from './ApprovalModeIndicator.js';
 import { ShellModeIndicator } from './ShellModeIndicator.js';
@@ -56,6 +58,8 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
 
   const isAlternateBuffer = useAlternateBuffer();
   const { showApprovalModeIndicator } = uiState;
+  const newLayoutSetting = settings.merged.ui.newFooterLayout;
+  const isExperimentalLayout = newLayoutSetting !== 'legacy';
   const showUiDetails = uiState.cleanUiDetailsVisible;
   const suggestionsPosition = isAlternateBuffer ? 'above' : 'below';
   const hideContextSummary =
@@ -105,7 +109,9 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
     uiState.shortcutsHelpVisible &&
     uiState.streamingState === StreamingState.Idle &&
     !hasPendingActionRequired;
-  const hasToast = shouldShowToast(uiState);
+  const isInteractiveShellWaiting =
+    uiState.currentLoadingPhrase?.includes('Tab to focus');
+  const hasToast = shouldShowToast(uiState) || isInteractiveShellWaiting;
   const showLoadingIndicator =
     (!uiState.embeddedShellFocused || uiState.isBackgroundShellVisible) &&
     uiState.streamingState === StreamingState.Responding &&
@@ -189,6 +195,144 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
       showMinimalBleedThroughRow ||
       showShortcutsHint);
 
+  const ambientText = isInteractiveShellWaiting
+    ? undefined
+    : uiState.currentLoadingPhrase;
+
+  // Wit often ends with an ellipsis or similar, tips usually don't.
+  const isAmbientTip =
+    ambientText &&
+    !ambientText.includes('…') &&
+    !ambientText.includes('...') &&
+    !ambientText.includes('feeling lucky');
+  const ambientPrefix = isAmbientTip ? 'Tip: ' : '';
+
+  let estimatedStatusLength = 0;
+  if (
+    isExperimentalLayout &&
+    uiState.activeHooks.length > 0 &&
+    settings.merged.hooksConfig.notifications
+  ) {
+    const hookLabel =
+      uiState.activeHooks.length > 1 ? 'Executing Hooks' : 'Executing Hook';
+    const hookNames = uiState.activeHooks
+      .map(
+        (h) =>
+          h.name +
+          (h.index && h.total && h.total > 1 ? ` (${h.index}/${h.total})` : ''),
+      )
+      .join(', ');
+    estimatedStatusLength = hookLabel.length + hookNames.length + 10; // +10 for spinner and spacing
+  } else if (showLoadingIndicator) {
+    const thoughtText = uiState.thought?.subject || 'Waiting for model...';
+    estimatedStatusLength = thoughtText.length + 25; // Spinner(3) + timer(15) + padding
+  } else if (hasPendingActionRequired) {
+    estimatedStatusLength = 35; // "⏸ Awaiting user approval..."
+  }
+
+  const estimatedAmbientLength =
+    ambientPrefix.length + (ambientText?.length || 0);
+  const willCollideAmbient =
+    estimatedStatusLength + estimatedAmbientLength + 5 > terminalWidth;
+  const willCollideShortcuts = estimatedStatusLength + 45 > terminalWidth; // Assume worst-case shortcut hint is 45 chars
+
+  const showAmbientLine =
+    showUiDetails &&
+    isExperimentalLayout &&
+    uiState.streamingState !== StreamingState.Idle &&
+    !hasPendingActionRequired &&
+    ambientText &&
+    !willCollideAmbient &&
+    !isNarrow;
+
+  const renderAmbientNode = () => {
+    if (isNarrow) return null; // Status should wrap and tips/wit disappear on narrow windows
+
+    if (!showAmbientLine) {
+      if (willCollideShortcuts) return null; // If even the shortcut hint would collide, hide completely so Status takes absolute precedent
+      return (
+        <Box flexDirection="row" justifyContent="flex-end" marginLeft={1}>
+          {isExperimentalLayout ? (
+            <ShortcutsHint />
+          ) : (
+            showShortcutsHint && <ShortcutsHint />
+          )}
+        </Box>
+      );
+    }
+    return (
+      <Box flexDirection="row" justifyContent="flex-end" marginLeft={1}>
+        <Text color={theme.text.secondary} wrap="truncate-end">
+          {ambientPrefix}
+          {ambientText}
+        </Text>
+      </Box>
+    );
+  };
+
+  const renderStatusNode = () => {
+    if (!showUiDetails) return null;
+
+    if (
+      isExperimentalLayout &&
+      uiState.activeHooks.length > 0 &&
+      settings.merged.hooksConfig.notifications
+    ) {
+      const activeHook = uiState.activeHooks[0];
+      const hookIcon = activeHook?.eventName?.startsWith('After') ? '↩' : '↪';
+
+      return (
+        <Box flexDirection="row" alignItems="center">
+          <Box marginRight={1}>
+            <GeminiRespondingSpinner nonRespondingDisplay={hookIcon} />
+          </Box>
+          <Text color={theme.text.primary} italic wrap="truncate-end">
+            <HookStatusDisplay activeHooks={uiState.activeHooks} />
+          </Text>
+        </Box>
+      );
+    }
+
+    if (showLoadingIndicator) {
+      return (
+        <LoadingIndicator
+          inline
+          thought={
+            uiState.streamingState === StreamingState.WaitingForConfirmation
+              ? undefined
+              : uiState.thought
+          }
+          currentLoadingPhrase={
+            uiState.currentLoadingPhrase?.includes('press tab to focus shell')
+              ? uiState.currentLoadingPhrase
+              : !isExperimentalLayout &&
+                  settings.merged.ui.loadingPhrases !== 'off'
+                ? uiState.currentLoadingPhrase
+                : isExperimentalLayout &&
+                    uiState.streamingState === StreamingState.Responding &&
+                    !uiState.thought
+                  ? 'Waiting for model...'
+                  : undefined
+          }
+          thoughtLabel={
+            !isExperimentalLayout && inlineThinkingMode === 'full'
+              ? 'Thinking ...'
+              : undefined
+          }
+          elapsedTime={uiState.elapsedTime}
+          forceRealStatusOnly={isExperimentalLayout}
+          showCancelAndTimer={!isExperimentalLayout}
+        />
+      );
+    }
+    if (hasPendingActionRequired) {
+      return (
+        <Text color={theme.status.warning}>⏸ Awaiting user approval...</Text>
+      );
+    }
+    return null;
+  };
+
   return (
     <Box
       flexDirection="column"
@@ -211,208 +355,314 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
       {showUiDetails && <TodoTray />}
 
       <Box width="100%" flexDirection="column">
-        <Box
-          width="100%"
-          flexDirection={isNarrow ? 'column' : 'row'}
-          alignItems={isNarrow ? 'flex-start' : 'center'}
-          justifyContent={isNarrow ? 'flex-start' : 'space-between'}
-        >
-          <Box
-            marginLeft={1}
-            marginRight={isNarrow ? 0 : 1}
-            flexDirection="row"
-            alignItems={isNarrow ? 'flex-start' : 'center'}
-            flexGrow={1}
-          >
-            {showUiDetails && showLoadingIndicator && (
-              <LoadingIndicator
-                inline
-                thought={
-                  uiState.streamingState ===
-                  StreamingState.WaitingForConfirmation
-                    ? undefined
-                    : uiState.thought
-                }
-                currentLoadingPhrase={
-                  settings.merged.ui.loadingPhrases === 'off'
-                    ? undefined
-                    : uiState.currentLoadingPhrase
-                }
-                thoughtLabel={
-                  inlineThinkingMode === 'full' ? 'Thinking ...' : undefined
-                }
-                elapsedTime={uiState.elapsedTime}
-              />
-            )}
-          </Box>
-          <Box
-            marginTop={isNarrow ? 1 : 0}
-            flexDirection="column"
-            alignItems={isNarrow ? 'flex-start' : 'flex-end'}
-          >
-            {showUiDetails && showShortcutsHint && <ShortcutsHint />}
-          </Box>
-        </Box>
-        {showMinimalMetaRow && (
-          <Box
-            justifyContent="space-between"
-            width="100%"
-            flexDirection={isNarrow ? 'column' : 'row'}
-            alignItems={isNarrow ? 'flex-start' : 'center'}
-          >
+        {!isExperimentalLayout ? (
+          <Box width="100%" flexDirection="column">
             <Box
-              marginLeft={1}
-              marginRight={isNarrow ? 0 : 1}
-              flexDirection="row"
+              width="100%"
+              flexDirection={isNarrow ? 'column' : 'row'}
               alignItems={isNarrow ? 'flex-start' : 'center'}
-              flexGrow={1}
+              justifyContent={isNarrow ? 'flex-start' : 'space-between'}
             >
-              {showMinimalInlineLoading && (
-                <LoadingIndicator
-                  inline
-                  thought={
-                    uiState.streamingState ===
-                    StreamingState.WaitingForConfirmation
-                      ? undefined
-                      : uiState.thought
-                  }
-                  currentLoadingPhrase={
-                    settings.merged.ui.loadingPhrases === 'off'
-                      ? undefined
-                      : uiState.currentLoadingPhrase
-                  }
-                  thoughtLabel={
-                    inlineThinkingMode === 'full' ? 'Thinking ...' : undefined
-                  }
-                  elapsedTime={uiState.elapsedTime}
-                />
-              )}
-              {showMinimalModeBleedThrough && minimalModeBleedThrough && (
-                <Text color={minimalModeBleedThrough.color}>
-                  ● {minimalModeBleedThrough.text}
-                </Text>
-              )}
-              {hasMinimalStatusBleedThrough && (
-                <Box
-                  marginLeft={
-                    showMinimalInlineLoading || showMinimalModeBleedThrough
-                      ? 1
-                      : 0
-                  }
-                >
-                  <ToastDisplay />
-                </Box>
-              )}
-            </Box>
-            {(showMinimalContextBleedThrough || showShortcutsHint) && (
               <Box
-                marginTop={isNarrow && showMinimalBleedThroughRow ? 1 : 0}
-                flexDirection={isNarrow ? 'column' : 'row'}
-                alignItems={isNarrow ? 'flex-start' : 'flex-end'}
+                marginLeft={1}
+                marginRight={isNarrow ? 0 : 1}
+                flexDirection="row"
+                alignItems={isNarrow ? 'flex-start' : 'center'}
+                flexGrow={1}
               >
-                {showMinimalContextBleedThrough && (
-                  <ContextUsageDisplay
-                    promptTokenCount={uiState.sessionStats.lastPromptTokenCount}
-                    model={uiState.currentModel}
-                    terminalWidth={uiState.terminalWidth}
+                {showUiDetails && showLoadingIndicator && (
+                  <LoadingIndicator
+                    inline
+                    thought={
+                      uiState.streamingState ===
+                      StreamingState.WaitingForConfirmation
+                        ? undefined
+                        : uiState.thought
+                    }
+                    currentLoadingPhrase={
+                      settings.merged.ui.loadingPhrases === 'off'
+                        ? undefined
+                        : uiState.currentLoadingPhrase
+                    }
+                    thoughtLabel={
+                      inlineThinkingMode === 'full' ? 'Thinking ...' : undefined
+                    }
+                    elapsedTime={uiState.elapsedTime}
                   />
                 )}
-                {showShortcutsHint && (
+              </Box>
+              <Box
+                marginTop={isNarrow ? 1 : 0}
+                flexDirection="column"
+                alignItems={isNarrow ? 'flex-start' : 'flex-end'}
+              >
+                {showUiDetails && showShortcutsHint && <ShortcutsHint />}
+              </Box>
+            </Box>
+            {showMinimalMetaRow && (
+              <Box
+                justifyContent="space-between"
+                width="100%"
+                flexDirection={isNarrow ? 'column' : 'row'}
+                alignItems={isNarrow ? 'flex-start' : 'center'}
+              >
+                <Box
+                  marginLeft={1}
+                  marginRight={isNarrow ? 0 : 1}
+                  flexDirection="row"
+                  alignItems={isNarrow ? 'flex-start' : 'center'}
+                  flexGrow={1}
+                >
+                  {showMinimalInlineLoading && (
+                    <LoadingIndicator
+                      inline
+                      thought={
+                        uiState.streamingState ===
+                        StreamingState.WaitingForConfirmation
+                          ? undefined
+                          : uiState.thought
+                      }
+                      currentLoadingPhrase={
+                        settings.merged.ui.loadingPhrases === 'off'
+                          ? undefined
+                          : uiState.currentLoadingPhrase
+                      }
+                      thoughtLabel={
+                        inlineThinkingMode === 'full'
+                          ? 'Thinking ...'
+                          : undefined
+                      }
+                      elapsedTime={uiState.elapsedTime}
+                    />
+                  )}
+                  {showMinimalModeBleedThrough && minimalModeBleedThrough && (
+                    <Text color={minimalModeBleedThrough.color}>
+                      ● {minimalModeBleedThrough.text}
+                    </Text>
+                  )}
+                  {hasMinimalStatusBleedThrough && (
+                    <Box
+                      marginLeft={
+                        showMinimalInlineLoading || showMinimalModeBleedThrough
+                          ? 1
+                          : 0
+                      }
+                    >
+                      <ToastDisplay />
+                    </Box>
+                  )}
+                </Box>
+                {(showMinimalContextBleedThrough || showShortcutsHint) && (
                   <Box
-                    marginLeft={
-                      showMinimalContextBleedThrough && !isNarrow ? 1 : 0
-                    }
-                    marginTop={
-                      showMinimalContextBleedThrough && isNarrow ? 1 : 0
-                    }
+                    marginTop={isNarrow && showMinimalBleedThroughRow ? 1 : 0}
+                    flexDirection={isNarrow ? 'column' : 'row'}
+                    alignItems={isNarrow ? 'flex-start' : 'flex-end'}
                   >
-                    <ShortcutsHint />
+                    {showMinimalContextBleedThrough && (
+                      <ContextUsageDisplay
+                        promptTokenCount={
+                          uiState.sessionStats.lastPromptTokenCount
+                        }
+                        model={uiState.currentModel}
+                        terminalWidth={uiState.terminalWidth}
+                      />
+                    )}
+                    {showShortcutsHint && (
+                      <Box
+                        marginLeft={
+                          showMinimalContextBleedThrough && !isNarrow ? 1 : 0
+                        }
+                        marginTop={
+                          showMinimalContextBleedThrough && isNarrow ? 1 : 0
+                        }
+                      >
+                        <ShortcutsHint />
+                      </Box>
+                    )}
                   </Box>
                 )}
               </Box>
             )}
-          </Box>
-        )}
-        {showShortcutsHelp && <ShortcutsHelp />}
-        {showUiDetails && <HorizontalLine />}
-        {showUiDetails && (
-          <Box
-            justifyContent={
-              settings.merged.ui.hideContextSummary
-                ? 'flex-start'
-                : 'space-between'
-            }
-            width="100%"
-            flexDirection={isNarrow ? 'column' : 'row'}
-            alignItems={isNarrow ? 'flex-start' : 'center'}
-          >
-            <Box
-              marginLeft={1}
-              marginRight={isNarrow ? 0 : 1}
-              flexDirection="row"
-              alignItems="center"
-              flexGrow={1}
-            >
-              {hasToast ? (
-                <ToastDisplay />
-              ) : (
+            {showShortcutsHelp && <ShortcutsHelp />}
+            {showUiDetails && <HorizontalLine />}
+            {showUiDetails && (
+              <Box
+                justifyContent={
+                  settings.merged.ui.hideContextSummary
+                    ? 'flex-start'
+                    : 'space-between'
+                }
+                width="100%"
+                flexDirection={isNarrow ? 'column' : 'row'}
+                alignItems={isNarrow ? 'flex-start' : 'center'}
+              >
                 <Box
-                  flexDirection={isNarrow ? 'column' : 'row'}
-                  alignItems={isNarrow ? 'flex-start' : 'center'}
+                  marginLeft={1}
+                  marginRight={isNarrow ? 0 : 1}
+                  flexDirection="row"
+                  alignItems="center"
+                  flexGrow={1}
                 >
+                  {hasToast ? (
+                    <ToastDisplay />
+                  ) : (
+                    <Box
+                      flexDirection={isNarrow ? 'column' : 'row'}
+                      alignItems={isNarrow ? 'flex-start' : 'center'}
+                    >
+                      {showApprovalIndicator && (
+                        <ApprovalModeIndicator
+                          approvalMode={showApprovalModeIndicator}
+                          allowPlanMode={uiState.allowPlanMode}
+                        />
+                      )}
+                      {!showLoadingIndicator && (
+                        <>
+                          {uiState.shellModeActive && (
+                            <Box
+                              marginLeft={
+                                showApprovalIndicator && !isNarrow ? 1 : 0
+                              }
+                              marginTop={
+                                showApprovalIndicator && isNarrow ? 1 : 0
+                              }
+                            >
+                              <ShellModeIndicator />
+                            </Box>
+                          )}
+                          {showRawMarkdownIndicator && (
+                            <Box
+                              marginLeft={
+                                (showApprovalIndicator ||
+                                  uiState.shellModeActive) &&
+                                !isNarrow
+                                  ? 1
+                                  : 0
+                              }
+                              marginTop={
+                                (showApprovalIndicator ||
+                                  uiState.shellModeActive) &&
+                                isNarrow
+                                  ? 1
+                                  : 0
+                              }
+                            >
+                              <RawMarkdownIndicator />
+                            </Box>
+                          )}
+                        </>
+                      )}
+                    </Box>
+                  )}
+                </Box>
+
+                <Box
+                  marginTop={isNarrow ? 1 : 0}
+                  flexDirection="column"
+                  alignItems={isNarrow ? 'flex-start' : 'flex-end'}
+                >
+                  {!showLoadingIndicator && (
+                    <StatusDisplay hideContextSummary={hideContextSummary} />
+                  )}
+                </Box>
+              </Box>
+            )}
+          </Box>
+        ) : (
+          <Box width="100%" flexDirection="column">
+            {showUiDetails && newLayoutSetting === 'new' && <HorizontalLine />}
+
+            {showUiDetails && (
+              <Box
+                width="100%"
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                {hasToast ? (
+                  <Box width="100%" marginLeft={1}>
+                    {isInteractiveShellWaiting && !shouldShowToast(uiState) ? (
+                      <Text color={theme.status.warning}>
+                        ! Shell awaiting input (Tab to focus)
+                      </Text>
+                    ) : (
+                      <ToastDisplay />
+                    )}
+                  </Box>
+                ) : (
+                  <>
+                    <Box
+                      flexDirection="row"
+                      alignItems={isNarrow ? 'flex-start' : 'center'}
+                      flexGrow={1}
+                      flexShrink={0}
+                      marginLeft={1}
+                    >
+                      {renderStatusNode()}
+                    </Box>
+                    <Box flexShrink={0} marginLeft={2}>
+                      {renderAmbientNode()}
+                    </Box>
+                  </>
+                )}
+              </Box>
+            )}
+
+            {showUiDetails && newLayoutSetting === 'new_divider_down' && (
+              <HorizontalLine />
+            )}
+
+            {showUiDetails && (
+              <Box
+                width="100%"
+                flexDirection={isNarrow ? 'column' : 'row'}
+                alignItems={isNarrow ? 'flex-start' : 'center'}
+                justifyContent="space-between"
+              >
+                <Box flexDirection="row" alignItems="center" marginLeft={1}>
                   {showApprovalIndicator && (
                     <ApprovalModeIndicator
                       approvalMode={showApprovalModeIndicator}
                       allowPlanMode={uiState.allowPlanMode}
                     />
                   )}
-                  {!showLoadingIndicator && (
-                    <>
-                      {uiState.shellModeActive && (
-                        <Box
-                          marginLeft={
-                            showApprovalIndicator && !isNarrow ? 1 : 0
-                          }
-                          marginTop={showApprovalIndicator && isNarrow ? 1 : 0}
-                        >
-                          <ShellModeIndicator />
-                        </Box>
-                      )}
-                      {showRawMarkdownIndicator && (
-                        <Box
-                          marginLeft={
-                            (showApprovalIndicator ||
-                              uiState.shellModeActive) &&
-                            !isNarrow
-                              ? 1
-                              : 0
-                          }
-                          marginTop={
-                            (showApprovalIndicator ||
-                              uiState.shellModeActive) &&
-                            isNarrow
-                              ? 1
-                              : 0
-                          }
-                        >
-                          <RawMarkdownIndicator />
-                        </Box>
-                      )}
-                    </>
+                  {uiState.shellModeActive && (
+                    <Box
+                      marginLeft={showApprovalIndicator && !isNarrow ? 1 : 0}
+                      marginTop={showApprovalIndicator && isNarrow ? 1 : 0}
+                    >
+                      <ShellModeIndicator />
+                    </Box>
+                  )}
+                  {showRawMarkdownIndicator && (
+                    <Box
+                      marginLeft={
+                        (showApprovalIndicator || uiState.shellModeActive) &&
+                        !isNarrow
+                          ? 1
+                          : 0
+                      }
+                      marginTop={
+                        (showApprovalIndicator || uiState.shellModeActive) &&
+                        isNarrow
+                          ? 1
+                          : 0
+                      }
+                    >
+                      <RawMarkdownIndicator />
+                    </Box>
                   )}
                 </Box>
-              )}
-            </Box>
-
-            <Box
-              marginTop={isNarrow ? 1 : 0}
-              flexDirection="column"
-              alignItems={isNarrow ? 'flex-start' : 'flex-end'}
-            >
-              {!showLoadingIndicator && (
-                <StatusDisplay hideContextSummary={hideContextSummary} />
-              )}
-            </Box>
+                <Box
+                  marginTop={isNarrow ? 1 : 0}
+                  flexDirection="row"
+                  alignItems="center"
+                  marginLeft={isNarrow ? 1 : 0}
+                >
+                  <StatusDisplay hideContextSummary={hideContextSummary} />
+                </Box>
+              </Box>
+            )}
           </Box>
         )}
       </Box>
@@ -435,6 +685,7 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
 
       {uiState.isInputActive && (
         <InputPrompt
+          disabled={hasPendingActionRequired}
           buffer={uiState.buffer}
           inputWidth={uiState.inputWidth}
           suggestionsWidth={uiState.suggestionsWidth}

packages/cli/src/ui/components/Footer.tsx

@@ -83,6 +83,8 @@ export const Footer: React.FC = () => {
       flexDirection="row"
       alignItems="center"
       paddingX={1}
+      paddingBottom={0}
+      marginBottom={0}
     >
       {(showDebugProfiler || displayVimMode || !hideCWD) && (
         <Box>

packages/cli/src/ui/components/HookStatusDisplay.tsx

@@ -6,7 +6,6 @@
 
 import type React from 'react';
 import { Text } from 'ink';
-import { theme } from '../semantic-colors.js';
 import { type ActiveHook } from '../types.js';
 
 interface HookStatusDisplayProps {
@@ -31,9 +30,5 @@ export const HookStatusDisplay: React.FC<HookStatusDisplayProps> = ({
 
   const text = `${label}: ${displayNames.join(', ')}`;
 
-  return (
-    <Text color={theme.status.warning} wrap="truncate">
-      {text}
-    </Text>
-  );
+  return <Text color="inherit">{text}</Text>;
 };

packages/cli/src/ui/components/InputPrompt.tsx

@@ -98,6 +98,7 @@ export interface InputPromptProps {
   commandContext: CommandContext;
   placeholder?: string;
   focus?: boolean;
+  disabled?: boolean;
   inputWidth: number;
   suggestionsWidth: number;
   shellModeActive: boolean;
@@ -191,6 +192,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
   commandContext,
   placeholder = '  Type your message or @path/to/file',
   focus = true,
+  disabled = false,
   inputWidth,
   suggestionsWidth,
   shellModeActive,
@@ -301,7 +303,9 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
   const resetCommandSearchCompletionState =
     commandSearchCompletion.resetCompletionState;
 
-  const showCursor = focus && isShellFocused && !isEmbeddedShellFocused;
+  const isFocusedAndEnabled = focus && !disabled;
+  const showCursor =
+    isFocusedAndEnabled && isShellFocused && !isEmbeddedShellFocused;
 
   // Notify parent component about escape prompt state changes
   useEffect(() => {
@@ -618,9 +622,10 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       // We should probably stop supporting paste if the InputPrompt is not
       // focused.
       /// We want to handle paste even when not focused to support drag and drop.
-      if (!focus && key.name !== 'paste') {
+      if (!isFocusedAndEnabled && key.name !== 'paste') {
         return false;
       }
+      if (disabled) return false;
 
       // Handle escape to close shortcuts panel first, before letting it bubble
       // up for cancellation. This ensures pressing Escape once closes the panel,
@@ -1187,7 +1192,6 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       return handled;
     },
     [
-      focus,
       buffer,
       completion,
       shellModeActive,
@@ -1217,6 +1221,8 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       backgroundShells.size,
       backgroundShellHeight,
       streamingState,
+      disabled,
+      isFocusedAndEnabled,
       handleEscPress,
       registerPlainTabPress,
       resetPlainTabPress,
@@ -1425,11 +1431,14 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
     </Box>
   ) : null;
 
-  const borderColor =
-    isShellFocused && !isEmbeddedShellFocused
+  const borderColor = disabled
+    ? theme.border.default
+    : isShellFocused && !isEmbeddedShellFocused
       ? (statusColor ?? theme.border.focused)
       : theme.border.default;
 
+  // Automatically blur the input if it's disabled.
+
   return (
     <>
       {suggestionsPosition === 'above' && suggestionsNode}
@@ -1512,7 +1521,8 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
                   const cursorVisualRow =
                     cursorVisualRowAbsolute - scrollVisualRow;
                   const isOnCursorLine =
-                    focus && visualIdxInRenderedSet === cursorVisualRow;
+                    isFocusedAndEnabled &&
+                    visualIdxInRenderedSet === cursorVisualRow;
 
                   const renderedLine: React.ReactNode[] = [];
 
@@ -1524,7 +1534,8 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
                     logicalLine,
                     logicalLineIdx,
                     transformations,
-                    ...(focus && buffer.cursor[0] === logicalLineIdx
+                    ...(isFocusedAndEnabled &&
+                    buffer.cursor[0] === logicalLineIdx
                       ? [buffer.cursor[1]]
                       : []),
                   );

packages/cli/src/ui/components/LoadingIndicator.test.tsx

@@ -72,7 +72,7 @@ describe('<LoadingIndicator />', () => {
     const output = lastFrame();
     expect(output).toContain('MockRespondingSpinner');
     expect(output).toContain('Loading...');
-    expect(output).toContain('(esc to cancel, 5s)');
+    expect(output).toContain('esc to cancel, 5s');
   });
 
   it('should render spinner (static), phrase but no time/cancel when streamingState is WaitingForConfirmation', async () => {
@@ -116,7 +116,7 @@ describe('<LoadingIndicator />', () => {
       StreamingState.Responding,
     );
     await waitUntilReady();
-    expect(lastFrame()).toContain('(esc to cancel, 1m)');
+    expect(lastFrame()).toContain('esc to cancel, 1m');
     unmount();
   });
 
@@ -130,7 +130,7 @@ describe('<LoadingIndicator />', () => {
       StreamingState.Responding,
     );
     await waitUntilReady();
-    expect(lastFrame()).toContain('(esc to cancel, 2m 5s)');
+    expect(lastFrame()).toContain('esc to cancel, 2m 5s');
     unmount();
   });
 
@@ -196,7 +196,7 @@ describe('<LoadingIndicator />', () => {
     let output = lastFrame();
     expect(output).toContain('MockRespondingSpinner');
     expect(output).toContain('Now Responding');
-    expect(output).toContain('(esc to cancel, 2s)');
+    expect(output).toContain('esc to cancel, 2s');
 
     // Transition to WaitingForConfirmation
     await act(async () => {
@@ -258,7 +258,7 @@ describe('<LoadingIndicator />', () => {
     const output = lastFrame();
     expect(output).toBeDefined();
     if (output) {
-      expect(output).toContain('💬');
+      expect(output).toContain(''); // Replaced emoji expectation
       expect(output).toContain('Thinking about something...');
       expect(output).not.toContain('and other stuff.');
     }
@@ -280,7 +280,7 @@ describe('<LoadingIndicator />', () => {
     );
     await waitUntilReady();
     const output = lastFrame();
-    expect(output).toContain('💬');
+    expect(output).toContain(''); // Replaced emoji expectation
     expect(output).toContain('This should be displayed');
     expect(output).not.toContain('This should not be displayed');
     unmount();
@@ -295,7 +295,7 @@ describe('<LoadingIndicator />', () => {
       StreamingState.Responding,
     );
     await waitUntilReady();
-    expect(lastFrame()).not.toContain('💬');
+    expect(lastFrame()).toContain(''); // Replaced emoji expectation
     unmount();
   });
 
@@ -331,7 +331,7 @@ describe('<LoadingIndicator />', () => {
       // Check for single line output
       expect(output?.trim().includes('\n')).toBe(false);
       expect(output).toContain('Loading...');
-      expect(output).toContain('(esc to cancel, 5s)');
+      expect(output).toContain('esc to cancel, 5s');
       expect(output).toContain('Right');
       unmount();
     });
@@ -355,8 +355,8 @@ describe('<LoadingIndicator />', () => {
       expect(lines).toHaveLength(3);
       if (lines) {
         expect(lines[0]).toContain('Loading...');
-        expect(lines[0]).not.toContain('(esc to cancel, 5s)');
-        expect(lines[1]).toContain('(esc to cancel, 5s)');
+        expect(lines[0]).not.toContain('esc to cancel, 5s');
+        expect(lines[1]).toContain('esc to cancel, 5s');
         expect(lines[2]).toContain('Right');
       }
       unmount();

packages/cli/src/ui/components/LoadingIndicator.tsx

@@ -24,6 +24,7 @@ interface LoadingIndicatorProps {
   thought?: ThoughtSummary | null;
   thoughtLabel?: string;
   showCancelAndTimer?: boolean;
+  forceRealStatusOnly?: boolean;
 }
 
 export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
@@ -34,6 +35,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
   thought,
   thoughtLabel,
   showCancelAndTimer = true,
+  forceRealStatusOnly = false,
 }) => {
   const streamingState = useStreamingContext();
   const { columns: terminalWidth } = useTerminalSize();
@@ -54,16 +56,17 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
       ? currentLoadingPhrase
       : thought?.subject
         ? (thoughtLabel ?? thought.subject)
-        : currentLoadingPhrase;
-  const hasThoughtIndicator =
-    currentLoadingPhrase !== INTERACTIVE_SHELL_WAITING_PHRASE &&
-    Boolean(thought?.subject?.trim());
-  const thinkingIndicator = hasThoughtIndicator ? '💬 ' : '';
+        : forceRealStatusOnly
+          ? streamingState === StreamingState.Responding
+            ? 'Waiting for model...'
+            : undefined
+          : currentLoadingPhrase;
+  const thinkingIndicator = '';
 
   const cancelAndTimerContent =
     showCancelAndTimer &&
     streamingState !== StreamingState.WaitingForConfirmation
-      ? `(esc to cancel, ${elapsedTime < 60 ? `${elapsedTime}s` : formatDuration(elapsedTime * 1000)})`
+      ? `esc to cancel, ${elapsedTime < 60 ? `${elapsedTime}s` : formatDuration(elapsedTime * 1000)}`
       : null;
 
   if (inline) {

packages/cli/src/ui/components/StatusDisplay.tsx

@@ -29,6 +29,7 @@ export const StatusDisplay: React.FC<StatusDisplayProps> = ({
   }
 
   if (
+    settings.merged.ui.newFooterLayout === 'legacy' &&
     uiState.activeHooks.length > 0 &&
     settings.merged.hooksConfig.notifications
   ) {

packages/cli/src/ui/components/__snapshots__/LoadingIndicator.test.tsx.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<LoadingIndicator /> > should truncate long primary text instead of wrapping 1`] = `
-"MockRespondin This is an extremely long loading phrase that shoul… (esc to
-gSpinner                                                           cancel, 5s)
+"MockRespondin This is an extremely long loading phrase that should …esc to
+gSpinner                                                            cancel, 5s
 "
 `;

packages/cli/src/ui/components/messages/ToolShared.tsx

@@ -123,7 +123,7 @@ export const FocusHint: React.FC<{
 
   return (
     <Box marginLeft={1} flexShrink={0}>
-      <Text color={theme.text.accent}>
+      <Text color={theme.status.warning}>
         {isThisShellFocused
           ? `(${formatCommand(Command.UNFOCUS_SHELL_INPUT)} to unfocus)`
           : `(${formatCommand(Command.FOCUS_SHELL_INPUT)} to focus)`}