feat(ui): add and show displayName for agents

[PetrBulanek]

Closes: #675

[penge]

I'd suggest removing getAgentDisplayName and enriching the Agent object directly in the React Query hook — for example, by adding a label field.

[penge]

Issues

1. Hidden fallback: At first glance, getAgentDisplayName(agent) suggests it always returns display_name. The fallback to name isn't immediately obvious.
2. Excessive indirection: A simple one-liner is extracted into a utility function used across many files, adding mental overhead and development friction.
3. Import bloat: Importing getAgentDisplayName in multiple files clutters the codebase and reduces component readability.
4. Risk of inconsistent usage: Developers might forget to use the function, leading to inconsistent display logic across the app.

---

Suggestion

The cleanest and most efficient approach is to augment the React Query hook directly.
For a field that prefers display_name but falls back to name, introduce a new field called label.

---

Benefits of augmenting the hook

1. Centralized logic: The fallback is handled once inside the React Query hook. All consumers receive extended Agent objects automatically.
2. Improved readability: Components simply use agent.label, with no need to understand or call a helper function.
3. No redundant imports: No need to import a utility function in every file — the data comes ready to use.
4. Scales cleanly: Additional fields can be added later without affecting consuming code.
5. Type-safe and declarative: With a type like ExtendedAgent, it's immediately clear which fields are available — and why.

---

Example

In the hook:

.map((agent) => ({
  ...agent,
  label: agent.metadata?.annotations?.display_name ?? agent.name,
}))

In components:

{agent.label}

[tomkis]

This has to be reworked with the new Annotations metadata concept.

It's no longer valid after the changes.