feat: add CSV Logs Viewer utility with Datadog-inspired filtering

[devin-ai-integration]

CSV Logs Viewer Utility

Summary

Adds a new CSV Logs Viewer utility that allows users to quickly scan, filter, and search through CSV log files. The design is inspired by Datadog's logs dashboard UX.

Key features:

• File upload: Supports .csv, .tsv, .txt, and .log files with auto-detection of delimiters (tab, comma, semicolon)
• Search with highlighting: Yellow highlight on search matches, same as HAR file viewer
• Log level color coding: Subtle background colors for error (red), warning (yellow), info (blue), and debug (gray) rows with left border indicators
• Faceted filtering sidebar: Datadog-style collapsible facets showing unique values per column with counts
• Column header filters: Quick filter dropdowns in each column header
• Expandable rows: Click to expand and see full log entry details
• Full-width layout: Table uses full screen width for better log visibility
• Fixed column widths: Columns maintain consistent widths when filtering to prevent layout jumping
• Instant tooltips: Truncated cell content shows full value on hover with minimal delay (100ms)
• Dual marker columns for tracing: Click the "#" column to mark rows for tracing two separate flows:
  • Flow A (blue): Normal click - sequential numbering (1, 2, 3...)
  • Flow B (green): Cmd/Ctrl+click - independent sequential numbering starting from 1
  • Marked rows stay visible even when filtered out (shown with reduced opacity)
  • Responsive stack numbering: Removing a marker causes subsequent markers to renumber (e.g., removing feat: base64 encoder/decoder #2 shifts feat: CSV to JSON #3, feat: create YAML to JSON page #4 to become feat: base64 encoder/decoder #2, feat: CSV to JSON #3)

Review & Testing Checklist for Human

• Verify responsive stack renumbering works correctly - mark rows 1, 2, 3, 4 then remove feat: base64 encoder/decoder #2; remaining markers should renumber to 1, 2, 3 (not 1, 3, 4)
• Verify dual marker flows work correctly - normal click should create blue "Flow A" markers; Cmd/Ctrl+click should create green "Flow B" markers with independent numbering
• Verify each flow renumbers independently - removing a marker from Flow A should not affect Flow B numbering
• Verify marked rows persist through filtering - mark some rows, then apply a filter that would hide them; marked rows should remain visible (with slight opacity reduction)
• Verify log level detection accuracy - the regex patterns (e.g., \b5\d{2}\b for errors) could match unintended content like years, port numbers, or other 3-digit numbers

Recommended test plan:

1. Upload the sample CSV from the request
2. Click the "#" column on rows to mark them as Flow A: 1, 2, 3, 4
3. Remove marker feat: base64 encoder/decoder #2 by clicking it again - verify remaining markers show 1, 2, 3 (not 1, 3, 4)
4. Hold Cmd/Ctrl and click other rows to mark them as Flow B - verify independent numbering
5. Remove a Flow B marker and verify Flow B renumbers while Flow A stays unchanged
6. Apply a filter that would hide some marked rows - verify they remain visible but slightly faded
7. Upload a new file and verify all markers are cleared

Notes

• Clicking a row that's already marked with the same modifier removes the marker; clicking with a different modifier switches the flow
• No unit tests were added for the utility functions - may want to add tests for parseCSV, detectLogLevel, filterRows, computeDisplayNumbers, and marker logic
• No SEO component was created (unlike other utilities) - can be added in a follow-up if needed

Updates since last revision

• Marker numbers now act as a responsive stack - removing a marker causes all subsequent markers in that flow to renumber automatically
• Implementation uses insertion order tracking with dynamic display number computation via computeDisplayNumbers

Link to Devin run: https://app.devin.ai/sessions/e9318770b38e48e58e01d1492898295e
Requested by: @peckz

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[cloudflare-workers-and-pages]

Deploying jam-dev-utilities with    Cloudflare Pages

Latest commit:	789c9a6
Status:	✅  Deploy successful!
Preview URL:	https://566bc672.jam-dev-utilities.pages.dev
Branch Preview URL:	https://devin-1769275420-csv-logs-vi.jam-dev-utilities.pages.dev

View logs