fix: role downgrade error handling and toast UX

.changeset/unnecessary-blue-marsupial.md

@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-manage-ui": patch
+---
+
+Fix toast UX: make text selectable, move close button to top-right

.changeset/young-moccasin-scallop.md

@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-core": patch
+---
+
+Fix role hierarchy by setting creatorRole to OWNER, add error handling in role change hook with descriptive APIError messages

agents-docs/content/deployment/(docker)/authentication.mdx

@@ -159,4 +159,4 @@ Verify these environment variables are set correctly:
 
 Organization Members need explicit project-level roles to access projects. Either:
 - Assign them a project role via **Project Settings** → **Members**
-- Promote them to organization Admin (gives access to all projects)
+- Promote them to organization Admin or Owner (gives access to all projects)

agents-docs/content/visual-builder/access-control.mdx

@@ -38,8 +38,11 @@ Each organization operates as an isolated tenant:
 
 | Role | Permissions |
 |------|-------------|
-| **Admin** | Full access to all projects and settings, can add members |
-| **Member** | Access determined by project-level roles |
+| **Owner** | All Admin permissions, plus: only other Owners can change an Owner's role, and only Owners can delete the organization |
+| **Admin** | Full access to all projects and settings, can manage members (invite, remove, change roles), manage teams, and configure access control |
+| **Member** | Access determined by project-level roles; cannot manage organization settings or other members |
+
+Organization creators are automatically assigned the Owner role.
 
 ### Managing Team Members
 
@@ -76,7 +79,7 @@ Assign granular roles at the project level to give organization Members specific
 4. Choose a role for the selected members and click **Add**
 
 <Tip>
-  Organization Admins always have full access to all projects, regardless of project-level roles.
+  Organization Owners and Admins always have full access to all projects, regardless of project-level roles.
 </Tip>
 
 ## User-Scoped vs Project-Scoped Resources

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/agents/[agentId]/page.client.tsx

