feat: Add Welcome Back Dialog, Project Summary, and Enhanced Quit Options (#553)

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

@@ -123,7 +123,7 @@ export function AuthDialog({
         if (settings.merged.selectedAuthType === undefined) {
           // Prevent exiting if no auth method is set
           setErrorMessage(
-            'You must select an auth method to proceed. Press Ctrl+C twice to exit.',
+            'You must select an auth method to proceed. Press Ctrl+C again to exit.',
           );
           return;
         }

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

@@ -111,7 +111,7 @@ export const Help: React.FC<Help> = ({ commands }) => (
       <Text bold color={Colors.AccentPurple}>
         Ctrl+C
       </Text>{' '}
-      - Quit application
+      - Close dialogs, cancel requests, or quit application
     </Text>
     <Text color={Colors.Foreground}>
       <Text bold color={Colors.AccentPurple}>

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

@@ -14,6 +14,7 @@ import { ErrorMessage } from './messages/ErrorMessage.js';
 import { ToolGroupMessage } from './messages/ToolGroupMessage.js';
 import { GeminiMessageContent } from './messages/GeminiMessageContent.js';
 import { CompressionMessage } from './messages/CompressionMessage.js';
+import { SummaryMessage } from './messages/SummaryMessage.js';
 import { Box } from 'ink';
 import { AboutBox } from './AboutBox.js';
 import { StatsDisplay } from './StatsDisplay.js';
@@ -81,6 +82,9 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
     {item.type === 'model_stats' && <ModelStatsDisplay />}
     {item.type === 'tool_stats' && <ToolStatsDisplay />}
     {item.type === 'quit' && <SessionSummaryDisplay duration={item.duration} />}
+    {item.type === 'quit_confirmation' && (
+      <SessionSummaryDisplay duration={item.duration} />
+    )}
     {item.type === 'tool_group' && (
       <ToolGroupMessage
         toolCalls={item.tools}
@@ -94,5 +98,6 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
     {item.type === 'compression' && (
       <CompressionMessage compression={item.compression} />
     )}
+    {item.type === 'summary' && <SummaryMessage summary={item.summary} />}
   </Box>
 );

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

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import React from 'react';
+import { Colors } from '../colors.js';
+import {
+  RadioButtonSelect,
+  RadioSelectItem,
+} from './shared/RadioButtonSelect.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+
+export enum QuitChoice {
+  CANCEL = 'cancel',
+  QUIT = 'quit',
+  SAVE_AND_QUIT = 'save_and_quit',
+  SUMMARY_AND_QUIT = 'summary_and_quit',
+}
+
+interface QuitConfirmationDialogProps {
+  onSelect: (choice: QuitChoice) => void;
+}
+
+export const QuitConfirmationDialog: React.FC<QuitConfirmationDialogProps> = ({
+  onSelect,
+}) => {
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onSelect(QuitChoice.CANCEL);
+      }
+    },
+    { isActive: true },
+  );
+
+  const options: Array<RadioSelectItem<QuitChoice>> = [
+    {
+      label: 'Quit immediately (/quit)',
+      value: QuitChoice.QUIT,
+    },
+    {
+      label: 'Generate summary and quit (/summary)',
+      value: QuitChoice.SUMMARY_AND_QUIT,
+    },
+    {
+      label: 'Save conversation and quit (/chat save)',
+      value: QuitChoice.SAVE_AND_QUIT,
+    },
+    {
+      label: 'Cancel (stay in application)',
+      value: QuitChoice.CANCEL,
+    },
+  ];
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={Colors.AccentYellow}
+      padding={1}
+      width="100%"
+      marginLeft={1}
+    >
+      <Box flexDirection="column" marginBottom={1}>
+        <Text>What would you like to do before exiting?</Text>
+      </Box>
+
+      <RadioButtonSelect items={options} onSelect={onSelect} isFocused />
+    </Box>
+  );
+};

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

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
+import { ProjectSummaryInfo } from '@qwen-code/qwen-code-core';
+import {
+  RadioButtonSelect,
+  RadioSelectItem,
+} from './shared/RadioButtonSelect.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+
+interface WelcomeBackDialogProps {
+  welcomeBackInfo: ProjectSummaryInfo;
+  onSelect: (choice: 'restart' | 'continue') => void;
+  onClose: () => void;
+}
+
+export function WelcomeBackDialog({
+  welcomeBackInfo,
+  onSelect,
+  onClose,
+}: WelcomeBackDialogProps) {
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onClose();
+      }
+    },
+    { isActive: true },
+  );
+
+  const options: Array<RadioSelectItem<'restart' | 'continue'>> = [
+    {
+      label: 'Start new chat session',
+      value: 'restart',
+    },
+    {
+      label: 'Continue previous conversation',
+      value: 'continue',
+    },
+  ];
+
+  // Extract data from welcomeBackInfo
+  const {
+    timeAgo,
+    goalContent,
+    totalTasks = 0,
+    doneCount = 0,
+    inProgressCount = 0,
+    pendingTasks = [],
+  } = welcomeBackInfo;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={Colors.AccentBlue}
+      padding={1}
+      width="100%"
+      marginLeft={1}
+    >
+      <Box flexDirection="column" marginBottom={1}>
+        <Text color={Colors.AccentBlue} bold>
+          👋 Welcome back! (Last updated: {timeAgo})
+        </Text>
+      </Box>
+
+      {/* Overall Goal Section */}
+      {goalContent && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text color={Colors.Foreground} bold>
+            🎯 Overall Goal:
+          </Text>
+          <Box marginTop={1} paddingLeft={2}>
+            <Text color={Colors.Gray}>{goalContent}</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Current Plan Section */}
+      {totalTasks > 0 && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text color={Colors.Foreground} bold>
+            📋 Current Plan:
+          </Text>
+          <Box marginTop={1} paddingLeft={2}>
+            <Text color={Colors.Gray}>
+              Progress: {doneCount}/{totalTasks} tasks completed
+              {inProgressCount > 0 && `, ${inProgressCount} in progress`}
+            </Text>
+          </Box>
+
+          {pendingTasks.length > 0 && (
+            <Box flexDirection="column" marginTop={1} paddingLeft={2}>
+              <Text color={Colors.Foreground} bold>
+                Pending Tasks:
+              </Text>
+              {pendingTasks.map((task: string, index: number) => (
+                <Text key={index} color={Colors.Gray}>
+                  • {task}
+                </Text>
+              ))}
+            </Box>
+          )}
+        </Box>
+      )}
+
+      {/* Action Selection */}
+      <Box flexDirection="column" marginTop={1}>
+        <Text bold>What would you like to do?</Text>
+        <Text>Choose how to proceed with your session:</Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <RadioButtonSelect items={options} onSelect={onSelect} isFocused />
+      </Box>
+    </Box>
+  );
+}

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

