Add image slideshow editor for chat tool responses

[Copilot]

Description

Implements a custom editor that displays images from MCP tool results in a slideshow view with navigation controls.

Implementation

• Service (ChatImageSlideshowService): Extracts IToolResultDataPart images from IChatToolInvocation results in chat responses
• Editor Input (ChatImageSlideshowEditorInput): Virtual chat-slideshow:// URI scheme, non-persistent
• Editor Pane (ChatImageSlideshowEditor): DOM-based UI with prev/next buttons, thumbnail strip, image counter
• Command: workbench.action.chat.openImagesInSlideshow - opens slideshow from last focused chat widget's final response

Architecture

// Service extracts images from tool invocations
interface ISlideshowImage {
  id: string;
  name: string;
  mimeType: string;
  data: VSBuffer;
  source?: string;
}

// Editor renders collection with blob URLs
class ChatImageSlideshowEditor extends EditorPane {
  private renderSlideshow(): void {
    // Creates <img> elements from VSBuffer data
    const blob = new Blob([image.data.buffer], { type: image.mimeType });
    const url = URL.createObjectURL(blob);
  }
}

Files Added

• src/vs/workbench/contrib/chatImageSlideshow/browser/ - 6 TypeScript files + CSS
• Registered in workbench.common.main.ts

Future Work

• Keyboard shortcuts (arrow navigation)
• Zoom/pan controls
• Context menu integration on chat responses
• Fullscreen mode

Original prompt

Start implementation

The user has attached the following file paths as relevant context:

• .github/instructions/learnings.instructions.md
• .github/copilot-instructions.md
• AGENTS.md

[Chronological Review: The conversation began with the user inquiring about how to display images returned by mcp tools in a chat response. The user then expressed interest in leveraging the image editor in VS Code to create a custom editor for displaying multiple images in a slide view. Following this, the user requested a detailed plan for the implementation and subsequently initiated the implementation phase.]

[Intent Mapping:

1. "I found that when I use mcp tools in a chat, if the tool returns images, it presents a tiny pill in the tool call response, how is that done?" - User seeks to understand the implementation of image display in chat responses.
2. "In VS code we have image editor supporting... I want to have a right click context menu or just a command which I can use in command palette to just show all the images in such slide view in a custom editor." - User aims to create a custom image editor in VS Code for displaying images from chat responses.
3. "generate a detailed plan for me" - User requests a structured plan for the implementation of the custom editor.
4. "Start implementation" - User indicates readiness to begin coding the custom editor.]

[Technical Inventory:

• Technologies: VS Code, MCP tools
• Concepts: Custom editor, image display, context menu, command palette
• Frameworks: VS Code API for editor and UI components]

[Code Archaeology:

• Current file: /Users/penlv/Code/Work/vscode/src/vs/workbench/contrib/codeEditor/browser/dictation/editorDictation.ts
• No specific code changes were documented yet, as the user was in the planning and initiation phase.]

[Progress Assessment:

• Completed: User has articulated the need for a custom image editor and requested a detailed plan.
• Pending: The detailed plan for implementation and the actual coding of the custom editor.]

[Context Validation: All necessary context for continuing the work on the custom image editor is captured, including user goals and the current file being worked on.]

[Recent Commands Analysis:

• Last Agent Commands: User requested to "generate a detailed plan for me" and then "Start implementation."
• Tool Results Summary: No specific tool results were returned as the conversation focused on planning and initiating implementation.
• Pre-Summary State: The agent was preparing to assist the user in starting the implementation of the custom image editor when the token budget was exceeded.
• Operation Context: The commands executed were directly related to the user's goal of creating a custom image editor in VS Code.]

1. Conversation Overview: - Primary Objectives: - "how do I make leverage of the image editor or maybe build a custom editor for supporting images." - "generate a detailed plan for me." - "Start implementation." - Session Context: The user is focused on developing a custom image editor in VS Code to display images from chat responses in a slide view format. - User Intent Evolution: The user transitioned from seeking information about existing functionalities to actively planning and initiating the implementation of a new feature.

2. Technical Foundation:

• VS Code: The user is working within the VS Code environment to create a custom image editor.
• MCP tools: The user is interested in how these tools handle image responses in chat.

3. Codebase Status:

• File Name: editorDictation.ts
• Purpose: This file is part of the VS Code code editor functionality, likely related to dictation features.
• Current State: No modifications have been made yet as the user is in the planning phase.
• Key Code Segments: Not applicable yet as no specific code changes have been discussed.
• Dependencies: This file may interact with other components of the VS Code editor.

4. Problem Resolution:

• Issues Encountered: None documented yet; the user is in the planning stage.
• Solutions Implemented: None yet; the user is preparing to implement the custom editor.
• Debugging Context: Not applicable at this stage.
• Lessons Learned: User has clarified their goals and requirements for the custom editor.

5. Progress Tracking:

• Completed Tasks: User has articulated their goals and requested a plan.
• Partially Complete Work: The detailed plan is pending, and implementation has just begun.
• Validated Outcomes: None yet, as the implementation phase has just started.

6. Active Work State:

• Current Focus: The user is preparing to implement a custom image editor in VS Code.
• Recent Context: The user has requested a detailed plan and indicated readiness to start coding.
• Working Code: No specific code snippets have been discussed yet.
• Immediate Context: The user was ready to start the implementation of the custom image editor.

7. Recent Operations:

• Last Agent Commands: "generate a detailed plan...

Created from VS Code.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.