@@ -14,7 +14,6 @@ import {
 import dynamic from 'next/dynamic';
 import { useParams, useRouter } from 'next/navigation';
 import { type ComponentProps, type FC, useEffect, useState } from 'react';
-import { toast } from 'sonner';
 import { EdgeType, edgeTypes, initialEdges } from '@/components/agent/configuration/edge-types';
 import {
   agentNodeSourceHandleId,
@@ -63,6 +62,7 @@ import type { Credential } from '@/lib/api/credentials';
 import type { DataComponent } from '@/lib/api/data-components';
 import type { ExternalAgent } from '@/lib/api/external-agents';
 import { saveAgent } from '@/lib/services/save-agent';
+import { toast } from '@/lib/toast';
 import type {
   AgentToolConfig,
   AgentToolConfigLookup,

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/credentials/new/bearer/page.tsx

@@ -3,7 +3,6 @@ import { generateIdFromName } from '@inkeep/agents-core/client-exports';
 import { CredentialStoreType } from '@inkeep/agents-core/types';
 import { useRouter } from 'next/navigation';
 import { use, useEffect } from 'react';
-import { toast } from 'sonner';
 import { CredentialForm } from '@/components/credentials/views/credential-form';
 import { CredentialFormInkeepCloud } from '@/components/credentials/views/credential-form-inkeep-cloud';
 import type { CredentialFormOutput } from '@/components/credentials/views/credential-form-validation';
@@ -13,6 +12,7 @@ import { useAuthSession } from '@/hooks/use-auth';
 import { createCredentialInStore } from '@/lib/api/credentialStores';
 import { updateExternalAgent } from '@/lib/api/external-agents';
 import { updateMCPTool } from '@/lib/api/tools';
+import { toast } from '@/lib/toast';
 import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
 import { generateId } from '@/lib/utils/id-utils';
 

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/credentials/new/providers/[providerId]/page.tsx

@@ -5,7 +5,6 @@ import type { ApiProvider } from '@nangohq/types';
 import NextLink from 'next/link';
 import { useRouter } from 'next/navigation';
 import { use, useCallback, useEffect, useState } from 'react';
-import { toast } from 'sonner';
 import { requiresCredentialForm } from '@/components/credentials/views/auth-form-config';
 import { GenericAuthForm } from '@/components/credentials/views/generic-auth-form';
 import { Button } from '@/components/ui/button';
@@ -16,6 +15,7 @@ import { useNangoConnect } from '@/hooks/use-nango-connect';
 import { useNangoProviders } from '@/hooks/use-nango-providers';
 import { createProviderConnectSession } from '@/lib/mcp-tools/nango';
 import { NangoError } from '@/lib/mcp-tools/nango-types';
+import { toast } from '@/lib/toast';
 import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
 import { generateId } from '@/lib/utils/id-utils';
 

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/datasets/new/page.tsx

@@ -4,7 +4,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
 import { use, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { DeleteDatasetConfirmation } from '@/components/datasets/delete-dataset-confirmation';
 import { type DatasetFormData, datasetSchema } from '@/components/datasets/form/validation';
 import { GenericInput } from '@/components/form/generic-input';
@@ -13,6 +12,7 @@ import { Dialog, DialogTrigger } from '@/components/ui/dialog';
 import { Form } from '@/components/ui/form';
 import { createDatasetAction, updateDatasetAction } from '@/lib/actions/datasets';
 import type { Dataset } from '@/lib/api/datasets';
+import { toast } from '@/lib/toast';
 
 const formatFormData = (data?: DatasetFormData): DatasetFormData => {
   if (!data) {

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/traces/conversations/[conversationId]/page.tsx

@@ -11,7 +11,6 @@ import {
 import NextLink from 'next/link';
 import { useRouter } from 'next/navigation';
 import { use, useEffect, useState } from 'react';
-import { toast } from 'sonner';
 import { MCPBreakdownCard } from '@/components/traces/mcp-breakdown-card';
 import { SignozLink } from '@/components/traces/signoz-link';
 import { InfoRow } from '@/components/traces/timeline/blocks';
@@ -27,6 +26,7 @@ import { ResizablePanelGroup } from '@/components/ui/resizable';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useRuntimeConfig } from '@/contexts/runtime-config';
 import { rerunTriggerAction } from '@/lib/actions/triggers';
+import { toast } from '@/lib/toast';
 import { formatDateTime, formatDuration } from '@/lib/utils/format-date';
 import { getSignozTracesExplorerUrl } from '@/lib/utils/signoz-links';
 import {

agents-manage-ui/src/app/[tenantId]/work-apps/github/[installationId]/page.tsx

@@ -4,7 +4,6 @@ import { ArrowLeft, ArrowUpRight, Building2, RefreshCw, User } from 'lucide-reac
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { use, useCallback, useEffect, useState } from 'react';
-import { toast } from 'sonner';
 import { ErrorContent } from '@/components/errors/full-page-error';
 import { DisconnectInstallationDialog } from '@/components/settings/work-app-github-disconnect-dialog';
 import { Badge } from '@/components/ui/badge';
@@ -24,6 +23,7 @@ import {
   fetchWorkAppGitHubInstallationDetail,
   syncWorkAppGitHubRepositories,
 } from '@/lib/api/github';
+import { toast } from '@/lib/toast';
 import { formatDate, formatDateTimeTable } from '@/lib/utils/format-date';
 import { getGitHubInstallationSettingsUrl } from '@/lib/utils/work-app-github-utils';
 import GitHubInstallationDetailLoading from './loading';

agents-manage-ui/src/app/[tenantId]/work-apps/github/page.tsx

@@ -3,13 +3,13 @@
 import { Github } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { use, useCallback, useEffect, useState } from 'react';
-import { toast } from 'sonner';
 import { ErrorContent } from '@/components/errors/full-page-error';
 import EmptyState from '@/components/layout/empty-state';
 import { WorkAppGitHubInstallButton } from '@/components/settings/work-app-github-install-button';
 import { WorkAppGitHubInstallationsList } from '@/components/settings/work-app-github-installations-list';
 import type { WorkAppGitHubInstallation } from '@/lib/api/github';
 import { fetchWorkAppGitHubInstallations } from '@/lib/api/github';
+import { toast } from '@/lib/toast';
 import GitHubSettingsLoading from './loading';
 
 interface PageParams {

agents-manage-ui/src/components/access/hooks/use-project-access.ts

@@ -2,14 +2,14 @@
 
 import { OrgRoles, type ProjectRole } from '@inkeep/agents-core/client-exports';
 import { useCallback, useEffect, useState } from 'react';
-import { toast } from 'sonner';
 import { useAuthClient } from '@/contexts/auth-client';
 import {
   addProjectMember,
   listProjectMembers,
   removeProjectMember,
   updateProjectMember,
 } from '@/lib/api/project-members';
+import { toast } from '@/lib/toast';
 import type {
   AccessPrincipal,
   InheritedAccessConfig,

agents-manage-ui/src/components/agent/copilot/copilot-chat.tsx

@@ -3,14 +3,14 @@
 import { InkeepSidebarChat } from '@inkeep/agents-ui';
 import { Loader2, RefreshCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { INKEEP_BRAND_COLOR } from '@/constants/theme';
 import { useCopilotContext } from '@/contexts/copilot';
 import { useRuntimeConfig } from '@/contexts/runtime-config';
 import { useCopilotToken } from '@/hooks/use-copilot-token';
 import { useOAuthLogin } from '@/hooks/use-oauth-login';
 import { sentry } from '@/lib/sentry';
+import { toast } from '@/lib/toast';
 import { css } from '@/lib/utils';
 import { generateId } from '@/lib/utils/id-utils';
 import { IkpMessage } from './message-parts/message';

agents-manage-ui/src/components/agent/copilot/message-parts/tool-approval.tsx

@@ -1,12 +1,12 @@
 import type { DataOperationEvent } from '@inkeep/agents-core';
 import { CheckIcon, type LucideIcon, SettingsIcon, Trash2Icon } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { toast } from 'sonner';
 import { Heading } from '@/components/agent/sidepane/heading';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import type { FieldDiff } from '@/lib/actions/tool-approval';
 import { fetchToolApprovalDiff } from '@/lib/actions/tool-approval';
+import { toast } from '@/lib/toast';
 import { parseToolNameForDisplay } from '@/lib/utils/tool-name-display';
 import { DiffField } from '../components/diff-viewer';
 import { LoadingIndicator } from './loading';

agents-manage-ui/src/components/agent/playground/custom-headers-dialog.tsx

@@ -2,7 +2,6 @@ import type { StringRecordSchema } from '@inkeep/agents-core/client-exports';
 import { Pencil, Plus } from 'lucide-react';
 import type { FC } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
-import { toast } from 'sonner';
 import type { z } from 'zod';
 import { StandaloneJsonEditor } from '@/components/editors/standalone-json-editor';
 import { FormFieldWrapper } from '@/components/form/form-field-wrapper';
@@ -18,6 +17,7 @@ import {
 } from '@/components/ui/dialog';
 import { Form } from '@/components/ui/form';
 import { customHeadersTemplate } from '@/lib/templates';
+import { toast } from '@/lib/toast';
 
 type DefaultHeaders = z.infer<typeof StringRecordSchema>;
 

agents-manage-ui/src/components/agent/playground/playground.tsx

@@ -2,7 +2,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Bug, X } from 'lucide-react';
 import { type Dispatch, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { z } from 'zod';
 import { TimelineWrapper } from '@/components/traces/timeline/timeline-wrapper';
 import { Button } from '@/components/ui/button';
@@ -11,6 +10,7 @@ import { useCopilotContext } from '@/contexts/copilot';
 import { useAgentStore } from '@/features/agent/state/use-agent-store';
 import { useChatActivitiesPolling } from '@/hooks/use-chat-activities-polling';
 import type { DataComponent } from '@/lib/api/data-components';
+import { toast } from '@/lib/toast';
 import { generateId } from '@/lib/utils/id-utils';
 import {
   copyFullTraceToClipboard,

agents-manage-ui/src/components/agent/sidepane/edges/edge-editor.tsx

@@ -1,7 +1,6 @@
 import { type Edge, useNodesData, useReactFlow } from '@xyflow/react';
 import { Spline, Trash2 } from 'lucide-react';
 import { useCallback } from 'react';
-import { toast } from 'sonner';
 import { DashedSplineIcon } from '@/components/icons/dashed-spline';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -11,6 +10,7 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Separator } from '@/components/ui/separator';
 import { useProjectPermissions } from '@/contexts/project';
 import { useAgentActions } from '@/features/agent/state/use-agent-store';
+import { toast } from '@/lib/toast';
 import { getCycleErrorMessage, wouldCreateCycle } from '@/lib/utils/cycle-detection';
 import type { A2AEdgeData } from '../../configuration/edge-types';
 

agents-manage-ui/src/components/agent/sidepane/nodes/mcp-node-editor.tsx

@@ -3,7 +3,6 @@ import { AlertTriangle, Check, CircleAlert, Loader2, Shield, Trash2, X } from 'l
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { toast } from 'sonner';
 import { StandaloneJsonEditor } from '@/components/editors/standalone-json-editor';
 import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
@@ -20,6 +19,7 @@ import { useAgentActions, useAgentStore } from '@/features/agent/state/use-agent
 import { useNodeEditor } from '@/hooks/use-node-editor';
 import { useMcpToolStatusQuery } from '@/lib/query/mcp-tools';
 import { headersTemplate } from '@/lib/templates';
+import { toast } from '@/lib/toast';
 import type { AgentToolConfigLookup } from '@/lib/types/agent-full';
 import { getActiveTools } from '@/lib/utils/active-tools';
 import {

agents-manage-ui/src/components/agents/agent-form.tsx

@@ -3,10 +3,10 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { z } from 'zod';
 import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
 import { createAgentAction, updateAgentAction } from '@/lib/actions/agent-full';
+import { toast } from '@/lib/toast';
 import { idSchema } from '@/lib/validation';
 import { GenericInput } from '../form/generic-input';
 import { GenericTextarea } from '../form/generic-textarea';

agents-manage-ui/src/components/agents/delete-agent-confirmation.tsx

@@ -2,9 +2,9 @@
 
 import { useParams } from 'next/navigation';
 import { useState } from 'react';
-import { toast } from 'sonner';
 import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
 import { deleteFullAgentAction } from '@/lib/actions/agent-full';
+import { toast } from '@/lib/toast';
 
 interface DeleteAgentConfirmationProps {
   agentId: string;

agents-manage-ui/src/components/api-keys/delete-api-key-confirmation.tsx

@@ -2,10 +2,10 @@
 
 import { useParams } from 'next/navigation';
 import { useState } from 'react';
-import { toast } from 'sonner';
 import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
 import { Dialog } from '@/components/ui/dialog';
 import { deleteApiKeyAction } from '@/lib/actions/api-keys';
+import { toast } from '@/lib/toast';
 
 interface DeleteApiKeyConfirmationProps {
   apiKeyId: string;

agents-manage-ui/src/components/api-keys/form/api-key-form.tsx

@@ -2,7 +2,6 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { GenericComboBox } from '@/components/form/generic-combo-box';
 import { GenericInput } from '@/components/form/generic-input';
 import type { SelectOption } from '@/components/form/generic-select';
@@ -11,6 +10,7 @@ import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
 import { createApiKeyAction } from '@/lib/actions/api-keys';
 import type { ApiKey, ApiKeyCreateResponse } from '@/lib/api/api-keys';
+import { toast } from '@/lib/toast';
 import { defaultValues } from './form-configuration';
 import { type ApiKeyFormData, apiKeySchema, EXPIRATION_DATE_OPTIONS } from './validation';
 

agents-manage-ui/src/components/api-keys/form/api-key-update-form.tsx

@@ -2,13 +2,13 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { GenericInput } from '@/components/form/generic-input';
 import { GenericSelect } from '@/components/form/generic-select';
 import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
 import { updateApiKeyAction } from '@/lib/actions/api-keys';
 import type { ApiKey } from '@/lib/api/api-keys';
+import { toast } from '@/lib/toast';
 import { type ApiKeyUpdateData, apiKeyUpdateSchema, EXPIRATION_DATE_OPTIONS } from './validation';
 
 interface ApiKeyUpdateFormProps {

agents-manage-ui/src/components/artifact-components/delete-artifact-component-confirmation.tsx

@@ -2,9 +2,9 @@
 
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
-import { toast } from 'sonner';
 import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
 import { deleteArtifactComponentAction } from '@/lib/actions/artifact-components';
+import { toast } from '@/lib/toast';
 
 interface DeleteArtifactComponentConfirmationProps {
   artifactComponentId: string;

agents-manage-ui/src/components/artifact-components/form/artifact-component-form.tsx

@@ -4,7 +4,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { GenericInput } from '@/components/form/generic-input';
 import { GenericTextarea } from '@/components/form/generic-textarea';
 import { JsonSchemaInput } from '@/components/form/json-schema-input';
@@ -16,6 +15,7 @@ import {
   createArtifactComponentAction,
   updateArtifactComponentAction,
 } from '@/lib/actions/artifact-components';
+import { toast } from '@/lib/toast';
 import { isRequired } from '@/lib/utils';
 import { DeleteArtifactComponentConfirmation } from '../delete-artifact-component-confirmation';
 import { ComponentRenderGenerator } from '../render/component-render-generator';

agents-manage-ui/src/components/artifact-components/render/component-render-generator.tsx

@@ -2,7 +2,6 @@
 
 import { Loader2, RefreshCw, Sparkles, Trash2 } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
-import { toast } from 'sonner';
 import { Streamdown } from 'streamdown';
 import { CodeEditor } from '@/components/editors/code-editor';
 import { JsonEditor } from '@/components/editors/json-editor';
@@ -16,6 +15,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { UseInYourAppModal } from '@/components/use-in-your-app-modal';
 import { DOCS_BASE_URL } from '@/constants/theme';
 import { updateArtifactComponent } from '@/lib/api/artifact-components';
+import { toast } from '@/lib/toast';
 import { DynamicComponentRenderer } from '../../dynamic-component-renderer';
 
 interface ComponentPreviewGeneratorProps {

agents-manage-ui/src/components/credentials/credential-item.tsx

@@ -3,7 +3,6 @@
 import { MoreVertical, Trash2 } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useState } from 'react';
-import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogTrigger } from '@/components/ui/dialog';
 import {
@@ -23,6 +22,7 @@ import {
 import { useProjectPermissions } from '@/contexts/project';
 import { deleteCredentialAction } from '@/lib/actions/credentials';
 import type { Credential } from '@/lib/api/credentials';
+import { toast } from '@/lib/toast';
 import { formatDate } from '@/lib/utils/format-date';
 import { ProviderIcon } from '../icons/provider-icon';
 import { DeleteConfirmation } from '../ui/delete-confirmation';