Inline image/video gallery cards: collapse to a compact header after render, with a drawer toggle and pagination

Summary

The inline image and video gallery cards that render under an assistant message look great — the card design itself is not the problem. The problem is that they stay fully expanded forever, so every message that cites workspace media permanently consumes a large amount of vertical space in the chat transcript.

Two changes are proposed:

1. Auto-collapse to a compact header a few seconds after the message renders, with a drawer-style toggle to reopen.
2. Paginate the gallery grid so users can page through all cited media instead of being hard-capped at the first 5 items.

Scope for this issue is image and video gallery cards only. Maps, charts, and generated image proposals are explicitly out of scope.

Current behavior

• application/single_app/static/js/chat/chat-inline-images.js
  • MAX_INLINE_IMAGE_ITEMS = 5 (line ~10)
  • createImageGalleryCard() (line ~607) builds .inline-image-gallery-card with a header (icon + title + summary), a badges area, a .inline-image-gallery-grid, and a footer.
  • The payload already carries total_count and rendered_count, and the header already renders a Showing 5 of 10 badge when totalCount > renderedCount. Extra items are simply dropped via .slice(0, MAX_INLINE_IMAGE_ITEMS).
• application/single_app/static/js/chat/chat-inline-videos.js — same structure with MAX_INLINE_VIDEO_ITEMS = 5 and createVideoGalleryCard() (line ~688).
• Both are rendered from application/single_app/static/js/chat/chat-messages.js (~line 6013) into the message's .inline-visualizations-container.
• Styles live in application/single_app/static/css/chats.css (.inline-image-gallery-card ~line 3244, .inline-video-gallery-card ~line 3454, plus dark-theme variants ~3692 / ~3730).

Result: a message citing media renders a tall card that never shrinks, and any media beyond the fifth item is unreachable.

Proposed behavior

Collapsed (compact) state

When collapsed, the card reduces to a single-row header that keeps the existing card styling but drops the grid and footer. It should show:

• The gallery icon (bi-images / bi-camera-video) and the gallery title.
• The media count (e.g. 10 images).
• A short provenance line such as "Image sources cited from workspace content" — replacing the full summary paragraph.
• A drawer/expand affordance (chevron) to reopen.

The collapsed row should be a single clickable/keyboard-activatable control, not a wall of text.

Auto-collapse timing

• On a newly rendered assistant message, the card renders expanded so the user sees the media, then auto-collapses after a short delay (~5s) with a smooth height/opacity transition.
• On conversation history load, cards should render already collapsed — no peek, no animation. chat-messages.js already has an isNewMessage flag at the render site to distinguish these.
• The auto-collapse timer should be cancelled if the user interacts with the card first (hover, expand/collapse click, opening the details modal, paging, or starting video playback). A card the user is actively using must not collapse out from under them.
• A card the user manually expanded stays expanded — it should not re-trigger the timer.

Expand/collapse animation

• Smooth shrink/grow transition on the card body.
• Must respect @media (prefers-reduced-motion: reduce) — chats.css already has a reduced-motion block (~line 1894) to follow.

Pagination

• Keep 5 items per page, but page through all cited media rather than discarding the remainder.
• This requires changing the item cap: buildImageGalleryResult() / normalizeImageGalleryResult() (and the video equivalents) currently truncate to MAX_*_ITEMS at build time. The full normalized set needs to survive into the payload, with 5 acting as a page size rather than a hard ceiling.
• Page controls belong in the card footer, alongside the existing "Inline images" / source action text.
• The existing Showing X of Y badge should reflect the current page (e.g. Showing 6–10 of 10).
• Consider a sane upper bound on total items retained per card to avoid unbounded payloads; call out whatever number is chosen.

Acceptance criteria

• Image and video gallery cards support an expanded and a collapsed state.
• Collapsed state shows icon, title, media count, and a short "cited from workspace content" line, plus an expand control.
• New assistant messages render expanded and auto-collapse after ~5s with an animated transition.
• Cards in loaded conversation history render collapsed with no animation.
• User interaction before the timer fires cancels auto-collapse.
• Expand/collapse works via mouse and keyboard, with correct aria-expanded / aria-controls wiring on the toggle.
• Animations are suppressed under prefers-reduced-motion: reduce.
• Gallery grid paginates at 5 items per page across all cited media; media beyond item 5 is reachable.
• Footer page controls and the Showing X of Y badge stay accurate as the user pages.
• Behavior is consistent between image and video cards, and video playback is stopped or not disrupted incorrectly when a card collapses.
• Light and dark themes both look correct in the collapsed state.
• Functional test added under functional_tests/ per repo convention.
• VERSION in application/single_app/config.py bumped, and release notes updated in docs/explanation/release_notes.md.

Open questions

• Should the collapsed/expanded state persist (per conversation, per user preference, or not at all)?
• Should the ~5s delay be hardcoded, or exposed as an admin or user setting?
• Should the collapsed row be the default for all messages once a conversation has more than N media cards, regardless of recency?

References

• application/single_app/static/js/chat/chat-inline-images.js
• application/single_app/static/js/chat/chat-inline-videos.js
• application/single_app/static/js/chat/chat-messages.js (~line 6013, inline gallery render site)
• application/single_app/static/css/chats.css (gallery card styles, reduced-motion block)
• Current version at time of filing: 0.260.028

Note: per repo policy, any implementation must keep all browser JavaScript served from local SimpleChat static assets — no CDN scripts or dynamic imports for the animation or pagination work.

Start with the image and video gallery builders in application/single_app/static/js/chat/chat-inline-images.js and chat-inline-videos.js, then trace rendering in chat-messages.js and styles in chats.css. Review the existing functional_tests/ convention and resolve the open questions before implementing. Done means both card types meet the acceptance criteria, including pagination, accessibility, reduced motion, themes, tests, the VERSION bump, and release notes.