Handle clipboard image tokens

Author: prajwalr308

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

@@ -555,6 +555,57 @@ describe('InputPrompt', () => {
       unmount();
     });
 
+    it('should render clipboard images with a friendly label', async () => {
+      const clipboardToken = '@.gemini-clipboard/image-5.png';
+      props.buffer.text = clipboardToken;
+      props.buffer.lines = [clipboardToken];
+      props.buffer.viewportVisualLines = [clipboardToken];
+      props.buffer.allVisualLines = [clipboardToken];
+      props.buffer.visualToLogicalMap = [[0, 0]];
+      props.buffer.visualCursor = [0, clipboardToken.length];
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+        {
+          uiActions,
+        },
+      );
+
+      await waitFor(() => {
+        const frame = clean(stdout.lastFrame());
+        expect(frame).toContain('[image #5]');
+        expect(frame).not.toContain('.gemini-clipboard');
+      });
+
+      unmount();
+    });
+
+    it('should render clipboard images with backslash paths', async () => {
+      const clipboardToken = '@.gemini-clipboard\\image-7.png';
+      props.buffer.text = clipboardToken;
+      props.buffer.lines = [clipboardToken];
+      props.buffer.viewportVisualLines = [clipboardToken];
+      props.buffer.allVisualLines = [clipboardToken];
+      props.buffer.visualToLogicalMap = [[0, 0]];
+      props.buffer.visualCursor = [0, clipboardToken.length];
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+        {
+          uiActions,
+        },
+      );
+
+      await waitFor(() => {
+        const frame = clean(stdout.lastFrame());
+        expect(frame).toContain('[image #7]');
+        expect(frame).not.toContain('.gemini-clipboard');
+        expect(frame).not.toContain('\\image-7.png');
+      });
+
+      unmount();
+    });
+
     it('should handle errors during clipboard operations', async () => {
       const consoleErrorSpy = vi
         .spyOn(console, 'error')

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

@@ -101,6 +101,15 @@ export const calculatePromptWidths = (mainContentWidth: number) => {
   } as const;
 };
 
+const CLIPBOARD_IMAGE_TOKEN_REGEX =
+  /^@\.gemini-clipboard[\\/](?:clipboard|image)-(\d+)\.(?:png|jpe?g|gif|bmp|webp|tiff)$/i;
+
+const getClipboardImageLabel = (tokenText: string): string | null => {
+  const match = CLIPBOARD_IMAGE_TOKEN_REGEX.exec(tokenText);
+  if (!match) return null;
+  return `[image #${match[1]}]`;
+};
+
 export const InputPrompt: React.FC<InputPromptProps> = ({
   buffer,
   onSubmit,
@@ -1074,17 +1083,25 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
                 let charCount = 0;
                 segments.forEach((seg, segIdx) => {
                   const segLen = cpLen(seg.text);
-                  let display = seg.text;
+                  const clipboardLabel = getClipboardImageLabel(seg.text);
+                  let display = clipboardLabel ?? seg.text;
 
                   if (isOnCursorLine) {
                     const relativeVisualColForHighlight =
                       cursorVisualColAbsolute;
                     const segStart = charCount;
                     const segEnd = segStart + segLen;
-                    if (
+
+                    const cursorInSegment =
                       relativeVisualColForHighlight >= segStart &&
-                      relativeVisualColForHighlight < segEnd
-                    ) {
+                      relativeVisualColForHighlight < segEnd;
+
+                    if (clipboardLabel) {
+                      display =
+                        cursorInSegment && showCursor
+                          ? chalk.inverse(clipboardLabel)
+                          : clipboardLabel;
+                    } else if (cursorInSegment) {
                       const charToHighlight = cpSlice(
                         seg.text,
                         relativeVisualColForHighlight - segStart,

packages/cli/src/ui/utils/highlight.ts

@@ -11,7 +11,7 @@ export type HighlightToken = {
   type: 'default' | 'command' | 'file';
 };
 
-const HIGHLIGHT_REGEX = /(^\/[a-zA-Z0-9_-]+|@(?:\\ |[a-zA-Z0-9_./-])+)/g;
+const HIGHLIGHT_REGEX = /(^\/[a-zA-Z0-9_-]+|@(?:\\ |[a-zA-Z0-9_.\\\\/:-])+)/g;
 
 export function parseInputForHighlighting(
   text: string,