Skip to content

feat: display prompt names as badges in report list view#258

Merged
devversion merged 2 commits intoangular:mainfrom
danymarques:feat/display-prompt-names-in-report-list
Mar 16, 2026
Merged

feat: display prompt names as badges in report list view#258
devversion merged 2 commits intoangular:mainfrom
danymarques:feat/display-prompt-names-in-report-list

Conversation

@danymarques
Copy link
Contributor

Add promptNames field to RunGroup interface and collect prompt names
during report grouping. Display them as neutral status badges in the
report list UI with backward compatibility for older groups.json files.

@if (group.promptNames.length) {
<ul class="status-badge-group prompt-names">
@for (name of group.promptNames; track name) {
<li class="status-badge neutral">{{ name }}</li>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couldn't this mean that 100+ prompts are shown as badges on the report? Not sure this is worth doing?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@devversion what do you think of the new version?

@danymarques danymarques force-pushed the feat/display-prompt-names-in-report-list branch from c036f46 to 0aa22d8 Compare February 25, 2026 10:56
Add promptNames field to RunGroup interface and collect prompt names
during report grouping. Display them as neutral status badges in the
report list UI with backward compatibility for older groups.json files.
@danymarques danymarques force-pushed the feat/display-prompt-names-in-report-list branch from 0aa22d8 to 643909b Compare February 25, 2026 10:59
Extract prompt name badges into a dedicated `PromptBadgeList` component
that automatically truncates overflow badges to a single row and shows a
"+N more" toggle. Uses ResizeObserver and afterNextRender to measure badge
layout after each render cycle and reacts to container width changes.

- Add `PromptBadgeList` component with overflow detection via DOM measurement
- Hide the container during measurement to avoid layout flicker
- Show "Show less" / "+N more" toggle badge when names overflow one row
- Move prompt-names styles from report-list.scss into the component
- Replace inline badge list in report-list.html with the new component
Copy link
Member

@devversion devversion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR. I'm not sure we strictly need this (as it's quite a bit of code), but it feels worth trying (especially given your effort) and if we run into maintenance issues / or issues, we can consider reverting/dropping

@devversion devversion merged commit 953a9ce into angular:main Mar 16, 2026
3 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.

2 participants