Merge branch 'main' into feat/mcp-tui

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

@@ -8,26 +8,37 @@ import type React from 'react';
 import { useState } from 'react';
 import { Box, Text } from 'ink';
 import { TextInput } from './shared/TextInput.js';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { useKeypress } from '../hooks/useKeypress.js';
 import { t } from '../../i18n/index.js';
+import { CodingPlanRegion } from '../../constants/codingPlan.js';
 import Link from 'ink-link';
 
 interface ApiKeyInputProps {
   onSubmit: (apiKey: string) => void;
   onCancel: () => void;
+  region?: CodingPlanRegion;
 }
 
 const CODING_PLAN_API_KEY_URL =
   'https://bailian.console.aliyun.com/?tab=model#/efm/coding_plan';
 
+const CODING_PLAN_INTL_API_KEY_URL =
+  'https://modelstudio.console.alibabacloud.com/?tab=dashboard#/efm/coding_plan';
+
 export function ApiKeyInput({
   onSubmit,
   onCancel,
+  region = CodingPlanRegion.CHINA,
 }: ApiKeyInputProps): React.JSX.Element {
   const [apiKey, setApiKey] = useState('');
   const [error, setError] = useState<string | null>(null);
 
+  const apiKeyUrl =
+    region === CodingPlanRegion.GLOBAL
+      ? CODING_PLAN_INTL_API_KEY_URL
+      : CODING_PLAN_API_KEY_URL;
+
   useKeypress(
     (key) => {
       if (key.name === 'escape') {
@@ -52,21 +63,21 @@ export function ApiKeyInput({
       <TextInput value={apiKey} onChange={setApiKey} placeholder="sk-sp-..." />
       {error && (
         <Box marginTop={1}>
-          <Text color={Colors.AccentRed}>{error}</Text>
+          <Text color={theme.status.error}>{error}</Text>
         </Box>
       )}
       <Box marginTop={1}>
         <Text>{t('You can get your exclusive Coding Plan API-KEY here:')}</Text>
       </Box>
       <Box marginTop={0}>
-        <Link url={CODING_PLAN_API_KEY_URL} fallback={false}>
-          <Text color={Colors.AccentGreen} underline>
-            {CODING_PLAN_API_KEY_URL}
+        <Link url={apiKeyUrl} fallback={false}>
+          <Text color={theme.status.success} underline>
+            {apiKeyUrl}
           </Text>
         </Link>
       </Box>
       <Box marginTop={1}>
-        <Text color={Colors.Gray}>
+        <Text color={theme.text.secondary}>
           {t('(Press Enter to submit, Escape to cancel)')}
         </Text>
       </Box>

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

@@ -20,6 +20,7 @@ import { GeminiThoughtMessageContent } from './messages/GeminiThoughtMessageCont
 import { CompressionMessage } from './messages/CompressionMessage.js';
 import { SummaryMessage } from './messages/SummaryMessage.js';
 import { WarningMessage } from './messages/WarningMessage.js';
+import { RetryCountdownMessage } from './messages/RetryCountdownMessage.js';
 import { Box } from 'ink';
 import { AboutBox } from './AboutBox.js';
 import { StatsDisplay } from './StatsDisplay.js';
@@ -126,6 +127,9 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
       {itemForDisplay.type === 'error' && (
         <ErrorMessage text={itemForDisplay.text} />
       )}
+      {itemForDisplay.type === 'retry_countdown' && (
+        <RetryCountdownMessage text={itemForDisplay.text} />
+      )}
       {itemForDisplay.type === 'about' && (
         <AboutBox {...itemForDisplay.systemInfo} width={boxWidth} />
       )}

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

@@ -370,6 +370,8 @@ describe('InputPrompt', () => {
   });
 
   describe('clipboard image paste', () => {
+    const isWindows = process.platform === 'win32';
+
     beforeEach(() => {
       vi.mocked(clipboardUtils.clipboardHasImage).mockResolvedValue(false);
       vi.mocked(clipboardUtils.saveClipboardImage).mockResolvedValue(null);
@@ -378,10 +380,37 @@ describe('InputPrompt', () => {
       );
     });
 
-    it('should handle Ctrl+V when clipboard has an image', async () => {
+    // Windows uses Alt+V (\x1Bv), non-Windows uses Ctrl+V (\x16)
+    const describeConditional = isWindows ? it.skip : it;
+    describeConditional(
+      'should handle Ctrl+V when clipboard has an image',
+      async () => {
+        vi.mocked(clipboardUtils.clipboardHasImage).mockResolvedValue(true);
+        vi.mocked(clipboardUtils.saveClipboardImage).mockResolvedValue(
+          '/Users/mochi/.qwen/tmp/clipboard-123.png',
+        );
+
+        const { stdin, unmount } = renderWithProviders(
+          <InputPrompt {...props} />,
+        );
+        await wait();
+
+        // Send Ctrl+V
+        stdin.write('\x16'); // Ctrl+V
+        await wait();
+
+        expect(clipboardUtils.clipboardHasImage).toHaveBeenCalled();
+        expect(clipboardUtils.saveClipboardImage).toHaveBeenCalled();
+        expect(clipboardUtils.cleanupOldClipboardImages).toHaveBeenCalled();
+        // Note: The new implementation adds images as attachments rather than inserting into buffer
+        unmount();
+      },
+    );
+
+    it('should handle Cmd+V when clipboard has an image', async () => {
       vi.mocked(clipboardUtils.clipboardHasImage).mockResolvedValue(true);
       vi.mocked(clipboardUtils.saveClipboardImage).mockResolvedValue(
-        '/test/.qwen-clipboard/clipboard-123.png',
+        '/Users/mochi/.qwen/tmp/clipboard-456.png',
       );
 
       const { stdin, unmount } = renderWithProviders(
@@ -389,18 +418,15 @@ describe('InputPrompt', () => {
       );
       await wait();
 
-      // Send Ctrl+V
-      stdin.write('\x16'); // Ctrl+V
+      // Send Cmd+V (meta key) / Alt+V on Windows
+      // In terminals, Cmd+V or Alt+V is typically sent as ESC followed by 'v'
+      stdin.write('\x1Bv');
       await wait();
 
       expect(clipboardUtils.clipboardHasImage).toHaveBeenCalled();
-      expect(clipboardUtils.saveClipboardImage).toHaveBeenCalledWith(
-        props.config.getTargetDir(),
-      );
-      expect(clipboardUtils.cleanupOldClipboardImages).toHaveBeenCalledWith(
-        props.config.getTargetDir(),
-      );
-      expect(mockBuffer.replaceRangeByOffset).toHaveBeenCalled();
+      expect(clipboardUtils.saveClipboardImage).toHaveBeenCalled();
+      expect(clipboardUtils.cleanupOldClipboardImages).toHaveBeenCalled();
+      // Note: The new implementation adds images as attachments rather than inserting into buffer
       unmount();
     });
 
@@ -412,7 +438,8 @@ describe('InputPrompt', () => {
       );
       await wait();
 
-      stdin.write('\x16'); // Ctrl+V
+      // Use platform-appropriate key combination
+      stdin.write(isWindows ? '\x1Bv' : '\x16');
       await wait();
 
       expect(clipboardUtils.clipboardHasImage).toHaveBeenCalled();
@@ -430,7 +457,8 @@ describe('InputPrompt', () => {
       );
       await wait();
 
-      stdin.write('\x16'); // Ctrl+V
+      // Use platform-appropriate key combination
+      stdin.write(isWindows ? '\x1Bv' : '\x16');
       await wait();
 
       expect(clipboardUtils.saveClipboardImage).toHaveBeenCalled();
@@ -439,11 +467,7 @@ describe('InputPrompt', () => {
     });
 
     it('should insert image path at cursor position with proper spacing', async () => {
-      const imagePath = path.join(
-        'test',
-        '.qwen-clipboard',
-        'clipboard-456.png',
-      );
+      const imagePath = '/Users/mochi/.qwen/tmp/clipboard-456.png';
       vi.mocked(clipboardUtils.clipboardHasImage).mockResolvedValue(true);
       vi.mocked(clipboardUtils.saveClipboardImage).mockResolvedValue(imagePath);
 
@@ -451,27 +475,20 @@ describe('InputPrompt', () => {
       mockBuffer.text = 'Hello world';
       mockBuffer.cursor = [0, 5]; // Cursor after "Hello"
       mockBuffer.lines = ['Hello world'];
-      mockBuffer.replaceRangeByOffset = vi.fn();
 
       const { stdin, unmount } = renderWithProviders(
         <InputPrompt {...props} />,
       );
       await wait();
 
-      stdin.write('\x16'); // Ctrl+V
+      // Use platform-appropriate key combination
+      stdin.write(isWindows ? '\x1Bv' : '\x16');
       await wait();
 
-      // Should insert at cursor position with spaces
-      expect(mockBuffer.replaceRangeByOffset).toHaveBeenCalled();
-
-      // Get the actual call to see what path was used
-      const actualCall = vi.mocked(mockBuffer.replaceRangeByOffset).mock
-        .calls[0];
-      expect(actualCall[0]).toBe(5); // start offset
-      expect(actualCall[1]).toBe(5); // end offset
-      expect(actualCall[2]).toBe(
-        ' @' + path.relative(path.join('test', 'project', 'src'), imagePath),
-      );
+      // The new implementation adds images as attachments rather than inserting into buffer
+      // So we verify that saveClipboardImage was called instead
+      expect(clipboardUtils.saveClipboardImage).toHaveBeenCalled();
+      expect(clipboardUtils.clipboardHasImage).toHaveBeenCalled();
       unmount();
     });
 
@@ -485,7 +502,8 @@ describe('InputPrompt', () => {
       );
       await wait();
 
-      stdin.write('\x16'); // Ctrl+V
+      // Use platform-appropriate key combination
+      stdin.write(isWindows ? '\x1Bv' : '\x16');
       await wait();
 
       // Should not throw and should not set buffer text on error

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

@@ -22,7 +22,11 @@ import { useKeypress } from '../hooks/useKeypress.js';
 import { keyMatchers, Command } from '../keyMatchers.js';
 import type { CommandContext, SlashCommand } from '../commands/types.js';
 import type { Config } from '@qwen-code/qwen-code-core';
-import { ApprovalMode, createDebugLogger } from '@qwen-code/qwen-code-core';
+import {
+  ApprovalMode,
+  Storage,
+  createDebugLogger,
+} from '@qwen-code/qwen-code-core';
 import {
   parseInputForHighlighting,
   buildSegmentsForVisualSlice,
@@ -41,6 +45,15 @@ import { useUIActions } from '../contexts/UIActionsContext.js';
 import { useKeypressContext } from '../contexts/KeypressContext.js';
 import { FEEDBACK_DIALOG_KEYS } from '../FeedbackDialog.js';
 
+/**
+ * Represents an attachment (e.g., pasted image) displayed above the input prompt
+ */
+export interface Attachment {
+  id: string; // Unique identifier (timestamp)
+  path: string; // Full file path
+  filename: string; // Filename only (for display)
+}
+
 const debugLogger = createDebugLogger('INPUT_PROMPT');
 export interface InputPromptProps {
   buffer: TextBuffer;
@@ -126,6 +139,10 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
   const [recentPasteTime, setRecentPasteTime] = useState<number | null>(null);
   const pasteTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+  // Attachment state for clipboard images
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [isAttachmentMode, setIsAttachmentMode] = useState(false);
+  const [selectedAttachmentIndex, setSelectedAttachmentIndex] = useState(-1);
   // Large paste placeholder handling
   const [pendingPastes, setPendingPastes] = useState<Map<string, string>>(
     new Map(),
@@ -281,10 +298,25 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       if (shellModeActive) {
         shellHistory.addCommandToHistory(finalValue);
       }
+
+      // Convert attachments to @references and prepend to the message
+      if (attachments.length > 0) {
+        const attachmentRefs = attachments
+          .map((att) => `@${path.relative(config.getTargetDir(), att.path)}`)
+          .join(' ');
+        finalValue = `${attachmentRefs}\n\n${finalValue.trim()}`;
+      }
+
       // Clear the buffer *before* calling onSubmit to prevent potential re-submission
       // if onSubmit triggers a re-render while the buffer still holds the old value.
       buffer.setText('');
       onSubmit(finalValue);
+
+      // Clear attachments after submit
+      setAttachments([]);
+      setIsAttachmentMode(false);
+      setSelectedAttachmentIndex(-1);
+
       resetCompletionState();
       resetReverseSearchCompletionState();
     },
@@ -295,6 +327,8 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       shellModeActive,
       shellHistory,
       resetReverseSearchCompletionState,
+      attachments,
+      config,
       pendingPastes,
     ],
   );
@@ -336,52 +370,45 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
   ]);
 
   // Handle clipboard image pasting with Ctrl+V
-  const handleClipboardImage = useCallback(async () => {
+  const handleClipboardImage = useCallback(async (validated = false) => {
     try {
-      if (await clipboardHasImage()) {
-        const imagePath = await saveClipboardImage(config.getTargetDir());
+      const hasImage = validated || (await clipboardHasImage());
+      if (hasImage) {
+        const imagePath = await saveClipboardImage(Storage.getGlobalTempDir());
         if (imagePath) {
           // Clean up old images
-          cleanupOldClipboardImages(config.getTargetDir()).catch(() => {
+          cleanupOldClipboardImages(Storage.getGlobalTempDir()).catch(() => {
             // Ignore cleanup errors
           });
 
-          // Get relative path from current directory
-          const relativePath = path.relative(config.getTargetDir(), imagePath);
-
-          // Insert @path reference at cursor position
-          const insertText = `@${relativePath}`;
-          const currentText = buffer.text;
-          const [row, col] = buffer.cursor;
-
-          // Calculate offset from row/col
-          let offset = 0;
-          for (let i = 0; i < row; i++) {
-            offset += buffer.lines[i].length + 1; // +1 for newline
-          }
-          offset += col;
-
-          // Add spaces around the path if needed
-          let textToInsert = insertText;
-          const charBefore = offset > 0 ? currentText[offset - 1] : '';
-          const charAfter =
-            offset < currentText.length ? currentText[offset] : '';
-
-          if (charBefore && charBefore !== ' ' && charBefore !== '\n') {
-            textToInsert = ' ' + textToInsert;
-          }
-          if (!charAfter || (charAfter !== ' ' && charAfter !== '\n')) {
-            textToInsert = textToInsert + ' ';
-          }
-
-          // Insert at cursor position
-          buffer.replaceRangeByOffset(offset, offset, textToInsert);
+          // Add as attachment instead of inserting @reference into text
+          const filename = path.basename(imagePath);
+          const newAttachment: Attachment = {
+            id: String(Date.now()),
+            path: imagePath,
+            filename,
+          };
+          setAttachments((prev) => [...prev, newAttachment]);
         }
       }
     } catch (error) {
       debugLogger.error('Error handling clipboard image:', error);
     }
-  }, [buffer, config]);
+  }, []);
+
+  // Handle deletion of an attachment from the list
+  const handleAttachmentDelete = useCallback((index: number) => {
+    setAttachments((prev) => {
+      const newList = prev.filter((_, i) => i !== index);
+      if (newList.length === 0) {
+        setIsAttachmentMode(false);
+        setSelectedAttachmentIndex(-1);
+      } else {
+        setSelectedAttachmentIndex(Math.min(index, newList.length - 1));
+      }
+      return newList;
+    });
+  }, []);
 
   const handleInput = useCallback(
     (key: Key) => {
@@ -412,7 +439,11 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
         const pasted = key.sequence.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
         const charCount = [...pasted].length; // Proper Unicode char count
         const lineCount = pasted.split('\n').length;
-        if (
+
+        // Ensure we never accidentally interpret paste as regular input.
+        if (key.pasteImage) {
+          handleClipboardImage(true);
+        } else if (
           charCount > LARGE_PASTE_CHAR_THRESHOLD ||
           lineCount > LARGE_PASTE_LINE_THRESHOLD
         ) {
@@ -666,6 +697,55 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
         }
       }
 
+      // Attachment mode handling - process before history navigation
+      if (isAttachmentMode && attachments.length > 0) {
+        if (key.name === 'left') {
+          setSelectedAttachmentIndex((i) => Math.max(0, i - 1));
+          return;
+        }
+        if (key.name === 'right') {
+          setSelectedAttachmentIndex((i) =>
+            Math.min(attachments.length - 1, i + 1),
+          );
+          return;
+        }
+        if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
+          // Exit attachment mode and return to input
+          setIsAttachmentMode(false);
+          setSelectedAttachmentIndex(-1);
+          return;
+        }
+        if (key.name === 'backspace' || key.name === 'delete') {
+          handleAttachmentDelete(selectedAttachmentIndex);
+          return;
+        }
+        if (key.name === 'return' || key.name === 'escape') {
+          setIsAttachmentMode(false);
+          setSelectedAttachmentIndex(-1);
+          return;
+        }
+        // For other keys, exit attachment mode and let input handle them
+        setIsAttachmentMode(false);
+        setSelectedAttachmentIndex(-1);
+        // Continue to process the key in input
+      }
+
+      // Enter attachment mode when pressing up at the first line with attachments
+      if (
+        !isAttachmentMode &&
+        attachments.length > 0 &&
+        !shellModeActive &&
+        !reverseSearchActive &&
+        !commandSearchActive &&
+        buffer.visualCursor[0] === 0 &&
+        buffer.visualScrollRow === 0 &&
+        keyMatchers[Command.NAVIGATION_UP](key)
+      ) {
+        setIsAttachmentMode(true);
+        setSelectedAttachmentIndex(attachments.length - 1);
+        return;
+      }
+
       if (!shellModeActive) {
         if (keyMatchers[Command.REVERSE_SEARCH](key)) {
           setCommandSearchActive(true);
@@ -864,6 +944,10 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       onToggleShortcuts,
       showShortcuts,
       uiState,
+      isAttachmentMode,
+      attachments,
+      selectedAttachmentIndex,
+      handleAttachmentDelete,
       uiActions,
       pasteWorkaround,
       nextLargePastePlaceholder,
@@ -921,6 +1005,23 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
 
   return (
     <>
+      {attachments.length > 0 && (
+        <Box marginLeft={2} marginBottom={0}>
+          <Text color={theme.text.secondary}>{t('Attachments: ')}</Text>
+          {attachments.map((att, idx) => (
+            <Text
+              key={att.id}
+              color={
+                isAttachmentMode && idx === selectedAttachmentIndex
+                  ? theme.status.success
+                  : theme.text.secondary
+              }
+            >
+              [{att.filename}]{idx < attachments.length - 1 ? ' ' : ''}
+            </Text>
+          ))}
+        </Box>
+      )}
       <Box
         borderStyle="single"
         borderTop={true}
@@ -1077,6 +1178,16 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
           />
         </Box>
       )}
+      {/* Attachment hints - show when there are attachments and no suggestions visible */}
+      {attachments.length > 0 && !shouldShowSuggestions && (
+        <Box marginLeft={2} marginRight={2}>
+          <Text color={theme.text.secondary}>
+            {isAttachmentMode
+              ? t('← → select, Delete to remove, ↓ to exit')
+              : t('↑ to manage attachments')}
+          </Text>
+        </Box>
+      )}
     </>
   );
 };

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

@@ -18,7 +18,10 @@ interface Shortcut {
 // Platform-specific key mappings
 const getNewlineKey = () =>
   process.platform === 'win32' ? 'ctrl+enter' : 'ctrl+j';
-const getPasteKey = () => (process.platform === 'darwin' ? 'cmd+v' : 'ctrl+v');
+const getPasteKey = () => {
+  if (process.platform === 'win32') return 'alt+v';
+  return process.platform === 'darwin' ? 'cmd+v' : 'ctrl+v';
+};
 const getExternalEditorKey = () =>
   process.platform === 'darwin' ? 'ctrl+x' : 'ctrl+x';
 

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Text, Box } from 'ink';
+import { theme } from '../../semantic-colors.js';
+
+interface RetryCountdownMessageProps {
+  text: string;
+}
+
+/**
+ * Displays a retry countdown message in a dimmed/secondary style
+ * to visually distinguish it from error messages.
+ */
+export const RetryCountdownMessage: React.FC<RetryCountdownMessageProps> = ({
+  text,
+}) => {
+  if (!text || text.trim() === '') {
+    return null;
+  }
+
+  const prefix = '↻ ';
+  const prefixWidth = prefix.length;
+
+  return (
+    <Box flexDirection="row">
+      <Box width={prefixWidth}>
+        <Text color={theme.text.secondary}>{prefix}</Text>
+      </Box>
+      <Box flexGrow={1}>
+        <Text wrap="wrap" color={theme.text.secondary}>
+          {text}
+        </Text>
+      </Box>
+    </Box>
+  );
+};