Preview Collection JSON

[brandonjackson]

Context

Follow-on from the Download button ticket. Even with Download available, large collections can't be downloaded in-browser (50 MB cap). Users still need a quick way to sanity-check what's in a collection without leaving the UI or writing a throwaway workflow.

Acceptance Criteria

• Button
  • Each collection row displays a preview icon button (eye icon) to the left of Download
  • Clicking it opens a modal showing the first record in the collection
• Modal
  • Modal uses an existing modal component
  • Title: "Collection Preview: {collection-name}"
  • Subtitle: "Showing first record. We recommend using the CLI to manage collections."
  • JSON Viewer
    • Use the existing JSON viewer component from the step editor (including copy button functionality)
    • Show only first record of collection
    • Truncated JSON should still contain the same wrapping array as the full data structure would have, eg [{ "key":"value" }], so that if users copy and paste and use in their editor for debugging it will work when they swap to full collection
    • Goal: it should work for all collections regardless of total size (we're only fetching one record)
    • All text string values in the displayed JSON are **truncated to 140 characters followed by an ellipsis to keep the modal performant for large items