feat(agent-manager): add image support #5176

Drilmo · 2026-01-18T00:41:26Z

Summary

Add image support to Agent Manager, enabling multimodal interactions with agents.

Paste images from clipboard (Ctrl/Cmd+V) or select via file browser button
Works in new agent prompts, follow-up messages, and resumed sessions
Support for PNG, JPEG, WebP, and GIF formats (up to 20 images per message)
Click thumbnails to preview, hover to remove

Technical Details

New newTask stdin message type for initial prompts with images
Images saved to temp directory and sent to CLI as file paths
Temp files automatically cleaned up when extension deactivates
New reusable components: AddImageButton, ImageThumbnail, useImagePaste hook

Test Plan

Paste an image in new agent form → thumbnail appears
Click file browser button → can select images
Send message with image → agent receives it
Click thumbnail → image opens in preview
Hover thumbnail and click X → image removed
Resume completed session with image → works correctly
Paste 20+ images → limited to 20

- Paste images from clipboard (Ctrl/Cmd+V) or select via file browser - Works in new agent prompts, follow-up messages, and resumed sessions - Support for PNG, JPEG, WebP, and GIF formats (up to 20 images) - Click thumbnails to preview, hover to remove - New `newTask` stdin message type for initial prompts with images - Temp image files cleaned up when extension deactivates

changeset-bot · 2026-01-18T00:41:30Z

🦋 Changeset detected

Latest commit: 90f1515

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
kilo-code	Minor
@kilocode/cli	Minor
@kilocode/core-schemas	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Drilmo · 2026-01-18T00:44:03Z

@marius-kilocode Heads up: I wasn't able to fully test this feature because Claude Code (which I was using) no longer works with Kilocode. The implementation is complete but could use additional testing before merge.

- Add convertImagesToDataUrls() helper to useStdinJsonHandler.ts - Properly convert file paths received from Agent Manager to data URLs - Update --attach flag validation to work with --json-io mode - Add comprehensive tests for image conversion in stdin handler - Add image-handler.spec.ts for openImage function tests

- Extract CLI image conversion functions to cli/src/media/image-utils.ts - Extract extension temp image management to TempImageManager.ts - Add logging to cleanupTempImages error handling - Update outdated comment about CLI args in CliProcessHandler.ts - Fix TypeScript error in ExtensionMessageRow.tsx (FallbackProps type) - Add test-temp/ to cli/.gitignore

kiloconnect · 2026-01-19T10:57:43Z

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Overview

This PR adds comprehensive image support to the Agent Manager, enabling users to paste images from clipboard or select via file browser. The implementation is well-structured with:

Clean separation of concerns: Shared useImagePaste hook for both ChatInput and NewAgentForm
Proper error handling: ImageConversionResult interface properly handles both successful conversions and errors, with error notifications sent to the Agent Manager via outputJsonMessage
Good validation: --attach flag correctly requires --auto or --json-io
Consistent state management: Images stored in Jotai atoms with proper cleanup
Thorough test coverage: Tests properly mock dependencies and cover edge cases
Type safety: Proper TypeScript interfaces throughout (ImageConversionResult, StdinMessage, etc.)
UI constraints respected: MAX_IMAGES_PER_MESSAGE = 4 limits images to fit the input field UI

Files Reviewed (21 files)

.changeset/agent-manager-image-paste.md - Changeset for the feature
cli/.gitignore - Added test-temp directory
cli/src/__tests__/attach-flag.test.ts - Updated tests for --json-io support
cli/src/index.ts - Added --json-io validation for attachments, skip stdin reading in json-io mode
cli/src/media/__tests__/image-utils.test.ts - New tests for image utilities
cli/src/media/image-utils.ts - New utility for converting file paths to data URLs with ImageConversionResult interface
cli/src/state/hooks/__tests__/useStdinJsonHandler.test.ts - Updated tests for image support and newTask message type
cli/src/state/hooks/useStdinJsonHandler.ts - Added newTask message type with images, error notification for failed image loads
cli/src/validation/attachments.ts - Updated validation for --json-io flag
packages/core-schemas/src/agent-manager/types.ts - Added images field to start session schema
webview-ui/src/kilocode/agent-manager/components/AddImageButton.tsx - New component for file browser button
webview-ui/src/kilocode/agent-manager/components/ChatInput.tsx - Added image support with toolbar redesign
webview-ui/src/kilocode/agent-manager/components/ImageThumbnail.tsx - New component for image preview with remove button
webview-ui/src/kilocode/agent-manager/components/SessionDetail.tsx - Added image support to NewAgentForm
webview-ui/src/kilocode/agent-manager/hooks/useImagePaste.ts - New shared hook for clipboard paste and file selection
webview-ui/src/kilocode/agent-manager/state/atoms/messageQueue.ts - Added images to queue
webview-ui/src/kilocode/agent-manager/state/atoms/sessions.ts - Added image atoms and MAX_IMAGES_PER_MESSAGE constant
webview-ui/src/kilocode/agent-manager/state/hooks/useMessageQueueProcessor.ts - Pass images when sending
Various i18n files for translations

marius-kilocode · 2026-01-19T11:09:25Z

@Drilmo I had todo a couple of changes to get this work. For the record on this PR:

Images are not persisted for session recovery, and therefore not recoverable for now in this version
Max limit is 4, since the images don't fit otherwise into the UI
We share the underlaying mechanism of the existing --attach flag now

- Handle undefined, null, empty string, and non-string inputs - Show error message for invalid inputs instead of crashing - Fixes 4 failing tests in image-handler.spec.ts

