feat(services): redesign agentic workflow configuration

apps/console/src/app/components/header/breadcrumbs/breadcrumbs.tsx

@@ -7,64 +7,114 @@ import { sortProjectsByFavorite, useFavoriteProjects, useProjects } from '@qover
 import { ServiceAvatar, ServiceStateChip, useServices } from '@qovery/domains/services/feature'
 import { Avatar } from '@qovery/shared/ui'
 import { Separator } from '../header'
+import { type AppSpace } from '../space-switcher/space-switcher'
 import { BreadcrumbItem, type BreadcrumbItemData, type BreadcrumbMenuAction } from './breadcrumb-item'
 
-export function Breadcrumbs() {
+interface BreadcrumbsProps {
+  activeSpace?: AppSpace
+}
+
+type BreadcrumbData = {
+  item: BreadcrumbItemData
+  items: BreadcrumbItemData[]
+}
+
+function useOrganizationBreadcrumb(activeSpace: AppSpace) {
   const { buildLocation } = useRouter()
   const location = useLocation()
-  const {
-    organizationId = '',
-    clusterId = '',
-    projectId = '',
-    environmentId = '',
-    serviceId = '',
-  } = useParams({ strict: false })
-
+  const { organizationId = '' } = useParams({ strict: false })
   const { data: organizations = [] } = useOrganizations({
     enabled: true,
     suspense: true,
   })
   const { data: organization } = useOrganization({ organizationId, enabled: !!organizationId, suspense: true })
-  const { data: clusters = [] } = useClusters({ organizationId, suspense: true })
-  const { data: projects = [] } = useProjects({ organizationId, suspense: true })
-  const { isProjectFavorite } = useFavoriteProjects({ organizationId })
-  const { data: environments = [] } = useEnvironments({ projectId, suspense: true })
-  const { data: services = [] } = useServices({ environmentId, suspense: true })
 
   // Necessary to keep the organization from client by Qovery team
   const allOrganizations =
     organizations.find((org) => org.id !== organizationId) && organization
       ? [...organizations.filter((org) => org.id !== organizationId), organization]
       : organizations
-  const previousUrl = location.href
 
-  const orgItems: BreadcrumbItemData[] = allOrganizations
+  const items: BreadcrumbItemData[] = [...allOrganizations]
     .sort((a, b) => a.name.trim().localeCompare(b.name.trim()))
     .map((organization) => ({
       id: organization.id,
       label: organization.name,
-      path: buildLocation({ to: '/organization/$organizationId/overview', params: { organizationId: organization.id } })
-        .href,
+      path:
+        activeSpace === 'agents'
+          ? buildLocation({
+              to: '/organization/$organizationId/agents',
+              params: { organizationId: organization.id },
+            }).href
+          : buildLocation({
+              to: '/organization/$organizationId/infrastructure/overview',
+              params: { organizationId: organization.id },
+            }).href,
       logo_url: organization.logo_url ?? undefined,
     }))
-  const createOrganizationAction: BreadcrumbMenuAction = {
+
+  const currentOrganization = items.find((organization) => organization.id === organizationId)
+  const data: BreadcrumbData | undefined = currentOrganization
+    ? {
+        item: {
+          ...currentOrganization,
+          prefix: (
+            <Avatar
+              src={currentOrganization.logo_url}
+              fallback={currentOrganization.label.charAt(0).toUpperCase()}
+              size="sm"
+              border="solid"
+              className="mr-0.5"
+            />
+          ),
+        },
+        items,
+      }
+    : undefined
+
+  const footerAction: BreadcrumbMenuAction = {
     label: 'Create organization',
     path: '/onboarding/project',
     search: {
-      previousUrl,
+      previousUrl: location.href,
     },
   }
 
-  const currentOrg = useMemo(
-    () => orgItems.find((organization) => organization.id === organizationId),
-    [organizationId, orgItems]
-  )
+  return { data, footerAction }
+}
+
+export function Breadcrumbs({ activeSpace = 'infrastructure' }: BreadcrumbsProps) {
+  return activeSpace === 'agents' ? <OrganizationBreadcrumbs /> : <InfrastructureBreadcrumbs />
+}
+
+function OrganizationBreadcrumbs() {
+  const { data, footerAction } = useOrganizationBreadcrumb('agents')
+
+  return <BreadcrumbTrail data={data ? [data] : []} footerAction={footerAction} />
+}
+
+function InfrastructureBreadcrumbs() {
+  const { buildLocation } = useRouter()
+  const {
+    organizationId = '',
+    clusterId = '',
+    projectId = '',
+    environmentId = '',
+    serviceId = '',
+  } = useParams({ strict: false })
+
+  const { data: organizationBreadcrumb, footerAction } = useOrganizationBreadcrumb('infrastructure')
+  const { data: clusters = [] } = useClusters({ organizationId, suspense: true })
+  const { data: projects = [] } = useProjects({ organizationId, suspense: true })
+  const { isProjectFavorite } = useFavoriteProjects({ organizationId })
+  const { data: environments = [] } = useEnvironments({ projectId, suspense: true })
+  const { data: services = [] } = useServices({ environmentId, suspense: true })
 
   const clusterItems: BreadcrumbItemData[] = clusters.map((cluster) => ({
     id: cluster.id,
     label: cluster.name,
     path: buildLocation({
-      to: '/organization/$organizationId/cluster/$clusterId/overview',
+      to: '/organization/$organizationId/infrastructure/cluster/$clusterId/overview',
       params: { organizationId, clusterId: cluster.id },
     }).href,
   }))
@@ -73,7 +123,7 @@ export function Breadcrumbs() {
     id: project.id,
     label: project.name,
     path: buildLocation({
-      to: '/organization/$organizationId/project/$projectId/overview',
+      to: '/organization/$organizationId/infrastructure/project/$projectId/overview',
       params: { organizationId, projectId: project.id },
     }).href,
   }))
@@ -85,7 +135,7 @@ export function Breadcrumbs() {
       label: environment.name,
       prefix: <EnvironmentMode mode={environment.mode} variant="shrink" />,
       path: buildLocation({
-        to: '/organization/$organizationId/project/$projectId/environment/$environmentId/overview',
+        to: '/organization/$organizationId/infrastructure/project/$projectId/environment/$environmentId/overview',
         params: { organizationId, projectId: environment.project.id, environmentId: environment.id },
       }).href,
     }))
