[danipen]

What does this pull request do?

Pictures in What's New stay a comfortable size next to the text and show larger on a click; the release-notes skill now says how to take a picture or a GIF that reads well there, and when to leave it out.

Release note

Improved: Pictures in What's New fit the note, and a click shows them larger

Pictures in What's New now stay a comfortable size next to the text. Click one to see it larger over the dialog; click again or press Esc to go back, or open it in your browser.

Current behavior

A picture in What's New took the note's full width at any height (a tall screenshot pushed the notes after it away), and a click opened it in the browser. The skill said nothing about how to take a picture, so notes carried whole-window screenshots too small to read.

Behavior with this pull request

• A picture stands as wide as the note and at most 360 pixels tall, never larger than it is.
• A click shows it larger over What's New, as large as the window allows: a click anywhere, Esc or Close returns, and focus starts on Close; "Open in Browser" is there too. A picture already shown at its own size isn't clickable, and its name is just its description; that follows the window as it resizes.
• The release-notes skill has a "Pictures and GIFs" section: a picture only when it adds to the note; cropped to what the note is about (the popup, the zone of a panel) with just enough around it to place it; wider than tall; sandbox content in the light theme; playwright-cli screenshot <ref> for an element crop; alt text that says what it shows. A short looping GIF (3 to 8 s, about 12 fps, a few MB) when the note delivers a movement, with the ffmpeg command that turns a playwright-cli recording into one, cropped; never a video file, which What's New can't show.

How it was implemented

• pictureEnlarges(naturalWidth, shownWidth), pictureLabel, pictureTitle (components/inlinePictureView.ts, tested): when a click enlarges, and what the picture is called.
• usePictureEnlarges: measures the picture again with a ResizeObserver while it is shown, so a narrower window that shrinks the dialog makes a whole picture clickable.
• InlinePicture is a button (disabled when it can't enlarge) capped at 360 px tall in CSS; PictureViewer (components/) is a Radix dialog opened with openDialog, stacked over What's New (its backdrop a layer above the dialog's content: 802/803), the picture fitted with object-fit: contain.
• Dropped: opening the picture in the browser on a click (it leaves the app for something it can show itself), and enlarging at a fixed scale (a contain fit uses whatever room the window has).

Behavior changes

A click on a picture in What's New no longer opens the browser directly; "Open in Browser" is in the larger view.

Checklist

• npm run typecheck and npm test pass (8,575). New tests: when a click enlarges (with a pixel of rounding), the picture's name with and without a description and whether it enlarges, the larger view's title.
• Seen working in a development build with UVCS_PREVIEW_UPDATE, both themes, a 600 px window and a narrow one: a square picture held at 360 px; a 120 px one at its own size, not clickable; a 300 px one becoming clickable when the window narrows and not when it widens again; the larger view over the dialog, dimming it; focus on Close; Esc, a click on the backdrop and on the picture each close only the larger view. (The app's window wasn't painting frames while hidden, which stops ResizeObserver and requestAnimationFrame; a screenshot forces a frame, which is how the resize was checked.)
• npm run e2e: not needed; no view, startup or cm command changes.
• Other areas: comments keep their picture chips (images stays chip there).
• Reviewed in a clean context. Fixed for it: the "can it enlarge" decision going stale on resize; labels chosen in components; focus starting on "Open in Browser"; the doc's wrap; the skill's example alt text; a note that a Retina capture is 2x. One commit (62b6c5e) holds the cap and the larger view together; history isn't rewritten.
• docs/ says what's now true: docs/features/updates.md "What's New".

Fixed issues

None.

🤖 Generated with Claude Code