@@ -14,6 +14,11 @@ interface InfoMessageProps {
 }
 
 export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
+  // Don't render anything if text is empty
+  if (!text || text.trim() === '') {
+    return null;
+  }
+
   const prefix = 'ℹ ';
   const prefixWidth = prefix.length;
 

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

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { SummaryProps } from '../../types.js';
+import Spinner from 'ink-spinner';
+import { Colors } from '../../colors.js';
+
+export interface SummaryDisplayProps {
+  summary: SummaryProps;
+}
+
+/*
+ * Summary messages appear when the /chat summary command is run, and show a loading spinner
+ * while summary generation is in progress, followed up by success confirmation.
+ */
+export const SummaryMessage: React.FC<SummaryDisplayProps> = ({ summary }) => {
+  const getText = () => {
+    if (summary.isPending) {
+      switch (summary.stage) {
+        case 'generating':
+          return 'Generating project summary...';
+        case 'saving':
+          return 'Saving project summary...';
+        default:
+          return 'Processing summary...';
+      }
+    }
+    const baseMessage = 'Project summary generated and saved successfully!';
+    if (summary.filePath) {
+      return `${baseMessage} Saved to: ${summary.filePath}`;
+    }
+    return baseMessage;
+  };
+
+  const getIcon = () => {
+    if (summary.isPending) {
+      return <Spinner type="dots" />;
+    }
+    return <Text color={Colors.AccentGreen}>✅</Text>;
+  };
+
+  return (
+    <Box flexDirection="row">
+      <Box marginRight={1}>{getIcon()}</Box>
+      <Box>
+        <Text
+          color={summary.isPending ? Colors.AccentPurple : Colors.AccentGreen}
+        >
+          {getText()}
+        </Text>
+      </Box>
+    </Box>
+  );
+};