Add shortcuts hint and panel for discoverability (#18035)

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

@@ -19,21 +19,29 @@ import { INTERACTIVE_SHELL_WAITING_PHRASE } from '../hooks/usePhraseCycler.js';
 interface LoadingIndicatorProps {
   currentLoadingPhrase?: string;
   elapsedTime: number;
+  inline?: boolean;
   rightContent?: React.ReactNode;
   thought?: ThoughtSummary | null;
+  showCancelAndTimer?: boolean;
 }
 
 export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
   currentLoadingPhrase,
   elapsedTime,
+  inline = false,
   rightContent,
   thought,
+  showCancelAndTimer = true,
 }) => {
   const streamingState = useStreamingContext();
   const { columns: terminalWidth } = useTerminalSize();
   const isNarrow = isNarrowWidth(terminalWidth);
 
-  if (streamingState === StreamingState.Idle) {
+  if (
+    streamingState === StreamingState.Idle &&
+    !currentLoadingPhrase &&
+    !thought
+  ) {
     return null;
   }
 
@@ -45,10 +53,38 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
       : thought?.subject || currentLoadingPhrase;
 
   const cancelAndTimerContent =
+    showCancelAndTimer &&
     streamingState !== StreamingState.WaitingForConfirmation
       ? `(esc to cancel, ${elapsedTime < 60 ? `${elapsedTime}s` : formatDuration(elapsedTime * 1000)})`
       : null;
 
+  if (inline) {
+    return (
+      <Box>
+        <Box marginRight={1}>
+          <GeminiRespondingSpinner
+            nonRespondingDisplay={
+              streamingState === StreamingState.WaitingForConfirmation
+                ? '⠏'
+                : ''
+            }
+          />
+        </Box>
+        {primaryText && (
+          <Text color={theme.text.accent} wrap="truncate-end">
+            {primaryText}
+          </Text>
+        )}
+        {cancelAndTimerContent && (
+          <>
+            <Box flexShrink={0} width={1} />
+            <Text color={theme.text.secondary}>{cancelAndTimerContent}</Text>
+          </>
+        )}
+      </Box>
+    );
+  }
+
   return (
     <Box paddingLeft={0} flexDirection="column">
       {/* Main loading line */}