trace view ui improvements

[skull8888888]

Note

Swap CodeHighlighter for ContentRenderer app-wide, overhaul Trace View layout/controls, and add rich “messages” rendering with search, images, and fullscreen.

• UI Infrastructure
  • Replace CodeHighlighter with ContentRenderer across app (dataset, playground, queue, sql, traces, etc.).
  • Move theming/utilities to ui/content-renderer/utils (keeps alias export for back-compat).
  • Add modes: TEXT, YAML, JSON, CUSTOM, MESSAGES; base64 image rendering; search highlighting; line-numbers toggle; fullscreen sheet.
• Trace View
  • Refactor layout: split tree/details panes, draggable tree width, vertical resizable groups (tree/timeline/browser session), simpler paddings.
  • Add timeline zoom controls; integrate Session Player with shared Slider and speed control.
  • SpanContent auto-detects OpenAI/LangChain and renders via messages mode; attributes/events now use ContentRenderer.
  • Virtualized Messages list; simplified preset/resize keys; minor spacing/style tweaks in span controls and tabs.
• Playground / Queue / SQL / Datasets
  • Replace editors with ContentRenderer while maintaining validation and read-only behaviors (reasoning/output, tools, structured output, queue payload/target/schema, SQL JSON tab, dataset editors).
• Misc
  • Update JSON tooltip/theme imports; small UI polish (headers, borders, paddings).

^{Written by Cursor Bugbot for commit 92aa89e. This will update automatically on new commits. Configure here.}

---

Important

Replace CodeHighlighter with ContentRenderer for improved UI rendering and functionality across the app, including traces, session player, playground, and more.

• UI Core:
  • Replace CodeHighlighter with ContentRenderer for enhanced rendering capabilities, including mode switching (TEXT/JSON/YAML/CUSTOM/MESSAGES), base64 image rendering, search highlighting, and full-screen sheet.
  • Update imports in manage-event-definition-dialog.tsx, manage-evaluator-sheet.tsx, and schema-definition-dialog.tsx to use content-renderer/utils.
• Traces:
  • Use ContentRenderer in span view for OpenAI/LangChain/generic messages, attributes, and events.
  • Rework trace view layout with left pane (filters/timeline/tree) and right pane (selected span).
• Session Player:
  • Replace range input with Slider; add speed dropdown and UI tweaks.
• Playground / Queue / SQL / Datasets / Events:
  • Swap editors/viewers to ContentRenderer in playground panels, queue payload/target, SQL JSON tab, dataset editors, and event dialogs.
  • Preserve validation and editor state via presetKey.
• Refactors:
  • Remove createStorageKey helpers; inline simple keys.
  • Minor header/spacing changes in span controls/trace pages; keep JSON tooltips/theme via new utils.