@@ -96,7 +146,7 @@ export function Breadcrumbs() {
       id: service.id,
       label: service.name,
       path: buildLocation({
-        to: '/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/overview',
+        to: '/organization/$organizationId/infrastructure/project/$projectId/environment/$environmentId/service/$serviceId/overview',
         params: { organizationId, projectId, environmentId, serviceId: service.id },
       }).href,
       prefix: (
@@ -125,33 +175,15 @@ export function Breadcrumbs() {
     [serviceId, serviceItems]
   )
 
-  const breadcrumbData: Array<{ item: BreadcrumbItemData; items: BreadcrumbItemData[] }> = []
-
-  if (currentOrg) {
-    breadcrumbData.push({
-      item: {
-        ...currentOrg,
-        prefix: (
-          <Avatar
-            src={currentOrg.logo_url}
-            fallback={currentOrg.label.charAt(0).toUpperCase()}
-            size="sm"
-            border="solid"
-            className="mr-0.5"
-          />
-        ),
-      },
-      items: orgItems,
-    })
-  }
+  const breadcrumbData: BreadcrumbData[] = organizationBreadcrumb ? [organizationBreadcrumb] : []
 
   if (currentCluster) {
     breadcrumbData.push({
       item: {
         id: 'clusters',
         label: 'Clusters',
         path: buildLocation({
-          to: '/organization/$organizationId/clusters',
+          to: '/organization/$organizationId/infrastructure/clusters',
           params: { organizationId },
         }).href,
       },
@@ -187,24 +219,31 @@ export function Breadcrumbs() {
     })
   }
 
+  return <BreadcrumbTrail data={breadcrumbData} footerAction={footerAction} />
+}
+
+interface BreadcrumbTrailProps {
+  data: BreadcrumbData[]
+  footerAction: BreadcrumbMenuAction
+}
+
+function BreadcrumbTrail({ data, footerAction }: BreadcrumbTrailProps) {
   return (
     <div className="no-scrollbar flex min-w-0 items-center gap-2 overflow-x-auto whitespace-nowrap">
-      {breadcrumbData.map((data, index) => (
+      {data.map((breadcrumb, index) => (
         <div
-          key={data.item.id}
+          key={breadcrumb.item.id}
           className={
-            index === breadcrumbData.length - 1
-              ? 'flex min-w-0 flex-1 items-center gap-2'
-              : 'flex shrink-0 items-center gap-2'
+            index === data.length - 1 ? 'flex min-w-0 flex-1 items-center gap-2' : 'flex shrink-0 items-center gap-2'
           }
         >
           <BreadcrumbItem
-            item={data.item}
-            items={data.items}
-            isCurrentScope={index === breadcrumbData.length - 1}
-            footerAction={index === 0 ? createOrganizationAction : undefined}
+            item={breadcrumb.item}
+            items={breadcrumb.items}
+            isCurrentScope={index === data.length - 1}
+            footerAction={index === 0 ? footerAction : undefined}
           />
-          {index < breadcrumbData.length - 1 && <Separator />}
+          {index < data.length - 1 && <Separator />}
         </div>
       ))}
     </div>

apps/console/src/app/components/header/header.tsx

@@ -1,11 +1,12 @@
-import { Link, useParams } from '@tanstack/react-router'
+import { useParams } from '@tanstack/react-router'
 import posthog from 'posthog-js'
 import { Suspense, useCallback } from 'react'
 import { AssistantTrigger } from '@qovery/shared/assistant/feature'
 import { DevopsCopilotButton } from '@qovery/shared/devops-copilot/feature'
 import { SpotlightTrigger } from '@qovery/shared/spotlight/feature'
-import { Button, LogoIcon } from '@qovery/shared/ui'
+import { Button } from '@qovery/shared/ui'
 import { Breadcrumbs } from './breadcrumbs/breadcrumbs'
+import { type AppSpace, SpaceSwitcher } from './space-switcher/space-switcher'
 import { UserMenu } from './user-menu/user-menu'
 
 export function Separator() {
@@ -21,7 +22,11 @@ export function Separator() {
   )
 }
 
-export function Header() {
+interface HeaderProps {
+  activeSpace?: AppSpace
+}
+
+export function Header({ activeSpace = 'infrastructure' }: HeaderProps) {
   const { organizationId = '' } = useParams({ strict: false })
   const handleFeedbackClick = useCallback(() => {
     posthog.capture('feedback_button_clicked_new_navigation')
@@ -30,16 +35,11 @@ export function Header() {
   return (
     <header className="relative z-header w-full bg-background-secondary py-4 pl-3 pr-4">
       <div className="flex items-center gap-3 md:gap-4">
-        <div className="flex shrink-0 items-center gap-4">
-          <Link to="/organization/$organizationId/overview" params={{ organizationId }}>
-            <LogoIcon />
-          </Link>
-          <Separator />
-        </div>
+        <SpaceSwitcher activeSpace={activeSpace} organizationId={organizationId} />
         <Suspense fallback={<div className="h-8 flex-1" />}>
           <div className="flex min-w-0 flex-1 items-center gap-3">
             <div className="min-w-0 flex-1">
-              <Breadcrumbs />
+              <Breadcrumbs activeSpace={activeSpace} />
             </div>
             <div className="ml-auto flex shrink-0 items-center gap-2">
               <div className="hidden md:block">

apps/console/src/app/components/header/space-switcher/space-switcher.tsx

@@ -0,0 +1,75 @@
+import { Link } from '@tanstack/react-router'
+import clsx from 'clsx'
+import { AgentIcon, DropdownMenu, Icon, LogoIcon } from '@qovery/shared/ui'
+
+export type AppSpace = 'agents' | 'infrastructure'
+
+interface SpaceSwitcherProps {
+  activeSpace: AppSpace
+  organizationId: string
+}
+
+const SPACES = [
+  {
+    id: 'infrastructure',
+    label: 'Provision',
+    path: '/organization/$organizationId/infrastructure/overview',
+  },
+  {
+    id: 'agents',
+    label: 'Agents',
+    path: '/organization/$organizationId/agents',
+  },
+] as const
+
+export function SpaceSwitcher({ activeSpace, organizationId }: SpaceSwitcherProps) {
+  const currentSpace = SPACES.find((space) => space.id === activeSpace) ?? SPACES[0]
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button
+          type="button"
+          aria-label={`Switch space, currently ${currentSpace.label}`}
+          className="group flex h-9 shrink-0 items-center gap-2 rounded-md border border-neutral bg-surface-neutral px-2 text-sm font-medium text-neutral outline-none transition-colors hover:border-brand-component hover:bg-surface-brand-component focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand-text"
+        >
+          {activeSpace === 'agents' ? (
+            <AgentIcon className="h-5 w-5 text-brand" />
+          ) : (
+            <LogoIcon className="h-5 w-5 text-brand" />
+          )}
+          <span className="hidden sm:inline">{currentSpace.label}</span>
+          <Icon
+            iconName="angles-up-down"
+            className="text-xs text-neutral-subtle transition-colors group-hover:text-brand"
+            aria-hidden="true"
+          />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="start" className="w-[232px] gap-0">
+        {SPACES.map((space) => {
+          const isActive = space.id === activeSpace
+
+          return (
+            <DropdownMenu.Item
+              key={space.id}
+              asChild
+              className="mb-1 h-auto truncate rounded px-2 py-2 text-sm font-medium text-neutral last:mb-0 data-[highlighted]:bg-surface-brand-subtle data-[highlighted]:text-brand"
+            >
+              <Link to={space.path} params={{ organizationId }} className="flex w-full min-w-0 items-center gap-3">
+                <Icon
+                  iconName="check"
+                  className={clsx('shrink-0 text-positive', {
+                    'opacity-0': !isActive,
+                  })}
+                  aria-hidden="true"
+                />
+                <span className="min-w-0 flex-1 truncate">{space.label}</span>
+              </Link>
+            </DropdownMenu.Item>
+          )
+        })}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}