FEAT: Load Scores Per Message in GUI

[jbolor21]

Description

Adds score visibility to the conversation UI and visibility into the objective for loaded attacks.

• Loads scores with their originating message pieces.
• Displays text and media scores next to the content they evaluate.
• Marks and prioritizes the attack’s objective score.
• Supports multiple scores with compact tabs and a More menu.
• Shows scorer, score type, objective status, category, rationale, and source piece in the details panel.
• Adds accessible names, tooltips, and mobile-sized touch targets.
• Displays the attack objective in a collapsible conversation header.

UI behavior

• A single score appears as a compact score chip.
• Multiple scores use a stacked-score trigger.
• Up to three score-value tabs are visible without horizontal scrolling.
• Additional scores are available from the More menu.
• Scorer and objective metadata remain available in the selected details panel, tooltip, and accessible name.

Screenshots:

Single Score & Single Piece Response:

Sample Score Details Card (when you press on score value)

multiple scores on single piece:
(stacked scores indicate multiple scores)

tabs revealing details on multiple scores:

Overflow (more than 3 scores)

multiple pieces:

Tests and Documentation

All existing tests pass and new tests added/updated:

• Backend score serialization and response-contract tests.
• Backend message mapper tests using persisted score data.
• Attack-service tests for objective-score propagation and manual-attack objective handling.
• Frontend message-mapping tests for text and media score provenance.
• Score rendering, selection, overflow-menu, tooltip, and accessibility tests.
• Objective-header rendering, overflow, and expansion tests.
• Mobile E2E touch-target coverage for score tabs, menus, and the objective header.

[Roman Lutz (romanlutz)]

Can you attach screenshots or videos?

Other comments AI generated but they apply nontheless :-)

[Roman Lutz (romanlutz)]

What does this look like with multiple scores?

Also the spacing is not right. This doesn't look very good with "Score" and no space between.

[Roman Lutz (romanlutz)]

I think would be preferable if the score was at the bottom of a piece rather than vertically centered.

I also think the multiple score experience is a bit confusing.

I had to look back and forth a few times to realize the 0.91 was the same as the one presented to the left and not a separate score.

Wild idea: Would it be hard to show them visually stacked (can be static with 3 maybe, doesn't need to adjust the number of levels to the number of scores)

and if you click on it it shows the same score details card as it shows for the first score right now, but the card has a pivot/tablist item at the top to switch between the various scores? [In theory, that could also overflow but there's a "with overflow" option if you check the doc link below
https://storybooks.fluentui.dev/react/?path=/docs/components-tablist--docs&globals=storybook_fluentui-react-addon_dir:rtl ]

[Roman Lutz (romanlutz)]

These are GHCP generated and at least worth a look. Making another manual pass as well

[Roman Lutz (romanlutz)]

I exercised the score UI across single/multiple pieces, single/multiple scores, and wide/narrow viewports. Two visual issues remain:

1. The score tab list should not scroll horizontally. In the wide single-piece/multi-score case, each tab includes the value, scorer name, and Objective label, which forces a scrollbar. Please show only the score value in each visible tab, move scorer/objective metadata into the selected score details panel, and retain that context in a tooltip/accessible name. Cap the visible tabs at three and use the existing More menu for additional scores; the tab list itself should never scroll.

2. The stacked-score layers need uniform geometry. The back and middle layers currently use fixed asymmetric insets while the front chip is content-sized, so short values such as 0.91 produce uneven spacing. Please size every layer from the same chip box and use consistent diagonal offsets, for example (0,0), (3,3), and (6,6), so the spacing remains even for both short and long values.

Full screenshot matrix (1440 x 900 and 390 x 844)

Scenario	Wide	Narrow
Single piece, single score
Single piece, multiple scores
Multiple pieces, single score
Multiple pieces, multiple scores

[jbolor21]

Roman Lutz (@romanlutz) implemented your suggestions but I don't love this tab spacing/look:

[jbolor21]

Roman Lutz (Roman Lutz (@romanlutz)) implemented your suggestions but I don't love this tab spacing/look:

okay here's a better version I'm happier with but lmk if that is ok with you

[Roman Lutz (romanlutz)]

Image doesn't load for me somehow. The tablist has the advantage that overflow is handled. I'll try options and will get back to you.