- Update image-utils.test.ts to expect { images: [], errors: [] } format - Update useStdinJsonHandler.test.ts mock to return ImageConversionResult - All 2040 CLI tests now pass

Previously images were only sent to the first version (i === 0). Now all versions receive the same images for consistent behavior.

Drilmo · 2026-01-19T11:25:08Z

Thanks @marius-kilocode for taking the time to review and finalize this! Really appreciate you handling the adjustments.

The changes make sense:

Skipping image persistence for session recovery is a reasonable trade-off for now
Limit of 4 images is sensible for UI constraints
Reusing the --attach mechanism is cleaner than having separate logic

Let me know if there's anything else needed on my end!

Images are now displayed in a separate row above the action buttons, positioned at bottom-10 to avoid covering the text input area.

Dynamically adjust paddingBottom from 40px to 76px when images are selected to prevent image thumbnails from covering the text input.

Add key prop to DynamicTextArea that changes based on hasImages state, forcing React to remount the component and recalculate its size when images are added or removed.

Changed from badge-background (purple in light theme) to button-background and button-foreground for better visibility in both light and dark themes.

…locales - Translate 'addImage' and 'removeImage' keys to all 21 supported languages - Fix indentation issues in locale files (extra tab removed) - Languages: ar, ca, cs, de, es, fr, hi, id, it, ja, ko, nl, pl, pt-BR, ru, th, tr, uk, vi, zh-CN, zh-TW

fix: add missing i18n keys for image support

b3b7abb

kevinvandijk requested a review from marius-kilocode January 19, 2026 01:23

marius-kilocode added 2 commits January 19, 2026 11:34

marius-kilocode added 3 commits January 19, 2026 11:59

fix: reduce max images per message to 4 for UI fit

db765e2

Merge branch 'main' into feature/agent-manager-image-paste

3a2f2e9

docs: update changeset to reflect 4 image limit

d6c276c

fix: add input validation to openImage function

75fdbc2

- Handle undefined, null, empty string, and non-string inputs - Show error message for invalid inputs instead of crashing - Fixes 4 failing tests in image-handler.spec.ts

marius-kilocode approved these changes Jan 19, 2026

View reviewed changes

marius-kilocode added 2 commits January 19, 2026 12:22

fix: update test mocks for ImageConversionResult return type

fbdd20e

- Update image-utils.test.ts to expect { images: [], errors: [] } format - Update useStdinJsonHandler.test.ts mock to return ImageConversionResult - All 2040 CLI tests now pass

fix: send images to all versions in multi-version mode

cb4f464

Previously images were only sent to the first version (i === 0). Now all versions receive the same images for consistent behavior.

marius-kilocode added 4 commits January 19, 2026 12:31

fix: move image thumbnails above action buttons in NewAgentForm

bdb4bd1

Images are now displayed in a separate row above the action buttons, positioned at bottom-10 to avoid covering the text input area.

fix: increase textarea padding when images are present in NewAgentForm

6ec95e6

Dynamically adjust paddingBottom from 40px to 76px when images are selected to prevent image thumbnails from covering the text input.

fix: trigger textarea resize when images are added/removed

a01f552

Add key prop to DynamicTextArea that changes based on hasImages state, forcing React to remount the component and recalculate its size when images are added or removed.

fix: use button colors for image thumbnail close button

43daa93

Changed from badge-background (purple in light theme) to button-background and button-foreground for better visibility in both light and dark themes.

marius-kilocode force-pushed the feature/agent-manager-image-paste branch from 405adcf to 43daa93 Compare January 19, 2026 11:41

marius-kilocode enabled auto-merge (squash) January 19, 2026 11:42

marius-kilocode disabled auto-merge January 19, 2026 11:43

marius-kilocode force-pushed the feature/agent-manager-image-paste branch from 60d000b to c009b72 Compare January 19, 2026 11:57

Merge branch 'main' into feature/agent-manager-image-paste

90f1515

marius-kilocode enabled auto-merge (squash) January 19, 2026 11:58

marius-kilocode merged commit 6765832 into Kilo-Org:main Jan 19, 2026
12 checks passed

github-actions bot mentioned this pull request Jan 19, 2026

Changeset version bump #5172

Merged

This was referenced Jan 19, 2026

Changeset version bump sd416/kilocode#1

Open

Changeset version bump mcowger/kilocode#167

Open

Changeset version bump tqa24/kilocode#77

Open

Changeset version bump zimushui/kilocode#127

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(agent-manager): add image support #5176

feat(agent-manager): add image support #5176

Uh oh!

Drilmo commented Jan 18, 2026

Uh oh!

changeset-bot bot commented Jan 18, 2026 •

edited

Loading

Uh oh!

Drilmo commented Jan 18, 2026

Uh oh!

kiloconnect bot commented Jan 19, 2026 •

edited

Loading

Uh oh!

marius-kilocode commented Jan 19, 2026

Uh oh!

Drilmo commented Jan 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat(agent-manager): add image support #5176

feat(agent-manager): add image support #5176

Uh oh!

Conversation

Drilmo commented Jan 18, 2026

Summary

Technical Details

Test Plan

Uh oh!

changeset-bot bot commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Drilmo commented Jan 18, 2026

Uh oh!

kiloconnect bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Summary

Overview

Uh oh!

marius-kilocode commented Jan 19, 2026

Uh oh!

Drilmo commented Jan 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented Jan 18, 2026 •

edited

Loading

kiloconnect bot commented Jan 19, 2026 •

edited

Loading