diff --git a/src/vs/workbench/contrib/imageCarousel/AGENTS.md b/src/vs/workbench/contrib/imageCarousel/AGENTS.md index 341aa871edc..3cc8db78035 100644 --- a/src/vs/workbench/contrib/imageCarousel/AGENTS.md +++ b/src/vs/workbench/contrib/imageCarousel/AGENTS.md @@ -1,6 +1,6 @@ # Image Carousel -A generic workbench editor for viewing collections of images in a carousel/slideshow UI. Opens as a modal editor pane with navigation arrows, a counter, and a thumbnail strip. +A generic workbench editor for viewing collections of images in a carousel/slideshow UI. Opens as a modal editor pane with navigation arrows, a caption, and a thumbnail strip. ## Architecture @@ -8,14 +8,14 @@ The image carousel is a self-contained workbench contribution that follows the * - **URI scheme**: `vscode-image-carousel` (registered in `Schemas` in `src/vs/base/common/network.ts`) — used for `EditorInput.resource` identity. - **Direct editor input**: Callers create `ImageCarouselEditorInput` with a collection and open it directly via `IEditorService.openEditor()`. -- **Image extraction**: `IImageCarouselService.extractImagesFromResponse()` extracts images from chat response tool invocations. The collection ID is derived from the chat response identity (`sessionResource + responseId`). +- **Image extraction**: `IImageCarouselService.extractImagesFromResponse()` extracts images from chat response tool invocations into a **sections-based** collection. All images from a single response are grouped into one section. The collection title is the user's chat request message. Each image caption is derived from the tool's `pastTenseMessage` (preferred) or `invocationMessage`. ## How to open the carousel ### From code (generic) ```ts -const collection: IImageCarouselCollection = { id, title, images: [...] }; +const collection: IImageCarouselCollection = { id, title, sections: [{ title: '', images: [...] }] }; const input = new ImageCarouselEditorInput(collection, startIndex); await editorService.openEditor(input, { pinned: true }, MODAL_GROUP); ``` @@ -37,6 +37,7 @@ Clicking an image attachment pill in chat (when `chat.imageCarousel.enabled` is ### DOM & rendering - **DOM construction**: Uses the `h()` helper from `vs/base/browser/dom` with `@name` references for declarative DOM — no imperative `document.createElement` calls. +- **Bottom bar**: Caption and thumbnail sections are wrapped in a `div.bottom-bar` flex column below the image area. - **Stable DOM skeleton**: Builds DOM once per `setInput()`, updates only changing parts to avoid flash on navigation. - **Blob URL lifecycle**: Main image URLs tracked in `_imageDisposables` (revoked on nav), thumbnails in `_contentDisposables` (revoked on `clearInput()`). - **Focus border suppressed**: The slideshow container uses `outline: none !important` on `:focus` / `:focus-visible` to override the workbench's global `[tabindex="0"]` focus styles.