Skip to content

feat(ui): redesign the comparison and TraceSift cards like the recording card - #70

Merged
lauridskern merged 1 commit into
mainfrom
cindara/redesign-trace-performance-widgets
Oct 29, 2026
Merged

lauridskern merged 1 commit into
mainfrom
cindara/redesign-trace-performance-widgets

Conversation

@lauridskern

Copy link
Copy Markdown
Collaborator

The comparison and TraceSift cards now use the recording card's layout: the charts or the open finding on the left, and a sidebar with an overview, a list to move through, and the actions.

The comparison card drops its range table and legend. Each chart's heading shows a figure per run (peak CPU, memory change, average FPS). A summary compares every measure across runs, for the whole runs or the selection, and says where a shorter run covers only part of a selection. The sidebar lists each run's sharp changes in words, using fixed per-second thresholds: CPU 10 points, memory 50 MiB, FPS 15. Choosing a change selects it in every run. Memory can switch between absolute values and change from each run's first reading. The runs list hides and shows runs.

TraceSift shows one finding at a time as a bar or treemap. A summary line and legend of fixed height keep the card from shifting when you move across the chart or open a part, and a Back button steps out of a part. A profile timeline and a ranked list move between findings, and returning from Explore lands on the finding that was explored. The project folder picker is gone: Investigate hands the finding to the chat as written, because the chat already works in the reader's project. Series colours match the recording card, and severity uses the host's status colours where it sends them.

In hosts with composer pills (Codex), Ask about a comparison and TraceSift's Investigate now attach their reference as a pill and send a one-line message, as recording actions already did. Before, they pasted the whole prompt or handoff into the chat. Hosts without pills still get the full text. One helper in host-bridge.ts now attaches the pill for recordings, comparisons and TraceSift.

Telemetry keeps its existing names. New are ui.comparison.change_selected, ui.comparison.memory_scale_changed, ui.tracesift.finding_selected, and the ui.comparison.context_attach and ui.tracesift.context_attach timings. The card no longer emits ui.tracesift.project_*. docs/telemetry.md records each change. No titles, IDs, ranges or prompt text are sent.

Tests cover sharp-change detection, the comparison summary, coverage notes, change list, memory scale, the TraceSift finding, legend, Back and list, returning from Explore, and the pill paths, including fallback without pills, attachment failure, duplicate clicks and timeouts. The UI, MCP app and shared suites passed 446 tests, and the core telemetry suite passed 32. The only visual snapshot nearby is the TraceSift tool's upload pane, which this change doesn't touch; I didn't refresh snapshots locally because Docker wasn't running.

Rebased onto #69, with this change's comments condensed to match. The server tools mobile_get_tracesift_project and mobile_pick_tracesift_project now have no caller in the card. Removing them can be a separate change.

…ing card

The comparison and TraceSift cards now share the recording card's layout:
charts or the open finding on the left, and a sidebar with the overview,
the list to move through, and the actions.

The comparison card drops its range table and legend. It shows a summary
of each measure per run for the whole runs or the selection, says where a
shorter run only covers part of a selection, and lists each run's sharp
changes in words: CPU moving 10 points, memory 50 MiB or FPS 15 between
readings. Choosing one selects it in every run. Memory can switch between
absolute values and change from each run's first reading.

TraceSift shows one finding at a time as a bar or treemap, with a fixed
summary line and legend so moving across the chart or opening a part never
shifts the card, and a Back button to step out of a part. A profile
timeline and a ranked list move between findings, and returning from
Explore lands on the finding that was explored. The project folder picker
is gone: Investigate hands the finding to the chat as written, because the
chat already works in the reader's project.

On hosts with composer pills, Ask about a comparison and TraceSift's
Investigate now attach their reference as a pill and send a one-line
message, as recording actions already did, instead of pasting the whole
prompt into the chat. Hosts without pills still get the full text.
@lauridskern

Copy link
Copy Markdown
Collaborator Author

Before and after screenshots, rendered from main and from this branch with the same recordings and profiles (light theme, 728 px wide).

Performance comparison

The range table becomes a per-measure summary, and each run's sharp changes are listed in the sidebar.

BeforeAfter
Comparison card before Comparison card after

TraceSift, CPU profile

Findings show one at a time, with a timeline and a list to move between them. The project picker is gone.

BeforeAfter
TraceSift CPU card before TraceSift CPU card after

TraceSift, React profile

React commits use the same layout, with the severity beside the duration.

BeforeAfter
TraceSift React card before TraceSift React card after

@lauridskern
lauridskern merged commit b365445 into main Oct 29, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant