feat: paste images in cn #7503

sestinj · 2025-09-01T01:00:18Z

Description

Image pasting support in cn via ctrl+V

Summary by cubic

Add image pasting to the CLI chat via Ctrl+V. Pasted images appear as [Image #n] in the input, are sent as inline data URLs, and display as placeholders in history.

New Features
- Ctrl+V detects clipboard images (macOS, Windows, Linux) and inserts [Image #n] placeholders.
- TextBuffer tracks image buffers; images are passed on submit and cleared afterward.
- Message formatting builds MessagePart[] with text and imageUrl entries; 10MB cap with clear skip message.
- Optional Sharp processing resizes to 1024x1024 and converts to JPEG for smaller payloads; falls back if unavailable.
- Display shows images as [Image #n] in MemoizedMessage for readable history.
- Remote mode sends a string with [Image] markers to the server.
- Tests added for image paste flow, message formatting, and display.
Dependencies
- Added optional @img/sharp-* platform packages; feature works without them but images won’t be resized/compressed.
- Linux requires xclip for clipboard image capture.

cubic-dev-ai

7 issues found across 11 files

_{React with 👍 or 👎 to teach cubic. You can also tag @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

cubic-dev-ai · 2025-09-01T01:16:19Z

extensions/cli/src/ui/hooks/useChat.ts

+            if (part.type === "text") {
+              return part.text;
+            } else if (part.type === "imageUrl") {
+              return "[Image]";


Images are reduced to “[Image]” and no binary or URL is transmitted in remote mode, so pasted images won’t be available to the remote server.

Prompt for AI agents

Address the following comment on extensions/cli/src/ui/hooks/useChat.ts at line 343: <comment>Images are reduced to “[Image]” and no binary or URL is transmitted in remote mode, so pasted images won’t be available to the remote server.</comment> <file context> @@ -308,20 +311,45 @@ export function useChat({ + if (part.type === "text") { + return part.text; + } else if (part.type === "imageUrl") { + return "[Image]"; + } + return ""; </file context>

cubic-dev-ai · 2025-09-01T01:16:19Z

extensions/cli/src/ui/hooks/useChat.ts

+      hasImages: !!(imageMap && imageMap.size > 0),
+      imageCount: imageMap?.size || 0,
+    });
+    const newUserMessage = await formatMessageWithFiles(


Images are processed (resize/base64) even in remote mode where only a text placeholder is sent; avoid this upfront work by skipping image processing in remote mode or moving formatting after the remote-mode branch.

Prompt for AI agents

Address the following comment on extensions/cli/src/ui/hooks/useChat.ts at line 319: <comment>Images are processed (resize/base64) even in remote mode where only a text placeholder is sent; avoid this upfront work by skipping image processing in remote mode or moving formatting after the remote-mode branch.</comment> <file context> @@ -308,20 +311,45 @@ export function useChat({ + hasImages: !!(imageMap && imageMap.size > 0), + imageCount: imageMap?.size || 0, + }); + const newUserMessage = await formatMessageWithFiles( message, attachedFiles, </file context>

cubic-dev-ai · 2025-09-01T01:16:19Z

extensions/cli/src/ui/components/MemoizedMessage.formatDisplay.test.tsx

+    );
+
+    const output = lastFrame();
+    expect(output).toContain("Start");


Assertion is too weak to verify whitespace preservation; assert the expected trailing/leading spaces to prevent regressions.

Prompt for AI agents

Address the following comment on extensions/cli/src/ui/components/MemoizedMessage.formatDisplay.test.tsx at line 129: <comment>Assertion is too weak to verify whitespace preservation; assert the expected trailing/leading spaces to prevent regressions.</comment> <file context> @@ -0,0 +1,144 @@ + ); + + const output = lastFrame(); + expect(output).toContain("Start"); + expect(output).toContain("end"); + expect(output).toContain('{"type":"unknown","data":{"some":"data"}}'); </file context>

cubic-dev-ai · 2025-09-01T01:16:20Z

extensions/cli/src/ui/hooks/useChat.helpers.ts

+  }
+
+  // WebP: RIFF + WEBP at offset 8
+  if (signature[0] === 0x52 && signature[1] === 0x49 && buffer.length >= 12) {


Tighten the RIFF signature check for WebP detection to validate all four bytes (RIFF) before checking for WEBP at offset 8.

Prompt for AI agents

Address the following comment on extensions/cli/src/ui/hooks/useChat.helpers.ts at line 110: <comment>Tighten the RIFF signature check for WebP detection to validate all four bytes (RIFF) before checking for WEBP at offset 8.</comment> <file context> @@ -19,6 +19,194 @@ import { shouldAutoCompact } from "../../util/tokenizer.js"; + } + + // WebP: RIFF + WEBP at offset 8 + if (signature[0] === 0x52 && signature[1] === 0x49 && buffer.length >= 12) { + const webpSig = buffer.subarray(8, 12); + if ( </file context>

Suggested change

if (signature[0] === 0x52 && signature[1] === 0x49 && buffer.length >= 12) {

if (signature[0] === 0x52 && signature[1] === 0x49 && signature[2] === 0x46 && signature[3] === 0x46 && buffer.length >= 12) {

cubic-dev-ai · 2025-09-01T01:16:20Z

extensions/cli/src/ui/TextBuffer.ts

+  addImage(imageBuffer: Buffer): string {
+    this._imageCounter++;
+    const placeholder = `[Image #${this._imageCounter}]`;
+    this._imageMap.set(placeholder, imageBuffer);


Stores raw image buffers without validating size/count, risking excessive memory usage; enforce reasonable limits before storing.

Prompt for AI agents

Address the following comment on extensions/cli/src/ui/TextBuffer.ts at line 200: <comment>Stores raw image buffers without validating size/count, risking excessive memory usage; enforce reasonable limits before storing.</comment> <file context> @@ -189,6 +193,26 @@ export class TextBuffer { + addImage(imageBuffer: Buffer): string { + this._imageCounter++; + const placeholder = `[Image #${this._imageCounter}]`; + this._imageMap.set(placeholder, imageBuffer); + this.insertText(placeholder); + return placeholder; </file context>

cubic-dev-ai · 2025-09-01T01:16:20Z

extensions/cli/src/ui/hooks/useUserInput.ts

+    } else if (platform === "win32") {
+      // Windows: Use PowerShell to save clipboard image
+      await execAsync(
+        `powershell -command "Get-Clipboard -Format Image | Set-Content -Path '${tempImagePath}' -Encoding Byte"`,


Windows image save uses Set-Content on an Image object, producing invalid output; use Image.Save(...) to write a real PNG instead.

Prompt for AI agents

Address the following comment on extensions/cli/src/ui/hooks/useUserInput.ts at line 86: <comment>Windows image save uses Set-Content on an Image object, producing invalid output; use Image.Save(...) to write a real PNG instead.</comment> <file context> @@ -10,6 +11,102 @@ interface ControlKeysOptions { + } else if (platform === "win32") { + // Windows: Use PowerShell to save clipboard image + await execAsync( + `powershell -command "Get-Clipboard -Format Image | Set-Content -Path '${tempImagePath}' -Encoding Byte"`, + ); + } else if (platform === "linux") { </file context>

Suggested change

`powershell -command "Get-Clipboard -Format Image | Set-Content -Path '${tempImagePath}' -Encoding Byte"`,

`powershell -command "$img=Get-Clipboard -Format Image; if ($img) { $img.Save('${tempImagePath.replace(/'/g, "''")}', [System.Drawing.Imaging.ImageFormat]::Png) }"`,

cubic-dev-ai · 2025-09-01T01:16:20Z

package.json

    "prettier-plugin-tailwindcss": "^0.6.8",
    "typescript": "^5.6.3"
+  },
+  "optionalDependencies": {


Adds multiple platform-specific sharp packages as root optionalDependencies, but no code imports or uses sharp; this adds install time/size and maintenance overhead. Prefer adding 'sharp' only in the specific package that needs it (which will pull the correct platform binaries) or defer until the code actually uses it.

Prompt for AI agents

Address the following comment on package.json at line 20: <comment>Adds multiple platform-specific sharp packages as root optionalDependencies, but no code imports or uses sharp; this adds install time/size and maintenance overhead. Prefer adding 'sharp' only in the specific package that needs it (which will pull the correct platform binaries) or defer until the code actually uses it.</comment> <file context> @@ -16,5 +16,13 @@ "prettier-plugin-tailwindcss": "^0.6.8", "typescript": "^5.6.3" + }, + "optionalDependencies": { + "@img/sharp-darwin-arm64": "^0.33.5", + "@img/sharp-darwin-x64": "^0.33.5", </file context>

sestinj · 2025-09-01T22:47:33Z

🎉 This PR is included in version 1.12.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

sestinj · 2025-09-03T22:55:10Z

🎉 This PR is included in version 1.12.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

sestinj added 5 commits August 31, 2025 17:34

feat: image inputs

c5cacde

feat: detect image media type in anthropic openai adapter

986d633

feat: use sharp to convert all images to downsized jpeg

d999b44

fix image bugs

907a399

chore: format

357dc2c

sestinj requested a review from a team as a code owner September 1, 2025 01:00

sestinj requested review from RomneyDa and removed request for a team September 1, 2025 01:00

github-project-automation bot moved this to Todo in Issues and PRs Sep 1, 2025

github-project-automation bot added this to Issues and PRs Sep 1, 2025

dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Sep 1, 2025

chore: refactor to fix file too long

363aafd

dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. and removed size:XL This PR changes 500-999 lines, ignoring generated files. labels Sep 1, 2025

sestinj added 2 commits August 31, 2025 18:06

Merge branch 'main' into paste-images

733faa4

fix long func

13876a2

cubic-dev-ai bot reviewed Sep 1, 2025

View reviewed changes

sestinj added 3 commits August 31, 2025 18:29

fix failing tests

39dde5a

fix: address feedback

c87032b

fix: install sharp in right place

1a7ab26

sestinj merged commit 608e93a into main Sep 1, 2025
55 checks passed

sestinj deleted the paste-images branch September 1, 2025 18:14

github-project-automation bot moved this from Todo to Done in Issues and PRs Sep 1, 2025

github-actions bot locked and limited conversation to collaborators Sep 1, 2025

github-actions bot added the tier 1 Big feature that took multiple weeks to launch and represents a big milestone for the product label Sep 1, 2025

sestinj added the released label Sep 1, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: paste images in cn #7503

feat: paste images in cn #7503

Uh oh!

sestinj commented Sep 1, 2025 •

edited by cubic-dev-ai bot

Loading

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Uh oh!

Uh oh!

sestinj commented Sep 1, 2025

Uh oh!

sestinj commented Sep 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	if (signature[0] === 0x52 && signature[1] === 0x49 && buffer.length >= 12) {
	if (signature[0] === 0x52 && signature[1] === 0x49 && signature[2] === 0x46 && signature[3] === 0x46 && buffer.length >= 12) {

	`powershell -command "Get-Clipboard -Format Image \| Set-Content -Path '${tempImagePath}' -Encoding Byte"`,
	`powershell -command "$img=Get-Clipboard -Format Image; if ($img) { $img.Save('${tempImagePath.replace(/'/g, "''")}', [System.Drawing.Imaging.ImageFormat]::Png) }"`,

feat: paste images in cn #7503

feat: paste images in cn #7503

Uh oh!

Conversation

sestinj commented Sep 1, 2025 • edited by cubic-dev-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Summary by cubic

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sestinj commented Sep 1, 2025

Uh oh!

sestinj commented Sep 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sestinj commented Sep 1, 2025 •

edited by cubic-dev-ai bot

Loading