Preview first record of a collection

[lmac-1]

Description

This PR adds a collection preview modal to project settings. Each collection row gets an eye icon button that opens a modal showing the first record as formatted JSON, so users can quickly check what's in a collection without downloading it.

Built on @midigofrank's initial implementation in 4528-frank-preview-collections, with changes on top.

Closes #4528

• Extracted shared CodeViewer component (read-only Monaco editor + copy button) from DataclipViewer
• Eye icon button on each collection row, opening a preview modal
• LiveView handler fetches first item, wraps in download format [{key, value, created, updated}]
• Frontend recursively parses JSON value strings for readable display — without this, values show as escaped strings ("{"amount":19.59...}")
• 140-char string truncation on display; copy button always gives full original data
• Non-JSON values fall back to plaintext
• key displayed first for readability
• Preview scoped to current project with flash error fallback
• Empty collection state
• Modal with title, subtitle linking to CLI docs, close button
• LiveView integration tests and React component tests

Validation steps

1. Click eye icon on a collection with JSON values → formatted, readable JSON
2. Empty collection → "This collection is empty."
3. Non-JSON value → displayed as plaintext
4. Copy button gives full original data, not truncated version
5. Modal closes and reopens correctly
6. DataclipViewer in step editor still works

Additional notes for the reviewer

1. @midigofrank mentioned displaying values as-is with no formatting — I found this quite hard to read in practice, especially when values contain JSON:

So I've added a step that parses JSON value strings and formats them for display. Values are capped at 1MB so performance should be fine, but would appreciate your opinion @midigofrank

2. Items within a collection can have completely different structures, so showing one arbitrary record only tells you so much. I think the natural next step is a collection inspector where users can search by key pattern and click to inspect. Could be a separate follow-up issue/epic/one-pager.

AI Usage

Please disclose whether you've used AI anywhere in this PR (it's cool, we just
want to know!):

• I have used Claude Code
• I have used another model
• I have not used AI

You can read more details in our
Responsible AI Policy

Pre-submission checklist

• I have performed an AI review of my code (we recommend using /review
  with Claude Code)
• I have implemented and tested all related authorization policies.
  (e.g., :owner, :admin, :editor, :viewer)
• I have updated the changelog.
• I have ticked a box in "AI usage" in this PR

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.62%. Comparing base (2f1a43e) to head (8b6a609).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4619   +/-   ##
=======================================
  Coverage   89.61%   89.62%           
=======================================
  Files         444      444           
  Lines       21505    21548   +43     
=======================================
+ Hits        19272    19312   +40     
- Misses       2233     2236    +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Security Review

⚠️ Automated security review did not complete.

Claude hit the max-turns limit or encountered an error before posting findings.
A manual review of S0 (project-scoped data access), S1 (authorization policies),
and S2 (audit trail coverage) is recommended for this PR.

See the workflow run for details.

[midigofrank]

This might need an update after #4613