Skip to content

[Agent Builder] New navigation foundation#257858

Merged
chrisbmar merged 13 commits intoelastic:ab-agent-centric-ux-feature-branchfrom
chrisbmar:ab-agent-centric-navigation-structure
Mar 16, 2026
Merged

[Agent Builder] New navigation foundation#257858
chrisbmar merged 13 commits intoelastic:ab-agent-centric-ux-feature-branchfrom
chrisbmar:ab-agent-centric-navigation-structure

Conversation

@chrisbmar
Copy link
Copy Markdown
Contributor

@chrisbmar chrisbmar commented Mar 16, 2026

Summary

closes https://github.com/elastic/search-team/issues/13360

Introduces an agent-centric navigation structure for Agent Builder with a unified sidebar that adapts based on the current route.

Key changes:

  • Centralized all routes and navigation logic into a single route_config.tsx definition
  • Added a unified sidebar component that renders different views (conversation, agent settings, manage) based on URL pattern matching
  • Restructured URLs to be agent-scoped (/agents/:agentId/*) with legacy URL redirects for backward compatibility
  • Routes behind experimental features flag are properly filtered

Conversation Routes are now:

/agents/:agentId (default view - new conversation)
/agents/:agentId/conversations/new
/agents/:agentId/conversations/:conversationId

Agent Settings Routes:

/agents/:agentId/skills
/agents/:agentId/plugins
/agents/:agentId/connectors
/agents/:agentId/instructions

Manage Routes (global CRUD, no agent context):

/manage/agents, /manage/agents/new
/manage/tools, /manage/tools/new, /manage/tools/:toolId, /manage/tools/bulk_import_mcp
/manage/skills, /manage/skills/new, /manage/skills/:skillId
/manage/plugins, /manage/plugins/:pluginId
/manage/connectors

Redirects:

//agents/:lastAgentId (last used agent from local storage, or elastic-default)
/conversations/new → /agents/:lastAgentId
/conversations/:id → fetch conversation, get agent_id, redirect to /agents/:agentId/conversations/:id

Screen.Recording.2026-03-13.at.16.48.25.mov

@@ -0,0 +1,54 @@
/*
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This component will be deleted entirely when the migration is complete. Right now, this renders for every route. When every route has been successfully migrated, this won't be imported by any route anymore and can be deleted.

@@ -0,0 +1,56 @@
/*
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

We have 1 unified sidebar so the content can be changed inside of it with a nice transition to be defined by design.

@@ -0,0 +1,198 @@
/*
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This file is new. It centralises routes, navLabels, and isExperimental in a single definition. It makes it easy for making any updates in future, either add a new object or edit an existing one - in one place!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

It was surprising to me that we didn't use RBAC to guard against rendering specific routes in production today. If a user doesn't have manageAgents I'm surprised that we still render /manage/agents

{
path: '/agents/:agentId/conversations/:conversationId',
sidebarView: 'conversation',
element: <RouteDisplay />,
Copy link
Copy Markdown
Contributor Author

@chrisbmar chrisbmar Mar 16, 2026

Choose a reason for hiding this comment

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

Notice that we render RouteDisplay for every route. This is to help with the migration aspect of realising once we have successfully migrated every route - at that point, we can delete this component entirely. Future PRs into the feature branch will handle the individual route migrations, it's out-of-scope for this PR.

</Route>
</Routes>
return (
<AppLayout>
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

AppLayout is new and contains the persisted sidebar on all routes.

@chrisbmar chrisbmar self-assigned this Mar 16, 2026
@chrisbmar chrisbmar added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting labels Mar 16, 2026
@chrisbmar chrisbmar marked this pull request as ready for review March 16, 2026 11:14
@chrisbmar chrisbmar requested a review from a team as a code owner March 16, 2026 11:14
@chrisbmar
Copy link
Copy Markdown
Contributor Author

The types failing in the CI check above are great! That's what will be handled in https://github.com/elastic/search-team/issues/13361 😄 but FYI this is being merged into the feature branch, so almost all branches that are going to get merged into the feature branch will have CI failing - this isn't cause for concern.

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Mar 16, 2026

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

  • [job] [logs] Agent Builder API Smoke Tests #1 / Agent Builder - LLM Smoke tests EIS Models (dynamically configured) Connector: google-gemini-3.1-pro can continue a text conversation
  • [job] [logs] FTR Configs #24 / Agent Builder converse Conversation Flow "after all" hook for "sends a message with tool call and receives response with thinking"
  • [job] [logs] FTR Configs #24 / Agent Builder converse Conversation Flow "after all" hook for "sends a message with tool call and receives response with thinking"
  • [job] [logs] FTR Configs #24 / Agent Builder converse Conversation Flow navigates to new conversation page and shows initial state
  • [job] [logs] FTR Configs #24 / Agent Builder converse Conversation Flow navigates to new conversation page and shows initial state
  • [job] [logs] Jest Tests #4 / route_config getSidebarViewForRoute agent routes returns "agentSettings" for tools route
  • [job] [logs] Jest Tests #4 / route_config getSidebarViewForRoute agent routes returns "agentSettings" for tools route

History

cc @chrisbmar

Copy link
Copy Markdown
Contributor

@SiddharthMantri SiddharthMantri left a comment

Choose a reason for hiding this comment

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

LGTM overall. I expect things will change as we start using this as the base for the rest of the pages.

@chrisbmar chrisbmar merged commit bc3d6a9 into elastic:ab-agent-centric-ux-feature-branch Mar 16, 2026
13 of 14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants