Show item name in AI Catalog breadcrumbs

This MR is created with the help of 🤖

What does this MR do and why?

In the AI Catalog, items accessed via numeric-ID routes (/agents/:id, /flows/:id) show their raw database ID in the breadcrumb instead of their name. This affects any item reached that way — user-created agents, GitLab-maintained agents, and flows. You can check this live on gitlab.com: https://gitlab.com/explore/ai-catalog/agents/1005590 is the Support Helper agent, but its breadcrumb reads "1005590" instead of "Support Helper".

The mechanism that publishes a fetched item's name to the breadcrumb was added in !248145 (merged), but it was gated to foundational agents only. Custom agents are addressed by a numeric :id param instead, so they never matched and the breadcrumb fell back to rendering the raw route param.

The direction here (use the agent/flow name, since a numeric ID means nothing to a user, unlike an issue or MR number which is how people actually reference those) was settled by Michael Moyers in the issue discussion. This MR:

• Renames the shared breadcrumb state key from reference to itemKey (it can now hold either a numeric ID or a foundational reference string), and adds a small itemKeyFromRoute helper so both Vue apps derive the key the same way.
• Removes the foundational-only gate in the page component, so the fetched name is published for every item type. That component serves both custom agents and flows, so flows get the fix too.
• Updates the breadcrumb component to match the published name against the current route's item key rather than only a reference, and truncates the name at 25 characters (using the shared truncate helper from ~/lib/utils/text_utility).

Truncation is needed because item names allow up to 255 characters. GlBreadcrumb truncates by width, but only in its collapsed single-item case, and this breadcrumb passes auto-resize="false", so ordinary crumb items get flex-shrink: 0 and never ellipsis in CSS. A long name would otherwise stretch the breadcrumb bar. 25 characters is the typical range for navigation labels; other design systems handle this by truncating on pixel width instead, which wasn't available to us here.

While the name is loading, or if the query fails, the item crumb is now left out entirely instead of showing the numeric ID. We dropped the ID fallback because it flashed on screen on every page load before the name showed up. Leaving it out on a failed query is safe too, since the page already shows a not-found empty state at that point, so there's nothing useful the crumb could add; this also matches what foundational agents already do, and how the analytics dashboards breadcrumb behaves, which omits the crumb whenever the fetched name comes back empty.

Two things this MR deliberately does not do:

• MCP servers still show their numeric ID in the breadcrumb. They render through a different component (ai_catalog_mcp_server.vue) that doesn't touch this shared state, so fixing them here was out of scope. That's the same "what about other item types" question Florie raised in her review note, and it's worth its own follow-up issue.
• No feature flag. The foundational half of this code already sits behind ai_catalog_synthetic_foundational_items; the custom-agent half is a breadcrumb text correction on an already-GA path.

References

• Issue: #623549 (closed)
• Originating MR (where this was raised in review): !248145 (merged) (see note !248145 (comment 3735542525))

Screenshots or screen recordings

Before:

A foundational agent's breadcrumb refers to the agent with its ID:

A flow with its ID as breadcrumb

After:

A foundational agent's breadcrumb contains its name

A custom Agent with a name that's too long now has the breadcrumb truncating the name to less than 25 characters:

A flow with its name as breadcrumb

How to set up and validate locally

1. In a Rails console enable the foundational flag:

   Feature.enable(:ai_catalog_synthetic_foundational_items)

2. Create a custom agent through the UI (New agent on a project's Automate page). Give one a name longer than 25 characters to exercise the truncation.

3. Check each of these:

   URL	Before	After
   /explore/ai-catalog/agents/<id>	Agents / 4	Agents / My Agent
   /<group>/<project>/-/automate/agents/<id>/edit	Agents / 4 / Edit agent	Agents / My Agent / Edit agent
   /explore/ai-catalog/foundational_agents/support_assistant	Agents / Support Assistant	unchanged
   A long-named agent	Agents / 7	Agents / Quarterly Compliance Rev…

4. Navigate from one agent straight to another within the SPA. The item crumb should briefly disappear and never show the previous agent's name, which is the case the item-key guard covers. The loading window is very short locally, so throttle your network in devtools to actually see it.

The full ee/spec/frontend/ai/catalog/ suite passes (71 suites, 1749 tests), and ESLint/Prettier are clean on all five changed files. New spec coverage added for the custom-item path: the name shows for the current ID, a long name is truncated, the ID is used when no name is published yet, the ID is used when the published name belongs to a different item, and the name appears on nested routes such as edit.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.