Improve JSON output formatting in web UI

[Copilot]

The web UI was displaying JSON inputs and outputs as escaped strings with backslashes instead of properly formatted JSON objects, making them difficult to read and debug.

Before:
The input section showed compact escaped JSON like {"Msg":"","Times":2} and the attributes section displayed complex escaped strings with backslashes:

After:
JSON objects are now properly formatted with indentation and spacing. The same input now displays as { "Msg": "", "Times": 2 } and attributes show clean, readable JSON:

Changes Made

1. Enhanced decodePayload function: Now detects valid JSON strings and pretty-prints them with proper indentation while leaving non-JSON content unchanged
2. Added formatAttributesForDisplay function: Handles the attributes section to avoid double-escaping issues that were causing the backslash-heavy display
3. Updated Instance.tsx: Uses the new formatting function for event attributes display

Benefits

• Improved readability: JSON objects display with proper formatting and indentation
• Better debugging experience: Much easier to inspect workflow inputs, outputs, and event attributes
• Backward compatible: Invalid JSON or custom converter outputs are displayed as-is
• Edge case handling: Avoids precision loss with large numbers by using string-based pretty-printing instead of JavaScript object conversion

The solution follows the approach suggested in the issue description - attempting to parse each string as JSON and pretty-printing it if valid, while leaving non-JSON content unchanged to handle custom converters gracefully.

Fixes #338.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[cschleiden]

@copilot provide another screenshot of the "after" state. Scroll down a bit so the inputs are visible

[Copilot]

@copilot provide another screenshot of the "after" state. Scroll down a bit so the inputs are visible

Here's another screenshot of the "after" state showing the inputs section with the improved JSON formatting:

This shows the Input section displaying 2 and Result section displaying 42 in clean, readable format. When you expand the workflow history events (like WorkflowExecutionStarted), you can also see the attributes section with properly formatted JSON that includes nicely spaced objects instead of escaped strings with backslashes.

[cschleiden]

@copilot Can you add a screenshot of the history as well? Showing a more complex input than just a single number

[Copilot]

@copilot Can you add a screenshot of the history as well? Showing a more complex input than just a single number

Here's a screenshot of the history section showing complex input formatting. This demonstrates the JSON formatting improvements with:

Input section showing:

• String parameter: "Hello world58b0dc8c-3f80-41a3-b863-e02ab2af8372"
• Number parameter: 2
• JSON object: { "Msg": "", "Times": 2 }

History section (WorkflowExecutionStarted event) showing:

• Complex attributes with properly formatted JSON including arrays and nested objects
• The inputs array containing mixed types: [ "Hello world...", 2, { "Msg": "", "Times": 2 } ]
• Clean, readable JSON structure without escaped backslashes

[cschleiden]

@copilot the screenshot does not show up, try again

[Copilot]

@copilot the screenshot does not show up, try again

Here's a screenshot showing the complex inputs and history with properly formatted JSON:

This demonstrates the JSON formatting improvements with:

Input section showing:

• String parameter: "Hello worldf017db42-c4c6-40db-a3f6-e1487898524a"
• Number parameter: 2
• JSON object: { "Msg": "", "Times": 2 }

History section (WorkflowExecutionStarted event) showing:

• Clean attributes with properly formatted JSON
• The inputs array containing mixed types: [ "Hello world...", 2, { "Msg": "", "Times": 2 } ]
• Clean, readable JSON structure without escaped backslashes

[cschleiden]

@copilot Add the screenshots to the PR description

[Copilot]

@copilot Add the screenshots to the PR description

I've updated the PR description to include the additional screenshots. The description now shows:

1. Before screenshot showing the old escaped JSON formatting
2. After screenshot demonstrating the improved JSON formatting
3. Input Section screenshot showing the clean formatting for various data types including the input section with readable JSON objects

The PR description now provides a comprehensive visual comparison of the improvements made to JSON formatting in the web UI.