^{This description was created by for 92aa89e. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 9d18c3b in 1 minute and 31 seconds. Click for details.

• Reviewed 1101 lines of code in 27 files
• Skipped 0 files when reviewing.
• Skipped posting 5 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. frontend/components/ui/template-renderer/manage-template-dialog.tsx:59

• Draft comment:
  Good use of react-hook-form and useWatch for retrieving the 'id' field. Consider memoizing values from 'watch' (e.g. for 'code' and 'testData') to avoid unnecessary re-renders.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

2. frontend/components/ui/template-renderer/manage-template-dialog.tsx:61

• Draft comment:
  In the submit callback, the API call is correctly constructed using PUT for updates and POST for creation. Ensure backend error messages are sanitized.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

3. frontend/components/ui/template-renderer/manage-template-dialog.tsx:90

• Draft comment:
  After a successful request, the form is reset with the returned result. Verify that reset doesn't override default values if optional fields like testData are missing.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

4. frontend/components/ui/template-renderer/manage-template-dialog.tsx:115

• Draft comment:
  Ensure that CodeMirror editors are configured with the correct language extensions and provide user feedback when JSON input is invalid.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

5. frontend/components/ui/template-renderer/manage-template-dialog.tsx:148

• Draft comment:
  The UI layout using Tabs to switch between test data and the JSX template is clear. Ensure accessibility and proper focus management when the dialog opens/closes.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_WgIZU5PwqO1Rwivi

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed 816f3fa in 1 minute and 41 seconds. Click for details.

• Reviewed 84 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. frontend/components/traces/session-player.tsx:25

• Draft comment:
  Ensure the new Slider import uses the correct relative path.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

2. frontend/components/traces/session-player.tsx:207

• Draft comment:
  handleTimelineChange now accepts a number instead of an event. Confirm the Slider's onValueChange callback supplies a numeric value.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

3. frontend/components/traces/session-player.tsx:299

• Draft comment:
  Remove the trailing comma after the max prop in the Slider component. JSX props should not include a trailing comma.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

4. frontend/components/traces/session-player.tsx:299

• Draft comment:
  Verify that the onValueChange callback always returns an array with a number as its first element. Consider adding type checks if necessary.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_RxK48Ip4PNkC6UDq

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed c1fedc1 in 1 minute and 12 seconds. Click for details.

• Reviewed 88 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 3 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. frontend/components/traces/span-view/span-content.tsx:107

• Draft comment:
  Switched defaultMode from 'json' to 'messages'. Ensure this change is intentional and that non-message data is handled correctly.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

2. frontend/components/ui/content-renderer/index.tsx:114

• Draft comment:
  New hover state logic is added. Confirm that the condition in handleMouseEnter (comparing currentTarget and relatedTarget) correctly handles nested elements without side effects.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

3. frontend/components/ui/content-renderer/index.tsx:230

• Draft comment:
  The conditional rendering of opacity using (isHovered || isSettingsOpen) improves clarity over group-hover classes. Verify that removing the 'group/code-highlighter' class does not impact other styling.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_8hTRoxwRzCGr262H

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed 25427fc in 3 minutes and 14 seconds. Click for details.

• Reviewed 943 lines of code in 13 files
• Skipped 0 files when reviewing.
• Skipped posting 5 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. frontend/components/ui/content-renderer/utils.ts:320

• Draft comment:
  The conditional check if (JSON.parse(processedText) === processedText) will almost always fail, since JSON.parse returns an object (or other type) that won’t equal the original string. Consider revising this logic to properly detect whether the JSON is already formatted.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

2. frontend/components/ui/content-renderer/utils.ts:140

• Draft comment:
  The default modes array has been changed to exclude 'MESSAGES'. Ensure that this change is intentional, as some components (like in span-content) pass an explicit modes prop including 'MESSAGES'.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% The comment violates the rule "Do NOT ask the PR author to confirm their intention, to explain, to double-check things, to ensure the behavior is intended". The phrase "Ensure that this change is intentional" is explicitly asking for confirmation. Additionally, the comment mentions other components that might use MESSAGES, but without seeing those components in this diff, this is cross-file speculation. The rules state "Ignore cross-file issues. Only think about the file you are reviewing." The comment doesn't point to a clear bug in the changed code itself - it's just asking the author to verify their change was intentional. However, if removing "MESSAGES" from the default modes array would actually break functionality in other parts of the codebase, this could be a legitimate concern. The comment might be trying to prevent a real bug where components rely on this default array. Even if there's a potential issue with other components, the comment explicitly states that those components "pass an explicit modes prop including MESSAGES", which means they wouldn't be affected by changes to this default array. If they pass explicit props, they're not using the default. This makes the comment even less useful. Additionally, the comment is asking for confirmation rather than pointing out a definite issue. This comment should be deleted because it asks the PR author to "ensure" the change is intentional (asking for confirmation), and it speculates about cross-file impacts without demonstrating a clear issue in the changed code itself. The comment even contradicts itself by noting that other components pass explicit props.

3. frontend/components/traces/span-view/messages.tsx:121

• Draft comment:
  The same ref (from virtualizer.measureElement) is passed to each item in the virtualized list. Confirm that this callback ref correctly handles multiple items; otherwise, consider using a callback ref that handles individual element measurement to avoid potential issues.
• Reason this comment was not posted:
  Comment was on unchanged code.

4. frontend/components/traces/span-view/generic-parts.tsx:59

• Draft comment:
  Preset key strings (e.g. using template literals like ${parentIndex}-text-${index}-${presetKey}) are repeated across components. Consider extracting a helper function for generating these keys to improve consistency and reduce duplication.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

5. frontend/components/ui/content-renderer/index.tsx:316

• Draft comment:
  The CodeMirror component uses onCreateEditor to call applySearch, which is also invoked via an effect. Verify that these two invocations don’t cause redundant or conflicting search operations in the editor.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_ygvH9jbZE6b7sM6w

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed 92aa89e in 2 minutes and 12 seconds. Click for details.

• Reviewed 131 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 6 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. frontend/components/traces/trace-view/human-evaluation-score.tsx:1

• Draft comment:
  Removed unused import 'Check' from lucide-react. Confirm this is intentional since the success icon is omitted in the new UI.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

2. frontend/components/traces/trace-view/human-evaluation-score.tsx:194

• Draft comment:
  Form container spacing has been reduced (from py-3 px-4 space-y-4 to py-2 px-2 space-y-2). Ensure this compact layout is aligned with the design spec.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to ensure that the compact layout is aligned with the design spec. This falls under asking the author to confirm their intention or ensure something, which is against the rules.

3. frontend/components/traces/trace-view/human-evaluation-score.tsx:252

• Draft comment:
  Button text has been changed from 'Save Score' to 'Save score' (and variant changed). Verify if the capitalization and style match the rest of the app.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to verify if the capitalization and style match the rest of the app. This falls under asking the author to double-check things, which is not allowed. The comment does not provide a specific suggestion or point out a clear issue.

4. frontend/components/traces/trace-view/human-evaluator-span-view.tsx:42

• Draft comment:
  In the memoized humanEvaluatorOptions, the catch block silently fails. Consider logging the error for debugging purposes if JSON.parse fails.
• Reason this comment was not posted:
  Comment was on unchanged code.

5. frontend/components/traces/trace-view/human-evaluator-span-view.tsx:70

• Draft comment:
  Tab label for span has been updated to 'Span Input' instead of 'Span'. Confirm that this naming change is in line with the overall UX guidelines.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to confirm if the naming change aligns with UX guidelines. This falls under asking the author to confirm their intention or ensure behavior, which is against the rules.

6. frontend/components/traces/trace-view/human-evaluator-span-view.tsx:83

• Draft comment:
  The component is now wrapped in a flex column container to manage height. Ensure this layout change doesn't affect content rendering in unexpected ways.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to ensure that the layout change doesn't affect content rendering in unexpected ways. This falls under the category of asking the author to double-check things, which is against the rules.

Workflow ID: wflow_vycs6z8NIDm2c8RR

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}