feature: Enhance task logs with syntax highlighting and color-coded severity levels

[BeArchiTek]

Component

Frontend UI

Describe the Feature Request

Currently, task logs in the UI are displayed in plain black and white text in the table view. This makes it difficult to quickly scan logs for important information or identify specific data types like UUIDs and strings.

The current Logs component in infrahub/frontend/app/src/entities/tasks/ui/logs.tsx already has severity badges but could be extended to include syntax highlighting for the message content.

Describe the Use Case

Enhance the task logs display with:

1. Syntax highlighting for different data types:

   • UUIDs in a distinct color
   • Strings in another color
   • JSON/dictionary data with structured highlighting
   • Timestamps in a subtle, distinguishable format
     [...]

2. Optional collapsible JSON/dictionary data for better readability

3. Visual separation between log entries for improved scanning

Improved readability and scanability of logs

• Faster identification of errors and warnings
• Better visual hierarchy of information
• Consistency with local development experience, where logs are already color-coded
• Reduced cognitive load when debugging complex operations

Additional Information

When running generators locally, the logger already applies colors to different data types, making the logs much more readable. Bringing this experience to the UI would create consistency between local development and the web interface.